Логотип и другие

В предыдущей статье мы задали фоновое изображение для шапки и подвала сайта и фоновый цвет для <body> и блока «wrapper». Сегодня разместим в шапке логотип, фон для горизонтального меню, заголовок и краткое описание сайта.

С тегом <div></div> мы уже знакомы.

Кроме того, понадобятся знание тегов:

<a href=»/»>текст</a> —  тег ссылки, связывает анкор (текст)  с адресом интернет-ресурса. В нашем случае анкором будет изображение логотипа, а интернет-ресурсом – главная страница сайта.

<img src=»img/logo.gif» alt=»логотип WWF»> — тег вывода изображения, атрибут src  указывает адрес файла, атрибут alt задает альтернативный текст, он обязателен и по стандарту WCAG, не должен быть пустым. Хочу обратить внимание, что шаблонный файл style.css содержит инструкцию img {border: none;}, которая отменяет вывод рамки вокруг изображения (это особенно актуально в случае, когда изображение является ссылкой).

<h1>Текст</h1> — заголовок 1-го уровня

<h3>Текст</h3> — заголовок 3-го уровня

и CSS свойств:

height: 50px; — задает высоту элемента

width: 76px; — задает ширину элемента

float:left; — задает обтекание элемента по левому или правому краю

margin:90px 0 10px 20px; — задает внутренние поля элемента (значения задаются последовательно для верхнего,  правого,  нижнего и левого полей)

margin-right:15px; — частный случай предыдущего свойства, задает значение только правого поля

Теперь приступим.

Блок «header» будет включать в себя еще два блока — «logo», «topNav» (соответственно логотип и горизонтальное меню с заголовком и кратким описанием). Чтобы разместить эти блоки внутри родительского «header» нужным образом (а не один под другим), воспользуемся свойством float. Горизонтальное меню располагается в верхнем левом углу блока «header», поэтому для него это свойство имеет значение left. Логотип находится в правом верхнем углу и, соответственно, для него присваиваем значение right. Внутрь блока «topNav» помещаем блок «desc», который будет содержать заголовок сайта и его краткое описание.

Рассмотрим добавление каждого из блоков:

В файле index.html внутрь блока «header»  вставляем блок «logo» в котором будет выводиться изображение логотипа (являющееся ссылкой на главную страницу сайта).

<div id=»logo»><a href=»/»><img src=»img/logo.gif» alt=»логотип WWF»></a></div>.

Следом вставляем блок «topNav» (включающий в себя блок «desc»)

<div id=»topNav»>

<div id=»desc»>

<h1>Планета животных</h1>

<h3>открой мир вокруг себя<h3>

</div>

</div>

В файле style.css создаем инструкцию с именем # logo, в которой указываем размеры и положение нового блока внутри родительского(#header):

#logo {

height: 50px;

width: 76px;

float:right;

margin-right:15px;

}


В нашем случае блок имеет размеры 50х76 пикселей , выставлен по правой границе блока «header» и отодвинут от его правого края на 15 пикселей .

Создаем аналогично инструкцию с именем # topNav:

#topNav {

height: 100%;

width: 40%;

background-image: url(img/menuBg.gif);

background-repeat: repeat-x;

float: left;

}

Размеры этого блока заданы в процентном отношении высоты и ширины родительского блока, он выставлен точно по левой границе блока «header» и в верхней части имеет фоновое изображение, дублирующееся по горизонтали.

И последняя инструкция #desc задает отступы и цвет для размещаемого внутри блока «topNav» текста заголовка и краткого описания:

#desc{

margin:90px 0 10px 20px;

color:#fff;

}


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

Опубликовал 1st Февраль 2011.
Размещено в Сайт с нуля.
Метки: , , ,

Комментирование закрыто.

Нужна помощь?