Реферат: Позиционирование: всему свое место
<td width="233"></td>
</tr>
</table>
Начинаем вставлять изображения. Фоном для первой ячейки служит bg1.gif. Сразу же вставляем и логотип.
<td background="i/bg1.gif" width="517">
<img src="i/logo.gif" width="272" height="74" border="0" alt="PopStar">
</td>
Смотрим на результат и видим, что фон с картинкой отлично состыковались, но картинка прибита к левому краю. Помните, я говорил, что ее можно отбить с помощью распорки? В данном случае есть способ и получше. У тега <img> есть атрибут hspace, который задает поля картинки по горизонтали. Дело в том, что поля задаются и справа, и слева, но как раз сейчас это роли не играет. Так что можно отбить логотип вот так:
<imgsrc="i/logo.gif" width="272" height="74" border="0" alt="PopStar" hspace="30">
Перейдем ко второй ячейке. Зададим там фон, и вставим два рисунка. Заметьте, что «новости» располагаются сразу под плашкой, так что между рисунками стоит перевод строки:
<td background="i/bg2.gif" width="233">
<img src="i/block-left.gif" width="1" height="68">
<br><img src="i/news.gif" width="59" height="9" alt="новости">
</td>
Посмотрев на результат и замечаем, что рисунок block-left.gif не стыкуется с фоновым. Немного подумав, вспоминаем, что он должен быть прибит к верхнему краю ячейки, но на самом деле этого нет. Просто у ряда таблицы надо прописать valign="top". В результате имеем код:
<table cellspacing="0" cellpadding="0" width="750">
<tr valign="top">
<td background="i/bg1.gif" width="517">
<img src="i/logo.gif" width="272" height="74" border="0" alt="PopStar" hspace="30">
</td>
<td background="i/bg2.gif" width="233">
<img src="i/block-left.gif" width="1" height="68">
<br><img src="i/news.gif" width="59" height="9" alt="новости">
</td>
</tr>
</table>
Пока получается достаточно компактно и просто, как вы считаете? Обратите внимание на некоторые детали. Я везде указывал размеры картинок. При табличной верстке указывать размеры необходимо, потому что браузер будет быстрее обрабатывать таблицы. Кроме того, я не указал атрибут alt для картинки lock-left.gif. Конечно, такой код противоречит стандарту HTML, но в данном случае картинка не несет никакой смысловой нагрузки. По спецификации в подобных случаях надо задавать пустой атрибут, то есть alt="", потому что голосовые браузеры в этом случае не будут говорить «неизвестное изображение», а тактично промолчат. Учитывая тот факт, что таких браузеров в русскоязычном интернете катастрофически мало, можно их проигнорировать (Я признаю, что моя позиция не совсем корректна. На западе сейчас активно развивается такое движение, как accessibility, то есть общедоступность содержания страниц.<).
Приверженцы доступности сайтов немедленно возмутятся и будут утверждать, что такой подход некрасивый и в корне неверный по отношению к пользователям. Да, я согласен, но компактность кода для меня важнее. Не надо бросать в меня помидоры, сами решайте, как верстать вам.
Давайте займемся вторым блоком. Его можно реализовать с помощью таблицы из пять столбцов. В первой ячейке будет меню, вторая — просто для отбивки, в третьей — текст, четвертая опять же для отбивки, а в пятой – новости. Будем заполнять столбцы таблицы по порядку.