Adobe Dreamweaver

Работа в окне документа
Элементы интерфейса
Настройка интерфейса
Сочетания клавиш

Макет страниц с использованием CSS
Разметка страниц с помощью HTML

Текст
Изображения
Карта ссылок
Панели навигации (меню)
Таблицы
Объекты мультимедиа
Java-апплеты
Элементы Spry

Смарт-объекты

Меню переходов

Работа с графическим элементом «Сворачиваемая панель»

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

Пример сворачиваемой панели

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

Более подробное объяснение работы графического элемента «Сворачиваемая панель», включая полное описание кода элемента, см. по адресу: www.adobe.com/go/learn_dw_sprycollapsiblepanel_ru.


Вставка и редактирование графического элемента «Сворачиваемая
панель»

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

Открытие и закрытие сворачиваемой панели в представлении «Дизайн»
❖ Выполните одно из следующих действий.

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

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

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

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

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


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

Стиль для изменения	Соответствующее правило CSS	Пример добавляемых или изменяемых свойств и значений
Текст во всей сворачиваемой панели	.CollapsiblePanel	font: Arial; font-size:medium;
Текст только во вкладке панели	.CollapsiblePanelTab font:	font: bold 0.7em sans-serif; (Это значение по умолчанию.)
Текст только на панели содержимого	.CollapsiblePanelContent	font: Arial; font-size:medium;

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

Цвет для изменения	Соответствующее правило CSS	Пример добавляемого или изменяемого свойства и значения
Цвет фона вкладки панели	.CollapsiblePanelTab	background-color: #DDD; (Это значение по умолчанию.)
Цвет фона панели содержимого	.CollapsiblePanelContent	background-color: #DDD;
Цвет фона вкладки при открытой панели	.CollapsiblePanelOpen .CollapsiblePanelTab	background-color: #EEE; (Это значение по умолчанию.)
Цвет фона открытой вкладки панели при наведении на нее указателя мыши	.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover	background-color: #CCC; (Это значение по умолчанию.)

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

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



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