Dreamweaverを使用すると、Webサイトのドロップダウンメニューを簡単に作成できます。しかし、すべてのHTMLフォームのように、ややこしいことがあります。このチュートリアルでは、Dreamweaverでドロップダウンメニューを作成する手順について説明します。
Dreamweaverのジャンプメニュー
Dreamweaver 8には、Webサイト内のナビゲーション用のジャンプメニューを作成するためのウィザードも用意されています。基本的なドロップダウンメニューとは異なり、このメニューは完了したら実際に何かを行います。ドロップダウンフォームを動作させるためにJavaScriptやCGIを書く必要はありません。このチュートリアルでは、Dreamweaver 8ウィザードを使用してジャンプメニューを作成する方法についても説明します。
まず、フォームを作成します。
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キーとともに使用して、そのフォームフィールドに直接アクセスできるキーです。これにより、マウスを使わなくてもフォームを使いやすくすることができます。 これは、キーボードを使用してWebページをタブで移動するときにフォームフィールドにアクセスする順序です。 ユーザー補助オプションを更新したら、OKをクリックします。 Dreamweaverのデザインビューにドロップダウンメニューが表示されたら、さまざまな要素を追加する必要があります。まず、ドロップダウンメニューをクリックして選択します。 Dreamweaverはドロップダウンメニューの周りに別の点線を置いて、選択したことを示します。 プロパティメニューは、そのドロップダウンメニューのリスト/メニュープロパティに変わります。そこにあなたのメニューにID（「select」と書かれています）を与えたり、それをlisやmenuにしたり、スタイルシートからスタイルクラスを与えたり、ドロップダウンに値を割り当てたりすることができます。 Dreamweaverでは、1つの選択肢のみを許可するドロップダウンメニューがメニュードロップダウンメニューとして呼び出されます。 「リスト」は、ドロップダウンで複数の選択肢を可能にし、複数の項目を高くすることができます。 ドロップダウンメニューを複数行にしたい場合は、「リスト」タイプに変更し、「選択」ボックスはチェックしないでください。 あなたのメニューに新しい項目を追加するには、 "List values …"ボタンをクリックしてください。上記のウィンドウが開きます。最初のボックスに商品ラベルを入力します。これがページに表示される内容です。値を空白のままにしておくと、それもフォームに送信されるものです。 アイテムを追加するには、プラスアイコンをクリックします。リストボックスで並べ替える場合は、右の上矢印と下矢印を使用します。 手順8で説明したように、値を空白のままにすると、ラベルがフォームに送信されます。しかし、あなたはあなたのすべてのアイテムの価値を与えることができます - フォームに代替情報を送信する。ジャンプメニューやハイパーリンクのようなものには、これを多く使用します。 Webページの既定値は、デフォルトの項目として最初に表示されるいずれかのドロップダウン項目が表示されます。しかし、別のものを選択したい場合は、プロパティメニューの最初に選択したボックスで強調表示します。 プロパティの編集が終了すると、デフォルト値が選択された状態でドロップダウンリストが表示されます。 コードビューに切り替えると、Dreamweaverによって非常にクリーンなコードでドロップダウンメニューが追加されます。特別な属性は、アクセシビリティオプションを追加したものだけです。コードはすべてインデントされており、読みやすく理解しやすいです。私はDreamweaverに、デフォルトでXHTMLを書くように指示していたので、selected = "selected"属性に入れています。 ドキュメントを保存してWebブラウザで表示すると、ドロップダウンメニューが期待どおりに表示されます。 上記で作成したメニューは上手く見えますが、何もしません。それが何かをするためには、フォーム自体にフォームアクションを設定する必要があります。 幸いなことに、Dreamweaverにはドロップダウンメニューが組み込まれており、フォーム、CGI、またはスクリプトについて学ぶことなく、すぐにサイトで使用できます。それはジャンプメニューと呼ばれています。 Dreamweaverのジャンプメニューでは、名前とURLを含むドロップダウンメニューが設定されます。次に、メニューで項目を選択すると、リンクをクリックした場合と同様に、Webページがその場所に移動します。 挿入メニューのフォームを選択し、ジャンプメニューをクリックします。 標準のドロップダウンメニューとは異なり、ジャンプメニューにはメニュー項目に名前を付けてフォームの動作方法の詳細を追加するための新しいウィンドウが開きます。 最初の項目については、テキスト "untitled1"を読みたいものに変更し、リンク先のURLを追加します。 追加項目をクリックすると、ジャンプメニューに新しい項目が追加されます。あなたが望むだけ多くのアイテムを追加してください。 必要なすべてのリンクを追加したら、次のオプションを選択する必要があります。 フレームセットをお持ちの場合は、リンクを別のフレームで開くことができます。または、メインウィンドウのオプションを特別なターゲットに変更して、URLが新しいウィンドウや他の場所で開くようにすることもできます。 メニューにページの一意のIDを付けます。これは、スクリプトが正しく動作するために必要です。また、1つのフォームに複数のジャンプメニューを持つことができます。 メニューを変更したときにスクリプトが動作しないことがあるので、これを選択するのが好きです。それはまた、よりアクセス可能です。 最初のメニュー項目として「1つ選択」などのプロンプトが表示されている場合は、これを選択します。これは、その項目がページ上のデフォルトのままであることを保証します。 Dreamweaverは、最初のメニューと同様に、デザインビューでジャンプメニューを設定し、デフォルトの項目を表示します。ドロップダウンメニューを編集することができます。 編集する場合は、アイテムのIDを変更しないでください。そうしないと、スクリプトが機能しない可能性があります。 ファイルを保存してF12を押すと、好みのブラウザにページが表示されます。ここでオプションを選択し、「Go」をクリックするとジャンプメニューが機能します！ スタイル
ポジション
アクセスキー
タブインデックス
メニューを選択
メニューのプロパティ
リストとメニューの違いは何ですか？
新しいリスト項目を追加する
追加と並べ替え
すべてのアイテムの価値を与える
デフォルトを選択する
デザインビューでのあなたのリストを見る
コードビューであなたのリストを見る
ブラウザでの保存と表示
しかし、それは何もしない…
ジャンプメニューウィンドウ
あなたのジャンプメニューに項目を追加する
ジャンプメニューオプション
のURLを開く
メニュー名
メニューの後に移動ボタンを挿入する
URL変更後の最初の項目を選択
ジャンプメニューデザインビュー
ブラウザのジャンプメニュー
