Реферат: Позиционирование: всему свое место
Каждую таблицу можно более гибко настроить для конкретного блока. Например, первый блок можно сверстать таблицей из трех колонок, а второй — из пяти. Если же использовать одну таблицу, то придется и первый, и второй блок верстать с помощью пяти колонок.
Если посмотреть на рис. 9.1, то сразу бросаются в глаза три больших блока, которые можно заключить в отдельные таблицы:
Первый блок содержит логотип и заголовок «Новости»
Второй блок содержит центральную часть (меню, текст и сами новости)
Третий блок содержит копирайт
Вот мы и определили общую структуру документа. Сейчас самое время заняться каждый блоком в отдельности и подумать, как его лучше сверстать. При этом хорошо бы иметь ввиду второй принцип табличной верстки:
ПРИНЦИП 2
Чем меньше используется столбцов и строк, тем лучше. Не надо усложнять то, что можно сделать просто. Облегчите жизнь себе и браузеру.
Займемся первым блоком. Его можно сверстать с помощью таблицы, которая содержит один ряд и четыре столбца, как показано на рис. 9.2
Рис. 9.2 Первый блок, разбитый на столбцы
Первая ячейка таблицы содержит одну линию, которую можно реализовать отдельной картинкой. Вторая ячейка содержит логотип, так что без картинки здесь никак не обойтись. Третья ячейка опять содержит линию. Возникает подозрение, что в данном случае лучше реализовать линию с помощью фонового рисунка. Отличная идея! На волне фоновой идеи можно еще немного подумать и понять, что первые три ячейки хорошо бы вообще объединить в одну. Действительно, отобьем картинку с логотипом от левого края с помощью невидимой распорки, зададим большую ширину для ячейки, сделаем фон — и все. Последняя четвертая ячейка (которая уже успела стать второй), будет иметь небольшую картинку, чтобы сделать левый край плашки, а затем все продолжится фоновым рисунком.
Вот мы и определились с первым блоком. У нас получится одна большая картинка, и три совсем маленьких и легких. Вспомните, как делал верстальщик в четвертой главе. Он весь первый блок верстал с помощью больших картинок. Конечно, такой подход противоречит третьему принципу табличной верстки:
ПРИНЦИП 3
Необходимо использовать минимум изображений как можно меньшего размера.
В нашем случае меньше изображений использовать практически невозможно.
После того, как первый блок разложен по полочкам, возможны два варианта развития событий:
Продолжать в том же духе с остальными блоками, пока все не станет совершенно ясно
Сверстать первый блок, а затем заняться остальными.
Мне ближе второй подход. Наверное потому, что мне нравится как можно раньше видеть результат. Кроме того, я точно не успею забыть, что успел придумать для первого блока.
Раз уж мне нравится второй подход, его и будет применять. Начнем верстать первый блок, чтобы на практике закрепить теоретические изыскания. Для начала как обычно надо заготовить картинки:
Логотип: logo.gif
Первый фоновый рисунок: bg1.gif
Тоненький рисунок начала плашки, которая над словом «новости» (его нельзя сделать фоном, так что приходится вставлять рисунком): block-left.gif
Второй фоновый рисунок для плашки: bg2.gif
Слово «новости» тоже надо делать рисунком, так задумал дизайнер: news.gif
Все необходимые картинки готовы, можно приступать. Помним, что нужна таблица всего из двух ячеек. В табличной верстке всегда вначале создается таблица с заданными параметрами. В нашем случае суммарная ширина таблицы 750 пикселей. Определяем, что ширина первой ячейки должна быть 517 пикселей, значит ширина второй — 233 пикселя. Расстояния между ячейками и отступы надо обнулить. Создаем такую таблицу:
<table cellspacing="0" cellpadding="0" width="750">
<tr>