CSS+XHTML+JavaScript网页设计与布局从入门到精通PDF电子书下载

Chapter 1 Web标准与XHTML概述 1

1.1 Web标准的概述 1

1.1.1 Web标准的定义 1

1.1.2 Web标准的历史 1

1.2 Web标准的基本组成 2

1.2.1　结构标准语言 2

1.2.2　表现标准语言 3

1.2.3　行为标准语言 3

1.3 Web标准的优点 4

1.3.1 网页在多种设备上的可用性 4

1.3.2　实现网站开发与维护的低成本 4

1.3.3　节省大量带宽 4

1.3.4　网页解析速度大幅提高 4

1.4 XHTML基础 5

1.4.1　定义文档类型 5

1.4.2　什么是DTD 6

1.4.3　声明命名空间 6

1.5 XHTML语法规范 7

1.6 XHTML的元素分类 8

1.6.1　块级元素（display:block） 8

1.6.2 内联元素（display:inline） 9

1.6.3　列表项元素（display:list-item） 9

1.6.4　隐藏元素（display:none） 9

1.7 XHTML中常用的元素 9

1.7.1　布局元素 10

1.7.2　文本元素 11

1.7.3　列表元素 13

1.7.4　图像元素 15

1.7.5　表格元素 16

1.7.6　表单元素 17

1.7.7 a元素 18

Chapter 2 CSS基础 19

2.1 CSS布局和Table布局 19

2.1.1 为什么要用CSS布局 19

2.1.2 Table布局与CSS布局演示 19

2.2 CSS布局的初探 22

2.3　制作第一个XHTML+CSS页面 23

2.4　如何在网页中应用CSS定义 26

2.4.1 内嵌样式表 26

2.4.2 内部样式表 26

2.4.3　外部样式表 27

2.5 CSS语法 28

2.6　选择符详解 29

2.6.1　类型选择符 30

2.6.2 id选择符 30

2.6.3 class选择符 31

2.6.4　群组选择符 35

2.6.5　包含选择符 37

2.6.6　元素指定选择符 39

2.6.7　子对象选择符 40

2.6.8　通用选择符 41

2.6.9　伪类及伪对象 42

2.6.10　属性选择符 43

2.6.11　相邻选择符 54

2.7 CSS常用属性介绍 57

2.7.1　字体属性 57

2.7.2　文本属性 60

2.7.3　背景属性 61

2.7.4 内边距 62

2.7.5　外边距 62

2.7.6　边框属性 62

2.8 CSS常用数据单位 63

2.8.1　绝对单位 63

2.8.2　相对单位 63

2.8.3　颜色值 66

2.8.4 URL 67

2.9　样式优先权 68

2.9.1 写法上的优先级 68

2.9.2 id和class哪个优先权高 69

2.9.3　层叠样式定义 71

2.9.4 　！important语句改变优先权 72

2.10　样式的继承 74

2.11　权值相加 76

2.12　代码注释 77

Chapter 3 CSS代码优化与文档统筹 79

3.1 CSS文档分类 79

3.1.1　根据终端类型进行划分 80

3.1.2　根据功能分类进行划分 80

3.1.3　根据选择符类型进行划分 82

3.1.4　根据页面类型进行划分 82

3.2　选择符的命名 84

3.2.1　选择符命名规则 84

3.2.2 CSS命名建议 85

3.3　选择符的组织与管理 86

3.4　属性定义 87

3.5 CSS代码优化 88

3.5.1　利用默认值和继承进行优化 88

3.5.2　利用层叠和分组进行优化 88

3.5.3　利用公共类及类型选择符进行优化 89

3.6 CSS代码缩写 90

3.6.1 list-style属性 90

3.6.2 border属性 90

3.6.3　颜色值代码简写 91

3.7 CSS注释写法 91

Chapter 4 CSS调试与开发工具 92

4.1 Dreamweaver CS3 92

4.1.1　新建文档 92

4.1.2　代码提示功能 93

4.1.3 CSS面板 93

4.1.4 CSS可视化助理 98

