Div+CSS+jQuery布局精粹PDF电子书下载

第1章 网页和网站的基础知识 1

1.1 认识网页 1

1.1.1 网页和网站 1

1.1.2 网页类型 2

1.1.3 网页的基本构成 3

1.2 网页设计 4

1.2.1 网页设计概述 4

1.2.2 网页设计原则 5

1.2.3 网页设计相关术语 7

1.2.4 常见网页类型 11

1.3 网页布局 13

1.3.1 表格布局 13

1.3.2 表格布局的特点 14

1.3.3 冗余的嵌套表格和混乱的结构 14

1.3.4 表格布局的优缺点 15

1.3.5 Div+CSS布局 15

1.3.6 Div+CSS布局的特点 15

1.3.7 Div+CSS布局的优缺点 15

1.4 网页版式设计 16

1.4.1 网页版式设计的特点 16

1.4.2 页面尺寸 16

1.4.3 整体造型 17

1.4.4 网页布局方法 17

1.4.5 网页设计的构图方法 17

1.4.6 版式设计的视觉流程 18

1.5 了解Web标准 19

1.5.1 Web标准的基础概念 19

1.5.2 认识W3C 19

1.5.3 W3C发布的标准 19

1.5.4 网页标准化的好处 21

1.6 网站开发流程 22

1.7 专家支招 22

1.7.1 确定域名注意事项 22

1.7.2 常用网页编辑软件 22

1.8 总结扩展 23

1.8.1 本章小结 23

1.8.2 举一反三——制作简单的HTML页面 23

第2章 HTML、XHTML和HTML5基础 25

2.1 HTML基础 25

2.1.1 HTML概述 25

2.1.2 HTML文件的基本结构 26

2.1.3 HTML能做什么 27

2.1.4 HTML的基本语法 27

2.2 HTML标签 28

2.2.1 基本标签 28

2.2.2 格式标签 29

2.2.3 文本标签 30

2.2.4 超链接标签 31

2.2.5 图像标签 31

2.2.6 表格标签和表单标签 32

2.2.7 分区标签 32

2.3 HTML基础 33

2.3.1 XHTML概述 33

2.3.2 XHTML的页面结构 33

2.3.3 XHTML代码规范 34

2.3.4 3种不同的XHTML文档类型 37

2.4 HTML和XHTML 38

2.4.1 HTML和XHTML的区别 38

2.4.2 使用XHTML的优点 38

2.4.3 HTML转化成XHTML的方法 38

实例：制作简单的HTML页面 38

2.5 HTML 5基础 40

2.5.1 HTML5概述 40

2.5.2 HTML5的简化操作 40

2.5.3 HTML5标签 41

2.5.4 HTML5标准属性 44

2.5.5 HTML5事件属性 44

2.6 HTML5的设计目的 46

2.6.1 ＜video＞标签 46

实例：在网页中嵌入视频 46

2.6.2 ＜audio＞标签 48

实例：在网页中嵌入音频 48

2.6.3 ＜canvas＞标签 50

2.7 专家支招 50

2.7.1 在＜body＞标签中如何设置网页的字体和大小 50

2.7.2 网页中默认的超链接文字效果是什么样的 50

2.8 总结扩展 50

2.8.1 本章小结 50

2.8.2 举一反三——在网页中实现绘图效果 50

第3章 CSS样式基础 52

3.1 CSS概述 52

3.1.1 CSS的发展历史 52

3.1.2 CSS的特点 53

3.1.3 CSS样式的功能 53

3.1.4 CSS样式的局限性 54

3.2 CSS语法 55

3.2.1 CSS的基本语法 55

3.2.2 CSS规则 56

3.3 CSS选择器 56

3.3.1 通配选择器 57

实例：太空冒险网页制作 57

3.3.2 标签选择器 58

3.3.3 类选择器 59

实例：万圣节网页制作 59

3.3.4 ID选择器 61

3.3.5 群选择器 62

3.3.6 派生选择器 63

实例：运动鞋网页制作 63

3.3.7 伪类选择器 65

3.4 CSS 3中新增的选择器 66

3.4.1 结构伪类选择器 66

3.4.2 UI元素状态伪类选择器 67

3.4.3 属性选择器 67

3.5 在网页中应用CSS样式 68

3.5.1 在HTML中插入样式表的方法 68

3.5.2 内联样式 68

3.5.3 嵌入样式表 69

实例：为网页添加内部CSS样式 69

