Давайте разберём по шагам создание несложного шаблона сайта. Чтобы создать шаблон, понадобятся две программы — фотошоп и редактор Adobe Dreamweaver. Я пользуюсь Photoshop CS5 и Adobe Dreamweaver 8. На примере этих программ я и буду всё объяснять. Dreamweaver удобен тем, что там сразу можно работать с двумя окнами. Редактируя код html, можно сразу визуально наблюдать как меняется шаблон сайт.
Создание структуры сайта
В первом уроке мы сделаем структуру сайта, т. е. Сделаем разметку шаблона сайта, определимся с размерами шапки сайта, меню и тела для контента. Создадим сайт на тему о способах заработка в интернете. Начинаем с запуска программы Фотошоп. Заходим в меню файл →создать создаём новый документ и выставляем размеры будущего шаблона сайт.
Ширину сайта задаём в зависимости от Ваших потребностей. Для примера я установил ширину в 1000пикселей, высоту тоже 1000 пикселей. Высота никакой роли не играет. Если контент превысит эти 1000 пикселей, то страница будет автоматически удлиняться. Нажав ОК, появится рабочая область, в которой необходимо включить ЛИНЕЙКИ (CTRL+R). Сверху и слева должны появиться линейки.
С верхней линейки тянем направляющую на рабочую область, чтобы образовалась шапка сайта. Потом вторую направляющую, чтобы образовался футер (подвал). Теперь с левой линейки тянем направляющую, чтобы получить область меню. Меню можно делать как справа, так и слева. В моём примере будет слева. После всех манипуляций рабочая область будет выглядеть так:
Я для примера задал высоту шапки — 250 пикселей, ширину области для меню сайта — тоже 250 пикселей и высота подвала — 50 пикселей. Вы по своим желаниям или требованиям можете все размеры устанавливать по своему усмотрению.
Задаем цвет шаблона сайта
Следующий этап — это «раскраска» шаблона, т. е. выберем цвет и зальём этим цветом шапку и подвал. Для этого в панели инструментов выбираем инструмент «Прямоугольная область»
Выделяем этим инструментом верхнюю часть шаблона:
Теперь заходим в меню «Слои ==> Новый» и создаём новый слой. Пропишем ему название gradient. Теперь сделаем градиентную заливку выделенной области шаблона. Для этого выбираете основной и фоновый цвет:
Следующий шаг — выбираем инструмент «Градиент» и в верхней панели выбираем тип градиента «от основного к фоновому». Проводим вертикальную линию по выделенной шапке шаблона.
Чтобы линия была ровной необходимо удерживать клавишу Shift. В результате шапка будет выглядеть так:
Теперь точно такие же действия произвести с нижней частью, подвалом сайта. Единственным отличием будет то, что перед заливкой градиента линию проводить не сверху вниз, а снизу вверх.
Это был самый простой способ раскраски шаблона. На самом деле вариантов очень много.
Читайте в следующих уроках
Статья была полезной?