HTML и CSS - революция в мире web-дизайна!

- управление отображением множества документов с помощью каскадных таблиц стилей

- Более точный контроль над внешним видом web-документов

- Различные представления для разных носителей информации

- Сложная и проработанная техника дизайна

Главная / Верстка шаблонов / Сайт визитка - размечаем основные блоки и элементы в хейдере

Сайт визитка - размечаем основные блоки и элементы в хейдере

На итоговый результат можно посмотреть, перейдя по ссылке ниже.

Посмотреть Demo

Как правило, все графические элементы, которые используются для оформления сайта, хранятся в отдельной папке с соответствующим названием. Не будем отступать от этого правила и мы. В папке synchronous/html создадим еще одну директорию и назовем ее images.

Откроем PSD (synchronous/PSD/home.psd). Нам нужно вырезать из макета логотип и сохранить его на прозрачном фоне.

Отключаем слой wraper.

вырезаем логотип из PSD макета

Выделяем логотип (внимательно смотрим, что бы надпись под логотипом не попала в область выделения).

вырезаем логотип из PSD макета

Копируем выделенный объект в буфер обмена. Создаем новый документ. Проверяем, что бы значение параметра Background Contents было Transparent (если требуется, выбираем из выпадающего списка нужное значение) и нажимаем кнопку OK.

вырезаем логотип из PSD макета

Вставляем содержимое буфера обмена в созданный документ - изображение логотипа появится в рабочей области.

вырезаем логотип из PSD макета

Сохраняем изображение в папке images проекта, с именем logo и с расширением png.

вырезаем логотип из PSD макета

С необходимой графикой закончили - займемся html. Открываем index.html в Notepas++ (если он не открыт). Между тэгами <body> </body> напишем следующий код:

<body>
	<div class="wrapper">
		<header class="header_wrap">
		</header>
		<div class="content_wrap">
		</div>
	</div>
	<footer class="footer_wrap">
	</footer>
</body>

Мы разметили три основных части сайта - header, content и footer. Для хедера и подвала сайта были использованы специальные тэги, которые применяются в html 5 (header и footer). Всем блокам заданы классы (например, class="header_wrap").

Сосредоточим свое внимание на блоке header. Его можно было бы разметить и с помощью div - результат был бы таким же, но мы будем придерживаться спецификации html 5. Внутри header разместим логотип и навигацию для сайта. Логотип, как правило, является ссылкой, ведущей на главную страницу. Это необязательное условие, но изобретать велосипед не будем. Внутри <header class="header_wrap"> </header> пишем следующее:

<header class="header_wrap">
	<a class="logo" href="/"><img alt="логотип synchronous" src="/images/logo.png" />официальный сайт компании</a>
</header>

Если сейчас обновить страницу (или открыть в браузере index.html, если он еще не открыт), то мы увидим картинку с названием компании и слоган. Оба элемента являются ссылкой.

выводим логотип

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

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

<ul>
	<li><a href="#"></a>Главная</a></li>
	<li><a href="#"></a>О компании</a></li>
	<li><a href="#"></a>Новости</a></li>
	<li><a href="#"></a>Контакты</a></li>
</ul>

По спецификации html 5 все навигационные ссылки обрамляются парным тегом nav. Так и сделаем, только еще присвоим элементу nav класс top_nav. С учетом вышесказанного, весь код главной страницы сайта будет выглядеть следующим образом:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8" />
		<title>Главная</title>
	</head>
	<body>
		<div class="wrapper">
			<header class="header_wrap">
				<a class="logo" href="/"><img alt="логотип synchronous" src="/images/logo.png" />официальный сайт компании</a>
				<nav class="top_nav">
					<ul>
						<li><a href="#"></a>Главная</a></li>
						<li><a href="#"></a>О компании</a></li>
						<li><a href="#"></a>Новости</a></li>
						<li><a href="#"></a>Контакты</a></li>
					</ul>
				</nav>
			</header>
			<div class="content_wrap">
			</div>
		</div>
		<footer class="footer_wrap">
		</footer>
	</body>
</html>

Посмотрим, что покажет нам браузер:

выводим логотип

Ну, что же, хоть вид и далек от того, что нарисовано в макете, но, скажу по секрету - мы все выполнили правильно. Что бы придать элементам нужное положение и презентабельный внешний вид, им следует назначить стилевые правила. В следующей статье наведем немного "красоты" - натянем фон и разместим элементы хедера там, где они и должны быть.