Справочник по оформлению

страниц сервера НГУ с использованием языка NSUML

Таблица стилей v.10 (7.09.01)

2. Типы блоков

1. Тип блока notes
(применим в модулях фиксированной ширины и свободной ширины)

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

Блок этого типа включает в себя элементы item, которые соответствуют частям текста, разделенным пустой строкой. Каждый элемент item содержит в себе элементы note, задающие отдельные абзацы текста.

По умолчанию текст в блоках этого типа центруется в модуле, но указав у элемента item атрибут align, можно произвольно отцентровать текст.

Пример:

...
<block type="notes">
<item>
	<note>..Первый параграф текста..</note>
	<note>..С новой строки..</note>
</item>
<item align="left">
	<note>..Второй параграф такста,
	выравнивание по левому краю..</note>
</item>
</block>
...

2. Тип блока news_list
(применим в модулях фиксированной ширины и свободной ширины)

Этот тип блоков предназначен для списков новостей. Примером блока этого типа являются новости на главной странице сервера НГУ.

Блок этого типа включает в себя элементы item, соответствующие одному "куску" информации (одной новости и т.п.). Элемент item должен включать в себя:

  • Элемент name - выводится основной строкой, которая одновременно является гиперссылкой.
  • Элемент link - адрес, связанный с гиперссылкой.
  • Элемент description - если он имеется, то под основной строкой выводится строка этой дополнительной информации.

Кроме того, элемент item должен обладать двумя атрибутами:

  • date - дата, связанная с новостью, выводится в начале первой строки.
  • source - эта информация об источнике новости, всплывает в виде подсказки к гиперссылке первой строки с подписью "Источник:".

Пример:

...
<block type="news_list">
<item date="10.10.01" source="Петров и Сидоров">
	<name>Петров и Сидоров потрясли мир</name>
	<description>Они обнаружили братьев по разуму
	в городской электропроводке</description>
	<link>http://www.provodka.ru</link>
</item>
...
</block>
...

3. Тип блока link_set
(применим в модулях фиксированной ширины и свободной ширины)

Этот тип блоков применяется для выведения списков гиперссылок. Примером служит модуль навигации сервера НГУ, состоящий из двух блоков этого типа.

Блок этого типа включает в себя элементы item, соответствующие одному "куску" информации (одной гиперссылке). Элемент item должен включать в себя:

  • Элемент name - выводится основной строкой, которая одновременно является гиперссылкой.
  • Элемент link - адрес, связанный с гиперссылкой.
  • Элемент description - это дополнительная информация, если этот элемент присутствует, он всплывает в виде подсказки к гиперссылке.

Пример:

...
<block type="link_set">
<item>
	<name>Петров и Сидоров</name>
	<description>Портал Сидорова
	и портал Петрова</description>
	<link>http://www.provodka.ru</link>
</item>
...
</block>
...

4. Тип блока plain_text
(применим в модулях свободной ширины)

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

Блок этого типа включает в себя элементы chapter, соответствующие одной главе текста. Каждый элемент chapter включает в себя один или более под-элементов subchapter, соответствующих под-главам текста.

Элемент chapter также имеет дополнительные элементы:

  • Элемент name - выводится в виде большого заголовка главы.
  • Элемент description - если он имеется, то под заголовком выводится строка этой дополнительной информации.

Те же элементы может включать в себя и элемент subchapter, только заголовки выводятся поменьше.

Кроме того, элемент chapter может иметь под-элемент source, который можно использовать для выведения имени и координат автора текста. Элементы subchapter включают в себя элементы para, соответствующие отдельным параграфам (абзацам) текста.

Указывая у элемента chapter атрибут style, можно менять стиль отображения текстового документа. Атрибут этот может принимать значение classic (текст выводится в классическом стиле, шрифт с засечками), ultra (современный стиль, рубленый шрифт), omni (обычный стиль сервера, установлен по умолчанию).

Пример:

