3. Средства реализации

3.1. Средства для разработки дизайна

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

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

Рис. 3.1.1 Начальная страница Adobe Illustrator CS4

3.2. Обработка фотографий

В предоставленном заказчиком контенте содержалось достаточное количество графических изображений. Для их пакетной обработки и просмотра было решено использовать FastStone Image Viewer.

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

Рис. 3.2.1 FastStone Image Viewer 4.2

3.3. Верстка сайта

В ерстку сайта решено было производить в Adobe Dreamweaver CS4. Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности стали основным фактором принятия его в качестве программного обеспечения для верстки сайта.

Рис. 3.3.1 Страница загрузки Adobe Dreamweaver CS4

3.3.1. HTML

Hypertext Markup Language (HTML) − это простая система для создания гипертекстовых документов, которые переносимы с одной платформы на другую. в сущности, HTML документы это SGML (Standard Generalized Markup Language) документы с общей семантикой, которая подходит для представления информации в большом количестве приложений.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую web-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.

Мы имеем дело с XHTML-1.0-Transitional: тип, допускающий использование элементов и атрибутов, задающих графическое отображение. Указанные элементы рекомендуется использовать только при необходимости, например, для облегчения миграции документов с HTML 3.2 на XHTML.

3.3.2. CSS

Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.

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

3.3.3. jQuery

С развитием технологий функциональность web-страниц постоянно возрастает и приближается к функциональности настольных прикладных программ. Это реализуется при помощи Javascript. Среди множества библиотек по праву наиболее удобной и доступной для понимания является библиотека jQuery.

Благодаря тому, что объем программного кода jQuery меньше, чем объем стандартного кода Javascript, да и сам код более понятен, сокращаются временные затраты на разработку элементов web-страницы.

В нашем случае заказчиком было выдвинуто требование присутствия интерактивного меню следующего типа:

Рис. 3.3.3.1 Пример реализованного горизонтального меню jQuery аккордеон

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