X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Свободный доступ Премиум

Доступ всей нашей библиотеке Премиум Статьи концентратор, файлы проекта и первые 10% от каждого Учебник-Video из Интернет библиотека Учебник .

Создайте свой бесплатный аккаунт!

Добавление и редактирование Spry Аккордеоны с помощью CSS в Dreamweaver
  • Добавление и редактирование Spry Аккордеоны с помощью CSS в Dreamweaver

Перевод Google Translate

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 таблицы стилей, как вы пожелаете, а принципы те же. Идем дальше и попробовать добавить цвет текста, или изменение шрифта и т. д., пока не создадите стиль, который подходит именно Вам.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link