HTML5与CSS3网页设计项目教程

·项目实战强：模拟企业真实设计流程，5 大核心项目覆盖网站全场景开发。
·技术系统全：系统讲解 HTML5+CSS3 及相关框架，掌握布局、配色等核心技能。
·受众适配广：适合 Web 前端初学者、计算机学生及网页设计在职人员学习。
·技能落地快：从线上名片到加盟页设计，边学边练快速掌握实战能力。
·目标导向明：聚焦企业网站设计需求，所学技能直接对接职场应用。

本书旨在通过模拟实际生产环境中企业网站设计的基本流程，系统介绍HTML5和CSS3及相关框架在网页设计中的应用。本书内容包括企业的线上名片设计、企业网站的首页设计、企业网站的“新闻动态”页设计、企业网站的“产品展示”页设计、企业网站的“申请加盟”页设计5个核心项目，有助于读者在实践中掌握页面布局、色彩搭配、图片处理等方面的网页设计技能。
本书适合对Web前端开发感兴趣的初学者、计算机专业的学生和从事网页设计的在职人员阅读。

孙海曼，北京市大兴区第一职业学校数字技术信息系主任，教务处主任，精通前端开发技术，在前端开发方面拥有丰富的经验。

凌杰，浙江大学远程教育学院“荣誉学员”，自由开发人员，精通JavaScript、Python、C等编程语言，拥有丰富的软件开发和软件测试经验，著有《JavaScript全栈开发》《Node.js后端全程实战》等图书。

项目1 企业的线上名片设计 1
【学习目标】 1
【学习场景描述】 1
【任务书】 1
【任务拆解】 2
【知识准备】 2
知识点1：HTML基础 2
知识点2：CSS基础 4
知识点3：配置工作环境 8
【工作实施和交付】 13
第 1步：创建一个网页设计项目 14
第 2步：定义网页的文档结构 14
第3步：定义网页的外观样式 15
【拓展知识】 18
知识点1：更多HTML标记 18
知识点2：更多CSS选择器 19
【作业】 21
【作业评价】 22
项目2 企业网站的首页设计 23
【学习目标】 23
【学习场景描述】 23
【任务书】 24
【任务拆解】 24
【知识准备】 24
知识点1：HTML5中的布局类标记
及其用法 25
知识点2：CSS3中的尺寸与配色
问题 27
知识点3：Bootstrap框架的基本
用法 31
【工作实施和交付】 42
第 1步：创建凌雪冰熊的官方网站
项目 42
第 2步：完成网站首页的布局
设计 43
第3步：填充网站首页的内容
元素 47
【拓展知识】 51
知识点1：移动端的屏幕适配 51
知识点2：基于Bootstrap框架的
响应式设计 54
【作业】 55
【作业评价】 55
项目3 企业网站的“新闻活动”页设计 56
【学习目标】 56
【学习场景描述】 56
【任务书】 57
【任务拆解】 57
【知识准备】 57
知识点1：HTML5中的图文类
标记 57
知识点2：CSS3中的元素盒模型 61
知识点3：基于Bootstrap框架的
排版方案 65
【工作实施和交付】 79
第 1步：分析现有源代码并提取
网页模板 79
第 2步：创建“新闻活动”页并完成布局 81
第3步：对页面进行内容填充并
排版 83
【拓展知识】 87
知识点1：CSS3中的元素定位
方式 87
知识点2：Bootstrap框架提供的
更多组件 88
【作业】 91
【作业评价】 92
项目4 企业网站的“产品展示”页设计 93
【学习目标】 93
【学习场景描述】 93
【任务书】 94
【任务拆解】 94
【知识准备】 94
知识点1：在网页中嵌入媒体
播放器 94
知识点2：在网页中嵌入JavaScript
代码 97
知识点3：Bootstrap框架提供的
相关组件 100
【工作实施和交付】 105
第 1步：基于网页模板创建目标
页面 105
第 2步：完成“产品展示”页的
设计 107
第3步：多媒体播放界面的设计 112
【拓展知识】 114
知识点：在网页中嵌入矢量图与
动画 114
【作业】 116
【作业评价】 117
项目5 企业网站的“申请加盟”页设计 118
【学习目标】 118
【学习场景描述】 118
【任务书】 119
【任务拆解】 119
【知识准备】 119
知识点1：HTML5中的交互类
标记 119
知识点2：基于CSS3的表单样式
设计 124
知识点3：基于Bootstrap框架的
表单样式设计 128
【工作实施和交付】 136
第 1步：基于网页模板创建
目标页面 136
第 2步：完成新页面的图文排版 137
第3步：添加用于提交申请的
界面 140
【拓展知识】 142
知识点：Bootstrap框架中的交互
组件 142
【作业】 145
【作业评价】 145
附录 Git 146