Навигация для сайта (PS+HTML+CSS)

Среда, 28 Октября 2009 г. 18:50 + в цитатник

Цитата сообщения FlashStudio

Прочитать целиком В свой цитатник или сообщество!

Навигация для сайта (PS+HTML+CSS)

Во-первых, зайдите в фотошоп и создайте новый документ размером 600×200 pixels, с чёрным background-ом.
Создайте прямоугольник, размером 600×40 pixels, используйте Rectangular Marquee Tool (M) . Используя стиль “fixed size” вы можете задать размеры.

Залейте прямоугольник чёрным цветом, назовите слой "naviagtion layer" и примените следующие стили слоя.

У вас должно получиться как-то так.

Выберите снова Rectangular Marquee Tool (M) и сделайте выделение как показано на рисунке.

Залейте выделение белым цветом, далее зажмите CTRL и щёлкните на слой "naviagtion layer" чтобы сделать выделение.

Как только вы сделали выделение перейдите на слой с белым цветом, далее сделайте “select > inverse” и нажмите DELETE. Таким образом, вы уберёте лишнее.

Уменьшите "opacity" приблизительно до 5%, затем добавьте текст навигации.

Теперь выберите Rounded Rectangle Tool (U) и нарисуйте прямоугольники рядом с вашим текстом. Прямоугольники должны быть размером не больше 32×32 pixels. Вы можете сделать их и больше, но для этого вам надо будет настраивать будущий CSS.
Добавьте следующие стили слоя к нашим прямоугольникам.

Ваша навигация должна быть похожа на это.

В круглые прямоугольники мы добавим наши картинки, я буду использовать стандарные произвольные фигуры фотошопа, используя инструмент Custom Shape Tool (U) . Как только вы добавили свои изображения в прямоугольники, добавьте к ним внешнее свечение.

Получили что-то похожее.

Выберите Pencil Tool (B) цвет #008aff, нарисуйте линию под первым пунктом.

Теперь добавьте стиль слой, к своей линии.

Результат должен выглядеть приблизительно так.

Теперь когда мы закончили с графикой, надо нарезать нашу навигацию, для этого на рабочем столе создайте папку, назовите её "navigation", затем в этой папке создайте ещё 2-е и назовите их, “icon_images” и “navigation”. В папку “icon_images” нам надо сохранить иконки, не забудьте сделать так, чтобы они были размером 32х32, с прозрачным фоном (надеюсь у вас получиться) в формате .PNG .

Теперь нам понадобиться 2 куска навигации, один фон, другой при наведении мыши. Вернитесь к нашему файлу Navigation, который должен всё ещё быть в фотошопе. Скройте все слои кроме навигации и наведении мыши.

Создайте два изображения шириной 300px, можете растянуть, чтобы было похоже как на рисунке. Сохраните файлы в папке navigation и назовите их “nav_background” и “nav_hover”.

Затем вы должны создать текстовый файл и назвать его styles.css, в вашей корневой папке Navigation. Далее создайте ещё один текстовый файл и назовите его index.html, сохраните его в корневой папке радом с styles.css
Откройте index.html в блокноте и впишите следующую строчку.

Код (Выделить):

После этого кода, нам надо поместить нашу навигацию, используються стандартные теги, выглядят они так.

Код (Выделить):

<ul class="navigation"> 

<li class="current"><a href="http://www.hv-designs.co.uk"><em class="home"></em><strong>Home</strong></a></li> 

<li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="templates"></em><strong>CSS Templates</strong></a></li> 

<li><a href="http://www.sb-designs.co.uk"><em class="psd"></em><strong>PSD>HTML</strong></a></li> 

<li><a href="http://www.hv-designs.co.uk"><em class="tutorials"></em><strong>Tutorials</strong></a></li> 

<li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="shop"></em><strong>Shop</strong></a></li> 

<li><a href="http://www.hv-designs.co.uk"><em class="contact"></em><strong>Contact Me</strong></a></li> 

</ul>

В итоге ваш HTML код должен выглядеть так.

Код (Выделить):

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt-->          

                  

                   

<ul class="navigation">          

            <li class="current"><a href="http://www.hv-designs.co.uk"><em class="home"></em><strong>Home</strong></a></li>          

            <li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="templates"></em><strong>CSS Templates</strong></a></li>          

            <li><a href="http://www.sb-designs.co.uk"><em class="psd"></em><strong>PSD>HTML</strong></a></li>          

            <li><a href="http://www.hv-designs.co.uk"><em class="tutorials"></em><strong>Tutorials</strong></a></li>          

            <li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="shop"></em><strong>Shop</strong></a></li>          

            <li><a href="http://www.hv-designs.co.uk"><em class="contact"></em><strong>Contact Me</strong></a></li>          

</ul>

Убедитесь что вы вставили свои ссылки и написали свои названия.
На этом этапе можно закрыть index.html. Теперь мы будем править styles.css, откройте его в блокноте и напишите следующий текст.

Код (Выделить):

/* NAVIGATION ELEMENTS */ 



.navigation {          

padding:0 0 0 20px;          

margin:0;          

list-style:none;          

height:40px;          

background:#1841c8 url(navigation/nav_background.gif);          

}          



.navigation li {          

float:left;          

}          

.navigation li a {          

display:block;          

float:left;          

height:40px;          

line-height:40px;          

color:#FFFFFF;          

text-decoration:none;          

font-family:arial, verdana, sans-serif;          

text-align:center;          

padding:0 0 0 10px;          

font-size:11px;          

}          

.navigation li a b {          

            float:left;          

            display:block;          

            padding:0 16px 0 8px;          

}          



.navigation li.current a {          

            color:#FFFFFF;          

            background:url(navigation/nav_hover.gif);          

}          

.navigation li a:hover {          

            color:#00CCFF;          

            background: url(navigation/nav_hover.gif);          

}          

.navigation li a em {          

            display:block;          

            float:left;          

            width:30px;          

            height:40px;          

}         



/* ICON ELEMENTS */          

                  

.navigation li a em.home {          

            background-image: url(nav_icons/home.png);          

            background-repeat: no-repeat;          

            background-position: center center;          

}          

.navigation li a em.templates {          

            background-image: url(nav_icons/templates.png);          

            background-repeat: no-repeat;          

            background-position: center center;          

}          

.navigation li a em.psd {          

            background-image: url(nav_icons/psd.png);          

            background-repeat: no-repeat;          

            background-position: center center;          

}          

.navigation li a em.tutorials {          

            background-image: url(nav_icons/tutorials.png);          

            background-repeat: no-repeat;          

            background-position: center center;          

}          

.navigation li a em.shop {          

            background-image: url(nav_icons/shop.png);          

            background-repeat: no-repeat;          

            background-position: center center;          

}          

.navigation li a em.contact {          

            background-image: url(nav_icons/contact.png);          

            background-repeat: no-repeat;          

            background-position: center center;          

}