本书共14章，分为基础篇、技能篇、布局篇和应用篇。基础篇主要内容包括网页基础、HTML语言基础、CSS样式基础。技能篇主要介绍了使用CSS设置文字样式、图像样式、列表样式、表格样式及表单样式。布局篇详细讲解了网页的三种基本布局方法：流布局、浮动布局和定位布局。最应用篇给出了两个具有很强实用性的综合网站案例。本书注重理论与实践相结合，将企业实际工作规范融入到案例中，避免书本知识与实际应用脱节，实现学习与工作的紧密衔接。

随着互联网技术的日新月异，HTML5+CSS3逐渐成为前端开发的主流技术，Chrome、Safari、Firefox等主流浏览器也正逐步实现对HTML5+CSS3的全面支持。本书通过大量实例对HTML5+CSS3技术进行了深入浅出的讲解，同时通过与企业的合作向读者讲解了许多网页前端开发的实际解决方案，使读者学到的都是当前企业中最核心、最实用的技术。 本书特色 1．校企合作编写。本书是由具有丰富教学经验的教师和在新浪、百度一线互联网公司工作过的技术专家共同编写的。在注重基础知识和技能学习的同时，也注重企业实际项目开发经验的传递。并引入了大量的实际工作项目，实现了学习和工作的紧密衔接。 2．教材体例新颖。本书从职业院校学生实际情况出发，采用项目教学方式，以基础项目→提高项目→拓展项目的模式，零基础讲解网页设计与制作的相关技能。 3．配套资源丰富。提供了丰富的学习和授课资源，包含所有案例的源代码及原始素材，还提供了授课的PPT和操作指导视频。 4．紧跟技术发展潮流。本书在网页制作技术的选择上，瞄准市场热门的HTML5技术，融入了大量的HTML5+CSS3的新功能和新前端技术，通过大量实例分析和制作，使读者在学习技术的同时，掌握Web前端开发的精髓。 5．与“1+X”证书相融合。本书的知识和技能紧扣“1+X” Web前端开发职业技能等级证书（初级）的Web页面制作基础部分的内容要求，适合学习者作为备考“1+X”Web前端证书（初级）的教材。 本书内容 本书分为基础篇、技能篇、布局篇和应用篇4部分。基础篇共3章，讲解了网站开发流程、HTML5和CSS3的基础知识，让读者初步认识网页制作技术。技能篇共5章，逐一对文字、图像、列表、表格、表单等网页常用元素进行介绍，包括元素本身的特点及相关CSS样式的应用。布局篇共4章，分别介绍了盒子模型、流布局、浮动布局和定位布局的相关知识，以及在实际案例中的应用。应用篇共2章，向读者展示了两个实际案例的制作方法，每个案例都包含主页、一级链接页和二级链接页，充分将前面所学的知识运用到实际应用中。从基础篇到布局篇均安排了3个级别的项目：基础项目、提高项目和拓展项目。基础项目有详细的制作过程讲解；提高项目给出了制作要点提示，学习者需按照提示自行编写代码；拓展项目要求学习者能够判断项目的结构和样式。以上安排有助于学习者循序渐进地掌握知识与技能。本书另外附赠一个案例供考核使用或参考。 编写人员组成 徐洪亮编写本书第1、5、8、9、12章，同时负责全书统稿；陈晓靖编写第3、6、7、11、14章；常宽编写第2、10章，徐洪亮和常宽共同编写第4、13章。辽宁优品科技有限公司苑佳倩提供了本书第10章至第14章的案例，并对本书中涉及的行业规范给予了详细的指导。此外，感谢北京市信息管理学校信息技术系胡志齐主任在策划和促成本书的出版方面做出的大量工作；同时感谢合作企业的一线专家及北京信息职业技术学院对本书编写工作的支持。 资料包说明 为了方便广大读者学习，本书提供了所有案例的相关素材及源代码文档，以及基础案例的制作过程视频。为了方便教师教学，本书还提供了所有章节的PPT电子教案及习题答案，请读者登录华信教育资源网（www.hxedu.com.cn），注册后可免费下载。 由于编者的水平有限，书中疏漏和不足在所难免，欢迎读者朋友指正。广大读者如有好的建议或意见，也可以联系我们，我们将尽力为您解答。联系邮箱为：xuhwen@163.com。

