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

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

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

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

 


  Навигация для сайта (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


АНГЛО-РУССКО-НЕМЕЦКИЙ ПЕРЕВОД ОСНОВНЫХ МЕНЮ В ФОТОШОПЕ
Режимы смешивания/Режимы наложения
Фотошоп для начинающих
Рейтинг: 5.0/3



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


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

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

 
  Всего комментариев: 5
 
24.02.2011
5. AlexandeR (Satelles)

0  

) лучще уже JQuery заюзать чем какой-то мотулз)) Штучка мощная особенно в вопросе совместимости в браузерах, ведь в основном джава код пишут для корректной роботы в IE.
P.S. > Честно говоря меня раздражает этот мелкософтский браузер из-за своих мегоособеностей

  
14.10.2010
4. Greg

0  

Отличный урок спасибо автору

  
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:


  

=)
Код *:

саморезы по дереву. apple imac Mc814i716grs.

ПОИСК

Поиск

ПОМОЩЬ НОВИЧКУ

ЧАТ

ДРУЗЬЯ САЙТА

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


Где то тут
Онлайн всего: 5
Гостей: 5
Пользователей: 0



 
Анализ сайта Каталог-Молдова - Ranker, Statistics

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


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