Мы научимся верстать шаблон сайта на основании psd файла, сделанного в фотошопе. Сначала мы создадим папку с необходимыми для шаблона изображениями. Потом создадим файл index. Потом мы создадим базовую HTML структуру шаблона и затем постепенно будем ее наполнять управляющими блоками для различных частей и элементов сайта. После этого мы создадим файл style. А уже после этого мы с помощью этого файла будем редактировать внешний вид сайта, до тех пока он не будет выглядеть в точности, как и задумывалось изначально.

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

Изображение логотипа
Прежде всего нам надо сохранить отдельным файлом изображение логотипа. Отключаем все лишние слои, оставляем картинку логотипа и, используя команду « » (Save for Web…), сохраняем изображение лого.

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

Кстати, что касается изображений, то файлы logo.png , temp-post-thumbnails1.png и temp-post-thumbnails2.png можно сохранить прямо с demo шаблона . Файлы back-top-icon.png , credits.png , rss-icon.png , search-icon.png , star.png и twitter-icon.png можно сделать со скриншота макета. О том, как сделать файл bg.png , рассказано в . А файл faux.png представляет собой протяжку фона с зоной сайдбара, выделенной цветом. Это прямоугольник размером 958х22 пикселей. Первая часть, шириной 650 пикселей — закрашена белым, вторая часть, шириной 295 пикселя — закрашена цветом #f8f8f8 и третья часть шириной 15 пикселей снова белая.

Базовая HTML структура
В том же месте, где лежит папка images с файлами изображений макета, создаем простой текстовый документ. Для этого щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем index.htm . В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл index , в который мы и будем вписывать все HTML коды.

Теперь копируем код, приведенный ниже, и вставляем в файл index . Важно! Открывать этот файл нужно с помощью специального редактора. Я обычно пользуюсь «Блокнотом.» Для этого щелкаем правой кнопкой мыши по файлу index и выбираем пункт «Открыть с помощью…» > «Блокнот». Есть и другие специальные редакторы с подсветкой разметки. Кому как удобнее.

Базовый HTML код содержит в себе описание типа документа, ссылку на файл стилей и глобальный контейнер div , для управления содержимым веб-страницы. Все наши локальные блоки (контейнеры) мы будем вставлять между основными тегами div id=»container«> и /div>.

Ticket Stub

HTML: шапка сайта
Сначала вставляем HTML код для шапки сайта div id=»header»>. В тег h1> мы заключаем заголовок сайта в виде логотипа. Далее запись с тегами ul> и li> управляет блоком подписки через Твиттер и RSS.

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

Captain America Kicks Ass!

Lorizzle ipsum dolor sizzle ghetto, consectetuer fizzle elit. Sheezy doggy velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit cool, own yo" vizzle, arcu. Pellentesque eget phat. My shizz erizzle. For sure izzle dolizzle for sure turpis tempizzle sizzle. Maurizzle i saw beyonces tizzles and my pizzle went crizzle nibh et turpizzle. Bizzle izzle i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eleifend pot nisi. In hac habitasse platea dictumst. Pimpin" dapibizzle. Cool tellus owned, pretizzle eu, mattis uhuh ... yih!, eleifend dang, nunc. Ma nizzle suscipizzle. Integizzle shizzlin dizzle away sizzle purus. Mammasay mammasa mamma oo sa at dope. Yo mamma erizzle. condimentizzle, turpizzle nizzle congue consectetuer, brizzle libero bling bling fizzle, sizzle ullamcorper sure for sure nizzle sizzle.

HTML: навигация
После кода анонса поста вставляем код навигации шаблона, представленный ниже.

HTML: сайдбар
Сайдбар у нас состоит из основного меню (pages), нескольких категорий (categories), блока поиска (search) и текстового блока (About). Заголовок текстового блока заключен в тег h3>. Ранее в пункте этого урока «HTML: две колонки» мы уже заготовили место для дива сайдбара. Поэтому копируем код ниже и заменяем див с надписью!—Sidebar—> на этот код.

HTML: футер
Футер содержит ссылку на сайт wordpress.org, ссылку на сайт автора шаблона и кнопку Back to top. Копируем код и вставляем в основной HTML документ.

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

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

