Технологический этап в создании сайта, в процессе которого дизайн-макет сайта переводится на специальный язык гипертекстовой разметки HTML – называется версткой.
Конечно можно выделить основные составляющие макета, такие как меню, поле с информацией, колонку новостей и другое и сохранить весь макет. Но в таком случае физический размер файла получится большим, а это не целесообразно, т.к. основное количество пользователей выходит в Интернет через модем.
Нарезка макета осуществляется с помощью Adobe Photoshop. Каждая составляющая дизайна сохраняется для Web в формате *.jpg или *.gif в папку images.
Наряду с этим, в корневой папке создается файл style.css – таблица стилей, название файла может быть и другим но расширение всегда будет одно *.css который прописывается в файле index.html, design.html, следующим образом:
Таблица 2 Ссылка на файлы ссылок
| <link rel="stylesheet" href="/style.css" type="text/css"> <link rel="stylesheet" href="/index.css" type="text/css"> |
Рассмотрим таблицу стилей:
Таблица 3 Таблица стилей
| BODY {margin:0px;padding:0px;background:#FFFFFF;color:#000000} H1 {font-family:Arial;color:#005540;} DIV#dec1 {position:absolute;width:267px;height:39px;background:url('images/bg1.gif');top:0px;left:0px;} DIV#buttons {position:absolute;top:0px;left:110px;margin-top:3px;z-index:2;} DIV#buttons A {margin-right:40px;} DIV#dec2 {position:absolute;width:183px;height:39px;background:url('images/bg2.gif');top:0px;right:0px;} DIV#sitename {position:absolute;top:5px;left:330px;z-index:1} DIV#sitename A {font-size:11px;font-family:Tahoma;color:#5C5C5C;text-decoration:none;} DIV#sitename A:hover {text-decoration:underline;} DIV#logo {position:absolute;top:73px;left:82px;z-index:2} TABLE#menu {position:absolute;top:70px;width:100%;z-index:1} TABLE#menu .line {background:url('images/line1.gif') no-repeat left top;text-align:center;} TABLE#menu DIV.hover {width:121px;height:37px;background:url('images/menu_hover.gif') no-repeat center top;padding-top:11px;text-align:center;width:100%;} TABLE#menu DIV.hover A {font-family:Tahoma;font-size:11px;color:#005540;} TABLE#menu DIV.out {width:121px;height:37px;padding-top:11px;text-align:center;width:100%;} TABLE#menu DIV.out A {font-family:Tahoma;font-size:11px;color:#005540;} |
Таблица 4 Продолжение таблицы 3
| DIV#phone {width:336px;height:78px;background:url('images/bg3.jpg') no-repeat;margin-left:48px;margin-top:22px;} DIV#phone .greenmini {color:#035441;font-family:Tahoma;font-size:11px;padding:0px;margin:0px;} DIV#phone .greenbig {color:#689785;font-family:Arial;font-weight:bold;font-size:25px;padding:0px;margin:0px;} DIV#contacts {width:373px;height:67px;background:url('images/bg4.jpg') no-repeat;margin-left:48px;margin-top:22px;} DIV#contacts DIV {font-size:11px;font-family:Tahoma;color:#5C5C5C;margin-left:128px;padding-top:10px;} TD#copyright {background:url('images/bg5.gif') repeat-x;height:58px} TD#copyright DIV {font-family:Tahoma;font-size:11px;color:#7E7E7E;margin-left:125px;margin-top:20px;} TD#counters {background:url('images/bg6.gif') no-repeat;height:58px} TD#counters DIV {margin-top:20px;} A, A:visited {color:#005540;text-decoration:none} A:hover {text-decoration:underline} .links {font-size:10px;font-family:Tahoma;magin:0;} |
Здесь прописаны основные параметры тегов, которые используются на сайте, а также других стилей, которые задаются произвольно.
В данном случае используются следующие теги и стили:
BODY (тело документа) – имеет следующие параметры: margin:0px;padding:0px;background:#FFFFFF;color:#000000
margin – убирает все отступы
padding – убирает поля
background – цвет фона, в данном случае белый
color – цвет текста, в данном случае черный
H1 (размер заголовков заключается в теги от H1 до H6) – имеет следующие параметры:
font-family:Arial;color:#005540;
font-family – тип шрифта, здесь Arial, но возможен любой другой
color – цвет текста, здесь темно зеленый
DIV – слой. Устанавливает параметры слоя.
TABLE– устанавливает параметры таблицы.
TD – ячейка таблицы.
A, A:visited – задается цвет ссылки и цвет посещенной ссылки.
A:hover – цвет ссылки при наведении.
При использовании нового стиля в таблице стилей, ему дается любое имя (Пример: “.links”). У данного стиля будут свои параметры отличные от остальных, и им можно выделять как текст, так и изображения, но следует учитывать что параметры эти будут разные, т.е. у текста свои, у изображения свои.
Пример:
<div class="links"><a href="/links/">Каталог сайтов</a></div> -в данном случае, класс расположен в отдельном слое и имеет размер шрифта 9.После верстки макета, начинается заключительный этап в создании сайта, т.е. наполнение сайта информацией Заказчика (тексты и графические изображения)