HTML5+CSS+JavaScript深入学习实录

第1章　设计的灵魂源于灵感 1

1.1 成为一名出色的网页设计师 1

1.2 认识网页和网站 2

1.2.1 网页 2

1.2.2 网站 3

1.3 制作网页和网站的那些事 4

1.3.1 网站制作流程 4

1.3.2 网页设计流程 5

1.3.3 发布站点 5

1.4 Web标准布局介绍 5

1.4.1 看当前的Web开发标 6

1.4.2 为什么使用Web标准 6

1.4.3 CSS布局标准 7

1.5 网页制作工具面面观 8

1.5.1 几种可视化工具 8

1.5.2 安装Dreamweaver 10

1.6 谈HTML和JavaScript的必要性 13

1.7 灵感是设计师的设计之源 13

第2章　网页设计三剑客 15

2.1 三剑客之——体现身材的HTML 15

2.1.1 HTML概述 15

2.1.2 HTML的特点 16

2.1.3 看HTML的身材如何 16

2.2 三剑客之——会化妆的CSS 16

2.2.1 CSS概述 17

2.2.2 CSS的特点 17

2.2.3 CSS的好处 18

2.3 三剑客之——JavaScript是美的升华 18

2.3.1 JavaScript概述 18

2.3.2 JavaScript基本概念 18

2.3.3 JavaScript的作用 19

2.4 一个典型页面文件实例 20

第3章　网页的记号 23

3.1 为网页设计发型——设置网页头部元素 23

3.1.1 设置文档类型 23

3.1.2 设置编码类型 26

3.1.3 设置页面标题 28

3.2 其他头部元素 30

3.2.1 命名空间 30

3.2.2 meta标记 31

3.2.3 关键词 31

3.2.4 网页描述 31

3.3 设置页面正文 34

3.4 注释是一种说明 36

第4章　你不一定了解的文字和段落 40

4.1 标题文字 40

4.2 文本文字 42

4.2.1 文本文字标记 43

4.2.2 字型设置 44

4.3 段落标记 46

4.4 换行标记 48

4.5 插入水平线 48

4.6 特殊符号处理 51

第5章　看超链接的跳跃 56

5.1 链接概述 56

5.1.1 锚链 56

5.1.2 URL引用 57

5.2 建立内部链接 57

5.3 建立外部链接 60

5.4 使用Telnet链接 63

5.5 创建E-mail链接 64

5.6 创建FTP链接 66

5.7 其他形式的链接 68

5.7.1 新闻组链接 69

5.7.2 WAIS链接 69

第6章　图片是修饰网页的最佳途径 71

6.1 常用的图片格式介绍 71

6.1.1 GIF格式 71

6.1.2 JPEG格式 72

6.2 设置背景图片 73

6.3 插入图片 75

6.3.1 图片的基本处理 76

6.3.2 图片布局处理 77

6.4 设置图片链接 80

第7章　你不一定了解的列表 82

7.1 无序列表 82

7.2 有序列表 84

7.3 更加紧凑的菜单列表 87

7.4 定义列表标记 89

7.5 列表的嵌套使用 91

第8章　表格没那么简单 94

8.1 创建一个表格 94

8.2 表格标题 97

8.3 跨行和跨列 99

8.3.1 实现跨列处理 100

8.3.2 实现跨行处理 102

8.3.3 实现同时跨行、跨列处理 105

8.4 设置表格页眉 107

8.5 设置表格背景图像 109

8.6 对齐处理 110

8.6.1 表格的整体对齐 110

8.6.2 对齐表格中的内元素 112

8.7 设置单元格大小 115

第9章　特效和多媒体带来的绚丽 117

9.1 实现滚动效果 117

9.2 设置背景音乐 119

9.2.1 代码指定 119

9.2.2 媒体插件实现 120

9.3 插入Flash 122

9.4 插入Applet 126

9.5 ActiveX 控件 129

第10章　使用框架 133

10.1 框架标记介绍 133

10.2 创建框架 135

10.3 设置框架大小 139

10.4 为框架创建链接 142

10.5 框架嵌套 146

第11章　看表单带来的革命性意义 152

11.1 表单标记 152

11.2 使用form标记 153

11.3 使用文本域 154

11.4 使用文本区域 156

11.5 使用按钮 159

11.6 使用单选按钮和复选框 161

11.7 使用列表菜单 164

