网页设计与制作实训报告

一、实训目的

本次网页设计与制作实训旨在通过实际项目开发，使学生掌握网页设计的基本流程与核心技能。实训要求学生综合运用HTML、CSS、JavaScript等前端技术，独立完成一个结构清晰、视觉美观、交互流畅的静态网站。通过实训，学生应能够：

1. 熟悉网页设计的基本规范与用户体验原则；
2. 熟练使用HTML5构建语义化页面结构；
3. 掌握CSS3进行响应式布局与样式设计；
4. 运用JavaScript实现基础交互功能；
5. 具备使用开发工具（如VS Code、Chrome DevTools）进行调试与优化的能力。

二、实训环境与工具

• 操作系统：Windows 10 / macOS
• 代码编辑器：Visual Studio Code
• 浏览器：Google Chrome、Microsoft Edge
• 版本控制：Git（可选）
• 设计工具：Figma / Photoshop（用于素材处理与原型设计）

三、实训内容与过程

本次实训为期两周，分为需求分析、原型设计、页面制作、交互实现、测试优化五个阶段。具体过程如下：

1. 需求分析与主题确定
选择“校园二手交易平台”作为网站主题，目标用户为在校大学生。核心功能包括：首页展示、商品列表、商品详情、发布商品、用户登录/注册。设计风格力求简洁清新，符合年轻用户审美。

2. 原型设计
使用Figma绘制低保真原型图，确定页面布局与导航结构。主要页面包括：首页、列表页、详情页、表单页、登录页。统一采用顶部导航栏+主体内容+底部版权信息的布局。

1. 页面制作

• 结构搭建：使用HTML5语义化标签（header、nav、main、section、article、footer）构建页面骨架。

• 样式设计：采用CSS3 Flexbox与Grid实现响应式布局，主色调为#2ecc71（绿色）与#ffffff，辅助色#333333。使用媒体查询适配移动端。

• 图片与图标：使用Font Awesome图标库，商品图片来源于网络并统一尺寸。

1. 交互实现

• 导航栏滚动吸顶效果；

• 商品列表鼠标悬停放大图片与阴影；

• 表单验证（非空、邮箱格式）；

• 点击“发布商品”弹出模态框；

• 使用localStorage模拟登录状态。

1. 测试与优化

• 在不同浏览器与设备上测试兼容性；

• 使用Chrome DevTools的Lighthouse进行性能评分，优化图片加载与CSS压缩；

• 根据同学反馈调整字体大小与间距。

四、实训成果

最终完成了一个包含5个页面的响应式静态网站，代码结构清晰，注释完整。主要成果如下：

• index.html：首页，展示轮播图与热门商品；
• list.html：商品列表页，支持分类筛选（仅前端模拟）；
• detail.html：商品详情页，包含图片切换与描述；
• publish.html：发布商品表单页，带前端验证；
• login.html：登录/注册页，含模态框交互；
• css/style.css：全站样式表；
• js/main.js：交互脚本。

网站截图与代码已附于报告附件。

五、问题与解决

1. 响应式布局中导航栏在小屏幕下换行错位。
解决方案：采用Flexbox并设置flex-wrap: wrap，同时使用媒体查询隐藏部分次要链接，改用汉堡菜单。

2. 图片加载速度慢导致Lighthouse评分低。
解决方案：使用TinyPNG压缩图片，并添加loading="lazy"属性实现懒加载。

3. 表单提交后页面刷新丢失数据。
解决方案：使用JavaScript阻止默认提交事件，并通过localStorage暂存数据。

六、实训

通过本次实训，我深入理解了网页设计与制作的全流程，从需求分析到最终部署，每一步都需要细心与耐心。我不仅巩固了HTML、CSS、JavaScript的基础知识，还学会了如何使用现代工具提升开发效率。我认识到响应式设计与用户体验的重要性，未来将继续学习前端框架（如Vue.js）与后端基础，以构建更完整的Web应用。

本次实训达到了预期目标，完成了所有既定任务，为今后的毕业设计及职业发展打下了坚实基础。