![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Типовые модульные сетки HTML документа
Двухколонная модульная сетка часто применяется на небольших информационныхсайтах. Как правило, в первой колонке располагается логотип и меню сайта, а во второй
— основной материал. Пример такой модульной сетки приведен на рис. 4.
Рис.4. Двухколонная модульная сетка.
Ниже приведен HTML код, реализующий данную структуру.
< TABLE width=" 760" cellpadding=" 10" cellspacing=" 10" border=" 1" > < TR>
< TD align=”center”> Логотип< /TD> < TD rowspan=”2”> Основной материал< /TD> < /TR>
< TR> < TD> Меню< /TD> < /TR>
< /TABLE>
Трехколонная модульная сетка «резинового» макета применяется на крупныхпорталах с множеством информационных сервисов. Как правило, в первой колонке располагается меню сайта и дополнительная информация, во второй — основной материал, в третьей – дополнительные функции. Часто в модульную сетку сайта добавляют блоки «Заголовок сайта» и «Окончание сайта». Пример такой модульной сетки приведен на рис. 5.
Заголовок сайта
Окончание сайта
Рис.4. Трехколонная модульная сетка «резинового» макета. Ниже приведен HTML код, реализующий данную структуру.
< TABLE width=" 100%" cellpadding=" 10" cellspacing=" 10" border=" 0" > < TR align=”center”>
< TD colspan=”3”> Заголовок сайта< /TD> < /TR>
< TR> < TD width=”200px”> Меню< /TD> < TD width=”*”> Основной материал< /TD> < TD width=”200px”> Дополнительные функции< /TD> < /TR>
< TR align=”center”> < TD colspan=”3”> Окончание сайта< /TD> < /TR>
< /TABLE>
Вопросы для обсуждения. 1. Как создать эффект информационного блока со скругленными краями или с отбрасываемой теью?
2. Как для браузеров семейства Netscape задать фоновое изображение для всей таблицы, а не для каждой ячейки в отдельности. Лекция 6
|