All Articles Dreamweaver
DreamweaverでCSSを使用してSpryのアコーディオンの追加と編集
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を作成する

私は、絶対位置のDivの内部に配置することで、Spryのの位置を制御したい。絶対位置のDivを作成するには、挿入パネルに移動し、 レイアウトを選択します。

AP Div Draw

AP事業部ドロー


ページ上にボックスを描画するカーソルを使用してください。表示される青いボックスは、絶対位置のDivです。


ステップ2 - 位置とサイズのDiv

(ちょうどその書式設定を制御するいくつかのCSSを持っているDIVタグです)絶対位置のDivを移動するには、左上に小さな白いハンドルをつかみ、あなたのページに、その割り込みをドラッグします。

Re-size AP DiV

AP DIVのサイズを変更


絶対位置のDivのサイズを変更するには、その青のアンカーポイントの1つを取得し、希望のサイズにドラッグすること。


ステップ3 - インセットSpryアコーディオン

カーソルの内側をアクティブにする絶対位置のDiv内をクリック、[挿入]パネルからレイアウトを選択する

Spry inserted

Spryは、挿入


Spryアコーディオンは、あなたが描いた絶対位置のDiv内に表示されます。


手順4 - 詳細パネルを追加する

Spryアコーディオンは、ユーザーは、アコーディオンに似た動きでその名を、その内容を明らかにするか隠蔽できるようにパネルを使用しています。私はいくつかの詳細を追加しています。

Spryアコーディオンを選択した状態で(あなたがシアン色のSpryアコーディオンのラベルをクリックして行うことができます)。より多くのラベルを追加するには、[プロパティ]パネルを使用してください。

Labels in properties

プロパティのラベル


使用してください :これを見られるようにさらに2つのパネルを追加するボタン

More labels added to spry

以上のラベルをSpryに追加


ステップ5 - のSpryの内容を編集

あなたがSpryアコーディオンの各ラベル]タブの上にカーソルを置くと、少し目のシンボルが表示されます。このシンボルをクリックすると、それを編集できるように、特定のタブの内容が表示されます。

Eye and contents

目と内容


ラベルのテキストをハイライトすると、ラベルの名前を変更することができます。テキスト"の内容を"強調表示すると、Spryの内部に含まれるテキストを編集することができます。

ヒント:コピーして、ここで大量のテキストを貼り付けます。

Filled Spry

充填スプライ


あなたがコンテンツと、各ラベルの名前があ​​るまでこれを繰り返します。

Spryアコーディオンがどのように動作するか確認するには、ライブビューに切り替え、順番に各パネルのタブをクリックしてください。ニース、右?

Live View Button

ビューボタンを生きる


ここからはライブビューをアクティブにしておくので、あなたが作っている変更を監視することができます。


ステップ6 - パネルのタブのスタイルを編集する

[CSSスタイル]パネルを見て、あなたはSpryAccordion.cssという名前のスタイルシートが表示されます

Spry CSS

SpryのCSS


スタイルシートの内容を明らかにするために矢印をクリックすると、Spryアコーディオンがどのように見えるかの個々の側面を制御するすべてが複合クラスのスタイルのリストを、表示されます。

Panel Tab Style

パネルのタブのスタイル


あなたは、デフォルトの背景色は#CCCCCCであることをCSSのプロパティから表示されます。 #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

完成したスプライ


ただしあなたが原理は同じである限り、任意のと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: