今回のねらい

いよいよ登場した、Adobe Creative Suite 3。Dreamweaverのバージョンも、Dreamweaver CS3 となりました。

今回は、Dreamweaver CS3 バージョンアップされた機能を紹介します。

第三回目は、「Spry Widgetの“Spryのメニューバー”」について見てみましょう。

“Spryのメニューバー”の作成方法

Dreamweaver CS3には、新しく「Spry Widget」（スプライ ウィジェット）という機能が追加されました。

今回は、Spry Widgetの“Spryのメニューバー”を紹介します。

■　ここで作成したサンプルページ

1. 新規ページを作成し、ファイル名をつけて保存します。
    
2. [挿入バー]を「Spry」に切り替えます。
   　
   
    
3. メニューバーを挿入するページの場所にカーソルを移動します。
   　
   
    
4. [Spryのメニューバー]をクリックします。
   　
   
    
5. レイアウトの選択を行います。今回は「水平」を選択します。
   　
   
    
6. メニューバーが作成されます。ボタンの名前を直接書き換えます。
   　
   
    
7. メニューバーのタブ名をクリックします。プロパティがメニューバーに切り替わります。
   　
   
    
8. 一番左の枠から、必要のない項目を選択して【-】ボタンで削除します。
   　
   
    
9. 一番左の枠からメニュー名を選択し、２番目の枠で必要のない項目を削除します。
   ※下図の例では、[HOME]ボタンからプルダウンされる項目を2番目の枠で削除しています。
   　
   
    
10. 一番左の枠からメニュー名を選択し、２番目の枠で項目が必要な場合は【＋】ボタンで追加し、
    [テキスト]に表示名を入力します。
    ※下図の例では、[会社案内]ボタンからプルダウンされる項目を2番目の枠で追加しています。
    　
    
     
11. 各項目を選択し、[リンク]にリンク先の指定を行います。
    ※下図の例では、[HOME]ボタンにリンク先として「http://www.webtant.net/」を指定しています。
    （リンク先は相対パス指定でもOKです。）
    　
    
     
12. ページを保存します。「依存ファイルのコピー」画面が表示されるので、「OK」ボタンをクリックします。
    
    
    　
    ※“Spryのメニューバー”（水平レイアウト）では、Javascriptファイル（SpryMenuBar.js）とCSSファイル（SpryMenuBarHorizontal.css）と4つの画像ファイル必要とします。その2つのファイルがこのタイミングでSpryAssetsフォルダに保存されます。
    　　
13. ページをブラウザで確認すると、タブで切り替えることが出来るコンテンツが作成されています。
    　
    

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からのお知らせ

• 次回は、「DreamweaverCS3になってどう変わったか？- 其の4 -」をお届けする予定です。
• 「Webセミナー」受付中です。http://www.webtant.net/seminar/index.html
• Mixiやってます。マイミク募集中です！同じ趣味の方、志しの方、マイミク申請くださいませ。
  http://mixi.jp/show_friend.pl?id=60060