Верстка сложной страницы.

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

Это одна из страниц сайта, подготовленного мной для данного урока. Чтобы создать такую страницу неподготовленному человеку "с нуля" придется здорово поломать себе голову. Может возникнуть множество осложнений, избежать которых вам поможет данный урок. Здесь мы по шагам разберем этапы проектирования и воплощения в жизнь нового сайта.

Начните с наброска

Для начала неплохо было бы взять в руки карандаш, резинку и пару листов бумаги, чтобы примерно набросать расположение элементов вашего будущего сайта. Считается, что сама идея сайта и то, чем его заполнять у вас уже есть. Иначе зачем его создавать?

Не пытайтесь "с наскока" создать мощнейший дизайн с неординарным размещением элементов меню по синусоиде или параболе, даже если у вас проявляется подъем вдохновения и креатива. Начните с простого. Усложнить задачу вы всегда успеете. Кроме того, подумайте об удобстве использования сайта. Я предлагаю "минималистичный" подход. Страница, которую нам предстоит разметить, содержит не так много графики и не выглядит "крутой", если оценивать по критерию "навороченность картинок". Но мне лично такой подход больше по душе - графики не должно быть много, ее должно быть достаточно!

Итак, у нас есть набросок. Логотип с названием раздела составляют основную часть "шапки страницы". Туда же добавлена пара ссылок "Написать письмо" и "Сделать стартовой" (последняя пока только для красоты). Главное меню расположено прямо под логотипом и состоит из 4х ссылок. Напротив ссылки текущей страницы располагается опознавательный маркер (при переключении он должен быдет смещаться). Под главным меню будет поиск (пока, опять же, только для красоты). В самом низу располагается дублирующее меню и подпись (Copyright).

Дублирующее меню добавлять не обязательно, однако, если пользователь прокрутит страницу далеко в низ (при большом контенте), он "потеряет" ссылки основного меню. Поэтому, дублировать меню в низу страницы все же желательно. Так вы повысите "юзабилити" (эргономичность) вашего сайта (более подробно в спецкурсе по юзабилити).

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

Подготовьте графический макет страницы

Кагда набросок готов и план действий вчерне начинает вырисовываться, не теряя времени открывайте Photoshop и переносите идею с бумаги на жесткий диск вашего аппарата с помощью языка кистей, выделений, заливок, слоев и масок! Слои и маски я упоминаю не зря. По возможности постарайтесь сохранить исходные слои в PSD файле - это вам пригодится в дальнейшем.

Ну все, дань вступительным рекомендациям для ваших собственных начинаний отдана. Теперь займемся конкретно поставленной задачей - разборкой/сборкой предложенного сайта. Графический макет у меня вышел вот такой (на "рамку" вокруг всего рисунка не обращайте внимания - это для того, чтобы подчеркнуть границы рисунка. На самом деле ее не существует - это плод вашего вооображения):

Рис. №6.1.1. Графический макет страницы

И еще я рекомендую создать такой же рисунок, только без фона меню. Фон меню сохраните в виде отдельного изображения, которое в дальнейшем будет использоваться как фоновый рисунок для таблицы. Основная работа будет проходить с шаблоном без фона.

Нарезка и верстка

Подготовов дизайн-макет в Photoshop-е, приступим к переводу его в язык тэгов и стилей. Для начала, прямо в Photoshop-е, "не отходя от кассы", продумаем структуру основной таблицы:

Рис. №6.1.2. Структура таблицы

На этой таблице мы видим, какие ячейки должны объединяться между собой, и что в них будет размещаться. Постарайтесь добиться одинаковой высоты ячеек, в которых будут расположены ссылки главного меню ("Главная, новости", "Портфолио", ...). Если необходимо, графический макет "доработайте напильником" (образно говоря) - подгоните высоту и положение не вписывающихся элементов.

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

Рис. №6.1.3. Шапка страницы

Вот код, необходимый для создания таблицы такой структуры:

<table width="800" cellspacing="0" cellpadding="0" border="0">
<tbody>
 <tr height="73">
 <td rowspan="2">
 <img src="images/site_logo.gif" alt="Site logo" width="187" height="73" /></td>
 <td rowspan="2">
 <img src="images/slice_01.gif" alt="" width="11" height="73" /></td>
 <td colspan="3" style="width: 602px; height: 49px;">&nbsp;</td>
 </tr>
 <tr style="height: 23px; background-color: #E5E5E5;">
 <td style="width: 350px;">
 <span style="font-size: 14pt; font-weight: bold; color: #006600;">Главная, новости</span></td>
 <td style="width: 125px;">
 <a href="#" style="text-decoration: none; font-size: 8pt; color: #660000;"><img src="images/mail.gif" »
 alt="Mail" border="0" width="13" height="10" /> Написать письмо</a></td>
 <td style="width: 125px;">
 <a href="#" style="text-decoration: none; font-size: 8pt; color: #660000;"><img src="images/home.gif" »
 alt="Set HomePage" border="0" width="13" height="14" /> Сделать стартовой</a></td>
 </tr>
 <tr>
 <td colspan="5">
 <img src="images/px_red1.gif" width="800" height="2" /></td>
 </tr>
 
 <!-- Остальная часть таблицы -->
 
