HTML+CSS+JavaScript网页设计与布局实用教程PDF电子书下载

第1篇 HTML基础篇 3

第1章 HTML入门 3

1.1 什么是HTML 3

1.2 HTML文件的文档结构 4

1.2.1 HTML文件的结构 4

1.2.2 编写HTML文件注意事项 5

1.3 HTML文件的编写方法 6

1.3.1 使用记事本编写HTML页面 6

1.3.2 使用Dreamweaver编写HTML页面 7

1.4 网页设计与开发的过程 8

1.4.1 明确网站定位 8

1.4.2 收集信息和素材 9

1.4.3 规划栏目结构 10

1.4.4 设计页面方案 10

1.4.5 制作页面 11

1.4.6 实现后台功能 11

1.4.7 网站的测试与发布 13

1.5 本章小结 13

1.6 练习题 13

第2章 HTML基本标记 15

2.1 HTML页面主体标记 15

2.1.1 定义网页背景色 15

2.1.2 设置背景图片 16

2.1.3 设置文字颜色 17

2.1.4 设置链接文字属性 18

2.1.5 设置页面边距 20

2.2 head部分标记 21

2.2.1 标题标记 22

2.2.2 定义页面关键字 22

2.2.3 定义页面描述 23

2.2.4 定义编辑工具 24

2.2.5 定义作者信息 24

2.2.6 定义网页文字及语言 25

2.2.7 定义网页的定时跳转 25

2.3 综合实例——创建基本的HTML文件 26

2.4 本章小结 28

2.5 练习题 28

第3章 用HTML设置文字、段落与列表 29

3.1 插入其他标记 29

3.1.1 输入空格符号 29

3.1.2 输入特殊符号 30

3.2 设置文字的格式 31

3.2.1 设置字体 31

3.2.2 设置字号 32

3.2.3 设置文字颜色 32

3.2.4 设置粗体、斜体、下划线 33

3.2.5 设置上标与下标 35

3.3 设置段落的格式 35

3.3.1 段落标记 36

3.3.2 段落的对齐属性 36

3.3.3 不换行标记 37

3.3.4 换行标记 38

3.4 水平线标记 39

3.4.1 插入水平线 39

3.4.2 设置水平线宽度与高度属性 40

3.4.3 设置水平线的颜色 41

3.4.4 设置水平线的对齐方式 42

3.4.5 利用水平线去掉阴影 43

3.5 使用marquee设置滚动效果 44

3.5.1 marquee标记及其属性 44

3.5.2 使用marquee插入滚动公告 45

3.6 综合实例——设置页面文本及段落 47

3.7 本章小结 48

3.8 练习题 49

第4章 用HTML创建精彩的图像和多媒体页面 50

4.1 网页中常见的图像格式 50

4.2 插入图像并设置图像属性 51

4.2.1 图像标记 51

4.2.2 设置图像的高度 52

4.2.3 设置图像的宽度 53

4.2.4 设置图像的边框 54

4.2.5 设置图像的水平间距 54

4.2.6 设置图像的垂直间距 55

4.2.7 设置图像相对于文字的对齐方式 56

4.2.8 设置图像的替代文字 57

4.3 添加多媒体文件 58

4.3.1 添加多媒体文件标记 58

4.3.2 设置自动运行 59

4.4 添加背景音乐 60

4.4.1 设置背景音乐 60

4.4.2 设置循环播放次数 61

4.5 综合实例 62

4.5.1 创建多媒体网页 62

4.5.2 创建图文混合排版网页 63

4.6 本章小结 64

4.7 练习题 64

第5章 用HTML创建超链接和表单 66

5.1 超链接的基本概念 66

5.2 创建基本超链接 66

5.2.1 超链接标记 66

5.2.2 设置目标窗口 67

5.3 创建图像的超链接 68

5.3.1 设置图像超链接 69

5.3.2 设置图像热区链接 69

5.4 创建锚点链接 70

5.4.1 创建锚点 71

5.4.2 链接到页面不同位置的锚点链接 72

