Adobe Dreamweaver

Обзор


Содержание сайта
Комбинированные редакторы л. 1
Adobe Dreamweaver Обзор 

Содержание

О Creative Cloud
Новое в последних версиях

Основные шаги

Настройки программы

Интерфейс

Работа с сайтами Dreamweaver

Создание документов (страниц)

Управление файлами и папками

Заметки разработчика

Использование CSS

Макет страниц

Работа с объектами
Список объектов

Фреймы (рамки)
Использование тега DIV
Элементы AP
JavaScript
Цвет
Создание ссылок и навигация

Управление файлами и папками

Совместная работа Dreamweaver с Photoshop, Fireworks, Adobe Flash и др. приложениями

Интеграция с Business Catalyst


Поиск на сайте
Ресурсы и библиотеки
Расширения

Шаблоны

Работа с кодом

Использование сетевых служб
Adobe


Отображение XML-данных с
помощью XSLT


Создание динамических
страниц


Создание форм

Специальные возможности

Сайты для разных экранов и устройств

Предварительный просмотр
Проверка сайта

Отчеты в Dreamweaver

Программа передачи файлов (FTP)


Панель меню (Spry)

В последних версиях Dreamweaver рекомендуется использовать графический элемент «Панель меню Spry» для создания панелей навигации (меню).

Пример создания меню с использованием Spry
Создание меню в более ранних версиях

Работа с графическим элементом «Панель меню»

Графический элемент «Панель меню» (иначе - Панель навигации) — это набор кнопок меню навигации, отображающих подменю, когда посетитель сайта наводит указатель мыши на одну из кнопок. Панели меню позволяют отображать большой объем сведений о навигации на небольшом пространстве, а также дают представление о том, что находится на сайте, без необходимости просмотра содержимого.

Dreamweaver позволяет вставлять два типа графических элементов «Панель меню»: вертикальный и горизонтальный. В следующем примере показан горизонтальный графический элемент «Панель меню» с развернутым третьим пунктом меню.
рис

HTML-код для графического элемента «Панель меню» включает внешний тег ul, состоящий из тега li для каждого из пунктов меню верхнего уровня. Пункты меню верхнего уровня (теги li ) в свою очередь содержат теги ul и li, определяющие подменю для каждого из пунктов, и эти подменю также могут содержать подменю.

Меню верхнего уровня и подменю могут содержать любое число вложенных меню.
Более подробное объяснение работы графического элемента «Панель меню», включая полное описание кода элемента, см. по адресу: www.adobe.com/go/learn_dw_sprymenubar_ru.
Руководство по созданию панели меню Spry см. по адресу: www.adobe.com/go/vid0168_ru.

Вставка графического элемента «Панель меню»


1 Выберите меню «Вставка» > «Spry» > «Панель меню Spry».
2 Выберите «По горизонтали» или «По вертикали» и нажмите кнопку «ОК».

Примечание. Графический элемент «Панель меню» можно также вставить, используя категорию «Spry» на панели «Вставка».

Примечание. В графическом элементе Spry «Панель меню» для отображения разделов HTML поверх остальных разделов используются DHTML-слои. Если на странице имеется содержимое, подготовленное с помощью Adobe Flash, то это может вызвать проблему, поскольку SWF-файлы всегда отображаются поверх всех остальных слоев DHTML, то есть могут перекрыть подменю. Эту проблему можно решить, задав в параметрах SWF-файла wmode="transparent". Это легко сделать, выделив SWF-файл в окне документа и
задав в инспекторе свойств для параметра wmode значение transparent. Дополнительные сведения см. по адресу: www.adobe.com/go/15523_ru.

Добавление или удаление меню и подменю
Используйте инспектор свойств («Окно» > «Свойства») для добавления или удаления пунктов меню в графическом элементе «Панель меню».

Добавление основного пункта меню

1 Выберите графический элемент «Панель меню» в окне документа.
2 Нажмите кнопку со знаком «Плюс» над первым столбцом в инспекторе свойств.
3 Переименуйте новый пункт меню, изменив текст по умолчанию либо в окне документа, либо в текстовом поле инспектора свойств (необязательно).

Добавление пункта подменю

1 Выберите графический элемент «Панель меню» в окне документа.
2 Выберите имя основного пункта меню, к которому необходимо добавить подменю, в инспекторе свойств.
3 Нажмите кнопку со знаком «Плюс» над вторым столбцом.
4 Переименуйте новый пункт подменю, изменив текст по умолчанию либо в окне документа, либо в текстовом поле инспектора свойств (необязательно).
Чтобы добавить подменю в подменю, выберите имя подменю, в которое нужно добавить вложенное меню, и нажмите кнопку со знаком «Плюс» над третьим столбцом в инспекторе свойств.