4.1.5　属性面板 99

4.1.6　验证标记 99

4.1.7　浏览器兼容性检查 100

4.1.8 CSS视图辅助工具 101

4.2 Dreamweaver CS4 101

4.3　文本编辑器 103

Chapter 5 CSS布局与定位 105

5.1　盒模型 105

5.1.1　盒模型分析 105

5.1.2　盒模型的宽度和高度计算 106

5.2　边框 107

5.2.1　复合属性 107

5.2.2　定义边框样式的其他属性 108

5.2.3　定义边框的样式 109

5.2.4　边框颜色 109

5.3　内边距详解 111

5.4　外边距详解 112

5.4.1 margin属性 112

5.4.2　定义外边距的其他属性 113

5.4.3　自动居中 113

5.4.4　外边距取负值 114

5.4.5　外边距加倍 115

5.5　元素的水平间距 118

5.5.1　影响元素水平间距的属性 120

5.5.2　特殊情况下对元素水平间距的计算 121

5.6　元素垂直间距的特殊性 122

5.6.1　垂直相邻外边距重叠 122

5.6.2　垂直间距的计算公式 122

5.6.3　浮动元素垂直相邻外边距不重叠 124

5.6.4　上下两元素中只有一个浮动 127

5.6.5　空元素的外边距 130

5.7　元素的父子关系 132

5.8　什么是浮动 135

5.8.1　流动布局 135

5.8.2　浮动布局 138

5.8.3　浮动元素的位置 142

5.8.4 clear属性 145

5.9　定位布局 148

5.9.1　绝对定位 148

5.9.2　相对定位 151

5.9.3　元素层叠等级 153

5.10　布局应用技巧 157

5.10.1 内联元素的浮动 157

5.10.2　浮动元素嵌套 158

5.10.3　浮动元素嵌套于流动布局的元素 160

5.10.4　浮动与流动分左右两栏 163

5.11　常用基本布局类型 168

5.11.1　单行单列式固定宽度布局 168

5.11.2　单行单列式自适应宽度布局 169

5.11.3　单行双列式固定宽度布局 169

5.11.4　单行双列式自适应宽度布局 172

5.11.5　单行三列式固定宽度布局 175

5.11.6　单行三列式自适应宽度布局 177

5.11.7　多种布局类型的综合运用 180

5.11.8　在不改变结构代码的前提下切换布局类型 182

Chapter 6 CSS网页内容排版 185

6.1　文字排版 185

6.1.1　字体序列 185

6.1.2　字体大小 187

6.1.3　字体颜色 189

6.1.4　字体样式 190

6.1.5 font属性 196

6.2　段落样式 197

6.2.1　缩进 197

6.2.2　元素内容的对齐方式 200

6.2.3　字间距 203

6.2.4　首字下沉 206

6.2.5 first-line属性 207

6.2.6　行距和文本换行 208

6.2.7　网页内容分栏排版 219

6.3　流动方向控制 220

6.4　图文混排 227

6.4.1　图片浮动混入文字 227

6.4.2　图片与文字分离 232

6.4.3　添加图片说明 235

6.4.4　利用背景图像实现图文混排 236

6.4.5　不规则图文混排 244

6.5　列表 248

6.6　有关排版的其他属性 252

Chapter 7 CSS页面元件设计 255

7.1 网站导航 255

7.1.1　横向导航 255

7.1.2　滑动门技术 257

7.1.3　下拉菜单导航 258

7.1.4　利用JavaScript实现下拉菜单 262

7.1.5　纵向导航 265

7.2　表单设计 266

7.2.1 form元素 267

7.2.2 input控件 268

7.2.3 input元素的type属性定义 272

7.2.4 select元素 276

7.2.5 textarea元素 278

7.2.6 label元素 278

7.2.7　定义表单样式 278

7.3　圆角矩形设计 279

7.4　提示框 283

7.4.1　利用CSS实现提示框 283

7.4.2　利用JavaScript实现提示框 286

7.5　利用JavaScript实现换页效果 288