11.8 使用文件域 167

11.9 使用图像域 169

11.10 使用隐藏域 171

11.11 使用单选组按钮 173

11.12 表单的综合使用 176

第12章　div布局处理 188

12.1 div标记介绍 188

12.1.1 div的格式 188

12.1.2 使用div 189

12.2 插入div标记 190

12.3 插入AP div 192

第13章　HTML 5来了 196

13.1 HTML 5 是下一代的HTML 196

13.1.1 发展历程 196

13.1.2 HTML 5的吸引力 197

13.2 新特性之视频处理 197

13.2.1 video标记 198

13.2.2 标记的属性 198

13.3 新特性之音频处理 203

13.3.1 audio标记 203

13.3.2 标记的属性 204

13.4 新特性之Canvas 208

13.4.1 标记介绍 208

13.4.2 HTML DOM Canvas 对象 209

13.4.3 Canvas实践 209

13.5 新特性之Web存储 219

13.5.1 Web存储介绍 219

13.5.2 HTML 5中Web存储的意义 220

13.5.3 两种存储方法 220

13.6 新特性之表单新特性 223

13.6.1 全新的Input 类型 223

13.6.2 全新的表单元素 227

13.6.3 全新的表单属性 229

第14章　等了很久的CSS基础 236

14.1 CSS语法 236

14.2 使用选择符 239

14.2.1 命名机制 239

14.2.2 通配选择符 240

14.2.3 类型选择符 242

14.2.4 群组选择符 244

14.2.5 包含选择符 246

14.2.6 ID选择符 248

14.2.7 class选择符 250

14.2.8 组合选择符 250

14.3 CSS属性介绍 250

14.4 CSS编码规范 252

14.4.1 书写规范 253

14.4.2 命名规范 253

14.5 颜色介绍 253

14.5.1 颜色名称定义 254

14.5.2 十六进制定义 255

14.6 长度单位 257

14.6.1 绝对长度单位 257

14.6.2 相对长度单位 257

14.7 百分比值 258

14.8 URL是地址 261

14.8.1 相对路径 261

14.8.2 绝对路径 261

14.8.3 应用实例 261

14.9 CSS的调用 264

第15章　先看页面布局 268

15.1 CSS元素介绍 268

15.1.1 块元素 268

15.1.2 内联元素 271

15.1.3 可变元素 272

15.2 CSS元素定位介绍 272

15.2.1 元素的定位 272

15.2.2 定位属性 277

15.3 内容控制属性 282

15.3.1 控制页面内容属性display 282

15.3.2 是否显示属性visibility 283

15.3.3 居中显示属性text-align 286

15.3.4 边界属性margin 289

15.4 控制页面背景 291

15.4.1 页面背景概述 291

15.4.2 使用背景颜色 292

15.4.3 使用背景图片 293

15.4.4 背景颜色和背景图片混用 301

15.4.5 设置文本样式 303

15.4.6 设置链接样式 305

15.5 使用浮动属性 307

15.5.1 浮动属性简介 307

15.5.2 固定元素相邻 307

15.5.3 两个浮动元素相邻 309

15.5.4 多个浮动元素相邻 310

15.6 清除浮动属性 311

15.6.1 清除浮动属性简介 311

15.6.2 使用清除浮动属性 313

15.7 使用列表属性 315

15.7.1 列表样式属性list-style-type 315

15.7.2 列表位置属性list-style-position 317

15.7.3 列表图片属性list-style- image 318

15.7.4 列表综合属性list-style 320

第16章　将网页打造成一个容器 322

16.1 盒模型简介 322

16.1.1 盒模型的内容 322

16.1.2 盒模型的背景 324

16.2 使用补白属性 324

16.2.1 补白属性概述 324

16.2.2 使用补白属性百分比值 327

16.2.3 使用单侧补白属性 329

16.3 使用边框属性 331

16.3.1 边框样式属性 331

16.3.2 边框宽度属性 333

16.3.3 边框颜色属性 335

16.3.4 边框属性的综合使用 336

16.3.5 使用表格边框属性 338

16.4 使用边界属性 340

16.4.1 边界属性 340

16.4.2 单侧边界属性 342

16.4.3 相邻边界属性 344

16.5 父子元素之间的距离 349

16.5.1 子元素边界为0 349

16.5.2 父元素补白为0 351

16.6 嵌套元素使用负边界 353

