Ссылка на ресурс, который вам понадобятся в ходе разработки:
Вот то, что мы будем разрабатывать (вы можете кликнуть здесь для просмотра полноценного демо) или здесь, чтобы скачать готовый шаблон.
Этап 1 – Подготовка
Если вы когда-нибудь читали статьи о верстке готовых дизайнов, то наверняка замечали, как в процессе разработки применяется 960gs для создания направляющих. Что же, здесь нам также понадобится 960gs в качестве платформы CSS. Применение CSS-платформ экономит уйму времени, а также значительно облегчает процесс разработки стилей. Теперь вам нужно скачать 960gs для использования на протяжении статьи.Также вам потребуется хороший редактор кода, но тут уже по вашему выбору: вы можете использовать блокнот, если захотите. Мы всегда рекомендуем использовать бесплатные редакторы кода, а также советуем привыкать к ним, это позволяет вам «набить руку».Теперь в процессе разработки вам следует протестировать вашу разметку в различных браузерах, ведь вам не хотелось бы потом возвращаться в самое начало из-за возникших проблем с совместимостью. В нашей сегодняшней статье мы используем CSS3 стили, но, как вам наверняка известно, пока еще не все браузеры в совершенстве поддерживают эту технологию. Результаты, отображенные в этой статье, были зафиксированы в Firefox 3.6, который поддерживает все функции CSS3, использованные на протяжении статьи.
Этап 2 – Подготовка файлов
Первое, что нужно сделать, это создать директорию, в которой будет размещаться наш шаблон. Зачастую внутри корневой директории также создаются папки /images/ для изображений и /styles/ для файлов стилей (CSS). HTML-файлы обычно складывают в корневой директории.
Теперь вам нужно взять CSS-файлы из скачанной папки 960gs – распакуйте zip-файл, и скопируйте полученные файлы из папки /code/css/ в папку /styles/, которую мы только что создали в корневой папке с шаблоном. Вам нужно скопировать файлы 960.css, reset.css и text.css. Вы также наверняка заметили, что там ещё имеется папка /uncompressed/, которая содержит те же файлы, но они не оптимизированы, хотя так и легче их понять. Мы рекомендуем использовать сжатые файлы CSS. Вам также нужно создать новый файл в корневой папке и дать ему название index.html, а затем создать еще один файл в папке /styles/, и назвать его style.css.
В этой обучающей статье нам придется экспортировать изображения из PSD для того, чтобы далее использовать их в нашем HTML-шаблоне. Вы можете экспортировать эти изображения самостоятельно, если у вас есть PSD-файл разделенный на слои из первой статьи о разработке шаблона, либо вы можете скачать исходные файлы шаблона данной статьи, там все изображения уже экспортированы.
Этап 3 – Наброски шаблона
Нам следует начать с разработки простого шаблона HTML для того, чтобы связать все элементы вместе. Вглядываясь в дизайн в окне разработки Photoshop, вы должны заметить несколько вещей:1. шаблон разделен на 4 секции: шапка (логотип и меню), предложенные проекты, тело страницы (контент) и подвал.2. у нас есть фоновое изображение для шапки и предложенных проектов, которое повторяется в горизонтальном направлении.3. теперь нужно увидеть то, что у секций шапки, предложенных проектов и подвала фиксированная высота, т.е. у всех, кроме секции с контентом.4. наконец, у секции с предложенными проектами отличное от остальных фоновое наложение.Исходя из этих пунктов, нам нужно сделать следующую HTML-разметку.
Portfolio Layout
Header Content Goes Here.
Featured Project Goes Here.
Main Contect Goes Here.
Footer Content Goes Here.
Как видно, в этой разметке мы добавили ссылки на файлы CSS в голове документа, создали 4 основных DIV’а, где каждому присвоено уникальное имя класса для дальнейшего оформления, а также вы заметите, что кроме классов header_container и content_container здесь также включен container_12, так как этим классам нужен тот же стиль, как у container_12, встроенного в платформу 960gs. Тот же атрибут применен и к классу DIV’а featured_container, и мы отделили его от основного DIV’а, поэтому и появилась возможность добавить отдельное фоновое наложение. Далее нужно задать стиль повторяющемуся по горизонтали фону в шапке и секции предложенных проектов. Теперь давайте добавим CSS (весь CSS-код должен быть добавлен в файл style.css):
body {
color: #1d1d1d;
background: #fff url(../images/bg.png) repeat-x top center;
font-size: 12px;
font-family: Arial;
}
a {
color: #0cb0ca;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header_container {
height: 100px;
overflow: hidden;
}
.featured_container {
height: 454px;
overflow: hidden;
color: #fff;
font-size: 14px;
}
.featured_container .container_12 {
background: url(../images/featured_bg.png) no-repeat top center;
height: 454px;
}
.content_container {
line-height: 24px;
padding: 38px 0 60px 0;
}
.footer_container {
background: #000 url(../images/footer_bg.png) repeat-x top center;
height: 234px;
width: 100%;
display: block;
overflow: hidden;
color: #fff;
}Давайте посмотрим, что тут у нас есть. Ко всей странице мы применили серый цвет шрифта (#1d1d1d), а фон документа установили на белый (#fff), а также повторяющийся по горизонтали фон (bg.png). Далее мы указали стандартное семейство шрифтов и их размеры, а затем задали цвет ссылок (#0cb0ca) без декораций в обычном режиме и с подчеркиванием при наведении. Далее мы задали стиль header_container с фиксированной высотой в 100 пикселей и задали параметр overflow на hidden. Теперь давайте посмотрим на стиль featured_container: фиксированная высота 454 пикселя, скрытие излишков, белый цвет шрифта и размер 14 пикселей. Далее мы задали наложение фонового изображения (featured_bg.png) к container_12 без повторений и с позиционированием по верхней центральной точке. Далее мы добавили стиль к content_container, который включает в себя 24 пикселя для высоты линий (что контролирует промежуток между линиями текста), 38 пикселей отступа от верхнего края и 60 пикселей отступа от нижнего края для поддержания промежутка между предложенными проектами, подвалом и секции с контентом.
И, наконец, мы задаём стиль footer_container, который включает в себя горизонтально повторяющееся фоновое изображение footer_bg.png, фиксированное значение высоты, 100% значение ширины для заполнения всего окна браузера по горизонтали, установку отображения на block, скрытие излишков, а цвет текста на белый. В результате должно получиться нечто вроде этого.
Этап 4 – Логотип и меню в шапке
Теперь давайте добавим логотип и меню в верхнюю часть нашего шаблона. Вот HTML-код для header_container:
FirstWebDesigner
Home
Portfolio
About Me
Contact Me
Здесь мы использовали класс grid_5 для удержания логотипа и grid_7 для меню. Мы добавили элемент «h1» с ссылкой – это и будет наш логотип и ссылка на домашнюю страницу. Мы также добавили элемент «div» для меню с простыми ссылками, здесь разница лишь в том, что у каждой ссылки есть свой класс, которые далее мы будем использовать для стилизации каждого пункта по отдельности. Вероятно, вы также заметили, что ссылка на домашнюю страницу оснащена классом active, который будет удерживать стиль для активного положения ссылки.
Теперь давайте добавим стиль для содержимого в шапке шаблона:
.header_container .grid_5 {
padding: 36px 0 0 0;
}
.header_container .grid_5 a {
display: block;
text-indent: -9999px;
height: 61px;
width: 280px;
background: url(../images/logo.png) no-repeat;
float: left;
}
.header_container .grid_7 .menu_items {
float: right;
}
.header_container .grid_7 a {
display: block;
text-indent: -9999px;
height: 100px;
background: url(../images/menu_items.png) no-repeat;
float: left;
margin: 0 40px 0 0;
}
.header_container .grid_7 a.home {
width: 62px;
}
.header_container .grid_7 a.home:hover,
.header_container .grid_7 a.home.active {
background-position: 0px -100px;
}
.header_container .grid_7 a.portfolio {
width: 94px;
background-position: -100px 0px;
}
.header_container .grid_7 a.portfolio:hover,
.header_container .grid_7 a.portfolio.active {
background-position: -100px -100px;
}
.header_container .grid_7 a.about {
width: 75px;
background-position: -240px 0px;
}
.header_container .grid_7 a.about:hover,
.header_container .grid_7 a.about.active {
background-position: -240px -100px;
}
.header_container .grid_7 a.contact {
width: 94px;
background-position: -355px 0px;
}
.header_container .grid_7 a.contact:hover,
.header_container .grid_7 a.contact.active {
background-position: -355px -100px;
}Для оформления логотипа мы добавили верхний отступ на 36 пикселей в стиль grid_5 для удержания заголовка и ссылки на логотипе, далее мы стилизовали ссылку посредством стиля отображения block, добавили фиксированное значение высоты и ширины, добавили фоновое изображение Logo.png, выравнивание плавающего элемента по левой стороне и значение -9999 пикселей для углубления текста и, к тому же, для того, чтобы сделать текстовую ссылку невидимой, но пригодной в целях SEO.
Теперь давайте оформим пункты в меню. Для этого, мы воспользовались техникой под названием – спрайты. Она позволяет нам сделать так, чтобы все пункты меню были единым изображением, а посредством CSS мы просто указываем область отображения. Теперь в нашем шаблоне для пунктов меню доступны нормальное положение и положение при наведении курсора мыши, извлекаемые из файла menu_items.png. Теперь мы задаем стиль menu_items, который подразумевает под собой выравнивание плавающего элемента по правому краю, что сдвигает все пункты меню в правую часть шаблона, присвоили тэгам a стиль отображения в виде block, установили фоновое изображение menu_items.png, правый отступ для создания пространства между пунктами меню и углубление текста на -9999 пикселей для скрытия ссылки. Теперь мы добавим стиль для классов каждого пункта меню для того, чтобы мы в полной мере смогли наблюдать нормальное и активное положения. Наконец, мы задаем значение ширины, а положение фона на отображение лишь части содержимого спрайта. Результат можно посмотреть ниже.
Этап 5 – Разработка секции предложенных проектов
Теперь давайте добавим HTML-код для секции предложенных проектов.
Duis ullamcorper, metus a dapibus euismod, velit enim varius mi, tristique diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, magna id aliquam aliquet, nulla turpis tempus metus, vitae sollicitudin nisl nunc ut neque. Ut at felis a neque sollicitudin egestas.
READ MORE
MY PORTFOLIO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed erat ut sapien laoreet venenatis suscipit non neque. Sed mollis sagittis lobortis. - John Doe
Project On Your Mind? Hire Me
Теперь давайте разберем то, что мы добавили. Мы добавили «div» с классом grid_12, который занимает всю ширину и содержит в себе название проекта, его описание и кнопки. Далее мы добавили ещё 2 div’а с классами grid_8 и grid_4, они удерживают содержимое для характеристики покупателей. Теперь давайте добавим стиль CSS для секции предложенных проектов.
.featured_container .container_12 .grid_12 .current_project {
width: 470px;
height: 300px;
overflow: hidden;
padding: 78px 0 0 0;
}
.featured_container .container_12 .grid_12 .current_project h2 {
font-family: Georgia;
font-size: 30px;
font-weight: normal;
line-height: 24px;
}
.featured_container .container_12 .grid_12 .current_project p {
line-height: 24px;
width: 450px;
margin: 0 0 50px 0;
}
.featured_container .container_12 .grid_12 .current_project a {
color: #1d1d1d;
float: left;
width: 150px;
height: 38px;
text-align: center;
font-weight: bold;
line-height: 38px;
border: 5px solid #a3a4a4;
background: #fff;
margin: 0 10px 0 0;
-moz-border-radius: 14px;
border-radius: 14px;
text-shadow: 1px 1px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=1);
background: -moz-linear-gradient(top, #FFFFFF 0%, #DCDCDC 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCDCDC)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCDCDC',GradientType=0 ); /* ie */
}
.featured_container .container_12 .grid_12 .current_project a:hover {
background: -moz-linear-gradient(top, #DCDCDC 0%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DCDCDC), color-stop(100%,#FFFFFF)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCDCDC', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
}
.featured_container .container_12 .grid_8 p {
font-size: 12px;
height: 76px;
margin: 0;
padding: 10px 0 0 30px;
line-height: 24px;
}
.featured_container .container_12 .grid_8 p span.name {
font-style: italic;
color: #0cb0ca;
}
.featured_container .container_12 .grid_4 a {
color: #1d1d1d;
float: right;
width: 235px;
height: 40px;
text-align: center;
line-height: 40px;
border: 4px solid #141a20;
background: #fff;
margin: 15px 0 0 0;
-moz-border-radius: 12px;
border-radius: 14px;
text-shadow: 1px 1px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=1);
background: -moz-linear-gradient(top, #FFFFFF 0%, #DCDCDC 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCDCDC)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCDCDC',GradientType=0 ); /* ie */
}
.featured_container .container_12 .grid_4 a:hover {
background: -moz-linear-gradient(top, #DCDCDC 0%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DCDCDC), color-stop(100%,#FFFFFF)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCDCDC', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
}Для начала мы стилизовали current_project посредством указания фиксированной ширины и высоты, скрытия излишков и отступом от верхнего края в 78 пикселей – это поможет нам создать пространство между заголовком и предложенными проектами. Далее мы установили второй стиль для шапки, в котором содержатся параметры шрифта Georgia, размер шрифта 30 пикселей, а также параметр ширины линии в 24 пикселя. Далее, с толщиной линии, мы устанавливаем стиль абзаца с фиксированной шириной и отступом от нижнего края.
Далее для оформления кнопок «читать далее» и «мой портфель» мы применили возможности CSS3, что дает нам тот же результат, как и в Photoshop без использования изображений. Здесь две секции – одна предназначена для нормального положения кнопки (.featured_container .container_12 .grid_12 .current_project a) и вторая для положения при наведении курсора мыши (.featured_container .container_12 .grid_12 .current_project a:hover). Для нормального положения мы используем #1d1d1d в качестве замены стандартному цвету ссылок, выравнивание плавающего элемента по левой стороне, фиксированные параметры ширины и высоты, выравнивание текста по центру, полужирный шрифт, а толщина линии такая же, как и высота текста – это нужно для того, чтобы текст выравнивался по центру по горизонтали. К тому же, здесь у нас параметр толщины границы составляет 5 пикселей с радиусом 14 пикселей, а также правый отступ для создания промежутка между кнопками. К тексту мы задали параметр text-shadow, что позволяет нам отбросить тень от текста на 1 пиксель по горизонтали и вертикали и размыть его на 0 пикселей. И, наконец, кнопкам был задан фон в виде градации.
Мы рекомендуем вам воспользоваться утилитой CSS Gradient Generator, которой мы пользуемся для генерации градаций. Что касается эффекта при наведении, то здесь мы изменим лишь эффект градации (так же, при помощи генератора).
Вероятно вы заметили, что мы стилизовали элемент абзаца в секции рекомендаций пользователям так, чтобы шрифт там был маленьким, высота была фиксирована, вообще не было полей, но были отступы сверху и слева, а также увеличенная ширина строки. Далее мы стилизовали элемент span, который содержит в себе имя курсивом, а в качестве цвета текста задан #0cb0ca. Наконец, мы стилизовали кнопку «Project On Your Mind? Hire Me» по тому же принципу, как мы сделали с предыдущими кнопками, за исключением пары параметров. Теперь наш шаблон должен выглядеть примерно так.
Этап 6 – Разработка секции контента
Теперь давайте перейдем к секции контента. Как видно из нашего дизайна, эта секция поделена на три равных по ширине отдела, поэтому нам нужно сделать три элемента «div» с классом grid_4. Вот код HTML:
What I Do?
Aenean ullamcorper euismod
What I Do?Aenean ullamcorper euismod
Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo. Nulla facilisi. Etiam pretium, libero sit amet gravida hendrerit, tortor risus lacinia odio, mattis venenatis felis massa nec eros.
PellentesqueMauris ac tinciduntCras elementumPellentesqueMauris ac tincidunt
PellentesqueMauris ac tinciduntCras elementumPellentesqueMauris ac tincidunt
My Portfolio
Aenean ullamcorper euismod
My PortfolioAenean ullamcorper euismod
Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
I Socialize
Aenean ullamcorper euismod
I SocializeAenean ullamcorper euismod
Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
Twitter
Flickr Group
Digg
RSS Subscribe
Skype
Заметьте, что отдел с заголовком содержит изображение, нормальный текст и текст внутри элемента span. Вам также придется экспортировать иконки из PSD-файла или же воспользоваться теми, которые есть в исходном файле. Всё, что нам остается сделать – внести стилизацию посредством CSS. Вот CSS-код для основного раздела шаблона.
.content_container {
line-height: 24px;
padding: 38px 0 60px 0;
}
.content_container .grid_4 h2 {
font-family: Georgia;
font-size: 24px;
line-height: 18px;
font-weight: normal;
}
.content_container .grid_4 h2 img {
float: left;
margin: -8px 15px 0 0;
}
.content_container .grid_4 h2 span {
font-family: Verdana;
font-size: 14px;
}
.content_container .grid_4 p {
text-align: justify;
margin: 0 0 42px 0;
}
.content_container .grid_4 ul {
float: left;
}
.content_container .grid_4 ul li {
list-style-type: none;
margin: 0 40px 0 0;
}
.content_container .grid_4 ul li:before {
content: "- ";
}
.content_container .grid_4 .social_icons a {
display: block;
text-decoration: none;
line-height: 26px;
height: 26px;
width: 150px;
float: left;
margin: 0 0 35px 0;
}
.content_container .grid_4 .social_icons a:hover {
text-decoration: underline;
}
.content_container .grid_4 .social_icons a img {
float: left;
margin: 0 25px 0 0;
}Для начала мы задаем стилю h2 параметр Georgia в качестве основного шрифта, фиксированный размер шрифта и ширину строки. Затем мы оформляем изображение в заголовке (иконка) – оно должно ровняться по левому краю, затем добавляем положительное значение правого поля и отрицательное значение верхнего поля для того, чтобы изображение ровнялось так же, как мы видим в оригинальном изображении дизайна. Теперь мы оформляем span так, чтобы в нем использовался другой шрифт и меньший текст. Затем мы оформляем параграф так, чтобы текст ровнялся или заполнял все свободное пространство, а также добавляем нижнее поле. Далее нам нужно оформить пункты неупорядоченного списка в левой части основной секции. Для начала мы оформляем элемент ul так, чтобы он ровнялся по левому краю, а затем оформляем li и отменяем у него тип списка, а затем добавляем туда правое поле на 40 пикселей. Теперь вы должны увидеть то, что когда мы используем «list-style-type: none», то у пунктов перечисления нет пиктограмм, но в оригинальном дизайне у нас в качестве отметки перечисления используется черточка, поэтому нам нужно внести его перед каждым пунктом списка используя «.content_container .grid_4 ul li:before» и «content: «- «».
Наконец, мы оформляем социальные иконки в правом отделе основной секции. Здесь нам нужно оформить положения ссылки, а также стиль иконки. Теперь наш шаблон должен выглядеть примерно так. 
Этап 7 – Разработка подвала
Подвал также разделен на три секции равной ширины, и здесь мы также применяем grid_4. Текст авторского права должен быть в самом низу подвала и выровнен по центру, поэтому нам нужно использовать «div» с классом container_12 copyright с div’ом внутри него, к которому приставлен класс grid_12, чтобы он заполнял весь блок. Вот HTML-код для подвала:
Quick Links
Latest From Blog
Contact Me
Sed mi sem, tempor sed ullamcorper ac, tempor
Integer at urna diam, Duis ornare viverra.
burns.michaeljohn@gmail.com
RSS Feed Subscribe
Copyright 2010 1stwebdesigner, All Rights Reserved
Теперь давайте оформим содержимое подвала. Вот CSS-код для подвала:
.footer_container {
background: #000 url(../images/footer_bg.png) repeat-x top center;
height: 234px;
width: 100%;
display: block;
overflow: hidden;
color: #fff;
}
.footer_container .container_12 {
padding: 20px 0 0 0;
}
.footer_container .container_12 .grid_4 h3 {
font-family: Georgia;
font-size: 18px;
line-height: 12px;
font-weight: normal;
}
.footer_container .container_12 .grid_4 ul li {
list-style-type: none;
margin: 0 0 0 35px;
padding: 0 30px 0 0;
height: 29px;
line-height: 29px;
border-bottom: 1px solid #47535d;
}
.footer_container .container_12 .contact_details p {
margin: 0 0 15px 0;
}
.footer_container .container_12 .contact_details a {
display: block;
clear: both;
height: 28px;
line-height: 28px;
font-style: italic;
}
.footer_container .container_12 .contact_details a img {
float: left;
margin: 0 10px 12px 0;
}
.footer_container .container_12.copyright {
padding: 0;
}
.footer_container .container_12 .grid_12 {
text-align: center;
font-size: 11px;
line-height: 40px;
height: 40px;
}Учтите, что мы задали верхнее поле в 20 пикселей для класса container_12, что создаст пространство между подвалом и основной секцией шаблона. Далее мы задали стилю header 3 шрифт Georgia размером в 18 пикселей, высоту строки в 12 пикселей и стандартную декорацию текста. Далее мы отключили пиктограммы у пунктов списка, задали ту же высоту строки, а также высоту пунктов меню так, чтобы текст встал по центру по вертикали. Затем мы задали толщину нижней границы в 1 пиксель, левое поле и отступ справа. Далее мы оформили абзацы, ссылки и иконки контактов. Наконец, мы секции копирайта мы задали стилизацию без отступов, с выравниванием по классу grid_12, чтобы маленький текст был выровнен по центру, далее были заданы те же значения высоты строки.
Теперь, если вы следовали всем пунктам и указаниям нашей сегодняшней статьи, то у вас должно получиться нечто вроде этого: 
Заключение
В нашей сегодняшней статье мы научились преобразовывать дизайн в полноценный шаблон HTML/CSS, используя CSS-спрайты и методики CSS3. Не забудьте провести тест на валидацию для проверки совместимости с браузерами. Конечно же, все CSS3 параметры не могут быть валидными для всех браузеров, поэтому перед проверкой исключите все CSS3-параметры. На этом всё.
Бекап для наших читателей находится в архиве.