精通DIV+CSS 3网页布局与样式PDF电子书下载

第1章 网页和网站制作流程 1

1.1认识网页 2

1.1.1网页和网站 2

1.1.2网页基本构成元素 2

1.2网页设计 3

1.2.1网页设计概述 4

1.2.2网页设计特点 4

1.2.3网页设计相关术语 6

1.3如何设计网页 7

1.3.1网页设计基本原则 7

1.3.2网页设计成功要素 8

1.3.3网页设计风格及色彩搭配 9

1.4网页设计师应具备的素质 10

1.4.1艺术素质 10

1.4.2技能素质 10

1.4.3综合素质 10

1.5网站制作流程 11

1.5.1前期策划 11

1.5.2页面细化及实施 11

1.5.3后期维护 11

1.6专家解惑 12

第2章 网页实现技术—HTML5 13

2.1 HTML5基本概念 14

2.1.1 HTML5简介 14

2.1.2 HTML5文件基本结构 15

2.1.3认识HTML5标记 16

2.2 HTML5基本元素 16

2.2.1 HTML5基本标记 17

2.2.2 HTML5实例：自我介绍 21

2.3 HTML5设置段落和图片 23

2.3.1 HTML5常用段落和图片标记 23

2.3.2 HTML5实例：文字和图片排版 24

2.4 HTML5设置表单 25

2.4.1 HTML5常用表单标记 25

2.4.2 HTML5新增表单元素和属性 29

2.4.3 HTML5实例：用户注册 32

2.5 HTML5设置表格 34

2.5.1 HTML5表格标记 34

2.5.2 HTML5实例：实现季度报表 35

2.6 HTML5文件编写方法 37

2.6.1使用记事本手工编写HTML5 37

2.6.2使用Dreamweaver CS5编写HTML文件 38

2.7 HTML5和浏览器 40

2.7.1各大浏览器与HTML5兼容 40

2.7.2新增HTML画布canvas 40

2.7.3新增HTML5音频audio 42

2.7.4新增HTML5视频video 43

2.8综合实例——网站首页 43

2.9专家解惑 46

第3章CSS3概述 47

3.1 CSS3介绍 48

3.1.1 CSS3功能 48

3.1.2 CSS3发展历史 48

3.1.3浏览器与CSS3 49

3.2编辑和浏览CSS 49

3.2.1 CSS基本语法 49

3.2.2手工编写CSS 50

3.2.3 Dreamweaver编写CSS 51

3.3在HTML5中使用CSS3的方法 52

3.3.1行内样式 53

3.3.2内嵌样式 53

3.3.3链接样式 55

3.3.4导入样式 56

3.3.5优先级问题 57

3.4综合实例——制作五彩标题 59

3.5专家解惑 62

第4章CSS3基础语法 63

4.1 CSS3选择器 64

4.1.1标签选择器 64

4.1.2类选择器 65

4.1.3 ID选择器 66

4.1.4全局选择器 68

4.1.5组合选择器 69

4.1.6继承选择器 70

4.1.7伪类 71

4.1.8属性选择器 72

4.1.9结构伪类选择器 74

4.1.10 UI元素状态伪类选择器 75

4.2选择器声明 76

4.2.1集体声明 76

4.2.2多重嵌套声明 77

4.3 CSS3常用单位 78

4.3.1颜色单位 78

4.3.2长度单位 81

4.4 CSS3继承 83

4.5综合实例——制作新闻菜单 84

4.6专家解惑 86

第5章CSS3字体与段落属性 88

5.1字体属性 89

5.1.1字体font-family 89

5.1.2字号font-size 90

5.1.3字体风格font-style 91

5.1.4加粗字体font-weight 92

5.1.5小写字母转为大写字母font-variant 93

5.1.6字体复合属性font 94

5.1.7字体颜色color 95

5.2文本高级样式 96

5.2.1阴影文本text-shadow 96

5.2.2溢出文本text-overflow 98

5.2.3控制换行word-wrap 99

5.2.4保持字体尺寸不变font-size-adjust 100

5.3段落属性 101

5.3.1单词间隔word-spacing 101

5.3.2字符间隔letter-spacing 102

5.3.3文字修饰text-decoration 103

5.3.4垂直对齐方式vertial-align 104

5.3.5文本转换text-transform 106

5.3.6水平对齐方式text-align 107

5.3.7文本缩进text-indent 108

5.3.8文本行高line-height 109

5.3.9处理空白white-space 110

5.3.10文本反排unicode-bidi和direction 111

5.4综合实例1——设置网页标题 113

5.5综合实例2——网页简单图文混排 114

5.6专家解惑 116

第6章CSS美化图片 117

6.1图片边框样式 118

6.1.1图片边框 118

