Adobe Dreamweaver

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

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

Пример элемента "Панели с вкладками"

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительно:
«Панель «Стили CSS» в режиме «Текущий»

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

Текст для изменения	Соответствующее правило CSS	Пример добавляемых свойств и значений
Текст во всем графическом элементе	.TabbedPanels	font: Arial; font-size:medium;
Текст только во вкладках панели	.TabbedPanelsTabGroup или .TabbedPanelsTab	font: Arial; font-size:medium;
Текст только на панелях содержимого	.TabbedPanelsContentGroup или .TabbedPanelsContent	font: Arial; font-size:medium;

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

Цвет для изменения	Соответствующее правило CSS	Пример добавляемого или изменяемого свойства и значения
Цвет фона вкладок панели	.TabbedPanelsTabGroup или .TabbedPanelsTab	background-color: #DDD; (Это значение по умолчанию.)
Цвет фона панелей содержимого	.Tabbed PanelsContentGroup или .TabbedPanelsContent	background-color: #EEE; (Это значение по умолчанию.)
Цвет фона выделенной вкладки	.TabbedPanelsTabSelected background-	background-color: #EEE; (Это значение по умолчанию.)
Цвет фона вкладок панели при наведении на них курсора мыши	.TabbedPanelsTabHover	background-color: #CCC; (Это значение по умолчанию.)

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

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

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