基 础 篇 第1章 网页基础 / 1 1.1 基础项目1：制作“念奴娇·赤壁怀古”网页 / 1 1.2 知识库：网页基础知识 / 5 1.2.1 网站开发流程 / 5 1.2.2 网页常用术语 / 8 1.2.3 网页文件命名规范 / 10 1.3 基础项目2：制作“苏轼介绍”网页 / 11 1.4 知识库：Dreamweaver 2021的工作界面和使用技巧 / 14 1.4.1 启动Dreamweaver 2021 / 14 1.4.2 认识Dreamweaver 2021工作界面 / 17 1.4.3 更改Dreamweaver 2021默认界面和布局 / 21 1.4.4 使用Dreamweaver 2021的几个小技巧 / 22 1.5 提高项目：制作“青春颂歌”网页 / 23 1.6 拓展项目：制作“速度滑冰”网页 / 24 知识检测1 / 24 第2章 HTML语言基础 / 26 2.1 基础项目1：制作“走向远方”网页 / 26 2.2 知识库：HTML语言的概念和基本结构 / 27 2.2.1 HTML语言的概念 / 27 2.2.2 HTML文档的基本结构 / 28 2.3 基础项目2：制作“我的空间”网页 / 30 2.4 知识库：HTML标签的分类及常见的HTML标签 / 32 2.4.1 HTML标签的分类 / 32 2.4.2 常见的HTML标签 / 34 2.5 提高项目：制作“垃圾分类 人人有责”网页 / 43 2.6 拓展项目：制作“菜鸟加油”网页 / 44 知识检测2 / 44 第3章 CSS样式基础 / 45 3.1 基础项目1：制作“古诗词欣赏”网页 / 45 3.2 知识库：CSS语言的概念和基本结构 / 50 3.2.1 CSS语言的概念 / 50 3.2.2 CSS语言的基本结构和注释 / 50 3.2.3 CSS书写顺序及规范 / 51 3.3 基础项目2：制作“服务奥运，精彩人生”网页 / 54 3.4 知识库：CSS样式表的引入及选择器的使用 / 58 3.4.1 CSS样式表的引入 / 58 3.4.2 CSS选择器的使用 / 61 3.5 提高项目：制作“女排精神”网页 / 68 3.6 拓展项目：制作“琴棋书画”网页 / 69 知识检测3 / 70 技 能 篇 第4章 使用CSS设置文字样式 / 71 4.1 基础项目1：制作“古人书房佳联赏析”网页 / 71 4.2 知识库：CSS文字样式 / 75 4.2.1 文字样式常用属性 / 75 4.2.2 网页安全色 / 80 4.2.3 CSS网页元素的长度单位 / 80 4.3 基础项目2：制作“中国名花”网页 / 82 4.4 知识库：CSS段落样式与元素特性 / 87 4.4.1 段落样式常用属性 / 87 4.4.2 关于＜span＞标签 / 92 4.4.3 清除行内块元素默认空白间隙技巧 / 92 4.5 提高项目：制作“诗词鉴赏”网页 / 94 4.6 拓展项目：制作“古典园林”网页 / 96 知识检测4 / 97 第5章 使用CSS设置图像样式 / 98 5.1 基础项目1：制作“茶文化”网页 / 98 5.2 知识库：CSS图像样式 / 102 5.2.1 网页图像格式 / 102 5.2.2 常用CSS图像样式 / 103 5.2.3 图像映射 / 107 5.3 基础项目2：制作“少年中国说”网页 / 109 5.4 知识库：CSS背景样式 / 113 5.4.1 背景颜色样式 / 113 5.4.2 背景图像样式 / 114 5.4.3 CSS雪碧图 / 116 5.5 提高项目：制作“低碳生活 从我做起”网页 / 119 5.6 拓展项目：制作“春节民俗”网页 / 120 知识检测5 / 121 第6章 使用CSS设置列表样式 / 122 6.1 基础项目1：制作“特色北京”横向导航栏 / 122 6.2 基础项目2：制作“特色北京”纵向导航栏 / 125 6.3 基础项目3：制作“八大菜系”下拉菜单式导航栏 / 127 6.4 基础项目4：制作“青少年文明公约”网页 / 132 6.5 基础项目5：制作“2020年感动中国十大人物”网页 / 136 6.6 知识库：CSS常用列表样式 / 141 6.6.1 HTML列表 / 141 6.6.2 常用CSS列表样式 / 143 6.7 提高项目：制作“悦读图书榜”网页 / 144 6.8 拓展项目：制作“环保在行动”网页 / 145 知识检测6 / 145 第7章 使用CSS设置表格样式 / 147 7.1 基础项目1：制作“神舟系列飞船发射情况表”网页 / 147 7.2 知识库：表格的HTML标签和常用样式 / 150 7.2.1 表格的HTML标签 / 150 7.2.2 表格的常用CSS样式 / 151 7.3 基础项目2：制作“青铜之美”网页 / 153 7.4 知识库：单元格的合并与拆分 / 158 7.5 提高项目：制作“中国二十四节气—春天篇”网页 / 159 7.6 拓展项目：制作“中国十大名胜古迹”网页 / 160 知识检测7 / 161 第8章 使用CSS设置表单样式 / 162 8.1 基础项目1：制作“邮箱注册”网页 / 162 8.2 知识库：常用表单元素类型及结构 / 178 8.2.1 表单标签 / 178 8.2.2 常用表单元素 / 179 8.2.3 表单按钮 / 182 8.3 基础项目2：制作“速递网——在线下单”网页 / 184 8.4 知识库：域集和组 / 192 8.4.1 域集 / 192 8.4.2 组 / 193 8.5 提高项目：制作“商家入驻”网页 / 194 8.6 拓展项目：制作“快乐数独”网页 / 197 知识检测8 / 197 布 局 篇 第9章 盒子模型 / 199 9.1 基础项目：根据布局图创建简单的盒子模型页面 / 199 9.2 知识库：盒子模型的理解与应用 / 201 9.2.1 盒子模型的概念 / 201 9.2.2 盒子模型的计算 / 202 9.2.3 box-sizing属性 / 203 9.2.4 伪元素 / 204 9.2.5 实际开发中遇到的和盒子模型相关的问题及应用 / 207 9.3 提高项目：创建三列布局的盒子模型 / 210 9.4 拓展项目：制作“专业宣传”网页 / 211 知识检测9 / 212 第10章 CSS标准流布局 / 213 10.1 基础项目：制作“谷穗儿机构”网页 / 213 10.1.1 对页面进行整体布局 / 214 10.1.2 制作页头部分 / 215 10.1.3 制作内容部分 / 217 10.1.4 制作页脚部分 / 222 10.2 知识库：标准流布局的概念及注意事项 / 223 10.2.1 标准流布局的概念 / 223 10.2.2 标准流布局中的注意事项 / 223 10.3 提高项目：制作“UI设计学院——博客”网页 / 225 10.4 拓展项目：制作“简历工厂”网页 / 227 知识检测10 / 228 第11章 CSS浮动布局 / 229 11.1 基础项目：制作“UI设计院”网站首页 / 229 11.1.1 对页面进行整体布局 / 230 11.1.2 制作页头和今日特讯部分 / 232 11.1.3 制作学员活动部分 / 235 11.1.4 制作新闻中心、热门活动和就业信息板块 / 239 11.1.5 制作页脚部分 / 247 11.2 知识库：浮动布局的原理及应用技巧 / 248 11.2.1 float属性 / 248 11.2.2 浮动布局的原理 / 249 11.2.3 浮动布局技巧 / 251 11.2.4 消除浮动布局带来的不良影响 / 253 11.3 提高项目：制作“学校网站新闻列表”网页 / 256 11.4 拓展项目：制作“咔嚓摄影网”网页 / 259 知识检测11 / 260 第12章 CSS定位布局 / 261 12.1 基础项目：制作“精品购物网”首页 / 261 12.1.1 对页面进行整体布局 / 262 12.1.2 制作主体内容区 / 265 12.1.3 制作侧边导航栏 / 272 12.2 知识库：定位的原理及应用技巧 / 274 12.2.1 CSS定位属性 / 274 12.2.2 相对定位 / 275 12.2.3 绝对定位 / 277 12.2.4 元素的堆叠顺序、溢出和剪裁 / 278 12.3 提高项目：制作“会当凌绝顶—小说投稿”网页 / 281 12.4 拓展项目：制作“创意照片墙”网页 / 285 知识检测12 / 286 应 用 篇 第13章 综合应用1——制作新大陆集团网站 / 288 13.1 制作网站首页 / 288 13.1.1 对网页进行整体布局 / 289 13.1.2 制作页头部分 / 291 13.1.3 制作banner部分 / 296 13.1.4 制作主体内容部分 / 300 13.1.5 制作页脚部分 / 317 13.2 制作网站一级链接页“合作与商机”页面 / 318 13.2.1 对网页进行整体布局 / 319 13.2.2 制作banner部分 / 321 13.2.3 制作主体内容部分 / 321 13.3 制作网站二级链接页—“软件公司”页面 / 328 13.3.1 对网页进行整体布局 / 329 13.3.2 制作主体内容右侧部分 / 331 第14章 综合应用2——制作麦宠物网站 / 334 14.1 制作网站首页 / 334 14.1.1 对网页进行整体布局 / 335 14.1.2 制作页头部分 / 337 14.1.3 制作banner部分 / 343 14.1.4 制作“本期星宠”板块 / 347 14.1.5 制作“萌宠每日推荐”板块 / 351 14.1.6 制作“更多萌宠推荐”板块 / 361 14.1.7 制作广告条板块 / 366 14.1.8 制作页脚板块 / 366 14.1.9 制作右侧固定导航栏板块 / 369 14.2 制作网站一级链接页“星宠趣事”页面 / 370 14.2.1 对网页进行整体布局 / 372 14.2.2 制作星宠banner板块 / 374 14.2.3 制作分类选项卡 / 375 14.2.4 制作“热门推荐”板块 / 376 14.2.5 制作“汪星人”、“喵星人”、“其他”三个板块的结构和样式 / 381 14.3 制作网站二级链接页“星宠趣事详情”页面 / 385 14.3.1 对网页进行整体布局 / 386 14.3.2 制作“趣事详情”板块 / 388 14.3.3 制作“Rexie的更多分享”板块 / 392 14.3.4 制作“右侧商品广告栏”板块 / 394