Web前端开发项目教程 HTML5+CSS3+JavaScript 微课版

山东省职业教育精品资源共享课程配套教材 校企合作，以网上商城大项目贯穿全书 按照完整网站前端页面的开发过程组织教学内容 课证融通，吸纳Web前端开发工程师职业标准所要求的知识技能 立德树人，自然融入思政元素

本书以一个完整的网上商城网站的前端页面开发项目为载体，按照项目开发流程和学习者的认知规律，由浅入深、循序渐进地将HTML5、CSS3、JavaScript的理论知识和关键技术融入各个工作任务中。通过一个个具体任务的完成及最终整个项目的完整实现，读者能够快速掌握网站前端页面开发相关的理论知识和职业技能，能够独立设计开发各种商业网站。
项目涉及的主要知识点和技能点包括：网站开发环境的选取和配置、常见标记和样式属性的使用、CSS和各种选择器的使用、DIV+CSS页面布局的用法、网格布局和弹性盒布局的使用、各类导航菜单的制作、表格及表单用法、HTML5的视频与音频插入、JavaScript轮播图的制作等。
本书既可作为高职高专院校或应用型本科院校相关专业网站设计与开发课程的教材或教学参考书，也可作为“Web前端1+X职业技能等级证书”考试的辅助用书，还可供广大计算机从业者和爱好者学习和参考。

刘锡冬，教授，山东商业职业技术学院云计算技术与应用产业学院教师。多年来一直从事高职软件技术专业课教学和研究工作，讲授课程包括HTML5网站设计与开发、响应式网站开发、动态网站开发、Java程序设计、MySQL数据库应用等。

项目1认识网站和网页1
【情境导入】1
任务1-1网站设计与开发起步1
【任务提出】1
【学习目标】1
【相关知识】1
一、基本概念2
二、网页的标准化3
三、浏览器的开发者工具5
【项目实践】5
任务1-2制作第一个网页6
【任务提出】6
【学习目标】6
【相关知识】6
一、常用HTML编辑器6
二、创建古诗词网页8
【项目实践】14
【小结】16
【习题】16
项目2网页的蓝图——简单布局18
【情境导入】18
任务2-1使用CSS装饰网页18
【任务提出】18
【学习目标】18
【相关知识】19
一、DIV+CSS网页布局19
二、CSS19
【项目实践】25
任务2-2巧用选择器调兵遣将25
【任务提出】25
【学习目标】25
【相关知识】25
一、CSS选择器25
二、基本选择器的用法26
三、扩展选择器的用法29
【项目实践】32
任务2-3使用盒模型划分页面34
【任务提出】34
【学习目标】34
【相关知识】34
一、HTML元素的分类和转换34
二、块级元素的盒模型36
三、盒子的占位44
【项目实践】46
任务2-4使用BFC隔离空间47
【任务提出】47
【学习目标】48
【相关知识】48
一、垂直外边距的合并48
二、BFC布局49
【项目实践】51
【小结】52
【习题】52
项目3网页的蓝图——复杂布局56
【情境导入】56
任务3-1浮动布局两栏式页面56
【任务提出】56
【学习目标】56
【相关知识】57
一、认识浮动57
二、元素的浮动属性float58
三、清除浮动60
四、盒子的高度塌陷及解决方法61
【项目实践】64
任务3-2DIV+CSS布局网上商城
首页66
【任务提出】66
【学习目标】66
【相关知识】67
一、布局的准备工作67
二、通栏多列式布局效果及实现67
【项目实践】70
任务3-3网格布局网上商城首页71
【任务提出】71
【学习目标】71
【相关知识】72
一、认识CSSGrid网格布局72
二、网格布局中对父元素的操作73
三、网格布局中对子元素的操作77
【项目实践】79
【小结】80
【习题】80
项目4向网页中插入图像和文本83
【情境导入】83
任务4-1网站首页中图像的应用83
【任务提出】83
【学习目标】83
【相关知识】83
一、插入图像84
二、CSS图像样式85
【项目实践】91
任务4-2网站首页中文本的应用92
【任务提出】92
【学习目标】92
【相关知识】93
一、插入文本93
二、CSS字体和文本样式的应用96
【项目实践】101
【小结】104
【习题】104
项目5向网站首页添加导航106
【情境导入】106
任务5-1页面中超链接的使用106
【任务提出】106
【学习目标】106
【相关知识】106
一、认识超链接106
二、创建超链接107
三、超链接的具体应用108
【项目实践】111
任务5-2一级导航菜单的设计
开发112
【任务提出】112
【学习目标】112
【相关知识】112
一、网站导航的样式及设计方法113
二、伪类控制超链接外观114
三、按钮式导航菜单的制作116
【项目实践】118
任务5-3二级弹出式菜单的定位121
【任务提出】121
【学习目标】122
【相关知识】122
一、元素的定位122
二、定位属性123
三、定位具体用法123
【项目实践】129
【小结】132
【习题】132
项目6网页中列表的应用135
【情境导入】135
任务6-1认识列表135
【任务提出】135
【学习目标】135
【相关知识】136
一、列表的分类136
二、CSS控制列表样式139
三、列表的应用142
【项目实践】145
任务6-2使用列表制作多级导航147
【任务提出】147
【学习目标】147
【相关知识】148
一、列表的嵌套148
二、多级导航菜单的制作149
【项目实践】153
【小结】155
【习题】155
项目7使用弹性盒布局二级导航菜单157
【情境导入】157
【任务提出】157
【学习目标】157
【相关知识】158
一、认识弹性盒布局158
二、弹性盒的内容158
三、弹性盒的CSS样式属性159
四、弹性子元素的属性165
五、弹性盒的应用167
【项目实践】170
【小结】172
【习题】172
项目8网页中表格元素的应用173
【情境导入】173
【任务提出】173
【学习目标】173
【相关知识】174
一、创建表格174
二、CSS控制表格样式178
三、表格的应用181
……