Adobe Dreamweaver

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

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

Пример Аккордеона

HTML-код для графического элемента «Гармошка» по умолчанию включает внешний тег div, содержащий все панели, тег div для каждой панели, заголовок div и содержимое div внутри тега для каждой панели.
Графический элемент «Гармошка» может содержать любое количество отдельных панелей. HTML-код для графического элемента «Гармошка» также включает теги script в заголовке документа и после HTML- разметки элемента.
Более подробное объяснение работы графического элемента «Гармошка», включая полное описание кода элемента, см. по адресу: www.adobe.com/go/learn_dw_spryaccordion_ru.
Руководство по работе с набором вкладок «Гармошка» см. по адресу: www.adobe.com/go/vid0167_ru.

Вставка и редактирование графического элемента «Гармошка»
Вставка графического элемента «Гармошка»
❖ Выберите меню «Вставка» > «Spry» > «Набор вкладок Spry».

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

Добавление панели в графический элемент «Гармошка»

1 Выберите графический элемент «Гармошка» в окне документа.
2 Нажмите кнопку добавления панелей (+) в инспекторе свойств («Окно» > «Свойства»).

3 Измените название панели, выбрав текст панели в представлении «Дизайн» и изменив текст (необязательно).

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

Открытие панели для редактирования
❖ Выполните одно из следующих действий.
• Чтобы открыть панель в представлении «Дизайн», наведите курсор мыши на вкладку панели и щелкните значок в виде глаза справа от вкладки.
• Выделите в окне документа набора вкладок «Гармошка» и, чтобы изменить имя панели, выберите его в меню «Панели» инспектора свойств («Окно» > «Свойства»).

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

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

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

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

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

Оформление текста графического элемента «Гармошка»
Задать стиль текста графического элемента «Гармошка» можно, установив свойства для всего контейнера элемента или для его отдельных компонентов.
❖ Для изменения стиля текста графического элемента, воспользуйтесь таблицей, чтобы найти соответствующее правило CSS, а затем добавьте собственные свойства и значения стиля текста.

Текст для изменения	Соответствующее правило CSS	Пример добавляемых свойств и значений
Текст во всем компоненте «Гармошка» (включая панель вкладок и содержимого)	.Accordion или .AccordionPanel	font: Arial; font-size:medium;
Текст только во вкладках панели компонента «Гармошка»	.AccordionPanelTab font:	font: Arial; font-size:medium;
Текст только на панелях содержимого компонента «Гармошка»	.AccordionPanelContent	font: Arial; font-size:medium;

Изменение цвета фона для графического элемента «Гармошка»
❖ Для изменения цвета фона различных частей графического элемента «Гармошка», воспользуйтесь таблицей, чтобы найти соответствующее правило CSS, а затем добавьте или измените свойства и значения цвета фона.

Компонент графического элемента для изменения	Соответствующее правило CSS	Пример добавляемого или изменяемого свойства и значения
Цвет фона вкладок панели компонента «Гармошка»	.AccordionPanelTab	background-color: #CCCCCC; (Это значение по умолчанию.)
Цвет фона панелей содержимого	.AccordionPanelContent	background-color: #CCCCCC;
Цвет фона открытой панели	.AccordionPanelOpen .AccordionPanelTab	background-color: #EEEEEE; (Это значение по умолчанию.)
Цвет фона вкладок панели при наведении курсора	.AccordionPanelTabHover	color: #555555; (Это значение по умолчанию.)
Цвет фона открытой вкладки панели при наведении курсора	.AccordionPanelOpen .AccordionPanelTabHover	color: #555555; (Это значение по умолчанию.)

Ограничение ширины компонента «Гармошка»
По умолчанию графический элемент «Гармошка» занимает все доступное пространство. Однако, можно ограничить ширину графического элемента «Гармошка», установив значение ширины для контейнера элемента.
1 Найдите правило CSS Accordion в файле «SpryAccordion.css». В этом правиле определяются свойства основного элемента контейнера графического элемента «Гармошка».
Правило можно также найти на панели «Стили CSS» («Окно» > «Стили CSS»), выделив набор вкладок «Гармошка». Убедитесь, что панель установлена в текущем режиме.
2 Добавьте свойство и значение ширины к правилу, например width: 300px;

Дополнительно:
Использование "Аккордеона" для создания панелей навигации (меню)

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

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