Создаем шаблоны. пишем HTML код. Часть 1

В данном уроке я последовательно расскажу как сделать HTML макет шаблона. Т.е. по сути у нас получится html страничка которую уже можно будет публиковать к примеру на narod.ru

Итак начнем:

в предыдущем уроке мы создали psd макет шаблона и нарезали необходимые картинки.

Теперь приступим к непосредственному написанию кода.

Создадим папку для будущей странички где душа пожелает)

В папке создадим новый текстовый документ и обзовем его index.html

так же создадим файл стилей и назовем его style.css

Все стандартно.. без всяких выдумок) старайтесь придерживаться стандартов, что бы потом возвращаясь к недоделанной несколько месяцев назад работе мучительно не вспоминать чтож это и зачем. 🙂

И так вот первый кусок кода :

<head>
<title>HTML-DEVUL-TEMPLATE</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<meta name=»description» content=»Описание будущего сайта»>
<meta name=»keywords» content=»Ключевые, слова, через, запятую»>
<meta name=»author» content=»Devul.ru»>
<link rel=»shortcut icon» href=»favicon.gif» type=»image/gif»>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
<meta name=»Content-language» content=»ru»>
</head>

Здесь мы пишем все необходимые служебные данные.

favicon.gif это маленький значок сайта отображаемый в адресной строке браузера и в поиске рядом с названием сайта. Фавикон позволяет визуально выделить сайт в посковой выдаче) так что рисуйте поярче и покрасивее)

А теперь перейдем к следующему этапу.

Сейчас нам необходимо написать сам код шаблона, те его видимую часть. Это делается внутри тега body.

В начале мы создаем html каркас будушего шаблона. У меня он выглядит вот так:

<body>
<div id=»w»>
<div id=»header»>  шапка шапка шапка шапка шапка шапка </div>
<div id=»leftcol»>левая колонка левая колонка левая колонка левая колонка левая колонка  левая колонка левая колонка </div>
<div id=»contentcol»>контент контент  контент контент контент контент контент контент контент

</div>
<div id=»rightcol»>правая колонка правая колонка правая колонка правая колонка правая колонка</div>
<div style=»clear: both;»></div>
<div id=»footer»>подвал подвал подвал подвал подвал</div>
</div>
</body>

Если вы немного разбираетесь в HTML то наверное заметили пустой блок<div style=»clear: both;»></div> . Написан он неспроста)) Этот блок отменяет обтекание элементов и позволяет дальнейшим блокам выстраиваться друг под другом .

Теперь компьютерному мастеру необходимо занести стили дивов в каскадную таблицу стилей (далее css):

* {
margin: 0px;
padding: 0px;

}
body {
background-color:#308EB7;
}

#w {
width: 800px;
height:auto;
margin: 0 auto 0 auto;
background-color:#FFF;
}
#header {
width: 800px;
height:45px;
background-color:#10688C ;
}
#leftcol {
float:left;
width: 210px;
height:100%;
background-color:#023859;
}
#contentcol {
float:left;
min-height: 100%;
width: 400px;
height: 100%
}
#rightcol {
float:left;
width: 190px;
height:100%;
}
#footer {
height:100px;
width: 400px;
}

Немного пояню css код:

* {
margin: 0px;
padding: 0px;
}

Этой записью мы задали всем элементам страницы нулевые отступы. Для тех элементов где отступ будет необходим мы будем указывать отдельно.

Для того чтобы блоки выстроились в 3 колонки мы используем параметр float со значением left. Это заставит указанные блоки «обтекать» со стороны противоположной указанной. Т.е. left означает что элемент будет находится слева а вот все остальное будет «обтекать» его справа. Больше ничего особенного не встречается, просто задается ширина и высота блоков а так же цвет фона.

Вот что должно быть на данном этапе:

lesson2-1

Теперь добавим отступы и напишем общие стили выравнивания и оформления текста.

Вот что я получил на данном этапе:

* {
margin: 0px;
padding: 0px;
}
body {
background-color:#308EB7;
}
#w {
width: 800px;
height:auto;
margin: 30px auto 0 auto;
background-color:#FFF;

}
#header {
width: 800px;
height:45px;
background-color:#10688C ;
margin-bottom: 23px;
}
#leftcol {
float:left;
width: 200px;
height:100%;
background-color:#023859;
padding: 5px;
color:#FFF;
}
#contentcol {
float:left;
min-height: 100%;
width: 390px;
height: 100%;
padding: 5px;

}

#rightcol {
float:left;
width: 180px;
height:100%;
padding: 5px;
color:#256892;

}
#footer {
height:80px;
width: 800px;
vertical-align:middle;
text-align:right;
color:#7A8E9A;
}

Выглядит все это вот так:

lesson2-2

Теперь добавим блок поиска и логотип.

Выглядеть будет вот так:

logo-search

Теперь пришло время для оформления сайдбаров (это левая и правая колонка).

начнем с левой колонки. В ней будет простое меню, в виде списка ссылок.

как и большинство меню выводится будет тегом списка ul

Для удобства присвоим списку Id к примеру «leftmenu»

Заменяем текст в левой колонке на следующий html код:

<ul id=»leftmenu»>
<li><a href=»Пункт 1″>Пункт 1</a></li>
<li><a href=»Ссылка 2″>Ссылка 2</a></li>
<li><a href=»Еще один пункт»>Еще один пункт</a></li>
<li><a href=»Пункт меню 33)»>Пункт меню 33)</a></li>
</ul>

Вставили? посмотрели что получилось? Не очень то красиво правда?

Теперь оформим наше меню с помощью css.

ul#leftmenu {
list-style-type:none;
margin: 20px 0 10px 15px;
}
ul#leftmenu a {
color:#FFF;
text-decoration:none;
font-size:18px;
line-height: 26px;
text-shadow: 2px 2px #000;
}
ul#leftmenu a:hover {
color:#EAF0F3;
border-bottom: 1px dashed #ccc;
}

Сохраним и посмотрим на результат. Уже лучше, не правда?

В следующей части урока  оформим правую колонку. В ней разместим блок с какой нибудь информацией.

На сегодня всё)

Запись опубликована в рубрике Вёрстка, Разговорчики. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *