Обозреватель преобразует данный html-код к следующему виду:
A |
B |
||
C |
D |
E |
|
LINE 1 |
|||
F |
G |
||
LINE 2 |
|||
H |
|||
Рис. 4.6. Таблица, предназначенная для компоновки страницы
Таблица, представленная на рис. 4.6, позволяет последовательно, шаг за шагом, создавать HTML-документ, заменяя символы в ячейках, описаниями соответствующих компонентов.
Итак, вместо символа «А» нужно вставить (как видим из рис. 4.4) рисунок логотипа (файл logo.jpg). Методом предварительного просмотра и подбора определим для рисунка ширину и высоту в пикселях соответственно 70 и 60. Поскольку на макете рис. 4.4 (в определенном смысле – типовой страницы) явно не определена ссылка на главную страницу, назначим рисунку логотипа еще и функцию ссылки на главную страницу. Все эти рассуждения позволяют вместо выражения <td rowspan="2">A</td>, подставить следующее:
<td rowspan="2">
<a href="index.htm">
<img src="images/logo.jpg" width="70" height="60">
</a>
</td>
Теперь поместим заголовок в ячейку «В» таблицы рис. 4.6.
<td colspan="3">
Добро пожаловать в магазин «КНИГА»!
</td>
Для верхнего ряда ссылок на странице для описания ячеек «C», «D» и «E» следует ввести выражения соответственно
<td><a href="finance.htm">Экономика и финансы</a></td>
<td><a href="commerce.htm">Коммерция и маркетинг</a></td>
<td><a href="technology.htm">Компьютерные технологии</a>
</td>
При помещении этих ссылок в таблицу, ширину соответствующих ячеек можно не задавать, она выставляется обозревателем автоматически.
Теперь займемся ячейкой «LINE 1». В эту строку таблицы нужно вставить горизонтальную линию. Определим линию без тени максимальной ширины и высотой, равной 2 пикселям:
<hr width="100%" size="2" noshade>
Ячейку «G» опишем следующим образом.
<td colspan="3">Заставка</td>
Дело в том, что вместо слова «Заставка», в этой ячейке на главной странице обычно помещается композиция из рисунков и текста, отражающая и подчеркивающая отличительную особенность фирмы. Здесь могут располагаться рекламные материалы и другая, важная с точки зрения владельцев сайта, информация.
Приступим к описанию горизонтального ряда ссылок (ячейка F). При этом будем применять тег <p> разделения на абзацы. В случае, если указатель ссылки состоит из двух строк, будем использовать внутри указателя тег <br> перевода строки. Итак, вместо символа F вставим в HTML-код следующий фрагмент
<p><a href="price.htm">Прайс-листы</a></p>
<p><a href="newbook.htm">Новинки</a></p>
<p><a href="recall.htm">Отзывы и<br> предложения</a></p>
<p><a href="address.htm">Наши<br>координаты</a></p>
Что касается ячейки «LINE 2», то ее описание совпадает в точности с описанием «LINE 1».
<hr width="100%" size="2" noshade>
Осталось разобраться со строкой «Н» таблицы рис. 4.6. Для описания соответствующей ячейки используем следующий HTML-код:
<td colspan="4">
Copyright © 2004 SiRgteu <br>
E-mail: sirgteu@samtel.ru
</td>
Итак, посмотрим, что же получилось. На рис. 4.7 представлена страница, явившаяся результатом редактирования страницы рис.4.6.
Рис. 4.7. Первый результат создания главной страницы сайта
Следует признать, что страница получилась не слишком выразительной. Приступим к ее доработке. Прежде всего, создадим общий стиль документа. Для придания данной странице определенных стилевых свойств удобно воспользоваться внешними каскадными таблицами стилей, поскольку ссылку на соответствующий файл CSS можно поместить в HTML–коды всех остальных страниц сайта.
В первую очередь, нужно выбрать фон, который можно задать, модифицируя тег <body>. Для формирования фона используем заранее подготовленный рисунок (файл back.gif в папке images). Присвоим файлу CSS имя book.css и определим в нем модификатор тега <body> следующим образом:
body { background-image: url(images/back.gif)}
Для задания параметров шрифта и выравнивания текста в ячейках таблицы можно использовать тег <td>. Выберем шрифт Verdana, полужирный, размером 12px и зададим выравнивание текста по центру:
td { font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: center
}