VITRAGE: Примеры
· 1. "Распорки"
· 2. Изображения
· 3. "Колонтитулы"
· 4. Ссылки
· 5. Многоязычные сайты
· 6. Организация меню
· 7. Однотипные элементы
· 8. Формы и их обработка
· 9. Случайные операции
· 10. Циклы
· 11. "Ленты" данных
· 12. Внешние скрипты
· 13. Работа с файлами
· 14. "Бесконечный копирайт"
 
Практика
· Немного о стилях парсинга
· Примеры использования
· Работающие сайты
· Хостинги
· Вопросы и ответы
· Задать вопрос
· E-mail
 
Теория
· Компиляция и установка
· Идеология VITRAGE
· Оптимизация HTML
· Создание виртуальных хостов
· Создание структуры доменов
· Ваш собственный язык гипертекстовой разметки
 
О модуле
· Что такое VITRAGE
· История модуля
· Загрузить модуль
· Документация целиком
· Загрузить документацию в формате MS Word
· Слово автора
· English version
 
Технология VITRAGE
Один из витражей города Иркутска
Исходный код
· VHTML-код этой страницы (в новом окне)
· VHTML-код файла vitrage (в новом окне)
 
· Пример 7. "Инфоблоки", "сепараторы" и прочие однотипные элементы

Описание структурных единиц страниц сайта - информационных блоков, различного рода разделителей ("сепараторов"), элементов дизайна и т.п. - это, наряду с описанием "колонтитулов" и меню, самое естественное применение модуля VITRAGE.

Под "инфоблоком" будем понимать совокупность данных (текста, графики), "облаченных" в единообразный внешний вид, например, в импровизированное "окно с заголовком".

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

<block title="" color=#000000 titlecolor=#ffffff blockcolor=#ffffff>
<table width=100% border=0 cellpadding=2 cellspacing=0 bgcolor=$color$>
<tr><td align=center>
<font color=$titlecolor$>$title$</font>
</td></tr>
<tr><td><table width=100% border=0 cellpadding=4 cellspacing=0 bgcolor=$blockcolor$>
<tr><td><div align=justify>
</block>

</block>
</div></td></tr>
</table></td></tr>
</table>
<//block>

Заметим, что для "инфоблоков" чаще всего нужно описывать два тэга (в приведенном выше примере это сделано именно так) - открывающий и закрывающий. При форматировании VHTML-страниц между этими тэгами будет располагаться изменяющаяся информация:

<block title="Продукция номер 1" color=#008080 titlecolor=#d0d0d0>
<p>Здесь вы можете прочесть про продукцию номер 1.
<p><image src="product1.jpg" width=260 height=220>
<p>Выше приведена ее фотография.
</block>

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

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

<separator height=1 color=#ff0000>
<table width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=$color$>
<tr><td><dot height=$height$></td></tr>
</table>
</separator>

Таким образом, аккуратно спланировав структуру страниц сайта (и, прежде всего, структуру HTML-верстки) и описав соответствующие тэги, мы превратим VHTML-верстку в практически естественный процесс, в ходе которого верстальщику не придется задумываться о "физической" структуре страницы: он будет оперировать блоками на более высоком, "логическом" уровне.