第 5 周：官网蓝湖设计图还原与验收
本周目标
本周在前几周实现结果的基础上完成最终校对和交付。完成后，应能够：
- 从蓝湖设计图中读取页面尺寸、颜色、字体、间距、圆角和切图信息
- 在编码前完成页面区域划分、公共结构识别和资源整理
- 使用语义化 HTML、标准流和 Flex 搭建页面主体
- 合理划分公共样式与页面样式，复用重复组件
- 使用设计图对比和浏览器开发者工具定位视觉偏差
- 独立交付一个结构完整、视觉接近设计图的纯静态官网
项目约束
- 使用提供的蓝湖设计图作为唯一视觉标准
- 仅使用 HTML 和 CSS，不使用 JavaScript、前端框架或 UI 组件库
- 本项目不要求使用 Git，也不要求提交至 GitHub
- 必须独立完成，不直接复制现成网站源码
需要掌握的知识点
设计图分析
- 确认页面数量、入口、目标尺寸和页面之间的关系
- 区分通栏背景、版心内容、公共区域和重复模块
- 读取宽高、间距、字体、行高、颜色、边框、圆角和阴影
- 判断图片应作为内容图片还是 CSS 背景
- 识别导航、按钮和卡片的默认、悬停、选中等状态
- 在编码前画出页面结构草图
资源管理
- 从蓝湖导出合适格式和清晰度的图片、图标等资源
- 按图片、图标、字体等类型分类存放
- 使用表达用途的英文或拼音命名资源
- 避免重复资源、临时截图和无用文件进入最终目录
- 检查相对路径，保证移动整个项目后仍能正常运行
页面实现
- 使用合适的语义化标签组织 Header、导航、主体和 Footer
- 使用版心、标准流和 Flex 完成主要布局
- 仅在覆盖、角标和悬浮等场景中使用定位
- 提取公共颜色、字体、按钮、卡片和标题样式
- 控制图片比例、文字换行、内容溢出和固定区域尺寸
- 保持选择器范围清晰，避免页面样式互相污染
视觉检查与调试
- 在设计图对应的浏览器尺寸下对比页面
- 按整体布局、区域尺寸、间距、文字、颜色和装饰的顺序检查
- 使用 Elements、Styles 和 Computed 面板定位偏差来源
- 使用 Network 面板检查图片、字体和样式资源
- 建立问题清单，逐项记录、修复和复查
项目任务
- 设计分析：输出页面清单、设计标注表和结构草图。
- 资源整理：导出并分类存放全部项目资源。
- 项目初始化：建立 HTML、公共 CSS、页面 CSS 和资源目录。
- 公共区域：完成公共头部、导航和页脚。
- 主体区域：完成设计图要求的全部页面和内容模块。
- 状态样式：补充设计中存在的悬停、选中等状态。
- 视觉对比：输出设计图与实现页面的对比截图和问题清单。
- 最终整理：清除临时内容、无效样式和无用资源，提交完整目录。
本周产出
- 页面清单和结构草图
- 蓝湖关键标注记录
- 分类清晰的资源目录
- 纯静态官网完整源码
- 设计图与实现页面的对比截图
- 已关闭的视觉问题清单
验收标准
页面完整性
- 设计图要求的页面和区域全部完成
- 文案、图片、图标和链接无遗漏
- 直接打开入口 HTML 后能够正常访问页面
- 图片、字体和样式资源全部加载成功
视觉还原
- 在指定浏览器和设计尺寸下，整体布局与设计图一致
- 版心、主要区域尺寸和对齐方式符合蓝湖标注
- 字体、字号、行高、颜色、背景、边框和圆角符合标注
- 页面无明显错位、遮挡、溢出、图片拉伸或意外横向滚动
代码质量
- HTML 结构清晰，主要区域使用合适的语义化标签
- CSS 按公共样式和页面样式合理组织
- 重复样式得到复用，类名能够表达用途
- 未大量使用无意义的绝对定位完成主体布局
- 项目中没有调试代码、临时资源和无效文件