навигационное меню (psd), как поставить?

[moote 0]

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

Вопрос: как применить кнопкам эфекты созданные в фотошопе, тоесть что бы кнопки меняли цвет при наведении и тд. Через css? но может есть какой то другой подход всавки psd, просто какой тогда смысл создания эфектов в фотошопе если всё равно всё придётся переделывать через css?

Сам файл psd с шаблоном ещё можно не сохраняя как веб документ вставить через дримвивер но эфекты также не получается сохранить.

Можно ли вообще вставить меню с сохранением эфектов созданных в фотошопе?

[IgorA100 90]

что бы кнопки меняли цвет при наведении

:hover

Через css?

Да, как наиболее оптимальный вариант.

но может есть какой то другой подход

Есть. Использовать JS и его разновидности.

всавки psd

О как загнули... )))))

Можно ли вообще вставить меню с сохранением эфектов созданных в фотошопе?

Тупо скопипастев - конечно НЕТ.

В дополнение к фотошопу учите HTML+CSS+JS

[moote 0]

что бы кнопки меняли цвет при наведении

:hover

Через css?

Да, как наиболее оптимальный вариант.

но может есть какой то другой подход

Есть. Использовать JS и его разновидности.

всавки psd

О как загнули... )))))

Можно ли вообще вставить меню с сохранением эфектов созданных в фотошопе?

Тупо скопипастев - конечно НЕТ.

В дополнение к фотошопу учите HTML+CSS+JS

Учу, ну а то что вставить псд файл прочитал это на сайте адобе там написано что файл псд вставляется через дримвивер (если щас найду это описание покажу, но мне не нужно через него я резал на кнопки и пропмсывал каждой ссылку создаётся таблица с менюшкой и реф ссылками на каждую кнопку то что прописать свойства через css это мы учили) вопрос в принципе возник в том что какой смысл задавать меню эфекты в фотошопе если всё равно они не рабочии и их нужно прописывать через css. С фотошопом не особо знаком вот и спросил может эти эфекты не только для наглядности как должно выглядеть меню.

Вот насчёт интеграции фотошопа с дримвивер

Сведения об интеграции Photoshop

Файлы изображений Photoshop (формат PSD) можно вставить на веб-страницу в Dreamweaver и оптимизировать их для веб (форматы GIF, JPEG или PNG) с помощью Dreamweaver. В результате этого Dreamweaver вставляет изображение как смарт-объект и поддерживает активное соединение с исходным PSD-файлом.

Кроме того, на веб-страницу в Dreamweaver можно добавить многослойные или многофрагментные изображения Photoshop (все или частично). Однако при копировании и вставке из Photoshop активное соединение с исходным файлом не поддерживается. Чтобы обновить изображение, выполните изменения в Photoshop, а затем повторите копирование и вставку.

Примечание.

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

www.adobe.com/go/lrvid4043_dw_ru.Создание смарт-объекта

При вставке в страницу изображения Photoshop (PSD-файла) Dreamweaver создает смарт-объект. Смарт-объект — это готовое для веб-публикации изображение, для которого поддерживается активное соединение с исходным изображением Photoshop. При изменении в Photoshop исходного изображения Dreamweaver дает возможность обновить изображение в Dreamweaver нажатием единственной кнопки.

Укажите файл изображения Photoshop PSD в диалоговом окне «Выбрать исходный файл изображения». Для этого нажмите кнопку «Обзор» и перейдите в нужную папку.В открывшемся диалоговом окне «Оптимизация изображения» задайте параметры оптимизации и нажмите кнопку «ОК». <a name="step_par_text_0">Сохраните подготовленные для веб файлы изображений в корневой папке веб-сайта.

Dreamweaver создает смарт-объект на основе заданных параметров оптимизации и помещает на страницу готовую для веб-публикации версию изображения. Смарт-объект поддерживает активное соединение с исходным изображением и отражает рассинхронизацию этих двух изображений.

Примечание.

Если впоследствии понадобится изменить параметры оптимизации для изображений, размещенных на страницах, выделите изображение, нажмите кнопку «Изменить параметры изображения» в инспекторе свойств и внесите изменения в диалоговом окне «Оптимизация изображения». Изменения, внесенные в диалоговом окне«Оптимизация изображения», применяются недеструктивно. Это означает, что Dreamweaver никогда не изменяет исходный файл Photoshop, всегда пересоздавая веб-изображение на основе исходных данных.

Изменено 12 июня 2013 пользователем moote

[efremovxp 6]

Ну вы и раздули из мухи слона... Не знаешь толком CSS и HTML - тебе нечего делать в вебе.

А чтобы учиться, читайте htmlbook.ru

Рассказываю коротко в первый и последний раз:

HTML:

<ul id="menu">

<li><a href="link">Главная</a></li>

<li><a href="link">О Компании</a></li>

<li><a href="link">Отзывы</a></li>

<li><a href="link">Контакты</a></li>

</ul>

CSS:

#menu li{width:20px;height:20px;background:url("link_image1");}

#menu li:hover{background:url("link_image2");}

#menu a{padding:10px; color:blue;}

#menu a:hover{color:red;}

Таким образом вы можете залить единый фон для всех пунктов меню.

Пример сырой, но для понимания hover вам сойдет.