46286 (665484), страница 2
Текст из файла (страница 2)
Обратите внимание, мы у картинок прописывали border="0", потому что картинка будет являться ссылкой.
С пустыми столбцами пока ничего делать не будем. Затем вставляем текст и новости. В четвертой главы мы уже этим занимались, так что повторять нет особого смысла. Гораздо интереснее подбирать ширины ячеек. Методом научного тыка (а еще лучше измерением ширины в Photoshop) устанавливаем, что ширина первой ячейки должна быть 125 пикселей, ширины отбивок по 15 пикселей, ширина новостей 233 пикселя, а все остальное достается центральной области.
Кроме того, при просмотре результата в браузере обнаруживается, что я забыл прописать выравнивание по верхнему краю содержимого ячеек. То есть в тег
Остается последний третий блок. Его можно сделать таблицей из двух ячеек, как показано на рис. 9.3
Рис. 9.3 Две ячейки таблицы третьего блока
В первой ячейке будет фоновый рисунок, который будет образовывать плашку, и маленькая картинка с черной полоской для окончания плашка. Вторая ячейка будет содержать фоновый рисунок, который образует линию, а также копирайт. Надпись копирайта можно отбить от левого края распоркой.
Фон для плашки я называю bg3.gif, черную полоску для плашки block-right.gif, а фон для линии bg4.gif. Создаем таблицу:
2003 © PopStar
Принцип ее создания практически такой же, как и для самого первого блока. Я так же прописываю фон. Есть два отличия: надо в первой ячейке выровнять содержимое по правому краю, чтобы block-right.gif был справа, а не слева. Используется распорка для позиционирования копирайта в необходимое положение.
Собственно, на этом верстка практически закончена. Разве что осталось обнулить поля элемента
с помощью атрибутов marginheight, marginwidth, topmargin и leftmargin.Если сравнить с тем, как был сверстан макет в четвертой главе, то выяснится, что вес самого HTML-документа даже увеличился на 200 байт, но зато на 1,5 килобайта уменьшился вес картинок. То есть в итоге общий вес документа все же уменьшился на 1,3 килобайта. Конечно, цифры смешные, но и документ уж больно простой.
На примере такого макета хорошо виден основной принцип позиционирования с помощью таблиц: для точного позиционирования элемента внутри таблицы используются точные значения ширины ячеек и распорки. Постоянный расчет ширины ячеек и подбор ширины или высоты распорки: неизбежное занятие верстальщика. Например, если надо отбить элемент на 9 пикселей от верхнего края, то необходимо вставить такую распорку:
Если надо отбить элемент от левого края на 123 пикселя, то для этого подойдет вот такая распорка:
Если дизайн сложный, то на странице может быть несколько десятков распорок. Как вы понимаете, такое обилие картинок ни к чему хорошему не ведет.
В чем же причина такого частого использования таблиц и картинок? На самом деле за ответом далеко ходит не надо, достаточно посмотреть, для каких элементов в HTML можно устанавливать геометрические размеры. Оказывается, что для пяти элементов, связанных с таблицами (
| , | , |
|---|