Типовые модульные сетки 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