Adobe Dreamweaver官方认证标准教材

第1章 互动网页设计背景知识

1.1 什么是网页设计 2

1.1.1 网页设计的具体定义 2

1.1.2 网站搭建的3个层面 3

1.1.3 从单向到双向，再到多向沟通机制的发展 3

1.1.4 网站的类型和特点 4

1.2 网页交互设计发展简史 5

1.2.1 互联网络的诞生 5

1.2.2 20世纪90 年代初期：纯文本网页 6

1.2.3 20世纪90 年代中期：基于Table表格的排版设计兴起 7

1.2.4 20世纪90 年代后期：Flash 技术的崛起 8

1.2.5 21世纪千禧年：CSS 的盛行 9

1.2.6 21世纪00 年代初期：JavaScript异军突起 11

1.2.7 21世纪00 年代中期：语义型网页概念的诞生 12

1.2.8 21世纪00 年代后期：Web2.0 时代的来临 12

1.2.9 当今：移动终端网页的风靡 14

1.3 网页设计总则 15

1.3.1 以用户为中心的设计 15

1.3.2 形式与功能的平衡 16

1.3.3 网页的执行效率 17

1.3.4 标准与创新的相互作用与影响 18

1.4 视觉设计主要原则 18

1.4.1 主次！主次！还是主次！ 19

1.4.2 平衡 19

1.4.3 对齐 21

1.4.4 对比 22

1.4.5 重复 23

1.5 当前流行的网页设计方法和软件 23

1.5.1 概念原型设计 24

1.5.2 界面设计 24

1.5.3 客户端互动网页设计 26

1.5.4 服务器端相关程序语言 27

第2章 从平面设计到网页设计28

2.1 Keepwalk 教学网站切图设计实例 29

2.1.1 根据内容结构和功能分区规划页面 29

2.1.2 根据图层自动产生切片 32

2.1.3 用户自定义切片 33

2.1.4 解决切片干扰混乱问题 34

2.1.5 组合与拆分切片 35

2.1.6 切片属性和类型设定 37

2.1.7 根据情况输出图片格式 39

2.2 从Photoshop 跨越到Dreamweaver的其他方法 41

2.2.1 在Dreamweaver 中直接置入PSD 文档 41

2.2.2 从Photoshop 中复制粘贴到Dreamweaver 45

2.3 扩展知识——详解适合网页的几种图片格式 46

2.3.1 GIF 图片和GIF 动画 46

2.3.2 JPEG 图片 47

2.3.3 PNG 图片 47

第3章 新闻网页设计实例48

3.1 设计效果预览 49

3.2 从架设站点开始 50

3.2.1 新建和修改站点 50

3.2.2 上传和更新站点 51

3.3 页面结构设计 57

3.3.1 如何插入图片 58

3.3.2 HTML 基础知识 60

3.3.3 如何导入文本 62

3.3.4 如何设置标题文本 62

3.3.5 如何用区域标记环绕特殊文本 63

3.3.6 如何应用编号列表 65

3.3.7 如何应用符号列表 66

3.3.8 如何创建超链接 67

3.4 页面样式设计 69

3.4.1 CSS 入门 70

3.4.2 如何创建和应用外部CSS 文档 70

3.4.3 CSS 基础语法 72

3.4.4 使用“标记”选择符 73

3.4.5 使用“id”选择符 76

3.4.6 使用“class”类选择符 78

3.4.7 使用“伪标记”选择符 79

3.4.8 群组选择符的应用 80

3.4.9 关联选择符的应用 82

3.5 扩展知识——其他常用关联选择符 86

3.5.1 “限定子”关联选择符 86

3.5.2 “隔代”关联选择符 86

3.6 扩展知识——HTML 如何同时应用多个CSS 类 87

3.7 扩展知识——CSS 样式列表的继承和层叠 88

3.7.1 关于继承 88

3.7.2 关于层叠 89

3.8 扩展知识——HTML5 标记 89

第4章 明苑画廊作品展示设计实例91

4.1 设计效果预览 92

4.2 盒子对象的概念和应用 92

4.2.1 从盒子对象的概念开始 93

4.2.2 盒子对象的设计与应用 94

4.3 文档流浮动排版 vs 坐标系定位排版 103

4.3.1 两种定位排版的理念与四类定位方式 103

4.3.2 absolute 绝对方式定位的应用范例 104

4.3.3 fixed 固定方式定位的应用范例 108

4.4 JavaScript 互动图片展示制作 109

4.4.1 交换图像互动制作 109

4.4.2 显示或隐藏元素互动制作 111

4.5 扩展知识——图片间隙的解决方法 114

4.5.1 图片源代码不折行、无空格方法去除间隙 115

4.5.2 图片父级“font-size: 0px;”方法去除间隙 116

4.5.3 垂直堆叠图片“display: block;”方法去除间隙 116

4.5.4 水平图片“float”浮动方法去除间隙 117

4.6 扩展知识——优先权权重计算方法 117

第5章 Keepwalk 教学网站排版实例121

5.1 设计效果预览 122

5.2 HTML 文档的构成 122

5.2.1 DTD 文档标准的定义 124

5.2.2 关于 标记 125

5.2.3 字符编码的定义 126

5.2.4 文档流的概念 126

5.3 页面框架结构设计 127

5.4 block 和inline 对象 138

5.5 float 浮动和clear 清除浮动 139

5.6 块类型对象浮动排版 141

5.7 扩展知识——使用CSS 样式制作互动翻转按钮效果 168

5.8 扩展知识——使用模板提高效率 177

5.8.1 创建空白模板 180

5.8.2 根据已有设计创建模板 180

5.8.3 创建可编辑区域 182

5.8.4 对已有内容页面应用模板 183

5.8.5 对新页面应用模板 184

5.8.6 更新模板 188

5.8.7 令属性可编辑 189

5.8.8 从模板中分离 190

5.9 扩展知识——使用库提高效率 191

5.9.1 如何创建库对象 191

5.9.2 将库对象插入页面中 196

5.9.3 编辑和更新库对象 197

5.9.4 分离库对象 198

第6章 通过CSS 实现网页动画200

6.1 什么是CSS Animations（CSS 动画） 201

6.2 什么是Transition（过渡） 201

6.2.1 Transition 动画基础 202

6.2.2 进阶Transition 属性 205

6.2.3 Transition 属性的其他写法 210

6.3 Transform（变换）动画 213

6.3.1 基于二维的translate 变换动画 213

6.3.2 基于三维的translate 变换动画 217

6.4 基于transition 和transform 的按钮动效案例 220

6.5 基于keyframes 的动画与应用 227

6.5.1 keyframes 的基础设置 227

6.5.2 keyframes 的进阶设置 229

6.5.3 关键帧动画的动画模式 230

6.5.4 关键帧动画的迭代计数属性 231

6.5.5 为关键帧创建缓动特效 232

6.5.6 动画播放方向属性 232

6.5.7 动画属性的简写方式 233

6.6 基于keyframes 的按钮动效案例 233

6.7 扩展知识——Animate.css 动画库的应用 238