6.1.2图片缩放 119

6.2对齐图片 121

6.2.1横向对齐方式 121

6.2.2纵向对齐方式 122

6.3图文混排 124

6.3.1文字环绕 124

6.3.2设置图片与文字间距 125

6.4综合实例1——一句话新闻 127

6.5综合实例2——学校宣传单 130

6.6专家解惑 132

第7章 背景与边框 134

7.1背景相关属性 135

7.1.1背景颜色 135

7.1.2背景图片 136

7.1.3背景图片重复 137

7.1.4背景图片显示 139

7.1.5背景图片位置 140

7.1.6背景图片大小 142

7.1.7背景显示区域 143

7.1.8背景图像裁剪区域 145

7.1.9背景复合属性 146

7.2边框 147

7.2.1边框样式 147

7.2.2边框颜色 149

7.2.3边框线宽 150

7.2.4边框复合属性 152

7.3圆角边框 152

7.3.1圆角边框属性 152

7.3.2指定两个圆角半径 153

7.3.3绘制4个不同圆角边框 154

7.3.4绘制边框种类 157

7.4图像边框 158

7.4.1图像边框属性 158

7.4.2设置图像边框显示方式 160

7.4.3图像边框重复性解析 162

7.5综合实例——简单的公司主页 163

7.6专家解惑 166

第8章CSS3美化超级链接和鼠标 168

8.1超级链接基本样式 169

8.1.1改变超级链接基本样式 169

8.1.2超级链接背景图设置 171

8.1.3超级链接按钮效果 172

8.2鼠标特效 173

8.2.1 CSS3控制鼠标箭头 174

8.2.2鼠标变幻超级链接 175

8.2.3页面滚动条 176

8.3综合实例1——图片超级链接 178

8.4综合实例2——制作实用工具栏 180

8.5综合实例3——鼠标特效 181

8.6专家解惑 184

第9章CSS3美化表格和表单样式 185

9.1表格基本样式 186

9.1.1表格边框样式 186

9.1.2表格边框宽度 188

9.1.3表格边框颜色 189

9.2 CSS3与表单 191

9.2.1美化表单中元素 191

9.2.2美化提交按钮 193

9.2.3美化下拉菜单 194

9.3综合实例I——隔行变色 196

9.4综合实例2——表格图文网页布局 198

9.5综合实例3——变色表格 200

9.6综合实例4——登录表单 204

9.7综合实例5——注册表单 206

9.8专家解惑 208

第10章CSS3制作实用菜单 209

10.1项目列表 210

10.1.1美化无序列表 210

10.1.2美化有序列表 212

10.1.3美化自定义列表 213

10.1.4图片列表 214

10.1.5列表缩进 216

10.1.6列表复合属性 217

10.2无序表格的菜单 218

10.3菜单的横竖转换 221

10.4综合实例1——段落模拟列表效果 223

10.5综合实例2——模拟soso导航栏 225

10.6专家解惑 228

第11章 应用CSS3滤镜 229

11.1滤镜概述 230

11.2 Alpha滤镜 231

11.3 BlendTrans滤镜 233

11.4 Blur滤镜 235

11.5 Chroma滤镜 236

11.6 DropShadow滤镜 237

11.7 FlipH滤镜 239

11.8 Glow滤镜 240

11.9 Gray滤镜 241

11.10 Invert滤镜 242

11.11 FlipV滤镜 242

11.12 Light滤镜 243

11.13 Mask滤镜 245

11.14 RevealTrans滤镜 246

11.15 Shadow滤镜 248

11.16 Wave滤镜 249

11.17 X-ray滤镜 250

11.18专家解惑 251

第12章 定位与布局 252

12.1定位方式 253

12.1.1定位属性 253

12.1.2 position定位 253

12.1.3层叠顺序z-index 257

12.1.4边偏移属性 259

12.2 float浮动定位 260

12.3 overflow溢出定位 262

12.4 visibility隐藏定位 264

12.5块和行内元素display 266

12.5.1块元素 266

12.5.2行内元素 268

12.6综合实例——定位布局新闻 269

12.7专家解惑 272

第13章CSS3盒子和DIV布局 273

13.1认识div层 274

13.1.1层在HTML布局应用 274

13.1.2 div和span区别 275

13.2盒子模型 276

13.2.1什么是盒子模型 276

13.2.2 border边框 277

13.2.3 padding内边距 278

13.2.4 margin外边距 280

13.3 CSS3新增弹性盒子模型 283

13.3.1盒子布局取向box-orient 284

13.3.2盒子布局顺序box-direction 285

13.3.3盒子布局位置box-ordinal-group 286

13.3.4盒子弹性空间box-flex 288

13.3.5管理盒子空间box-pack和box-align 290

