All Articles Dreamweaver
Добавление и редактирование Spry Аккордеоны с помощью CSS в Dreamweaver
David Smith on Sun, November 13th | 0 comments
Spry Accordions are a delightful way in which to deliver large amounts of information in a confined space. They are also a lot of fun for users if you use them in a clever way. David Smith shows how.

Spry Аккордеоны являются восхитительный способ, в котором для доставки больших объемов информации в ограниченном пространстве. Они также


Шаг 1 - Создание DIV AP

Мне нравится управлять положением Spry, поместив его внутри DIV AP. Чтобы создать Div AP пойти Вставить Панели и выберите Макет

AP Div Draw

А. П. Рисовать слой


Используйте курсор, чтобы нарисовать поле на странице. Синий ящик, который появляется ваша AP Div.


Шаг 2 - Положение и размер Div AP

To Move AP Div (который является только DIV тегов, который имеет некоторые CSS контролю за его форматирования) захватить маленькую белую ручку на своем левом верхнем углу и перетащите его вмешательство на свою страницу.

Re-size AP DiV

Изменение размера AP Div


Чтобы изменить размер Div AP вы могли бы захватить один из его синих узловых точек и перетащить нужный размер.


Шаг 3 - Врезка Аккордеон Spry

Щелкните внутри Div AP, чтобы активировать курсор, то из группы Вставить выбрать Макет

Spry inserted

Spry вставлен


Аккордеон Spry появляется внутри Div AP, что вы нарисовали.


Шаг 4 - Добавление более панелями

Аккордеон Spry использует панели, чтобы позволить пользователям показывать или скрывать его содержание в движение похоже на аккордеоне, отсюда и название. Я добавляю еще немного.

С Аккордеон Spry выбран (что можно сделать, нажав на голубой цвета этикетки Аккордеон Spry). Используйте панель Properties, чтобы добавить больше этикеток.

Labels in properties

Этикетки в свойствах


Используйте кнопку, чтобы добавить еще 2 панели так что вы увидите это:

More labels added to spry

Более этикетки добавлена ​​в живой


Шаг 5 - Редактирование Содержание Spry

При наведении курсора на каждой этикетке Tab на Аккордеон Spry, маленький символ глаз появится. При нажатии на этот значок, откроется содержимое этого конкретного Tab позволяющий редактировать его.

Eye and contents

Глаз и содержание


Выделение текста этикетки позволяет изменить название лейбла. Выделение текста "Содержание" позволяет редактировать текст, содержащийся внутри Spry.

Совет: копировать и вставлять большое количество текста в здесь.

Filled Spry

Заполненные Spry


Повторите это, пока у вас есть контент и названий для каждой метки.

Чтобы увидеть, как аккордеон Spry работает, включить режим Live View и щелкните на каждой вкладке панели, в свою очередь. Ницца, не так ли?

Live View Button

Режим Live View Кнопка


Имейте в режиме Live View активных отсюда на так что вы можете отслеживать изменения, которые вы делаете.


Шаг 6 - Изменение стиля Группы Вкладки

Посмотрите на панель стилей CSS, вы увидите таблицу стилей имени SpryAccordion.css:

Spry CSS

Spry CSS


Нажмите на стрелку, чтобы раскрыть содержание таблицы стилей, и вы увидите список стилей соединения класса, каждый из которых контролировать отдельные аспекты того, как аккордеон Spry выглядит.

Panel Tab Style

Стиль группы Tab


Вы увидите из свойств CSS, что цвет фона по умолчанию является # CCCCCC. Измените этот текст читать # 00CC66 (Подсказка: это может быть сокращен до 0C6 #)

Green tabs

Зеленый вкладок


Панели изменится на зеленый.

. AccordionPanelOpen и. AccordionPanelTab и установить цвет фона # 0F9.


Шаг 7 - Изменить стиль ориентированные Вкладки

Попробуйте нажать на панели вкладки и вы увидите, что они синеет. Это происходит потому, CSS контроля ориентированные свойства устанавливаются на синий:

Blue Spry

Синий Spry


Чтобы изменить их, выполните следующие действия в CSS:

Чтобы создать событием для вкладки, открытые:

  • Select .AccordionFocused, .AccordionPanelOpen and .AccordionPanelTab and set their background color to #9FC


Чтобы убедиться в том, что любая замкнутая панелей в то время как аккордеон Spry активен такие же зеленые, как закрыты панелями, когда аккордеон Spry не активен:

  • Select .AccordionFocused and .AccordionPanelTab and set their background color to #0C6

Finished Spry

Готовые Spry


Вы можете продолжать добавлять или изменять параметры на любые стили класса на SpryAccordion.css таблицы стилей, как вы пожелаете, а принципы те же. Идем дальше и попробовать добавить цвет текста, или изменение шрифта и т. д., пока не создадите стиль, который подходит именно Вам.


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: