Тип верстки.

Еще одним важным моментом, предшествующим началу работы над графи­ческим макетом, является выбор типа верстки существует несколько типов верстки:

• Фиксированный — в этом случае сайт делается под конкретное минимальное разрешение экрана и при изменении размеров окна браузера его компо­новка остается фиксированной.

• Не фиксированный— структура сайта изменяется пропорционально изменениям размеров окна браузера.

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

Таблица № 1 - статистика экранного разрешения по данным системы интернет-статистики HotLog на 2013 год.

Разрешение экрана	Процент использования
1366x768 1280x1024 1920x1080 1024x768 1280x800 1440x900 1600x900 1680x1050 768x1024 1024x600 1360x768 800x600 320x480 1152x864 1280x720	23.56 % 15.94 % 9.99 % 9.95 % 6.87 % 5.58 % 4.99 % 4.30 % 3.09 % 2.29 % 1.86 % 1.45 % 1.36 % 1.21 % 1.18 %

Работа над макетом

В первую очередь необходимо составить план создания графического макета.

1. Компоновка блоков: вверху - рисунок фона шапки, вверху посередине - меню навигации, справа посередине - содержательная часть и нижняя часть.

2. Тип верстки: не фиксированный, минимальное разрешение - 800x600.

3. Цветовая гамма: синий, черный, серый, красный.

4. Шрифт: Bookman Old Style.

П ервым делом создаем заготовку размером 780 на 600, при разработке макета из ширины в 800 вычитается размер полосы прокрутки в Microsoft Internet Explorer, как правило, 20 пикселов. В основной слой ставим текстуру синего цвета и делаем неподвижный фон. Выбираем инструмент линия и проводим разделительную линию (рисунок5).

Рисунок 5 - Разработка макета сайта.

В верхнюю часть сайта необходимо добавить рисунок и текстовую надпись

Рисунок 6 - создание шапки.

Создаём необходимые элементы кнопок меню навигации

Рисунок 7- создание кнопок меню навигации.

Д обавляем линию нижней части, в которой будет располагаться текст (рисунок 8).

Рисунок 8 - готовый макет Web-сайта в Photoshop.

Т аким образом, на нашем макете остается незаполненной лишь содержательная часть. Содержательную часть заполняем необходимой для компании информацией, текстом и картинки (Рисунок 9).

Рисунок 9 - содержательная часть.

В итоге проделанной работы получаем готовый макет к верстке.

Верстка сайта в редакторе wysiwyg Web Builder.

WYSIWYG Web Builder HTML-реда́ктор позволяет составлять и изменять страницы в формате HTML. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности. Принцип их работы условно делится на две категории:

1. Редактор показывает только исходный код.

2. Редактор показывает готовую страницу, работая по технологии WYSIWYG.¹ Есть также редакторы, работающие по смешанной системе, то есть поддерживающие оба принципа работы.