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;
} 



Первым делом внесем немного изменений в стиль обволакивающего блока 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 вот такую строчку:

 


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

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



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

Дата: 2014-01-05 15:27:03   Просмотров: 14537