HTML5+CSS3 WEB前端设计基础教程(第3版)(微课版)

第 1章
Web前端职业前景与重要理念　1
【本章导读】　1
【学习目标】　1
【素质目标】　1
【思维导图】　1
1.1　了解Web前端工程师　2
1.1.1　Web前端开发的必要知识与
发展前景　3
1.1.2　认识网页的构成元素　5
1.1.3　了解专业术语　7
1.2　重要理念——表现和结构相分离　8
1.2.1　体验“表现和结构相分离”　8
1.2.2　认识Web标准　9
1.3　Web前端开发基本流程　10
1.3.1　开发流程　10
1.3.2　常用开发软件介绍　12
1.4　职业道德与行为规范　13
1.5　使用记事本创建HTML5页面　14
1.6　课堂动手实践　15 第　2章
HTML5页面的构建与简单控制　16
【本章导读】　16
【学习目标】　16
【素质目标】　16
【思维导图】　16
2.1　Dreamweaver的工作环境概述　17
2.1.1　界面介绍　17
2.1.2　常用工具栏和面板　17
2.2　创建和管理站点　20
2.2.1　创建站点　20
2.2.2　“文件”面板的使用方法　21
2.2.3　管理站点　22
2.3　HBuilderX工作环境概述　23
2.3.1　HBuilderX的安装与启动　23
2.3.2　使用HBuilderX创建项目　24
2.3.3　安装扩展插件　25
2.4　HTML5入门　26
2.4.1　使用Dreamweaver构建
“H5标准页面”　26
2.4.2　DOCTYPE文档类型与基本
结构元素　27
2.4.3　HTML5常见元素　30
2.4.4　HTML5新增结构元素　38
2.5　课堂动手实践　39 第3章
CSS3基础入门　40
【本章导读】　40
【学习目标】　40
【素质目标】　40
【思维导图】　40
3.1　CSS3的基础知识　41
3.1.1　CSS介绍　41
3.1.2　CSS的语法与注释　42
3.1.3　CSS的引入方式　43
3.2　盒模型　47
3.2.1　盒模型的基本概念　47
3.2.2　计算盒模型中的宽与高　49
3.3　CSS3初级选择器　50
3.3.1　通配符选择器　50
3.3.2　类型选择器　51
3.3.3　类选择器　52
3.3.4　ID选择器　53
3.3.5　后代选择器　54
3.3.6　群组选择器　56
3.4　CSS3高级选择器　57
3.4.1　子元素选择器和相邻兄弟
选择器　57
3.4.2　属性选择器　58
3.4.3　关于优先级　59
3.5　使用CSS3基础知识完成页面简易
美化——404页面的制作　60
3.6　课堂动手实践　63 第4章
实现Web前端排版的基本美化　65
【本章导读】　65
【学习目标】　65
【素质目标】　65
【思维导图】　65
4.1　控制文本　66
4.1.1　CSS中字体属性与文本属性
介绍　66
4.1.2　Web Font与@font-face　71
4.1.3　文本的首行缩进、行高和
阴影　73
4.1.4　文本溢出处理　75
4.2　控制超链接　76
4.2.1　文本链接、邮件链接与锚
链接　76
4.2.2　CSS伪类与超链接　78
4.3　控制图像和颜色　80
4.3.1　CSS中控制图像和颜色的
基本属性　80
4.3.2　图文混排　84
4.4　课堂动手实践　90 第5章
浮动、定位与列表　91
【本章导读】　91
【学习目标】　91
【素质目标】　91
【思维导图】　91
5.1　浮动与清除浮动　92
5.1.1　浮动　92
5.1.2　清除浮动的3种方法　94
5.2　CSS定位　96
5.2.1　静态定位和固定定位　97
5.2.2　相对定位和绝对定位　99
5.2.3　相对于某一容器的绝对
定位　101
5.3　列表　102
5.3.1　有关列表的CSS样式　102
5.3.2　纵向导航　104
5.3.3　简易横向导航　108
5.3.4　复杂横向导航（含Logo与
二级菜单）　110
5.4　图文信息列表　114
5.5　课堂动手实践　119 第6章
HTML5增强型表单与简易
表格　121
【本章导读】　121
【学习目标】　121
【素质目标】　121
【思维导图】　121
6.1　表单的创建与编辑　122
6.1.1　表单的基本知识　122
6.1.2　常见的表单对象　123
6.2　CSS控制表单　129
6.2.1　搜索栏　129
6.2.2　用户登录页面　131
6.2.3　传统按钮、CSS3按钮与
开源样式库按钮　135
6.3　表格　138
6.3.1　表格的基本概念及其简易
操作　138
6.3.2　细线表格　141
6.3.3　隔行换色表格　142
6.4　课堂动手实践　144 第7章
CSS3与HTML5的高级
应用　146
【本章导读】　146
【学习目标】　146
【素质目标】　146
【思维导图】　146
7.1　CSS Sprite技术　147
7.1.1　CSS Sprite技术分解　147
7.1.2　CSS Sprite技术的应用　148
7.2　CSS3渐变　151
7.3　CSS3动画　152
7.3.1　变形——transform属性　153
7.3.2　过渡——transition属性　154
7.3.3　CSS3动画的应用——
“幽灵按钮”　155
7.4　CSS3选项卡　159
7.5　HTML5 Canvas　163
7.5.1　创建画布并绘制简单图形　163
7.5.2　Canvas坐标系统、线条与
圆形　164
7.6　课堂动手实践　166 第8章
PC端典型页面的设计与实现　167
【本章导读】　167
【学习目标】　167
【素质目标】　167
【思维导图】　167
8.1　Photoshop在Web前端的常见
操作　168
8.1.1　基础操作　168
8.1.2　切片并输出　170
8.2　页面布局规划与实现　171
8.2.1　首页的实现　171
8.2.2　列表页的实现　179
8.2.3　内容页的实现　183
8.3　课堂动手实践　185 第9章
多设备响应式页面的实现　186
【本章导读】　186
【学习目标】　186
【素质目标】　186
【思维导图】　186
9.1　响应式页面开发　187
9.1.1　了解响应式Web设计　187
9.1.2　viewport网页可视区域　187
9.1.3　媒体查询详解　190
9.2　响应式页面的设计与实现　193
9.2.1　页面分析　193
9.2.2　详细实施过程　195
9.3　响应式框架介绍　200
9.4　课堂动手实践　201 第　10章
使用Bootstrap框架创建
页面　202
【本章导读】　202
【学习目标】　202
【素质目标】　202
【思维导图】　202
10.1　Bootstrap框架　203
10.1.1　Bootstrap框架的环境
　配置　203
10.1.2　Bootstrap栅格系统　204
10.1.3　Bootstrap表格　207
10.1.4　Bootstrap表单　208
10.1.5　Bootstrap图片　209
10.1.6　Bootstrap导航栏　211
10.2　使用Bootstrap框架搭建简单
　页面　213
10.2.1　页面结构分析　213
10.2.2　页面搭建过程　214
10.3　课堂动手实践　216 第　11章
Web　App类页面的设计与
实现　217
【本章导读】　217
【学习目标】　217
【素质目标】　217
【思维导图】　217
11.1　Web App开发基础知识　218
11.1.1　开发模式概述　218
11.1.2　手机屏幕基本知识　219
11.2　Swiper插件　220
11.3　Web App页面分析与环境准备　222
11.3.1　页面分析　222
11.3.2　环境准备　223
11.4　页面实现的详细过程　224
11.4.1　首页的实现　224
11.4.2　列表页的实现　231
11.4.3　详细内容页的实现　234
11.5　课堂动手实践　236