Позиционирование: всему свое место (стр. 2 из 2)

<imgsrc="i/logo.gif" width="272" height="74" border="0" alt="PopStar" hspace="30">

Перейдем ко второй ячейке. Зададим там фон, и вставим два рисунка. Заметьте, что «новости» располагаются сразу под плашкой, так что между рисунками стоит перевод строки:

</td>

Посмотрев на результат и замечаем, что рисунок block-left.gif не стыкуется с фоновым. Немного подумав, вспоминаем, что он должен быть прибит к верхнему краю ячейки, но на самом деле этого нет. Просто у ряда таблицы надо прописать valign="top". В результате имеем код:

</td>

</td>

</tr>

</table>

Пока получается достаточно компактно и просто, как вы считаете? Обратите внимание на некоторые детали. Я везде указывал размеры картинок. При табличной верстке указывать размеры необходимо, потому что браузер будет быстрее обрабатывать таблицы. Кроме того, я не указал атрибут alt для картинки lock-left.gif. Конечно, такой код противоречит стандарту HTML, но в данном случае картинка не несет никакой смысловой нагрузки. По спецификации в подобных случаях надо задавать пустой атрибут, то есть alt="", потому что голосовые браузеры в этом случае не будут говорить «неизвестное изображение», а тактично промолчат. Учитывая тот факт, что таких браузеров в русскоязычном интернете катастрофически мало, можно их проигнорировать (Я признаю, что моя позиция не совсем корректна. На западе сейчас активно развивается такое движение, как accessibility, то есть общедоступность содержания страниц.<).

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

Давайте займемся вторым блоком. Его можно реализовать с помощью таблицы из пять столбцов. В первой ячейке будет меню, вторая — просто для отбивки, в третьей — текст, четвертая опять же для отбивки, а в пятой – новости. Будем заполнять столбцы таблицы по порядку.

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

<tr>

</td>

</tr>

</table>

Обратите внимание, мы у картинок прописывали border="0", потому что картинка будет являться ссылкой.

С пустыми столбцами пока ничего делать не будем. Затем вставляем текст и новости. В четвертой главы мы уже этим занимались, так что повторять нет особого смысла. Гораздо интереснее подбирать ширины ячеек. Методом научного тыка (а еще лучше измерением ширины в Photoshop) устанавливаем, что ширина первой ячейки должна быть 125 пикселей, ширины отбивок по 15 пикселей, ширина новостей 233 пикселя, а все остальное достается центральной области.

Кроме того, при просмотре результата в браузере обнаруживается, что я забыл прописать выравнивание по верхнему краю содержимого ячеек. То есть в тег <tr> надо добавить атрибут valign="top".

Остается последний третий блок. Его можно сделать таблицей из двух ячеек, как показано на рис. 9.3

Рис. 9.3 Две ячейки таблицы третьего блока

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

Фон для плашки я называю bg3.gif, черную полоску для плашки block-right.gif, а фон для линии bg4.gif. Создаем таблицу:

</td>

</td>

</tr>

</table>

Принцип ее создания практически такой же, как и для самого первого блока. Я так же прописываю фон. Есть два отличия: надо в первой ячейке выровнять содержимое по правому краю, чтобы block-right.gif был справа, а не слева. Используется распорка для позиционирования копирайта в необходимое положение.

Собственно, на этом верстка практически закончена. Разве что осталось обнулить поля элемента <body> с помощью атрибутов marginheight, marginwidth, topmargin и leftmargin.

Если сравнить с тем, как был сверстан макет в четвертой главе, то выяснится, что вес самого HTML-документа даже увеличился на 200 байт, но зато на 1,5 килобайта уменьшился вес картинок. То есть в итоге общий вес документа все же уменьшился на 1,3 килобайта. Конечно, цифры смешные, но и документ уж больно простой.

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

Если надо отбить элемент от левого края на 123 пикселя, то для этого подойдет вот такая распорка:

Если дизайн сложный, то на странице может быть несколько десятков распорок. Как вы понимаете, такое обилие картинок ни к чему хорошему не ведет.

В чем же причина такого частого использования таблиц и картинок? На самом деле за ответом далеко ходит не надо, достаточно посмотреть, для каких элементов в HTML можно устанавливать геометрические размеры. Оказывается, что для пяти элементов, связанных с таблицами (<table>, <th>, <td>, <col>, <colgroup>), картинок (кроме того, и для элемента <object>), а также <hr>, <iframe> и <pre>.

Внутренние фреймы и <pre> использовать для точного позиционирования не представляется возможным. В качестве распорки можно попытаться использовать <hr>, правда его нельзя сделать прозрачным, и в некоторым случаях такое поведение будет мешать. Так что распорка невидимой картинкой более универсальна. Адекватной замены таблицам нет в принципе. Вот и получается господство таблиц и картинок. Что поделать, такова жизнь верстальщика.