...
<block type="plain_text">
<chapter style="classic">
<name>История открытия</name>
<description>Петров и Сидоров
изменили наш мир</description>
<source>И.А. Петров</source>
<subchapter>
	<name>Как это случилось</name>
	<description>Был обычний
	субботний день...</description>
	<para>..Первый параграф под-главы..</para>
	<para>..Второй параграф под-главы..</para>
</subchapter>
	
<subchapter>..Тело второй под-главы..</subchapter>
<subchapter>..Тело третьей под-главы..</subchapter>
</chapter>

<chapter>.. Тело второй главы..</chapter>
...
</block>
...

5. Тип блока illustrated
(применим в модулях фиксированной ширины и свободной ширины)

Этот тип блоков предназначен для выведения изображений - иллюстраций к текстам, баннеров и т.п.

Блок этого типа должен содержать один или несколько элементов item, задающих одну картинку и связанную с ней текстовую информацию.

Элемент item содержит:

  • элемент picture, в котором указывается адрес картинки (аналог атрибута src HTML-элемента img). Кроме того, у элемента picture следует указать атрибуты width и height, которые указывают размеры картинки в пикселях. Если у родительского элемента item имеется элемент link, то картинка становится гиперссылкой по указанному адресу.
  • элемент name, который выводится в качестве всплывающего комментария к картинке либо выводится на месте картинки в случае отключенной загрузки изображений в браузере.
  • элемент description, который выводится в качестве комментария к картинке. Если в элементе item имеется элемент link, то этот комментарий превращается в гиперссылку по адресу, указываемому элементом link.
  • элемент link - необязательный элемент, который задает адрес, по которому ведут гиперссылки этого блока.

Пример:

...
<block type="illustrated">
<item>
	<picture>/petroff.jpg</picture>
	<name>Петров и его прибор</name>
	<description>Имена Петрова и Сидорова
	у всех на слуху</description>
	<link>http://www.provodka.ru</link>
</item>
...
</block>
...

6. Тип блока tree
(применим в модулях свободной ширины)

Этот тип блоков предназначен для выведения древовидных рубрикаторов. Предусмотрено три уровня рубрикации. Примером служат рубрикаторы ресурсов сервера НГУ.

Внутри элемента block с указанным атрибутом type="tree" включается элемент tree, задающий дерево. Этот элемент, в свою очередь может иметь элементы:

  • Элемент name - название дерева-рубрикатора, выводится сверху как заголовок.
  • Элемент description - дополнительная информация к названию дерева.

Далее идут элементы, которые, собственно, и образуют узлы дерева. Это элементы item, допускается три уровня этих элементов, включая нулевой. Элементов item нулевого, высшего уровня, может быть несколько. Дерево может иметь разную разветвленность и элемент любого уровня может не иметь других элементов-узлов дерева.

Каждый узел дерева, элемент item, кроме других узлов, должен иметь элемент name - эта информация выводится в качестве названия узла дерева. Если элемент item содержит элемент link, то подпись узла становится гиперссылкой, по адресу, указанному в элементе link. Если при этом имеется и элемент description, то его содержание становится всплывающей подсказкой к гиперссылке.

У элементво-узлов дерева нулевого и первого уровня item имеется атрибут color, задающий цвет ветвей дерева. Для элементов нулевого уровня он обязателен, для элементов первого уровня - не обязателен, если он не указан, наследуется цвет элемента нулевого уровня. Доступны три значения атрибута color: gray, orange, blue.

Пример:

...
<block type="tree">
<tree>
<name>Петров и Сидоров</name>
<description>Знания на службе человека</description>
<item color="orange">
	<name>Петровские открытия</name>
	
	<item>
	<name>Язык братьев по разуму</name>
	<link>http://www.provodka.ru/lang</link>
	</item>
	
	<item color="blue">
	<name>Новый закон Ома</name>
	<link>http://www.provodka.ru/Ome</link>
	</item>
	
	<item>
	<name>Сидоров и его комплексы</name>
	<link>http://www.provodka.ru/sidorov</link>
	</item>
	
