Урок блочной верстки 3-й

Sep 04

Продолжаем изучение блочной верстки (div). Рассмотрим пример создания сайта-визитки. На данном этапе вы научитесь создавать 2-х колоночный макет сайта фиксированной ширины. Также в этом уроке рассказывается о том, как создать красивое горизонтальное меню, оптимизировать логотип, добавить сайт в избранное и другие важные моменты, без которых не обойтись при создании веб-сайта.
Ниже представлен пошаговый урок по созданию сайта дивами. Пройдя по ссылке, можно увидеть конечный результат html/css-урока.

Начнем со структуры сайта – HTML-кода:

<!-- Объявление типа документа -->
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Заголовок документа -->
<title>Урок блочной верстки на примере простого шаблона</title>
<!-- Установка связи между HTML документом и CSS файлом -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Скрипт для добаления сайта в избранное -->
<script type="text/javascript">
	function bookmarksite(title, url){
		if (document.all)
		window.external.AddFavorite(url, title);
		else if (window.sidebar)
		window.sidebar.addPanel(title, url, "")
	}
</script>
</head>
<body>
<!-- Начало основного блока(wrapper), позволяет отцентрировать страницу относительно экрана -->
<div id="wrapper">
  <!-- Начало шапки сайта(header), во внешнем файле css добавляем 1-ное пиксельное повторяющееся по горизонтали изображение -->
  <div id="header">
    <!--Оформляем логотип сайта -->
    <div class="logo-img"></div>
    <!-- Название компании и слоган -->
    <h1><a href="#" title="Название компании">Название компании</a></h1>
    <span>слоган компании</span>
    <!-- Вызываем функцию bookmarksite, которая позволяет добавить сайт в избранное -->
    <a href="javascript:bookmarksite('Уроки по созданию web-сайтов', 'http://www.antarik.com/')" title="Добавить сайт в избранное" class="bookmark">Добавить в избранное</a>
    <!-- Навигация - оформляем с помощью ненумерованного списка -->
    <ul id="navigation">
      <li class="first-link"><a href="#" title="">Главная</a></li>
      <li class="active"><a href="#"  title="">О нас</a></li>
      <li><a href="#" title="">Портфолио</a></li>
      <li><a href="#" title="">Контакты</a></li>
      <li><a href="#" title="">Другое</a></li>
    </ul>
    <!-- Конец навигационного меню -->
  </div>
  <!-- Конец шапки сайта(header) -->
  <!-- bg-main - внешний блок для блока content и rightcolumn,во внешнем файле css добавляем 1-ное пиксельное повторяющееся по вертикали изображение(для одинаковой высоты колонок) -->
  <div class="bg-main">
    <!-- Начало контента(content) -->
    <div id="content">
      <!-- Тег IMG предназначен для отображения на веб-странице изображений -->
      <img src="images/img1.jpg" alt=""  />
      <!-- Определяет текстовый параграф -->
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? </p>
      <img src="images/img2.jpg" alt=""  />
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? </p>
    </div>
    <!-- Конец контента(content) -->
    <!-- Начало правой колонки(rightcolumn) -->
    <div id="rightcolumn">
      <!-- Вертикальное меню - оформляем с помощью ненумерованного списка -->
      <ul>
        <li><a href="#" title="">Технологии для бизнеса</a></li>
        <li><a href="#" title="">Партнерские технологии</a></li>
        <li><a href="#" title="">Хобби, увлечения</a></li>
        <li><a href="#" title="">Книги для бизнеса</a></li>
        <li><a href="#" title="">Интернет заработок</a></li>
        <li><a href="#" title="">Реклама на сайте</a></li>
        <li><a href="#" title="">Календарь событий</a></li>
        <li><a href="#" title="">Новости недели</a></li>
        <li><a href="#" title="">Бизнес-планирование</a></li>
        <li><a href="#" title="">Дистанционное обучение</a></li>
        <li><a href="#" title="">Технологии для бизнеса</a></li>
        <li><a href="#" title="">Партнерские технологии</a></li>
        <li><a href="#" title="">Хобби, увлечения</a></li>
        <li><a href="#" title="">Книги для бизнеса</a></li>
        <li><a href="#" title="">Интернет заработок</a></li>
        <li><a href="#" title="">Реклама на сайте</a></li>
        <li><a href="#" title="">Календарь событий</a></li>
        <li><a href="#" title="">Новости недели</a></li>
        <li><a href="#" title="">Бизнес-планирование</a></li>
        <li><a href="#" title="">Дистанционное обучение</a></li>
      </ul>
    </div>
    <!-- Конец правой колонки(rightcolumn) -->
  </div>
  <!-- Конец блока bg-main -->
  <!-- Начало Footer -->
  <div id="footer">
    <ul>
      <li><a href="#" title="Главная">Главная</a></li>
      <li><a href="#" title="О нас">О нас</a></li>
      <li><a href="#" title="Портфолио">Портфолио</a></li>
      <li><a href="#" title="Контакты">Контакты</a></li>
      <li class="last"><a href="#" title="Другое">Другое</a></li>
    </ul>
    <p>Copyright &copy; 2009 Company name</p>
  </div>
  <!-- Конец Footer -->
</div>
<!-- Конец основного блока (wrapper) -->
</body>
</html>

CSS-код:

