
本书系统地介绍了网站制作中各种常用的HTML标签和CSS属性,以及网站各个部分和各种布局的实现方法,还提供了大量实例来引导读者学习,力求让读者获得真正实用的知识。本书涉及面广,从HTML到CSS样式,再到脚本语言,涵盖网站开发的很多重要知识。本书附带1张光盘,收录了本书配套多媒体教学视频及涉及的源文件,便于读者高效、直观地学习。
全书共有21章,分为3篇。第1篇讲解了网站开发基础、超链接、图像、表格、多媒体元素、框架、列表、表单;第2篇讲解了CSS样式、属性、脚本、事件;第3篇讲解了网站开发实例,详细介绍了创建博客的过程和方法,以及网站常用模块的设计方法,让读者通过实例来提高实战水平。
本书适合所有想学习HTML与CSS网站开发技术的初、中级读者快速入门,也适合大中专院校的师生和培训班的学员作为教材使用。
前 言
随着Web技术的不断发展,网站越来越成为人们浏览信息的一个重要媒介。同样地,随着网站的兴起,越来越多的人开始关注网站的开发。如今互联网已经从Web 1.0向Web 2.0过渡了,传统的使用表格布局的页面带来的缺点表现得越来越明显了。随着Web 2.0的发展,使用HTML和CSS进行网页布局的技术显得越来越重要,而且这也将会是未来发展的趋势。
作为网站制作人员的必修课,笔者结合自己多年的网站开发经验和心得体会,精心编写了本书。通过系统的讲解和详细的示例,相信能使对网页设计有兴趣的读者成为专业人士。希望各位读者能在本书的引领下成为一名网站制作的高手。本书结合目前流行的网站制作实例,深入浅出地讲解了网站制作中经常要用到的各种HTML标签和CSS样式的属性,并以大量实例贯穿于全书的讲解之中,最后还详细介绍了博客网站的开发实例,使读者在实战中更深入地了解网站的开发。学习完本书后,读者应该可以具备独立开发网站的能力。
本书有何特色
1.配多媒体教学视频
本书提供配套的多媒体教学视频辅助教学,高效、直观,学习效果好。
2.门槛低,容易入门
本书选取了网页开发最常见的技术进行讲解,不要求读者有太多基础,只要读者熟悉Windows操作系统即可顺利学习本书内容。
3.内容全面、系统
本书详细介绍了网站开发所需要的知识,包括HTML、CSS、脚本语言等,使读者可以全面了解网站开发所需的知识。
4.讲解由浅入深,循序渐进
本书的编排采用循序渐进的方式,内容梯度从易到难,讲解由浅入深,适合各个层次的读者阅读,并均有所获。
5.写作细致,处处为读者着想
本书内容编排、概念表述、语法讲解、示例讲解、源代注释等都很细致,作者讲解时不厌其烦,细致入微,将问题讲解得很清楚,扫清了读者的学习障碍。
6.贯穿大量的开发实例和技巧
本书在讲解知识点时贯穿了大量短小精悍的典型实例,并给出了大量的开发技巧,力求让读者获得真正实用的知识。
7.给出了综合项目案例
本书在最后3章以实例的形式详细介绍了HTML+CSS网站制作的过程,使读者更为直观地了解网站的制作技巧。
8.提供教学PPT,方便老师教学
本书适合大中专院校和职业学校作为职业技能的教学用书,所以专门制作了教学PPT,以方便各院校的老师教学时使用。
本书内容安排
第1篇 HTML网站开发(第1~11章)
本篇主要内容包括:网站开发基础、HTML基础、网站中的文本样式标签、超链接、图像的使用、表格的使用、多媒体元素、框架、列表元素、表单元素、网站布局。通过本篇的学习,读者可以对HTML语言有更深入的了解,为网页的结构制作打下坚实的基础。
第2篇 CSS样式(第12~18章)
本篇主要内容包括:CSS样式基础知识、CSS背景属性、文本属性、边框属性、列表属性、CSS伪类和伪元素、脚本、事件、语法规范和文档类型声明、XHTML模块化和结构化。通过本篇的学习,读者可以掌握使用CSS对网站进行布局的方法。
第3篇 网站开发实例(第19~21章)
本篇主要内容包括:博客雏形设计实例、网站常用模块实例以及完整博客网站的设计。通过本篇的学习,读者可以全面应用前面章节所学的开发技术进行网站的开发,达到可以独立开发网站的水平。
本书光盘内容
* 本书重点内容的配套教学视频;
* 本书实例涉及的源代码。
本书读者对象
* HTML与CSS入门人员;
* 网页专业设计人员;
* 网页维护人员;
* 网站建设和开发人员;
* 网站制作爱好者;
* 网站制作培训机构人员;
* 大中专院校的学生。
本书阅读建议
* 建议没有基础的读者,从前之后顺次阅读,尽量不要跳跃。
* 书中的实例和示例建议读者都要亲自上机动手实践,学习效果更好。
* 课后习题都动手做一做,以检查自己对本章内容的掌握程度,如果不能顺利完成,建议回过头来重新学习一下本章内容。
* 学习每章内容时,建议读者先仔细阅读书中的讲解,然后再结合本章教学视频,学习效果更佳。
本书作者
本书由顼宇峰主笔编写。其他参与编写的人员有毕梦飞、蔡成立、陈涛、陈晓莉、陈燕、崔栋栋、冯国良、高岱明、黄成、黄会、纪奎秀、江莹、靳华、李凌、李胜君、李雅娟、刘大林、刘惠萍、刘水珍、马月桂、闵智和、秦兰、汪文君、文龙、陈冠军、张昆。
阅读本书的过程中若有疑问,请和我们联系。请发E-mail到book@wanjuanchina.net或bookservice2008@163.com,或者到www.wanjuanchina.net的图书论坛上留言,以获得 帮助。
编著者
??
??
??
??
零点起飞学HTML+CSS
·II·
·III·
目 录
第1篇 HTML网站开发
第1章 网站开发基础( 教学视频:23分钟) 2
1.1 网站的基本概念 2
1.2 网站的基本架构 3
1.3 Web浏览器 4
1.3.1 Web浏览器标准 4
1.3.2 常见Web浏览器 5
1.4 HTML和XHTML 6
1.4.1 了解HTML和XHTML 6
1.4.2 HTML和XHTML的编辑工具 6
1.5 常见颜色单位 7
1.6 常见ASCII代码 8
1.7 常见长度单位 9
1.8 本章小结 9
1.9 本章习题 10
第2章 HTML基础( 教学视频:38分钟) 11
2.1 HTML页面结构 11
2.1.1 <html>元素 11
2.1.2 头部元素<head> 11
2.1.3 主体元素<body> 12
2.1.4 标题元素<title> 12
2.2 元信息标签<meta> 12
2.2.1 页面描述信息name 13
2.2.2 HTTP标题信息http-equiv 14
2.3 段落排版标签 15
2.3.1 段落标签<p> 15
2.3.2 换行标签<br> 15
2.4 水平分隔线<hr> 16
2.4.1 插入水平分隔线<hr> 16
2.4.2 设置水平分隔线粗细 17
2.4.3 设置水平分隔线长度 17
2.4.4 设置水平分隔线显示位置 18
2.4.5 设置水平分隔线颜色 19
2.4.6 取消水平分隔线阴影 19
2.5 注释标签 20
2.6 设置网站背景色 20
2.7 结束标签 21
2.8 本章小结 21
2.9 本章习题 22
第3章 网站中的文本样式标签( 教学视频:43分钟) 23
3.1 设置标题字体 23
3.2 设置网页文字样式 24
3.2.1 设置文本大小 24
3.2.2 设置文本字体 25
3.3 文本布局标签 26
3.3.1 缩进标签<blockquote> 26
3.3.2 保留格式标签<pre> 27
3.3.3 使用内联行<span> 28
3.4 基于物理样式的文本标签 28
3.4.1 加粗标签<b> 28
3.4.2 斜体标签<i> 29
3.4.3 下划线标签<u>/<ins> 30
3.4.4 删除线标签<del>/<s> 31
3.4.5 等宽字体效果<tt> 32
3.4.6 设置上标<sup> 33
3.4.7 设置下标<sub> 33
3.5 基于逻辑样式的文本标签 34
3.5.1 引用标签<samp> 34
3.5.2 变量名称定义标签<var> 35
3.5.3 文献参考标签<cite> 35
3.5.4 设置小号字体<small> 36
3.5.5 设置大号字体<big> 36
3.6 本章小结 37
3.7 本章习题 37
第4章 超链接( 教学视频:22分钟) 39
4.1 创建超链接 39
4.2 href属性 39
4.2.1 连接到同一页面其他位置 39
4.2.2 本地相对路径 41
4.2.3 空间网址绝对路径:URL 43
4.3 target属性 43
4.3.1 在新窗口打开_blank 43
4.3.2 在父窗口中打开_parent 44
4.3.3 在当前窗口中打开_self 45
4.3.4 在整个窗口中打开_top 47
4.4 本章小结 47
4.5 本章习题 47
第5章 图像的使用( 教学视频:47分钟) 48
5.1 图像的格式 48
5.2 设置背景图像 48
5.3 图像标签<img> 49
5.3.1 选择路径src 49
5.3.2 替换文本alt 50
5.3.3 图片宽度width 51
5.3.4 图片高度height 51
5.3.5 图片排版align 52
5.3.6 设定边框border 55
5.3.7 图像间距 56
5.4 图像超链接 58
5.4.1 本地图像链接 58
5.4.2 站外图像链接 59
5.4.3 创建图像矩形热点区域 59
5.4.4 创建图像圆形热点区域 60
5.4.5 创建图像多边热点区域 62
5.4.6 图像占位符 63
5.5 插入视频文件 64
5.5.1 使用路径dynsrc 64
5.5.2 循环播放次数loop 64
5.5.3 播放方式start 65
5.6 本章小结 66
5.7 本章习题 66
第6章 表格的使用( 教学视频:58分钟) 68
6.1 表格的基本构成 68
6.2 设置表格<table> 68
6.2.1 设置行标签<tr> 68
6.2.2 设置列标签<td> 69
6.2.3 设置表头单元格<th> 69
6.3 表格属性 70
6.3.1 表格宽度width 70
6.3.2 表格高度height 71
6.3.3 设置背景图片background 72
6.3.4 表格间距cellspacing 74
6.3.5 设置单元格内的距离cellpadding 74
6.4 表格边框 75
6.4.1 边框宽度border 76
6.4.2 边框颜色bordercolor 77
6.4.3 亮边框颜色bordercolorlight 77
6.4.4 暗边框颜色bordercolordark 78
6.4.5 不显示外边框void 79
6.4.6 显示上下边框hsides 80
6.4.7 显示左右边框vsides 81
6.4.8 单独显示表格上、下、左、右边框 83
6.5 设置对齐方式 85
6.5.1 水平对齐方式align 85
6.5.2 垂直对齐方式valign 88
6.6 行和列的合并 89
6.6.1 行的合并rowspan 89
6.6.2 列的合并colspan 90
6.7 表格分组 91
6.7.1 表头标签<thead> 91
6.7.2 主体标签<tbody> 92
6.7.3 行尾标签<tfoot> 92
6.8 表格标题标签<caption> 93
6.9 本章小结 94
6.10 本章习题 94
第7章 多媒体元素( 教学视频:43分钟) 96
7.1 活动字幕<marquee> 96
7.1.1 <marquee>标签概述 96
7.1.2 滚动方式behavior 96
7.1.3 滚动字幕背景颜色bgcolor 98
7.1.4 字幕滚动方向direction 99
7.1.5 字幕滚动速度scrollamount 100
7.1.6 滚动字幕停顿时间scrolldelay 101
7.1.7 设置滚动字幕水平和垂直空白区域 101
7.1.8 字幕滚动次数loop 102
7.1.9 设置鼠标滑过onMouseOver 103
7.2 插入多媒体元素 103
7.2.1 插入音乐 104
7.2.2 插入flash 106
7.2.3 显示flash 106
7.2.4 <embed>标签 107
7.3 插入背景音乐 109
7.3.1 背景音乐路径src 109
7.3.2 自动播放autostart 109
7.3.3 循环播放loop 110
7.4 本章小结 111
7.5 本章习题 111
第8章 框架( 教学视频:43分钟) 112
8.1 认识框架 112
8.2 基本结构 112
8.3 框架集<frameset> 113
8.3.1 框架集宽度cols 113
8.3.2 框架集高度rows 115
8.3.3 边框集边框粗细border 117
8.3.4 设置边框颜色bordercolor 118
8.3.5 设置是否显示边框frameborder 119
8.3.6 设置框架间隔framespacing 120
8.3.7 不支持框架标签<noframes> 121
8.4 框架<frame> 122
8.4.1 设置框架边框不可调节noresize 122
8.4.2 框架集嵌套 124
8.5 框架链接 125
8.6 嵌入式框架<iframe> 128
8.6.1 滚动条scrolling 128
8.6.2 框架窗口透明设置allowtransparency 129
8.7 本章小结 130
8.8 本章习题 130
第9章 列表元素( 教学视频:24分钟) 132
9.1 无序列表元素<ul> 132
9.1.1 无序列表结构 132
9.1.2 无序列表样式 132
9.2 有序列表元素<ol> 134
9.2.1 有序列表结构 134
9.2.2 有序列表样式 135
9.3 嵌套列表 137
9.4 定义列表元素<dl> 139
9.4.1 定义整体列表结构<dl> 139
9.4.2 定义列表术语标签<dt> 139
9.4.3 定义注释项标签<dd> 140
9.5 本章小结 141
9.6 本章习题 141
第10章 表单元素( 教学视频:27分钟) 142
10.1 表单属性 142
10.1.1 链接跳转action 142
10.1.2 链接跳转方法method 142
10.1.3 表单名称name 143
10.2 输入标签<input> 143
10.2.1 文本框 143
10.2.2 密码输入框 144
10.2.3 单选框 144
10.2.4 复选框 145
10.2.5 隐藏区域 146
10.2.6 提交按钮 147
10.2.7 重置按钮 147
10.2.8 图像按钮 148
10.3 下拉列表框 149
10.4 文本区域 150
10.5 本章小结 151
10.6 本章习题 151
第11章 网站布局( 教学视频:17分钟) 153
11.1 <div>标签 153
11.1.1 <div>标签在内容中的应用 153
11.1.2 div嵌套 153
11.1.3 定义浮动框架 155
11.1.4 定义左右结构的框架 155
11.1.5 定义横向结构的框架 156
11.1.6 定义纵向结构的框架 157
11.2 本章小结 158
11.3 本章习题 159
第2篇 CSS样式
第12章 CSS样式基础知识( 教学视频:19分钟) 162
12.1 CSS样式表类别 162
12.1.1 外部样式表 162
12.1.2 内部样式表 162
12.1.3 内嵌样式表 163
12.2 选择器 164
12.2.1 派生选择器 164
12.2.2 id选择器 165
12.2.3 类选择器 166
12.3 CSS优先级 167
12.4 本章小结 169
12.5 本章习题 169
第13章 CSS属性( 教学视频:91分钟) 170
13.1 CSS背景属性 170
13.1.1 背景颜色background-color 170
13.1.2 背景图片background-image 171
13.1.3 设置重复背景图片background-repeat 172
13.1.4 设置固定背景图片background-attachment 174
13.1.5 设置背景图片位置background-position 175
13.2 CSS文本属性 177
13.2.1 字体颜色color 177
13.2.2 字符间距letter-spacing 177
13.2.3 行间距line-height 178
13.2.4 文本对齐方式text-align 179
13.2.5 修饰文本text-decoration 179
13.2.6 文本缩进text-indent 181
13.2.7 转换大小写text-transform 181
13.2.8 控制文本换行white-space 182
13.2.9 字体大小font-size 183
13.2.10 选择字体font-family 184
13.3 CSS边框属性 184
13.3.1 边框样式border-style 184
13.3.2 边框颜色border-color 186
13.3.3 边框宽度border-width 186
13.3.4 设置上边框border-top 187
13.3.5 设置右边框border-right 188
13.3.6 设置下边框border-bottom 188
13.3.7 设置左边框border-left 189
13.3.8 综合声明边框border 189
13.4 CSS外边距 190
13.4.1 居中auto 190
13.4.2 上外边距margin-top 191
13.4.3 右外边距margin-right 192
13.4.4 下外边距margin-bottom 193
13.4.5 左外边距margin-left 195
13.4.6 综合声明外边距margin 196
13.5 CSS内边距 198
13.5.1 上内边距padding-top 198
13.5.2 右内边距padding-right 199
13.5.3 下内边距padding-bottom 200
13.5.4 左内边距padding-left 201
13.5.5 综合声明内边距padding 202
13.6 CSS列表属性 204
13.6.1 定义列表排序图案list-style-image 204
13.6.2 定义列表排序位置list-style-position 205
13.6.3 定义列表排序符号样式list-style-type 206
13.6.4 综合声明列表属性list-style 209
13.7 本章小结 211
13.8 本章习题 211
第14章 CSS伪类和伪元素( 教学视频:17分钟) 212
14.1 超链接的伪类 212
14.1.1 未访问的链接伪类:link 212
14.1.2 已被访问的链接的伪类:visited 213
14.1.3 鼠标经过时链接的伪类:hover 214
14.1.4 鼠标按下时链接的伪类:active 215
14.2 伪元素 218
14.2.1 首字母样式设置:first-letter 218
14.2.2 首行样式设置:first-line 219
14.3 本章小结 220
14.4 本章习题 220
第15章 脚本( 教学视频:12分钟) 221
15.1 定义脚本<script> 221
15.2 替换文本<noscript> 223
15.3 嵌入对象<object> 224
15.4 本章小结 224
15.5 本章习题 224
第16章 事件( 教学视频:80分钟) 226
16.1 常见事件 226
16.1.1 单击事件onClick 226
16.1.2 双击事件onDblClick 228
16.2 鼠标触发事件onMouse 229
16.2.1 鼠标按下事件onMouseDown 230
16.2.2 鼠标释放事件onMouseUp 230
16.2.3 鼠标停留事件onMouseMove 231
16.2.4 鼠标经过事件onMouseOver 232
16.2.5 鼠标离开事件onMouseOut 233
16.3 键盘触发事件onKey 234
16.3.1 按下键盘按键事件onkeydown 234
16.3.2 按下并任意释放一个键事件onkeypress 235
16.3.3 释放键盘按键事件onkeyup 235
16.4 页面事件 236
16.4.1 图片下载时被中断事件onAbort 236
16.4.2 当前页面的内容将要被改变时触发事件onBeforeUnload 237
16.4.3 页面出错事件onError 238
16.4.4 页面加载完事件onLoad 239
16.4.5 改变浏览器的窗口大小时触发的事件onResize 239
16.4.6 拖动滚动条事件onScroll 240
16.4.7 离开页面事件onUnload 240
16.5 表单事件 241
16.5.1 选定元素失去焦点事件onBlur 242
16.5.2 选定元素发生改变事件onChange 242
16.5.3 选定元素获得焦点事件onFocus 244
16.5.4 表单重置事件onReset 245
16.5.5 表单提交事件onSubmit 245
16.6 滚动字幕事件 247
16.6.1 字幕内容滚动至显示范围之外事件onBounce 247
16.6.2 完成需要显示的内容后事件onFinish 248
16.6.3 开始显示内容事件onStart 248
16.7 编辑事件 249
16.7.1 出现菜单事件onContextMenu 249
16.7.2 内容被复制后事件onCopy 250
16.7.3 内容被剪切时事件onCut 251
16.7.4 鼠标拖动时事件onDrag 252
16.7.5 失去鼠标移动所形成选择焦点时事件onLoseCapture 253
16.7.6 内容被粘贴时事件onPaste 254
16.7.7 内容被选择时事件onSelect 254
16.7.8 内容选择将开始发生时事件onSelectStart 255
16.8 数据绑定 256
16.9 外部事件 257
16.9.1 文档被打印后事件onAfterPrint 257
16.9.2 文档即将被打印时事件onBeforePrint 257
16.9.3 滤镜效果发生变化时事件onFilterChange 258
16.9.4 按下F1或者帮助选择时事件onHelp 259
16.9.5 对象的属性之一发生变化时事件onPropertyChange 260
16.10 本章小结 261
16.11 本章习题 261
第17章 语法规范和文档类型声明( 教学视频:22分钟) 263
17.1 语法规范 263
17.1.1 属性名称必须小写 263
17.1.2 属性值必须加引号 264
17.1.3 属性不能简写 264
17.2 设置id属性 266
17.3 语言属性(lang) 266
17.4 文档类型DOCTYPE 267
17.5 DTD声明 267
17.5.1 严格DTD 268
17.5.2 过渡DTD 268
17.5.3 框架DTD 269
17.6 使用W3C验证器 270
17.7 本章小结 271
17.8 本章习题 271
第18章 XHTML模块化和结构化( 教学视频:16分钟) 272
18.1 模块化的原因 272
18.2 XHTML规则概要 273
18.3 标记文档 273
18.4 误用CSS 275
18.5 正确使用元素结构化 276
18.6 正确使用div、id和class 277
18.7 本章小结 279
18.8 本章习题 279
第3篇 网站开发实例
第19章 博客雏形( 教学视频:93分钟) 282
19.1 制作文本内容 282
19.1.1 <table>制作文本内容效果 282
19.1.2 div+CSS制作文本内容效果 285
19.2 制作列表 290
19.2.1 制作有序日志列表 290
19.2.2 制作无序日志列表 294
19.2.3 制作自定义网站地图 295
19.3 制作留言版 296
19.4 制作图片展示 298
19.4.1 table制作图片展示 298
19.4.2 div+CSS制作图片展示效果 302
19.5 制作图片滚动 304
19.5.1 制作图片左右滚动 304
19.5.2 制作图片上下滚动 307
19.6 制作文字滚动 310
19.6.1 制作文字左右滚动 311
19.6.2 制作上下滚动 313
19.7 本章小结 315
第20章 网站常用模块( 教学视频:85分钟) 316
20.1 制作导航条 316
20.1.1 制作横向导航条 316
20.1.2 制作纵向导航条 321
20.2 制作下拉菜单 324
20.2.1 制作横向下拉菜单 325
20.2.2 制作纵向下拉菜单 331
20.3 CSS制作小三角形菜单 335
20.4 制作居中效果 339
20.4.1 制作div水平居中 339
20.4.2 制作div垂直居中 340
20.5 制作搜索引擎 342
20.6 制作图片浏览器 344
20.7 JavaScript小程序 347
20.7.1 显示时间 347
20.7.2 鼠标跟随字体 349
20.8 本章小结 351
第21章 整合我的博客( 教学视频:37分钟) 352
21.1 使用table整合我的博客 352
21.1.1 整合“关于我们”页面 352
21.1.2 整合“鲜花展示”页面 354
21.1.3 整合“留言版”页面 357
21.1.4 整合“联系我们”页面 360
21.2 使用div+CSS整合网站 362
21.2.1 整合“关于我们”页面 362
21.2.2 整合“鲜花展示”页面 365
21.2.3 整合“最新日志”页面 367
21.2.4 整合“留言版”页面 369
21.2.5 整合“联系我们”页面 371
21.3 本章小结 374
??
??
??
??
零点起飞学HTML+CSS
·XIV·
·XIII·