Как сверстать шаблон сайта из psd в html и css

Вёрстка простого макета

С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.

Настройка рабочего пространства в программе Adobe Photoshop

Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.

Открыв программу Adobe Photoshop, вы увидите примерно следующее:

1. Строка главного меню;
2. Панель параметров;
3. Панель инструментов;
4. Дополнительные панели.

Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace:

Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.

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

При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:

Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:

Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open), и выберите файл.

Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers:

Теперь кликните два раза по линейке и откройте вкладку Units & Rulers, чтобы настроить единицы измерения. Выберите в блоке Units для Rulers и Type единицы измерения пиксели:

Теперь все готово, можно начинать верстать макет.

Создание структуры веб-страницы

Создайте на рабочем столе папку и назовите ее simple text. В этой папке создайте два файла index.html и style.css.

Как вы помните структуру веб-страницы мы создаем на языке HTML. Поэтому сначала открываем файл index.html, и записываем в нем первоначальный код:

Теперь между тегами создайте блок при помощи тега :

Тег является универсальным блочным элементом, и задает на веб-странице блок.

Пропишем в этом блоке элементы, которые присутствуют на макете, а именно заголовок и абзацы:

Самостоятельно добавьте текст между этими тегами.

Теперь в контейнере пропишите путь к файлу со стилями:

Стилизация веб-страницы

Если вы откроете index.html в браузере, то увидите веб-страницу, написанную на чистом HTML. Она очень отличается от той, что изображена на макете. Это мы исправим при помощи каскадных таблиц стилей.

Откройте файл style.css и сбросьте все отступы при помощи универсального селектора звездочки:

Теперь давайте запишем свойства для тега :

body

Как узнать цвет фона веб-страницы в программе Adobe Photoshop? Для этого нужно кликнуть по одному из двух квадратиков с цветом:

Затем кликнуть пипеткой по фону макета, и скопировать шестнадцатеричный код, представленный в окне Color Picker:

Как узнать размер, межстрочный интервал, начертание, семейство шрифтов и цвет текста? Для этого нужно выбрать слой с текстом, затем открыть панель Character. На этой панели будут отображены следующие параметры:

Обратите внимание, что для цвета текста вместо шестнадцатеричного кода мы записали имя оттенка: color: white; . Имена оттенков удобно применять для черного black и белого цвета white , так как имя записать гораздо быстрее, чем шестнадцатеричный код. Все имена оттенков цветов можно посмотреть в этой таблице.

Свойства для блока

Для этого блока мы укажем ширину, а также отступы сверху, слева и справа:

У многих свойств вы будете видеть запись значений в следующих вариантах:

В первом случае мы указываем значения для каждой из четырех сторон, например, margin: 10px 12px 20px 15px; : 10px – отступ сверху, 12px – отступ справа, 20px – отступ снизу, 15px – отступ слева. Такую запись обычно используют когда отступы с каждой стороны разные.

Во втором случае записано три значения, например, margin: 10px 12px 20px; : 10px – отступ сверху, отступ справа и слева по 12px, 20px – отступ снизу. Такую запись удобно применять, когда значения справа и слева равны, а значения сверху и снизу различны. Значение auto используют, когда нужно, чтобы браузер автоматически расчитал отступы слева и справа.

В третьем случае используется два значения, например, margin: 10px 12px; : отступ сверху и снизу по 10px, отступ справа и слева по 12px. Если отступы сверху и снизу равны, и равны друг другу отступы справа и слева, то удобно записывать только два значения, как и в нашем примере.

В четвертом случае записано одно значение, например, margin: 10px; : отступ с каждой стороны равен 10px. Когда параметры со всех сторон равны, то удобно использовать именно такую запись.

Как измерить ширину или высоту элемента в программе Adobe Photoshop? Рассмотрим один из способов: берем инструмент Rectangular Marquee Tool (горячая клавиша M):

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

В панеле Info смотрим значения высоты H, или значение ширины W, если вам нужно узнать ширину элемента:

Переходим к заголовку

Здесь нам нужно указать размер, межстрочный интервал, тень и отступ снизу. Как прописывать первые два свойства вы уже знаете.