Примечание. Dreamweaver поддерживает только два уровня вложенных меню в представлении «Дизайн», но в представлении «Код» можно добавить любое число вложенных меню.

Удаление основного меню или подменю

1 Выберите графический элемент «Панель меню» в окне документа.
2 Выберите имя основного пункта меню или подменю, который необходимо удалить, и нажмите кнопку со знаком «Минус» в инспекторе свойств.

Изменение порядка пунктов меню

1 Выберите графический элемент «Панель меню» в окне документа.
2 Выберите имя пункта меню, положение которого нужно изменить, в инспекторе свойств («Окно» > «Свойства»).
3 Нажмите кнопки со стрелками вверх или вниз для перемещения пункта меню вверх или вниз.

Изменение текста пункта меню
1 Выберите графический элемент «Панель меню» в окне документа.
2 Выберите имя пункта меню, текст которого нужно изменить, в инспекторе свойств («Окно» > «Свойства»).
3 Внесите изменения в текстовом поле.

Создание ссылки на пункт меню

1 Выберите графический элемент «Панель меню» в окне документа.
2 Выберите имя пункта меню, для которого нужно создать ссылку, в инспекторе свойств («Окно» > «Свойства»).
3 Введите ссылку в текстовом поле «Ссылка» или щелкните значок папки для выбора файла.

Создание всплывающей подсказки для пункта меню

1 Выберите графический элемент «Панель меню» в окне документа.
2 Выберите имя пункта меню, для которого необходимо создать всплывающую подсказку, в инспекторе свойств («Окно» > «Свойства»).
3 Введите текст подсказки в текстовом поле «Заголовок».

Назначение целевого атрибута для пункта меню
Целевой атрибут определяет, где открывается связанная страница. Например, можно назначить целевой атрибут пункту меню таким образом, что при щелчке ссылки связанная страница будет открываться в новом окне браузера. При использовании набора фреймов также можно указать имя фрейма, где откроется
связанная страница.
1 Выберите графический элемент «Панель меню» в окне документа.
2 Выберите имя пункта меню, которому нужно назначить целевой атрибут, в инспекторе свойств («Окно» > «Свойства»).
3 Введите один из четырех атрибутов в поле «Назначение».
_blank Открывает связанную страницу в новом окне браузера.
_self Загружает связанную страницу в том же окне браузера. Это параметр по умолчанию. Если страница находится во фрейме или наборе фреймов, она загружается внутри этого фрейма.
_parent Загружает связанный документ в непосредственный родительский набор фреймов документа.
_top Загружает связанную страницу в самом верхнем окне набора фреймов.
Выключение стилей
Можно отключить оформление графического элемента «Панель меню», чтобы лучше видеть HTML-структуру элемента в представлении «Дизайн». Например, при отключении стилей, пункты панели меню отображаются в маркированном списке на странице, а не в виде оформленных пунктов панели меню.
1 Выберите графический элемент «Панель меню» в окне документа.
2 Нажмите кнопку «Отключить стили» в инспекторе свойств («Окно» > «Свойства»).

Изменение ориентации графического элемента «Панель меню»
Ориентацию графического элемента «Панель меню» можно изменить с горизонтальной на вертикальную и наоборот. Для этого требуется просто изменить HTML-код панели меню и убедиться в наличии правильного CSS-файла в папке «SpryAssets».
В следующем примере горизонтальный графический элемент «Панель меню» меняется на вертикальный.
1 Откройте в Dreamweaver страницу, содержащую горизонтальный графический элемент «Панель меню».
2 Вставьте вертикальный графический элемент «Строка меню» («Вставка» > «Spry» > «Строка меню Spry») и сохраните страницу. Этот шаг гарантирует, что на сайт будет помещен правильный CSS-файл для вертикальной панели.

Примечание. Если на сайте уже есть вертикальный графический элемент «Панель меню», вставлять новый не нужно. Вместо этого можно просто присоединить к странице файл SpryMenuBarVertical.css, нажав кнопку «Присоединить таблицу стилей» на панели «Стили CSS» («Окно» > «Стили CSS»).

3 Удалите вертикальную панель меню.
4 В представлении «Код» («Просмотр» > «Код») найдите класс MenuBarHorizontal и замените его на MenuBarVertical. Класс «MenuBarHorizontal» определяется в теге контейнера ul для панели меню (<ul id="MenuBar1" class="MenuBarHorizontal">).
5 После изменения кода панели меню найдите конструктор панели меню.
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

6 Удалите параметр предварительной загрузки imgDown (и запятую) из конструктора.
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

