Верстка

Технологический этап в создании сайта, в процессе которого дизайн-макет сайта переводится на специальный язык гипертекстовой разметки 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.

После верстки макета, начинается заключительный этап в создании сайта, т.е. наполнение сайта информацией Заказчика (тексты и графические изображения)