第1篇 网页制作基础........................ 1

第1章 网页基础和网站开发流程................. 1

1.1　认识网页与网站............................................. 2

1.1.1　什么是网站.........................................2

1.1.2　静态网页和动态网页..........................2

1.1.3　网页基本构成元素..............................3

1.2　网站类型........................................................ 5

1.2.1　个人网站............................................6

1.2.2　电子商务网站.....................................6

1.2.3　娱乐游戏类网站..................................6

1.2.4　时尚类网站.........................................7

1.2.5　新闻资讯类网站..................................7

1.2.6　门户类网站.........................................8

1.3　开发网站需要的技术...................................... 8

1.3.1　需要HTML文件...................................8

1.3.2　需要DIV来布局...................................9

1.3.3　需要CSS来定义样式.........................10

1.3.4　需要JavaScript.................................11

1.3.5　需要动态网页开发语言.....................11

1.4　网站开发流程............................................... 12

1.4.1　确定网站目标...................................12

1.4.2　规划站点结构...................................12

1.4.3　收集素材..........................................13

1.4.4　美工设计出页面整体效果.................13

1.4.5　切割和优化页面................................13

1.4.6　添加网页后台程序............................14

1.4.7　申请域名..........................................15

1.4.8　申请服务器空间................................16

1.4.9　测试并上传网站................................17

1.4.10　网站优化........................................17

1.4.11　网站维护........................................18

1.4.12　网站的推广.....................................18

第2章 Web标准........................................ 19

2.1　表格布局与CSS布局.................................... 20

2.1.1　表格布局的优点................................20

2.1.2　表格布局的缺点................................20

2.1.3　表格布局与CSS布局实例.................20

2.2　了解Web标准............................................... 22

2.2.1　什么是Web标准...............................22

2.2.2　为什么要建立Web标准.....................22

2.2.3　W3C发布的标准...............................23

2.2.4　Web标准的优势...............................24

2.3　Web标准三剑客........................................... 25

2.3.1　内容、结构、表现和行为.................25

2.3.2　如何改善现有网站............................25

第3章 HTML和XHTML基础...................... 27

3.1　HTML文档的基本结构.................................. 28

3.1.1　HTML文件结构.................................28

3.1.2　编写HTML文件注意事项..................29

3.1.3　HTML文档中的注释..........................29

3.2　编辑HTML网页正文..................................... 29

3.2.1　输入网页标题...................................30

3.2.2　划分正文段落...................................30

3.2.3　设置文本格式...................................31

3.3　在HTML网页中插入图片.............................. 32

3.3.1　插入网页图片...................................33

3.3.2　在网页中加入水平线........................34

3.4　在HTML网页中使用列表.............................. 35

3.4.1　使用编号列表...................................35

3.4.2　使用无序列表...................................36

3.5　在HTML网页中使用表格.............................. 37

3.5.1　认识表格标记...................................37

3.5.2　设置表格的整体属性........................38

3.6　建立超链接................................................... 39

3.6.1　链接标签..........................................39

3.6.2　创建邮件链接...................................40

3.6.3　锚点链接..........................................40

3.7　XHTML简介................................................. 41

3.7.1　什么是XHTML..................................41

3.7.2　为什么要升级到XHTML....................41

3.8　XHTML页面结构.......................................... 42

3.9　XHTML与HTML的区别................................ 43

第2篇 CSS控制样式基础............... 46

第4章 CSS基础........................................ 46

4.1　CSS介绍...................................................... 47

4.1.1　CSS基本概念...................................47

4.1.2　CSS的优点.......................................47

4.1.3　CSS功能...........................................48

4.1.4　浏览器与CSS...................................49

4.1.5　CSS发展历史...................................49

4.2　在HTML 5中使用CSS的方法....................... 50

4.2.1　内嵌样式..........................................50

4.2.2　行内样式..........................................50

4.2.3　链接外部样式表................................51

4.2.4　导入样式..........................................52

4.2.5　优先级问题.......................................52

Ⅳ2

DIV＋CSS网页样式与布局完全学习手册

4.3　使用Dreamweaver设置CSS样式................. 52

4.3.1　设置文本样式...................................53

4.3.2　设置背景样式...................................54

4.3.3　设置区块样式...................................55

4.3.4　设置方框样式...................................56

4.3.5　设置边框样式...................................57

4.3.6　设置列表样式...................................59

4.3.7　设置定位样式...................................60

4.3.8　设置扩展样式...................................61

4.3.9　过渡样式的定义................................61

4.4　选择器类型................................................... 62

4.4.1　标签选择器.......................................62

4.4.2　类选择器..........................................62

4.4.3　ID选择器..........................................63

4.5　编辑和浏览CSS........................................... 64

4.5.1　手工编写CSS...................................64

