SiteIS

HTML и CSS - революция в мире web-дизайна!

- управление отображением множества документов с помощью каскадных таблиц стилей

- Более точный контроль над внешним видом web-документов

- Различные представления для разных носителей информации

- Сложная и проработанная техника дизайна

Сайт визитка - разметка структуры шаблона

За основу взят макет "synchronous" верстка которого была опубликована на сайте http://ruseller.com.

Оговорюсь сразу, что мною были внесены некоторые изменения в дизайн (да простит меня автор этого шаблона).

Не вызвало восторга использование нестандартных (веб небезопасных) шрифтов. Дело в том, что некоторые из них выглядят по разному в ИЕ и остальных браузерах. К тому же, демонстрационный текст был выполнен символами английского алфавита - если разместить текст на русском языке, увы, в примененных шрифтах вообще теряется смысл. Текст отображается совершенно не так, как задумывалось в дизайне. К сожалению, приемлемого решения, дающего одинаковый результат отображения нестандартных шрифтов во всех современных браузерах на сегодняшний день не существует.

Небольшое отступление от темы

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

Прошу простить за маленькое отступление - наболело :). Вернемся к теме статьи - шрифты я изменил на безопасные для веба (кроме названия компании - его вставим картинкой) и немного упростил шаблон. Скачать готовый PSD макет для настольной и мобильных версий, а так же посмотреть, что у нас должно получиться в конечном итоге, можно по ссылкам ниже.

Посмотреть Demo Скачать шаблон

Скачиваем PSD макет, распаковываем на своем компьютере в любую, удобную для вас папку. Я обычно создаю для проекта отдельную папку с именем, идентичным названию сайта, в ней создаю еще одну директорию с именем PSD и все макеты для верстки сохраняю в ней. Что бы в дальнейшем нам было легче понять, что и в какой папке лежит, я буду исходить из того, что вы поступаете аналогичным образом.

На данный момент, у меня получилась следующая файловая структура - корневая папка для всего проекта synchronous и дочерняя - папка PSD, в которой хранится архив synchronous.zip и извлеченный из этого архива файл home.psd.

Открываем home.psd в Photoshop (внешний вид интерфейса Photoshop может отличаться от показанного на скрине в зависимости от версии редактора - я использую версию 6).

Анализ сайта визитки

В окне Layers(Слои) можно покликать мышью по слоям и просмотреть шаблоны разных страниц сайта для разных версий - настольного компьютера, планшета и мобильного телефона.

Панель layers(слои)

Структура практически любого сайта состоит из трех постоянных блоков - header (верхняя часть, или шапка сайта), content (центральная часть сайта с основным содержанием) и footer (подвал сайта - нижняя часть, в которой располагается техническая информация). В центральной части (content) могут содержаться дополнительные колонки в которых размещается реклама, дополнительное меню, новостные модули и т.д.

strukture site

Рассматриваемый нами шаблон не является исключением из правил - визуально мы можем разбить его на перечисленные выше блоки, которые будут составлять основу (скелет) будущего сайта. Красной рамкой на скрине ниже выделены основные части макета. Я выделил четыре блока - header, картинка в header, content и footer. Блок content, в свою очередь, разбит еще на три дополнительных блока - left colum, center colum и right colum (на скрине они выделены синей рамкой).

Анализ сайта визитки

Если посмотреть на внутренние страницы, то можно заметить, что отличия будут лишь в текстовой части и отсутствии блока картинка в header.

В итоге можно сделать следующий вывод - нам потребуется сверстать трех колоночный макет, информационная часть которого имеет фиксированный размер по ширине и расположена по центру экрана, основной фон сайта заполняет весь экран, footer прижат к низу (этого по макету не видно, но прижимать подвал к нижней части экрана - правило хорошего тона). Каркас будет общим для всех страниц. Данной информации, в принципе, вполне достаточно, что бы можно было приступать к верстке. Этим и займемся в следующей статье.

Автор: Super User