13.3.6空间溢出管理box-lines 291

13.4综合实例1——图文排版效果 293

13.5综合实例2——淘宝导购菜单 295

13.6专家解惑 298

第14章DIV+CSS3页面基本排版 299

14.1 CSS3排版观念 300

14.1.1将页面用DIV分块 300

14.1.2设置各块位置 300

14.1.3用CSS定位 301

14.2固定宽度布局 304

14.2.1上中下版式 304

14.2.2左右版式 307

14.3自适应宽度布局 311

14.4其他页面排版 314

14.4.1浮动布局 314

14.4.2隐藏布局 317

14.5新增CSS3多列布局 319

14.5.1列宽度column-width 319

14.5.2列数column-count 321

14.5.3 列间距column-gap 322

14.5.4列边框样式column-rule 324

14.6综合实例1——模拟起点中文网布局 326

14.7综合实例2——电子企业首页 330

14.8综合实例3——汽车网站首页 334

14.9专家解惑 338

第15章DIV+CSS3布局实战 339

15.1 DIV布局优势 340

15.2综合实例1——家庭相册 340

15.3综合实例2——个人网站首页 344

15.4综合实例3——旅游网站首页 352

15.5专家解惑 357

第16章CSS3与JavaScript的搭配应用 358

16.1 JavaScript概述 359

16.1.1 JavaScript概念 359

16.1.2 JavaScript引用 359

16.1.3 JavaScript与CSS 360

16.2 JavaScript语法基础 361

16.2.1数据类型 361

16.2.2变量 362

16.2.3运算符 363

16.2.4流程控制语句 365

16.2.5函数 368

16.3综合实例1——打字效果的文字 371

16.4综合实例2——文字升降特效 373

16.5综合实例3——跑马灯效果 375

16.6综合实例4——闪烁图片 377

16.7综合实例5——左右移动的图片 378

16.8综合实例6——向上滚动的菜单 381

16.9综合实例7——跟随鼠标移动的图片 382

16.10综合实例8——树形菜单 384

16.11综合实例9——时钟特效 388

16.12综合实例10——颜色选择器 391

16.13专家解惑 393

第17章CSS3与XML的综合运用 394

17.1 XML语法基础 395

17.1.1 XML概念 395

17.1.2 XML文档组成和声明 396

17.1.3 XML元素介绍 398

17.2 CSS修饰XML文件 400

17.2.1 XML使用CSS 400

17.2.2设置字体属性 401

17.2.3设置色彩属性 402

17.2.4设置边框属性 403

17.2.5设置文本属性 404

17.3实例1：招聘广告 406

17.4实例2：书目清单 408

17.5实例3：图文混排页面 411

17.6实例4：古诗欣赏 413

17.7专家解惑 416

第18章 心灵深处的旋律——音乐网站 417

18.1构思布局 418

18.1.1设计分析 418

18.1.2排版架构 419

18.2模块分割 421

18.2.1页头部分 421

18.2.2左侧内容列表 423

18.2.3中间内容列表 425

18.2.4右侧内容列表 427

18.2.5页脚部分 428

18.3整体调整 429

18.3.1页面内容主体调整 429

18.3.2页面整体调整 430

18.4专家解惑 431

第19章 企业的门面——小型企业网站开发 432

19.1构思布局 433

19.1.1设计分析 433

19.1.2排版架构 433

19.2模块分割 435

19.2.1 Logo与导航菜单 435

19.2.2左侧文本介绍 437

19.2.3右侧导航链接 438

19.2.4版权信息 440

19.3整体调整 441

19.4专家解惑 442

第20章 似水年华——女性个人网站 443

20.1构思布局 444

20.1.1设计分析 444

20.1.2排版架构 444

20.2模块分割 446

20.2.1网站名称 446

20.2.2日志文章 447

20.2.3页面导航 448

20.2.4作者信息 450

20.3整体调整 451

20.4专家解惑 452

第21章 公司宣传有秘籍——时尚内衣网站 453

21.1构思布局 454

21.1.1设计分析 454

21.1.2排版架构 454

21.2模块分割 456

21.2.1页面导航和Logo图片 456

21.2.2新产品展示 458

21.2.3品牌形象和产品展示栏目 459

21.2.4内衣欣赏 461

21.2.5公司信息 462

21.3整体调整 463

21.4专家解惑 464

第22章 传承文化——文化宣传类网站 465

22.1构思布局 466

22.1.1设计分析 466

22.1.2排版架构 466

22.2模块分割 468

22.2.1页头部分 468

22.2.2左侧部分 469

22.2.3右侧部分 470

22.2.4中间部分 471

22.2.5页脚部分 473

22.3整体调整 474

22.4专家解惑 475