Создание сайта-визитки на таблицах

HTML-таблицы - пример технического безобразия со стороны отцов интернета, но удобны для вёрстки простого сайта-визитки.

Рамки, которые вы видите, демонстрируют табличную структуру (вёрстку) этого сайта: синий пунктир - границы таблиц, серые сплошные линии - рамки ячеек. Другие страницы сайта-визитки выполнены по этому же принципу и отличаются только отсутствием указания в стиле о выводе границ элементов таблиц.

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

Внизу - подвал (футер) сайта. Технически, это поле аналогично шапке, но, практически, часто заполняется немного более полезными данными - копирайт, адрес админа.

По моему мнению, шапку разумно заполнять шутками и анекдотами, а подвал - полезными советами. Естественно, всё это д.б. совершенно связано с вашей деятельностью и общим содержанием сайта.

Прямоугольная область, в которой размещён этот текст - ячейка таблицы для основного контента страницы. Если объём текста небольшой, то размер всей таблицы будет определяться размером окна браузера. При увеличении объёма, эта ячейка будет увеличиваться по высоте и отодвигать вниз подвал сайта, а информация будет доступна при использовании вертикальной прокрутки.

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

Левая часть страницы - блок навигации по сайту. Блок навигации состоит из четырёх ячеек: шапка меню, меню, хвост и подвал. Блок меню сайта-визитки заполняется списком ссылок на основные страницы сайта. Сам список может быть вложенным и моделирует иерархическую структуру вашего сайта.

В подвале навигации целесообразно размещать ссылки на страницы имеющие отношение к вашей деятельности, но менее интересные потенциальным посетителям вашего сайта-визитки.

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

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

Посмотрите различия между табличным и дивным дизайном сайтов.