基于HTML网页设计的家乡风景主题网站开发——以江苏淮安为例

一、课程设计背景与目的\n\n网页设计与制作是计算机应用技术及相关专业的核心实践课程，期末大作业旨在综合考察学生对HTML、CSS及基础JavaScript的掌握程度，以及运用所学知识解决实际设计问题的能力。本次课程报告以“家乡风景”为主题，选择江苏省淮安市作为设计对象，通过构建一个多页面的静态网站，展示淮安的自然风光、人文历史及特色美食，达到了既锻炼技术能力又宣传家乡的双重目的。\n\n## 二、设计目标与技术选型\n\n### 2.1 设计目标\n让浏览者通过网页直观地了解淮安的标志性景点（如河下古镇、周恩来纪念馆、洪泽湖等），同时确保网站在不同设备上具备良好的视觉体验和交互体验。\n\n### 2.2 技术选型\n- 结构：HTML5 语义化标签（header, nav, main, section, footer 等）\n- 表现：CSS3 通过外部样式表控制版面，采用 Flexbox 与 Grid 布局，辅以媒体查询实现响应式\n- 交互：基础的JavaScript实现轮播图与导航栏折叠\n- 开发环境：VS Code + Chrome浏览器开发者工具\n\n## 三、网站结构规划设计\n\n网站共设计五个页面，满足网状链接保证浏览流畅：\n\n| 页面名称 | 文件名 | 主要内容 |\n|---------|--------|----------|\n| 首页 | index.html | 淮安城市简介，精美轮播图，导航栏 |\n| 自然风光 | scenery.html | 洪泽湖、白马湖、里运河风光带图片与文字介绍 |\n| 人文古迹 | culture.html | 周恩来故居、河下古镇、镇淮楼的历史沿革 |\n| 特色美食 | food.html | 淮扬菜代表：软兜长鱼、平桥豆腐、盱眙龙虾等 |\n| 关于/联系 | contact.html | 作者信息、旅游小贴士、留言表单 |\n\n### 3.1 目录结构规范\n`\nhuai-an/\n├── index.html\n├── scenery.html\n├── culture.html\n├── food.html\n├── contact.html\n├── css/\n│ └── style.css\n├── js/\n│ └── script.js\n└── images/\n ├── hongze-lake.jpg\n ├── zhen-huai-lou.jpg\n └── ...\n`\n\n## 四、页面内容设计与实现\n\n### 4.1 首页设计\n使用 <header> 区放置淮安市的LOGO标语以及导航；中部区域使用 Flexbox 结合 CSS 定位做出带有上、左、右内容区块的Welcome横幅。清晰列出自然风光与文化遗址四个内页导航连接卡片。\n\n`html\n