基于WEB标准的网页设计与制作(微课版)

第1章网页设计与网站开发概述1
1.1网页设计与Web前端开发1
1.1.1网页的概念和本质1
1.1.2网页设计的两个基本问题2
1.1.3网页结构语言——HTML3
1.2网站的创建和制作流程4
1.2.1网站的特征5
1.2.2网站的开发步骤5
1.2.3网站的开发工具7
1.2.4在DW中建立站点8
1.3Web服务器与浏览器9
1.3.1Web服务器的作用9
1.3.2浏览器的种类和作用10
1.4URL与域名11
习题13
第2章HTML 514
2.1HTML概述14
2.1.1HTML文档的结构14
2.1.2DW的开发界面15
2.1.3使用DW新建HTML文件16
2.1.4HTML标记16
2.1.5常见的HTML标记及属性17
2.2创建文本和图像18
2.2.1创建文本和列表18
2.2.2插入图像20
2.3利用DW代码视图提高效率21
2.3.1代码提示21
2.3.2代码快速定位22
2.3.3DW中的常用快捷键22
2.4创建超链接23
2.4.1超链接标记23
2.4.2绝对URL与相对URL25
2.4.3超链接的种类27
2.4.4超链接目标的打开方式28
2.4.5超链接制作的原则28
2.4.6DW中超链接属性面板的使用29
2.5插入多媒体元素及嵌入网页29
2.5.1HTML 5的视音频功能29
2.5.2嵌入式框架标记31
2.6创建表格32
2.6.1表格标记32
2.6.2行和单元格标记34
2.6.3特殊效果表格的制作36
2.7创建表单38
2.7.1标记及其属性38
2.7.2标记40
2.7.3和标记43
2.7.4多行文本域标记43
2.7.5表单数据的传递过程44
2.7.6表单中的按钮45
2.7.7表单的辅助标记46
2.7.8HTML 5新增的表单标记和属性46
2.8HTML 5的改进50
2.8.1HTML 5新增的标记50
2.8.2HTML 5语法的改进51
2.8.3HTML 5的绘图功能52
2.8.4HTML元素的分类54
2.9HTML头部标记56
习题57
第3章CSS语法基础59
3.1CSS基础59
3.1.1CSS的语法59
3.1.2在HTML中引入CSS的方法60
3.1.3选择器的分类62
3.1.4CSS文本修饰64
3.2CSS的特性65
3.2.1CSS的层叠性65
3.2.2CSS的继承性67
3.2.3选择器的组合68
3.3CSS高级选择器71
3.3.1关系选择器72
3.3.2属性选择器73
3.3.3伪类选择器74
3.3.4使用过渡属性配合动态伪类效果77
3.3.5伪元素选择器80
3.4CSS设计和书写技巧82
3.4.1CSS样式总体设计原则82
3.4.2DW对CSS的可视化编辑支持83
3.4.3CSS的值和单位85
3.4.4网页中的字体86
3.4.5字体图标技术87
3.5Web标准89
3.5.1传统HTML的缺点89
3.5.2Web标准的含义90
3.5.3Web标准的优势92
习题92
第4章CSS盒子模型94
4.1盒子模型及其属性94
4.1.1盒子模型概述94
4.1.2边框border属性95
4.1.3圆角borderradius属性97
4.1.4图像边框borderimage属性99
4.1.5padding和margin属性100
4.1.6boxsizing属性102
4.2标准流下的定位及应用102
4.2.1标准流下的定位原则102
4.2.2margin合并现象104
4.2.3盒子模型的应用106
4.2.4Chrome浏览器的调试功能108
4.3背景的运用109
4.3.1CSS的背景属性109
4.3.2背景的基本运用技术112
4.3.3滑动门技术115
4.3.4背景图像的翻转119
4.3.5传统圆角效果120
4.4CSS 3样式美化功能121
4.4.1阴影和发光效果121
4.4.2渐变效果124
4.4.3描边效果127
4.4.4遮罩效果127
4.5变形与动画效果129
4.5.1平面变形效果129
4.5.23D变换效果132
4.5.3animation动画效果136
习题138
第5章CSS布局140
5.1浮动140
5.1.1盒子浮动后的特点140
5.1.2清除浮动元素的影响142
5.1.3清除浮动影响的方法143
5.2浮动的应用举例145
5.2.1图文混排及首字下沉145
5.2.2水平导航条147
5.2.3新闻栏目框147
5.2.4微博对话框150
5.3相对定位151
5.3.1定位属性和偏移属性151
5.3.2相对定位的特点151
5.3.3相对定位的应用152
5.4绝对定位和固定定位154
5.4.1绝对定位154
5.4.2绝对定位的应用156
5.4.3固定定位163
5.4.4与定位属性有关的CSS属性164
5.4.5overflow属性166
5.4.6verticalalign属性167
5.5CSS分栏布局168
5.5.1分栏布局的种类169
5.5.2网页居中的方法170
5.5.3131版式网页布局170
5.5.4121可变宽度布局173
5.5.5CSS两列布局案例176
5.5.6HTML 5文档结构标记180
5.5.7HTML 5网页布局案例181
5.6CSS 3新增的布局方式184
5.6.1弹性盒布局184
5.6.2分栏布局188
习题190
第6章网站开发过程与环境配置192
6.1网站开发的过程192
6.1.1基本任务和角色192
6.1.2网站开发过程的各环节194
6.2网站的风格与色彩设计198
6.2.1网站风格设计的基本原则198
6.2.2色彩的模式199
6.2.3色彩的特质与心理感觉201
6.2.4网页中色彩的角色205
6.2.5色彩的对比和调和206
6.2.6网页中色彩搭配的原则207
6.2.7网页版式设计208
6.3网站的环境准备211
6.3.1架设网站的基本条件212
6.3.2配置主机空间和域名212
6.3.3上传网站和网站备案213
习题213
第7章Photoshop215
7.1Photoshop基础215
7.1.1矢量图和位图的概念215
7.1.2认识Photoshop的界面216
7.1.3新建、打开和置入文件217
7.1.4修改图像和画布大小218
7.2编辑位图219
7.2.1图层及栅格化图层219
7.2.2创建和取消选区220
7.2.3图层的变换和透视222
7.3绘制矢量图形223
7.3.1创建矢量图形223
7.3.2微信图标的制作224
7.4编辑和修饰文本226
7.4.1文本编辑和修饰的过程227
7.4.2将文本附加到路径228
7.5蒙版229
7.5.1创建剪贴蒙版229
7.5.2创建位图蒙版231
7.6切片及导出233
7.6.1切片的作用233
7.6.2切片的基本操作234
7.6.3切片操作的案例235
习题238
第8章JavaScript及其框架240
8.1JavaScript的代码结构240
8.2JavaScript的事件编程242
8.2.1JavaScript语言基础242
8.2.2常用JavaScript事件242
8.2.3事件监听程序243
8.3JavaScript DOM编程245
8.3.1动态效果的实现245
8.3.2获取指定元素246
8.3.3访问元素的CSS属性247
8.3.4访问元素的内容248
8.4使用浏览器对象249
8.5jQuery基础252
8.5.1jQuery的功能和使用252
8.5.2jQuery中的“$”253
8.5.3jQuery对象与DOM对象256
8.5.4jQuery的选择器258
8.5.5jQuery的事件绑定259
8.5.6jQuery中的常用方法259
8.5.7jQuery应用举例260
8.6Vue基础263
8.6.1简单的Vue程序263
8.6.2Vue绑定数据实现动态效果265
8.6.3vif和vfor指令268
习题272
参考文献274