Макет сайта как сделать дизайн и передать исходники верстальщику

Добавил пользователь Валентин П.
Обновлено: 16.09.2024

Совсем недавно я на блоге рассказывал как в Photoshop сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Так же по теме

Друзья, для того, чтобы было понятнее обязательно скачайте файлы уже готового шаблона. Так же в архив входит и PSD макет сайта. И конечно же Вы сможете посмотреть демо шаблона в действии.

Подготовка

Для начала нам необходимо создать простую папку, желательно на рабочем столе, чтобы не потерять её. Там будут лежать все наши файлы, которые входят в шаблон сайта.

Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index.

Всё. В принципе мы первый шаг уже сделали. :) Переходим к добавлению кода HTML.

Добавляем разметку HTML

Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.

Открываем наш текстовый документ index и вставляем в него следующий код:

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

Середина сайта

За средний участок отвечает вот этот код:

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет :( Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

CSS

Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом ставим теги , а между ними, соответственно будет располагаться код CSS.

Добавляем вот этот код CSS

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

Это так сказать стандартные стили, их можно изменять по собственному желанию.

Главные блоки (верх, середина и низ)

Теперь вставляем вот этот код стилей CSS, которые отвечают за расположение главных трёх блоков на странице браузера.

Верхнее меню

В коде HTML между тегами

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

А вот теперь мы можем смело добавить стили для нашего меню, вот они:

Вот, что должно получиться:

Иконки социальных закладок

Теперь под HTML кодом меню добавляем вот этот код:

А в стили CSS нужно добавить вот это:

Логотип

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

Но не будем спешить добавлять стили, сначала нужно вырезать фон из макета PSD.

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:

Теперь по выделенной области нажимаем левой кнопкой мыши два раза. После этого тот фон, что нам нужен для меню автоматически обрежется. Вам только нужно сохранить его для web в папку images под именем bgmenu.

Ну а сейчас можно смело добавлять CSS:

Сразу после тега нужно добавить HTML код, который будет отображать серый блок:

Левый блок с последними записями

Теперь будем добавлять блоки с последними записями. После тега

Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде

И конечно же не забываем про CSS для постов:

Чтобы лучше было видно как будет смотреться макет, просто скопируйте HTML код блока постов и поставьте один под одним. В итоге вот что получится:

Правая часть (Сайдбар)

Добавляем поиск. После тега вставляем следующее:

И стили для поиска:

Виджет

После кода поиска вставляем:

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h2img и сохранить в папке images нашего шаблона.

CSS код виджетов:

Футер

В конечном итоге получаем вот такой шаблон:

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится :)

В общем если у Вас будут вопросы спрашивайте в комментариях.

Здравствуй, уважаемый читатель блога LifeExample, в этой статье мы будем заниматься распространённым на сегодня занятием, версткой сайта по макету. Чтобы разобраться с вопросом "Как сверстать сайт по макету?" нам надо иметь установленный графический редактор Photoshop и непосредственно сам макет сайта. Если у вас на данный момент нет PSD макета сайта или же совсем нет макета, не переживайте, я расскажу о том как его получить.

Внимание! Данная статья заняла призовое место в конкурсе "Золотой пост".

Изложенная в этой публикации техника, является одним из примеров процесса верстания макета, но отнюдь не единственным. Я хочу поделиться именно этой техникой только потому, что сам пользуюсь именно ей. (А также и по тому что считаю ее золотой.) Кстати важно отметить, что идеально такой метод верстки подойдет для сайтов с фиксированными размерами элементов, но это не значит, что им нельзя пользоваться при верстке резинового шаблона.

Суть техники переноса макета на сайт

В ходе верстки имеющийся макет будет разрезан на мелкие, и не очень, составляющие картинки, причем разрезание будет проходить в несколько этапов. Такой подход поможет нам четко разграничить размер DIV блоков. После того как все составляющие будут находиться на своих местах, мы сможем лицезреть на странице наш макет, но он еще не будет функционален, т.е. не будут работать поля ввода, ссылки, выделение текста и так далее.

