Кодируем ваш первый psd-файл с помощью Css и Dreamweaver (Часть 1).
Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайта обязательна. Автор hv-designs.co.uk.
Для начала загрузите файл с в Фотошоп. Данный шаблон очень легок для кодировки. Начнем с шапки. Выберим инструмент вырезания (Crop(C)) и вырежим шапку на нашем шалоне. Скопируем ее (Ctrl+C) и поместим (Ctrl+V) в новый документ. Изменим размер документа, для этого идем Image>Image size (Изображение>Размер изображения) и ставим параметры (для ширины, высота может быть у вас любой, но ширина строго такая), как на рисунке внизу.
Сохраните вашу шапку в папке под названием images на Рабочем столе. Для кодировки открываем блокнот (notepad) и затем Dreamweaver. Когда Dreamweaver загрузится выберите "new HTML (новый html-документ)".
Теперь нажмите "code tab" в верхнем правом углу в Dreamweaver. Появится следующий текст
<!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>
</head>
<body>
</body>
</html>
В тэге body пишем,
<div id=”container”>
<div id=”header”></div>
</div>
Теперь идем в блокнот (notepad) и пишем там:
#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> пишем
<link rel=”stylesheet” href=”styles.css” mce_href=”styles.css” type=”text/css” />
Этим шагом мы связываем наш 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, он должен выглядеть так:
