网页设计与前端开发实用教程（Dreamweaver+CSS+Photoshop+JavaScrip

本书紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用Dreamweaver、CSS、Photoshop、JavaScript、HML进行网站建设和网页设计的各方面内容和技巧。本书不仅将笔墨用在了基本工具和语法的讲解上，更重要的是还通过一个个鲜活、典型的实例来帮助读者达到学以致用的目的。

全书由不同行业中的实例组成，书中各实例均经过精心设计，操作步骤清晰简明，技术分析深入浅出，实例效果精美实用。

本书提供课堂案例、课堂练习、课后习题的源文件，以及典型案例在线教学视频。同时还为老师提供PPT教学课件、教学规划参考、教学大纲等资源，便于老师课堂教学。

本书语言简洁，内容丰富，适合网页设计与制作人员、网站建设与开发人员、大中专院校相关专业师生、网页制作培训班学员和个人网站爱好者阅读。

张婷，东北林业大学硕士，现就职于菏泽职业学院信息工程系。从事相关专业和教学20年，参与编写教材4本。精通计算机网络开发技术，对HTML5、JavaScript、CSS3、Dreamweaver等网络开发技术有很深的研究和实践经验。

第 1部分 Dreamweaver CC网页制作篇 

第 1章　使用Dreamweaver CC创建基本

　文本网页　11

1.1　Dreamweaver CC工作界面　12

1.1.1　菜单栏　12

1.1.2　文档窗口　13

1.1.3　“属性”面板　13

1.1.4　面板组　13

1.1.5　“插入”栏　13

1.2　创建本地站点　14

1.2.1　创建站点的好处　14

1.2.2　课堂案例——使用向导创建站点　14

1.3　添加文本元素　15

1.3.1　课堂案例——添加文本　15

1.3.2　课堂案例——插入日期　16

1.3.3　课堂案例——插入特殊字符　17

1.3.4　课堂案例——插入水平线　18

1.4　编辑文本格式　20

1.4.1　课堂案例——设置文本字体　20

1.4.2　设置文本大小　21

1.4.3　设置文本颜色　21

1.5　课堂练习——创建基本文本网页　21

1.6　课后习题　23

1.7　本章总结　23

第 2章　使用图像和多媒体创建丰富多彩的

　网页　24

2.1　网页中图像的格式　25

2.2　在网页中插入图像　25

2.2.1　课堂案例——插入普通图像　25

2.2.2　课堂案例——设置图像的属性　26

2.2.3　课堂案例——裁剪图像　28

2.3　插入其他网页图像　28

2.3.1　课堂案例——插入背景图像　29

2.3.2　课堂案例——插入鼠标经过图像　29

2.4　在网页中插入动画和音乐　32

2.4.1　课堂案例——插入Flash动画　32

2.4.2　使用代码提示插入背景音乐　34

2.5　课堂练习　36

课堂练习1——创建翻转图像导航　36

课堂练习2——创建图文混排网页　38

2.6　课后习题　40

2.7　本章总结　40

第3章　使用表格布局排版网页　41

3.1　插入表格　42

3.1.1　表格的基本概念　42

3.1.2　课堂案例——插入表格　42

3.2　设置表格的各项属性　43

3.2.1　设置表格的属性　43

3.2.2　设置单元格的属性　44

3.3　选择表格　45

3.3.1　选择整个表格　45

3.3.2　选择行或列　46

3.3.3　选择单元格　46

3.4　表格的基本操作　47

3.4.1　调整表格的高度和宽度　47

3.4.2　添加、删除行或列　47

3.4.3　拆分单元格　48

3.4.4　合并单元格　49

3.4.5　剪切、复制、粘贴表格　49

3.5　排序及整理表格内容　50

3.5.1　课堂案例——导入表格式数据　50

3.5.2　排序表格　51

3.6　课堂练习　52

3.6.1　课堂练习1——创建细线表格　52