Базовый CSS
Сначала создадим сам файл стилей. Для этого в той же папке, где у нас находится папка images и файл index , создаем текстовый документ. Щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем style.css. В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл style , в который мы и будем вписывать все стили. Этот файл также нужно редактировать с помощью какого-нибудь текстового редактора. Подойдет и «Блокнот», в общем, кому что нравится.

Копируем код ниже и вставляем в созданный нами файл стилей. С помощью этого кода мы зададим некоторые общие установки, а также цвет, размер и тип основного шрифта (font), цвет заднего фона (background), цвет для ссылок (a) и общую ширину сайта (#container).

Body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { font: 14px/24px Helvetica, Sans-Serif; color: #7e7e7e; background: #f5f5f5 url(images/bg.png); } a { color: #9f3a3a; text-decoration: none; } a:hover { color: #792323; } #container { width: 960px; margin: 0 auto; }

CSS: шапка сайта
Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы поставили на место логотип (#logo), иконки Твиттера и RSS и соответствующие текстовые надписи (#subscribe).

#header { overflow: hidden; } #header #logo { margin: 20px 0 10px 15px; float: left; } #header #subscribe { list-style: none; float: right; margin: 35px 30px 0 0; font-size: 16px; } #header #subscribe li.rss { background: url(images/rss-icon.png) left no-repeat; padding: 5px 0 5px 40px; margin: 0 0 10px 0; } #header #subscribe li.twitter { background: url(images/twitter-icon.png) left no-repeat; padding: 5px 0 5px 40px; }

На этой стадии шаблон выглядит так.

CSS: две колонки
Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы задаем стиль контейнеру main , в частности бэкграунд колонок и обводку.

#main { background: url(images/faux.png); border: 1px solid #e6e6e6; overflow: hidden; box-shadow: 0px 0px 5px #d8d8d8; -moz-box-shadow: 0px 0px 5px #d8d8d8; -webkit-box-shadow: 0px 0px 5px #d8d8d8; border-bottom: 15px solid #fff; }

На этой стадии шаблон выглядит так.

CSS: основной контент
Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы задаем ширину и расположение блоков с основным контентом (анонсами поста).

#main #content { width: 590px; float: left; padding: 35px 30px 60px 30px; } #main #content h2 { font-size: 24px; font-weight: normal; text-transform: uppercase; margin: 0 0 15px 0; } #main p { margin: 0 0 24px 0; } #main #content .post-thumbnail { float: left; margin: 4px 30px 10px 0; } #main #content .post-thumbnail img { padding: 1px; border: 1px solid #eaeaea; }

На этой стадии шаблон выглядит так.

#main #content .post-info { padding: 1px; border: 1px solid #e9e9e9; margin: 0 0 60px 0; } #main #content .post-info ul { background: #e9e9e9; list-style: none; text-transform: uppercase; padding: 15px 20px 10px 20px; overflow: hidden; } #main #content .post-info ul li.date { float: left; } #main #content .post-info ul li.category { float: left; margin: 0 0 0 20px; background: url(images/star.png) left no-repeat; padding: 0 0 0 35px; } #main #content .post-info ul li.read-more { float: right; }

На этой стадии шаблон выглядит так.

CSS: навигация
Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем кнопки навигации.

#main #content .pagination { overflow: hidden; margin: 0 0 60px 0; } #main #content .pagination p { width: 180px; border: 1px solid #e9e9e9; padding: 1px; text-align: center; } #main #content .pagination p.prev { float: left; } #main #content .pagination p.next { float: right; } #main #content .pagination p a { display: block; background: #e9e9e9; padding: 15px 0px 10px 0px; text-transform: uppercase; }

На этой стадии шаблон выглядит так.

CSS: сайдбар
Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем внешний вид сайдбара.

#main #side { width: 263px; float: left; padding: 15px 30px 15px 15px; border-top: 15px solid white; } #main #side ul#pages, #main #side ul#categories { list-style: none; margin: 0 0 30px 0; } #main #side ul#pages li, #main #side ul#categories li { border: 1px solid #e9e9e9; padding: 1px; margin: 0 0 10px 0; text-align: right; } #main #side ul#pages li a, #main #side ul#categories li a { display: block; background: #e9e9e9; padding: 15px 20px 10px 20px; text-transform: uppercase; }

На этой стадии шаблон выглядит так.

CSS: строка поиска
Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем как будет выглядеть строка поиска.

#main #side h3 { font-size: 20px; font-weight: normal; text-transform: uppercase; margin: 0 0 10px 0; text-align: center; } #main #side form { overflow: hidden; margin: 0 0 30px 0; } #main #side input.searchbar { float: left; width: 193px; height: 25px; padding: 8px 13px 6px 13px; background: #fff; border: 1px solid #e9e9e9; font: 14px Helvetica, Sans-Serif; color: #7e7e7e; } #main #side input.searchbutton { width: 34px; height: 34px; float: left; margin: 3px 0 0 8px; background: url(images/search-icon.png); text-indent: -9999px; cursor: pointer; padding: 0 0 0 34px; /*IE Fix*/ }

На этой стадии шаблон выглядит так.

CSS: футер
Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем внешний вид футера.

#footer { overflow: hidden; margin: 0 0 60px 0; } #footer #credits { list-style: none; margin: 20px 0 0 30px; } #footer #credits li { float: left; margin: 0 6px 0 0; } #footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } #footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } #footer p#back-top { float: right; margin: 0 30px 0 0; } #footer p#back-top a { display: block; padding: 0 0 0 26px; background: url(images/back-top-icon.png) left no-repeat; }

На этой стадии футер выглядит так.

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

Последнее обновление: 28.04.2016

Используем полученные из прошлых тем сведения и создадим более менее осмысленный макет самой простейшей веб-страницы. Для начала определим базовую структуру веб-страницы:

В начале идет шапка сайта - блок с header, который содержит заголовок страницы и панель навигации. Далее идет блок wrapper, в котором два сайдбара и блок основного содержимого страницы. Сайдбары условно тоже содержат некоторое содержимое, но главное, что они определены до основного блока. И в самом низу небольшой футер.

В начале веб-страницы определено поключение файла styles.css , который будет стилизовать веб-страницу. Поэтому создадим в одном каталоге с веб-страницей файл styles.css и определим в нем следующее содержимое:

* { box-sizing: border-box; } html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } body { font-family: Verdana, Arial, sans-serif; background-color: #f7f7f7; } #header{ background-color: #f4f4f4; } #header h1 { font-size: 24px; text-transform: uppercase; font-weight: bold; padding: 30px 30px 30px 10px; clear: both; } #nav { background-color: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } #nav li { float: left; list-style: none; } #nav a { display: block; color: black; padding: 10px 25px; text-decoration: none; border-right: 1px solid #ccc; } #nav li:last-child a { border-right: none; } #nav a:hover { font-weight: bold; } #nav:after { content: " "; display: table; clear: both; } .wrapper{ background-color: #f7f7f7; } .aside h2 { font-size: 0.95em; margin-top: 15px; } .aside h3 { font-size: 0.85em; margin-top: 10px; } .aside p, .aside li { font-size: .75em; margin-top: 10px; } .aside li{ list-style-type: none; } #sidebar1 { float: left; width: 20%; padding: 0 10px 0 20px; } #sidebar2 { float: right; width: 20%; padding: 0 20px 0 10px; } #article{ background-color: #fafafa; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin-left: 20%; margin-right: 20%; padding: 15px; width: 60%; } #article:after{ clear:both; display:table; content:""; } #article h2{ font-size: 1.3em; margin-bottom:15px; } #article p{ line-height: 150%; margin-bottom: 15px; } #footer{ border-top: 1px solid #ccc; font-size: .8em; text-align: center; padding: 10px 10px 30px 10px; } #nav ul, #header h1, .wrapper, #footer p { max-width: 1200px; margin: 0 auto; } .wrapper, #nav, #header, #footer{ min-width: 768px; }

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

Следующая пара стилей управляет отображением шапки (хедера) и заголовка страницы:

#header{ background-color: #f4f4f4; } #header h1 { font-size: 24px; text-transform: uppercase; font-weight: bold; padding: 30px 30px 30px 10px; clear: both; }

Следующий набор стилей управляет созданием горизонтальной панели навигации:

#nav { background-color: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } #nav li { float: left; list-style: none; } #nav a { display: block; color: black; padding: 10px 25px; text-decoration: none; border-right: 1px solid #ccc; } #nav li:last-child a { border-right: none; } #nav a:hover { font-weight: bold; } #nav:after { content: " "; display: table; clear: both; }

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

устанавливается обтекание (float: left;), благодаря чему они размещаются в ряд, а каждая ссылка делается блочным элементом (display: block;)

Wrapper{ background-color: #f7f7f7; } .aside h2 { font-size: 0.95em; margin-top: 15px; } .aside h3 { font-size: 0.85em; margin-top: 10px; } .aside p, .aside li { font-size: .75em; margin-top: 10px; } .aside li{ list-style-type: none; } #sidebar1 { float: left; width: 20%; padding: 0 10px 0 20px; } #sidebar2 { float: right; width: 20%; padding: 0 20px 0 10px; }

Стиль класса wrapper позволяет установить фоновый цвет для боковых панелей. Для каждого сайдбара определяется ширина в 20% от ширины страницы. Процентные значения позволят автоматически подстраивать ширину блоков под ширину окна браузера при его расширении или сужении.

#article{ background-color: #fafafa; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin-left: 20%; margin-right: 20%; padding: 15px; width: 60%; } #article:after{ clear:both; display:table; content:""; } #article h2{ font-size: 1.3em; margin-bottom:15px; } #article p{ line-height: 150%; margin-bottom: 15px; } #footer{ border-top: 1px solid #ccc; font-size: .8em; text-align: center; padding: 10px 10px 30px 10px; }

Поскольку боковые панели имеют ширину в 20% каждая, то для главного блока устанавливается ширина в 60% и отступы справа и слева в 20%.

И в конце идет пара довольно важных стилей:

#nav ul, #header h1, .wrapper, #footer p { max-width: 1200px; margin: 0 auto; } .wrapper, #nav, #header, #footer{ min-width: 768px; }

В начале для ряда селекторов определяется максимальная ширина в 1200 пикселей. Это значит, что основные элементы страницы не выйдут за пределы 1200 пикселей. А автоматический внешний отступ слева и справа позволит центрировать содержимое элементов. То есть при ширине браузера в 1400 пикселей эти элементы с шириной в 1200 пикселей будут размещаться как бы по середине, а справа и слева будут отступы шириной в (1400-1200)/2 = 100 пикселей.

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

В предыдущей статье я наглядно показал, как создать макет сайта в программе 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 и добавьте туда строки кода, которые встретите ниже.

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

* { margin: 0px; padding: 0px; }

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

A:link { color: #D72020; } a:hover { text-decoration: none; color: #FF0000; } a:visited { color: #D72020; }

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

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

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

#content { margin: 0 auto; background: #ffffff; width: 786px; text-align: left; }

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

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

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

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

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

#header { background: #ffffff; height: 306px; text-align: left; }

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

Логично было бы прямо сейчас заняться горизонтальным меню. Так мы и поступим, но только прежде, чем вставлять его в 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 { color: #D72020; text-decoration: underline; }

Теперь форматирование меню можно сопоставить с 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 { font-size: 24px; }

Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков 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 { margin: 0; padding: 0; padding-top: 10px; color: #D72020; }

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

Заполним контейнер 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 { padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; border-right: 1px solid #D72020; }

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

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

Информация

Мы предлагаем Вам праздничные скидки. Далее...

Меню

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

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

• Галерея
  • Кухни
  • Кровати
  • Стенки
  • Прихожие
  • Шкафы-купе
  • Компьютерные столы
• Договор
• Прайс
  • Кухни
  • Кровати
  • Стенки
  • Прихожие
  • Шкафы-купе
  • Компьютерные столы
• Образцы
  • Стекло
  • ДСП
  • Фурнитура
  • И т.д.
• Контакты
• Важно

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

Как создать структуру страницы с помощью блоков (блочная вёрстка)

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .

Стандартная веб-страница содержит следующие секции:

Рис. 1. Основные секции страницы

Мы не будем использовать элемент

, так как он поддерживается не всеми браузерами.

Элементы

,

и