Навигация в стиле Windows 7

Многие уже пользуются Windows 7, и многим нравится его стиль. В этом уроке мы научимся создавать простую, но очень красивую навигацию в стиле Windows 7. Перед тем как приступить к изучению этого урока Вам необходимо пройти урок Создания навигации в стиле Windows 7 в Photoshop.

НАЧАЛО РАБОТЫ

Перед тем как начать кодирование навигации в HTML и CSS, мы должны немного поработать в Photoshop.

Начнем с создания фона. Для этого откройте программу Photoshop и создайте новый документ размером 800х600 px. Задайте цвет переднего плана #1592d7 и цвет фона #136da2. Выберите инструмент Градиент с типом Радиальный градиент.

После выбора градиента, заливку начните примерно с середины и перетащите вниз, примерно до половины. Затем создайте новый слой, над фоновым слоем, и выберите инструмент Custom Shape Tool в меню слева.

После выбора инструмента, необходимо выбрать форму. Выберите форму как показана на рисунке ниже.

Если Вы не видите необходимую форму, то вам необходимо ее загрузить. У меня эта форма была сразу после установки программы. После того как Вы выбрали форму, нанесите ее на холст.

Заполните форму белым цветом и используйте фильтр guassian blur со значением 5px. После завершения, установите прозрачность слоя 30%.

Теперь мы должны сделать плавный переход полос. Для этого добавим маску к слою полос и выберем инструмент Градиент с типом Линейный градиент. Перетащите градиент с левого полотна вправо, но перетаскивайте через весь холст. Нам необходимо только, чтобы края плавно переходили в фон. После того, как Вы используете Градиент для всех полос, получится что-то вроде этого:

Сохраните фон как background.png в папке с изображениями сайта.

СОЗДАНИЕ КНОПОК

Откройте PSD файл созданный в уроке Создания кнопок в стиле Windows 7 в Photoshop. Выберите инструмент Увеличение и уменьшите масштаб верхней и нижней линий кнопки:

Выберите инструмент Пипетка и определите цвет белой и черной линий.

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

РАЗРЕЗАНИЕ

Выберите инструмент Прямоугольное выделение и сделайте выделение в один пиксель вокруг навигационного фона. Перед выделением необходимо скрыть фоновый слой и слой белой полосы.

После того как Вы сделали выделение выберите из меню Edit > Copy Merged. Создайте новый документ и вставьте туда выделенное. После того как Вы вставили выделенное в новый документ, удалите фоновый слой и сохраните изображение с именем navigation_background.png в папку с изображениями сайта.

ВЫРЕЗАЕМ КНОПКУ

В этот раз мы будем выделять саму кнопку. Выберите инструмент Прямоугольное выделение и сделайте выделение вокруг кнопки.

После того как вы сделали выделение, скройте фон и фон полос. Выберите инструмент Edit > Copy Merged. Скопируйте и вставьте этот фрагмент в новый документ. Сохраните картинку с именем nav_button.png в папку с изображениями сайта.

СОЗДАНИЕ НАЖАТОЙ КНОПКИ

Чтобы кнопки не повторялись, изменим настройки Gradient Overlay.

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

Повторите все предыдущие шаги, после выделения кнопки, и сохраните изображение с именем nav_hover.png в папку с изображениями.

Теперь мы готовы начать кодирование.

НАСТРОЙКА ФАЙЛОВ

Вы должны уже иметь папку, в которой находятся файлы index.html, style.css и папка с изображениями images.

Открываем наши HTML и CSS файлы. Первое, что нам необходимо сделать, это добавить фоновое изображение.

В CSS файл добавим следующий код:

body {
	background-color: #1570a4;
	background-image: url(/images/background.png);
	background-repeat: no-repeat;
	background-position: center top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 10px;
}

РАЗМЕТКА

Прежде чем мы начнем создавать навигацию, нам необходимо создать контейнер, чтобы наша навигация имела свое место. Создадим контейнер DIV с идентификатором container. Внутри создадим еще один контейнер DIV с идентификатором navigation1.

<div  id="container">
	<div  id="navigation1">
	</div>
</div>

В CSS файл добавим следующий код:

#container  {
	width:  800px;
	margin:  auto;
}
#navigation1  {
	height:  50px;
	float:  left;
	width: 800px;
}

Созданные стили очень просты. Для основного контейнера мы просто установили фиксированную ширину 800 пикселей и автоматический отступ. Автоматические поля отступа будут центровать контейнер в браузере. Для контейнера, в котором будет располагаться навигация, имеет почти те же стили, мы еще добавили фиксированную высоту и задали значение параметра float. Фиксированная высота должна равняться высоте изображения кнопки.

РАЗМЕТКИ НАВИГАЦИИ

Теперь начнем создание самой навигации. Внутри контейнера с идентификатором navigation1 создадим маркированный список UL. Код должен выглядеть примерно так:

<div  id="navigation1">
	<ul  class="nav1">
		<li><a  href="#" title="#">Кнопка1</a></li>
		<li><a  href="#" title="#"> Кнопка2</a></li>
		<li><a  href="#" title="#"> Кнопка3</a></li>
		<li><a  href="#" title="#"> Кнопка4</a></li>
		<li><a  href="#" title="#"> Кнопка5</a></li>
		<li><a  href="#" title="#"> Кнопка6</a></li>
		<li><a  href="#" title="#"> Кнопка7</a></li>
		<li><a  href="#" title="#"> Кнопка8</a></li>
	</ul>
</div>

Нашему списку UL добавили класс nav1.

После того как создали список его необходимо украсить и сделать, как мы планировали. Для этого необходимо в CSS файл вставить следующий код:

.nav1 li {
	display:  block;
	background-image:  url(/images/nav_button.png);
	background-repeat:  no-repeat;
	float:  left;
}
.nav1 li a  {
	display: block;
	float: left;
	height: 50px;
	width: 91px;
	text-align: center;
	text-decoration: none;
	font-size:  12px;
	color:  #FFFFFF;
	line-height: 48px;
}
.nav1 li  a:hover {
	color:  #FFFFFF;
	background-image:  url(/images/nav_button_hover.png);
	background-repeat: no-repeat;
}

Каждый нами созданный элемент списка LI будет отображаться в виде блока. Любой текст в этом списке будет располагаться по центру и имеет размер 12px белого цвета.

В наведенном состоянии, наша кнопка просто будет менять стиль отображения (изображение).

Во и все! На этом создание навигации в стиле Windows 7 завершено.