内容简介
本书以一个完整的网上商城网站的前端页面开发项目为载体，按照项目开发流程和学习者的认知规律，由浅入深、循序渐进地将HTML5+CSS3+JavaScript的理论知识和关键技术融入各个工作任务中。通过一个个具体任务的完成及最终整个项目的完整实现，读者能够快速掌握网站前端页面开发的相关理论知识和职业技能，能够独立设计开发各种商业网站。项目涉及的主要知识点和技能点包括：网站开发环境的选取和配置、常见标记和样式属性的使用、CSS和各种选择器的使用、DIV+CSS页面布局的用法、网格布局和弹性盒布局的使用、各类导航菜单的制作、表格及表单用法、HTML5的视频与音频插入、JavaScript轮播图的制作等。
展开全文
- A-fy
- 20385-bq
- c-qy
- 前言 PREFACE
- 一、落实立德树人的根本任务
- 二、引入产业新技术、新知识，以一个大项目贯穿全书
- 三、采用“项目+任务+实践”编写方法，便于读者学练结合
- 四、结合 “Web前端开发1+X职业技能等级证书”的考核内容，确保课证融合
- d-ml
- 目录 CONTENTS
- 01
- 项目1
- 认识网站和网页
- 【情境导入】
- 任务1-1 网站设计与开发起步
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、基本概念
- 1．网页和浏览器
- 2．网站
- 二、网页的标准化
- 1．结构标准
- 2．表现标准
- 3．行为标准
- 三、浏览器的开发者工具
- 【项目实践】
- 任务1-2 制作第一个网页
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、常用HTML编辑器
- 1．记事本
- 2．HBuilder X
- 3．Dreamweaver CS
- 4．Sublime Text
- 二、创建古诗词网页
- 1．在HBuilder X中制作最简单的页面
- 2．HTML5文档结构和基本语法
- 3．HTML的树形文档结构
- 【项目实践】
- 1．在记事本中完成
- 2．在HBuilder X中完成
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、思考题
- 02
- 项目2
- 网页的蓝图——简单布局
- 【情境导入】
- 任务2-1 使用CSS装饰网页
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、DIV+CSS网页布局
- 1．用DIV划分页面
- 2．用CSS定位
- 3．细分各个内容块
- 二、CSS
- 1．CSS简介
- 2．CSS的优点
- 3．CSS的使用
- 【项目实践】
- 任务2-2 巧用选择器调兵遣将
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、CSS选择器
- 二、基本选择器的用法
- 1．标记名选择器
- 2．类选择器
- 3．ID选择器
- 三、扩展选择器的用法
- 1．后代选择器
- 2．子代选择器
- 3．交集选择器
- 4．并集选择器
- 5．通用选择器
- 【项目实践】
- 任务2-3 使用盒模型划分页面
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、HTML元素的分类和转换
- 1．块级元素
- 2．行内元素
- 3．行内元素和块级元素的转换
- 二、块级元素的盒模型
- 1．盒子的宽度和高度
- 2．盒子的边框
- 3．盒子的内边距
- 4．盒子的外边距
- 5．盒子的背景
- 6．盒子的阴影效果
- 三、盒子的占位
- 1．默认模式：content-box
- 2．IE怪异模式：border-box
- 【项目实践】
- 任务2-4 使用BFC隔离空间
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、垂直外边距的合并
- 1．块级元素的垂直外边距合并
- 2．嵌套盒子的垂直外边距合并
- 二、BFC布局
- 1．BFC布局简介
- 2．创建BFC空间
- 3．使用BFC解决外边距合并问题
- 【项目实践】
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、思考题
- 03
- 项目3
- 网页的蓝图——复杂布局
- 【情境导入】
- 任务3-1 浮动布局两栏式页面
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、认识浮动
- 二、元素的浮动属性float
- 1．不设置浮动
- 2．设置浮动
- 三、清除浮动
- 四、盒子的高度塌陷及解决方法
- 1．使用空标记清除浮动
- 2．使用after伪对象清除浮动
- 3．使用BFC解决高度塌陷问题
- 【项目实践】
- 1．三栏式水平布局排版
- 2．清除浮动盒子的塌陷
- 任务3-2 DIV+CSS布局网上商城首页
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、布局的准备工作
- 二、通栏多列式布局效果及实现
- 【项目实践】
- 任务3-3 网格布局网上商城首页
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、认识CSS Grid网格布局
- 二、网格布局中对父元素的操作
- 1．设置网格容器
- 2．划分网格线
- 3．添加网格间距
- 4．设置子元素对齐
- 三、网格布局中对子元素的操作
- 1．子元素的对齐操作
- 2．子元素跨行跨列
- 【项目实践】
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、思考题
- 04
- 项目4
- 向网页中插入图像和文本
- 【情境导入】
- 任务4-1 网站首页中图像的应用
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、插入图像
- 1．src属性与图像路径
- 2．alt属性
- 3．其他可选属性
- 二、CSS图像样式
- 1．设置图片的宽高
- 2．设置图片的行内框
- 3．设置图片的垂直对齐方式
- 4．将图像转换为块级元素
- 【项目实践】
- 1．主体区域广告部分
- 2．3个广告位部分
- 任务4-2 网站首页中文本的应用
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、插入文本
- 1．块级文本标记
- 2．行内文本标记
- 3．其他标记
- 二、CSS字体和文本样式的应用
- 1．字体样式
- 2．文本样式
- 【项目实践】
- 1．图文页面排版
- 2．为网上商城首页的文字和图片排版
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 05
- 项目5
- 向网站首页添加导航
- 【情境导入】
- 任务5-1 页面中超链接的使用
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、认识超链接
- 二、创建超链接
- 1．href属性
- 2．target属性
- 3．title属性
- 三、超链接的具体应用
- 1．图片链接
- 2．邮件链接
- 3．下载链接
- 4．空链接
- 5．锚点链接
- 【项目实践】
- 任务5-2 一级导航菜单的设计开发
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、网站导航的样式及设计方法
- 1．水平导航菜单
- 2．垂直导航菜单
- 二、伪类控制超链接外观
- 1．伪类的定义
- 2．伪类在超链接中的应用
- 三、按钮式导航菜单的制作
- 【项目实践】
- 1．完成水平和垂直按钮式导航菜单
- 2．完成网上商城首页的顶端导航和主导航部分
- 任务5-3 二级弹出式菜单的定位
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、元素的定位
- 二、定位属性
- 1．定位方法
- 2．边偏移
- 3．层叠等级
- 三、定位具体用法
- 1．静态定位
- 2．相对定位
- 3．绝对定位
- 4．固定定位
- 【项目实践】
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、判断题
- 四、思考题
- 06
- 项目6
- 网页中列表的应用
- 【情境导入】
- 任务6-1 认识列表
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、列表的分类
- 1．无序列表
- 2．有序列表
- 3．定义列表
- 二、CSS控制列表样式
- 1．list-style-type样式属性
- 2．list-style-image属性
- 3．list-style-position属性
- 三、列表的应用
- 1．用列表展示数据
- 2．定义列表用于图文混排
- 3．使用列表制作导航菜单
- 【项目实践】
- 任务6-2 使用列表制作多级导航
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、列表的嵌套
- 二、多级导航菜单的制作
- 1．水平二级导航菜单的制作
- 2．竖直伸缩型二级菜单的制作
- 【项目实践】
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、思考题
- 07
- 项目7
- 使用弹性盒布局二级导航菜单
- 【情境导入】
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、认识弹性盒布局
- 二、弹性盒的内容
- 三、弹性盒的CSS样式属性
- 1．flex-direction属性
- 2．flex-wrap属性
- 3．flex-flow属性
- 4．justify-content属性
- 5．align-items属性
- 四、弹性子元素的属性
- 1．order
- 2．flex-grow
- 3．flex-shrink
- 4．flex-basis
- 5．flex
- 6．align-self
- 五、弹性盒的应用
- 1．垂直居中
- 2．多列等高
- 3．自适应列宽
- 【项目实践】
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、思考题
- 08
- 项目8
- 网页中表格元素的应用
- 【情境导入】
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、创建表格
- 1．创建表格的基本语法
- 2．表格的可选标记属性
- 二、CSS控制表格样式
- 1．CSS控制表格边框样式
- 2．CSS控制单元格间距
- 3．CSS控制单元格的宽高
- 三、表格的应用
- 1．展示数据
- 2．页面布局
- 【项目实践】
- 1．制作招聘网页
- 2．完成网上商城首页快捷工具的部分内容
- 【小结】
- 【习题】
- 一、选择题
- 二、思考题
- 09
- 项目9
- 网页中表单元素的应用
- 【情境导入】
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、表单的组成
- 1．表单域
- 2．表单控件
- 3．提示信息
- 二、创建表单
- 1．action属性
- 2．method属性
- 3．name属性
- 4．autocomplete属性
- 三、表单控件
- 1．input控件及其属性
- 2．其他表单控件
- 四、HTML5自带表单验证
- 1．input验证
- 2．其他验证
- 3．novalidate属性
- 五、表单样式的应用
- 1．表单中的常用选择器——属性选择器
- 2．注册登录表单的设计
- 3．使用伪类选择器对表单进行提示反馈
- 【项目实践】
- 1．制作搜索框部分
- 2．完成注册页面
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、思考题
- 10
- 项目10
- 向网页中插入视频和音频
- 【情境导入】
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、Web上的视频
- 1．video元素支持的视频格式
- 2．语法格式
- 二、Web上的音频
- 1．audio元素支持的音频格式
- 2．语法格式
- 3．source元素
- 【项目实践】
- 【小结】
- 【习题】
- 一、选择题
- 二、思考题
- 11
- 项目11
- 网站首页中的动态效果
- 【情境导入】
- 任务11-1 实现网站首页的轮播图
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、轮播图原理分析
- 二、搭建基本界面
- 1．HTML代码
- 2．CSS代码
- 三、实现轮播效果
- 1．JS脚本的书写格式
- 2．JS获取DOM元素
- 3．在JS中创建和访问数组
- 4．JS中的事件和函数
- 四、添加定时器自动轮播
- 1．定时器的用法
- 2．使用定时器控制轮播图片自动切换
- 【项目实践】
- 任务11-2 实现图片的滑动轮播
- 【任务提出】
- 【学习目标】
- 【相关知识】
- 一、滑动轮播图原理分析
- 二、搭建基本界面
- 1．HTML代码
- 2．CSS代码
- 三、轮播图中JS脚本的应用
- 1．确定图片序号
- 2．图片滑动
- 3．改变当前圆点的颜色
- 4．悬浮箭头
- 5．自动轮播
- 【项目实践】
- 【小结】
- 【习题】
- 一、填空题
- 二、选择题
- 三、思考题
展开全部
版权信息
出版社：人民邮电出版社
出版时间：2022
作者：主编
温馨提示：
1.本电子书已获得正版授权，由出版社通过知传链发行。
2.该电子书为虚拟物品，付费之后概不接收任何理由退款。电子书内容仅支持在线阅读，不支持下载。
3.您在本站购买的阅读使用权仅限于您本人阅读使用，您不得/不能给任何第三方使用，由此造成的一切相关后果本平台保留向您追偿索赔的权利！版权所有，后果自负！
得书感谢您对《Web前端开发项目教程（HTML5+CSS3+JavaScript）（微课版）》关注和支持，如本书内容有不良信息或侵权等情形的，请联系本网站。
出版时间：2022
作者：主编
温馨提示：
1.本电子书已获得正版授权，由出版社通过知传链发行。
2.该电子书为虚拟物品，付费之后概不接收任何理由退款。电子书内容仅支持在线阅读，不支持下载。
3.您在本站购买的阅读使用权仅限于您本人阅读使用，您不得/不能给任何第三方使用，由此造成的一切相关后果本平台保留向您追偿索赔的权利！版权所有，后果自负！
得书感谢您对《Web前端开发项目教程（HTML5+CSS3+JavaScript）（微课版）》关注和支持，如本书内容有不良信息或侵权等情形的，请联系本网站。
Web前端开发项目教程（HTML5+CSS3+JavaScript）（微课版）
免费读 (VIP)