X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
在Dreamweaver中使用CSS添加和编辑的Spry手风琴
翻译谷歌翻译

Spry的手风琴是一个令人愉快的的方式,在密闭空间内提供大量的信息。它们也是


步骤1 - 创建一个AP DIV

我喜欢控制一个Spry的位置放置一个AP DIV。要创建一个AP Div的“插入”面板,选择布局

AP Div Draw

AP Div的抽奖


用光标在页面上绘制一个框。出现的蓝色方块是您的AP Div的。


第2步 - 位置和大小的AP Div

移动的AP Div(这仅仅是一个DIV标记,一些CSS控制其格式)抢在其左上方白色的小处理,并拖动它的干预到您的网页。

Re-size AP DiV

调整的AP Div


要调整AP Div的,你可以抓住蓝色锚点并拖动到所需的大小。


第3步 - 插入一个Spry手风琴

AP Div的内部激活光标里面,然后从“插入”面板,选择“ 布局

Spry inserted

Spry的插入


你画的AP Div的内部出现一个S​​pry手风琴。


步骤4 - 新增更多面板

在Spry手风琴使用面板,允许用户以显示或隐藏在一个类似手风琴的运动内容,故名。我加入更多一些。

随着Spry的手风琴选择(你可以通过点击青色的Spry手风琴标签上)。使用属性面板中添加更多的标签。

Labels in properties

在属性标签


使用 按钮添加更多面板,让你看到:

More labels added to spry

添加更多的标签,以轻捷


第5步 - 编辑的Spry内容

当你光标悬停在每个标签上的Spry手风琴标签,会出现一个小眼睛符号。点击这个符号将打开特定标签使您能够编辑它的内容。

Eye and contents

眼和内容


突出的标签文本允许你改变标签的名称。突出显示文本“内容”,可让您编辑的Spry内包含的文本。

提示:在这里复制和粘贴文本大金额。

Filled Spry

填充的Spry


重复,直到你有内容,并为每个标签的名称。

要看到Spry的手风琴是如何运作的,现场查看和切换,依次点击每个小组的标签上。尼斯,对不对?

Live View Button

现场查看“按钮


请从这里开始活跃的实时显示,这样就可以监视你的变化。


第6步 - 编辑小组标签的样式

有一个在CSS样式面板的外观,你会看到一个样式表名为SpryAccordion.css

Spry CSS

Spry的CSS


点击箭头以显示样式表的内容,你会看到一个复合类样式的列表,所有这一切的Spry手风琴看起来如何控制个​​人方面。

Panel Tab Style

面板标签样式


从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