16.7 固定元素的大小 355

第17章　CSS设置和修饰 358

17.1 CSS文本设置 358

17.1.1 文本缩进 358

17.1.2 对齐文本 362

17.1.3 图文混排对齐处理 365

17.1.4 设置行高和间隔 367

17.1.5 设置文本间隔和空白 372

17.1.6 实现文本转换 375

17.1.7 实现水平和垂直居中 376

17.2 文本修饰链接 380

17.2.1 文本修饰 380

17.2.2 使用链接属性 383

17.2.3 设置鼠标悬停样式 389

17.3 CSS修饰图片 391

17.3.1 背景图片修饰 391

17.3.2 修饰内容图片 392

17.4 CSS表单修饰 395

17.4.1 修饰表单文本域 396

17.4.2 修饰表单文本区域 396

17.4.3 修饰表单按钮 398

17.4.4 修饰表单复选框 399

17.4.5 修饰表单单选按钮 400

17.4.6 修饰表单列表 401

17.4.7 修饰表单文件域 402

17.4.8 修饰表单图像域 403

17.5 修饰页面滚动条 404

17.6 修饰水平线 406

17.7 修饰表格 407

17.7.1 修饰表格边线和背景 407

17.7.2 设置表格的宽度和高度 408

17.7.3 实现表格居中 409

17.7.4 设置表格内容高度 412

第18章　引入JavaScript 414

18.1 JavaScript简介 414

18.1.1 JavaScript格式 414

18.1.2 一个典型的JavaScript文件 414

18.2 数据类型 416

18.2.1 数据类型概述 416

18.2.2 JavaScript常量 417

18.2.3 JavaScript变量 417

18.3 表达式和运算符 420

18.3.1 JavaScript表达式 420

18.3.2 JavaScript运算符 420

18.4 JavaScript循环语句 424

18.4.1 if条件语句 424

18.4.2 for循环语句 427

18.4.3 while循环语句 429

18.4.4 do…while循环语句 430

18.4.5 break控制 432

18.4.6 switch循环语句 432

18.5 JavaScript函数 432

18.5.1 函数的构成 433

18.5.2 JavaScript常用函数 434

18.6 JavaScript对象 436

18.6.1 对象基础知识 436

18.6.2 JavaScript常用对象和方法 438

18.7 JavaScript事件 441

18.7.1 JavaScript常用事件 441

18.7.2 事件处理程序 443

18.8 JavaScript窗口对象 444

18.8.1 窗口对象 444

18.8.2 窗口对象的事件驱动 444

18.8.3 窗口对象中的属性 444

18.8.4 窗口对象的方法 445

18.8.5 JavaScript窗口对象的应用 445

18.9 JavaScript框架对象 448

第19章　行为操作 451

19.1 行为介绍 451

19.1.1 行为简介 451

19.1.2 行为事件 453

19.1.3 行为的使用 453

19.2 调用JavaScript 455

19.3 URL转移 456

19.4 交换图像 458

19.5 打开浏览器窗口 460

19.6 显示隐藏元素 462

19.7 播放声音 463

19.8 改变属性 465

19.9 弹出信息 467

19.10 跳转菜单 469

19.11 拖动AP元素 472

第20章　谈一谈设计师这个行业 474

20.1 网页设计师这一行业 474

20.2 从合格到优秀其实并不遥远 475

20.3 企业需要什么样的人才 476

20.4 设计师们的三块大蛋糕 476

20.5 从设计师的担心谈出路 477

第21章　从面试中谈设计 479

21.1 面试 479

21.1.1 面试前的准备 479

21.1.2 常见的面试错误 480

21.2 面试中最大的问题 481

21.2.1 网页设计师要抓住设计的灵魂 481

21.2.2 需要牢记的原则 481

21.2.3 考官的问题——网页设计理念 484

21.2.4 考官的问题——网页设计的误区 484

21.3 在面试中所得——什么才是好的网页设计 484

21.4 配色的问题 485

21.5 不得不说的标题 486

21.6 面试问题——网页设计布局 487

21.7 网页设计必须注意的26个问题 488

21.8 探索无止境，学习无归期 491

第22章　从项目中谈模块 493

22.1 一个项目引发的问题 493

22.2 JavaScript特效的应用 495

22.3 文字处理 496

22.3.1 实例概述 496

22.3.2 定义文本颜色 497

22.3.3 指定文本内容 498

