第1章 怎样开发设计网站 1
1.1网站开发设计需要什么 1
1.1.1需要HTML文件 1
1.1.2需要Div来布局 2
1.1.3需要CSS来定义样式 2
1.1.4需要JavaScript 3
1.2通过Dreamweaver开发Div+CSS 3
1.2.1通过Dreamweaver在HTML页面里插入Div 4
1.2.2 Dreamweaver的CSS代码支持 5
1.3一个简单的网页需要包含什么 6
1.3.1 head部分 7
1.3.2 body部分 7
1.3.3编写注释 7
第2章 HTML入门基础 9
2.1 HTML标签 9
2.1.1段落标签 9
2.1.2文本标签 10
2.1.3超链接标签 12
2.1.4图像标签 13
2.1.5表格标签 14
2.2 HTML5简介 15
2.2.1 HTML5基础 15
2.2.2向后兼容 16
2.2.3更加简化 16
2.2.4 HTML5语法中的3个要点 17
2.3新增的主体结构元素 18
2.3.1实例应用——article元素 18
2.3.2实例应用——section元素 19
2.3.3实例应用nav元素 21
2.3.4 aside元素 23
2.4新增的非主体结构元素 24
2.4.1实例应用——header元素 24
2.4.2实例应用——hgroup元素 26
2.4.3实例应用——footer元素 26
2.4.4实例应用——address元素 28
第3章 CSS样式设计基础 30
3.1初识CSS 30
3.1.1 CSS基本语法 30
3.1.2添加CSS的方法 31
3.1.3设计第一个实例 32
3.2 CSS选择器 36
3.2.1 CSS选择器概述 36
3.2.2标签选择器 37
3.2.3类选择器 37
3.2.4 ID选择器 38
3.2.5伪类选择器和伪元素 39
3.2.6群组选择器 41
3.2.7相邻选择器 43
3.2.8通用选择器 44
3.3 CSS属性和属性值 45
3.3.1 CSS属性 45
3.3.2 CSS单位 46
3.3.3设置颜色 47
第4章 使用CSS设置文本和段落样式 50
4.1字体属性 50
4.1.1字体font-family 50
4.1.2字号font-size 51
4.1.3字体风格font-style 53
4.1.4字体加粗font-weight 54
4.1.5字体变形font-variant 55
4.2段落属性 56
4.2.1单词间隔word-spacing 56
4.2.2字符间隔letter-spacing 57
4.2.3文字修饰text-decoration 58
4.2.4垂直对齐方式vertical-align 59
4.2.5文本转换text-transform 61
4.2.6水平对齐方式text-align 62
4.2.7文本缩进text-indent 63
4.2.8文本行高line-height 64
4.2.9处理空白white-space 65
4.2.10文本反排unicode-bidi、 direction 67
4.3实例应用 68
4.3.1控制文本的行高和间隔 68
4.3.2实现文本垂直居中 69
第5章 使用CSS设置图片和背景样式 71
5.1图片样式设置 71
5.1.1定义图片边框 71
5.1.2文字环绕图片 73
5.2背景样式设置 74
5.2.1设置页面背景颜色 74
5.2.2定义背景图片 76
5.2.3背景图片的重复 77
5.2.4背景关联 79
5.2.5定义背景图片的位置 81
5.3实例应用 82
5.3.1鼠标经过图片显示文字 83
5.3.2鼠标移上改变图片透明度 84
5.3.3将正方形图片显示为圆形图片 84
5.3.4多图排列展示放大特效 86
第6章 使用CSS控制列表样式 90
6.1有序列表 90
6.1.1有序列表标签〈ol〉 90
6.1.2有序列表的序号类型type 92
6.1.3有序列表的起始数值start 93
6.2无序列表 94
6.2.1无序列表标签〈ul〉 94
6.2.2无序列表的类型〈type〉 95
6.2.3目录列表标签〈dir〉 97
6.2.4定义列表标签〈dl〉 97
6.2.5菜单列表标签〈menu〉 99
6.3实例应用 99
6.3.1设计背景变换的导航栏目 100
6.3.2设计横向导航菜单 102
6.3.3竖排导航 104
6.3.4设计网页下拉菜单 108
6.3.5商品列表分类可右侧展开详细分类 111
6.3.6 CSS网页导航条 115
第7章 使用CSS设计表单样式 118
7.1表单form 118
7.1.1程序提交action 118
7.1.2表单名称name 119
7.1.3传送方法method 119
7.1.4编码方式enctype 120
7.1.5目标显示方式target 120
7.2插入表单对象 121
7.2.1文字字段text 121
7.2.2密码域password 122
7.2.3单选按钮radio 124
7.2.4复选框checkbox 125
7.2.5普通按钮button 126
7.2.6提交按钮submit 126
7.2.7重置按钮reset 127
7.2.8图像域image 129
7.2.9 隐藏域hidden 130
7.2.10文件域file 131
7.3菜单和列表 131
7.3.1下拉菜单 131
7.3.2列表项 133
7.4表单样式实例 134
7.4.1定义背景样式 134
7.4.2设置输入文本的样式 136
7.4.3下画横线代替文本框特效 138
7.4.4随鼠标单击换色的输入框 139
7.4.5文本框中只能输入数字 142
第8章 使用CSS设计表格样式 144
8.1创建表格 144
8.1.1表格的基本构成table、 tr、td 144
8.1.2设置表格的标题caption 145
8.2设置表格基本属性 147
8.2.1设置表格宽度width 147
8.2.2设置表格高度height 148
8.2.3设置表格对齐方式align 149
8.3设置表格的属性 151
8.3.1表格的边框宽度border 151
8.3.2表格边框颜色bordercolor 152
8.3.3设置表格阴影 153
8.3.4设置表格的渐变背景 154
8.4实例应用 156
8.4.1变换背景色的表格 156
8.4.2表格隔行换色特效 158
8.4.3 dl dt dd实现表格布局 161
8.4.4鼠标经过时改变表格行的颜色 163
8.4.5 CSS用虚线美化表格的边框 165
第9章 使用CSS定义链接样式 167
9.1链接样式设置基础 167
9.1.1光标属性cursor 167
9.1.2定义下画线样式text-decoration 169
9.1.3未访问过的链接a：link 170
9.1.4鼠标悬停时状态a：hover 171
9.1.5已访问超链接样式a：visited 172
9.1.6超链接的激活样式a：active 172
9.2实例应用 173
9.2.1不同的鼠标显示样式 173
9.2.2向链接添加不同的样式 176
9.2.3按钮式超链接 178
9.2.4翻转式超链接 180
9.2.5设计导航菜单 182
第10章 CSS中的滤镜 185
10.1滤镜概述 185
10.2动感模糊 185
10.3对颜色进行透明处理 186
10.4设置阴影 188
10.5对象的翻转 189
10.6发光效果 190
10.7 X光片效果 192
10.8波形滤镜 193
10.9遮罩效果 195
第11章 Div+CSS布局入门 196
11.1认识盒模型 196
11.2外边距 197
11.2.1上外边距margin-top 197
11.2.2右外边距margin-right 198
11.2.3下外边距 margin-bottom 199
11.2.4左外边距margin-left 201
11.3内边距 202
11.3.1上内边距padding-top 202
11.3.2右内边距padding-right 203
11.3.3下内边距padding-bottom 203
11.3.4左内边距padding-left 204
11.4边框 205
11.4.1边框样式border-style 205
11.4.2边框宽度border-width 207
11.4.3边框颜色border-color 209
11.4.4边框属性border 210
11.5 CSS布局理念 211
11.5.1将页面用Div分块 212
11.5.2设计各块的位置 212
11.5.3用CSS定位 213
第12章 用CSS定位控制网页布局 215
12.1 position定位 215
12.1.1绝对定位absolute 215
12.1.2固定定位fixed 217
12.1.3相对定位relative 219
12.2浮动定位 221
12.2.1 float属性 221
12.2.2浮动布局的新问题 223
12.2.3清除浮动clear 224
12.3定位层叠 226
12.3.1层叠顺序 226
12.3.2简单嵌套元素中的层叠定位 228
12.3.3包含子元素的复杂层叠定位 229
12.4常见布局类型 231
12.4.1一列固定宽度 231
12.4.2一列宽度自适应 232
12.4.3两列固定宽度 233
12.4.4两列宽度自适应 235
12.4.5两列右列宽度自适应 237
12.4.6三列浮动中间宽度自适应 237
12.5实例应用 240
12.5.1带有边框和边界的图像浮动于文本右侧 240
12.5.2创建水平菜单 241
第13章 移动网页设计基础CSS3 243
13.1边框 243
13.1.1圆角边框border-radius 243
13.1.2边框图片border-image 247
13.1.3边框阴影box-shadow 248
13.2背景 250
13.2.1背景图片尺寸background-size 250
13.2.2背景图片定位区域background-origin 251
13.2.3背景绘制区域background-clip 253
13.3文本 255
13.3.1文本阴影text-shadow 256
13.3.2强制换行word-wrap 256
13.3.3文本溢出text-overflow 257
13.3.4文字描边text-stroke 258
13.3.5文本填充颜色text-fill-color 259
13.4多列 261
13.4.1创建多列column-count 261
13.4.2列的宽度column-width 262
13.4.3列的间隔column-gap 263
13.4.4列的规则column-rule 264
13.5转换 266
13.5.1移动translate（） 266
13.5.2旋转rotate（） 267
13.5.3缩放scale（） 268
13.5.4扭曲skew（） 270
13.5.5矩阵matrix（） 270
13.6过渡 272
13.7动画 273
13.7.1@keyframes规则声明动画 273
13.7.2 animation使用动画 275
13.8用户界面 277
13.8.1 box sizing 277
13.8.2 resize 278
13.8.3 outline offset 280
13.9实例应用 281
13.9.1鼠标放上去显示全部内容 281
13.9.2美观的图片排列 283
第14章 CSS与JavaScript应用 285
14.1 JavaScript概述 285
14.1.1 JavaScript简介 285
14.1.2 JavaScript放置位置 286
14.2 JavaScript基本语法 287
14.2.1变量 287
14.2.2数据类型 288
14.2.3表达式和运算符 288
14.2.4函数 290
14.2.5注释 290
14.3 JavaScript程序语句 290
14.3.1 if…else语句 291
14.3.2 for语句 291
14.3.3 switch语句 292
14.3.4 while循环 293
14.3.5 break语句 294
14.3.6 continue语句 295
14.4 JavaScript的事件 295
14.4.1 onClick事件 295
14.4.2 onChange事件 295
14.4.3 onSelect事件 297
14.4.4 onFocus事件 299
14.4.5 onLoad事件 300
14.4.6 onUnload事件 301
14.4.7 onBlur事件 302
14.4.8 onMouseOver事件 303
14.4.9 onMouseOut事件 304
14.4.10 onDblClick事件 305
14.4.11其他常用事件 307
14.5浏览器的内部对象 309
14.5.1 navigator对象 309
14.5.2 document对象 310
14.5.3 windows对象 311
14.5.4 location对象 313
14.5.5 history对象 314
14.6实例应用 315
14.6.1显示当前时间 315
14.6.2当鼠标指针经过图像时图像震动效果 318
14.6.3自动切换图像 320
第15章 企业网站设计 322
15.1企业网站设计概述 322
15.1.1企业网站分类 322
15.1.2企业网站主要功能栏目 324
15.2网站内容分析 326
15.3 HTML结构设计 326
15.4方案设计 329
15.5定义整体样式 331
15.6制作页面顶部 333
15.6.1页面顶部的结构 333
15.6.2定义页面顶部的样式 333
15.7制作左侧导航 335
15.7.1制作左侧导航部分的结构 335
15.7.2定义左侧导航的样式 335
15.8制作联系我们部分 337
15.8.1联系我们部分的结构 337
15.8.2定义联系我们内容的样式 337
15.9制作企业介绍部分 338
15.9.1制作企业介绍部分结构 338
15.9.2定义企业介绍部分的样式 338
15.10制作图片展示和新闻动态 339
15.10.1制作页面结构 339
15.10.2定义页面样式 340
15.11制作订购部分 340
15.11.1制作页面结构 340
15.11.2定义样式 342
15.12制作底部部分 342
15.13网站的上传 343
第16章 移动网站设计 346
16.1移动网站设计概述 346
16.1.1什么是移动网站设计 346
16.1.2移动网站设计的原则 347
16.1.3怎样开始移动网页设计 349
16.2移动网站设计的注意事项 350
16.3制作网站页面 352
16.3.1网页HTML整体结构 352
16.3.2新建手机网页 355
16.3.3新建CSS样式表 357
16.3.4制作header部分 358
16.3.5制作about部分 359
16.3.6制作工程案例部分 360
16.3.7制作设计师部分 362
16.3.8制作联系我们部分 364
16.3.9制作底部部分 366
16.4维护网站 366
16.5网站的推广 367
16.5.1登录搜索引擎 367
16.5.2交换广告条 368
16.5.3登录网址导航站点 368
16.5.4通过BBS宣传 369
16.5.5聊天工具推广网站 369
16.5.6使用博客推广 370
16.5.7使用传统方式推广 371
附录 CSS浏览器兼容性与常见技巧解答 372
问题1上下margin重合 372
问题2 margin加倍的问题 373
问题3浮动IE产生的双倍距离 373
问题4超链接访问后hover样式不出现 373
问题5 IE6对png的透明度支持问题 374
问题6行内元素上下margin及padding不拉开元素间距 374
问题7浮动背景 375
问题8如何正确对齐文本 375
问题9超链接访问过后hover样式就不出现的问题 375
问题10 list-style-image无法准确定位的问题 375
问题11如何垂直居中文本 376
问题12为什么无法定义lpx左右高度的容器 376
问题13怎样使一个层垂直居中于浏览器中 376
问题14能给某部分内容加边框吗 377
问题15如何去掉下画线 377
问题16如何垂直居中文本 377
问题17如何让Div横向排列 378
问题18怎样设置滚动条颜色 378
问题19字体大小定义不同 378
问题20 innerText在IE中能正常工作，但在FireFox中却不行 378
问题21 ul和ol列表缩进问题 379
问题22 IE与宽度和高度的问题 379
问题23 Div浮动，IE文本产生3px的bug 379