Dreamweaverのリンクの順序付けられていないリストからナビゲーションバーを作成する方法 - ダミー

簡単なロールオーバーエフェクトを使用して箇条書きリストをDreamweaverのナビゲーションバーに変えることができます。ナビゲーションバーに箇条書きのリストを使用することは、現在のアクセシビリティ基準を満たすウェブサイトでよく受け入れられています。

クレジット：istockphotoによる写真。 com

同じリンクがまだ順序付けられていないリストに含まれていますが、スタイルの適用が劇的に外観を変更します。

<！ - 1 - >

クレジット：istockphotoによる写真。 com

CSSを使用してナビゲーションバーを作成して、順序付けされていないリストとリンクタグを再定義するには、次の手順を実行します。

ページにナビゲーションバーを作成する場所にカーソルを置きます。
リンクとして使用するテキストを入力し、ReturnキーまたはEnterキーを押してそれぞれを区切って段落リターンを作成します。
<！ - 2 - >
リンクを順序なしリストとしてフォーマットするには、リンクする各テキスト行を
タグで区切ります。
各テキストを順番に選択し、共通挿入パネルのハイパーリンクアイコンをクリックし、リンク先のページを選択するか、URLを入力してリンクを作成します。
ドラッグしてリンクセット全体を選択し、プロパティインスペクタの順序なしリストアイコンをクリックします。
<！ - 3 - >
各リンクの先頭に箇条書きが表示されます。別の箇条書きでリンクが設定されていない場合は、をクリックして前のリンクとの間のスペースを削除し、ReturnキーまたはEnterキーを押してリンクを段落リターンで区切ります。
リンクリスト（またはページ上に既に存在する他のコンテンツ）にタグを追加するには、コンテンツを選択し、共通挿入パネルのDivアイコンをクリックします。

ディビジョンの挿入ダイアログボックスが開きます。

書式を追加する場合は、順序付けされていないリンクのリストの周りにタグを追加すると便利です。
[挿入]ドロップダウンリストから[選択範囲を囲む]を選択します。

新しいタグを追加する場所をより正確に制御するには、[ディビジョンの挿入]ダイアログボックスの上部にある[挿入]ドロップダウンリストからオプションを選択します。
「クラス」フィールドまたは「ID」フィールドに名前を入力します。

入力したクラスまたはID名のタグが、リンクのリストを囲むページに自動的に追加されます。
「ディビジョンの挿入」ダイアログボックスの下部で、「新規CSSルール」ボタンをクリックします。

新しいCSSルール名がCSS Designerセレクタパネルのスタイル名のリストに追加されます。
[プロパティ]パネルで、色、背景、サイズ、余白、およびパディングの設定を指定します。

スタイルの書式は、ステップ5-7で作成したスタイルを適用したため、タグのコンテンツに自動的に適用されます。
ナビゲーションバーで使用されている場合にのみ、順序なしリストの書式を設定する複合スタイルを作成するには、クラス名を含む複合スタイルを作成します。 navbar：
1. 箇条書きのリストのどこにでもカーソルを置きます。
2. セレクタパネルの上部にあるプラス記号（+）をクリックします。
3. 「セレクタ名」フィールドに、Dreamweaverが自動的に入力されていることを確認します。 navbar ulをセレクタパネルの新しいスタイルの名前として使用します。
4. プロパティパネルで余白とパディングを0に設定します。
複合スタイルを作成してリスト項目タグを再定義します。
1. 箇条書きリストのどこにでもカーソルを置きます。
2. セレクタパネルの上部にあるプラス記号をクリックします。
3. 「セレクタ名」フィールドに、Dreamweaverが自動的に入力されていることを確認します。 navbar ul liをセレクタパネルの新しいスタイルの名前として使用します。
4. [プロパティ]パネルで、[表示]を[インライン]に設定します。
5. 箇条書きの種類を[なし]に変更して箇条書きを削除します。
6. 左右の余白を20ピクセルに設定します。
  
  このステップは、水平リスト内のリスト項目を互いに分離する。設定を変更して、デザインに最も適したリンク間のスペース量を作成することができます。
リンクタグを再定義するスタイルを作成します。
1. ナビゲーションバーのリンク内にカーソルを置きます。
2. セレクタパネルの上部にあるプラス記号をクリックします。
3. スタイル名を変更する場合は、セレクタパネルで名前をダブルクリックし、使用する名前を入力します。
4. [プロパティ]パネルの[テキスト]セクションで、[テキストの装飾]を[なし]に設定します。
5. [テキスト]セクションで、リンクがページに読み込まれたときにリンクの色を指定するために、カラーウェルから色を選択します。
ユーザーがリンク上でカーソルをロールしたときにリンクの色が変わるように、ホバーリンクタグを再定義する新しいスタイルを作成します。
1. セレクタパネルの上部にあるプラス記号をクリックします。
2. 「セレクタ名」フィールドに「」を入力します。 navbar a：ホバー。
3. [プロパティ]パネルの[テキスト]セクションで、[テキストの装飾]を[なし]に設定します。
4. [テキスト]セクションで、ユーザーがリンク上にカーソルを置いたときに、リンクの色を指定するには、カラーウェルから色を選択します。
ユーザーがリンクをクリックした後にリンクの色が変わるように、訪問したリンクタグを再定義する新しいスタイルを作成します。
1. セレクタパネルの上部にあるプラス記号をクリックします。
2. 「セレクタ名」フィールドに「」を入力します。 navbar a：訪問しました。
3. [プロパティ]パネルの[テキスト]セクションで、[テキストの装飾]を[なし]に設定します。
4. 「テキスト」セクションでは、訪問した後にリンクの色を指定するために、カラーウェルから色を選択します。
ワークスペースの上部にある[ライブ]ボタンをクリックするか、[プレビュー]ボタンをクリックすると、ブラウザでページが表示され、リンクスタイルの効果を確認できます。