Ваш IP: 54.92.197.82

Главная » Делаем шаблон сайта

Делаем шаблон сайта

 
Урок-1.

Создание структуры сайта

Рано или поздно, но многим приходит в голову мысль сконструировать свой шаблон сайта. Вполне нормальная мысль. И чем раньше этим заняться, тем толку будет больше. Давайте разберём по шагам создание не сложного шаблона, но довольно приличного, который в некоторых случаях еще и пригодится. Освоив эти уроки, Вы сможете делать вполне приличные шаблоны. Главное понять основы работы над созданием шаблона.

Что нужно для создания шаблона? Понадобятся две программы — фотошоп и редактор Adobe Dreamweaver. Я пользуюсь Fhotoshop CS5 и Adobe Dreamweaver 8. На примере этих программ я и буду всё объяснять. Dreamweaver удобен тем, что там сразу можно работать с двумя окнами. Редактируя код html можно сразу визуально наблюдать как меняется шаблон сайт.

В первом уроке мы сделаем структуру сайта, т. е. Сделаем разметку шаблона сайта, определимся с размерами шапки сайта, меню и тела для контента. Создадим сайт на тему о способах заработка в интернете. Начинаем с запуска программы Фотошоп. Заходим в меню файл →создать создаём новый документ и выставляем размеры будущего шаблона сайт.
 

Ширину сайта задаём в зависимости от Ваших потребностей. Для примера я установил ширину в 1000пикселей, высоту тоже 1000 пикселей. Высота никакой роли не играет. Если контент превысит эти 1000 пикселей, то страница будет автоматически удлиняться. Нажав ОК, появится рабочая область, в которой необходимо включить ЛИНЕЙКИ (CTRL+R). Сверху и слева должны появиться линейки. С верхней линейки тянем направляющую на рабочую область, чтобы образовалась шапка сайта. Потом вторую направляющую, чтобы образовался футер (подвал). Теперь с левой линейки тянем направляющую, чтобы получить область меню. Меню можно делать как справа, так и слева. В моём примере будет слева. После всех манипуляций рабочая область будет выглядеть так:

Я для примера задал высоту шапки — 250 пикселей, ширину области для меню сайта — тоже 250 пикселей и высота подвала — 50 пикселей. Вы по своим желаниям или требованиям можете все размеры устанавливать по своему усмотрению.

Это был первый урок. В следующем уроке мы рассмотрим выбор цвета для шаблона и воплотим это в реальность.
 

Делаем шаблон сайта обновлено: Ноябрь 29, 2015 автором: admin