巧学巧用Dreamweaver制作网页习题精解

第1章　基础知识　1
　　本章练习主要涉及Dreamweaver必备的知识和技能，包括在网页中插入图片、变换标题格式、文字的换行、字体的设置、为图片和文字添加链接等内容。
1.1　在网页中插入图片　1
　　掌握在网页制作过程中插入图片的方法
1.2　变换标题的格式　1
　　掌握更改文字属性的方法
1.3　文本的强制换行　3
　　文本中强制换行的方法
1.4　字体大小、颜色的设置　4
　　文本属性的应用
1.5　列表符号的应用　5
　　列表符号的应用
1.6　用CSS定义文字样式　6
　　掌握简单的定义和使用CSS样式的方法
1.7　图片与文字的对齐方式　7
　　掌握属性面板中的几种对齐方式
1.8　为图片添加链接　8
　　图片链接的设置方法
1.9　为文字添加链接　9
　　为文字添加链接
1.10　设置锚记链接　10
　　“插入→命名锚记”命令的应用
1.11　热区的设置　11
　　“矩形热点工具”和“多边形热点工具”的应用
1.12　插入水平线　12
　　水平线的插入方法
1.13　交换图像(一)　13
　　“交换图像”行为的应用
1.14　交换图像(二)　14
　　为按钮添加“交换图像”行为并设置相应的链接
1.15　设置邮件链接　15
　　为文字设置邮件链接
1.16　设置下载链接　16
　　给文字添加下载链接
第2章　网页布局　17
　　本章主要介绍常见的网页布局和实现方法。
2.1　标准模式下使用表格设计版式　17
2.1.1　在页面中插入表格　17
　　标准模式下插入表格
2.1.2　自定义表格样式　17
　　“命令→格式化表格”命令的应用
2.1.3　隐藏表格边框　18
　　在“属性”面板中更改表格边框的属性
2.1.4　双线表格的制作　18
　　表格间距和边框颜色等参数的设置方法
2.1.5　单线表格的制作　19
　　单线表格制作方法
2.1.6　表格属性的综合应用　19
　　表格属性的综合应用
2.2　使用框架设计版式　20
2.2.1　“上方固定”模式的框架　20
　　创建一个“上方固定”模式的框架，并制作成页面
2.2.2　制作上中下结构的框架页面　21
　　“插入→HTML→框架→对齐上缘”命令的应用
2.2.3　厂字型框架布局设计(一)　21
　　“上方固定，左侧嵌套”模式框架的应用
2.2.4　厂字型框架布局设计(二)　21
　　“上方固定，左侧嵌套”模式框架的应用
2.2.5　上中下结构框架的布局　22
　　“对齐上缘”命令的应用
2.2.6　在框架页面中使用链接　23
　　使用框架在左侧列出导航链接
2.3　在布局视图模式下设计版式　24
2.3.1　国字型页面布局(一)　24
　　在布局模式下，使用“布局表格”和“绘制布局单元格”
2.3.2　国字型页面布局(二)　25
　　在布局模式下绘制表格样式
2.3.3　不规则布局　26
　　使用布局视图模式进行不规则页面的设计
2.3.4　左中右对称型布局　27
　　左中右结构页面的布局方法
2.3.5　最常见的左右布局　28
　　在布局模式下，构建最常见的左右布局网页
2.3.6　在网页中的色系搭配练习　28
　　相同结构的网页可以使用不同的色系
2.3.7　水平导航栏的网页布局　28
　　在布局模式下，使用“布局表格”绘制上下结构的表格样式
2.3.8　复杂结构的页面布局　29
　　绘制布局表格，以及页面颜色的搭配
第3章　网页布局设计　31
　　在上一章的基础上，结合实际工作中常用的Photoshop和Fireworks等图像处理软件制作网页布局效果，并进行切分，然后再进入Dreamweaver中制作成网页。
3.1　常用的网页布局　31
3.1.1　暖色调网页布局练习　31
　　在Photoshop中运用填充效果制作网页，在Dreamweaver中完成该网页
3.1.2　冷色调基本网页布局练习　32
　　在上面练习的基础上，制作冷色调网页
3.1.3　厂字型网页布局(一)　33
　　在Photoshop中设计厂字型网页布局
3.1.4　厂字型网页布局(二)　34
　　更充分地使用Photoshop的功能来加强网页的视觉效果
3.1.5　素材图片作背景的网页　34
　　利用素材图片制作网页
3.1.6　包围型网页布局　35
　　利用“填充”工具制作出网页布局
3.1.7　三分栏布局　35
　　制作基本的三分栏结构的网页
3.1.8　复杂的三分栏布局(一)　36
　　Photoshop中“图层样式”的应用
3.1.9　复杂的三分栏布局(二)　36
　　三分栏布局的变化
3.1.10　综合网页的布局　36
　　分栏布局的综合应用
3.2　不规则的页面布局　37
3.2.1　不规则布局(一)　37
　　Photoshop中“投影”和“填充”命令的结合应用
3.2.2　不规则布局(二)　38
　　Photoshop的“斜面和浮雕”效果的应用
3.2.3　不规则布局(三)　39
　　Photoshop中“填充”的应用
3.2.4　不规则布局(四)　39
　　“斜面和浮雕”效果的应用
3.2.5　不规则布局(五)　40
　　描边效果的应用
3.3　特殊页面布局　41
3.3.1　特殊页面(一)　41
　　Photoshop中“斜面和浮雕”效果的应用
3.3.2　特殊页面(二)　42
　　Photoshop中“斜面和浮雕”效果的应用
3.3.3　特殊页面(三)　43
　　Photoshop中“渐变叠加”和“光泽”效果的应用
3.3.4　特殊页面(四)　44
　　特殊页面的布局方法
3.3.5　特殊页面(五)　44
　　特殊页面的布局方法
第4章　制作网页中的按钮　45
　　网页上的按钮对浏览者起着至关重要的引导作用，本章主要介绍如何设计制作出漂亮的网页按钮。
4.1　在网页中插入Dreamweaver自带的Flash按钮　45
4.1.1　插入Flash按钮(一)　45
　　在页面中插入圆形Flash按钮
4.1.2　插入Flash按钮(二)　45
　　在页面中插入方形Flash按钮
4.1.3　插入Flash按钮(三)　45
　　在页面中插入异形的Flash按钮
4.2　不同质感的按钮　46
4.2.1　淡入淡出按钮　46
　　Photoshop 中“线性渐变”填充的应用
4.2.2　石质按钮　46
　　“图层混合样式”中的“斜面和浮雕”效果的应用
4.2.3　软塑料按钮　47
　　“图层混合样式”的应用
4.2.4　渐变按钮　47
　　“渐变”和“描边”工具的结合使用
4.2.5　浮雕效果按钮　48
　　“渐变叠加”功能的使用
4.3　不同形状的按钮　48
4.3.1　书夹形状的按钮　48
　　“渐变叠加”和“描边”的结合应用
4.3.2　砖形按钮　49
　　Photoshop填充的应用
4.3.3　荧光按钮　49
　　Photoshop的填充功能的应用
4.3.4　螺母形按钮　49
　　“渐变叠加”和“内发光”效果的结合应用
4.3.5　水膜按钮　50
　　Photoshop中“描边”的应用
4.4　动态按钮　50
4.4.1　动态按钮(一)　50
　　Photoshop中的“色相/饱和度”工具的应用
4.4.2　动态按钮(二)　51
　　“渐变”和“描边”工具的结合应用
4.4.3　动态按钮(三)　52
　　“斜面和浮雕”效果的应用
4.4.4　动态按钮(四)　52
　　“动感模糊”和“图案叠加”效果的结合应用
4.4.5　动态按钮(五)　53
　　“云彩”和“渐变叠加”效果的结合应用
第5章　网页Banner的设计　55
　　本章主要介绍网页中另一重要元素—Banner的设计和制作方法。
5.1　纯文字的Banner设计　55
　　使用ImageReady制作动画GIF图片的方法
5.2　制作美食Banner(一)　55
　　使用ImageReady制作动画的方法，色彩的搭配
5.3　制作美食Banner(二)　56
　　ImageReady的应用
5.4　应用插画制作Banner　56
　　在ImageReady中，把一幅插画制作成动画
5.5　漫画效果的Banner　57
　　漫画效果的制作技巧
5.6　制作圣诞节Banner　57
　　节日Banner的制作方法
5.7　制作游戏Banner　58
　　在ImageReady中，多图层Banner的制作方法
5.8　制作公益广告Banner　58
　　在ImageReady中制作动画的方法
5.9　制作旅游广告Banner　58
　　ImageReady中动画的制作方法
5.10　制作卡通动画Banner　59
　　ImageReady中的动画制作技巧
第6章　网页导航栏的设计　61
　　本章主要介绍各类网页导航栏的设计与制作方法，与实际应用结合紧密，涉及各类Dreamweaver功能的应用。
6.1　最常见的左置导航栏　61
6.1.1　左置导航栏(一)　61
　　Photoshop中“斜面和浮雕”效果的应用
6.1.2　左置导航栏(二)　62
　　利用选区剪切制作导航栏
6.1.3　左置导航栏(三)　63
　　“图层混合样式”的应用
6.1.4　左置导航栏(四)　63
　　“斜面和浮雕”效果的使用
6.1.5　左置导航栏(五)　64
　　使用“斜面和浮雕”效果，制作书夹导航栏
6.1.6　左置导航栏(六)　65
　　“变形”命令的应用
6.2　置顶导航栏　66
6.2.1　置顶导航栏(一)　66
　　“斜面和浮雕”的应用
6.2.2　置顶导航栏(二)　67
　　“斜面和浮雕”的应用
6.2.3　置顶导航栏(三)　67
　　“投影”效果的应用
6.2.4　置顶导航栏(四)　68
　　矩形边框的制作方法
6.3　右置导航栏　69
6.3.1　右置导航栏(一)　69
　　滤镜中“扭曲”、“切变”工具的应用
6.3.2　右置导航栏(二)　70
　　“渐变”和“描边”工具的应用
6.3.3　右置导航栏(三)　71
　　“斜面和浮雕”效果的应用
6.3.4　右置导航栏(四)　71
　　“纹理化”效果的应用
6.3.5　右置导航栏(五)　72
　　“斜面和浮雕”和“投影”效果的结合应用
6.4　两级导航栏　73
6.4.1　两级导航栏(一)　73
　　“渐变”工具和“斜面和浮雕”效果的应用
6.4.2　两级导航栏(二)　74
　　“斜面和浮雕”和“投影”效果的结合应用
6.4.3　两级导航栏(三)　75
　　“斜面和浮雕”效果和“剪切”工具的应用
6.4.4　两级导航栏(四)　75
　　填充颜色应用
6.4.5　两级导航栏(五)　75
　　“云彩”和“渐变叠加”效果的结合应用
第7章　厂字型布局深入　77
　　厂字型布局是最常用到的网页布局方式，本章专门针对这种布局方式进行深入练习。
7.1　常用直角接角设计　77
7.1.1　应用纹理的设计方案　77
　　“自定义图案”填充的应用
7.1.2　应用投影效果的设计方案　78
　　“图层混合样式”中“投影”和“描边”效果的应用
7.1.3　细线条与主体配合的设计方案　79
　　填充颜色应用
7.1.4　格子型的设计方案　80
　　选区剪切工具的使用
7.1.5　悬挂合页式的设计　81
　　“图层混合样式”中“斜面和浮雕”功能的应用
7.1.6　浮雕效果的设计方案　81
　　填充的应用
7.2　具有一些变化的厂字型布局网页　82
7.2.1　弧形接角　82
　　填充的应用
7.2.2　转角型接角　84
　　圆角矩形的应用
7.2.3　浮雕效果的接角　84
　　“投影”和“等高线”的结合应用
7.2.4　拱门形状接角　85
　　拱门形状的制作方法
7.2.5　曲线线条的应用　85
　　“斜面和浮雕”效果的应用
7.3　位图的处理与应用　86
7.3.1　用图片作接角(一)　86
　　“斜面和浮雕”效果的应用
7.3.2　用图片作接角(二)　87
　　填充效果的应用
7.3.3　用图片作接角(三)　88
　　“动感模糊”的应用
7.3.4　用图片作接角(四)　89
　　剪切效果的应用
7.3.5　用图片作接角(五)　90
　　“杂色”效果的应用
7.4　特殊衔接的接角处理　91
7.4.1　充分利用线条的设计方案　91
　　剪切效果应用
7.4.2　方格纹理的应用　93
　　填充效果的应用
7.4.3　半圆接角　94
　　剪切和“投影”效果的结合应用
7.4.4　悬浮接角　94
　　剪切效果的应用
第8章　网页图形元素的装饰设计　95
　　本章主要介绍网页图形元素的装饰设计与制作，分别对网页的不同元素进行了针对性设计练习。
8.1　网站中的按钮装饰　95
8.1.1　单色的按钮装饰　95
　　填充的应用
8.1.2　描边按钮装饰　96
　　“描边”效果的制作
8.1.3　浮雕效果的按钮装饰　97
　　“斜面和浮雕”效果的应用
8.1.4　渐变装饰按钮　97
　　渐变工具的使用
8.1.5　斜角按钮　98
　　使用“钢笔”工具和“填充”的功能
8.1.6　图片装饰按钮　99
　　“图层混合样式”中“斜面和浮雕”效果的应用
8.1.7　凸起按钮装饰　100
　　“图层混合样式”中 “斜面和浮雕”的应用
8.2　导航条的装饰设计　100
8.2.1　光泽导航条　100
　　“填充图案”和“描边”的结合应用
8.2.2　石质效果的导航条　101
　　“图层混合样式”中的“斜面和浮雕”、“纹理化”的应用
8.2.3　路牌形状的导航条　102
　　“投影”和“等高线”的结合应用
8.2.4　木质的导航条　103
　　“斜面和浮雕”效果的应用
8.2.5　不规则的导航条　103
　　“椭圆选区”剪切的应用
8.2.6　渐变效果的导航条　104
　　渐变填充效果的应用
8.3　装饰性Banner　105
8.3.1　粗线条装饰Banner　105
　　填充效果的应用
8.3.2　素材叠加装饰Banner　106
　　“添加图层蒙板”的应用
8.3.3　渐变装饰效果　107
　　“剪切”和“图层混合”效果的应用
8.3.4　半透明方块装饰Banner　108
　　“杂色”效果的应用
8.3.5　颜色递进效果的装饰　109
　　填充效果的应用
8.4　综合装饰的效果　110
8.4.1　素材图片装饰(一)　110
　　“填充”和“斜面和浮雕”效果的应用
8.4.2　素材图片装饰(二)　110
　　“斜面和浮雕”效果的应用
8.4.3　线条的装饰效果　111
　　“渐变填充”效果的应用
8.4.4　颜色拼接装饰　111
　　“填充”和“斜面和浮雕”效果的应用
8.4.5　背景图片装饰Banner　112
　　“斜面和浮雕”效果的应用
第9章　网站细节　113
　　本章主要介绍在制作精美的网页时需要注意的一些制作技巧。
9.1　便条纸效果　113
　　“线性渐变”填充的应用
9.2　留言纸效果　114
　　利用图层叠加效果
9.3　便条留言板效果(一)　115
　　“图层混合模式”应用
9.4　便条留言板效果(二)　115
　　“图层混合样式”和“羽化”工具的结合使用
9.5　金属效果对话框(一)　116
　　使用了图层混合样式中的“渐变叠加”功能，制作金属效果
9.6　金属效果对话框(二)　117
　　“渐变叠加”和“描边”的结合应用
9.7　留言板(一)　118
　　“渐变”填充的应用
9.8　留言板(二)　119
　　“斜面和浮雕”的应用
9.9　投影效果　119
　　“描边”和“高斯模糊”的结合应用
9.10　描边效果　120
　　描边应用
第10章　综合练习　121
　　本章在熟练练习前面各章内容的基础上进行综合练习。每节完成一个完整的网页设计、图片切割输出、合成网页的全过程。通过本章的练习，读者可以掌握设计一个比较专业的网站的各方面技能。
10.1　综合实例(一)　121
10.1.1　构图和切片　121
　　综合应用
10.1.2　制作按钮　122
　　在Photoshop中制作按钮
10.1.3　制作链接页　123
　　在Photoshop中制作链接页面
10.1.4　生成完整网站　124
　　在Dreamweaver中完成制作
10.2　综合实例(二)　125
10.2.1　主页的设计与切片　125
　　综合应用
10.2.2　制作首页　127
　　在Dreamweaver中制作首页
10.2.3　制作链接页　128
　　在Photoshop中制作链接页
10.2.4　生成完整网站　129
　　完成制作
10.3　综合实例(三)　130
　　综合应用
10.4　综合实例(四)　131
　　综合应用
第11章　使用行为制作网页的交互功能　135
　　本章针对Dreamweaver中的行为功能，练习制作网页中各种不同的网页交互功能。
11.1　交换图像　135
　　交换图像
11.2　弹出式对话框　135
　　设置弹出信息行为
11.3　弹出浏览器窗口　136
　　添加弹出浏览器行为
11.4　拼图效果　137
　　拖动层行为
11.5　控制网页Flash播放　138
　　插入媒体对象、表单按钮并给表单按钮添加行为
11.6　为文字添加背景音乐　139
　　添加播放声音行为
11.7　改变属性　139
　　改变属性行为
11.8　显示和隐藏层　140
　　“显示-隐藏层”命令的应用
11.9　显示和隐藏弹出式菜单　141
　　“显示弹出式菜单”行为
11.10　检查插件安装　142
　　检查插件行为
11.11　检查浏览器　143
　　检查浏览器
11.12　表单检查　144
　　表单检查
11.13　导航栏图像行为　145
　　导航栏图像行为
11.14　状态栏文本行为　145
　　状态栏文本行为
11.15　调用JavaScript　146
　　JavaScript的调用
11.16　跳转菜单和跳转菜单开始行为　147
　　跳转菜单和跳转菜单开始行为
11.17　自动链接新的站点　148
　　转动URL行为
第12章　模板与库　151
　　本章主要练习使用Dreamweaver中的模板与库功能来制作相同结构的网页。
12.1　制作基于模板的实例　151
　　制作基于模板的实例
12.2　套用模板到页面　152
　　套用模板实例
12.3　嵌套模板　152
　　套用模板实例
12.4　在页面中添加和使用库项目　153
　　“库”的应用
12.5　修改库项目以更新整个站点　154
　　修改库项目更新站点
第13章　CSS应用　157
　　本章在第1章中CSS基础练习的基础上，进一步练习使用CSS制作网页。
13.1　使用CSS定义文字的颜色和大小　157
　　CSS样式的创建
13.2　创建CSS样式文件　158
　　创建CSS样式文件
13.3　附加外部CSS样式文件　158
　　导入CSS样式
13.4　内置CSS样式效果　159
　　内置CSS样式效果的应用
13.5　用CSS定义背景色　159
　　使用CSS定义背景颜色
13.6　使用CSS定义对齐方式　160
　　对CSS样式中“方框→浮动”功能的应用
13.7　应用CSS定义表格边框　160
　　应用CSS定义表格边框
13.8　自定义项目符号的图像　161
　　应用CSS样式自定义项目符号的图像
13.9　特殊光标效果　162
　　使用CSS样式制作特殊光标效果实例