4.5.2　Dreamweaver编写CSS....................65

4.6　综合实战——对网页添加CSS样式.............. 65

第5章 使用CSS设计网页文本和段落

样式................................................ 68

5.1　通过CSS控制文本样式................................ 69

5.1.1　字体font-family................................69

5.1.2　字号font-size...................................70

5.1.3　加粗字体font-weight.......................71

5.1.4　字体风格font-style...........................72

5.1.5　小写字母转为大写字母font-variant...72

5.2　通过CSS控制段落格式................................ 74

5.2.1　单词间隔word-spacing...................74

5.2.2　字符间隔letter-spacing...................74

5.2.3　文字修饰text-decoration.................75

5.2.4　垂直对齐方式vertial-align...............76

5.2.5　文本转换text-transform...................77

5.2.6　水平对齐方式text-align...................77

5.2.7　文本缩进text-indent........................78

5.2.8　文本行高line-height........................79

5.2.9　处理空白white-space......................80

5.3　综合实战——CSS字体样式综合演练........... 81

第6章 通过CSS定义具有特色的

超链接效果..................................... 83

6.1　超链接基础................................................... 84

6.1.1　超链接的基本概念............................84

6.1.2　使用页面属性设置超链接.................84

6.2　链接标记...................................................... 85

6.2.1　a:link................................................85

6.2.2　a:visited...........................................86

6.2.3　a:active............................................87

6.2.4　a:hover.............................................88

6.3　定义丰富的超链接特效................................. 89

6.3.1　背景色变换链接................................89

6.3.2　多姿多彩的下划线链接.....................90

6.3.3　图像翻转链接...................................91

6.3.4　边框变换链接...................................93

6.4　综合实战...................................................... 95

6.4.1　实战——使用CSS实现鼠标

指针形状改变...................................95

6.4.2　实战——为超链接文字加上

质感边框...........................................96

6.4.3　实战——鼠标指针移到链接文字上时

改变文字大小或颜色........................99

6.4.4　实战——给超链接添加提示文字....101

第7章 用CSS设计图像和背景................. 106

7.1　设置网页的背景......................................... 107

7.1.1　背景颜色........................................107

7.1.2　背景图片........................................108

7.2　设置背景图片的样式.................................. 109

7.2.1　背景图片重复.................................109

7.2.2　背景图片附件.................................110

7.2.3　背景定位........................................110

7.3　设置网页图片的样式.................................. 112

7.3.1　设置图片边框.................................113

7.3.2　图文混合排版.................................115

7.4　应用CSS过滤器设计图像特效.................... 116

7.4.1　控制图像和背景的透明度(Alpha).....116

7.4.2　灰度(Gray).....................................117

7.4.3　反色(Invert)....................................118

7.5　综合实战.................................................... 118

7.5.1　实战——给图片添加边框...............118

7.5.2　实战——图文绕排效果...................120

7.5.3　实战——文字与图片上下垂直居中....121

7.5.4　实战——CSS实现背景半透明效果....122

7.5.5　实战——可控的左右滚动图片........123

第3篇 CSS控制样式进阶............. 127

第8章 设计更富灵活性的表格................. 127

8.1　表格基础.................................................... 128

Ⅴ3

目录

8.2　用CSS设置表格的样式.............................. 129

8.2.1　设置表格的颜色..............................129

8.2.2　设置表格的边框样式......................130

8.2.3　设置表格的阴影..............................131

8.2.4　设置表格的渐变背景......................132

8.2.5　制作条纹数据表格样式...................133

8.3　综合实战.................................................... 137

8.3.1　实战——制作变换背景色的表格....137

8.3.2　实战——用CSS制作漂亮的彩色背景

表格...............................................138

8.3.3　实战——制作阴影表格...................140

8.3.4　实战——制作圆角表格...................140

第9章 设计更酷更炫的表单..................... 143

9.1　网页中的表单............................................. 144

9.1.1　表单对象........................................144

9.1.2　输入域标签<input>........................144

9.1.3　文本域标签<textarea>...................145

9.1.4　选择域标签<select>和<option>....146

9.1.5　设置边框样式.................................147

9.2　通过CSS设置各元素的外观....................... 149

9.2.1　设置背景样式.................................149

9.2.2　设置输入文本的样式......................151

9.2.3　设计文本框的样式..........................152

9.3　综合实战.................................................... 154

9.3.1　实战——改变按钮的背景颜色

和文字颜色.....................................154

9.3.2　实战——设计文本框中的

文字样式........................................157

9.3.3　实战——制作透明的表单背景........157

9.3.4　实战——为下拉列表变换颜色........159

9.3.5　实战——CSS 3制作的3D效果登录

表单...............................................160

第10章 用CSS制作实用的菜单和