3.6.2　课堂练习2——创建圆角表格　55

3.7　课后习题　58

3.8　本章总结　58

第4章　使用行为创建特效网页　59

4.1　行为的概述　60

4.1.1　常见的动作　60

4.1.2　常见的事件　61

4.2　调用JavaScript　61

4.2.1　课堂案例——利用JavaScript实现打印功能　62

4.2.2　课堂案例——利用JavaScript实现关闭网页　62

4.3　设置浏览器环境　64

4.3.1　课堂案例——检查表单　64

4.3.2　检查插件　65

4.4　对图像设置动作　65

4.4.1　课堂案例——制作预先载入图像网页　65

4.4.2　课堂案例——制作交换图像网页　67

4.5　课堂练习　68

4.5.1　课堂练习1——设置状态栏文本　68

4.5.2　课堂练习2——转到URL　69

4.5.3　课堂练习3——制作指定大小的弹出窗口　70

4.6　课后习题　72

4.7　本章总结　72

第5章　使用模板和库批量制作风格统一的网页　73

5.1　创建模板　74

5.1.1　课堂案例——直接创建模板　74

5.1.2　课堂案例——从现有文档创建模板　75

5.2　创建可编辑区域　76

5.2.1　课堂案例——插入可编辑区域　76

5.2.2　删除可编辑区域　77

5.2.3　更改可编辑区域名称　77

5.3　创建和管理站点中的模板　78

5.3.1　使用模板创建新网页　78

5.3.2　课堂案例——将文档从模板中分离出来　80

5.3.3　课堂案例——修改模板　80

5.4　创建与应用库项目　81

5.4.1　课堂案例——创建库项目　81

5.4.2　课堂案例——应用库项目　82

5.4.3　课堂案例——修改库项目　84

5.5　课堂练习　84

5.5.1　课堂练习1——创建模板　84

5.5.2　课堂练习2——利用模板创建网页　87

5.6　课后习题　89

5.7　本章总结　89

第6章　使用jQuery Mobile和jQuery特效制作网页　90

6.1　jQuery UI　91

6.1.1　课堂案例——创建Tabs选项卡　91

6.1.2　课堂案例——创建Accordion折叠面板　93

6.1.3　课堂案例——创建Dialog对话框　94

6.1.4　课堂案例——创建Shake震动特效　96

6.2　使用按钮组件　97

6.2.1　课堂案例——插入按钮　98

6.2.2　按钮组的排列　99

6.3　使用表单组件　100

6.3.1　认识表单组件　100

6.3.2　课堂案例——插入文本框　100

6.3.3　课堂案例——插入滑块　103

6.3.4　课堂案例——插入翻转切换开关　104

6.3.5　课堂案例——插入单选按钮　105

6.3.6　课堂案例——插入复选框　107

6.4　课堂练习——使用jQuery Mobile创建手机网页列表　108

6.5　课后习题　111

6.6　本章总结　111

第 2部分　CSS美化布局网页篇

第7章　使用CSS样式表美化网页　112

7.1　了解CSS样式表　113

7.2　CSS的使用　113

7.2.1　CSS基本语法　113

7.2.2　添加CSS的方法　114

7.3　字体属性　115

7.3.1　课堂案例——设置字体font-family　115

7.3.2　课堂案例——设置字号font-size　116

7.3.3　课堂案例——设置字体风格font-style　117

7.3.4　课堂案例——设置字体加粗font-weight　118

7.3.5　课堂案例——设置字体变形font-variant　119

7.4　段落属性　120

7.4.1　课堂案例——设置单词间隔word-spacing　120

7.4.2　课堂案例——设置字符间隔letter-spacing　121

7.4.3　课堂案例——设置文字修饰text-decoration　122

7.4.4　课堂案例——设置垂直对齐方式vertical-align　123

7.4.5　课堂案例——设置文本转换text-transform　124

