本书旨在通过模拟实际生产环境中企业网站设计的基本流程，系统介绍HTML5和CSS3及相关框架在网页设计中的应用。本书内容包括企业的线上名片设计、企业网站的首页设计、企业网站的“新闻动态”页设计、企业网站的“产品展示”页设计、企业网站的“申请加盟”页设计5个核心项目，有助于读者在实践中掌握页面布局、色彩搭配、图片处理等方面的网页设计技能。
本书适合对Web前端开发感兴趣的初学者、计算机专业的学生和从事网页设计的在职人员阅读。
·项目实战强：模拟企业真实设计流程，5 大核心项目覆盖网站全场景开发。
·技术系统全：系统讲解 HTML5+CSS3 及相关框架，掌握布局、配色等核心技能。
·受众适配广：适合 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
附录 Git146
书单推荐