3.5.4 链接外部样式 71

实例：链接外部CSS样式文件 71

3.5.5 导入样式 74

3.6 CSS文档结构 74

3.6.1 结构 75

3.6.2 继承性 75

3.6.3 特殊性 76

3.6.4 层叠性 77

3.6.5 重要性 77

3.7 单位和值 78

3.7.1 颜色值 78

3.7.2 绝对单位 79

3.7.3 相对单位 80

3.8 专家支招 80

3.8.1 CSS和HTML的区别 80

3.8.2 导入CSS样式与链接CSS样式的区别 80

3.9 总结扩展 80

3.9.1 本章小结 80

3.9.2 举一反三——在网页中实现绘图效果 81

第4章 Div+CSS布局入门 82

4.1 定义Div 82

4.1.1 什么是Div 82

4.1.2 插入Div 83

4.1.3 Div的嵌套和固定格式 84

4.2 可视化盒模型 85

4.2.1 盒模型 85

4.2.2 content（内容） 87

4.2.3 padding（填充） 87

实例：设置元素到元素的边界距离 87

4.2.4 border（边框） 89

实例：为图片添加边框 89

4.2.5 margin（边界） 90

实例：调整网页LOGO位置 91

4.3 常见的布局方式 92

4.3.1 居中布局设计 92

4.3.2 浮动布局 94

4.3.3 自适应高度 98

4.4 CSS布局定位 99

4.4.1 position属性 99

4.4.2 相对定位 100

实例：图像叠加 100

4.4.3 绝对定位 102

4.4.4 固定定位 102

实例：制作固定不动的导航条 102

4.4.5 浮动定位 104

4.4.6 空白边叠加 104

4.5 流体网格布局 104

4.6 专家支招 105

4.6.1 CSS3中有关盒模型的新增属性 105

4.6.2 什么是id 105

4.7 总结扩展 105

4.7.1 本章小结 106

4.7.2 举一反三——空白边叠加在网页中的应用 106

第5章 使用CSS控制背景和图片 107

5.1 背景控制概述 107

5.1.1 背景控制原则 107

5.1.2 背景控制属性 108

5.2 背景颜色控制 108

5.2.1 设置背景颜色 108

5.2.2 设置块背景颜色 109

5.3 背景图像控制 110

5.3.1 设置背景图像 110

实例：为网页设置背景图像 110

5.3.2 背景图像的重复方式 112

实例：设置背景图像的重复方式 112

5.3.3 背景图像的定位 114

5.3.4 背景图像的固定 114

5.4 图片样式概述 115

5.4.1 图像边框 115

实例：为网页中的图片设置边框 116

5.4.2 图片缩放 117

5.4.3 图片水平对齐 119

5.4.4 图片垂直对齐 120

5.5 网页中的图文混排 121

5.5.1 使用CSS样式实现文本环绕效果 121

5.5.2 设置文本绕图间距 122

5.6 专家支招 123

5.6.1 网页中插入的图像可以不设置宽度和高度吗 123

5.6.2 background-color属性可以使用哪些值 123

5.7 总结扩展 124

5.7.1 本章小结 124

5.7.2 举一反三——网页图片垂直对齐 124

第6章 CSS控制页面中的文本 125

6.1 文本排版概述 125

6.1.1 文本排版原则 125

6.1.2 文本控制属性 125

6.2 CSS文本样式 126

6.2.1 字体 126

6.2.2 大小 127

6.2.3 颜色 129

实例：为网页中的文字设置样式 129

6.2.4 粗细 132

6.2.5 样式 133

6.2.6 英文字母大小写 133

6.2.7 修饰 133

实例：设置英文大小写并修饰文字 134

6.3 CSS段落样式 137

6.3.1 字间距 137

6.3.2 行间距 137

6.3.3 首字下沉 138

6.3.4 首行缩进 138

实例：为网页中段落文字设置不同样式 138

6.3.5 段落水平对齐 141

6.3.6 段落垂直对齐 141

6.4 CSS样式的功能及冲突 142

6.4.1 使用CSS对Flash中的文字进行控制 142

6.4.2 CSS样式冲突 142

6.5 专家支招 143

6.5.1 CSS样式中的两端对齐有什么作用范围 143

6.5.2 为什么有些情况应用的文本段落垂直对齐不起作用 143

6.6 总结扩展 143

6.6.1 本章小结 143

6.6.2 举一反三——网页中文字水平居中对齐 143

