網站 HTML 網頁制作期末大作業
一、引言
隨著互聯網的飛速發展，網站已成為信息傳播、商業推廣、社交互動等眾多領域不可或缺的平臺。作為一名學習網頁設計與制作的學生，掌握 HTML 網頁制作技能至關重要。本次期末大作業，我將運用所學的 HTML 知識，獨立完成一個主題網站的制作，旨在鞏固專業知識，提升實踐能力，為未來的職業發展打下堅實基礎。
二、網站主題與規劃
（一）網站主題
經過深思熟慮，我決定以“旅游攻略分享”為主題制作網站。旅游是人們生活中的一大樂趣，越來越多的人渴望探索未知的世界，分享自己的旅行經歷，同時獲取他人的攻略來規劃自己的行程。因此，一個內容豐富、實用性強的旅游攻略分享網站具有較高的實用價值和吸引力。
（二）網站規劃
功能模塊
首頁：展示網站的核心內容和特色，包括熱門旅游目的地推薦、最新攻略文章列表、用戶注冊登錄入口等。
攻略列表頁：按照不同的分類（如國內游、國外游、自由行、跟團游等）展示攻略文章的標題、摘要、發布日期等信息，方便用戶快速瀏覽和篩選感興趣的內容。
攻略詳情頁：詳細展示一篇攻略文章的全部內容，包括行程安排、景點介紹、住宿餐飲推薦、交通指南、費用預算等，為用戶提供全面的參考信息。
用戶中心：用戶注冊登錄后，可以在此管理自己的個人信息、發布攻略文章、查看收藏的攻略、與其他用戶互動交流等。
關于我們：介紹網站的創建團隊、宗旨、聯系方式等信息，增強用戶對網站的信任度。
頁面布局
采用常見的頂部導航欄 + 側邊欄 + 主內容區 + 底部版權欄的布局結構。頂部導航欄固定在頁面頂部，方便用戶快速切換不同功能模塊；側邊欄放置一些常用的功能入口和廣告位；主內容區根據不同的頁面展示對應的核心內容；底部版權欄展示網站的版權信息、備案號等。
設計風格
以清新自然、簡潔明快為主基調，色彩搭配上選用藍色、綠色等給人舒適感的顏色作為主色調，輔以白色、灰色等中性色進行調和。字體選擇清晰易讀的微軟雅黑，確保用戶在瀏覽網頁時能夠獲得良好的視覺體驗。
三、HTML 網頁制作過程
（一）搭建網頁基本結構
首頁
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>旅游攻略分享網 – 首頁</title>
</head>
<body>
<header>
<nav>
<!– 頂部導航欄內容 –>
</nav>
</header>
<aside>
<!– 側邊欄內容 –>
</aside>
<main>
<!– 首頁主內容區：熱門旅游目的地推薦、最新攻略文章列表等 –>
</main>
<footer>
<!– 底部版權欄內容 –>
</footer>
</body>
</html>
在首頁中，使用 <header> 標簽包裹頂部導航欄，通過 <nav> 標簽定義導航鏈接；<aside> 標簽用于側邊欄部分；<main> 標簽突出顯示主內容區，將熱門旅游目的地推薦和最新攻略文章列表等內容放置其中；<footer> 標簽則用于底部版權欄，展示網站的版權信息等。
攻略列表頁
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>旅游攻略分享網 – 攻略列表</title>
</head>
<body>
<header>
<nav>
<!– 頂部導航欄內容 –>
</nav>
</header>
<aside>
<!– 側邊欄內容 –>
</aside>
<main>
<h1>攻略列表</h1>
<section>
<!– 按分類展示攻略文章列表 –>
<h2>國內游</h2>
<ul>
<!– 具體攻略文章列表項 –>
<li><a href=”攻略詳情頁鏈接”>攻略文章標題一</a> – 發布日期</li>
<li><a href=”攻略詳情頁鏈接”>攻略文章標題二</a> – 發布日期</li>
<!– 更多列表項 –>
</ul>
<!– 其他分類同理 –>
</section>
</main>
<footer>
<!– 底部版權欄內容 –>
</footer>
</body>
</html>
攻略列表頁同樣遵循基本的頁面結構，在 <main> 標簽內，使用 <h1> 標簽定義頁面標題“攻略列表”，然后通過 <section> 標簽劃分不同分類的攻略文章列表區域，每個分類下用 <h2> 標簽標識分類名稱，再利用 <ul> 和 <li> 標簽以無序列表的形式展示具體的攻略文章列表項，每個列表項包含攻略文章的標題（作為超鏈接指向攻略詳情頁）和發布日期。
攻略詳情頁
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>旅游攻略分享網 – 攻略詳情</title>
</head>
<body>
<header>
<nav>
<!– 頂部導航欄內容 –>
</nav>
</header>
<aside>
<!– 側邊欄內容 –>
</aside>
<main>
<article>
<h1>攻略文章標題</h1>
<p>發布日期：具體日期</p>
<section>
<h2>行程安排</h2>
<!– 行程安排具體內容 –>
</section>
<section>
<h2>景點介紹</h2>
<!– 景點介紹具體內容 –>
</section>
<section>
<h2>住宿餐飲推薦</h2>
<!– 住宿餐飲推薦具體內容 –>
</section>
<section>
<h2>交通指南</h2>
<!– 交通指南具體內容 –>
</section>
<section>
<h2>費用預算</h2>
<!– 費用預算具體內容 –>
</section>
</article>
</main>
<footer>
<!– 底部版權欄內容 –>
</footer>
</body>
</html>
攻略詳情頁的核心在于 <main> 標簽內的 <article> 標簽，它用于封裝一篇完整的攻略文章。文章標題用 <h1> 標簽突出顯示，發布日期緊隨其后。文章內容按照不同的板塊（如行程安排、景點介紹、住宿餐飲推薦、交通指南、費用預算等）劃分，每個板塊用 <section> 標簽包裹，并通過 <h2> 標簽定義板塊標題，各板塊內填充對應的具體內容，為用戶提供詳盡的攻略信息。
用戶中心
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>旅游攻略分享網 – 用戶中心</title>
</head>
<body>
<header>
<nav>
<!– 頂部導航欄內容 –>
</nav>
</header>
<aside>
<!– 側邊欄內容 –>
</aside>
<main>
<h1>用戶中心</h1>
<section>
<h2>個人信息管理</h2>
<!– 個人信息表單內容 –>
</section>
<section>
<h2>發布攻略</h2>
<!– 發布攻略表單內容 –>
</section>
<section>
<h2>我的收藏</h2>
<!– 收藏的攻略列表內容 –>
</section>
<section>
<h2>互動交流</h2>
<!– 用戶互動交流內容 –>
</section>
</main>
<footer>
<!– 底部版權欄內容 –>
</footer>
</body>
</html>
用戶中心頁面包含多個功能板塊。在 <main> 標簽內，首先用 <h1> 標簽標識“用戶中心”標題，然后通過多個 <section> 標簽劃分不同的功能區域。個人信息管理板塊包含一個表單，用于用戶編輯和更新自己的基本信息；發布攻略板塊提供一個表單。
