ГЛАВНАЯ ФОРУМ F.A.Q ПРАВИЛА КОНТАКТЫ
Всё для Adobe Photoshop - photoshop-free.ru
Добро пожаловать в мир Adobe Photoshop! На сайте Вы можете найти уроки для фотошопа, файлы для фотошопа,принять участие в конкурсах,скачать Adobe Photoshop[cs2,сs3,cs4]. На форуме Вы можете задать любой вопрос и быстро получить на него ответ, в перерывах между Photoshop'ом - просто пообщаться на любые темы.
Каталог файлов Уроки для фотошопа Фотоальбом
Логин:
Пароль:
Забыл пароль · Регистрация |
RSS Файл-хостинг

Категории каталога

НАВИГАЦИЯ ПО САЙТУ

ОБЛАКО ТЕГОВ

png фоторамка детская psd фотошоп рамочка photo девушка любовь шаблон для фотошопа женский Рамка для фото цветы рамка template Кисти(Brushes) рамка для фотошопа frame рамки лето clipart романтика Клипарт скачать Photoshop шаблон детский фото фотомонтаж кисти для фотошопа


Главная » Каталог статей » Уроки по веб-дизайну:

 


  Навигация для сайта (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 в блокноте и впишите следующую строчку.



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

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

Code
<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 код должен выглядеть так.

Code
<!--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, откройте его в блокноте и напишите следующий текст.

Code
/* 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;  
}

Также убедитесь, что вы правильно указали ссылки на картинки.

Пример мой смотрите здесь

Автор: Здесь
Переводчик: Butters

Добавил: To4kA Изменить репутацию Вручить награду
Название материала : Навигация для сайта (PS+HTML+CSS)
Дата добавления материала: 02.12.2008 , 18:09 , Вторник
Просмотров : 2791
Источник: http://paint.3dn.ru/forum/4-464-1
Категории: Уроки по веб-дизайну:
Рейтинг: 5.0/2
Как добавить сайт в закладки/избранное?
Chrome
Mozilla Firefox
Opera
Еxplorer


Написать администрации сайта

E-mail отправителя *:
Тема письма *:
Ссылка на страницу *:
Комментарии:
Защитный код *:

 
  Всего комментариев: 3
 
14.05.2010
3. lama

+1  

Неплохой урок, и CSS свойства грамотно описаны но в WEB 2.0 фишка использовать JavaScript, советую для этого фреймверк MooTools и плагин написанный под него, этот плагин позволяет организовать постраничную навигацию для сайта, будь то просто html или PHP, все описано и скачать можите - http://cleverscript.ru/index.php/javascript/mootools/15-pagemooslider

  
25.01.2009
2. Настюша (lina_master)

0  

Спасибо cool

  
09.12.2008
1. Макс (mcMaximum)

0  

Спасибо за урок!!! Много нового узнал.

  

Имя*:
Email:


  

=)
Код *:

ПОИСК

НА ПРАВАХ РЕКЛАМЫ

ЧАТ

ДРУЗЬЯ САЙТА






Примеры: google, google.com,photoshop-free.ru

Каталог сайтов
Переход на портал www.ottocom.ru
Раскрутка сайта, Оптимизация сайта, Продвижение сайта, Реклама!

СТАТИСТИКА САЙТА


Где то тут
Онлайн всего: 10
Гостей: 9
Пользователей: 1
callme


Яндекс цитирования
Анализ сайта Каталог-Молдова - Ranker, Statistics

статистика
WOlist.ru - каталог качественных сайтов Рунета

ПОМОЩЬ НОВИЧКУ
 
Rambler's Top100
Вход | Регистрация | Контакты
При использовании любых материалов с сайта ссылка на http://photoshop-free.ru/ обязательна!
Хостинг от uCoz | Все для Adobe Photoshop. Кисти(Brushes) , стили(Styles) , клипарт(Kliparts) , действия(Actions) , фигуры(Shapes), шрифты (Fonts) , текстуры (Textures) , градиенты (Gradients) бесплатно, виньетки, шаблоны для фотомонтажа, иконки , рамки!