Для указания тени нам потребуется свойство text-shadow:

text-shadow: 0 1px 0 rgba(0,0,0,0.3);

• Здесь 0 – отступ по оси X;
• 1px – отступ по оси Y;
• 0 – радиус размытия тени;
• rgba(0,0,0,0.3) – цвет тени. В данном случае мы используем формат RGBA, включающий альфа-канал, который задает прозрачность элементу. В скобках первые три значения отвечают за цвет в формате rgb, а последнее значение отвечает за прозрачность. Это значение записывается в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 – непрозрачности.

Как узнать параметры тени в программе Adobe Photoshop? Выбираем нужный слой в панели слоев, и кликаем по иконке ƒx:

Открывается окно Layer Style. В нем нужно выбрать вкладку Drop Shadow:

Здесь параметр Opacity отвечает за прозрачность, параметр Distance отвечает за отступ по оси Y, параметр Size отвечает за размытие, и параметр Angle отвечает за отступ по оси X. Так как наша тень падает под прямым углом, значит отступ по оси X будет равен нулю. Цвет тени можно узнать в квадратике напротив параметра Blend Mode:

Значение цвета в RGB формате и с альфа-каналом в данном случае будет выглядеть таким образом:

text-shadow: 0 1px 0 rgba(0,0,0,0.3);

Осталось записать отступ снизу.

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

1. margin-top – отступ сверху;
2. margin-right – отступ справа;
3. margin-bottom – отступ снизу;
4. margin-left – отступ слева.

Так как нам нужно указать отступ снизу, то запишем margin-bottom: 30px;

В итоге получим такой код в файле style.css:

* < margin: 0; padding: 0; >body < background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; >div < width: 724px; margin: 43px auto 0; >h1

Первый абзац. Соседние селекторы

Запишем свойства для первого абзаца:

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

(берем именно первый абзац) идут друг за другом, а значит являются соседними тегами, в css соседние селекторы записываются таким образом:

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

Последний абзац. Классы в CSS

Теперь давайте перейдем к последнему абзацу. Так как он тоже отличается от основного текста, то для него мы зададим класс. В html-шаблоне запишите для последнего абзаца атрибут class со значением last-p . Название класса, также как и идентификатора должно начинаться с букв латинского алфавита:

В CSS классы записываются таким образом:

p.last-p

Эти свойства будут работать только для последнего абзаца в нашем шаблоне.

В отличии от идентификаторов, класс с определенным значением вы можете использовать на странице сколько угодно раз.

Свойство text-align со значением right применяется в том случае, когда нужно выровнять текст по правому краю. Также можно использовать и другие значения, например, text-align: center; в этом случае текст будет выравниваться по центру блока.

Остальные абзацы

Для остальных абзацев запишем следующее свойство:

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

Если мы уменьшим окно браузера, то увидим, что содержимое прибито по бокам к краям окна. Чтобы это исправить, добавим для селектора div внутренние отступы:

Группирование селекторов

Если несколько элементов веб-страницы содержат одинаковые свойства с одинаковыми значениями, например, как в нашем примере, заголовок и последний абзац имеют общее свойство – это тень, то вы можете сгруппировать эти селекторы, записав их через запятую:

h1,p.last-p

Не забудьте удалить свойства у отдельно взятых элементов, в нашем случае нужно удалить тень у селекторов h1 и p.last-p .

Как сверстать шаблоны

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

HTML/CSS – два языка, с помощью которых собственно строится структура и внешний вид будущего шаблона. Азы веб-разработки. То, без чего невозможно двигаться дальше.

JavaScript/Jquery – популярный язык, на котором разрабатывают веб-сценарии и самая популярная его библиотека, которая используется на четверти всех сайтов в сети и вообще работает по принципу “все в одном”. С помощью этих технологий реализуются разные вещи: подставляются сценарии на клики мышкой и другие события, разрабатываются интерактивные тесты и даже игры. Например, HTML и CSS не могут сделать так, чтобы при клике мышкой по какому-то элементу сбоку вылез дополнительный блок. А JavaScript может.

