Кодируем ваш первый psd-файл с помощью Css и Dreamweaver.

Для начала загрузите файл с шаблоном сайта в Фотошоп. Данный шаблон очень легок для кодировки. Начнем с шапки. Выберим инструмент вырезания (Crop(C)) и вырежим шапку на нашем шалоне. Скопируем ее (Ctrl+C) и поместим (Ctrl+V) в новый документ. Изменим размер документа, для этого идем Image>Image size (Изображение>Размер изображения) и ставим параметры (для ширины, высота может быть у вас любой, но ширина строго такая), как на рисунке внизу.

Сохраните вашу шапку в папке под названием images на Рабочем столе. Для кодировки открываем блокнот (notepad) и затем Dreamweaver. Когда Dreamweaver загрузится выберите "new HTML (новый html-документ)".

Теперь нажмите "code tab" в верхнем правом углу в Dreamweaver. Появится следующий текст

#container {
width: 900px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto; }

Эта кодировка означает, что conteiner (основной блок в нашем файле) будет иметь ширину 900px, без отступов сверху и снизу, а слева и справа отступы будут выставляться автоматически (с выравниванием по центру). Теперь идем в file>save as (файл>сохранить как) и сохраняем файл под названием styles.css (обратите внимание, что расширение обязательно должно быть css) и располагаем его на Рабочем столе вашего компьютера.

Возвращаемся обратно в Dreamweaver и под тэгом <title> пишем

Этим шагом мы связываем наш html-файл с внешним css-файлом. Теперь наш код будет выглядеть так:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<link rel=”stylesheet” href=”test.css” mce_href=”test.css” type=”text/css” />
</head>
<body>
<div id=”container”>
<div id=”header”> </div>
</div>
</body>
</html>

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

#container #header {
background-image: url(images/header.gif);
height: 143px;
width: 900px;
background-repeat: no-repeat;
background-position: center;
}

Это означает, что шапка (header) в контейнере (conteiner) в качестве заднего фона будет иметь картинку расположенную по адресу images/header.gif (помните создавали вначале урока), ширина (width) изображения будет 900px, высота (height) - 143px, картинка не будет повторяющейся (no-repeat) и будет располагаться по центру (center).

Нажимаем Ctrl+S, чтобы сохранить изменения в файле. Кроме этого также сохраняем html-файл, как index.html (на Рабочем столе, как и все предыдущие файлы). Теперь открываем наш файл index.html, он должен выглядеть так:

Возвращаемся в Dreamweaver и под шапкой (header) пишем:

<div id=”nav”>
<ul>
<li><a href=”http://www.yoursite.com/contact.html” mce_href=”http://www.yoursite.com/contact.html”>Contact</a></li>
<li><a href=”http://www.yoursite.com/about.html” mce_href=”http://www.yoursite.com/about.html”>About</a></li>
<li><a href=”http://www.yoursite.com/services.html” mce_href=”http://www.yoursite.com/services.html”>Services</a></li>
<li><a href=”http://www.yoursite.com/news.html” mce_href=”http://www.yoursite.com/news.html”>News</a></li>
<li><a href=”http://www.yoursite.com/home.html” mce_href=”http://www.yoursite.com/home.html”>Home</a></li>
</ul>
</div>

Мы создали блок с навигацией (contact, about, services, news и home). Если открыть документ в браузере, мы увидим следующее:

Обратите внимание, что ссылки имеют классический синенький вид. Исправим это. Для этого идем в наш css-файл и вбиваем там:

задали ширину блока с нашей навигацией

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

#nav li {
float: right;
margin-top: 0;
margin-right: 0.15em;
margin-bottom: 10px;
margin-left: 0.15em;
}

Добрались и до стиля подпунктов списка. Добавляем еще и стиль ссылок в навигации:

#nav li a {
height: 3em;
line-height: 3em;
float: left;
width: 9em;
display: block;
border: 1px solid #000000;
color: #fff;
text-decoration: none;
text-align: center;
background-image: url(images/nav.gif);
background-repeat: repeat-x;
background-position: left center;
background-color: #FFFFFF;
}

