Страница «о компании»

Страница about.html (Рис. 2) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5. На ней размещена текстовая и графическая информация, размеченная согласно стандартам HTML. В тексте описывается история компании и основные преимущества продаваемой ею продукции. Разметка текста содержит теги <h1> и <h2>, в которые заключены заголовки первого и второго уровня, соответственно, теги параграфов <p>, теги изображений <img>, а также теги <b> для выделения жирным шрифтом важных численных значений. Листинг страницы «О компании» представлен в Приложении 2.

Рис. 2. Страница «О компании».

Страница «Акции»

Страница actions.html (Рис. 3) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5. Изображение, размещенной на ней, было разработано и скомпилировано в редакторе растровой графики Abode Photoshop CS5. Изображение имеет атрибут стилей, который задает его положение по центру страницы и отступы. Весь контент данной страницы размечен согласно правилам HTML. Страница содержит текстовую гиперссылку на другой раздел сайта – «Каталог».

Сам раздел является важной частью сайта, влияющей на лояльность посетителя и позволяющей владельцу сайта донести информацию о скидках и подарках до всех посетителей веб-сайта. Листинг страницы «Акции» представлен в Приложении 3.

Рис. 3. Страница «Акции».

Страница «Каталог»

Страница catalog.html (Рис. 4) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5.Данная веб-страница является ключевой для покупателя, так как на ней представлены полные технические характеристики предоставляемой продукции и цены на них. Каталог печей каминов выполнен в виде контейнера, внутри которого находятся блоки <div> с товарными позициями. Каждый блок имеет следующую структуру:

• Слой с изображением с фиксированными размерами

• Слой с названием товара, ценой и таблицей с техническими характеристиками

• Кнопка «Заказать», вызывающая открытие модального окна с формой и набором полей

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

Нажатие кнопки «Заказать» приводит к открытию модального окна по технологии фрейма. Изначально, модальное окно с формой присутствует в коде страницы, но скрыто при помощи возможностей каскадных таблиц стилей. При его появлении, образуется фрейм фиксированной величины с полупрозрачным белым фоном, в котором и отображается контент спрятанного слоя с модальным окном. Такое использование технологии фреймов позволяет получить возможность экономии пространства на странице и избежать дублирования форм для каждого товара.

Сама форма обратной связи выполнена по технологии HTML5 и имеет стандартные функции проверки наличия вводимых данных. Если пользователь не ввел, допустим, данные в поле «E-mail», то это поле будет гореть красным цветом, сигнализируя о необходимости заполнить его. Форма имеет возможность отправки сообщений, содержащих данные, введенные пользователем, на любой почтовый ящик, но для реализации это функции необходима установка почтового сервера и загрузка дополнительных файлов на хостинг. Листинг страницы «Каталог» представлен в Приложении 4.

Рис. 4. Страница «Каталог».