网站导航.................................... 163

10.1　列表概述.................................................. 164

10.2　列表样式控制........................................... 164

10.2.1　ul无序列表..................................164

10.2.2　ol有序列表..................................165

10.2.3　dl定义列表..................................166

10.2.4　更改列表项目样式......................167

10.3　横排导航.................................................. 168

10.3.1　文本导航.....................................168

10.3.2　标签式导航.................................170

10.4　竖排导航.................................................. 171

10.5　综合实战.................................................. 173

10.5.1　实战——实现背景变换的

导航菜单......................................173

10.5.2　实战——利用CSS制作横向导航....174

10.5.3　实战——制作网页下拉列表........175

10.5.4　实战——用背景图片实现CSS柱状

图表........................................... 177

第11章 CSS中的滤镜............................. 179

11.1　滤镜概述.................................................. 180

11.2　动感模糊blur............................................ 180

11.3　对颜色进行透明处理chroma.................... 181

11.4　设置阴影DropShadow............................. 182

11.5　对象的翻转flipH、flipV............................. 183

11.6　发光效果glow........................................... 183

11.7　X光片效果xray......................................... 184

11.8　波形滤镜wave.......................................... 185

11.9　遮罩效果mask.......................................... 186

第4篇 CSS布局........................... 187

第12章 CSS盒子模型与定位.................. 187

12.1　“盒子”与“模型”的概念探究.............. 188

12.2　border...................................................... 188

12.2.1　边框样式：border-style............189

12.2.2　边框颜色：border-color............192

12.2.3　边框宽度：border-width...........193

12.2.4　透明边框.....................................194

12.3　padding.................................................... 195

12.4　margin...................................................... 197

12.5　盒子的浮动float........................................ 199

12.6　盒子的定位............................................... 201

12.6.1　绝对定位：Absolute...................201

12.6.2　固定定位：fixed.........................203

12.6.3　相对定位：relative.....................204

12.6.4　z-index空间位置........................206

第13章 CSS+DIV布局方式..................... 207

13.1　CSS布局模型........................................... 208

13.1.1　流动布局模型.............................208

4

DIV＋CSS网页样式与布局完全学习手册

Ⅵ

13.1.2　浮动布局模型.............................209

13.1.3　层布局模型.................................212

13.1.4　高度自适应.................................214

13.2　CSS布局理念........................................... 215

13.2.1　将页面用div分块.........................215

13.2.2　设计各块的位置..........................216

13.2.3　用CSS定位.................................216

13.3　固定宽度布局........................................... 217

13.3.1　一列固定宽度.............................217

13.3.2　两列固定宽度.............................218

13.3.3　圆角框........................................220

13.4　可变宽度布局........................................... 221

13.4.1　一列自适应.................................221

13.4.2　两列宽度自适应..........................222

13.4.3　两列右列宽度自适应...................223

13.4.4　三列浮动中间宽度自适应...........224

13.4.5　三行二列居中高度自适应布局....225

第14章 解决CSS布局中的常见问题........ 227

14.1　关于水平和垂直居中对齐的问题.............. 228

14.1.1　让Div中的内容垂直居中.............228

14.1.2　让Div中的内容水平居中.............231

14.2　解决浏览器不兼容的问题......................... 234

14.2.1　margin加倍的问题......................234

14.2.2　浮动IE产生的双倍距离...............234

14.2.3　DIV浮动IE文本出现3px间距的问题

（bug）......................................235

14.2.4　高度不能自适应的问题...............236

14.2.5　垂直居中对齐文本与文本输入框

的问题........................................237

14.2.6　firefox下如何使连续长字段自动

换行............................................238

第15章 HTML 5高级程序设计................. 239

15.1　HTML 5简介............................................. 240

15.1.1　认识HTML 5...............................240

15.1.2　HTML 5的特点............................241

15.1.3　HTML 5中的标记方法.................242

15.1.4　HTML 5基本布局........................242

15.2　HTML 5结构元素..................................... 245

15.2.1 header........................................245

15.2.2　nav.............................................246

15.2.3　footer..........................................247

15.2.4　article.........................................248

15.2.5　section.......................................249

15.2.6　aside..........................................250

15.2.7　address......................................250

15.3　新增的嵌入多媒体元素与交互性元素....... 251

15.3.1　video元素...................................251

15.3.2　audio元素...................................251

15.3.3　embed元素................................252

15.4　新增的input元素的类型............................ 252

15.4.1　url类型........................................252

15.4.2　email类型...................................252

15.4.3　date类型.....................................253

15.4.4　time类型.....................................253

15.4.5　datetime类型..............................253

15.5　创建简单的HTML 5页面........................... 254

15.5.1　HTML 5文档类型........................254

15.5.2　字符编码.....................................254

