要創建 dreamweaver 導航欄，請按照以下步驟操作：創建 html 文檔，插入導航容器 DIV（class=”nav-container”）。在容器中創建無序列表和列表項，并添加包含鏈接的錨元素。在 css 樣式表中設置導航欄容器、列表和鏈接的樣式。
Dreamweaver 中創建導航欄
第一步：創建新的 HTML 文檔
- 在 Dreamweaver 中，選擇“文件”>“新建”>“HTML”。
- 在“新建 HTML 文檔”對話框中輸入所需的文件名，然后單擊“創建”。
第二步：插入導航容器
- 將光標放在 HTML 代碼中所需的位置。
- 在“插入”菜單中，選擇“通用”>“DIV”。
- 在“插入 DIV”對話框中，輸入 CSS 類“nav-container”并單擊“確定”。
第三步：創建導航鏈接
- 在“nav-container” DIV 中，插入一個無序列表 (
- )。
- 添加列表項 (
- )，每個列表項對應一個導航鏈接。
- 在每個列表項中，插入錨 () 元素，其中包含鏈接地址和顯示文本。
<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>
第四步：設置導航欄樣式
- 在 CSS 樣式表中，針對“nav-container”類添加樣式，包括導航欄的整體外觀（例如背景顏色、字體和文本大小）。
- 針對“nav-container ul”和“nav-container li”類添加樣式，指定導航鏈接的樣式。
- 為“nav-container a”類添加樣式，設置導航鏈接的樣式，包括懸停狀態和活動狀態。
示例 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; }
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
