Создание модуля: шаг за шагом

1.Постановка задачи
2.Выбор типов блоков
3.Пишем блоки
4.Собираем модуль
5.Несем администратору

1.Постановка задачи

1. Тип блока notes

Вы решили разместить на сервере НГУ новую информацию. Это прекрасно, сразу видно, что вы осознаете, что на дворе - век информации. Но с чего начать? И как ее разместить? Очень просто.

Давайте, для определенности, предположим, что вас зовут Сидоров и вы хотите разместить на страницах сервера НГУ информацию о замечательном открытии, которое вы совершили вместе со своим коллегой Петровым.

Для начала нужно определиться с тем, какого рода информацию вы хотите разместить. Допустим, вы имеете замечательную фотографию, где вы вместе с Петровым выступаете перед шведским королевским обществом. Вы хотите дать небольшую текстовую информацию о своем открытии, а еще у вас есть несколько ссылок на публикации, посвященные вашему открытию.

Сервер НГУ имеет модульную структуру: информация разделена на смысловые куски и каждая страница может состоять из нескольких модулей. Модули могут быть узкие (они располагаются в левых колонках страниц) и широкие (правая колонка). Основное содержание страницы располагается именно в правой, широкой колонке.

Модули образуются из блоков, при этом различные типы блоков предназначены для различной информации. Некоторые типы блоков (например, формы), можно использовать только в узких модулях, а некоторые - только в широких (например, таблицы). Если вы, господин Сидоров, хотите видеть свою информацию в широкой колонке, то следует формировать свой модуль из блоков, которые подойдут для широкой колонки.

Итак, вам нужно сконструировать модуль, предназначенный для широкой колонки, который должен содержать: 1. Текстовую информацию, 2. Картинку, 3. Набор ссылок.

Теперь можно определиться с типами блоков, из которых вы соберете модуль.

2.Выбор типов блоков

Все допустимые типы блоков перечислены в Справочнике по оформлению. Для каждого типа блоков там указано, для каких колонок подходит данный тип блока. Познакомившись с описанием и назначением различных блоков, вы, господин Сидоров, можете выбрать, например, следующие три типа блоков:

1. Для отображения текстовой информации - тип блока notes. В справочнике сказано, что он подходит и для узких и для широких колонок.

2. Для отображения картинки - тип блока illustrated. Он тоже подходит и для узких и для широких колонок.

3. Для отображения набора ссылок - тип блока link_set. И этот тип блока можно располагать везде.

Итак, вы видите, что вы выбрали такие блоки, которые позволят размещать модуль с вашей информацией как в широкой, так и в узкой колонке. Это расширяет ваши возможности, поздравляем вас, господин Сидоров.

Приступайте к написанию блоков.

3.Пишем блоки

1. Текстовая информация в блоке типа notes

Пусть вы имеете следующий краткий текст, который бы вы хотели разместить в своем модуле:

"Мы с Петровым сделали открытие. Мы обнаружили в городской электропроводке братьев по разуму.
Установлено, что они живут особенно хорошо только в цепях переменного напряжения 220 вольт. При снижении напряжения до 210 вольт наши братья по разуму разум теряют, в при скачках напряжения до 240 вольт (что часто бывает, когда у нашего соседа отключается чайник), братья по разуму становятся агрессивными.

Проводятся эксперименты над установлением контакта с братьями по разуму, которых мы назвали "homo electrus"."

Текст состоит из двух параграфов, первый параграф состоит из двух абзацев. По правилам создания блока типа notes, следует написать так:

<block type="notes">
<item>
  <note>
  Мы с Петровым сделали открытие.
  Мы обнаружили в городской электропроводке 
  братьев по разуму.
  </note>
  <note>
  Установлено, что они живут особенно хорошо только
  в цепях переменного напряжения 220 вольт. При
  снижении напряжения до 210 вольт наши братья по
  разуму разум теряют, в при скачках напряжения до
  240 вольт (что часто бывает, когда у нашего соседа
  отключается чайник), братья по разуму становятся
  агрессивными.
  </note>
</item>
<item>
  <note>
  Проводятся эксперименты над установлением контакта с
  братьями по разуму, которых мы назвали
  "homo electrus".
  </note>
</item>
</block>

Вы написали основу блока. Теперь дополним его несколько. В справочнике сказано, что текст в блоках этого типа автоматически центруется. Вас это устраивает? Нет? Вы хотите, чтобы текст был выравнен по левому краю модуля? Тогда добавьте к элементам item атрибут align и приравняйте его значение left:

...
  <item align="left">...</item>
...

В разделе справочника Дополнительные возможности описаны способы до-оформить текст. Я знаю, господин Сидоров, что вы хотите выделит термин "homo electrus" курсивом. Это следует сделать так:

...
... назвали <i>"homo electrus"</i>.
</note>
...

Все, первый блок написан.

2. Картинка в блоке типа illustrated

Прежде, чем начинать писать следующий модуль, в котором вы разместите фотографию, следует решить, где будет лежать эта картинка: на сервере НГУ или где-то в другом месте сети. Кроме того, следует узнать размер картинки в пикселях. Допустим, ваша картинка лежит по адресу http://provodka.ru/source/img/nobel.jpg и имеет ширину 360, а высоту - 200 пикселей.