Примечание. При преобразовании из вертикальной панели меню в горизонтальную добавьте параметр предварительной загрузки imgDown и запятую.

7 Если страница больше не содержит другие горизонтальные графические элементы «Панель меню», удалите ссылку на прежний файл «MenuBarHorizontal.css» в заголовке документа (необязательно).
8 Сохраните страницу.

Настройка графического элемента «Панель меню»

Хотя инспектор свойств позволяет вносить простые изменения в графический элемент «Панель меню», он не поддерживает специальные задачи по оформлению. Можно изменить правила CSS для графического элемента «Панель меню» и создать панель с нужным оформлением.

Расширенный список задач по оформлению см. по адресу:
www.adobe.com/go/learn_dw_sprymenubar_custom_ru.

Все правила CSS в следующих разделах темах относятся к правилам по умолчанию, расположенным в файле «SpryMenuBarHorizontal.css» или «SpryMenuBarVertical.css» (в зависимости от выбора).
При создании графического элемента Spry «Панель меню» Dreamweaver сохраняет эти CSS-файлы в папке «SpryAssets» на веб-сайте. Эти файлы также содержат полезные комментарии о различных стилях, примененных к графическому элементу.

Хотя правила для графического элемента «Панель меню» можно легко изменить прямо в
соответствующем CSS-файле, для изменения CSS-правил элемента также можно использовать панель «Стили CSS». С помощью панели «Стили CSS» можно легко найти классы CSS, связанные с различными компонентами графического элемента, особенно при использовании текущего режима панели.

Изменение стиля текста пункта меню
CSS-код, присоединенный к тегу <a>, содержит сведения о стиле текста. Также существует несколько применимых значений стиля текста, присоединенных к тегу <a>, относящихся к различным состояниям меню.
❖ Чтобы изменить оформление текста пункта меню, воспользуйтесь следующей таблицей, чтобы найти соответствующее правило CSS, и измените значение по умолчанию:

Стиль для изменения
Правило CSS для вертикальной или горизонтальной панели меню
Применимые свойства и значения по умолчанию:
текст по умолчанию;
ul.MenuBarVertical a, ul.MenuBarHorizontal a
color: #333; text-decoration: не задано;
цвет текста при движении указателя мыши
над ним
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
color: #FFF;
цвет текста в фокусе
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
color: #FFF;
Цвет пункта панели меню при движении
курсора мыши над ним
ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemHover
color: #FFF;
Цвет пункта подменю при движении
курсора мыши над ним
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
color: #FFF;

Изменение цвета фона пункта меню
CSS-код, присоединенный к тегу <a>, содержит сведения о цвете фона пункта меню. Также существует несколько применимых значений цвета фона, присоединенных к тегу <a>, относящихся к различным состояниям меню.
❖ Для изменения цвета фона пункта меню, воспользуйтесь следующей таблицей, чтобы найти соответствующее правило CSS, и измените значение по умолчанию.

Цвет для изменения
Правило CSS для вертикальной или горизонтальной панели меню
Применимые свойства и значения по умолчанию:
Фон по умолчанию
ul.MenuBarVertical a, ul.MenuBarHorizontal a
background-color: #EEE;
Цвет фона при движении курсора мыши
над ним
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
background-color: #33C;
Цвет фона в фокусе
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
background-color: #33C;
Цвет пункта панели меню при движении
курсора мыши над ним
ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemHover
background-color: #33C;
Цвет пункта подменю при движении
курсора мыши над ним
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
background-color: #33C;

Изменение размера пунктов меню
Изменить размер пунктов меню можно путем изменения свойств ширины пункта меню в тегах li и ul.
1 Найдите правило ul.MenuBarVertical li или ul.MenuBarHorizontal li.
2 Измените свойство ширины на нужное значение (или установите свойство на auto, чтобы удалить фиксированную ширину, и добавьте к правилу свойство и значение white-space: nowrap;).
3 Найдите правило ul.MenuBarVertical ul или ul.MenuBarHorizontal ul:
4 Измените свойство ширины на нужное значение (или установите свойство на auto, чтобы удалить фиксированную ширину).
5 Найдите правило ul.MenuBarVertical ul li или ul.MenuBarHorizontal ul li и
6 Добавьте следующие свойства к правилу: float: none; и background-color: transparent;.
7 Удалите свойство и значение width: 8.2em;.

Позиционирование подменю
Положение подменю панели меню Spry определяется свойством margin в тегах подменю ul.
1 Найдите правило ul.MenuBarVertical ul или ul.MenuBarHorizontal ul.
2 Измените значения по умолчанию на нужные: margin -5% 0 0 95%;.



Вернуться к: Страницы Spry
 

О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru