网页设计理论与实务（微课版）

第 1章　浏览器与网页基础　1
1.1　计算机网络与浏览器　1
1.1.1　计算机网络　1
1.1.2　TCP/IP　2
1.1.3　进制与IP地址　2
1.1.4　域名与域名服务器　4
1.1.5　URL　5
1.1.6　常用的浏览器　5
1.1.7　浏览器的工作原理　6
1.1.8　浏览器应用程序　7
1.2　网站与网页　8
1.2.1　网页的分类　9
1.2.2　网页的组成元素　10
1.2.3　网站的制作流程与网站空间　10
1.2.4　测试网页　12
1.2.5　发布网页　12
1.3　网页设计辅助软件　12
1.3.1　网页编辑软件　12
1.3.2　网页测试软件　13
1.3.3　IDE　13
1.4　构建第 一个网页　14
1.4.1　创建网页文件　14
1.4.2　网页编码与文件存储　14
1.4.3　测试网页效果　14
1.4.4　浏览器的渲染次序　15
1.4.5　浏览器与内存　15
1.5　实训案例　15
1.5.1　安装Firefox浏览器　15
1.5.2　安装Sublime Text 2　16
思考与练习　16
上机实验　17
第　2章 网页文本处理　18
2.1　结构标记　18
2.1.1　html标记　18
2.1.2　head标记　18
2.1.3　meta标记　19
2.1.4　控制网页编码　20
2.1.5　注释　21
2.1.6　body标记　21
2.1.7　进制与RGB颜色值　23
2.1.8　网页模板文件　23
2.2　文本样式标记与转义字符　24
2.2.1　font标记　24
2.2.2　物理样式标记与逻辑样式标记　25
2.2.3　转义字符　26
2.3　组织段落　27
2.3.1　p标记　27
2.3.2　div标记与span标记　28
2.3.3　标记间的包含关系　29
2.3.4　标题标记hn　29
2.3.5　br标记与nobr标记　30
2.3.6　hr标记　30
2.3.7　像素、分辨率与进制　30
2.3.8　align属性　31
2.3.9　空标记　31
2.3.10　W3C与HTML标准　31
2.4　列表　32
2.4.1　li标记与ol标记　32
2.4.2　ul标记　32
2.4.3　dl、dt和dd标记　33
2.5　其他标记　33
2.5.1　abbr标记　33
2.5.2　acronym标记　34
2.5.3　del与ins标记　34
2.5.4　标记的分类　35
2.6　实训案例　35
2.6.1　创建网页模板文件　35
2.6.2　使用网页模板文件　36
思考与练习　36
上机实验　38
第3章　常用的网页标记　39
3.1　网页文件路径　39
3.1.1　绝对路径　39
3.1.2　相对路径　40
3.2　链接　40
3.2.1　a标记　40
3.2.2　书签　42
3.2.3　base标记　42
3.3　图片　43
3.3.1　图片格式　43
3.3.2　img标记　44
3.3.3　map标记　44
3.3.4　map标记内的重叠区域处理　46
3.3.5　marquee标记　46
3.4　设计表格　48
3.4.1　table标记　48
3.4.2　行标记　48
3.4.3　单元格标记　49
3.4.4　基准线对齐　50
3.4.5　表格标题标记　50
3.4.6　合并行与列　51
3.5　设计表单　52
3.5.1　表单　52
3.5.2　输入控件　53
3.6　实训案例　56
3.6.1　调整图片尺寸　56
3.6.2　管理网页相关文件　57
思考与练习　57
上机实验　58
第4章　CSS基础　59
4.1　CSS概述　59
4.1.1　CSS的作用　59
4.1.2　CSS语法　60
4.1.3　CSS选择器　60
4.1.4　注释与添加CSS代码　62
4.1.5　在网页模板文件中添加CSS　62
4.1.6　样式的优先级　63
4.1.7　模式匹配　64
4.1.8　CSS属性的继承　66
4.2　CSS基本单位　67
4.2.1　长度单位　67
4.2.2　颜色单位　68
4.3　设置字体相关样式　68
4.3.1　设置字体　68
4.3.2　设置字号　69
4.3.3　设置字体样式　69
4.3.4　设置笔画粗细　70
4.3.5　设置小型的大写字母　71
4.3.6　设置行高　71
4.3.7　设置字体复合属性　71
4.4　设置文本样式　72
4.4.1　设置文本颜色　72
4.4.2　设置文本显示方向　72
4.4.3　设置字母间距　73
4.4.4　设置文本对齐方式　74
4.4.5　设置文本修饰方式　74
4.4.6　理解伪类定义次序　75
4.4.7　IE浏览器的工作模式　75
4.4.8　改进网页模板文件　76
4.4.9　设置文本缩进　76
4.4.10　转换字母大小写　77
4.4.11　设置单词间距　77
4.5　设置元素背景　78
4.5.1　设置背景图像固定　78
4.5.2　设置元素背景色　78
4.5.3　设置表格背景　79
4.5.4　设置背景图像的基本属性与起始位置　79
4.5.5　设置背景图像的重复方式　80
4.5.6　设置背景的复合属性　80
4.6　设置列表样式　80
4.6.1　设置列表项符号　81
4.6.2　设置列表项符号的位置　81
4.6.3　用图像替换列表项符号　82
4.6.4　设置列表的复合属性　82
4.7　实训案例　82
4.7.1　显示不同字体　82
4.7.2　调整字号　83
思考与练习　83
上机实验　85
第5章　CSS布局属性　86
5.1　标记的分类　86
5.1.1　行内元素与块元素　86
5.1.2　块元素与行内元素的互换　87
5.1.3　特殊的元素类型　87
5.2　设置元素尺寸　87
5.2.1　设置元素高度　87
5.2.2　设置元素宽度　88
5.2.3　伪元素　88
5.2.4　设置文本等宽　88
5.3　分类属性　90
5.3.1　设置元素类型　90
5.3.2　设置元素是否可见　90
5.3.3　设置元素浮动　91
5.3.4　清除浮动元素　92
5.3.5　设置鼠标指针　93
5.4　盒子模型　93
5.4.1　设置外边距　93
5.4.2　设置边框　94
5.4.3　设置填充　96
5.4.4　盒子模型的概念　97
5.4.5　消除浏览器的显示差异　97
5.5　设置表格样式　98
5.5.1　表格样式的5个属性　98
5.5.2　表格隔行变色与当前行提示　99
5.6　设置元素定位　101
5.6.1　设置外边距　101
5.6.2　设置垂直方向的对齐方式　101
5.6.3　设置元素堆叠顺序　102
5.6.4　设置元素定位类型　102
5.6.5　设置溢出处理　105
5.7　实训案例　105
5.7.1　模拟论坛页面　106
5.7.2　制作个人简历页面　106
思考与练习　106
上机实验　108
第6章　设计复杂的布局　109
6.1　设计桌面浏览器布局　109
6.1.1　迭代技术　109
6.1.2　引入占位div　110
6.1.3　设计三行一列桌面浏览器布局　111
6.1.4　设计一行三列桌面浏览器布局　112
6.1.5　第二次迭代一行三列桌面浏览器布局　113
6.1.6　第三次迭代一行三列桌面浏览器布局　115
6.1.7　设计三行三列桌面浏览器布局　116
6.1.8　完善上部横向菜单　117
6.1.9　第二次迭代上部横向菜单　118
6.1.10　迭代左侧竖向菜单　119
6.1.11　迭代下方版权信息　120
6.1.12　迭代中间内容　121
6.1.13　迭代右侧友情链接　122
6.1.14　第二次迭代三行三列桌面浏览器布局　123
6.1.15　第三次迭代上部横向菜单　124
6.1.16　选择网站色调　125
6.2　HTML5与CSS3　126
6.2.1　浏览器内核　126
6.2.2　初步了解HTML5　127
6.2.3　引入HTML5后的网页模板　128
6.2.4　CSS1到CSS3　128
6.2.5　定义圆角矩形　129
6.2.6　浅谈圆角矩形实现算法　129
6.2.7　CSS3盒子模型　130
6.2.8　HTML5新增的标记　131
6.3　flex布局基础　132
6.3.1　flex容器　133
6.3.2　flex项目　135
6.4　flex布局设计　136
6.4.1　设计三行一列flex布局　136
6.4.2　设计一行三列flex布局　137
6.4.3　设计三行三列flex布局　139
6.5　响应式网页布局　140
6.5.1　响应式网页　140
6.5.2　“@media”语法　140
6.5.3　制作响应式网页　141
6.6　实训案例　144
6.6.1　整体布局的对齐方式　144
6.6.2　响应式网页菜单项提示　144
思考与练习　145
上机实验　146
第7章　JavaScript基础　147
7.1　JavaScript语法基础　147
7.1.1　定义JavaScript代码　148
7.1.2　数据类型　148
7.1.3　常量　149
7.1.4　变量　150
7.1.5　值传递　150
7.1.6　关键字　151
7.2　分隔符　151
7.2.1　注释符　151
7.2.2　空白符　151
7.2.3　普通分隔符　151
7.3　表达式和运算符　152
7.3.1　算术运算符　152
7.3.2　关系运算符　153
7.3.3　逻辑运算符　153
7.3.4　位运算符　153
7.3.5　赋值运算符　155
7.3.6　运算符的优先级　156
7.4　流程控制　157
7.4.1　顺序流程　157
7.4.2　条件流程　157
7.4.3　函数　163
7.4.4　迭代学习方法　167
7.4.5　JavaScript调试技巧　168
7.4.6　常用的全局函数　169
7.4.7　循环流程　169
7.5　实训案例　175
7.5.1　显示基本数据类型　175
7.5.2　显示斐波那契数列　175
思考与练习　176
上机实验　177
第8章　基于对象的JavaScript编程　178
8.1　对象基础　178
8.1.1　类与对象　178
8.1.2　属性与方法　179
8.2　JavaScript中的常用类　179
8.2.1　Date类　179
8.2.2　Array类　180
8.2.3　String类　181
8.2.4　Math类　183
8.2.5　函数与高等数学　184
8.3　浏览器内置对象　184
8.3.1　窗口对象window　184
8.3.2　文档对象document　185
8.3.3　浏览器对象navigator　186
8.3.4　历史对象history　187
8.3.5　位置对象location　187
8.4　事件及其处理方法　187
8.4.1　onload　187
8.4.2　onunload　188
8.4.3　onmouseover　188
8.4.4　onmouseout　188
8.4.5　onfocus　188
8.4.6　onblur　189
8.4.7　onclick　189
8.4.8　onselect　189
8.4.9　onchange　189
8.5　操作DOM　190
8.5.1　操作DOM节点　191
8.5.2　制作实时数字时钟　192
8.5.3　实时显示在页面停留的时间　193
8.5.4　修改DOM节点的样式　194
8.5.5　校验表单　195
8.5.6　设计RGB颜色查看器　200
8.6　HTTP异步通信　201
8.6.1　XMLHttpRequest对象　201
8.6.2　JSON对象　203
8.6.3　获取天气信息　204
8.6.4　使用终端显示日志信息　205
8.7　兼容性设计　206
8.7.1　IE浏览器的条件注释　206
8.7.2　低版本IE浏览器兼容HTML5和CSS3　207
8.7.3　自动切换桌面浏览器布局与移动端浏览器布局　208
8.8　JavaScript框架简介　208
8.8.1　jQuery框架　209
8.8.2　Vue.js框架　209
8.8.3　Node.js框架　210
8.9　实训案例　210
8.9.1　提示文档加载完毕　210
8.9.2　提示文档加载进程　210
思考与练习　211
上机实验　212