PHP и написанные на нем движки сайта (CMS). PHP – язык, который позволяет сделать HTML динамическим. Сегодня мало кого интересует, как сверстать шаблон html, нужно еще и посадить его на движок, то есть сделать так, чтобы на сайт можно было интуитивно понятно добавлять статьи, страницы и прочий контент, да и вообще – с удобством управлять им без необходимости каждую минуту открывать код.

Итак, можно выделить три этапа разработки современного шаблона:

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

Затем все это ставится на какой-то движок, потому что мало кто готов управлять статическим сайтом, для добавления статьи на который нужно создавать новый html-файл с нужным текстом, на который потом ссылаться. В зависимости от потребностей, выбирается либо один из популярных движков (Joomla, WordPress, Bitrix), либо пишется свой собственный.

Последний вариант обычно выбирают достаточно искусные в веб-разработке компании. К слову, самым популярным движком является WordPress. Он еще и бесплатный. Как вы понимаете, на этом второй этапе активно используются возможности PHP. Необязательно использовать этот язык, сайты делают и на Python, Ruby, но их доля в разы меньше.

Третий этап – к шаблону добавляется нужный функционал. Тут уже может использоваться в полную и jquery, и php. Например, в темах для WordPress часто есть возможность визуальной настройки шаблона. Чтобы реализовать это, не обойтись без этих двух технологий.

Как сверстать шаблон для WordPress?

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

Кроме знаний HTML и CSS, которые необходимы для верстки любого шаблона, для верстки под wordpress нужно знать (внимание!), как работает сам движок. Ну и, конечно же, PHP, потому что WordPress написан на этом языке.

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

Рис. 1. Русская документация wordpress на сайте wp-docs.ru. Здесь вы можете прочитать описание сотен функций для движка, но едва ли разберетесь во всем самостоятельно.

Верстка из psd

Но мы как-то пропустили первый этап, сделав вид, что вы уже знаете HTML и CSS и можете без проблем сверстать шаблон из psd (то есть из фотошоповского макета сайта). Хотя эти языки освоить значительно проще, чем PHP, их все же тоже нужно изучать. И для этого не нужно никуда обращаться – на нашем сайте все уже есть. Во-первых, уроки по основам HTML и CSS. Во-вторых, наработка практических навыков благодаря тому, что вы самостоятельно сверстаете шаблон.

Суть сказанного такова. Как-то так я хотел бы сегодня ответить на вопрос о том, как сверстать шаблон. Для этого вам всего лишь нужны уроки от webformyself и собственное время. На первом этапе вы сделаете готовый шаблон на HTML, который уже будет неплохо выглядеть.

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

Ну а множество уроков по javascript&jquery&ajax позволяет вам добавить на сайт что угодно: умное меню, слайдер, таймер обратного отсчета и просто все, на что может хватить человеческой фантазии.

Ну а если вам надо сверстать шаблон для joomla? Это еще одна популярная CMS (то есть движок сайта). На webformyself есть пошаговая инструкция и на эту тему. Абсолютно такая же подробная, как и в случае с wordpress.

Рис. 2. Создать тему для CMS – далеко не самое простое дело. Быстрее всего вы сможете освоить любой движок если посмотрите пошаговый видеокурс.

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

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

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

Как сверстать сайт?

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

В этой статье я покажу, как сверстать его из PSD-макета в готовую веб-страницу, используя инструменты HTML-разметки и каскадные таблицы стилей (CSS).

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

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

• back_all — подложка сайта.
• header_top — фон шапки.
• big_pic — логотип.
• title — фон заголовков левой панели.
• footer — заливка низа сайта.
• 1mini — первое фото для основной части страницы.
• 2mini — второе фото.

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

Делим документ на блоки

Откройте документ index.html и впишите в него следующий код:

Сохраните файл. Все эти теги мы уже давно изучили и в пояснении они не нуждаются. Кодом выше мы создали основу HTML-страницы, теперь нужно разделить её на блоки — указать структуру документа, что за чем в нём будет идти.

Блоков у нас 7, перечислим их по идентификатору (значению атрибута id):