</item>
...
</tree>
</block>
...

7. Тип блока grid
(применим в модулях свободной ширины)

Этот тип блоков предназначен длы выведения табличной информации.

Внутри элемента block с указанным атрибутом type="grid" включается элемент grid, задающий таблицу. Этот элемент, в свою очередь может иметь элементы:

  • Элемент name - название таблицы, выводится сверху как заголовок.
  • Элемент description - дополнительная информация к названию таблицы.

Далее идут элементы, которые, собственно, и образуют таблицу.

Таблица задается элементами row (ими задаются ряды таблицы), которые содержат элементы col (которые задают содержимое отдельных ячеек данного ряда таблицы). Эти элементы - аналоги HTML-элементов tr и td ссоответственно. Но в отличие от HTML, можно задавать ячейки большего, чем в других рядах размера только по горизонтали. То есть, можно задать, например, ячейку, под которой на нижнем ряду будет две ячейки. В таких расширенных ячейках удобно размещать названия групп колонок таблицы. У ячейки, покрывающей несколько ячеек, должен быть атрибут span="x", где x - число покрываемых стандартных ячеек данной широкой.

Таблица раскрашивается определенным образом, но если есть необходимость, можно выделить отдельный ряд или ячейку. Это делается указанием атрибута set у элементов row или col соответственно. Атрибут set может принимать значения red или green.

По умолчанию ячейки таблицы сами расширяются для того, чтобы вместить информацию в ячейках. При этом разные столбцы могут получаться разной ширины. Если необходимо зафиксировать ширину столбцов, нужно указать у элемента grid атрибут fixed="x", где x - нужная ширина отдельного столбца.

Главный элемент таблицы grid должен иметь атрибут color, задающий цветовую схему таблицы. Доступны три значения атрибута color: gray, orange, blue.

Пример:

...
<block type="grid">
<grid color="blue">
<name>Результаты Петров</name>
<description>Цифры и факты</description>
<row set="green">
	<col>Факты</col>
	<col span="2">Цифры</col>
</row>

<row color="orange">
	<col>Первый друг по разуму</col>
	<col>Примерно 23</col>
	<col set="red">Уже 24</col>
</row>
...
</grid>
</block>
...

8. Тип блока progress_bar
(применим в модулях фиксированной ширины и свободной ширины)

Этот тип блоков применяется для выведения наборов линейных диаграмм. Примером служат результаты голосований на сервере НГУ.

Элемент block этого типа содержит элементы name и description (они выводятся как название и комментарий к данному набору диаграмм) и один или несколько элементов item, каждый соответствует одной линейной диаграмме.

Каждый элемент item содержит:

  • элемент name, который выводится в качестве описания данной линейной диаграммы,
  • элемент percent, который задает относительную величину параметра, прелставляемого данной линейной диаграммой (в процентах),
  • элемент value, который задает абсолютное значение параметра, представляемого диаграммой (последние два показателя выводятся на диаграмме).

Элемент block должен содержать атрибут color, который задает цветовую схему отображения набора диаграмм. Доступны три значения: gray, orange, blue. Кроме того, каждый элемент item может содержать такой же атрибут, чтобы задать отличающийся цвет, также доступны три значения: gray, orange, blue.

Пример:

...
<block type="progress_bar" color="orange">

<name>Рейтинг</name>
<description>По данным братьев по разуму</description>
<item>
	<name>Петров</name>
	<percent>67</percent>
	<value>3567</value>
</item>
<item color="blue">
	<name>Cидоров</name>
	<percent>33</percent>
	<value>1222</value>
</item>

</block>
...

9. Тип блока form
(применим в модулях фиксированной ширины)

Этот тип блоков применяется для создания на страницах сервера форм. Пример - поисковая форма сервера.

