IT Sea logo
  • Новости
    • Архив
  • Статьи
    • Веб-дизайн
    • Веб-программирование
    • Общество и Сеть
  • Обзоры
    • Hardware
Статьи→Веб-дизайн→Блочная верстка. Урок 6. Размещение контента.

Блочная верстка. Урок 6. Размещение контента.

Теперь нужно разместить логотип нашего сайта. Это можно сделать двумя способами: поместив изображения логотипа в фон блочного элемента, либо разместив его в специально предназначенном для этого элементе, который описывается тегом img. Кроме того, как правило, логотипы делают кликабельными с ссылкой на главную страницу сайта.

Делается кликабельный логотип очень просто. Для этого теги элемента, содержащаго изображение логотипа заописываются внутри тега a. В данном случае, следуя основам семантической вестки, мы разместим изображение логотипа в специально предназначенном для этого элементе с тегом img.

Внутри заголовочного блока запишем следующие строки:

<a href="/">
  <img id="logo" src="zub.jpg" alt="Логотип сайта" />
</a>

Теперь займемся созданием подвала нашего сайта. Прежде всего давайте сделаем визуальное отделение подвала от контента страницы. Воспользуемся самым простым решением и отделим нижнюю часть страницы простой горизонтальной линией. Для этого воспользуемся тегом hr, придав ему стиль трехмерной линии.

<hr class="delimetr" />

Соответсвенно запишем стиль, придающий линии выпуклый вид.

.delimetr {
  padding-bottom: 1px;
  background-color: #9b9b9b;
  border-bottom:1px solid #F4F4F4;
}

Ссылки в подвале нашей страницы запишем в виде списка. Опять же, если вам интересует кроссбраузерность, нужно будет обратить внимание на некоторые нюансы.

#footer ul { margin:1em; float:left; } #footer ul li { padding:5px; display:inline; } #footer ul li a { color:green; text-decoration:none; <ul>
<li><a href="">Главная сайта</a></li>
<li>|</li>
<li><a href="">Карта сайта</a></li>
<li>|</li>
<li><a href="">Гарантии</a></li>
</ul>

Запишем правила CSS, определяющие стиль:

#footer ul {
  margin:1em;
  float:left;
}

#footer ul li {
  padding:5px;
  display:inline;
}

#footer ul li a {
  color:green;
  text-decoration:none;
}

Уведомление об авторских правах, согласно макету, у нас должно быть расположено с правой стороны. Самый простой способ сделать это – вынести его в отдельный элемент, и прижать этот к правой стороне.

<span id="copyright">(С) Вася Пупкин</span>

В таблицу стилей внесем следующее правило:

#copyright {
  margin: 1em;
  float: right;
}

Из-за того, что мы использовали плавающий элемент, могут возникнуть небольшие проблемы с позиционированием. Поэтому после блока определяющего подвал страницы нужно запретить обтекание.

<div class="lastik"></div>

Наша страница практически готова, осталось разместить лишь контент.

<img class="pics" src="stomatolog.jpg" alt="" />
<p>Далеко-далеко в одном сказочном городе живут <span class="delete">3,2... ой,</span> 32 маленьких веселых зубика. Веселые они потому, что никогда не болеют. Зубики очень любят принимать ванны и чиститься щеточкой, поэтому эмаль у них всегда здоровая и блестящая.</p>
<p>Иногда к ним из космоса прилетают нехорошие дяденьки: кариес и зубной камень. Тогда зубики быстренько бегут к доброй тетеньке стоматологу из стоматологической клиники «Веселый зубик», и она оказывает им высококвалифицированную помощь в борьбе со злобными врагами.</p>
<p>Тетенька стоматолог уже очень долгое время помогает зубикам, она постоянно совершенствует свое мастерство в борьбе против злостных врагов маленьких зубиков. Также тетенька стоматолог делает зубиков красивыми и помогает им быть здоровыми.</p>
<p>В этой клинике работают и другие дяденьки и тетеньки стоматологи. Они тоже очень часто помогают зубикам. Все они очень любят зубиков и обращаются с ними очень вежливо и заботливо.</p>

Здесь вначале располагается растянутое по ширине изображение (для класса "pics" задано правило width: 100%), а весь текст разбит на абзацы. Учитывая то, что нам был нужен зачеркнутый участок текста, а тег del в используемом нами типе документа не существует, мы выделили этот текст тегами span и задали для него правило:

.delete { text-decoration:line-through }

Теперь наша страница полностью готова для просмотра на экране монитора.


<<< Предыдущий урок

Обсуждение статьи
  • GeForce
  • Intel
  • кроссбраузерность
  • web
  • верстка
  • AMD
  • CSS
  • Radeon
  • NVIDIA
  • дизайн
  • php
 
Rambler's Top100
  • Карта сайта
  • |
  • Контакты
  • |
  • Условия использования
Copyright © 2010 IT-Sea.