Макет страницы можно выполнить с помощью обычного текстового редактора. На рис. 4.4 представлен результат такой работы.

	Добро пожаловать в магазин «КНИГА»!
	Экономика и финансы	Коммерция и маркетинг	Информационные технологии
Прайс-листы Новинки Отзывы и предложения Наши координаты	Заставка
Copyright © 2004 SiRgteu E-mail: [e-mail]

Рис 4.4. Макет главной страницы, созданный в редакторе Word

Логическая структура сайта

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

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

Итак, верхняя группа ссылок отсылает к страницам, которым необходимо уже сейчас дать имена. Поименуем эти страницам соответственно слева направо finance.htm, commerce.htm и technology.htm. Ссылкам, определенным в левой части страницы, сопоставим страницы с именами price.htm, newbook.htm, recall.htm и address.htm.

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

Рис. 4.5. Логическая структура сайта

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

Физическая структура сайта

Физическая структура сайта описывает размещение файлов и папок на диске компьютера. Для небольших сайтов, наподобие данного, особой проблемы создания физической структуры нет. Все файлы, соответствующие HTML-документам, можно разместить в одной корневой папке. В этой же папке обычно создается папка, где размещаются все рисунки. Для написания HTML-кода название корневой папки не имеет значения. При написании же тегов, включающих графические изображения на страницы сайта, важно указать, в какой папке размещены рисунки. Условимся, что рисунки нашего сайта будут храниться в папке images.

Разработка главной страницы

Макеты страниц обычно разрабатывают Web-дизайнеры. Поскольку в нашем случае отсутствует возможность привлечения к разработке сайта такого специалиста, начнем самостоятельно создавать главную страницу сайта, непосредственно используя в качестве инструментов разработки Web-обозреватель и текстовый редактор типа «Блокнот». Определим, каким способом будем создавать отдельные части страницы и позиционировать в них необходимые элементы. Это можно сделать, используя таблицы или фреймы. У каждого из этих способов есть свои достоинства и недостатки.

Выберем табличный способ, как более простой при построении страницы. Поскольку было принято решение использовать для этого таблицу, нужно, в первую очередь, решить, какой размерности ее выбрать. Анализируя рис. 4.4, приходим к выводу, что в качестве исходной может служить таблица размерностью 4х4. Дизайн страницы улучшится, если отделить горизонтальными линиями верхнюю группу ссылок – от остальной части страницы и группу ссылок слева страницы от ее нижней части. Учитывая, что для каждой из горизонтальных линий необходимо выделить отдельную строку, остановимся на размерности таблицы 6х4.

Второй вопрос, на который следует ответить – это выбор общей ширины таблицы. Если ширину таблицы выбрать в процентах от ширины экрана, то при некоторых размерах экранов, структура страницы может нарушиться. Обычно сайты разрабатывают с расчетом разрешения экрана 800х600, и размеры страницы задают не в процентах от ширины экрана, а в абсолютных единицах, чаще всего в пикселях. Ориентируясь на такой экран, ширину таблицы следует выбрать несколько меньше, чтобы исключить горизонтальный скроллинг, например, 750 пикселей. Что касается высоты таблицы, то она значения не имеет, так как почти всегда приходится мириться с присутствием вертикальной прокрутки. Учитывая, что некоторые ячейки необходимо объединить, опишем структуру областей страницы следующим HTML-кодом, проиндексировав области заглавными буквами латинского алфавита:

<table border="1" width="750px" >

<tr>

<td rowspan="2">A</td>

<td colspan="3">B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

<td>E</td>

</tr>

<tr>

<td colspan="4">LINE 1</td>

</tr>

<tr>

<td>F</td>

<td colspan="3">G</td>

</tr>

<tr>

<td colspan="4">LINE 2</td>

</tr>

<tr>

<td colspan="4">H</td>

</tr>

</table>