15.5.3　页面语言.....................................254

15.5.4　添加样式表.................................254

15.5.5　添加JavaScript...........................255

15.5.6　测试结果.....................................255

第16章 CSS 3指南................................. 256

16.1　预览激动人心的CSS 3............................. 257

16.1.1　CSS 3的发展历史.......................257

16.1.2　CSS 3新增特性...........................257

16.1.3　主流浏览器对CSS 3的支持.........261

16.2　使用CSS 3实现圆角表格......................... 261

16.3　使用CSS 3制作图片滚动菜单.................. 263

16.4　使用CSS 3制作文字立体效果.................. 266

16.5　使用CSS 3制作多彩的网页图片库........... 267

16.6　使用CSS 3实现的幻灯图片效果............... 269

第17章 CSS与JavaScript的综合应用..... 275

17.1　JavaScript简介......................................... 276

17.1.1　什么是JavaScript.......................276

17.1.2　JavaScript特点...........................276

17.2　JavaScript的基本语法.............................. 277

17.2.1　常量和变量.................................277

17.2.2　表达式和运算符..........................278

17.2.3　基本语句.....................................279

17.2.4　函数............................................283

17.3　JavaScript事件......................................... 284

17.4　JavaScript内部对象................................. 293

17.4.1　navigator对象.............................293

17.4.2　document对象............................294

5

目录

Ⅶ

17.4.3　window对象................................295

17.4.4　location对象...............................297

17.4.5　history对象.................................297

17.5　综合实战.................................................. 298

17.5.1　实战——随鼠标移动的图像........298

17.5.2　实战——制作图片循环隐现效果....300

17.5.3　实战——制作幻灯片效果...........302

17.5.4　实战 ——制作灯光效果..............304

17.5.5　实战 ——可以任意选择网页中的

文字颜色、背景颜色、字号.......305

第5篇 CSS布局综合实例............. 310

第18章 设计富有个性的个人网站........... 310

18.1　个人网站设计概述.................................... 311

18.2　个人网站色彩搭配和结构设计.................. 312

18.3　网站前期策划........................................... 312

18.3.1　确定网站主题.............................312

18.3.2　确定目录结构.............................312

18.3.3　网站蓝图的规划..........................313

18.4　制作网站主页........................................... 314

18.4.1　导入外部CSS..............................314

18.4.2　制作顶部文件.............................316

18.4.3　制作个人简介.............................318

18.4.4　制作个人相册.............................319

18.4.5　制作最新动态.............................321

18.4.6　制作底部文件.............................323

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

19.1　企业网站设计概述.................................... 326

19.2　分析架构.................................................. 327

19.2.1　设计分析.....................................327

19.2.2　排版构架.....................................327

19.3　各模块设计............................................... 328

19.3.1　布局设计.....................................328

19.3.2　页面的通用规则..........................329

19.3.3　制作#header对象部分................332

19.3.4　制作导航#nav对象部分..............334

19.3.5　制作公司介绍和图片展示部分....335

19.3.6　制作“我们的服务”部分...........338

19.3.7　制作#aside对象部分...................341

19.3.8　制作底部版权信息部分...............344

第20章 旅游网站的设计.......................... 346

20.1　旅游网站设计概述.................................... 347

20.1.1　旅游网站分类.............................347

20.1.2　页面配色分析.............................348

20.1.3　排版构架.....................................349

20.2　各部分设计............................................... 350

20.2.1　页面的通用规则..........................350

20.2.2　制作网站导航部分......................351

20.2.3　制作header右侧部分..................354

20.2.4　制作欢迎部分.............................363

20.2.5　制作景点新闻部分......................368

20.2.6　制作景点介绍部分......................373

20.2.7　制作景点展示部分......................377

20.2.8　制作底部版权部分......................385

第21章 购物网站布局............................. 388

21.1　购物网站设计概述.................................... 389

21.1.1　购物网站概念.............................389

21.1.2　购物网站的功能要点...................390

21.2　购物网站设计分析.................................... 391

21.2.1　大信息量的页面..........................391

21.2.2　页面结构设计合理......................391

21.2.3　完善的分类体系..........................392

21.2.4　商品图片的使用..........................392

21.3　购物网站配色与架构................................ 393

21.3.1　购物网站配色.............................393

21.3.2　排版构架.....................................393

21.4　各部分设计............................................... 394

21.4.1　定义页面通用规则......................394

21.4.2　制作网站header部分..................395

21.4.3　制作网站通栏广告部分...............403

21.4.4　制作网站左侧分类部分...............404

21.4.5　制作轮换显示的横幅广告图片....406

21.4.6　制作最新上架部分......................407

第6篇 附录................................... 414

附录1　CSS属性一览表..................................... 414

附录2　HTML常用标签...................................... 418