《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在製作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和製作的各方面内容和技巧。
基本介绍
- 中文名:HTML+CSS网页设计与布局从入门到精通
- 作 者::温谦
- 出版社:: 人民邮电出版社
- ISBN:: 9787115183392
版权资讯
书 名: HTML+CSS网页设计与布局从入门到精通
作 者:温谦
出版社: 人民邮电出版社
出版时间: 2008
ISBN: 9787115183392
开本: 16
定价: 49.00 元
内容简介
本书共分4个部分21章和两个附录,包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标準,强调“表现”与“内容”的分离,抛弃了那些过时的HTML标记和属性,从更规範的角度全面、系统地介绍了网页设计製作方法与技巧。附录收录了网站发布与管理的知识和160个套用CSS时出现频度较高的英文单词及其中文解释。书中给出了大量详细的案例,并对案例进行分析,便于读者在理解的基础上,直接修改后使用。本书作者具备扎实的实践功底,行文细腻,对每一个技术细节以及每一个实际工作中可能遇到的难点和错误都进行了详细的说明,并给出了解决方案。
本书附带学习光碟,收录了12个小时HTML和CSS多媒体教学录像和网页製作技术多媒体教学录像,辅助读者学习,达到事半功倍的效果。光碟还附带书中所有实例的素材档案、原始码和最终效果档案,修改后可直接使用。
本书适合于网页设计製作人员和开发人员阅读,读者可以在掌握HTML和CSS之后做出精美的网页。
编辑推荐
《HTML+CSS网页设计与布局从入门到精通》包括6小时HTML+CSS关键技术视频教程
6小时网页製作视频教程
书中实例源档案/效果档案/製作素材
资深网页设计师倾心打造,融合多年项目经验和工作心得。
抛弃过时的HTML标记和属性,详细介绍Web标準化网页製作必备的HTML标记和属性
全面讲解CSS控制页面表现的方法,包括控制文字、图像、背景、表格、表单、导航连结等。
深入剖析CSS布局的核心技术和实际操作方法,包括固定宽度布局、变宽度布局。
逐个效果解决IE6/IE7/Firefox浏览器兼容性问题。
读者对象:网页设计与布局人员,网页美工人员,网站建设与开发人员,网页製作与网站建设培训学员,HTML/CSS爱好者。
目录
第1部分 HTML基础篇
第1章 网页设计基础知识 3
1.1 基础概念 3
1.2 网页与HTML语言 4
1.3 Web标準:结构、表现与行为 5
1.3.1 标準的重要性 5
1.3.2 “Web标準”概述 6
1.4 初步理解网页设计与开发的过程 7
1.4.1 基本任务与角色 7
1.4.2 明确网站定位 8
1.4.3 收集信息和素材 8
1.4.4 策划栏目内容 8
1.4.5 设计页面方案 9
1.4.6 製作页面 9
1.4.7 实现后台功能 9
1.4.8 整合与测试网站 10
1.5 与设计相关的技术因素 10
1.6 本章小结 12
第2章 HTML网页文档结构 13
2.1 HTML简介 13
2.1.1 创建第一个HTML档案 13
2.1.2 HTML档案结构 15
2.2 简单的HTML案例 16
2.3 网页源档案的获取 18
2.3.1 直接查看源档案 19
2.3.2 保存网页 19
2.4 辅助:利用Dreamweaver快速建立基本文档 20
2.5 本章小结 24
第3章 用HTML设定文本和图像 25
3.1 文本排版 25
3.1.1 实现段落与段内换行(p和br) 25
3.1.2 设定标题(h1~h6) 27
3.1.3 使文字水平居中(center) 27
3.1.4 设定文栏位落的缩进(blockquote) 29
3.2 设定文字列表 29
3.2.1 建立无序列表(ul) 29
3.2.2 建立有序列表(ol) 30
3.3 HTML标记与HTML属性 31
3.3.1 用align属性控制段落的水平位置 31
3.3.2 用bgcolor属性设定背景颜色 32
3.3.3 设定文字的特殊样式 34
3.3.4 设定文字的大小和颜色(font) 35
3.4 忘记过时的HTML标记和属性 35
3.5 特殊文字元号 36
3.6 在网页中使用图像(img) 38
3.6.1 网页中的图片格式 38
3.6.2 一个简单的图片网页 38
3.6.3 使用路径 39
3.7 用width和height属性设定图片的尺寸 41
3.8 用alt属性为图像设定替换文本 43
3.9 辅助:利用Dreamweaver设定文本和图像 43
3.10 辅助:利用Dreamweaver代码视图提高效率 47
3.10.1 代码提示 47
3.10.2 代码摺叠 49
3.10.3 使用拆分视图对代码快速定位 49
3.11 本章小结 50
第4章 用HTML建立超连结(a) 51
4.1 设定基本文字超连结 51
4.1.1 URL的格式 51
4.1.2 URL的类型 52
4.2 设定页面内部的特定目标的连结 53
4.3 设定图片的超连结 54
4.4 设定电子邮件连结 54
4.5 设定以新视窗显示连结页面 55
4.6 创建热点区域 55
4.6.1 用HTML建立热点区域(map和area) 56
4.6.2 辅助:利用Dreamweaver精确定位热点区域 57
4.7 框架之间的连结 59
4.7.1 建立框架与框架集(frame和frameset) 59
4.7.2 用cols属性将视窗分为左右两部分 60
4.7.3 用rows属性将视窗分为上中下三部分 60
4.7.4 框架的嵌套 61
4.7.5 用src属性在框架中插入网页 61
4.7.6 用src属性在框架之间连结 62
4.7.7 创建嵌入式框架(iframe) 64
4.8 连结增多后网站的组织结构与维护 65
4.9 本章小结 66
第5章 用HTML创建表格 67
5.1 表格基本结构(table) 67
5.2 合併单元格 68
5.2.1 用colspan属性左右合併单元格 68
5.2.2 用rowspan属性上下合併单元格 69
5.3 用align属性设定对齐方式 70
5.4 用bgcolor属性设定表格背景色和框线颜色 71
5.5 用cellpadding属性和cellspacing属性设定距离 72
5.6 完整的表格标记(thead、tbody和tfoot) 73
5.7 需要抛弃的方法:用表格进行页面布局 75
5.8 本章小结 78
第2部分 CSS基础篇
第6章 (X)HTML与CSS概述 81
6.1 HTML与XHTML 81
6.1.1 追根溯源 81
6.1.2 DOCTYPE(文档类型)的含义与选择 82
6.1.3 XHTML与HTML的重要区别 83
6.2 (X)HTML与CSS 84
6.2.1 CSS标準 85
6.2.2 传统HTML的缺点 85
6.2.3 CSS的引入 86
6.2.4 如何编辑CSS 88
6.2.5 浏览器与CSS 89
6.3 本章小结 90
第7章 CSS核心基础 91
7.1 构造CSS规则 91
7.2 基本CSS选择器 92
7.2.1 标记选择器 92
7.2.2 类别选择器 93
7.2.3 ID选择器 95
7.3 在HTML中使用CSS的方法 96
7.3.1 行内样式 96
7.3.2 内嵌式 97
7.3.3 连结式 98
7.3.4 导入样式 99
7.3.5 各种方式的优先权问题 100
7.4 本章小结 102
第8章 手工编写与藉助工具 103
8.1 从零开始 103
8.2 设定标题 104
8.3 控制图片 105
8.4 设定正文 106
8.5 设定整体页面 106
8.6 对段落进行分别设定 107
8.7 完整代码 108
8.8 CSS的注释 109
8.9 辅助:使用Dreamweaver创建页面 109
8.10 辅助:在Dreamweaver中新建CSS规则 110
8.11 辅助:在Dreamweaver中编辑CSS规则 112
8.12 为图像创建CSS规则 114
8.13 本章小结 116
第9章 CSS的高级特性 117
9.1 複合选择器 117
9.1.1 “交集”选择器 117
9.1.2 “并集”选择器 118
9.1.3 后代选择器 120
9.2 CSS的继承特性 122
9.2.1 继承关係 122
9.2.2 CSS继承的运用 123
9.3 CSS的层叠特性 125
9.4 本章小结 126
第10章 用CSS设定文本样式 127
10.1 长度单位 127
10.2 颜色定义 128
10.3 準备页面 129
10.4 设定文字的字型 129
10.5 设定文字的倾斜效果 130
10.6 设定文字的加粗效果 131
10.7 英文字母大小写转换 132
10.8 控制文字的大小 133
10.9 文字的装饰效果 133
10.10 设定段落首行缩进 134
10.11 设定字词间距 135
10.12 设定段落内部的文字行高 136
10.13 设定段落之间的距离 136
10.14 控制文本的水平位置 137
10.15 设定文字与背景的颜色 138
10.16 设定段落的垂直对齐方式 138
10.16.1 使用line-height属性进行设定 138
10.16.2 更通用的解决方案 139
10.17 本章小结 140
第11章 用CSS设定图像效果 141
11.1 设定图片框线 141
11.1.1 基本属性 141
11.1.2 为不同的框线分别设定样式 142
11.2 图片缩放 144
11.3 图文混排 145
11.3.1 文字环绕 145
11.3.2 设定图片与文字的间距 146
11.4 案例——八大行星科普网页 147
11.5 设定图片与文字的对齐方式 150
11.5.1 横向对齐方式 150
11.5.2 纵向对齐方式 151
11.6 本章小结 154
第12章 用CSS设定背景颜色与图像 155
12.1 设定背景颜色 155
12.2 设定背景图像 156
12.3 设定背景图像平铺 157
12.4 设定背景图像位置 159
12.5 设定背景图片位置固定 162
12.6 设定标题的图像替换 163
12.7 使用滑动门技术的标题 166
12.8 本章小结 168
第3部分 CSS高级篇
第13章 CSS盒子模型 171
13.1 “盒子”与“模型”的概念探究 171
13.2 框线(border) 172
13.2.1 设定框线样式(border-style) 173
13.2.2 属性值的简写形式 174
13.2.3 框线与背景 176
13.3 设定内边距(padding) 177
13.4 设定外边距(margin) 178
13.5 盒子之间的关係 179
13.5.1 HTML与DOM 180
13.5.2 标準文档流 183
13.5.3 div标记与span标记 184
13.6 盒子在标準流中的定位原则 187
13.6.1 行内元素之间的水平margin 187
13.6.2 块级元素之间的竖直margin 188
13.6.3 嵌套盒子之间的margin 189
13.6.4 margin属性可以设定为负值 191
13.7 思考题 192
13.8 本章小结 196
第14章 盒子的浮动与定位 197
14.1 盒子的浮动 197
14.1.1 準备代码 197
14.1.2 案例1——设定第1个浮动的div 199
14.1.3 案例2——设定第2个浮动的div 199
14.1.4 案例3——设定第3个浮动的div 199
14.1.5 案例4——改变浮动的方向 200
14.1.6 案例5——再次改变浮动的方向 200
14.1.7 案例6——全部向左浮动 201
14.1.8 案例7——使用clear属性清除浮动的影响 202
14.1.9 案例8——扩展盒子的高度 203
14.2 盒子的定位 204
14.2.1 静态定位(static) 204
14.2.2 相对定位(relative) 205
14.2.3 绝对定位(absolute) 209
14.2.4 固定定位(fixed) 214
14.3 z-index空间位置 214
14.4 盒子的display属性 215
14.5 本章小结 216
第15章 用CSS设定表格样式 217
15.1 控制表格 217
15.1.1 表格中的标记 217
15.1.2 设定表格的框线 219
15.1.3 确定表格的宽度 222
15.1.4 其他与表格相关的标记 223
15.2 美化表格 224
15.2.1 搭建HTML结构 224
15.2.2 整体设定 225
15.2.3 设定单元格样式 226
15.2.4 斑马纹效果 227
15.2.5 设定列样式 227
15.3 设定滑鼠指针经过时整行变色提示的表格 232
15.3.1 在Firefox和IE 7中实现滑鼠指针经过时整行变色 232
15.3.2 在IE 6中实现滑鼠指针经过时整行变色 233
15.3.3 最终合併代码 234
15.4 辅助:使用jQuery实现更多效果 236
15.4.1 用jQuery实现斑马纹效果 237
15.4.2 用jQuery实现“前3行”特殊样式 239
15.4.3 用jQuery实现渐变背景色表格效果 240
15.4.4 用jQuery实现滑鼠指针经过变色效果 241
15.5 案例——日曆 241
15.5.1 搭建HTML结构 241
15.5.2 设定整体样式和表头样式 244
15.5.3 设定日曆单元格样式 245
15.6 本章小结 248
第16章 用CSS设定连结与导航选单 249
16.1 丰富的超连结特效 250
16.2 创建按钮式超连结 252
16.3 製作萤光灯效果的选单 253
16.3.1 HTML框架 254
16.3.2 设定容器的CSS样式 254
16.3.3 设定选单项的CSS样式 255
16.4 控制滑鼠指针 257
16.5 设定项目列表样式 257
16.5.1 列表的符号 258
16.5.2 图片符号 260
16.6 创建简单的导航选单 261
16.6.1 简单的竖直排列选单 261
16.6.2 横竖自由转换选单 264
16.7 设定图片翻转效果 265
16.8 套用滑动门技术的玻璃效果选单 266
16.8.1 基本思路 266
16.8.2 设定选单整体效果 267
16.8.3 使用“滑动门”技术设定玻璃材质背景 268
16.8.4 进一步解决的问题 269
16.9 滑鼠指针经过时给图片增加框线 270
16.10 本章小结 272
第17章 用CSS建立表单 273
17.1 表单的用途和原理 273
17.2 表单输入类型 274
17.2.1 文本输入框 274
17.2.2 单选按钮 274
17.2.3 複选按钮 275
17.2.4 密码输入框 275
17.2.5 按钮 276
17.2.6 多行文本框 277
17.2.7 列表框 277
17.3 CSS与表单 278
17.3.1 表单中的元素 278
17.3.2 像文字一样的按钮 281
17.3.3 多彩的下拉选单 283
17.4 案例——“数独”游戏网页 284
17.4.1 搭建基本表格 285
17.4.2 设定表格样式 286
17.4.3 加入文本输入框 287
17.4.4 设定文本输入框的样式 287
17.5 对齐文本框和旁边的图像按钮 289
17.6 本章小结 290
第18章 网页样式综合案例——灵活的电子相册 291
18.1 搭建框架 291
18.2 阵列模式 293
18.3 单列模式 298
18.4 改进阵列模式 301
18.5 IE 6兼容 304
18.6 双向联动模式 306
18.6.1 在Firefox中实现 306
18.6.2 IE 6兼容 311
18.6.3 改变方向 312
18.7 本章小结 314
第4部分 CSS布局篇
第19章 固定宽度布局剖析与製作 317
19.1 向报纸学习排版思想 317
19.2 CSS排版观念 319
19.2.1 两列布局 320
19.2.2 三列布局 320
19.2.3 多列布局 321
19.2.4 布局结构的表达式与结构图 321
19.3 圆角框 325
19.3.1 準备图像 325
19.3.2 搭建HTML结构 326
19.3.3 放置背景图像 328
19.3.4 设定样式并修复缺口 329
19.4 单列布局 330
19.4.1 放置第一个圆角框 331
19.4.2 设定圆角框的CSS样式 331
19.4.3 放置其他圆角框 334
19.5 “1-2-1”固定宽度布局 335
19.5.1 準备工作 336
19.5.2 绝对定位法 337
19.5.3 浮动法 339
19.6 “1-3-1”固定宽度布局 341
19.7 “1-((1-2)+1)-1”固定宽度布局 343
19.8 本章小结 344
第20章 变宽度网页布局剖析与製作 345
20.1 “1-2-1”变宽度网页布局 345
20.1.1 “1-2-1”等比例变宽布局 345
20.1.2 “1-2-1”单列变宽布局 348
20.2 “1-3-1”宽度适应布局 352
20.2.1 “1-3-1”三列宽度等比例布局 352
20.2.2 “1-3-1”单侧列宽度固定的变宽布局 352
20.2.3 “1-3-1”中间列宽度固定的变宽布局 353
20.2.4 进一步的思考 355
20.2.5 “1-3-1”双侧列宽度固定的变宽布局 356
20.2.6 “1-3-1”中列和侧列宽度固定的变宽布局 358
20.3 变宽布局方法总结 359
20.4 分列布局背景色问题 360
20.4.1 设定固定宽度布局的列背景色 360
20.4.2 设定特殊宽度变化布局的列背景色 364
20.4.3 设定单列宽度变化布局的列背景色 364
20.5 CSS排版与传统的表格方式排版的分析 365
20.6 浏览器的兼容性问题 368
20.7 CSS布局页面的调试技巧 368
20.7.1 技巧1:设定背景色或者框线,确定错误範围 369
20.7.2 技巧2:删除无关代码,暴露核心矛盾 369
20.7.3 技巧3:先用Firefox调试,然后使它兼容IE 369
20.7.4 技巧4:善于利用工具,提高调试效率 370
20.7.5 技巧5:善于提问,寻求帮助 370
20.8 本章小结 370
第21章 网页布局综合案例——儿童用品网上商店 371
21.1 案例概述 371
21.2 内容分析 372
21.3 HTML结构设计 374
21.4 原型设计 377
21.5 页面方案设计 380
21.6 布局设计 383
21.6.1 整体样式设计 383
21.6.2 页头部分 384
21.6.3 内容部分 386
21.6.4 页脚部分 389
21.7 细节设计 389
21.7.1 页头部分 389
21.7.2 内容部分 395
21.7.3 左侧的主要内容列 395
21.7.4 右边栏 398
21.8 CSS布局的优点 402
21.9 互动效果设计 403
21.9.1 次导航栏 403
21.9.2 主导航栏 404
21.9.3 账号区 404
21.9.4 图像框线 405
21.9.5 产品分类 407
21.10 遵从Web标準的设计流程 407
21.11 从“网页”到“网站” 408
21.11.1 历史回顾 408
21.11.2 不完善的办法 408
21.11.3 伺服器出场 409
21.11.4 CMS出现 409
21.11.5 具体操作 409
21.12 本章小结 410
附录A 网站发布与管理 411
A.1 在Internet上建立自己的Web站点 411
A.1.1 製作网站内容 411
A.1.2 申请域名 411
A.1.3 信息发布 411
A.2 租用虚拟主机空间 412
A.2.1 了解基本的技术名词 412
A.2.2 选择和租用虚拟主机 413
A.3 向伺服器上传网站内容 414
A.3.1 使用Dreamweaver上传档案 414
A.3.2 使用IE浏览器上传档案 415
A.3.3 使用专业FTP工具上传档案 416
A.4 网站管理 418
A.4.1 修改密码 418
A.4.2 集团信箱管理 419
A.4.3 注意事项 420
附录B CSS英文小字典 421