7.6　表格设计 291

7.6.1 表格定义 291

7.6.2　表格样式初步 293

7.6.3　垂直对齐 294

7.6.4　合并表格中相邻的边框 295

7.6.5　定义边框间距 296

7.6.6　表格的框架结构 299

Chapter 8 CSS滤镜详解 305

8.1　静态滤镜 305

8.1.1 Alpha滤镜 305

8.1.2 Blur滤镜 306

8.1.3 Basiclmage滤镜 308

8.1.4 DropShadow滤镜 309

8.1.5 Glow滤镜 310

8.1.6 Light滤镜 311

8.1.7 FlipH滤镜 314

8.1.8 FlipV滤镜 315

8.1.9 Invert滤镜 316

8.1.10 Xray滤镜 316

8.1.11 MotionBlur滤镜 317

8.1.12 Shadow滤镜 318

8.1.13 Wave滤镜 319

8.1.14 Alphalmageloader滤镜 321

8.1.15 Gradient滤镜 322

8.2　转换滤镜 323

8.2.1 Barn滤镜 323

8.2.2 Blinds滤镜 325

8.2.3 CheckerBoard滤镜 327

8.2.4 GradientWipe滤镜 329

8.2.5 Fade滤镜 330

8.2.6 Iris滤镜 332

8.2.7 Inset滤镜 333

8.2.8 Pixelate滤镜 334

8.2.9 RandomBars滤镜 336

8.2.10 RadialWipe滤镜 337

8.2.11 RevealTrans滤镜 339

8.2.12 RandomDissolve滤镜 341

8.2.13 Spiral滤镜 342

8.2.14 Slide滤镜 342

8.2.15 Strips滤镜 343

8.2.16 Stretch滤镜 344

8.2.17 Wheel滤镜 345

8.2.18 ZigZag滤镜 346

Chapter 9 CSS浏览器兼容性解决方案 348

9.1　浏览器 348

9.1.1 常用浏览器介绍 348

9.1.2　什么是基于IE内核的浏览器 350

9.2　什么是CSS Hack技术 351

9.2.1　如何使用Hack技术 351

9.2.2　样式表文件的应用 353

9.2.3　＠import导入样式表 354

9.2.4　利用目标设备类型进行过滤 355

9.2.5　利用IE条件注释过滤样式表文件 357

9.3　常用过滤器的使用 362

9.3.1　下画线过滤器 362

9.3.2　＋hack过滤器 364

9.3.3　转义符过滤器 366

9.3.4　＊html包含选择符 369

9.3.5 “属性选择符”和“子对象选择符”过滤器 371

9.3.6 “注释”过滤器 373

9.3.7　利用voice-family属性创建过滤器 380

9.3.8　 ！important关键字过滤器 382

9.3.9　相邻选择符过滤器 383

9.3.10　＃Element，［content］过滤器 385

9.3.11 html>/**/body #Element过滤器 386

9.4　盒模型方面的Hack技术 388

9.4.1　盒模型浮动时的双倍外边距Bug 388

9.4.2　盒模型宽度计算的Hack方法 390

9.4.3　在IE中出现的3像素问题 393

9.4.4 IE 6.0中的多余字符Bug 401

9.4.5 IE 6.0中的部分内容隐藏Bug 402

9.4.6　元素自适应高度问题 407

9.4.7 IE浏览器中的部分区域截断Bug 410

9.4.8 ul的问题 413

9.4.9 IE浏览器中的50％宽度Bug 416

9.5　关于IE 7.0的变化 418

9.6　浏览器中常用的默认样式 420

Chapter 10 JavaScript应用 424

10.1 JavaScript的特点 424

10.2 JavaScript基础 426

10.2.1　第一个JavaScript实例 426

10.2.2　JavaScript中的数据类型 426

10.2.3　JavaScript中的变量定义 429

10.2.4　JavaScript中变量的命名规则 429

10.3　表达式 430

10.4　操作符 431

10.4.1　算术运算符 431

10.4.2　赋值运算符 436

