Dreamweaverでナビゲーションバーを作成する方法

Dreamweaver ナビゲーション バーを作成するには、次の手順に従います。 HTML ドキュメントを作成し、ナビゲーション コンテナ DIV (class="nav-container") を挿入します。コンテナ内に順序なしリストとリスト項目を作成し、リンクを含むアンカー要素を追加します。ナビゲーション バーのコンテナ、リスト、リンクを CSS スタイル シートでスタイル設定します。

Dreamweaver でナビゲーション バーを作成する

ステップ 1: 新しい HTML ドキュメントを作成する

1. Dreamweaver で、[ファイル] > [新規作成] > [HTML] を選択します。
2. [新しい HTML ドキュメント] ダイアログ ボックスに目的のファイル名を入力し、[作成] をクリックします。

ステップ 2: ナビゲーション コンテナの挿入

1. HTML コード内の目的の位置にカーソルを置きます。
2. [挿入] メニューで、[一般] > [DIV] を選択します。
3. [DIV の挿入] ダイアログ ボックスで、CSS クラス「nav-container」を入力し、[OK] をクリックします。

ステップ 3: ナビゲーション リンクを作成する

1. 「nav-container」DIV に、順序なしリスト (
   ) を挿入します。
   • リスト項目を追加します (
   • )。各リスト項目はナビゲーション リンクに対応します。
   • 各リスト項目に、リンク アドレスと表示テキストを含むアンカー () 要素を挿入します。

<code class="html"><div class="nav-container">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div></code>

ステップ 4: ナビゲーション バーのスタイルを設定する

1. CSS スタイル シートで、「nav-container」クラスのスタイルを追加します。ナビゲーション バーの全体的な外観 (背景色、フォント、テキスト サイズなど) を含みます。
2. 「nav-container ul」クラスと「nav-container li」クラスにスタイルを追加して、ナビゲーション リンクのスタイルを指定します。
3. 「nav-container a」クラスにスタイルを追加し、ホバー状態やアクティブ状態を含むナビゲーション リンクのスタイルを設定します。

CSS スタイルの例

<code class="css">.nav-container {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.nav-container ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

.nav-container li {
  padding: 0 20px;
}

.nav-container a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s ease-in-out;
}

.nav-container a:hover {
  color: #ccc;
}

.nav-container a.active {
  color: #000;
  background-color: #ccc;
}</code>

以上がDreamweaverでナビゲーションバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。