</tbody>
</table>

На данном этапе следует подготовить все необходимые для страницы графические элементы. Их мы нарежем из основгого графического макета. Постарайтесь, по возможности, сохранить прозрачный фон у используемых изображений. Это требование не обязательное. Как вы знаете, граница прозрачного участка в GIF изображениях не имеет сглаживания, поэтому, если необходимо сохранить гладкость линий, сохраняйте изображения на белом фоне без прозрачности.

Таким образом я получил следующие изображения:

• "site_logo.gif" - логитип сайта
• "slice_01.gif" - "кусок-01" (располагается сразу справа от логотипа)
• "mail.gif" - значок конверта (почта)
• "home.gif" - значок "домика"
• "px_red1.gif" - изображение 1х1 пиксель, содержаott 1 пиксель цвета "#660000". На странице масштабируется как необходимо и образует горизонтальные линии требуемой ширины и высоты

Если вы все делали правильно, все должно получиться. Следующий шаг - главное меню с фоновым рисунком.

Если вы внимательно посмотрите на рис. 6.1.2, то увидите, что ячейка "тела" страницы находится в той же строке, что и первый пункт главного меню страницы. Такое положение вещей приводит нас к необходимости "разбить" главное меню в коде на две части. Сначала будет добавлен первый пункт меню, затем - пространство под содержимое, и, в конце концов, остальные пункты меню. Вот код (его необходимо добавить к предыдущему фрагменту):

...
<tr>
 <!-- Первая часть главного меню -->
 <td align="right">
 <a href="index.html" style="text-decoration: none; font-size: 12pt; font-weight:bold; color: #006600;"> »
Главная, новости</a>&nbsp;&nbsp;</td>
 <td align="right">
 <img src="images/active_item_mark.gif" alt="" width="11" height="29" /></td>
 <td colspan="3" rowspan="7" valign="top">

 <div style="padding: 20px;"> <!-- Начало основного контента страницы -->

 </div> <!-- Конец основного контента страницы -->

 </td>
</tr>
<tr align="right"> 
 <!-- Вторая часть главного меню -->
 <td>
 <a href="portfolio.html" style="text-decoration: none; font-size: 12pt; font-weight:bold; color: #660000;"> »
Портфолио</a>&nbsp;&nbsp;</td>
 <td>
 <img src="images/inactive_item_mark.gif" alt="" width="11" height="29" /></td>
</tr>
<tr align="right">
 <td>
 <a href="links.html" style="text-decoration: none; font-size: 12pt; font-weight:bold; color: #660000;"> »
Ссылки</a>&nbsp;&nbsp;</td>
 <td>
 <img src="images/inactive_item_mark.gif" alt="" width="11" height="29" /></td>
</tr>
<tr align="right">
 <td>
 <a href="contacts.html" style="text-decoration: none; font-size: 12pt; font-weight:bold; color: #660000;"> »
Контакты</a>&nbsp;&#nbsp;</td>
 <td>
 <img src="images/inactive_item_mark.gif" alt="" width="11" height="29" /></td>
</tr> 

<tr align="right">
 <!-- Разделитель между меню и поиском --> 
 <td><img src="images/separator1.gif" width="187" height="20" /></td>
 <td><img src="images/inactive_item_mark.gif" alt="" width="11" height="20" /></td> 
</tr>

<tr>
 <!-- Поиск --> 
 <td align="right" style=style="text-align: right; font-size: 10pt; font-weight:bold; color: #660000;">
 Поиск: <img src="images/search_fld_s.gif" /> <img src="images/go.gif" />&nbsp;&nbsp;</td> 
 <td style="text-align: right;">
 <img src="images/inactive_item_mark.gif" width="11" height="20" /></td>
</tr> 

<tr valign="top">
 <!-- Остальное пространство. Можно закидать счетчиками Rambler, HotLog SpyLog и пр.-->
 <td style="height: 300px;">&nbsp;</td>
 <td><img src="images/vline.gif" /></td>
</tr>
<tr>
 <td colspan="5">
 <img src="images/px_red1.gif" height="2" width="800" /></td>
</tr>

<!-- Остальная часть таблицы --> 
...

Место в коде, где в дальнейшем будет расположено содержимое страницы (в данном случае - новости), отмечено специальными комментариями. В целом, код прост, хоть и объемен. Самое главное - не напутать с объединением ячеек. Остальное легко реализуемо. Размеры некоторых ячеек таблицы определяются вложенными в них изображениями. Для остальных ячеек прописан стиль, управляющий их размерами.

Хоть наша таблица и не завершена (только две части собрали), но отображаться будет вполне корректно. Однако, главное меню не имеет фонового изображения. Для указания фона меню, добавьте в элемент <table> следующий стиль:

 style="background-position: 0px 74px; background-image: url(images/table_bg.jpg); background-repeat: no-repeat;"

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

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