Мы научимся верстать шаблон сайта на основании 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; }

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

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

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

Макеты на основе таблиц

В недалеком прошлом таблицы были самым простым и самым популярным способом создания многоколоночных макетов в HTML. Вся веб-страница помещалась внутри большой таблицы (

). Однако элемент разработан не для создания макетов страниц, его цель — отображение табличных данных.
Следующий макет создается с помощью таблицы, состоящей из 3-х строк и 2 столбцов, где строки содержащие контент заголовка и футера охватывают обе колонки, используя атрибут colspan :

Пример: Макет на основе таблицы

• Попробуй сам »

Макет на основе таблицы

Шапка сайта
Главное меню HTML Элементы HTML Атрибуты HTML Таблицы	Основной контент...
Copyright © 2017 сайт

Макеты на основе DIV-элементов

В течение долгого времени веб-дизайнеры используют элементы