7.4.6　课堂案例——设置水平对齐方式text-align　125

7.4.7　课堂案例——设置文本缩进text-indent　126

7.4.8　课堂案例——设置文本行高line-height　127

7.5　图片样式设置　127

7.5.1　课堂案例——定义图片边框　128

7.5.2　课堂案例——设置文字环绕图片　129

7.6　课堂练习——设置网页背景颜色　130

7.7　课后习题　131

7.8　本章总结　131

第8章　使用CSS DIV布局网页　132

8.1　初识DIV　133

8.1.1　DIV概述　133

8.1.2　DIV与span的区别　133

8.1.3　DIV与CSS的布局优势　134

8.2　CSS定位　135

8.2.1　盒子模型的概念　135

8.2.2　float定位　135

8.2.3　position定位　137

8.3　CSS布局理念　137

8.3.1　将页面用DIV分块　137

8.3.2　设计各块的位置　138

8.3.3　用CSS定位　138

8.4　课堂练习　139

课堂练习1——一列固定宽度布局　139

课堂练习2——一列自适应布局　140

课堂练习3——两列固定宽度布局　141

课堂练习4——两列宽度自适应布局　141

课堂练习5——两列右列宽度自适应布局　142

课堂练习6——三列浮动中间宽度自适应布局　143

8.5　课后习题　144

8.6　本章总结　144

第3部分　Photoshop CC图像处理篇

第9章　初识Photoshop CC　145

9.1　Photoshop CC工作界面　146

9.1.1　菜单栏　146

9.1.2　工具箱及工具选项栏　147

9.1.3　文档窗口及状态栏　147

9.1.4　面板　147

9.2　调整图像　148

9.2.1　课堂案例——调整图像大小　148

9.2.2　课堂案例——使用色阶命令美化图像　149

9.2.3　课堂案例——使用曲线命令美化图像　149

9.2.4　课堂案例——调整图像亮度与对比度　150

9.2.5　课堂案例——使用色彩平衡命令调整图像　151

9.2.6　课堂案例——调整图像色相与饱和度　151

9.3　图像的优化与保存　152

9.3.1　课堂案例——图像的优化　152

9.3.2　课堂案例——保存图像　153

9.3.3　保存为透明GIF图像　153

9.4　课堂练习——制作电影图片效果　155

9.5　课后习题　158

9.6　本章总结　158

第 10章　使用绘图工具绘制图像　159

10.1　创建选择区域　160

10.1.1　选框工具　160

10.1.2　套索工具　161

10.1.3　魔棒工具　162

10.2　基本绘图工具　162

10.2.1　课堂案例——使用画笔工具　162

10.2.2　课堂案例——使用仿制图章工具　163

10.2.3　课堂案例——使用图案图章工具　163

10.2.4　课堂案例——使用橡皮擦工具　164

10.2.5　课堂案例——使用油漆桶工具和渐变工具　165

10.3　形状工具　166

10.3.1　课堂案例——绘制矩形　166

10.3.2　课堂案例——绘制圆角矩形　166

10.3.3　课堂案例——绘制椭圆　167

10.3.4　课堂案例——绘制多边形　167

10.4　课堂练习——制作网站标志　168

10.5　课后习题　170

10.6　本章总结　170

第 11章　文字、图层与图层样式的使用　171

11.1　创建文字　172

11.1.1　课堂案例——输入文字并设置属性　172

11.1.2　课堂案例——制作立体文字　173

11.2　编辑图层　175

11.2.1　新建图层　175

11.2.2　删除图层　176

11.2.3　课堂案例——制作网站横排导航条　176

11.3　使用图层样式　177

11.3.1　课堂案例——设置投影样式　177

11.3.2　课堂案例——设置内阴影样式　178

11.3.3　课堂案例——设置外发光样式　180

11.3.4　课堂案例——设置内发光样式　181

11.4　课堂练习——制作立体文字效果　182

