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

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

DreamweaverでCSSを使用してSpryのアコーディオンの追加と編集
Google翻訳で翻訳さ

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スタイルシート上のすべてのクラススタイルのパラメータを追加または変更を継続できます。先に行くと、テキストに色を追加、または自分に合ったスタイルを作成するまでフォントなどを変更してみてください。


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