DreamweaverCS6+HTML+CSS+DIV+JacaScript网站开发案例教程

目录



第1章　网页基础知识　1

本章导读　2

知识目标　2

技能目标　2

1.1　课堂案例：企业网站的规划和

站点管理　2

1.2　准备知识：网页的基础知识　2

1.2.1　网页元素　2

1.2.2　网页的分类　4

1.2.3　常用的术语　5

1.2.4　常用的网页制作工具软件　5

1.2.5　网站的开发流程　7

1.3　Dreamweaver CS6工具

介绍和基本操作　8

1.3.1　Dreamweaver CS6工具介绍　9

1.3.2　Dreamweaver对网页文档的

基本操作　17

1.4　案例实施过程：企业网站的

规划和站点的管理　20

1.4.1　网站的需求分析阶段　20

1.4.2　网站的规划　21

1.4.3　站点管理　22

1.5　本章小结　23



第2章　（X）HTML和CSS　25

本章导读　26

知识目标　26

技能目标　26

2.1　课堂案例：人物介绍网页的

制作　26

2.2　准备知识：HTML语言和

XHTML语言　27

2.2.1　HTML与XHTML概述　27

2.2.2　HTML文档结构　27

2.2.3　HTML标签和属性　28

2.2.4　XHTML与HTML的区别　29

2.2.5　常用的HTML标签　29

2.2.6　DOCTYPE（文档类型）的含义和

选择　37

2.3　案例实施过程：人物介绍

网页的制作（一）　38

2.4　准备知识：CSS样式表　41

2.4.1　CSS样式表简介　41

2.4.2　CSS的语法规则　41

2.4.3　Dreamweaver的CSS工具　42

2.4.4　在网页中引入CSS的方法　43

2.4.5　CSS选择器　45

2.4.6　Dreamweaver CS6中的CSS

规则定义面板　51

2.4.7　课堂练习：CSS制作水平菜单　56

2.5　案例实施过程：人物介绍

网页的制作（二）　60

2.6　本章小结　62



第3章　图文混排和超链接　63

本章导读　64

知识目标　64

技能目标　64

3.1　课堂案例：人物主题

介绍网站　64

3.2　准备知识：常用的网页元素　65

3.2.1　网页中的文本　65

3.2.2　设置网页的页面属性　74

3.2.3　课堂练习：水果介绍页面　76

3.2.4　插入图像　78

3.3　案例实施过程：人物主题

介绍网站（一）　84

3.4　准备知识：超链接　86

3.4.1　文本的超链接　87

3.4.2　图像的超链接　88

3.4.3　锚记　89

3.4.4　电子邮件的超链接　90

3.5　案例实施过程：人物主题

介绍网站（二）　91

3.6　扩展知识：插入多媒体元素　92

3.6.1　插入音频文件　92

3.6.2　插入FLV格式的视频文件　94

3.6.3　插入Flash格式的视频文件　95

3.6.4　插入其他格式的多媒体文件　97

3.6.5　课堂练习：制作电影播放网页　99

3.7　本章小结　100



第4章　网页布局方式—表格和

DIV CSS　101

本章导读　102

知识目标　102

技能目标　102

4.1　课堂案例一：电影介绍网页　102

4.2　准备知识：表格的布局模式　103

4.2.1　表格　103

4.2.2　课堂练习：下载图片的表格　107

4.2.3　单元格的合并与拆分　110

4.2.4　课堂练习：推荐模块制作　110

4.2.5　增加或删除行或列　112

4.2.6　课堂练习：菜单模块　113

4.3　案例实施过程：电影介绍

网页　116

4.4　课堂案例二：企业网站

首页的制作　121

4.4.1　准备知识：DIV CSS布局模式　121

4.4.2　课堂练习：小说文学网　127

4.5　案例实施过程：企业网站

首页的制作　131

4.6　本章小结　138



第5章　模板和库　139

本章导读　140

知识目标　140

技能目标　140

5.1　课堂案例：快速完成企业

二级网页的制作　140

5.2　准备知识：模板　141

5.2.1　创建模板和保存　141

5.2.2　创建可编辑区域　144

5.2.3　修改或删除可编辑区域　146