11.5　课后习题　184

11.6　本章总结　184

第 12章　设计制作网页中的图像元素　185

12.1　网站Logo的制作　186

12.1.1　网站Logo设计指南　186

12.1.2　课堂练习——设计网站Logo　186

12.2　网络广告的制作　188

12.2.1　网络广告设计要素　188

12.2.2　课堂练习——制作网络广告　188

12.3　网页切片输出　192

12.3.1　创建切片　192

12.3.2　编辑切片　193

12.3.3　优化和输出切片　194

12.3.4　课堂练习——切割优化首页　194

12.4　课后习题　196

12.5　本章总结　196

第4部分　JavaScript网页特效和HTML5篇

第 13章　JavaScript脚本基础　197

13.1　JavaScript简介　198

13.2　JavaScript基本语法　198

13.2.1　常量和变量　198

13.2.2　表达式和运算符　199

13.2.3　基本语句　200

13.2.4　函数　204

13.3　JavaScript的事件　204

13.3.1　课堂案例——利用onClick事件制作全屏网页　204

13.3.2　课堂案例——利用onChange事件制作弹出警告提示对话框　205

13.3.3　课堂案例——利用onSelect事件制作下拉列表框　206

13.3.4　课堂案例——利用onFocus事件制作选择提示对话框　207

13.3.5　课堂案例——利用onLoad事件制作欢迎提示信息　208

13.3.6　课堂案例——利用onBlur事件制作提示信息　209

13.3.7　课堂案例——利用onMouseOver事件显示图像　210

13.3.8　课堂案例——利用onMouseOut事件隐藏图像　211

13.3.9　课堂案例——利用onDblClick事件双击打开网页　212

13.4　浏览器的内部对象　213

13.4.1　课堂案例——利用navigator对象获取浏览器信息　213

13.4.2　课堂案例——利用document对象实现JavaScript的

　输出　214

13.4.3　课堂案例——利用windows对象制作弹出窗口　215

13.4.4　location对象　217

13.4.5　课堂案例——利用history对象制作前进和后退按钮　217

13.5　课堂练习——制作自动关闭网页　218

13.6　课后习题　219

13.7　本章总结　219

第 14章　HTML5基础　220

14.1　HTML5简介　221

14.1.1　HTML5基础　221

14.1.2　向后兼容　221

14.1.3　更加简化　222

14.1.4　HTML5语法中的3个要点　222

14.2　新增的主体结构元素　223

14.2.1　课堂案例——article元素　223

14.2.2　课堂案例——section元素　224

14.2.3　课堂案例——nav元素　225

14.2.4　课堂案例——aside元素　226

14.3　canvas元素　227

14.3.1　课堂案例——canvas绘制矩形　227

14.3.2　课堂案例——绘制线条　228

14.4　课堂练习——使用HTML5制作3D爱心动画　229

14.5　课后习题　230

14.6　本章总结　230

第5部分　网站综合案例篇

第 15章　创建企业展示型网站　231

15.1　网站前期策划　232

15.1.1　企业网站分类　232

15.1.2　企业网站主要功能页面　233

15.1.3　企业网站色彩搭配　234

15.2　设计网站首页　235

15.2.1　首页的设计　235

15.2.2　切割首页　238

15.3　在Dreamweaver中进行页面排版制作　239

15.3.1　创建本地站点　240

15.3.2　创建二级模板页面　240

15.3.3　利用模板制作其他网页　244

15.4　给网页添加弹出窗口页面　246

15.5　本地测试及发布上传　247

15.6　课后习题　248

15.7　本章总结　248

1.完善的知识结构，大量真实案例，配图丰富，效果直观。 

2.习题强化，实用性强。 

3.本书提供课堂案例、课堂练习、课后习题的源文件，以及典型案例在线教学视频。

4.提供PPT教学课件、教学规划参考、教学大纲等资源，便于老师课堂教学