第7章 使用CSS样式控制列表 145

7.1 列表控制概述 145

7.2 列表样式控制 146

7.2.1 无序列表 146

7.2.2 有序列表 146

7.2.3 自定义列表符号 147

实例：制作网站列表 147

7.2.4 定义列表 149

7.2.5 更改列表项目样式 150

7.3 使用列表制作菜单栏 151

7.3.1 使用CSS样式创建横向导航菜单 151

实例：制作游戏网站导航 151

7.3.2 使用CSS样式创建竖向导航菜单 152

实例：制作购物网站导航 153

7.4 CSS3中新增的内容和不透明度属性 154

7.4.1 内容（content） 154

7.4.2 不透明度（opacity） 155

实例：内容和不透明度属性的应用 155

7.5 专家支招 157

7.5.1 如何不通过CSS样式更改项目列表前的符号效果 157

7.5.2 网页中文本分行与分段有什么区别 157

7.6 总结扩展 157

7.6.1 本章小结 157

7.6.2 举一反三——更改部分项目列表符号 158

第8章 使用CSS控制表格及表单样式 159

8.1 表格及表单的设计概述 159

8.1.1 表格的设计 159

8.1.2 表单的设计及分类 160

8.2 使用CSS控制表格样式 163

8.2.1 表格标签与结构 163

8.2.2 设置表格边框 164

8.2.3 设置表格背景 165

实例：设置表格边框及背景 165

8.2.4 设置斑马式表格 168

实例：设置斑马式表格 168

8.2.5 设置交互式表格 170

8.3 表单的设计 171

8.3.1 表单 171

8.3.2 表单元素 172

8.4 表单输入 172

8.4.1 文本域和密码域 173

8.4.2 文件域和隐藏域 174

8.4.3 单选按钮和复选框 174

8.4.4 按钮和图像域 176

8.4.5 菜单列表 177

8.5 使用CSS样式控制表单元素 178

8.5.1 使用CSS样式控制表单元素的背景 178

实例：制作网站的登录页面 178

8.5.2 使用CSS样式控制列表与跳转菜单 182

8.5.3 使用CSS样式定义圆角文本字段 183

8.6 表单在网页中的特殊应用 185

8.6.1 聚焦型提示语消失 185

实例：制作文字字段提示语效果 185

8.6.2 输入型提示语消失 189

8.7 专家支招 190

8.7.1 为什么需要使用CSS对表格数据进行控制 190

8.7.2 在表单域中插入图像域的作用 190

8.8 总结扩展 190

8.8.1 本章小结 191

8.8.2 举一反三——美化登录框 191

第9章 使用CSS控制超链接 192

9.1 了解网页超链接 192

9.1.1 超链接的定义 192

9.1.2 超链接的对象 193

9.1.3 超链接的路径 194

9.1.4 合理安排超链接 196

9.2 超链接的属性控制 197

9.2.1 a：link 197

9.2.2 a：active 198

9.2.3 a：hover 198

9.2.4 a：visited 199

实例：制作网页文字超链接 200

9.2.5 超链接的5种打开方式 203

9.3 超链接特效 203

9.3.1 按钮式超链接 203

实例：制作按钮式超链接 204

9.3.2 浮雕式超链接 206

9.4 使用CSS实现鼠标特效 207

9.5 超链接在网页中的特殊应用 208

9.5.1 使用CSS实现倾斜导航菜单 209

实例：制作网站的倾斜导航菜单 209

9.5.2 使用CSS实现动感超链接 211

9.6 专家支招 213

9.6.1 实现动感导航菜单的原理 213

9.6.2 如何识别网页中的超链接 213

9.7 总结扩展 214

9.7.1 本章小结 214

9.7.2 举一反三——使用CSS控制鼠标箭头 214

第10章 应用CSS3中的滤镜 215

10.1 CSS3新增滤镜 215

10.1.1 grayscale滤镜 215

10.1.2 sepia滤镜 217

实例：使用sepia滤镜 217

10.1.3 opacity滤镜 219

10.1.4 blur滤镜 221

10.1.5 saturate滤镜 222

实例：使用saturate滤镜 222

10.1.6 hue-rotate滤镜 224

10.1.7 invert滤镜 226

实例：使用invert滤镜 226

10.1.8 drop-shadow滤镜 228

10.1.9 brightness滤镜 229

10.1.10 contrast滤镜 231

10.2 专家支招 231