1. content — блок, внутри которого будут храниться остальные блоки.

2. header — блок шапки, внутри которого будут:

2.1. menu — верхняя навигация.

2.2. logo — картинка с текстом.

3. right — основная часть страницы.

4. left — панель слева.

5. footer — низ сайта.

Так и запишем (в контейнер вставьте следующий код):

В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова.

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

a:link < color: #D72020; >a:hover < text-decoration: none; color: #FF0000; >a:visited

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

body < background: #FFD723 url(images/back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #333333; >

Определение блока content:

#content

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

Оформляем горизонтальное меню

Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.

Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.

Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

#header

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

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

Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

#menu < border-left: 2px solid #ffffff; width: 779px; height: 80px; background: url(images/header_top.gif) repeat-x; >

Страница в обозревателе тут же преобразится и будет выглядеть так.

Теперь можно добавить и само меню в файл index.html:

 
 
Главная
 
Галерея
 
Договор
 
Прайс
 
Образцы
 
Контакты
 
 

Обновив страницу можно увидеть, что оно действительно появилось.

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

#menu a < float: left; width: 99px; height: 46px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 14px; padding-top: 35px; >#menu a:hover

Теперь форматирование меню можно сопоставить с PSD-шаблоном.

Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).

Настраиваем логотип

Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

#logo < background: #ffffff url(images/big_pic.jpg) no-repeat; width: 738px; height: 146px; text-align: left; padding-top: 80px; padding-left: 40px; border-left: 4px solid #ffffff; >

Логотип вставлен ровно по размеру.

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

 
Имя сайта
 
Слоган сайта
 

Текст появился, но его тоже нужно оформлять.

Исходя из того, что логотип почти всегда бывает ссылкой, зададим оформление соответствующим классам.

#logo a < text-decoration: none; text-transform: lowercase; font-style: italic; font-size: 36px; color: #FFFFFF; >#logo h2 a

Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right < float: right; width: 500px; padding-right: 10px; >#right h4 < margin: 0; padding: 0px; font-size: 12px; color: #D72020; >#right a < color: #D72020; text-decoration: none; >#right p < margin: 0; padding: 0; padding-bottom: 10px; >#right h2

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

Заполним контейнер right. Изображения поместим в простую таблицу.

Галерея
 
Кухни
 
 

Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.

Создание левой панели

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

Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.

В файл CSS впишите следующий код.

#left < padding: 10px; width: 237px; padding-right: 1em; >#left h3 < width: 225px; height: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding-top: 15px; text-transform: uppercase; color: #ffffff; background: url(images/title.gif) no-repeat >#left ul < margin: 0; padding: 10px; list-style: none; width: 100px; font-size: 18px; >#left li ul < position: absolute; left: 90px; top: 0; display: none; >#left ul li < position: relative; margin-bottom:20px; >#left ul li a < display: block; text-decoration: none; color: #ffffcc; background: #ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0; >#left li:hover ul < display: block; >#left li li < margin-bottom:0px; width: 150px; >#left p

Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.

В контейнер left HTML-документа добавим сначала информационный блок без меню.

Информация
 
Мы предлагаем Вам праздничные скидки. Далее. 
 
Меню

Белый фон распространился ещё ниже по странице.

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

Взгляните, как смотрится список. Многие могут подумать, что это таблица.

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

Делаем ноги

Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

#footer < height: 44px; clear: both; padding-top: 20px; background: url(images/footer.gif) repeat-x; border-top: 5px solid #A6640E; >#footer p < margin: 0; font-size: 10px; text-align: center; color: #ffffff; >#footer a

Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

Copyright © 2016. Адрес сайта | Слоган сайта
 
+7-(777)-777-77-77 | Москва
 

На этом оформление сайта завершено. В результате мы получаем законченный, готовый к использованию шаблон, части которого можно вынести в отдельные PHP-файлы, сделав из статической страницы динамическую.

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

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Как сверстать шаблон сайта из PSD в HTML и CSS

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

Так же по теме

• Как сделать макет или дизайн сайта в Photoshop
• Как простой HTML шаблон сверстать под WordPress

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

Демо ι Скачать

