HTML5+CSS3+BOOTSTRAP响应式WEB前端设计(慕课版)(第2版)

第　1章 网站初识　1

1.1　网页构成　1

1.2　理论基础　2

1.2.1　基本概念　2

1.2.2　Web工作原理　5

1.3　开发框架　5

1.3.1　常用开发技术　5

1.3.2　Bootstrap　6

1.3.3　Vue.js　6

1.3.4　React.js　6

1.3.5　Node.js　7

1.4　常用开发工具　7

1.4.1　Sublime Text　7

1.4.2　EditPlus　8

1.4.3　Dreamweaver　8

1.5　网站发布　8

1.5.1　IIS简介　8

1.5.2　网站发布　8

1.5.3　IIS的配置及网站发布　9

项目一　创建网页及发布-李白简介　13

扩展阅读　媒介素养及媒介素养教育　15

习题　17

一、简答题　17

二、选择题　18

三、讨论题　18

第　2章 HTML标签　19

2.1　HTML概述　19

2.1.1　HTML的概念　19

2.1.2　HTML的兴衰　20

2.1.3　浏览器内核　21

2.1.4　W3C标准　22

2.2　文档结构　22

2.2.1　HTML5文档结构与书写规范　22

2.2.2　和标签　24

2.3　基本标签　26

2.3.1　块级元素　26

2.3.2　内联元素　29

2.3.3　特殊字符　31

2.4　多媒体　32

2.4.1　图像标签　32

2.4.2　多媒体格式　33

2.4.3　多媒体嵌入标签　34

2.4.4　视频标签　35

2.4.5　音频标签　36

2.5　超链接　37

2.5.1　超链接标签　37

2.5.2　超链接类型　37

2.5.3　超链接路径　38

2.5.4　内部书签　38

2.5.5　target属性　40

2.6　表格　40

2.6.1　表格标签　40

2.6.2　表格属性　41

2.6.3　表格嵌套和布局　42

2.7　其他标签　43

2.7.1　marquee　44

2.7.2　iframe　45

2.7.3　div和span　45

2.7.4　语义元素　47

2.8　表单　50

2.8.1　表单定义标签　50

2.8.2　输入标签　50

2.8.3　列表框标签　56

2.8.4　文本域输入标签　57

项目二　李白代表作品页面（1）-块级、行内元素　57

项目三　李白代表作品页面（2）-超链接、多媒体、表格和框架　61

项目四　古诗词调查问卷（1）-表单　65

项目五　李白个人生平（1）-HTML标记综合练习　66

扩展阅读　媒介素养之信息检索　69

习题　72

一、选择题　72

二、讨论题　73

三、拓展题　74

第3章　CSS常用属性　75

3.1　CSS概述　75

3.1.1　CSS发展历史　75

3.1.2　CSS的优势　75

3.2　CSS的创建　76

3.2.1　标记文档　77

3.2.2　编写规则　78

3.2.3　附加方式　79

3.3　基本选择器　80

3.4　字体属性及继承　82

3.4.1　字体属性　82

3.4.2　继承　84

3.5　文本属性　87

3.6　颜色与背景　91

3.6.1　颜色　91

3.6.2　背景　93

3.6.3　渐变　98

3.7　表格、列表及边框　100

3.7.1　表格样式　101

3.7.2　列表样式　102

3.7.3　边框　103

3.8　display　108

3.8.1　隐藏元素　108

3.8.2　改变元素显示　109

3.9　复杂选择器　110

3.9.1　层次选择器　110

3.9.2　属性选择器　112

3.9.3　伪类选择器　114

3.10　优先级　118

3.10.1　优先级特性　118

3.10.2　层叠　120

项目六　杜甫个人成就页面（1）　122

项目七　李白代表作品页面（3）-表格、边框、复杂选择器　125

扩展阅读：媒介素养之视觉素养（一）　127

习题　129

一、选择题　129

二、讨论题　130

三、读代码写出运行结果　131

四．拓展题　132

第4章　盒模型与网页布局　133

4.1　盒模型　133

4.1.1　元素框的组成　133

4.1.2　内容　134

4.1.3　内边距　136

4.1.4　外边距　136

4.2　浮动与定位　137

4.2.1　浮动与清除浮动　138

4.2.2　定位　140

4.2.3　层叠顺序　143

4.3　布局　144

4.3.1　液态布局　144

4.3.2　固定布局　146

4.3.3　flex布局　147

4.3.4　常见布局案例　154

项目八　古诗词调查问卷（2）　156

项目九　李白个人生平（2）　157

项目十　杜甫个人成就页面（1）　162

扩展阅读　媒介素养之视觉素养（二）　164

习题　165

一、选择题　165

二、讨论题　166

三、拓展题　166

第5章　CSS特效　168

5.1　滤镜　168

5.2　过渡　171

5.3　动画　173

5.4　转换　176

5.4.1　2D转换　177

5.4.2　3D转换　179

项目十一　首页　181

扩展阅读　媒介素养之技术素养　188

习题　190

一、选择题　191

二、讨论题　191

三、拓展题　192

第6章　响应式设计及Bootstrap框架　193

6.1　响应式网页设计概述　193

6.1.1　必要性　193

6.1.2　定义　193

6.1.3　视口　194

6.1.4　响应式布局　195

6.1.5　设计案例　197

6.2　媒体查询　197

6.2.1　媒体介质　197

6.2.2　媒体查询语法　197

6.2.3　常用引用方式　199

6.3　Bootstrap框架概述　201

6.3.1　Bootstrap基础　201

6.3.2　创建第 一个 Bootstrap 页面　203

6.3.3　Bootstrap网格系统　204

6.4　Bootstrap样式　208

6.4.1　文字排版　208

6.4.2　颜色　209

6.4.3　表格　210

6.4.4　图片　212

6.4.5　表单　213

6.4.6　表单控件　214

6.4.7　按钮　215

6.5　组件　217

6.5.1　导航栏　218

6.5.2　下拉菜单　221

6.5.3　输入框组　222

6.5.4　模态框　226

6.5.5　轮播　227

项目十二　杜甫作品问卷　230

项目十三　白居易代表作品　236

项目十四　白居易个人生平　245

扩展阅读：媒介素养之数据素养　246

习题　248

一、选择题　248

二、编程题　250

第7章　网站建设流程　251

7.1　明确网站定位　251

7.2　确定网站主题　251

7.3　网站结构规划　252

7.3.1　栏目版块规划　252

7.3.2　目录结构规划　253

7.3.3　链接结构规划　253

7.3.4　布局设计规划　254

7.4　收集网站内容　257

7.5　网站设计原则　258

7.6　网站发布　259

项目十五　网站整合　259

扩展阅读　媒介素养之智媒素养　262

习题　264