10.2.1 IE滤镜与W3C滤镜的区别 231

10.2.2 IE滤镜包括哪些 231

10.3 总结扩展 232

10.3.1 本章小结 232

10.3.2 举一反三——调整图像的对比度 232

第11章 CSS3新增属性 234

11.1 CSS3中新增的文字属性 234

11.1.1 文字阴影text-shadow 234

11.1.2 文字溢出处理text-overflow 235

11.1.3 控制文本换行word-wrap 237

实例：控制文本换行 237

11.2 CSS 3中新增的背景属性 239

11.2.1 背景图像大小background-size 239

实例：控制背景图像大小 239

11.2.2 背景位置定位background-origin 241

11.2.3 背景图像裁剪区域background-clip 242

11.3 CSS3中新增的边框属性 244

11.3.1 图像边框border-image 244

11.3.2 圆角边框border-radius 245

11.3.3 多重边框颜色border-colors 246

实例：为图像添加多种色彩边框 246

11.4 CSS3中新增的多列布局属性 248

11.4.1 列宽度 248

11.4.2 新增多列设置属性 249

实例：多列属性的设置 250

11.5 CSS3中有关用户界面的新增属性 252

11.5.1 box-sizing 252

11.5.2 区域缩放调节resize 253

11.5.3 轮廓外边框outline 254

11.5.4 导航序列号nav-index 254

11.6 CSS3中其他模块新增属性 255

11.6.1 ＠media 255

11.6.2 加载服务器端字体＠font-face 256

11.6.3 阅读器speech 257

11.7 专家支招 258

11.7.1 除了Chrome浏览器外，还有哪些浏览器支持column属性 258

11.7.2 目前常用的浏览器都是以什么为内核引擎 258

11.8 总结扩展 258

11.8.1 本章小结 258

11.8.2 举一反三——为图片添加轮廓 259

第12章 jQuery在网页中的应用 260

12.1 认识JavaScript 260

12.1.1 了解JavaScript 260

12.1.2 JavaScript的特点 261

12.1.3 CSS样式与JavaScfipt 261

12.2 JavaScript与jQuery 262

12.2.1 关于jQuery 262

12.2.2 jQuery的安装 262

12.2.3 jQuery语法 263

12.2.4 jQuery选择器 263

12.2.5 jQuery事件 265

12.3 在Dreamweaver CC中使用jQuiery 266

实例：制作一个简单的检索页面 266

12.4 jQuery效果 267

12.4.1 使用jQuery实现网页全屏大图切换效果 268

实例：全屏大图切换效果 268

12.4.2 使用jQuery实现图像横向滚动效果 271

实例：图像横向滚动效果 271

12.5 专家支招 278

12.5.1 在Dreamweaver中为网页元素添加jQuery效果 278

12.5.2 Dreamweaver中内置jQuery能够实现的效果 278

12.6 总结扩展 279

12.6.1 本章小结 279

12.6.2 举一反三——使用jQuery制作选项卡 279

第13章 jQuery Mobile与jQuery UI的应用 280

13.1 认识jQuery Mobile 280

13.1.1 jQuery Mobile的优点 280

13.1.2 jQuery Mobile的操作流程 281

13.2 使用Dreamweaver创建jQuery Mobile页面 281

实例：设计制作手机网站页面 282

13.3 iQuery Mobile事件 288

13.3.1 触摸事件 288

13.3.2 滚动事件 289

13.3.3 方向事件 289

13.3.4 页面事件 290

13.4 jQuery UI 291

13.4.1 jQuery UI的构成 291

13.4.2 jQuery UI的特性 291

13.4.3 jQuery UI的下载 292

13.4.4 jQuery UI的使用 292

实例：制作折叠式作品展示栏目 294

13.5 专家支招 298

13.5.1 在Dreamweaver CC中可以插入的jQueryMobile对象 298

13.5.2 jQuery与jQuery UI的区别 298

13.6 总结扩展 298

13.6.1 本章小结 298

13.6.2 举一反三——制作选项卡式新闻列表 299

第14章 Div+CSS布局综合案例 300

14.1 综合实例——制作音乐类网站 300

实例：音乐类网站——顶部 300

实例：音乐类网站——中部 308

实例：音乐类网站——主体 314

实例：音乐类网站——底部 320

14.2 专家支招 323

14.2.1 网页中文本字号的使用规范 323

14.2.2 iframe标签的作用 324

14.3 本章小结 324