《HTML+CSS网页设计指南》是2010年清华大学出版社出版的图书,作者是赵辉。本书主要介绍了页面前端技术的开发,即常说的“html+css+javascript”。
基本介绍
- 书名:HTML+CSS网页设计指南
- 作者: 赵辉
- ISBN:9787302213024
- 页数:384页
- 出版社:清华大学出版社
- 出版时间:2010 年1月
- 开本:16开
内容简介
现在的web设计理念较之于前两年,已经发生了很大的改变,css比传统的属性标籤使页面变得更漂亮,而将来,页面中要求的不仅仅是美观,甚至是越来越多的互动功能,javascript即是目前最流行的页面脚本语言。
2009年,网际网路巨头google公司在全球推广google chrome浏览器,正如chrome浏览器本身:“今天,我们日常生活所用的网际网路不再仅仅是网页,而是应用程式。”本书针对当前网页的开发,详细介绍了css的使用法则,不仅如此,本书同时注重于javascript的使用,目的就在于不仅着眼于今天最流行、最成熟的技术,更要把握明天页面开发的趋势。
本书从最基本的html标籤讲起,适用于web开发的初学者,而对于有一定web前端开发基础的读者,也有一定的参考意义。
目录
第1篇 页面製作入门篇
第1章 了解网页 2
1.1 什幺是网页 2
1.1.1 网页的概述 2
1.1.2 静态网页 3
1.1.3 动态网页 4
1.1.4 开发动态页面和静态页面的联繫 6
1.2 开发网页的工具 7
1.2.1 html页面的开发工具 7
1.2.2 动态页面的开发工具 9
1.3 使用网页浏览器 10
1.3.1 网页浏览器的工作原理 10
1.3.2 常用的两种浏览器 11
1.4 html、xml和xhtml语言 11
1.4.1 超文本标记语言html 12
1.4.2 可扩展标识语言xml 12
1.4.3 可扩展超文本标识语言xhtml 13
1.5 编写一个简单的页面 13
1.6 小结 14
第2章 通过学习他人的网页了解html
.能做什幺 15
2.1 用记事本打开一个页面 15
2.2 初识html 17
2.2.1 html语法 17
2.2.2 html文档的结构 18
2.3 html文档基本结构标籤的作用 20
2.3.1 给页面一个声明——样本代码 20
2.3.2 踏出製作页面的第一步——开始
标籤[html] 21
2.3.3 页面的脑袋——头标籤和头标籤的
对象 21
2.3.4 给页面起名字——标题标籤[title] 24
2.3.5 页面的身体——体标籤[body] 25
2.3.6 美化html文档 26
2.4 案例:我们的第一个页面 27
2.5 小结 28
第3章 动手在网页中写些什幺 30
3.1 新旧方法对比 30
3.2 文本的排版格式 32
3.2.1 写一行换一行 33
3.2.2 在页面文本中空格 34
3.2.3 文本的段落要对齐 36
3.3 文本的属性样式 38
3.3.1 不一样的文本字型大小 39
3.3.2 奇妙的特殊符号 41
3.3.3 给文本加标注 42
3.4 整齐的文本列表 43
3.4.1 无序列表 43
3.4.2 有序列表 45
3.4.3 定义列表 45
3.4.4 列表嵌套 46
3.5 製作一则通知 49
3.6 小结 50
第4章 将图像放入页面中 51
4.1 图像的基础知识 51
4.1.1 最常用的图像——点阵图 52
4.1.2 在页面中常用的点阵图格式 52
4.1.3 奇妙的矢量图 53
4.1.4 图像的解析度 54
4.1.5 认识一些网页中常用的banner尺寸 54
4.2 用图像来编织美丽的页面 55
4.2.1 理解图像路径 55
4.2.2 像编辑文本对齐一样在页面中对齐
图片 56
4.2.3 图像与文本的对齐方式 57
4.2.4 控制图像与文本的距离 58
4.3 让图像变得更美观 60
4.3.1 使用画图工具修改图像 60
4.3.2 不一样的改变——给图像添加框线 61
4.3.3 独树一帜的水平线 62
4.4 改变页面的背景 63
4.5 案例:把宠物的照片放到网页
上去 64
4.6 小结 65
第5章 让网页变得更绚丽一些 66
5.1 了解计算机语言下的颜色描述 66
5.2 让页面绚丽多彩 67
5.2.1 改变页面背景颜色 67
5.2.2 改变页面文本字型颜色 68
5.3 不寻常的图像套用 69
5.3.1 会动的gif图像 69
5.3.2 图像的透明通道 70
5.3.3 带有透明通道图像的套用 72
5.4 案例:修饰普通页面 74
5.5 小结 75
第6章 网页连结 76
6.1 网页连结概述 76
6.1.1 初识页面连结 77
6.1.2 理解连结地址 78
6.2 连结的种种不同 79
6.2.1 基本的文本连结 79
6.2.2 基本的图像连结 80
6.2.3 把信箱留给需要联繫你的人 81
6.2.4 在同一页面中快速查找信息 83
6.3 提高页面连结的友好度 85
6.3.1 美观连结的状态 85
6.3.2 奇妙特殊的连结方式 87
6.3.3 热点图像区域的连结 89
6.4 在新视窗中显示连结视窗 91
6.5 案例:製作普通连结的主页 92
6.6 小结 94
第2篇 页面製作提高篇
第7章 css规则 98
7.1 如何学习css 98
7.2 css基本的规则写法 101
7.2.1 基本的样式表的写法 101
7.2.2 使用类class和标誌id连结样式表 102
7.2.3 创建选择器 103
7.2.4 套用css样式表 107
7.3 用css来修饰页面文本 110
7.3.1 修饰页面文本字型 110
7.3.2 文本的字号 111
7.3.3 文本段落行高 112
7.3.4 禁止文本自动换行 114
7.4 给页面对象添加颜色 115
7.5 案例:使用css製作个人页面 117
7.6 小结 119
第8章 表格 120
8.1 理解页面中的表格 120
8.2 普通表格的套用 121
8.2.1 製作普通表格 121
8.2.2 表格的基本属性 123
8.2.3 合併单元格 125
8.2.4 表格标题 127
8.2.5 拆分表格 127
8.2.6 设定表格的列 128
8.3 修饰单元格 130
8.3.1 通过css修饰单元格的框线 130
8.3.2 合併相邻单元格 132
8.4 编辑单元格中的内容 133
8.4.1 单元格中文本与单元格大小 133
8.4.2 修饰单元格中的内容 134
8.5 案例:製作球赛积分表 135
8.6 小结 139
第9章 创建框架结构的页面 140
9.1 创建视窗框架页面 140
9.1.1 创建视窗框架的[frameset]和[frame]
标籤 141
9.1.2 横向分割视窗 141
9.1.3 纵向分割视窗 142
9.1.4 框架的嵌套 143
9.1.5 将页面放入视窗框架中 144
9.2 花点心思修饰框架的细节 145
9.2.1 给无法处理框架的浏览器添加注释
说明 145
9.2.2 固定框架的位置 146
9.2.3 框架中设定滚动条 146
9.3 修改框架框线的样式 148
9.3.1 判定框线是否显示 148
9.3.2 改变框线的表现效果 149
9.3.3 框线的边距 150
9.4 框架集中页面之间的连结 151
9.4.1 在指定的框架中打开连结 151
9.4.2 框架内的锚点连结 153
9.5 灵活的[iframe]框架 155
9.6 案例:制定自己的连结主页 156
9.7 小结 159
第10章 当css样式表遇到层 160
10.1 理解块级的意义 160
10.2 页面中的层 162
10.2.1 行[span]和层[div] 162
10.2.2 层的基本定位 163
10.2.3 层的叠加 164
10.3 框模型 166
10.3.1 理解框模型 166
10.3.2 空距padding属性 168
10.3.3 框线border的扩展属性 170
10.3.4 边距 171
10.3.5 框模型的溢出 172
10.4 定製层的display属性 173
10.5 css hack 175
10.6 案例:简单的css+div 177
10.7 小结 179
第11章 进一步讨论页面布局的方法 181
11.1 页面中的定位 181
11.1.1 静态定位 181
11.1.2 相对定位 183
11.1.3 绝对定位 183
11.1.4 固定定位 184
11.2 浮动层 185
11.3 css的新奇技术以及未来发展 186
11.3.1 图像替换技术 187
11.3.2 css 3.0中的新发展 189
11.3.3 firefox浏览器中实现圆角框模型 189
11.4 案例:有效地管理页面布局 190
11.5 小结 196
第3篇 动感页面篇
第12章 神奇的表单 198
12.1 表单的工作原理 200
12.1.1 [script]标记 200
12.1.2 创建表单 201
12.1.3 表单域 202
12.2 通过表单展示不一样的页面 202
12.2.1 input对象下的多种表单表现形式 203
12.2.2 text文本框的样式表单 203
12.2.3 password输入密码的样式表单 205
12.2.4 checkbox複选框的样式表单 205
12.2.5 radio单选按钮的样式表单 207
12.2.6 submit提交数据的样式表单 207
12.2.7 hidden隐藏域的样式表单 209
12.2.8 image样式表单 209
12.2.9 file上传档案的样式表单 210
12.3 textarea对象的表单 211
12.4 select对象的表单 212
12.5 表单域集合 215
12.6 案例:製作一个精美的由表单构成
的页面 215
12.7 小结 221
第13章 在网页中加入神奇的效果 222
13.1 什幺是脚本语言 222
13.1.1 初识vbscript 222
13.1.2 学习javascript的起步 223
13.2 javascript和java的区别 225
13.3 javascript的基本语法 226
13.3.1 javascript中的标识符和保留关
键字 226
13.3.2 javascript语法的特殊规则 227
13.4 javascript的数据类型 228
13.4.1 常量 228
13.4.2 变数 228
13.4.3 数据类型转换 229
13.4.4 运算符 230
13.4.5 表达式 231
13.5 流程控制 232
13.5.1 顺序结构 232
13.5.2 选择结构 232
13.5.3 循环结构 235
13.6 了解函式 237
13.7 案例:一个使用基本语法的
javascript例子 239
13.8 小结 242
第14章 javascript入门 244
14.1 了解一下何为“对象” 244
14.1.1 javascript对象概述 244
14.1.2 dom介绍 246
14.2 javascript中的数组 247
14.2.1 定义数组和运算元组 247
14.2.2 多维数组 250
14.3 内部对象 250
14.3.1 math对象 251
14.3.2 date对象 251
14.3.3 string对象 251
14.4 window对象 252
14.4.1 window对象属性 252
14.4.2 window对象方法 255
14.4.3 事件 258
14.5 document对象 260
14.5.1 document对象属性 261
14.5.2 document对象方法 261
14.5.3 document对象事件 261
14.6 案例:一个运用javascript实现的
动态页面 263
14.7 小结 268
第15章 了解製作页面的工具 269
15.1 可视化编辑页面工具:
dreamweaver 269
15.1.1 了解dreamweaver的界面 269
15.1.2 dreamweaver的选单 271
15.2 神奇的“美工笔”:photoshop 271
15.2.1 了解photoshop的界面 271
15.2.2 photoshop的实用技巧 272
15.3 网页中的动画:flash 274
15.3.1 认识flash档案 274
15.3.2 在页面中放入flash档案 275
15.3.3 製作flash的软体 277
15.3.4 flash8的选单 278
15.3.5 flash8的主要功能 278
15.3.6 flash的常用互动技巧 279
15.4 案例:使用dreamweaver製作
页面 280
15.5 小结 281
第4篇 页面实战篇
第16章 综合实例一:製作主流网站
界面 284
16.1 构思基础的布局 284
16.2 设计基础模组的样式表 285
16.3 完善网站的子模组 287
16.3.1 网站的导航栏 287
16.3.2 页面的侧栏 289
16.4 最终页面 291
16.5 小结 291
第17章 综合实例二:设计複杂页面 292
17.1 页面的框架布局 292
17.1.1 定位页面的内容 292
17.1.2 页面初级布局的代码 293
17.2 细化页面的局部 294
17.2.1 intro部分 294
17.2.2 页面的左侧部分 297
17.2.3 页面的右侧栏主体部分 300
17.3 小结 302
第18章 综合实例三:製作英文网站 303
18.1 分析效果图 303
18.2 切图 304
18.2.1 製作首页的切图 304
18.2.2 二级页面的切图 305
18.3 製作站点首页头部 306
18.3.1 首页头部的信息和基础样式的
製作 306
18.3.2 首页头部的分析 307
18.3.3 首页头部结构的製作 308
18.3.4 首页头部css代码的编写 309
18.4 製作首页的主体部分 311
18.4.1 分析主体部分效果图 311
18.4.2 製作主体左侧部分的结构 312
18.4.3 製作主体左侧部分的样式 313
18.4.4 製作主体中间部分的结构 316
18.4.5 製作主体中间部分的样式 318
18.4.6 製作主体右侧部分的结构 320
18.4.7 製作主体右侧部分的样式 322
18.5 製作首页的底部 324
18.6 首页的兼容问题 325
18.7 二级页面的製作 326
18.7.1 分析二级页面的效果图 326
18.7.2 製作二级页面中间内容部分的
结构 327
18.7.3 製作二级页面中间内容部分的
样式 328
18.7.4 製作二级页面右侧部分的结构 330
18.7.5 製作二级页面右侧部分的样式 330
18.8 小结 331
第19章 综合实例四:使用dreamweaver
製作中文网站 332
19.1 分析效果图 332
19.2 製作首页的切图 333
19.3 製作站点首页头部 334
19.3.1 首页头部的信息和基础样式的
製作 334
19.3.2 首页头部的分析 337
19.3.3 首页头部logo和banner部分的
製作 337
19.3.4 导航列表的製作 341
19.4 製作首页的主体部分 344
19.4.1 分析主体部分效果图 344
19.4.2 製作主体部分的父元素 344
19.4.3 製作主体左侧部分的样式 345
19.4.4 製作主体右侧内容中关于我们的
部分 349
19.4.5 製作今日新闻部分 351
19.4.6 製作点拨和时评的部分 353
19.4.7 製作合作伙伴部分 356
19.5 製作首页的底部 357
19.6 首页的兼容问题 358
19.7 二级页面的製作 359
19.8 小结 361
附录a 362
a.1 html 4.0快速参考 362
a.1.1 通用属性 362
a.1.2 html文档结构元素 362
a.1.3 文本元素 363
a.1.4 字型样式元素 365
a.1.5 列表元素 366
a.1.6 表格元素 367
a.1.7 框架元素 369
a.1.8 表单元素 370
a.1.9 其他元素 373
a.2 css中支持的颜色名称 377
a.2.1 w3c规定的十六色 377
a.2.2 网路安全色 378
a.2.3 ie 4以上版本中的预命名颜色 381