10.4.3　逻辑运算符 438

10.4.4　比较运算符 440

10.5　常用语句 445

10.5.1　条件判断语句 445

10.5.2　循环语句 449

10.6　函数 451

10.6.1　函数的定义 451

10.6.2　函数的返回值 453

10.6.3　JavaScript内置函数 454

10.7　对象 455

10.7.1　JavaScript浏览器对象 455

10.7.2　JavaScript内置对象 464

10.8 DOM模型 478

10.8.1 DOM模型中的结点 478

10.8.2　结点的分类 478

10.8.3 DOM的应用 479

10.9 JavaScript中的事件 481

10.9.1　浏览器事件 481

10.9.2　键盘事件 483

10.9.3　鼠标事件 484

10.10 JavaScript实例 486

10.10.1　通过getElementByld获取某一个对象的引用 486

10.10.2　直接通过id属性值获取某一个对象的引用 489

Chapter 11 个人博客网站布局 491

11.1 “博客”一词的来源 491

11.2　案例分析 493

11.3　案例实现——结构定义 493

11.3.1 网页主体结构 493

11.3.2　网页内容结构 493

11.3.3　创建网页左中右三栏的结构设计 493

11.3.4　创建顶部结构 494

11.3.5　创建左侧部分结构 494

11.3.6　创建中间部分结构 496

11.3.7　创建右侧部分结构 498

11.3.8　创建底部结构 499

11.4　案例实现——样式定义 499

11.4.1 main部分 499

11.4.2 top部分样式代码的定义 500

11.4.3　网站中间部分样式定义 501

11.4.4　左侧栏样式定义 502

11.4.5　中间栏样式定义 505

11.4.6　网页右侧栏部分样式定义 509

11.4.7　网页底部栏样式定义 510

11.5　案例总结 511

Chapter 12 中小型企业网站布局 512

12.1 案例分析 512

12.2　案例实现——整体框架定义 513

12.3　案例实现——网站顶部结构 514

12.4　案例实现——网站内容部分结构 514

12.5　案例实现——网站左侧栏结构定义 515

12.5.1 网页左侧栏顶部结构定义 516

12.5.2　网站左侧栏第二部分结构定义 517

12.6　案例实现——网页右侧栏结构定义 517

12.6.1 网页右侧栏第一部分结构定义 520

12.6.2　网页右侧栏第二部分结构定义 520

12.6.3　网页右侧栏第三部分结构定义 523

12.6.4　网页右侧栏第四部分结构定义 524

12.6.5　网页底部结构定义 524

12.7　案例实现——网页整体样式定义 525

12.7.1 main部分 528

12.7.2 top部分 529

12.7.3 top内部元素样式定义 529

12.7.4　菜单部分样式定义 530

12.8　案例实现——网页顶部Flash部分样式定义 533

12.9　案例实现——网页中间内容部分样式定义 533

12.9.1 网页左侧栏内部样式定义 535

12.9.2　网页左侧栏链接样式定义 537

12.10v案例实现——网页右侧栏样式定义 537

12.10.1 网页右侧栏第一部分样式定义 540

12.10.2　网页右侧栏第二部分样式定义 541

12.10.3　网页右侧栏第三部分样式定义 544

12.10.4　网页右侧栏第四部分样式定义 546

12.11 案例实现——网页底部样式定义 547

12.12　案例实现——多浏览器兼容性的问题 548

12.13　案例实现——网页换肤技术 548

12.14　案例总结 556

Chapter 13　化妆品网站 557

13.1 案例分析 557

13.2　案例实现——网站顶部 559

13.3　案例实现——网站内容部分 561

13.4　案例实现——网站底部 561

13.5　案例总结 562

Appendix A SEO搜索引擎优化 563

A.1 网站优化与搜索引擎优化 563

A.2　主机与搜索引擎优化 565

A.3　关键词与搜索引擎优化 565

A.4　网站动态页面的搜索引擎优化 566

A.5　网站级别（PageRank） 567

A.6 Alexa排名 567