Подготовка

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

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

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

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

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

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

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

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

Шапка сайта

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

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

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

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

• id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
• id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
• id=»colLeft» — левая сторона сайта (Посты)
• id=»colRight» — правая сторона (Сайдбар)

Низ сайта

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

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

Вёрстка HTML и CSS

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

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить. Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

CSS

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

, а между ними, соответственно будет располагаться код CSS.

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

* < margin: 0; padding: 0; >body < width: 100%; height: 100%; color:#333; background: #fff; font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.94em; line-height:135%; >aside, nav, footer, header, section < display: block; >ul < list-style:none; >a < text-decoration:none; >a:hover

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

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

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

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

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

/* ——————————- Главные блоки ———————————-*/ #wrapper < margin-top:40px; width: 1200px; margin: 0 auto; height: auto !important; >.header < width:100%; background: #0dbfe5; height:57px; z-index: 4; >#headerInner < position:relative; border:0px solid #333; width:1200px; height:250px; margin:0 auto; margin-top:0px; >#content < margin-top:40px; >#content #colLeft < background: #fff; float:left; width:800px; margin-right:0px; >#content #colRight < margin-left:45px; float:left; width:350px; position:relative; >#middle:after

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content будет выравнивать сверху левую и правую сторону сайта.

#colLeft отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

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

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

Переходим во вкладку «Файл» и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

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

/* Верхнее правое меню */ .topMenuRight < height:57px; position:absolute; left:0px; top:0px; border: 0px solid #1FA2E1; >.topMenuRight ul li < background: url(images/line.png) 0px 0px no-repeat; float:left; height: 57px; >.topMenuRight ul < padding-left:0px; >.topMenuRight ul li a < margin-top:0px; font-weight:100; border-right:0px solid #adadad; display:block; color:#fff; text-decoration:none; line-height:20px; font-size:18px; padding:16px 20px 21px 20px; >.topMenuRight ul li a:hover

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

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

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

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

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

.share-new < z-index: 1; position:absolute; right:0px; top:14px; >.share-new a < display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; >.share-new .icon-twitter < background: url(images/twitter-variation.png) 0 center no-repeat; padding:4px 0px 0px 5px; font-size:17px; margin-right: 3px; >.share-new .icon-rss < background: url(images/rss-variation.png) 0 center no-repeat; padding:4px 0px 0px 5px; font-size:17px; margin-right: 0px; >.share-new .icon-mail < background: url(images/email-variation.png) 0 center no-repeat; padding:4px 0px 0px 5px; font-size:17px; margin-right: 0px; >

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

/*—————————- Логотип ——————————*/ .logo

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

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

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

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

Выбираем инструмент «Рамка»

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

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

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

.bottomMenu < width:1200px; height: 70px; position:absolute; left:0px; bottom:0px; background: url(images/bgmenu.png) 0px 0px repeat-x; >#dropdown_nav < font-weight:bold; display:inline-block; list-style:none; border-bottom:0px solid #777; margin-top:18px; >#dropdown_nav li < float:left; position:relative; display:inline-block; >#dropdown_nav li a < font-weight:100; font-size:18px; color:#fff; padding:15px 22px 20px 22px; background: url(images/linemenu.png) right no-repeat; -moz-transition: background-color 0.3s 0.01s ease; -o-transition: background-color 0.3s 0.01s ease; -webkit-transition: background-color 0.3s 0.01s ease; >#dropdown_nav li a:hover < background: #000; text-decoration:none; color:#0dbfe5; >#dropdown_nav li a.first < -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; >/* Выпадающее меню */ #dropdown_nav .sub_nav < z-index: 4; width:180px; padding:0px; position:absolute; top:42px; left:0px; border:0px solid #ddd; border-top:none; background: #000; >#dropdown_nav .sub_nav li < width:180px; padding:0px; >#dropdown_nav .sub_nav li a < background: none; font-weight: normal; font-size:15px; display:block; border-bottom:0px solid #e5e0b3; padding-left:10px; color:#fff; >#dropdown_nav .sub_nav li a:hover

Блок «Последние записи»

Сразу после тега

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

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

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