Продолжаем шагать к своему сайту. Сегодня Третий шаг. Если вы только присоединились к нам, то начало публикации:
- Как сделать свой сайт. 5 шагов к своему сайту. Шаг первый
- Как сделать свой сайт. 5 шагов к своему сайту. Шаг второй
Итогом второго шага стали два файла: непосредственно файл шаблона НТМL и файл таблицы стилей СSS:
НТМL - файл имеет следующее содержание:
Файл CSS такой:
@charset "utf-8"
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
Значение 'inherit' означает, что для данного элемента свойство принимает то же самое вычисленное значение, что и свойство элемента-предка.
Теперь определим важные моменты, которые обычно указывают в техническом задании на верстку.
- Ширина страницы сайта 860 рх
- Ширина правого сайтбара 260 рх
- Высота "шапки" сайта 200 рх
- Высота "подвала" - 60 рх
- "Подвал" сайта прижат к низу экрана (что бы на маленьких страницах "подвал" не висел в воздухе).
Начинаем верстку с "шапки" сайта. Здесь будут находиться горизонтальное верхнее меню, логотип (в нашем случае просто картинка) и название сайта. Цвет фона - фисташковый (удобнее смотреть на примере).
Для себя я всегда делаю картинку, как будут располагаться основные блоки.
В файл НТМL дописываем следующие строки строки и переходим к файлу CSS.
html, body {
width: 100%;
height: 100%;
}/*Задаем ширину и высоту НТМL-страницы в 100% экрана*/* html #wrapper {
height: 100%;
}/*Прописываем высоту страницы для IE*/#wrapper {
position: relative; /*- позиционирование относительное*/
width: 860px; /*- ширина страницы*/
margin: 0 auto; /*- отступ между блоком и верхом экрана*/
min-height: 100%; /*- минимальная высота страницы
color: #000000; /*- цвет шрифта страницы*/
font-family: Verdana, Arial, Helvetica, sans-serif; /*-шрифта страницы*/
background: #000000;
} /*Задаем цвет фона*/
} /*Прописываем данные для основы страницы сайта*/
body {
background: #9efeac;
} /*Задаем цвет фона*/
#header {
background: #14fc35; /*Задаем цвет фона*/
width: 100%;
height: 200px;
color:ffcc33;
font-size: 20px;/*Задаем размер шрифта заголовка*/
}
Вот что у нас получилось >>>>
Верхнее меню делаем в виде обычного маркированного списка. В файл HTML вставляем следующий фрагмент кода:
<div id="top-menu">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="#">Картинка</a></li>
<li><a href="http://badgerblog.ru/">Вернуться на блог Упорного Барсука</a></li>
</ul>
<div>
Теперь в листе стилей опишем стили для нашего меню:
#top-menu {
width: 100%;
height: 20px;
background: #ffcc33;
color: #000000;
font-size: 14px;
font-weight: bold;
text-align: center; /*выравнивание по середине*/
}
#top-menu ul {
list-style-type: none;
} /*эта определение отменяет маркировку списка*/
#top-menu li {
display: inline; /*Задаем отображение "в строку"*/
margin: 2px 8px;/*Задаем отступы*/
}
#top-menu li a {
color: #000000;
}/*Задаем цвет ссылки в спокойном состоянии*/
#top-menu li a:hover {
color: #ffffff;
}/*Задаем цвет ссылки при наведении курсора*/
a {
text-decoration: none;
}/*Определяем, что ссылка в документе не подчеркивается*/
Смотрим, что вышло >>>>
В качестве логотипа я предлагаю использовать вот эту картинку:
Я, конечно, не великий художник. Нарисовал это произведение с помощью Фотошопа. Если вы планируете серьезно заниматься версткой, то Фотошоп будет необходим и уроки фотошопа абсолютно не повредят.
В CSS описываем блок logo:
Обратите внимание, что в этом описании мы используем свойство float. Это свойство принимает значения:
- left - обозначающее, что блок прижимается влево, а другие блоки обходят (обтекают) его справа
- right - обозначающее, что блок прижимается вправо, а другие блоки обходят (обтекают) его слева
#logo {
width: 180px;
height: 180px;
float:left;}
В HTML вставляем код:
<div id="logo"><a href="/"><img src="/images/logo.gif" alt="" /></a></div>
И последнее на сегодня - это блок logo-text. Задаем его параметры
CSS
#logo-text {
width: 680px;
height: 180px;
padding-top:75px;
font-size: 20px;
text-align: center;}
HTML
<div id="logo-text"> Весёлый человечек</div>
Вот итог труда >>>>
