5.Реализация
5.1. Разработка макета
Перед созданием и демонстрацией заказчику вариантов уже готового дизайна, было согласование относительно общей схемы организации элементов на сайте, лишённой функциональности. в основе сайта было положено три разновидности дизайна страниц, следовательно, было предоставлено три варианта макета:
Рис. 5.1.1 Макет страницы index с выбором языка сайта
Рис. 5.1.2 Макет главной страницы сайта
Рис. 5.1.3 Макет второстепенных страниц сайта
5.2. Разработка дизайна
После утверждения макета необходимо было определиться с цветовой гаммой и стилем разрабатываемого сайта. Учитывая специфику музея, а также пожелания заказчика в присутствии классического оформления, дизайн было решено представить не просто как удобный набор функционирующих панелей, а как определенную композицию, являющую собой подобие картины. Это бы подчеркнуло особенность учреждения и его направленность.
Изначальной цветовой гаммой по пожеланию заказчика были темные и глубокие тона, отсюда следовали и предложенные варианты дизайна:
Рис. 5.2.1 Вариант дизайна в темных тонах
Рис. 5.2.2 Вариант дизайна в темных тонах
Однако после предоставления контента было решено перейти на светлые тона. На сайте должно было размещаться большое количество текстовой информации, а темный текст на светлом фоне имеет неоспоримые преимущества, когда дело касается удобства прочтения. в качестве основы для нового дизайна был прият следующий вариант:
Рис. 5.2.2 Предварительный вариант дизайна
В процессе доработки была изменена подложка на картину, представленную в музее. Для гармоничного вписывания ее в цветовой ряд оформления был наложен полупрозрачный слой соответствующего цвета. Также были разработаны отличающиеся дизайны для фона главных и второстепенных страниц.
Рис. 5.2.3 Фон главных страниц
Рис. 5.2.4 Фон второстепенных страниц
После конечного согласования относительно структуры сайта и подбора шрифтов был определен дизайн всех страниц:
Рис. 5.2.5 Окончательный вариант внешнего вида главной страницы
Рис. 5.2.6 Окончательный вариант внешнего вида второстепенной страницы
5.3. Верстка макета
Изначально нужно сказать о двух типах сайтов относительно верстки:
фиксированной ширины;
«резиновые».
Сайты с резиновой версткой растягиваются и сжимаются в зависимости от ширины окна браузера. Конечно, существует минимальная ширина, меньше которой сайт не сожмется — появятся полосы прокрутки.
Очевидный плюс такого сайта — если он правильно спланирован, пользователь увидит меньше пустых участков. Однако такие сайты сложнее верстать — некоторые графические «спецэффекты» невозможно или сложнее использовать.
У сайтов фиксированной ширины есть зона содержимого, ширина которой задана изначально и одинакова для всех пользователей. Если окно браузера шире, пустые места заполняются цветом или повторяющейся картинкой. Ширина зоны контента должна быть выбрана такой, чтобы поместиться у большинства пользователей на экране. Выбирается минимальное разрешение экрана, которое будет поддерживать сайт. Сейчас обычно берется цифра в 960 пикселей.
Учитывая особенности и содержательную часть разрабатываемого сайта нами было решено (и согласовано с заказчиком) выбрать верстку с фиксированной шириной.
Также существует два основных типа верстки:
табличная;
блочная.
Табличная верстка создается с помощью таблицы, которая делится на колонки, а те в свою очередь на ячейки. в каждой ячейке можно расположить необходимый материал.
При блочной вёрстке существенное значение уделяется универсальному тегу <div>, который выполняет множество функций и является кирпичиком вёрстки, её базовым фундаментом. Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, и код при этом получается более компактным, чем при табличной вёрстке. Но у блочной верстки есть и достаточное количество минусов:
сама по себе верстка сложная;
трудно обеспечить одинаковый вид во всех браузерах;
при уменьшении разрешения экрана/браузера блоки съезжают друг на друга (нужна настройка в стилях под разрешения экрана).
Учитывая это, а также особенности созданного ранее макета, за основу была принята табличная верстка.
На сайте музея фиксированность ширины задается в CSS-файлах, в классе, отвечающем за формат таблицы верстки:
.tableMain {
width: 960px;
height:100%;
min-height: 100%;
… }
Относительно самой же таблицы верстки можно привести пример ее кода пустых второстепенных страниц:
<table width="960" height="335%" align="center" class="tableMain">
<tr valign="bottom">
<td width="28" height="100" rowspan="2" align="center" valign="bottom"> </td>
<td width="153" align="center" valign="bottom" padding="10"> </td>
<td width="741" height="20" align="right" valign="bottom""> </td>
<td width="26" align="right" valign="bottom"> </td>
</tr>
<tr valign="bottom">
<td width="153" align="center" valign="middle" padding="10"">  ;</td>
<td height="64" align="left" valign="bottom"> </td>
<td width="26" height="64" align="left" valign="bottom"> </td>
</tr>
<tr height="70">
<td width="28"> </td>
<td align="center"> </td>
<td align="center">
</td>
<td width="26"> </td>
</tr>
<tr>
<td width="28"> </td>
<td width="153" align="center" valign="bottom"> </td>
<td valign="top>
</td>
<td width="26"> </td>
</tr>
<tr height="4">
<td colspan="4"></td>
</tr>
<tr height="4">
<td colspan="4" valign="bottom" align="center"></td>
</tr>
</table>