メニューバー Widget の挿入と編集



    メニューバー Widget の挿入

    1. [挿入]-[Spry]-[Spry メニューバー] を選択します。
    2. [水平方向] または [垂直方向] を選択し、[OK] をクリックします。
    注意： [挿入] パネルの [Spry] カテゴリを使用してメニューバー Widget を挿入することもできます。
    注意： Spry メニューバー Widgetでは、他のセクションの上に HTML のセクションを表示するため、DHTML レイヤーが使用されます。 Adobe Flash で作成したコンテンツがページに含まれていると、問題が生じることがあります。これは、SWF ファイルは他のすべての DHTML レイヤーよりも常に前面に表示されるため、SWF ファイルがサブメニューの上に表示される可能性があるためです。この問題を解決するには、wmode="transparent" を使用するように SWF ファイルのパラメータを変更します。この変更は簡単に行うことができます。目的の SWF ファイルをドキュメントウィンドウで選択し、プロパティインスペクタで [Wmode] オプションを [透明] に設定します。詳細については、www.adobe.com/go/15523_jp を参照してください。

    メニューおよびサブメニューの追加または削除

    メニューバー Widget のメニュー項目を追加または削除するには、プロパティインスペクタ ([ウィンドウ]-[プロパティ]) を使用します。

    メインメニュー項目の追加

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタで、1 列目の上にある [+] ボタンをクリックします。
    3. (オプション) 新しいメニュー項目の名前を変更する場合は、ドキュメントウィンドウまたはプロパティインスペクタのテキストボックスで初期設定テキストを変更します。

    サブメニュー項目の追加

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタで、サブメニューを追加するメインメニュー項目の名前を選択します。
    3. 2 列目の上にある [+] ボタンをクリックします。
    4. (オプション) 新しいサブメニュー項目の名前を変更する場合は、ドキュメントウィンドウまたはプロパティインスペクタのテキストボックスで初期設定テキストを変更します。

    サブメニューにサブメニューを追加するには、プロパティインスペクタでサブメニュー項目を追加するサブメニュー項目の名前を選択し、3 列目の上にある [+] ボタンをクリックします。

    注意： Dreamweaver のデザインビューでサポートされるサブメニューの深さは 2 レベルまでですが、コードビューでは任意の深さのサブメニューを追加できます。

    メインメニュー項目またはサブメニュー項目の削除

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタで、削除するメインメニュー項目またはサブメニュー項目の名前を選択し、[-] ボタンをクリックします。

    メニュー項目の順序の変更

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、順序を変更するメニュー項目の名前を選択します。
    3. 上向き矢印または下向き矢印をクリックしてメニュー項目を上または下に移動します。

    メニュー項目のテキストの変更

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、テキストを変更するメニュー項目の名前を選択します。
    3. テキストボックスで必要な変更を加えます。

    メニュー項目のリンク

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、リンクを適用するメニュー項目の名前を選択します。
    3. [リンク] テキストボックスにリンクを入力するか、フォルダアイコンをクリックしてファイルを参照します。

    メニュー項目のツールヒントの作成

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、ツールヒントを作成するメニュー項目の名前を選択します。
    3. [タイトル] テキストボックスにツールヒントのテキストを入力します。

    メニュー項目のターゲット属性の割り当て

    ターゲット属性では、リンクされたページをどこで開くかを指定します。 たとえば、ユーザーがリンクをクリックするとリンクされたページが新しいブラウザウィンドウで開くように、メニュー項目にターゲット属性を割り当てることができます。 フレームセットを使用している場合は、リンクされたページが開くフレームの名前も指定できます。

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) で、ターゲット属性を適用するメニュー項目の名前を選択します。
    3. ターゲットボックスで次のいずれかの属性を入力します。
      _blank
      リンクされたページを新しいブラウザウィンドウで開きます。

      _self
      リンクされたページを同じブラウザウィンドウで読み込みます。 初期設定ではこれが選択されます。 フレームまたはフレームセット内のページの場合は、そのフレーム内にページが読み込まれます。

      _parent
      リンクされたドキュメントを、そのドキュメントの直接の親フレームセットに読み込みます。

      _top
      リンクされたページをフレームセットの一番上のウィンドウに読み込みます。

    スタイルのオフ

    Widget の HTML 構造がデザインビューで見やすいように、メニューバー Widget のスタイル設定を無効にできます。 スタイルを無効にすると、たとえばメニューバー項目が、メニューバーのスタイル設定された項目としてではなく、ブレットリストとしてページに表示されます。

    1. ドキュメントウィンドウで、メニューバー Widget を選択します。
    2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]) の [スタイルをオフに] ボタンをクリックします。

    メニューバー Widget の方向の変更

    メニューバー Widget の方向を水平方向から垂直方向に、またはその逆に変更できます。 手順は、メニューバーの HTML コードを変更し、SpryAssets フォルダに適切な CSS ファイルがあることを確認するのみです。

    次の例では、水平メニューバー Widget を垂直メニューバー Widget に変更しています。

    1. Dreamweaver で、水平メニューバー Widget を含むページを開きます。
    2. 垂直メニューバー Widget を挿入し ([挿入]-[Spry]-[Spry メニューバー])、ページを保存します。この手順で、垂直メニューバーの適切な CSS ファイルがサイトに含まれることを確認します。
      注意： サイトの別の場所に既に垂直メニューバー Widget が含まれる場合は、新たに挿入する必要はありません。 [CSS スタイル] パネル ([ウィンドウ]-[CSS スタイル]) で [スタイルシートを添付] ボタンをクリックし、ページに SpryMenuBarVertical.css ファイルを添付するだけで済みます。
    3. 垂直メニューバーを削除します。
    4. コードビュー ([表示]-[コード]) で MenuBarHorizontal クラスを見つけ、MenuBarVertical に変更します。MenuBarHorizontal クラスは、メニューバーのコンテナ ul タグで定義されます (<ul id="MenuBar1" class="MenuBarHorizontal">)。
    5. メニューバーのコードの後に、メニューバーコンストラクタを見つけます。 
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    6. コンストラクタから imgDown プリロードオプション (およびカンマ) を削除します。 
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      注意： 垂直メニューバーから水平メニューバーに変更する場合は、代わりに imgDown プリロードオプションとカンマを追加します。
    7. (オプション) ページに他の水平メニューバー Widget が含まれない場合は、ドキュメントの head に埋め込まれている前の MenuBarHorizontal.css ファイルへのリンクを削除します。
    8. ページを保存します。