Чтобы разместить все необходимые элементы функционала сайта, ровно на свои места, мы будем использовать CSS параметр opacity: 0.5, отвечающий за прозрачность элементов.

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

Что такое макет сайта?

Под макетом сайта давайте понимать внешний вид главной страницы ресурса, представленной в одном из графическом форматов (JPG, PNP, GIF, PSD, CDR). Как правило, дизайнеры предоставляют макеты в PSD или CDR форматах, но случается и так, что нужно сверстать сайт по макету из JPG файла.

Для дальнейшего усвоения материала я рекомендую вам скачать пример макета в JPG формате. Да-да именно в JPG, а не в PSD, поскольку над PSD можно сделать тот же, и значительно больший, набор операций для переноса макета на сайт. Поэтому мы будем работать с менее функциональным JPG файлом без свойственных макетам слоёв.

Как сверстать сайт (шаг 1)

Подходя к вопросу "Как сверстать сайт", мы уже имеем макет сайта (JPG, PNP, GIF, PSD, CDR), в нашем случае это JPG. Также мы имеем установленную программу Photoshop любой версии.

Наш тренировочный вариант выглядит таким образом:

На первый взгляд он очень прост, и не требует сложных изысков в действиях переноса картинки на HTML верстку, но тем не менее имеет весь спектр элементов присутствующих в любом сайте (header, menu, sidebar, content, footer).
Вот алгоритм наших первостепенных действий, необходимых для того, чтобы сверстать сайт по макету:

Результатом вышеизложенных действия мы должны получить набор картинок:

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

Первый этап закончен, и можно наконец-то начать верстать макет сайта.

Html Верстка макета сайта (шаг 2)

В коде странице прописываем:

html xmlns = "http://www.w3.org/1999/xhtml" lang = "ru-RU" >
head >
meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
title > Верстка сайта / title >
link rel = "stylesheet" href = "style.css" type = "text/css" / >
/ head >
body >
div id = "wraper" >
div id = "header" >

/ div >
div id = "content" >

/ div >
div id = "sidebar" >

/ div >
/ div >
/ body >
/ html >

Откройте страницу, посмотрите, что макет перенесся на html, но это только начало, т.к. все, что мы видим лишь картинки, а нам предстоит сделать отдельные html элементы.

Приступим к созданию шапки

С помощью PhotoShopa, нарежем рисунок шапки на три части:

Переименуем файлы в logo.jpg, search.jpg, phone.jpg

Cоздадим в блоке header три вложеных блока (logo, search, phone ), как вы поняли они предназначаются соответственно для логотипа, поиска и контактных телефонов:

div id = "header" >
div id = "logo" >

/ div >
div id = "search" >

/ div >
div id = "phone" >

Пропишем в style.css правила:

Не забудьте убрать из header временный параметр определения фона — background: url(‘images/ header.jpg’);.

Займемся сайдбаром

Аналогично действиям с шапкой, нарежем картинку на части:

В шаблон HTML вставим нужные нам блоки.

div id = "sidebar" >
ul id = "menu" >

/ ul >
div id = "order" >

div id = "contacts" >

Обратите внимание меню размечено тегом UL . Я предлагаю сделать его сразу кликабельным, т.к. оно полностью текстовое, и нет необходимости вставлять картинку.

В файл стилей добавим правила:

При наличии вышеприведенных правил, можно смело заполнять маркированный список , разделами меню:

По завершению работы над этим элементом наш CSS файл пополнится значительным количеством правил:

Не думаю, что вам стоит разбираться с этими правилами и вникать в них, поскольку это не сама цель статьи. Привел я их только для наглядности и оценки объема процесса верстки сайта.

В данном макете для сайта, остаются еще не сверстанными: контентная часть сайта и подвал. Хотя и шапку можно привлечь к числу не доверстаных, ведь там еще не работает поиск, и телефоны нельзя скопировать.

Как продолжить верстку