Блок этого типа набирается в виде последовательности элементов формы: полей текстового ввода, селекторов-выпадающих меню, радиокнопок и простых кнопок. Каждый такой элемент задается внутри элемента block как элемент item, имеющий атрибут type. Элементы item содержат элемент name, имеющий различное значение в зависимости от типа элемента формы:

type="text" - задается поле ввода текстовой строки. Дополнительные атрибуты и элементы:

  • hidden="true" - необязательный атрибут, позволяет сделать невидимым набираемый в строке текст (для ввода паролей).
  • idname - обязательный элемент, который передается как идентификатор name этому элементу формы.

Элемент name выводится как описание над строкой ввода, например, "Введите пароль:"

type="radio" - задается радиокнопка. Дополнительные атрибуты и элементы:

  • idname - обязательный элемент, который передается как идентификатор name этому элементу формы.
  • value - обязательный элемент, который передается как параметр value этому элементу формы.
  • default="true" - необязательный атрибут, который позваляет указать состояние радиокнопки по умолчанию активированным.

Элемент name выводится как комментарий к радиокнопке.

type="dropdown" - задается выпадающее меню. Дополнительные атрибуты и элементы:

  • idname - обязательный элемент, который передается как идентификатор name этому элементу формы.

Элемент item этого типа должен содержать элементы value, определяющие содержание выпадающего меню. Каждый элемент value должен иметь атрибут id, который передается как дентификатор id HTML-элемента option. Кроме того, у одного из элементов value указывается атрибут selected="true", который отмечает значение выпадающего меню по умолчанию.

Элемент name выводится как описание над выпадающим меню.

type="button" - задается кнопка типа submit. Дополнительные атрибуты и элементы:

  • idname - обязательный элемент, который передается как идентификатор name этому элементу формы.
  • value - обязательный элемент, который передается как параметр value этому элементу формы.
  • width - необязательный атрибут, позволяющий задать в пикселях ширину кнопки.

Элемент name выводится как комментарий к кнопке.

type="divider" - задается графический элемент - разделитель элементов формы. Применяется для смыслового разделения элементов формы.

Сам элемент block должен иметь следующие атрибуты:

  • idname - обязательный атрибут, который передается как идентификатор name этой форме.
  • method - обязательный атрибут, который передается как параметр method этой форме.
  • action - обязательный атрибут, который передается как параметр action этой форме.

Элемент block может содержать элемент string, который выводится над формой как ее заглавие или комментарий.

Пример:

...
<block type="form" idname="petrof"
method="post" action="post.php">
<string>Авторизация Петрова</string>

<item type="text" hidden="true" idname="petrof_text">
	<name>Петров, введите пароль:</name>
</item>

<item type="button" idname="petrof_submit"
value="1" width="50">
	<name>войти</name>
</item>

</block>
...

10. Тип блока alert
(применим в модулях фиксированной ширины)

Этот тип блоков применяется для выведения срочных сообщений на страницы сервера. Шрифт отцентрован и укрупнен.

Блок этого типа состоит из элементов item, каждый из которых задает один параграф текста. Внутри этих элементов, в свою очередь, задаются элементы note, которые, собственно и содержат текст. Этот блок похож на блок типа notes.

11. Тип блока html_include
(применим в модулях фиксированной ширины и свободной ширины)

Этот тип блока применяется для вставки внутрь модуля произвольного HTML-кода. Когда имеющийся набор блоков недостаточен, можно применять этот тип блоков для вставки в модули произвольным образом структурированной информации.

В элементе block этого типа может быть размещена произвольные HTML-данные, но условием является соответствие HTML-кода спецификации XHTML 1.0.

Пример:

...
<block type="html_include">
	<p>Здесь идет кусок простого HTML-кода.
	<br/>Правда, неплохо?</p>
	<p><img src="/picture.gif" alt="картинка"/></p>
	...
</block>
...

12. Тип блока configure
(применим в модулях свободной ширины)

Этот тип блоков используется только на странице пользовательских настроек.

Поскольку этот тип блоков используется только администраторами сервера НГУ, его описание не приводится.



W3C
schools