3 Конструкторская часть

При создании дизайна в HTML коде была использована верстка блоками DIV.

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

Для начала рассмотрим стилевое свойство float, которое управляет позиционированием перемещаемого блока. Свойство float может принимать значения

• left – элемент страницы принудительно выравнивается по левому краю;

• right – элемент страницы принудительно выравнивается по правому краю;

• none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).

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

• left – элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока;

• right – элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока;

• both – элемент страницы устанавливается ниже любого предыдущего перемещенного блока;

• none – ограничений на положение блока относительно перемещаемых блоков не накладывается.

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

Главная страница сайта содержит краткую информацию о компании, а так же наименования разделов с изображениями товаров из заданных категорий в соответствии с рисунком 3.1.

Рисунок 3.1 – Главная страница сайта

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

Рисунок 3.2 – Список наименований в категории

При клике на товар пользователь получает полную информацию о товаре в соответствии с рисунком 3.3.

Рисунок 3.3 – Полная информация о товаре

Всего существует 12 разделов с различным наименованием товаров (Таблица 3.1).

Таблица 3.1 – Описание разделов сайта

Наименование раздела	Описание
Школьная мебель	Раздел для мебели используемой в школах и учебных заведениях
Детская мебель	Раздел для мебели используемой в детских комнатах и для детей
Офисная мебель	Раздел для мебели используемой в офисах компаний
Кухни	Раздел для кухонной мебели
Шкафы-купе	Раздел для продажи мебели типа «Шкаф-купе»
Гардеробные	Раздел для продажи гардеробных
Столы	Раздел для продажи столов
Стулья	Раздел для продажи стульев
Кресла	Раздел для продажи кресел
Спальни	Раздел для мебели в спальную
Прочее	Прочие товары, которые не подошли под другие категории
Новинки!	Новинки товаров

Так же существует 3 страницы для предоставления дополнительной информации (Таблица 3.2).

Таблица 3.2 – Описание страниц сайта

Наименование страницы	Описание
Контакты	Содержит контактную информацию
О нас	Содержит информацию о компании, о Гостах и стандартах
Информация	Информация о фирме