Также, господин Сидоров, вы можете дать название картинки, которое будет над ней всплывать и небольшое описание, которое разместится под ней как подпись. Допустим, это: "Мы сделали это!" и "Я и Петров жмем руку королю Швеции" соответственно.

Теперь все готово к написанию этого блока:

<block type="illustrated">
<item>
  <picture width="360" height="200">
  http://provodka.ru/source/img/nobel.jpg
  </picture>
  <name>
  Мы сделали это!
  </name>
  <description>
  Я и Петров жмем руку королю Швеции
  </description>
</item>
</block>

Сидоров, обратите внимание, что картинка шире, чем узкий модуль (180 пикселей), поэтому при таких размерах картинки ваш модуль не поместишь в узкую колонку. Для того, чтобы решить эту проблему можно: 1. Сделать другую картинку, шириной около 170 пикселей, чтобы модуль легко влазил как в узкую, так и в широкую колонку. 2. Применять в узких колонках ту же картинку, но указать другой размер:

...
<picture width="170" height="92">
http://provodka.ru/source/img/nobel.jpg
</picture>
...

Этот блок готов.

2. Набор ссылок в блоке типа link_set

Вы, Сидоров, имеете три хорошие ссылки по теме. Это ссылка на сайт, посвященный вашему открытию www.provodka.ru, это сайт, посвященный Нобелевским премиям (страница, где описывается ваше открытие) www.nobile.org/new/sidorov.html и сайт, посвященный мотоциклам (ну просто, вам нравятся мотоциклы) www.biker.ru. Придумав краткое название и описание к каждой ссылке, вы получите следующий блок:

<block type="link_set">
<item>
  <name>Все о homo electrus</name>
  <description>
  Сайт о наших братьях по разуму
  </description>
  <link>www.provodka.ru</link>
</item>
<item>
  <name>
  Нобелевская премия в области электричества
  </name>
  <description>
  Пресс-релиз Нобелевского комитета
  </description>
  <link>www.nobile.org/new/sidorov.html</link>
</item>
<item>
  <name>Байкер-ру.</name>
  <description>Мои мотики</description>
  <link>www.biker.ru</link>
</item>
</block>

Да, Сидоров, последняя ссылка появилась недавно и ее вполне можно отметить лэйблом "New" (см. раздел справочника Дополнительные возможности):

...
<item sign="new">
  <name>Байкер-ру.</name>
  <description>Мои мотики</description>
  <link>www.biker.ru</link>
</item>
...

Вот и все, блоки готовы, можно собирать из них модуль.

4.Собираем модуль

Делается это элементарно.

У модуля должно быть название и описание. Допустим, так: название модуля: "ОТКРЫТИЕ СИДОРОВА И ПЕТРОВА", описание модуля: "Открытые ими братья по разуму скоро заговорят". Обратите внимание, Сидоров, что название мы набрали большими буквами. Это не обязательно, но в стиле сервера НГУ.

Еще нужно указать цвет модуля. Модуль идет в широкую колонку, там можно применять зеленый или белый цвет. Зеленый? ОК.:

<module color="green">
<name>
ОТКРЫТИЕ СИДОРОВА И ПЕТРОВА
</name>
<description>
Открытые ими братья по разуму скоро заговорят
</description>
...А сюда идут блоки ...
</module>

Вот что мы получаем в итоге:

<module color="green">

<name>
ОТКРЫТИЕ СИДОРОВА И ПЕТРОВА
</name>
<description>
Открытые ими братья по разуму скоро заговорят
</description>

<block type="notes">
<item align="left">
  <note>
  Мы с Петровым сделали открытие.
  Мы обнаружили в городской электропроводке 
  братьев по разуму.
  </note>
  <note>
  Установлено, что они живут особенно хорошо только
  в цепях переменного напряжения 220 вольт. При
  снижении напряжения до 210 вольт наши братья по
  разуму разум теряют, в при скачках напряжения до
  240 вольт (что часто бывает, когда у нашего соседа
  отключается чайник), братья по разуму становятся
  агрессивными.
  </note>
</item>
<item align="left">
  <note>
  Проводятся эксперименты над установлением контакта с
  братьями по разуму, которых мы назвали
  <i>"homo electrus"</i>.
  </note>
</item>
</block>

<block type="illustrated">
<item>
  <picture width="360" height="200">
  http://provodka.ru/source/img/nobel.jpg
  </picture>
  <name>
  Мы сделали это!
  </name>
  <description>
  Я и Петров жмем руку королю Швеции
  </description>
</item>
</block>

<block type="link_set">
<item>
  <name>Все о homo electrus</name>
  <description>
  Сайт о наших братьях по разуму
  </description>
  <link>www.provodka.ru</link>
</item>
<item>
  <name>
  Нобелевская премия в области электричества
  </name>
  <description>
  Пресс-релиз Нобелевского комитета
  </description>
  <link>www.nobile.org/new/sidorov.html</link>
</item>
<item sign="new">
  <name>Байкер-ру.</name>
  <description>Мои мотики</description>
  <link>www.biker.ru</link>
</item>
</block>
  
</module>

Вот и все, Сидоров, вы написали модуль.

5.Несем администратору

Сохраняйте этот текст в виде файла с расширением xml или просто txt и несите его администраторам сервера НГУ. Они будут рады.



W3C
schools