Adobe Dreamweaver

Обзор


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

Содержание

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

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

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

Интерфейс

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

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

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

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

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

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

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

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

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

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

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


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

Шаблоны

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

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


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


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


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

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

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

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

Отчеты в Dreamweaver

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


Панели с вкладками

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

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

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

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

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
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru