Web前端开发项目教程(HTML5+CSS3+JavaScript)(微课版) [正版]Web前端开发项目教程(HTML

        店铺公告

  为保障消费者合理购买需求及公平交易机会，避免因非生活消费目的的购买货囤积商品，抬价转售等违法行为发生，店铺有权对异常订单不发货且不进行赔付。异常订单：包括但不限于相同用户ID批量下单，同一用户（指不同用户ID，存在相同/临近/虚构收货地址，或相同联系号码，收件人，同账户付款人等情形的）批量下单（一次性大于5本），以及其他非消费目的的交易订单。

温馨提示：请务必当着快递员面开箱验货，如发现破损，请立即拍照拒收，如验货有问题请及时联系在线客服处理，（如开箱验货时发现破损，所产生运费由我司承担，一经签收即为货物完好，如果您未开箱验货，一切损失就需要由买家承担，所以请买家一定要仔细验货）。

  关于退货运费：对于下单后且物流已发货货品在途的状态下，原则上均不接受退货申请，如顾客原因退货需要承担来回运费，如因产品质量问题（非破损问题）可在签收后，联系在线客服。

 

 

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

项目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
二、CSS　19
【项目实践】　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
二、元素的浮动属性float　58
三、清除浮动　60
四、盒子的高度塌陷及解决方法　61
【项目实践】　64
任务3-2 DIV+CSS布局网上商城
首页　66
【任务提出】　66
【学习目标】　66
【相关知识】　67
一、布局的准备工作　67
二、通栏多列式布局效果及实现　67
【项目实践】　70
任务3-3 网格布局网上商城首页　71
【任务提出】　71
【学习目标】　71
【相关知识】　72
一、认识CSS Grid网格布局　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
【项目实践】　184
【小结】　186
【习题】　186
项目9　网页中表单元素的应用　187
【情境导入】　187
【任务提出】　187
【学习目标】　187
【相关知识】　188
一、表单的组成　188
二、创建表单　188
三、表单控件　190
四、HTML5自带表单验证　197
五、表单样式的应用　198
【项目实践】　202
【小结】　203
【习题】　203
项目10　向网页中插入视频和音频　205
【情境导入】　205
【任务提出】　205
【学习目标】　205
【相关知识】　206
一、Web上的视频　206
二、Web上的音频　210
【项目实践】　212
【小结】　213
【习题】　213
项目11　网站首页中的动态效果　214
【情境导入】　214
任务11-1 实现网站首页的
轮播图　214
【任务提出】　214
【学习目标】　214
【相关知识】　215
一、轮播图原理分析　215
二、搭建基本界面　215
三、实现轮播效果　216
四、添加定时器自动轮播　220
【项目实践】　223
任务11-2 实现图片的滑动
轮播　224
【任务提出】　224
【学习目标】　224
【相关知识】　225
一、滑动轮播图原理分析　225
二、搭建基本界面　225
三、轮播图中JS脚本的应用　228
【项目实践】　231
【小结】　234
【习题】　234

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

1