В этом пункте, вам стоит подумать, нужно ли вам тратить время на доверстывание тестового макета, или на примере вышеперечисленных действий попробовать на вашем собственном PSD|JPG файле. Конечно же, я советую закончить начатое, и сравнить наши результаты, но выбор остается за вами.

Буду ждать ваших вопросов в комментариях.

Спонсор поста — сервис SeoPult для полной автоматизации продвижения и рекламы сайтов.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

От автора: Сегодня я проведу вас через весь процесс получения из Photoshop HTML. Мы собираемся построить из 4 PSD макетов веб-сайт, который в конечном итоге станет темой WordPress. Это большая статья, поэтому, если вы собираетесь идти до конца, убедитесь, что у вас есть несколько свободных часов!

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Если Вы похожи на меня, Вам интересно посмотреть конечный результат перед началом. Вы можете увидеть четыре конечных файла HTML, следуя по этими ссылкам:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Что мы будем создавать?

Как Вы, может, знаете или не знаете, я написал (очень медленно) книгу по темам WordPress. То, что мы создадим, является HTML, который я использую в книге для создания главного примера тем. Окончательный набор тем называется Creatif. Вы можете увидеть эти 4 макета, которые показаны в скриншотах ниже (щелкните, чтобы получить большие версии).

Вы можете получить полный набор PSD файлов от PSDTUTS Plus, но это обойдется вам в $ 9 в месяц за доступ. Если вы не хотите присоединиться, не беспокойтесь, поскольку вы сможете проследить сегодняшнюю статью, используя только JPG скриншоты .

Часть 1 — Создание структуры и первой страницы

Эта статья обеспечивает приличного размера шаблон. Таким образом, мы собираемся сделать всё шаг за шагом. Сначала мы создадим структуру нашего сайта, затем первую страницу, а затем дополнительные страницы, и наконец дополнительный цвет схемы.

Шаг 1 — Подготовка

Итак, прежде всего, мы загружаем наш редактор кода на выбор. Я использую чаще всего Dreamweaver (и Textmate иногда). Я нахожу, что Dreamweaver имеет довольно приличные инструменты кода и некоторые особенности, которые я действительно использую (в частности, мощный Find+Replace и быстрое подключение ).

В любом случае первое, что делают — это создают структуру каталогов и готовятся к созданию сайта. Обычно я создаю папку images и папку scripts, а затем я кладу весь мой CSS и HTML в основу.

Шаг2 – Быстрая предварительная разметка

Первое, что мы сделаем — это полная разметка HTML с некоторой частью CSS для того, чтобы просто удостовериться, что у нас есть солидная основа. Мы можем также проверить её в основных браузерах (IE7, IE6, Firefox, Safari) только, чтобы удостовериться, что мы находимся на твердой опоре. Нет ничего хуже, чем возвращаться полностью к началу, чтобы устранить проблемы совместимости браузеров. Намного лучше сделать это заранее.

Таким образом, создавая первый макет, мы можем увидеть несколько вещей:

Дизайн центрирован. Это сразу говорит нам, что мы должны обернуть его в контейнер и затем центрировать этот контейнер.

В сущности, дизайн представляет собой ряд горизонтальных блоков. Иногда блоки имеют два столбца, а иногда один. Поэтому мы можем сделать это в виде серии

-ов. Это хорошо потому, что мы можем смешивать и совмещать элементы из разных страниц, как это будет видно позже.

У нас есть нижний колонтитул, у которого другой цвет. Это означает, что фон должен быть того же цвета, в случае, если пользовательский браузер растягивается. Таким образом, нижний колонтитул должен будет находиться в другом контейнере (не в основном).

Многие макеты веб-дизайнерами рисуются в программе Adobe Photoshop. Именно поэтому знать и владеть этой программой верстальщикам просто необходимо. Кстати о его основах я уже писала в статье Фотошоп для верстальщика.

Надеюсь, потом Вы скинете в комментарии свой сайт-пример с версткой одного из этих макетов, чтобы показать всем какой Вы молодец 🙂