今回のねらい いよいよ登場した、Adobe Creative Suite 3。Dreamweaverのバージョンも、Dreamweaver CS3 となりました。
今回は、Dreamweaver CS3 バージョンアップされた機能を紹介します。 第三回目は、「Spry Widgetの“Spryのメニューバー”」について見てみましょう。
“Spryのメニューバー”の作成方法Dreamweaver CS3には、新しく「Spry Widget」(スプライ ウィジェット)という機能が追加されました。 今回は、Spry Widgetの“Spryのメニューバー”を紹介します。 ■ ここで作成したサンプルページ - 新規ページを作成し、ファイル名をつけて保存します。
- [挿入バー]を「Spry」に切り替えます。
 - メニューバーを挿入するページの場所にカーソルを移動します。
 - [Spryのメニューバー]をクリックします。
 - レイアウトの選択を行います。今回は「水平」を選択します。
 - メニューバーが作成されます。ボタンの名前を直接書き換えます。
 - メニューバーのタブ名をクリックします。プロパティがメニューバーに切り替わります。
 - 一番左の枠から、必要のない項目を選択して【-】ボタンで削除します。
 - 一番左の枠からメニュー名を選択し、2番目の枠で必要のない項目を削除します。
※下図の例では、[HOME]ボタンからプルダウンされる項目を2番目の枠で削除しています。  - 一番左の枠からメニュー名を選択し、2番目の枠で項目が必要な場合は【+】ボタンで追加し、
[テキスト]に表示名を入力します。 ※下図の例では、[会社案内]ボタンからプルダウンされる項目を2番目の枠で追加しています。
 - 各項目を選択し、[リンク]にリンク先の指定を行います。
※下図の例では、[HOME]ボタンにリンク先として「http://www.webtant.net/」を指定しています。 (リンク先は相対パス指定でもOKです。)  - ページを保存します。「依存ファイルのコピー」画面が表示されるので、「OK」ボタンをクリックします。
 ※“Spryのメニューバー”(水平レイアウト)では、Javascriptファイル(SpryMenuBar.js)とCSSファイル(SpryMenuBarHorizontal.css)と4つの画像ファイル必要とします。その2つのファイルがこのタイミングでSpryAssetsフォルダに保存されます。 - ページをブラウザで確認すると、タブで切り替えることが出来るコンテンツが作成されています。
 Spry WidgetのスタイルSpry Widgetでは、添付のスタイルシート(SpryMenuBarHorizontal.css)をカスタマイズすることで、デザインの変更ができます。 例えば、ボタンの通常状態の背景色を変更するには、「ul.MenuBarHorizontal a」のbackground-colorを変更すればOKです。
 例えば、ボタンのマウスオーバー状態の背景色を変更するには、「ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus」のbackground-colorを変更すればOKです。
 更に詳しく知りたい場合は、Adobe LiveDocs の「メニューバー Widget のカスタマイズ 」を確認してみましょう。
r360studioからのお知らせ
|