Верстка с помощью таблиц
|
|
|
|
Верстка с помощью таблиц |
| Как известно, язык HTML не балует дизайнеров своими возможностями. Если вы хотите сделать страницу, (почти) не уступающую своим качеством типографской, вам не обойтись без использования таблиц. Макетирование страниц таким способом позволяет создать поля страницы, разделить текст на колонки, окрасить отдельные области в определенный фоновый цвет и даже использовать локальные фоновые изображения. Чтобы создать поля, вам необходимо задать определенную ширину таблицы с помощью параметра width тега <table>. Ширина может быть выражена как фиксированным значением (параметр задается в пикселах), так и плавающим (в процентном отношении от ширины окна броузера). Фиксированное значение следует задавать не более 620 пикселов, чтобы при разрешении экрана 640x480 оставались хотябы поля по 10 пикселов. Для представления информации в виде колонок текст и изображения размещают внутри ячеек таблицы. Внутрь ячеек можно вкладывать дополнительные таблицы для придания стилю большей изысканности. Какие же перспективы открываются при использовании фоновых цветов и изображений? Сразу хочу отметить, что ипользование фоновых изображений должно быть пока ограничено в виду относительно недавнего появления этой функции. При ипользовании фоновых изображений вы можете установить в качестве фона как текстуру, так и любой другой рисунок, не требующий повторений, а текст пустить сверху, тем самым создавая, как бы два независимых слоя. Однако размер такого фона вам прийдется сделать заведомо шире возможного размера ячейки таблицы. Что касается применения фоновых цветов, то здесь остановимся подробнее. Фоновым цветом можно выделить конкретные области страницы, чтобы акцентировать на них внимание или разделить тематически, например, здесь у вас новости сайта, здесь - меню, а здесь основная информация. Фоновый цвет можно использовать для оптимизации объема изображения. Если создать рисунок с прозрачными областями, то, подобрав подходящий оттенок ячейки таблицы, вам удасться значительно сократить размер файла. Это особенно эффективно, когда рисунок имеет большие области однородного цвета. Также с помощью фоновой заливки можно создать вертикальный разделитель плавающей длинны, зависящей от растяжения таблицы. Теперь рассмотрим как все это работает на практике. В качестве примера разберем сайт журнала "Ваш Партнер". Первая страница имеет фиксированную ширину 600 пикселов с центральным расположением текстового и графического материала. Текст разделен на две колонки: левая - реквизиты журнала, правая - информация о журнале. На странице используется рисунок темного серо-зеленого цвета. В верхней части размещен графический блок. Для создания страницы использовалась таблица фиксированной ширины, разделенная на две ячейки, заполненные различными фоновыми цветами. Теперь обратите внимание на рамку, выделяющую основную часть страницы. Она состоит из двух линий: внешней - широкой и внутренней - узкой, шириной 2 и 1 пикселов соответственно. Чтобы сделать такую рамку прийдется прибегнуть к некоторым хитростям. Сначала, необходимо создать два графических элемента размером 1x1 пиксел черного цвета и цвета основного фона. Первая точка понадобится для самих разделителей, вторая - для промежутков между колонками и разделителями. Затем, расчитаем размеры всех элементов таблицы. Возьмем в качестве базовой координаты верхний левый угол таблицы. Чтобы вычислить размеры колонок, необходимо вычесть из общей ширины страницы (без полей) ширину разделителей с промежутками. Размер промежутков выберем по 3 пискела. 600 - (3 + 2 + 3 + 1 + 3)=588 Определим количество строк: по 4 сверху и снизу и одна средняя, в которой будет размещена информация. Теперь распишем размеры всех составляющих по строкам и ячейкам. 120+3+477=600 Таким образом мы получили таблицу из 9 строк и 7 ячеек. Дело осталось за кропотливым составлением таблицы. |