5.5 插入表单 73

5.5.1 处理动作 73

5.5.2 表单名称 74

5.5.3 传送方法 75

5.5.4 编码方式 75

5.5.5 目标显示方式 76

5.6 综合实例 77

5.6.1 插入表单对象 77

5.6.2 给网页添加链接 80

5.7 本章小结 81

5.8 练习题 81

第6章 用HTML创建表格 83

6.1 创建并设置表格属性 83

6.1.1 表格的基本标记 83

6.1.2 表格的宽度和高度 84

6.1.3 表格的标题 85

6.1.4 表格的表头 87

6.1.5 表格的对齐方式 88

6.1.6 表格的边框宽度 90

6.1.7 表格的边框颜色 91

6.1.8 单元格间距 92

6.1.9 单元格边距 93

6.1.10 表格的背景颜色 93

6.1.11 表格的背景图像 94

6.2 表格的结构标记 95

6.2.1 设计表头样式 95

6.2.2 设计表主体样式 96

6.2.3 设计表尾样式 98

6.3 综合实例——使用表格排版网页 99

6.4 本章小结 102

6.5 练习题 102

第7章 创建框架结构网页 103

7.1 窗口框架简介 103

7.2 设置框架集标记frameset的属性 104

7.2.1 水平分割窗口 104

7.2.2 垂直分割窗口 105

7.2.3 嵌套分割窗口 106

7.2.4 设置边框 107

7.2.5 框架的边框宽度 108

7.2.6 框架的边框颜色 109

7.3 设置框架标记frame的属性 109

7.3.1 框架页面源文件 110

7.3.2 框架名称 111

7.3.3 调整框架窗口的尺寸 112

7.3.4 框架边框与页面内容的水平边距 113

7.3.5 框架边框与页面内容的垂直边距 114

7.3.6 设置框架滚动条显示 114

7.3.7 不支持框架标记 115

7.4 浮动框架 116

7.4.1 浮动框架的页面源文件 116

7.4.2 浮动框架的宽度和高度 117

7.4.3 浮动框架的对齐方式 118

7.4.4 设置浮动框架是否显示滚动条 118

7.4.5 浮动框架的边框 119

7.5 综合实例——创建上方固定左侧嵌套的框架网页 120

7.6 本章小结 126

7.7 练习题 126

第2篇 CSS基础篇 129

第8章 CSS基础知识 129

8.1 为什么要在网页中加入CSS 129

8.1.1 什么是CSS 129

8.1.2 使用CSS的好处 130

8.1.3 如何编写CSS 131

8.1.4 CSS基本语法 131

8.1.5 浏览器与CSS 132

8.2 基本CSS选择器 132

8.2.1 标签选择器 132

8.2.2 类别选择器 133

8.2.3 ID选择器 134

8.3 在HTML中使用CSS 136

8.3.1 链接外部样式表 136

8.3.2 行内方式 136

8.3.3 嵌入外部样式表 137

8.3.4 定义内部样式表 137

8.4 设置CSS属性 138

8.4.1 设置CSS类型属性 138

8.4.2 设置CSS背景属性 139

8.4.3 设置CSS区块属性 140

8.4.4 设置CSS方框属性 141

8.4.5 设置CSS边框属性 142

8.4.6 设置CSS列表属性 144

8.4.7 设置CSS定位属性 144

8.4.8 设置CSS扩展属性 146

8.5 综合实例——利用Dreamweaver对网页添加CSS样式 146

8.6 本章小结 148

8.7 练习题 148

第9章 用CSS设计丰富的文字效果 150

9.1 设计网页中的文字样式 150

9.1.1 字体 151

9.1.2 字号 152

9.1.3 加粗 153

9.1.4 样式 154

9.1.5 变体属性 155

9.1.6 文字修饰 156

9.2 设计文本的段落样式 158

9.2.1 行高 158

9.2.2 对齐 159

9.2.3 缩进 160

9.2.4 单词间距 161

