Dreamweaverを使用すると、Webサイトのドロップダウンメニューを簡単に作成できます。 しかし、すべてのHTMLフォームのように、ややこしいことがあります。 このチュートリアルでは、Dreamweaverでドロップダウンメニューを作成する手順について説明します。
Dreamweaverのジャンプメニュー
Dreamweaver 8には、Webサイト内のナビゲーション用のジャンプメニューを作成するためのウィザードも用意されています。 基本的なドロップダウンメニューとは異なり、このメニューは完了したら実際に何かを行います。 ドロップダウンフォームを動作させるためにJavaScriptやCGIを書く必要はありません。 このチュートリアルでは、Dreamweaver 8ウィザードを使用してジャンプメニューを作成する方法についても説明します。
01/20
フォームを最初に作成する
HTMLフォームとDreamweaverに関する重要な注意事項：
ジャンプメニューのような特別なウィザードを除いて、DreamweaverはHTMLフォームを「仕事」にするのに役立ちません。 このためには、CGIまたはJavaScriptが必要です。 詳細については、私のチュートリアル「HTMLフォームの作成」を参照してください。
あなたのWebサイトにドロップダウンメニューを追加するときに、必要なものはそれを囲むフォームです。 Dreamweaverでは、[挿入]メニューの[フォーム]をクリックし、[フォーム]を選択します。
02の20
フォームがデザインビューで表示される
Dreamweaverでは、デザインビューにフォームの位置が視覚的に表示されるので、フォーム要素の配置場所を知ることができます。 これは重要です。なぜなら、ドロップダウンメニューのタグはフォーム要素の外側で有効ではなく、動作しないからです。 イメージでわかるように、フォームはデザインビューの赤い点線です。
03/20
リスト/メニューを選択
Dreamweaverでは、ドロップダウンメニューを「リスト」または「メニュー」アイテムと呼びます。 フォームに追加するには、[挿入]メニューの[フォーム]メニューに移動し、[リスト/メニュー]を選択する必要があります。 カーソルがフォームボックスの赤い点線内にあることを確認します。
04/20
特別オプションウィンドウ
Dreamweaverのオプションには、アクセシビリティに関する画面があります。 Dreamweaverにすべてのアクセシビリティ属性を表示させることを選択します。 そして、この画面はその結果です。 フォームは、多くのWebサイトがアクセシビリティに欠けている場所で、これらの5つのオプションを入力することで、ドロップダウンメニューにすぐにアクセスしやすくなります。
05/20
フォームのアクセシビリティ
アクセシビリティのオプションは次のとおりです。
ラベル
これはフィールドの名前です。 フォーム要素の横にテキストとして表示されます。
あなたがドロップダウンメニューを呼びたいものを書いてください。 これは、ドロップダウンメニューが答える質問または短い句です。
スタイル
HTMLには、ブラウザへのフォームラベルを識別するラベルタグが含まれています。 ドロップダウンメニューとラベルテキストをタグで囲み、ラベルタグの "for"属性を使用して、参照するフォームタグを識別したり、ラベルタグをまったく使用したりすることはできません。
何らかの理由でラベルを移動する必要がある場合でも、正しいフォームフィールドにアタッチされるため、for属性を使用することをお勧めします。
ポジション
プルダウンメニューの前または後にラベルを配置することができます。
アクセスキー
これはAltキーまたはOptionキーとともに使用して、そのフォームフィールドに直接アクセスできるキーです。 これにより、マウスを使わなくてもフォームを使いやすくすることができます。 HTMLでアクセスキーを設定する方法
タブインデックス
これは、キーボードを使用してWebページをタブで移動するときに、フォームフィールドにアクセスする順序です。 タブインデックスの理解
ユーザー補助オプションを更新したら、[OK]をクリックします。
06/20
メニューを選択
ドロップダウンメニューをデザインビューに表示したら、さまざまな要素を追加する必要があります。 まず、ドロップダウンメニューをクリックして選択します。 Dreamweaverはドロップダウンメニューの周りに別の点線を置いて、選択したことを示します。
07/20
メニューのプロパティ
プロパティメニューは、そのドロップダウンメニューのリスト/メニュープロパティに変わります。 そこにあなたのメニューにID（「select」と書かれています）を与えたり、それをlisやmenuにしたり、スタイルシートからスタイルクラスを与えたり、ドロップダウンに値を割り当てたりすることができます。
リストとメニューの違いは何ですか？
Dreamweaverでは、1つの選択肢のみを許可するドロップダウンメニューがメニュードロップダウンメニューとして呼び出されます。 「リスト」は、ドロップダウンで複数の選択肢を可能にし、複数の項目を高くすることができます。
ドロップダウンメニューを複数行にしたい場合は、「リスト」タイプに変更し、「選択」ボックスはチェックしないでください。
08の20
新しいリスト項目を追加する
あなたのメニューに新しい項目を追加するには、 "List values ..."ボタンをクリックしてください。 上記のウィンドウが開きます。 最初のボックスに商品ラベルを入力します。 これがページに表示される内容です。 値を空白のままにしておくと、それもフォームに送信されるものです。
09/20
追加と並べ替え
アイテムを追加するには、プラスアイコンをクリックします。 リストボックスで並べ替える場合は、右の上矢印と下矢印を使用します。
10の20
すべてのアイテムの価値を与える
手順8で説明したように、値を空白のままにすると、ラベルがフォームに送信されます。 しかし、あなたはあなたのすべてのアイテムの価値を与えることができます - フォームに代替情報を送信する。 あなたはジャンプメニューのようなもののためにこれをたくさん使うでしょう。
11の20
デフォルトを選択する
Webページの既定値は、デフォルトの項目として最初に表示されるいずれかのドロップダウン項目が表示されます。 しかし、別のものを選択したい場合は、[プロパティ]メニューの[最初に選択した]ボックスで強調表示します。
12の20
デザインビューでのあなたのリストを見る
プロパティの編集が終了すると、デフォルト値が選択された状態でドロップダウンリストが表示されます。
13の20
コードビューであなたのリストを見る
コードビューに切り替えると、Dreamweaverによって非常にクリーンなコードでドロップダウンメニューが追加されます。 特別な属性は、アクセシビリティオプションを追加したものだけです。 コードはすべてインデントされており、読みやすく理解しやすいです。 私はDreamweaverに、デフォルトでXHTMLを書くように指示していたので、selected = "selected"属性に入れています。
14の20
ブラウザでの保存と表示
ドキュメントを保存してWebブラウザで表示すると、ドロップダウンメニューは期待どおりに表示されます。
15の20
しかし、何もしない
上記で作成したメニューは上手く見えますが、何もしません。 それが何かをするためには、フォーム自体にフォームアクションを設定する必要があります。これはまったく別のチュートリアルです。
幸いなことに、Dreamweaverにはドロップダウンメニューが組み込まれており、フォーム、CGI、またはスクリプトについて学ぶことなく、すぐにサイトで使用できます。 それはジャンプメニューと呼ばれています。
Dreamweaverのジャンプメニューでは、名前とURLを含むドロップダウンメニューが設定されます。 次に、メニューで項目を選択すると、リンクをクリックした場合と同様に、Webページがその場所に移動します。
[挿入]メニューの[フォーム]を選択し、[ジャンプメニュー]をクリックします。
16/20
ジャンプメニューウィンドウ
標準のドロップダウンメニューとは異なり、ジャンプメニューにはメニュー項目に名前を付けてフォームの動作方法の詳細を追加するための新しいウィンドウが開きます。
最初の項目については、テキスト "untitled1"を読みたいものに変更し、リンク先のURLを追加します。
17/20
あなたのジャンプメニューに項目を追加する
追加項目をクリックすると、ジャンプメニューに新しい項目が追加されます。 あなたが望むだけ多くのアイテムを追加してください。
18/20
ジャンプメニューオプション
必要なすべてのリンクを追加したら、次のオプションを選択する必要があります。
のURLを開く
フレームセットをお持ちの場合は、リンクを別のフレームで開くことができます。 または、メインウィンドウのオプションを特別なターゲットに変更して、URLが新しいウィンドウや他の場所で開くようにすることもできます。
メニュー名
メニューにページの一意のIDを付けます。 これは、スクリプトが正しく動作するために必要です。 また、1つのフォームに複数のジャンプメニューを持つことができます。
メニューの後に移動ボタンを挿入する
メニューを変更したときにスクリプトが動作しないことがあるので、これを選択するのが好きです。 それはまた、よりアクセス可能です。
URL変更後の最初の項目を選択
最初のメニュー項目として「1つ選択」などのプロンプトが表示されている場合は、これを選択します。 これは、その項目がページ上のデフォルトのままであることを保証します。
19の20
ジャンプメニューデザインビュー
Dreamweaverは、最初のメニューと同様に、デザインビューでジャンプメニューを設定し、デフォルトの項目を表示します。 ドロップダウンメニューを編集することができます。
編集する場合は、アイテムのIDを変更しないでください。そうしないと、スクリプトが機能しない可能性があります。
20/20
ブラウザのジャンプメニュー
ファイルを保存してF12を押すと、好みのブラウザにページが表示されます。 ここでオプションを選択し、「Go」をクリックするとジャンプメニューが機能します！