5.2.4　应用模板文件新建网页　146

5.3　案例实施过程：使用模板

创建网页　149

5.4　扩展知识　153

5.4.1　模板的可选区域和重复

区域　153

5.4.2　脱离模板和应用模板　156

5.4.3　库文件　157

5.4.4　课堂练习：环保主题网站　158

5.5　本章小结　168



第6章　表单　169

本章导读　170

知识目标　170

技能目标　170

6.1　课堂案例：制作用户留言

网页和在线调查问卷页　170

6.2　准备知识：表单　171

6.2.1　表单标签　171

6.2.2　表单元素—文本框　173

6.2.3　表单元素—选择框　174

6.2.4　表单元素—菜单列表　176

6.2.5　表单元素—按钮　177

6.2.6　其他表单元素　178

6.2.7　表单中的Spry元素　180

6.3　案例实施过程：制作用户

留言网页　185

6.4　案例实施过程：制作在线

调查问卷页　189

6.5　本章小结　191



第7章　框架和浮动框架　192

本章导读　193

知识目标　193

技能目标　193

7.1　课堂案例：企业邮箱

网页的制作　193

7.2　准备知识：框架和框架集　193

7.2.1　框架和框架集介绍　193

7.2.2　创建框架　194

7.2.3　保存框架　198

7.2.4　删除框架和增加框架　199

7.2.5　在框架中使用超链接　200

7.3　案例实施过程：企业邮箱

网页的制作　200

7.4　扩展知识：浮动框架　210

7.4.1　浮动框架　210

7.4.2　浮动框架案例：企业网站

产品页制作　211

7.4.3　课堂练习一：玫瑰分类介绍网页　214

7.4.4　课堂练习二：网站后台管理页　216

7.5　本章小结　222



第8章　网页特效　223

本章导读　224

知识目标　224

技能目标　224

8.1　课堂案例：在企业网站首页

中添加网页特效　224

8.2　准备知识：JavaScript网页

特效　225

8.2.1　JavaScript的常量和变量　225

8.2.2　JavaScript的函数　225

8.2.3　JavaScript的事件　226

8.2.4　在网页中嵌入JavaScript

代码的方法　226

8.2.5　使用jQuery库　229

8.2.6　网页中的行为　231

8.3　准备知识：Dreamweaver

中的行为脚本　232

8.3.1　课堂练习：交换的日历页　232

8.3.2　课堂练习：网页中弹出信息框　234

8.3.3　课堂练习：弹出广告页　235

8.3.4　课堂练习：使用拖动AP元素

制作拼图游戏　236

8.3.5　课堂练习：制作电子图册　240

8.3.6　课堂练习：制作跳转网页　243

8.3.7　课堂练习：制作关闭网页的

按钮　244

8.3.8　课堂练习：检查浏览器插件　246

8.3.9　课堂练习：制作能改变DIV文字

颜色和边框效果的网页　247

8.3.10　课堂练习：制作一个有趣的

发帖网页　248

8.4　准备知识：Dreamweaver

中的Spry框架　251

8.4.1　Spry菜单栏　251

8.4.2　Spry选项卡式面板　253

8.4.3　课堂练习：新闻卡式面板　253

8.4.4　Spry折叠式　256

8.4.5　课堂练习：折叠菜单的制作　256

8.4.6　Spry可折叠式　258

8.4.7　Spry工具提示　259

8.5　案例实施过程：在企业

网站首页中添加网页特效　259

8.5.1　导航下拉菜单的制作　259

8.5.2　动感焦点图的制作　262

8.5.3　横向滚动产品推荐的制作　263

8.6　本章小结　266

第9章　网站测试、发布与推广　267

本章导读　268

知识目标　268

技能目标　268

9.1　网站测试　268

9.1.1　浏览器的兼容性测试　268

9.1.2　链接测试　271

9.1.3　全站测试报告　272

9.1.4　设置【W3C验证程序】　273

9.1.5　网页的完整性检查　274

9.2　网站发布　275

9.2.1　注册域名　275

9.2.2　申请虚拟主机　278

9.2.3　网站发布　279

9.3　网站推广　285

9.4　本章小结　287