/*Обнуляем отступы элементов для всех браузеров*/
*{
	padding:0; 
	margin:0; 
}
/*Задаем стилизацию для всей страницы: размер, цвет и
 начертание текста, а также цвет фона страницы*/
body{ 
	font:12px Verdana, Arial, Helvetica, sans-serif;
	color:#eee;
	background:#4d4d4d;
}
/*Свойства для всех ссылок*/
a{
	color:#d4d174;/*цвет ссылок*/
	text-decoration:none;/*отменяем почеркивание ссылок*/
}
/*применяем подчеркивание ссылок при наведении*/
a:hover{
	text-decoration:underline;
}
/*отменяем маркеры для списков*/
ul{
	list-style:none;
}
/*центрируем основной блок относительно ширины экрана*/
#wrapper{ 
	margin:0 auto;
	width:920px;
}
/*шапка сайта*/
#header{
	width:918px;/*задаем ширину блока, учитывая внутренние отступы*/
	padding:10px 0;/*задаем внутренние отступы*/
	height:170px;/*высота блока*/
	margin:0 0 5px 0;/*внешние отступы*/
	background:url(images/bg-header.png) repeat-x;/*у нас есть
 1-но пиксельная картинка, размножаем ее по оси х*/
	border:1px solid #1d1d1d;/*1-но пиксельная граница*/
	position:relative;/*Положение элемента устанавливается
 относительно его исходного места*/
}
/*Абсолютно позиционируем логотип относительно хедера*/
.logo-img{
	background:url(images/logo.png) no-repeat;
	position:absolute;
	top:15px;
	left:10px;
	height:62px;
	width:71px;
}
/*Абсолютно позиционируем название сайта относительно хедера*/
h1 a{
	font-size:18px;
	position:absolute;
	top:40px;
	left:85px;
}
h1 a:hover{
	text-decoration:none;
}
/*Абсолютно позиционируем слоган сайта относительно хедера*/
#header span{
	position:absolute;
	top:60px;
	left:85px;
	font-size:10px;
	color:#c0c2a6;
}
/*Абсолютно позиционируем bookmark относительно хедера*/
.bookmark{
	position:absolute;
	right:10px;
	top:5px;
	font-size:10px;
	color:#c0c2a6;
}
/*Оформляем главное меню сайта*/
#navigation{
	float:left;
	display:inline;
	margin:87px 0 0 80px;
}
#navigation li{
	display:inline;
	float:left;
	border-right:1px solid #9a9753;/*граница между кнопками*/
}
#navigation li a{
	font:18px Helvetica,"microsoft sans serif",arial,sans-serif;
	color:#fbfddb;
	text-decoration:none;
	text-align:center;
	display:block;
	line-height:93px;
	height:93px;
	width:150px;
}
#navigation li a:hover,
#navigation li.active a{
	background:url(images/bg-menu-hover.jpg) repeat-x; /*при наведении 
и в состоянии актив кнопка меняет цвет*/
	color:#fff;
}
/*убираем границу у первой кнопки для улучшения визуального восприятия*/
#navigation .first-link{
	border-left:1px solid #979766;
}
/*конец главного меню сайта*/
/*создаем блок, который содержит в себе две колонки*/
.bg-main{
	float:left;
	width:920px;
	background:url(images/bg-main.jpg) repeat-y;/*вешаем 1-но пиксельную
 картинку и размножаем по оси у (таким образом колонки будут всегда одинаковой высоты*/
}
/*контентная часть*/
#content { 	
	padding:10px;
	width:678px;
	float:left;
	border-top:1px solid #1d1d1d;
}
#content p{
	margin:0 0 10px 0;
	text-align:justify;/*одновременное выравнивание текста по левому и правому краю*/
	line-height:18px;
}
#content img{
	float:left;
	margin:0 10px 0 0;
	border:2px solid #ccc;
}
/*правая колонка*/
#rightcolumn { 
	float:right;
 	padding:10px 20px 10px 10px;
	width:187px;
	display:inline;
	border-top:1px solid #1d1d1d;
}
#rightcolumn li{
	line-height:20px;
	background:url(images/ico.gif) no-repeat 0 5px;
	padding:0 0 0 20px;
}
/*подвал сайта, в котором дублируется главное меню*/
#footer { 
	width:920px;
	clear:both;
	background:#1e1e1e;
 	padding:25px 0;
	height:40px;
	border-top:2px solid #fff;
	text-align:center;
}
#footer ul{
	display:inline;
	height:20px;
}
#footer ul li{
	display:inline;
	background:url(images/devider.gif) no-repeat right 50%;
	margin:0 0 0 10px;
	padding:0 10px 0 0;
}
#footer ul li.last{
	background:none;
}
#footer p{
	padding:10px 0 0;
	font-size:11px;
}

Также вы можете скачать шаблон сайта со всем вышеизложенными пояснениями

Ответов: 3 на “ Урок блочной верстки 3-й ”

sМen сказал:
September 11th, 2009 в 12:13 am
Спасибо за урок! нашел то, что искал
Виталик сказал:
November 6th, 2010 в 1:24 pm
Отличный урок!
макс сказал:
February 15th, 2011 в 12:17 am
хороший урок, в очень доступной форме, 3-й день самостоятельно изучаю html/css, есть хорошие результаты, ваш сайт тоже очень пригодился!

Antarik.com