HTML - Урок 8: Верстаем шапку и простое меню для нашего HTML шаблона (Часть 1)

HTML - Урок 8: Верстаем шапку и простое меню для нашего HTML шаблона (Часть 1)

В прошлой статье мы сделали каркас нашего HTML шаблона, который готов к его заполнению и оформлению. Сегодня я расскажу как красиво сделать шапку сайта (верхнюю часть) и простенькое меню. Также сегодня внесем немного изменений в стили других блоков.

Итак, что мы имеем на данный момент? Сейчас у нас вот такие стили:

html, body {
  height:100%;
  color: #000; 
  background: #FFFFFF;
  word-wrap: break-word;
  font-size: 12px; 
  font-family: Verdana, Arial, Sans-Serif; 

}
#wrapper {
  height:auto !important;
  height:100%;
  min-height:100%;
}
#header {
  height:100px;
}
#container {
  min-width:800px;
} 
#center {
  margin:0px 200px 0px 200px;
}
#left {
  float:left; 
  width:200px;
}
#right {
  float:right; 
  width:200px;
}
#footer {
  height:100px;
  margin-top:-100px;
} 
.clear {
  clear:both;
}
#space {
  height:100px;
} 


И вот такой код самого шаблона:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="ключевые, слова" />
<meta name="description" content="описание сайта" />
<title>название сайта</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div></div>
<div id="space"></div> 
</div>
</div>
<div id="footer"></div>
</body>
</html>


Первым делом внесем немного изменений в стиль обволакивающего блока wrapper:

#wrapper {
  	height:auto !important;
  	height:100%;
  	min-height:100%;
  	width: 1024px;
  	margin: 0 auto;
  	text-align: left;
}


Я поставил фиксированную ширину - width блока, размером 1024 пикселя, выровнял сам блок по центру, а текст в нем по левому краю с помощью text-align:left. Выровнять блок по центру мы можем с помощью стиля margin, задав величину отступа сверху и снизу 0, а по ширине auto. К сожалению, это не всегда работает в Internet Explorer 6, поэтому в body я прописал text-align: center; и именно поэтому мне пришлось выравнивать текст в обволакивающем блоке и подвале по левому краю. Также в body я указал margin:0, тем самым задав отступы от краев 0 пикселей. В итоге у Body получились вот такие стили:

html, body {
  	height:100%;
  	color: #000; 
  	background: #FFFFFF;
  	word-wrap: break-word;
  	font-size: 12px; 
  	font-family: Verdana, Arial, Sans-Serif; 
  	margin: 0;
  	text-align: center;
}


Также я внес изменения и в подвал:

#footer {
  	width: 1024px;
  	margin: 0 auto;
  	text-align: left;
  	height:100px;
  	margin-top:-100px;
  	background: #4a90d9;
} 


Тут все аналогично блоку wrapper: установил ширину 1024px, выровнял блок по центру, а текст по левому краю. Также добавил в container отступ от шапки margin-top: 20px; и убрал минимальную ширину, так как у нас фиксированная ширина обволакивающего.

Ну что ж, шаблон мы подготовили, пора перейти и к шапке сайта. Стили будут такими:

#header {
  	height:140px;
  	background: #fff;
  	padding-top: 40px;
}


Высота блока 140px, фон белый, а величина отступа от верхнего края 40 пикселей. Вот и все изменения в стилях шапки.
Что? Это всё? И в честь этого названа целая статья?
Конечно, нет. Шапка сайта будет состоять из других элементов: логотипа и меню, которые будут оформлены отдельно.

Пропишем в код HTML шаблона внутри блока header вот такую строчку:
<a class="logo" href="/" title="Логотип сайта"></a>

По сути это ссылка на главную страницу без текста, однако ей присвоен класс class="logo". Теперь нужно его оформить в стилях css.

.logo {
      display:block;
	height: 104px;
	width: 390px;
	background: url("image/logo.png") no-repeat;
}


Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в следующей части урока.

Кстати, если Вас интересуют юбилейные монеты 10 рублей, то посетите сайт 10rublej.ru.
Автор: Zed от 2014-01-05 15:27:03   Просмотров: 3228