Часть I. Верстка шаблона сайта на основе макета фотошопа.

Часть I. Статья №1. Выбор макета для сайта. Обзор бесплатных источников.

Автор ресурса ~ДРУиД~ не является ГУРУ в сайтостроении, так что дизайном сайта на профессиональном уровне, да и на любительском тоже, не занимался. А по сему для шаблона будем использовать готовый бесплатный макет сайта (блога) в формате фотошоп.

Обзор источников готовых сайтов огромен. При запросе в гугле вида: «бесплатные шаблоны сайтов psd» можно найти множество разнообразных ресурсов. На сайте psd-html-css.ru был выбран макет cherry.psd. На основе данного дизайна будем верстать шаблон своего блога -  в данном случае ресурса ~ДРУиД~.

Вот как он выглядит:

Рисунок №1. Макет сайта cherry.psd

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

В итоге HTML шаблон сайта будут выглядеть следующим образом:

Рисунок №2. Шаблон ресурса ДРУиД (ребрендинг).

В данном шаблоне прослеживаются стилистика выбранного макета cheryy, а также уже существующего дизайна ресурса ДРУиД.

Используемые инструменты для кодирования расписаны в данной статье.

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

Теперь не много об учебниках по HTML и CSS. В рунете оформлено много статей на эту тему. Основным учебником является htmlbook.ru. Примеры остальных статей, ресурсов автор будет приводить по мере их использования во время написания кода шаблона.

Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"

Заключение.

Макет для будущего сайта выбран. Инструментарий настроен. В следующих уроках приступим непосредственно к кодированию. Также в следующих уроках появятся видеоматериалы.