网站 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> 标签划分不同的功能区域。个人信息管理板块包含一个表单，用于用户编辑和更新自己的基本信息；发布攻略板块提供一个表单。