Разъясним код наверху:
line height - устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта;
граница (border) - будет иметь толщину 1px и будет непрерывной (solid) черной (#000000) линией;
color (цвет) - означает цвет текста, который будет белым (#fff);
background-image: url(images/nav.gif) - задает, что будет фоном на нашей кнопке;
background-repeat: repeat-x - означает, что фон будет повторяться по Оси X.

Теперь, чтобы сделать фон для кнопки, открываем PSD-файл в фотошопе, изменяем масштаб изображения и делаем выделение наподобии этого:

Копируем и помещаем выделение в новый документ, после этого сохраняем новый документ (file >save for the web) в папке с изображениями. Пересохраняем .css и .html файлы. Теперь при открытии в браузере .html файл должен выглядеть так:

Навигация выглядит так себе, в основном из-за того, что мы пока не задали параметры для текста, исправим это:

Это означает, что наш тект, по-умолчанию, если не будут заданы для него иные правила фоматирования, будет иметь размер 12px, цвет - черный, шрифт - Arial (если он не установлен на компьютере, то Helvetica, если и его нет, то любой шрифт "без засечек (sans-serif)"). А также мы задали, что отступы со всех сторон будут равны 0. Пересохраняем .css файл и, открыв .html файл, видим:

Теперь, когда мы разобрались с шапкой сайта, займемся контентом (основный наполнением) и футером (дном, нижней его частью).
Если посмотрим на наш PSD-файл, мы сможем заметить несколько важных вещей:
1. Пунктирный разделитель.
2. Количество колонок.
3. Положение нашего футера (foooter).
С пунктирной линией мы легко разберемся, интересней сейчас нам заняться 3-мя колонками, для этого в html-файле под навигационными данными забиваем:

<div id=”leftbar”>leftbar</div>
<div id=”content”>content</div>
<div id=”rightbar”>rightbar</div>

Это как раз и есть 3 наши колонки. Далее идем в .css-файл и там пишем:

#content {
float: left;
width: 444px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #000000;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #000000;
margin: 10px;
}

Это означает, что мы сделали блок шириной (width) 444px с 1 пиксельной черной пунктирной границей слева и справа (border-right-width: 1px; border-right-style: dotted; border-right-color: #000000; и аналогично для левой стороны) и отступами (padding) сверху (5px), справа (2px), снизу (1px) и слева (2px). Блок будет прижиматься (float) к левой стороне.
Теперь, напечатаем код для левой колонки:

#leftbar {
float: left;
width: 200px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #000000;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}

Левая колонка будет прижиматься к левому краю, ширина её будет 200 px, а пунктирная черная граница бедет проходить только справа. Отступы такие же, как и у основного блока. Для правой колонки задаем:

#rightbar {
float: right;
width: 200px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #000000;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}

Прижимание у правой колонки будет к правому краю. Ширина и отступы будут такие же, как и в двух других колонках, только пунктирная линия будет проходить слева. У вас должно получиться что-то в этом роде (не забудьте всё предварительно сохранить):

Ну и наконец, займемся подвалом (footer). Вобъем следующий код в .html-файл:

Теперь, идем в .css файл и вбиваем там

#footer {
clear: both;
margin: 0;
padding: 0;
font: normal .95em/1.5em ‘Trebuchet MS’, Tahoma, Arial, sans-serif;
text-align: right;
}
#footer-content {
margin: 0 auto;
padding-left: 15px;
}
#footer-content a {
text-decoration: none;
color: #000000;
}
#footer-content a:hover {
text-decoration: underline;
color: #333;
}

Теперь наш файл выглядит так:

Осталось только вбить контент и наш сайт готов! Вот, как он выглядит у нас.

Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайта обязательна. Автор hv-designs.co.uk. Оригинал статьи на английском

Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Кодируем ваш первый psd-файл с помощью Css и Dreamweaver