9.2.5 首字下沉 162

9.2.6 大小写转换 162

9.3 用CSS滤镜设计特效文字 163

9.3.1 滤镜概述 163

9.3.2 光晕 164

9.3.3 模糊 165

9.3.4 遮罩 166

9.3.5 透明色 166

9.3.6 阴影 167

9.3.7 波浪 168

9.3.8 X射线 169

9.4 综合实例 169

9.4.1 用CSS排版网页文字 169

9.4.2 创建动感文字 171

9.5 本章小结 173

9.6 练习题 173

第10章 用CSS设计图像和背景 175

10.1 设置网页的背景 175

10.1.1 背景颜色 175

10.1.2 背景图像 176

10.2 设置背景图像的属性 177

10.2.1 设置背景重复 177

10.2.2 设置固定背景 178

10.2.3 设置背景定位 179

10.3 设置网页图像的样式 180

10.3.1 设置图像边框 180

10.3.2 设置图文混合排版 182

10.4 应用CSS滤镜设计图像特效 183

10.4.1 控制图像和背景的透明度 183

10.4.2 灰度 185

10.4.3 反色 186

10.5 综合实例 186

10.5.1 给图片添加边框 186

10.5.2 鼠标移到图片时产生渐变效果 187

10.6 本章小结 189

10.7 练习题 189

第11章 设计更富灵活性的表格和表单 190

11.1 网页中的表格 190

11.1.1 表格对象标记 190

11.1.2 在Dreamweaver中插入表格 192

11.1.3 设置表格的颜色 192

11.1.4 设置表格的边框样式 193

11.1.5 设置表格的阴影 195

11.1.6 设置表格的渐变背景 196

11.2 网页中的表单 197

11.2.1 表单对象 197

11.2.2 表单标记 198

11.2.3 表单的布局设计 199

11.2.4 设置边框样式 201

11.2.5 设置背景样式 203

11.2.6 设置输入文本的样式 205

11.3 综合实例 206

11.3.1 制作变换背景色的表格 206

11.3.2 设计文本框的样式 207

11.4 本章小结 208

11.5 练习题 208

第12章 用CSS制作链接与网站导航 210

12.1 超链接基础 210

12.1.1 超链接的基本概念 210

12.1.2 使用页面属性设置超链接 211

12.2 链接标记 211

12.2.1 a:link 212

12.2.2 a:visited 213

12.2.3 a:active 214

12.2.4 a:hover 215

12.3 各种形式的超链接 215

12.3.1 背景色变换链接 216

12.3.2 多姿多彩的下划线链接 217

12.3.3 图像翻转链接 219

12.3.4 边框变换链接 221

12.4 项目列表 223

12.4.1 有序列表 223

12.4.2 无序列表 226

12.5 横排导航 231

12.5.1 文本导航 231

12.5.2 标签式导航 233

12.6 竖排导航 234

12.7 综合实例 236

12.7.1 使用CSS实现鼠标指针形状改变 236

12.7.2 使用CSS实现背景变换的导航菜单 237

12.8 本章小结 238

12.9 练习题 238

第3篇 CSS布局篇 243

第13章 CSS+Div布局定位基础 243

13.1 网站与Web标准 243

13.1.1 什么是Web标准 243

13.1.2 为什么要建立Web标准 244

13.1.3 怎样改善现有网站 245

13.2 Div标记与Span标记 246

13.2.1 Div概述 246

13.2.2 Div与Span的区别 247

13.3 盒子模型 249

13.3.1 盒子模型的概念 249

13.3.2 border 249

13.3.3 padding 255

13.3.4 margin 257

13.4 盒子的浮动与定位 260

13.4.1 盒子的浮动float 260

13.4.2 position定位 263

13.4.3 z-index空间位置 268

13.5 本章小结 269

13.6 练习题 269

第14章 CSS+Div布局方法 270

14.1 CSS布局理念 270

14.1.1 将页面用Div分块 270

14.1.2 设计各块的位置 271

14.1.3 用CSS定位 271

