Реферат: Позиционирование: всему свое место

<table cellspacing="0" cellpadding="0" width="750">

<tr>

<td align="right">

<a href="about.html"><img src="i/about.gif" width="122" height="20" border="0" alt="О компании"></a><br>

<a href="stars.html"><img src="i/stars.gif" width="122" height="17" border="0" alt="Наши звездочки"></a><br>

<a href="services.html"><img src="i/services.gif" width="122" height="20" border="0" alt="Услуги"></a><br>

<a href="contact.html"><img src="i/contact.gif" width="122" height="15" border="0" alt="Контакты"></a>

</td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

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

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

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

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

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

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

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

<table cellspacing="0" cellpadding="0" width="750" border="0">

<tr valign="top">

<td background="i/bg3.gif" width="208" align="right">

<img src="i/block-right.gif" width="1" height="18">

</td>

<td background="i/bg4.gif" width="542">

<img src="i/0.gif" width="309" height="1">

К-во Просмотров: 314
Бесплатно скачать Реферат: Позиционирование: всему свое место