22.3.4 文本增亮处理 498

22.3.5 文本减亮处理 498

22.3.6 定义变换频率 499

22.4 时间处理 502

22.5 图像处理 506

22.5.1 实例概述 507

22.5.2 设置图像属性 507

22.5.3 亮度增加处理 507

22.5.4 亮度减小处理 508

22.6 背景处理 511

22.7 鼠标光标处理 515

22.7.1 实例概述 515

22.7.2 指定跟随文本 515

22.7.3 文本效果处理 515

22.7.4 页面显示 516

22.8 菜单处理 518

22.8.1 实例概述 518

22.8.2 设置菜单元素内容 518

22.8.3 设置滚动区域属性 519

第23章　为Android手机设计网页 523

23.1 搭建开发环境 523

23.1.1 搭建Android开发环境 523

23.1.2 搭建网页运行环境 525

23.2 先看一段代码 528

23.2.1 实现主页 528

23.2.2 编写CSS文件 529

23.2.3 实现页面自动缩放 531

23.3 添加Android的CSS 532

23.3.1 编写基本的样式 532

23.3.2 添加视觉效果 534

23.4 添加JavaScript 535

23.4.1 jQuery框架介绍 535

23.4.2 具体实践 536

23.5 使用Ajax 539

23.5.1 编写HTML文件 539

23.5.2 编写JavaScript文件 543

23.5.3 最后的修饰 544

23.6 让网页动起来 545

23.6.1 一个开源框架——JQTouch 546

23.6.2 一个简单应用 546

第24章　SEO优化 555

24.1 SEO基础 555

24.2 搜索引擎 556

24.2.1 搜索引擎的工作 556

24.2.2 搜索引擎之间的差异 557

24.3 非常重要的关键词 557

24.3.1 优化正确的关键词 557

24.3.2 关键词密度 558

24.3.3 特殊的关键词 559

24.3.4 利用相关性提高网站关键词排名 560

24.3.5 挖掘准确的长尾关键词 562

24.4 链接 563

24.4.1 内向链接和外向链接 563

24.4.2 锚文本 564

24.5 做好数据分析 565

24.6 网站排名算法总结 566

24.7 几个有效的SEO排名策略 567

第25章　个人博客网站 569

25.1 网站规划 569

25.1.1 站点需求分析 569

25.1.2 预期效果分析 570

25.1.3 站点结构规划 571

25.2 切图分析 571

25.3 制作站点首页 572

25.3.1 实现流程分析 572

25.3.2 制作顶部导航 573

25.3.3 设计中间内容部分 577

25.3.4 制作底部版权部分 583

25.4 制作日志页面 585

25.4.1 实现流程分析 585

25.4.2 日志内容实现 585

25.5 制作日志详情页面 586

25.5.1 实现流程分析 586

25.5.2 页面具体实现 587

HTML 语言是当今网页设计的主流表现语言，CSS 是当今网页设计的通用修饰技术，JavaScript 是当今网页设计的最通用脚本表现技术。HTML CSS JavaScript 是当前主流的网页设计组合，是每一名网页设计师所必须具备并精通的技术。本书将上述三种技术巧妙地结合起来，详细讲解了这三种技术的基本知识和具体用法。 本书共分为25 章，循序渐进、由浅入深地详细讲解了HTML CSS JavaScript 技术的核心内容，并通过具体实例的实现过程演练了各个知识点的具体用法。首先，详细讲解了HTML 标记语言的核心内容，主要包括页面标记、文字段落、超链接、使用图片、插入列表、使用表格、插入框架、表单、HTML 5 等知识点的具体用法；然后，详细讲解了CSS 的核心内容，主要包括CSS 语法、页面布局、容器、网页元素修饰等知识点的具体用法；接下来，详细讲解了JavaScript 的核心内容，主要包括JavaScript 基础、行为操作等知识点的具体用法；最后通过一个个人博客系统的实现过程，详细讲解了在网页设计过程中联合应用HTML CSS JavaScript 技术的过程。全书采用知识性、趣味性相结合的讲解方式，穿插了学习技巧和职场生存法则，介绍了设计师所必须具备的基本素养，并且紧跟时代潮流，讲解了HTML CSS JavaScript 技术在移动站点中的用法。 本书不但适合于网页设计的初学者，对于有一定网页设计经验的读者来说，本书也具有很大的参考价值。