14.2 固定宽度布局 273

14.2.1 一列固定宽度 273

14.2.2 两列固定宽度 274

14.2.3 圆角框 275

14.3 可变宽度布局 277

14.3.1 一列自适应 278

14.3.2 两列宽度自适应 278

14.3.3 两列右列宽度自适应 280

14.3.4 三列浮动中间宽度自适应 280

14.3.5 三行二列居中高度自适应布局 281

14.4 CSS布局与传统的表格布局方式分析 283

14.5 本章小结 286

14.6 练习题 286

第4篇 JavaScript篇 289

第15章 JavaScript语法基础 289

15.1 JavaScript简介 289

15.1.1 JavaScript的历史 289

15.1.2 JavaScript的特点 290

15.2 JavaScript的放置位置 290

15.2.1 <script/>的使用方法 291

15.2.2 位于网页之外的单独脚本文件中 291

15.2.3 直接位于事件处理部分的代码中 291

15.3 JavaScript运算符 292

15.3.1 算术运算符 292

15.3.2 逻辑运算符 292

15.3.3 比较运算符 293

15.4 JavaScript程序语句 293

15.4.1 使用if语句 293

15.4.2 使用for循环 294

15.4.3 使用switch语句 295

15.4.4 使用while语句 296

15.5 综合实例——制作倒计时特效 297

15.6 本章小结 298

15.7 练习题 298

第16章 JavaScript中的事件 300

16.1 事件概述 300

16.2 事件分析 300

16.2.1 click事件 301

16.2.2 change事件 301

16.2.3 select事件 302

16.2.4 focus事件 303

16.2.5 load事件 304

16.2.6 鼠标移动事件 305

16.2.7 onblur事件 306

16.3 其他常用事件 307

16.4 综合实例——将事件应用于按钮中 309

16.5 本章小结 310

16.6 练习题 310

第17章 JavaScript中的函数和对象 311

17.1 什么是函数 311

17.2 函数的定义 312

17.2.1 函数的普通定义方式 312

17.2.2 函数的变量定义方式 313

17.2.3 函数的指针调用方式 314

17.3 JavaScript对象的声明和引用 315

17.3.1 声明和实例化 316

17.3.2 对象的引用 317

17.4 浏览器对象 318

17.4.1 navigator对象 318

17.4.2 windows对象 320

17.4.3 location对象 321

17.4.4 history对象 322

17.4.5 document对象 323

17.5 内置对象 324

17.5.1 date对象 324

17.5.2 数学对象math 327

17.5.3 字符串对象string 328

17.5.4 数组对象array 329

17.6 综合实例——改变网页背景颜色 330

17.7 本章小结 331

17.8 练习题 332

第5篇 综合实例篇 335

第18章 设计布局富有个性的个人网站 335

18.1 个人网站设计指南 335

18.1.1 确定网站主题 335

18.1.2 个人网站色彩搭配和结构设计 336

18.2 网站前期策划 336

18.2.1 确定网站主题 337

18.2.2 确定目录结构 337

18.2.3 网站蓝图的规划 337

18.3 创建本地站点 338

18.4 制作网站主页 340

18.4.1 设计页面的通用规则 340

18.4.2 导入外部CSS 343

18.4.3 制作左侧导航部分 345

18.4.4 制作右侧正文部分 351

18.4.5 制作底部版权部分 354

18.5 本章小结 355

18.6 练习题 356

第19章 公司宣传网站的布局 357

19.1 企业网站设计指南 357

19.1.1 企业网站的主要功能 357

19.1.2 色彩搭配与风格设计 358

19.2 分析架构 359

19.2.1 内容分析 359

19.2.2 HTML结构设计 360

19.3 各模块设计 361

19.3.1 布局设计 361

19.3.2 页面的通用规则 363

19.3.3 制作页头部分 364

19.3.4 制作网页左侧部分 365

19.3.5 制作网页右侧部分 367

19.4 本章小结 370

19.5 练习题 370

附录 参考答案 371