Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

HTML и XHTML, CSS → Блочная верстка. Третий урок

Блочная верстка. Третий урокНе будем останавливаться на достигнутом и продолжим наше познание в блочной верстке. Сегодня создадим сайт виитку в 2е колонки фиксированой ширины. Также поговорим о красивом горизонтальном меню, логотипе, добавить в избранное и о других не мение важных моментах при создании нашей веб визитки.
Ниже вы сможете увидеть пошаговый пример создания сайта div'ами.

"Каркас" сайта

<!-- Объявление типа документа -->
< !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>


Таблица стилей

/*Обнуляем отступы элементов для всех браузеров*/
*{
    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;
}
Опубликовал dimas_ua, 7-07-2010, 22:36 Комментариев: 2
 (голосов: 0)
Пишет Bumix, 4 марта 2011 21:01
  • Сообщений: 0
  • Новостей: 0
А где изображения к шаблону?
Пишет JaserneVampes, 9 июля 2011 21:32
  • Сообщений: 0
  • Новостей: 0
Соберем для Вас по сети интернет базу данных
потенциальных клиентов для Вашего Бизнеса
название, телефон, факс, e-mail,
имена, адреса, товары, услуги итд
Более подробно узнайте по
Телефону: +79133913837
ICQ: 6288862
Skype: s.3837
Email: prodawez@mixmail.com