网页三剑客教程配套课件.
Fireworks 8的“层”面板上显示多个层，但只能 有一个显示层处于活动状态。 若要激活某图层，可以直接在“层”面板中单击 该层的名称或该层中的某个对象，也可以在画布上选 择该层上的某个对象。在这之后绘制、粘贴或导入的 对象最初都位于活动层上。
9.3 查看图层
“层”面板是以层次结构显示对象和层。 在“层”面板中可以对不同的图层或所有的图层同 时进行展开或折叠。 若要展开或折叠某个图层上的对象，可以在“层” 面板中单击该图层名称左侧的加（＋）号或减（－） 号按钮。 若要展开或折叠所有图层，在“层”面板中，按住 Alt键同时单击任一层名称左侧的加（＋）号或减（－） 号按钮即可。
9.2 新建、复制、删除图层
如果创建新层，则会在当前所选层的上面插入一个 空白层，新层自动成为活动层，而且在“层”面板中呈 高亮显示。 如果删除某一层，则在该层上面的层将成为活动层。 如果创建复制层，则会添加一个新层，该层包含当 前所选层所包含的相同对象。
9.第9章 图像的效果
第9章 图像的效果
9.1 图层的概念 9.2 新建、复制、删除图层 9.3 查看图层 9.4 保护层 9.5 组织图层 9.6 蒙版遮罩的概念 9.7 蒙版的不同形式及其实现方法 9.8 切片和热点的概念 9.9 创建和编辑切片 9.10 创建和编辑热点 9.11 切片的交互效果 9.12 本章小结
9.2.1 新建一个图层
9.2 新建、复制、删除图层
9.2.2 复制一个图层 若要对指定层进行复制，请执行下列操作之一： （1）将指定层拖到“新建/重制层”按钮 上。 （2）选择一个层，从“层”面板的【选项】菜单中 选择【重制层】，打开“重制层”对话框。然后选择 要插入的复制层的数目以及在堆叠顺序中放置它们的 位置，如图9-6所示。
9.4 保护层
9.4.1 锁定图层 1．锁定一个图层 2．锁定多个图层 3．锁定或解锁所有图层
9.4 保护层
9.4.2 单层编辑 使用“单层编辑”功能保护活动图层以外的所有 图层上的对象不被意外地选择或更改。 若要打开或关闭“单层编辑”，则可从“层”面 板右上角的【选项】菜单中选择【单层编辑】命令。
执行下列操作之一可实现新建一个图层： （1）单击“新建/复制层”按钮 。 （2）执行【编辑】|【插入】|【层】菜单命令。 （3）从“层”面板的【选项】菜单（即单击面板右 上方的 菜单）中选择【新建层】命令，如图9-4所示。 在打开的“新建层”对话框中确定名称，并单击“确 定”按钮，如图9-5所示。
9.2 新建、复制、删除图层
9.5 组织图层
9.5.1 命名图层或对象
9.5 组织图层
9.5.2 移动图层或对象 通过在“层”面板中移动图层和对象，可以改变 对象出现在画布上的顺序。 首先在“层”面板中对要移动的对象进行选择， 可以是一个或多个，然后将图层或对象拖到所需的位 置。 1．将图层上的所有所选对象移到另一个位置 2．将图层上的所有所选对象复制到另一个位置
9.1 图层的概念
活动层的名称在“层”面板中呈高亮显示，其上的 所有对象以缩略图的形式显示，并以列表方式排列，可 以展开层进行查看。 蒙版也显示在“层”面板中。选择蒙版缩略图可以 编辑蒙版。并且可以使用“层”面板创建新的位图蒙版。 Fireworks 8 根据图层创建的顺序堆叠层，将最近 创建的图层放在最上面。 “层”面板显示文档的当前帧中所有图层的当前状 态。 一个Fireworks 文档可以包含许多图层，而每一个 图层又可以包含许多对象。“层”面板会列出所有图层 以及每一个图层所包含的所有对象。
在Fireworks 8中 可以随时对文本进行 编辑（即使在应用了 投影和斜角这类动态 效果之后），并能够 使用拼写检查程序纠 正拼写错误。这意味 着可以很方便地对文 本进行更改。 如果希望文本不 受矩形文本块的限制， 还可以绘制路径并将 文本附加到该路径。
9.1 图层的概念
一个Fireworks 文档由很多被称为“层”的不连续 平面所组成。 在 Fireworks 中，文档的每个对象都驻留在一个层 上。用户可以在绘制之前创建层，也可以根据需要添加 或删除层。画布位于 所有层之下，其本身 不是层。对象、图层 与画布的关系如图9-1 所示。
9.6 蒙版遮罩的概念
一般说来，我们通常的蒙版效果是由遮罩对象和 被遮罩对象这两个对象组成的，只有一个对象是无法 产生蒙版效果的。用遮罩对象作用于被遮罩对象，最 终的效果往往是以遮罩对象的形状来显示，但是颜色 纹理却是被遮罩对象原来具有的。 用户可以使用矢量对象或位图图形作为遮罩对象 和被遮罩对象。可以通过【编辑】、【修改】和“层” 面板来创建蒙版。
9.2 新建、复制、删除图层
9.2.2 复制一个图层
9.2 新建、复制、删除图层
9.2.3 删除一个图层 若要删除一个图层，首先指定要删除的图层，然 后执行下列操作之一： （ 1 ）在“层”面板中，直接将该层拖到垃圾桶图 标 上。 （ 2 ）在“层”面板中，选择该层并单击垃圾桶图 标 。
9.3 查看图层
9.4 保护层
9.4.3 显示或隐藏层或层上的对象 1．打开或关闭“单层编辑” 2．显示或隐藏多个图层或对象 3．显示或隐藏所有图层或对象
9.5 组织图层
9.5.1 命名图层或对象 为了便于在“层”面板中操作对象时进行标识， 可以对图层或对象重新进行命名，具体操作如下： （1）在“层”面板中双击图层或对象，打开“层命 名”对话框，如图9-11所示。 （2）为层或对象键入新名称并按Enter键确定。
9.6 蒙版遮罩的概念
遮罩是“面具、面罩、遮盖物、蒙版”的意思， 通常被人们当作图形图像软件的高级应用。 使用蒙版遮罩可以创建出一个对象或者图形被另 一个对象或者图形遮掩的图像效果。适当地运用蒙版 遮罩，可以做出多种创造性的效果。 遮罩的几个基本概念如下： （1）遮罩对象：用于遮罩的对象称为遮罩对象。 （2）被遮罩对象：被遮罩的对象称为被遮罩对象。 （3）遮罩图像：遮罩形成的图形称为遮罩图像。
合集下载
网页设计三剑客电子课件
4.4.3 使用Spry折叠式选项卡
4.4.3 使用Spry折叠式选项卡
4.4.4 使用Spry可折叠面板管 理内容
4.4.4 使用Spry可折叠面板管 理内容
4.5 创建框架网页
框架的作用就是把浏览器窗口划分为若干个 区域，每个区域可以显示不同的网页。当在 文件中建立框架时，Dreamweaver可以创 建一个无标题的框架集文件，在每个框架中 创建无标题文件，如果某个页面被划分为两 个框架，它实际上包含的却是3个独立的文 件：一个框架集文件和两个框架内容文件。 框架内容文件包含了将出现在页面框架中的 内容。
第4章 页面布局
4.1利用表格布局页面 4.2表格的基本操作 4.3使用AP Div定位 4.4使用Spry布局对象 4.5创建框架网页 4.6案例实训——布局卡通网页
4.1 利用表格布局页面
在网页中，表格更多地用于网页内容排版， 如要将文字放在页面的某个位置，就可以插 入表格，然后设置表格属性，文字放在表格 的某个单元格里即可。无论是在日常生活或 工作中，在网页中使用表格都可以清晰地显 示列表数据。Dreamweaver可以将各种数 据排成行和列，从而更容易阅读信息。
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.5.3 为框架添加内容
4.3.1 创建AP Div
4.3.1 创建AP Div
4.3.2 设置AP Div的属性
网页设计三剑客基础练习典型案例第10章精品PPT课件
5
10.2 创建交互界面
组件是带有参数的电影剪辑，这些参数可以用 来修改组件的外观和行为。每个组件都有预定义 的参数，并且它们可以被设置。每个组件还有一 组属于自己的方法、属性和事件，它们被称为应 用 程 序 程 接 口 （ Application Programming Interface，API）。使用组件，可以使程序设计 与软件界面设计分离，提高代码的可复用性。 Flash MX 2004或Flash MX Professional 2004中 包 含 的 组 件 不 是 FLA 文 件 ， 而 是 SWC 文 件 。 SWC是用于组件的Macromedia文件格式。库项 目中的电影剪辑可以被预编译成swf文件。这样 可以缩短影片测试和发布的执行时间。将 SWC 文件拷贝到 First Run\Components目录后，该组 件便会出现在“组件”面板中。
9
为方便学习与使用课件内容，
课件可以在下载后自由调整
Learning Is To Achieve A Certain Goal And Work Hard, Is A Process To Overcome Various Difficulties For A Goal
7
10.3.1 插入音频文件
在Flash中，用户既可以导入外部声音文件，也 可以使用共享库中的声音文件。导入后的音频文件 ，可以独立于时间轴连续播放，也能够和动画进行 同步播放。如果按钮添加了声音，则按钮更富于回 应性。令声音淡入淡出，使音轨更加优美。此外， 通过设置压缩选项来控制导出的SWF文件中的声 音品质和大小。还可以使用行为来加载和控制声音 的回放。
8
10.3.2 插入视频文件
Flash MX 2004提供了多种在Flash文档中加入 视频的方法：可以将MOV、AVI、MPEG或者其 他格式的视频剪辑导入为Flash中的嵌入文件； 可以将Flash视频（FLV）格式的视频剪辑直接导 入 到 Flash ； 可 以 使 用 动 作 脚 本 中 的 NetConnection和NetStream对象在运行时期间回 放 Flash 文 档 中 的 外 部 FLV 文 件 ； 还 可 以 将 QuickTime格式的视频剪辑导入为链接文件。链 接的视频文件不会成为Flash文档的一部分，而 是在Flash文档中保留指向链接文件的指针。
10.2 创建交互界面
组件是带有参数的电影剪辑，这些参数可以用 来修改组件的外观和行为。每个组件都有预定义 的参数，并且它们可以被设置。每个组件还有一 组属于自己的方法、属性和事件，它们被称为应 用 程 序 程 接 口 （ Application Programming Interface，API）。使用组件，可以使程序设计 与软件界面设计分离，提高代码的可复用性。 Flash MX 2004或Flash MX Professional 2004中 包 含 的 组 件 不 是 FLA 文 件 ， 而 是 SWC 文 件 。 SWC是用于组件的Macromedia文件格式。库项 目中的电影剪辑可以被预编译成swf文件。这样 可以缩短影片测试和发布的执行时间。将 SWC 文件拷贝到 First Run\Components目录后，该组 件便会出现在“组件”面板中。
9
为方便学习与使用课件内容，
课件可以在下载后自由调整
Learning Is To Achieve A Certain Goal And Work Hard, Is A Process To Overcome Various Difficulties For A Goal
7
10.3.1 插入音频文件
在Flash中，用户既可以导入外部声音文件，也 可以使用共享库中的声音文件。导入后的音频文件 ，可以独立于时间轴连续播放，也能够和动画进行 同步播放。如果按钮添加了声音，则按钮更富于回 应性。令声音淡入淡出，使音轨更加优美。此外， 通过设置压缩选项来控制导出的SWF文件中的声 音品质和大小。还可以使用行为来加载和控制声音 的回放。
8
10.3.2 插入视频文件
Flash MX 2004提供了多种在Flash文档中加入 视频的方法：可以将MOV、AVI、MPEG或者其 他格式的视频剪辑导入为Flash中的嵌入文件； 可以将Flash视频（FLV）格式的视频剪辑直接导 入 到 Flash ； 可 以 使 用 动 作 脚 本 中 的 NetConnection和NetStream对象在运行时期间回 放 Flash 文 档 中 的 外 部 FLV 文 件 ； 还 可 以 将 QuickTime格式的视频剪辑导入为链接文件。链 接的视频文件不会成为Flash文档的一部分，而 是在Flash文档中保留指向链接文件的指针。
网页制作技术(三剑客)第4章
3.使用“指针”工具选中该矢量矩形，执行“编辑→剪切” 命令，将图像移动到剪贴板上（或按快捷键Ctrl+X）。 4.选中层面板的位图所在的层，使其成为活动层（高亮显 示）。执行“编辑→粘贴为蒙版”命令（快捷键Ctrl+Alt+V）。 观察层面板，如图4-32所示，在位图缩略图的右边有一个 “蒙版”的缩略图，表示该位图受到了蒙版的作用。
图4-26 层面板菜单
操作步骤(续)
8.选中“框架”层，单击 按钮折叠该层，折叠后文件 夹为关闭状态 。若需要查看该层中的内容，可以再次单击 按钮可展开层，展开后文件夹为打开状态 。
9.点击“仪表”层，单击层面板选项菜单的“向下合并” 命令，或单击“修改”菜单->“向下合并”命令，将该图形合 并。
练一练：
打开一幅图像，练习使用“套索”工具、“多边形套索”工具选择 部分 图像。 使用“魔术棒”工具选择像素 （1）打开一幅图像，按下W键，选择“魔术棒”工具。 （2）点击该图像中的黄色部分，所选部分如图4-13。 （3）“魔术棒”工具属性面板中，改变“容差”值为84，效果 如图 4-14所示。
操作要点
4.2 图层与蒙板 1.使用蒙板
“蒙版”又称“遮罩”，读者可将“蒙版” 理解掩盖位图的某一部分使其不完全显示的工 具。Fireworks CS3提供了强大的“蒙版”功能。
【任务七】使用“粘贴为蒙版”命令遮罩图片
F
遮 罩 图 片
操作步骤
1.打开一幅位图，如图4-28所示。
图4-28 原始位图
图4-13 “容差”值32
图4-14 “容差”值84
操作要点
4.1 选择和变形对象
1.变形和扭曲所选对象和选区 选择“缩放”工具、“倾斜”工 具、“扭曲”工具
图4-26 层面板菜单
操作步骤(续)
8.选中“框架”层，单击 按钮折叠该层，折叠后文件 夹为关闭状态 。若需要查看该层中的内容，可以再次单击 按钮可展开层，展开后文件夹为打开状态 。
9.点击“仪表”层，单击层面板选项菜单的“向下合并” 命令，或单击“修改”菜单->“向下合并”命令，将该图形合 并。
练一练：
打开一幅图像，练习使用“套索”工具、“多边形套索”工具选择 部分 图像。 使用“魔术棒”工具选择像素 （1）打开一幅图像，按下W键，选择“魔术棒”工具。 （2）点击该图像中的黄色部分，所选部分如图4-13。 （3）“魔术棒”工具属性面板中，改变“容差”值为84，效果 如图 4-14所示。
操作要点
4.2 图层与蒙板 1.使用蒙板
“蒙版”又称“遮罩”，读者可将“蒙版” 理解掩盖位图的某一部分使其不完全显示的工 具。Fireworks CS3提供了强大的“蒙版”功能。
【任务七】使用“粘贴为蒙版”命令遮罩图片
F
遮 罩 图 片
操作步骤
1.打开一幅位图，如图4-28所示。
图4-28 原始位图
图4-13 “容差”值32
图4-14 “容差”值84
操作要点
4.1 选择和变形对象
1.变形和扭曲所选对象和选区 选择“缩放”工具、“倾斜”工 具、“扭曲”工具
网页三剑客 - dw
前，必须先定义一个锚记；
(1) 创建锚记 (如下图)
• 将光标定位在要插入锚记的位置，或选中要指定锚记的文本；
• 点击菜单栏 “插入” —— “命名锚记” ；
• 通过鼠标的拖拽 可以改变锚记的位置。
网页三剑客之Dreamweaver 14
2.2 超级链接
(2) 实现锚记链接 (如下图)
• 选中要链接的图片或文字； • 点击菜单栏 “插入” —— “超级链接” ，或者直接在文本属性面板直接输入“ # 锚记名称” 。
• 填 充：单元格内容和边之间的距离；
• 边 框： 边框粗细，0时即无边框； • 类：用于CSS样式的； • 边框颜色： 16进制、颜色单词和RGB； • 清除宽/高：根据内容进行调整大小； • 将宽度转为百分比：按窗口缩放。
网页三剑客之Dreamweaver
18
2.4 表格应用
（3）单元格的属性：
网页三剑客之Dreamweaver
21
2.5 层的应用
（3）层的操作 ( 层面板 ) ：
• 显示/隐藏层 ：单击 可显示隐藏层；
• 防止重叠：
勾上就可以不让层重叠在一起；
设置数字，越大的越在上面；
• 设置层叠顺序：
• 层的嵌套：光标移动到要嵌套的层里再插入一个层。
图1
网页三剑客之Dreamweaver
“制表符”形 式
网页三剑客之Dreamweaver 3
1.1 Dreamweaver 8 基本操作
3. 文档工具栏 -- 通过快捷按钮可以控制文档的视图显示。
【设计】按钮可以查看设计的网页画；
【代码】按钮可以查看和编辑网页代码；
【拆分】按钮还可以同时查看代码和设计画面。
显示代码视图 设计视图 设定网页标题 文件管理
(1) 创建锚记 (如下图)
• 将光标定位在要插入锚记的位置，或选中要指定锚记的文本；
• 点击菜单栏 “插入” —— “命名锚记” ；
• 通过鼠标的拖拽 可以改变锚记的位置。
网页三剑客之Dreamweaver 14
2.2 超级链接
(2) 实现锚记链接 (如下图)
• 选中要链接的图片或文字； • 点击菜单栏 “插入” —— “超级链接” ，或者直接在文本属性面板直接输入“ # 锚记名称” 。
• 填 充：单元格内容和边之间的距离；
• 边 框： 边框粗细，0时即无边框； • 类：用于CSS样式的； • 边框颜色： 16进制、颜色单词和RGB； • 清除宽/高：根据内容进行调整大小； • 将宽度转为百分比：按窗口缩放。
网页三剑客之Dreamweaver
18
2.4 表格应用
（3）单元格的属性：
网页三剑客之Dreamweaver
21
2.5 层的应用
（3）层的操作 ( 层面板 ) ：
• 显示/隐藏层 ：单击 可显示隐藏层；
• 防止重叠：
勾上就可以不让层重叠在一起；
设置数字，越大的越在上面；
• 设置层叠顺序：
• 层的嵌套：光标移动到要嵌套的层里再插入一个层。
图1
网页三剑客之Dreamweaver
“制表符”形 式
网页三剑客之Dreamweaver 3
1.1 Dreamweaver 8 基本操作
3. 文档工具栏 -- 通过快捷按钮可以控制文档的视图显示。
【设计】按钮可以查看设计的网页画；
【代码】按钮可以查看和编辑网页代码；
【拆分】按钮还可以同时查看代码和设计画面。
显示代码视图 设计视图 设定网页标题 文件管理
网页制作三剑客案例教程第5章
onUnload
访问者退出网页文档时发生的事件
键盘和鼠标的事件
onClick 用鼠标单击选定元素的一瞬间发生的事件
OnBlur
OnDragDrop OnDragStart
鼠标指针移动到窗口或帧外部,即在这种非激活状态 下发生的事件
拖动并放置选定元素的那一瞬间发生的事件 拖动选定元素的那一瞬间发生的事件
设定图像文件
【行为】面板中添加了动作
5-1-5 常用行为之弹出窗口页面的制作
这一节我们要讲解的弹出窗口页面不仅可以实现打开页面的同时弹出，也可以单击 按钮时弹出，这个效果是通过【行为】菜单中的【打开浏览器窗口】动作来实现的。 在Dreamweaver中可以通过此行为来设定打开的浏览器窗口的大小，以及是否显示 导航条、地址工具栏、状态栏和菜单条等项内容。
5-1-1 掌握行为基础知
行为可以让你不用书写一行javascript代码即可实现多种动态网页效果。在这 一节中我们要掌握行为的概念和应用原理，并为了全面运用行为而巩固基础 知识。
认识【行为】面板
定的动作
OnKeyPress
onKeyUp
在键盘上按特定键时发生的事件
在键盘上按下特定键并释放时发生的事件
表单事件
OnAfterUpdate
OnBeforeUpdate OnChange OnReset
更新表单文档的内容时发生的事件
改变表单文档的项目时发生的事件 访问者修改表单文档的初始值时发生的事件 将表单文档重设置为初始值时发生的事件
OnSubmit
onSelect
访问者传送表单文档时发生的事件
访问者选定文本字段中的内容时发生的事件
其他事件
OnError OnFilterChange Onfinish Marquee Onsart Marquee 在加载文档的过程中,发生错误时发生的事件 运用于选定元素的字段发生变化时发生的事件 用功能来显示的内容结束时发生的事件 开始应用功能时发生的事件
网页 三剑客教程配套课件
10.3 切片的优化和导出
10.3.2 切片的导出
10.3 切片的优化和导出
10.3.2 切片的导出
2．导出切片的设置 在“切片”选项中选择“导出切片”。如图10-27 所示。 ❖ 如果只导出切片，而不导出无切片的图像区域， 则可以勾选第一个复选框“仅已选切片”选项。 ❖ 如果图像中含有无切片区域而又要在网页中使用 原图时，就必须勾选第二个复选框“包括无切片区域” 选项。
（5）单击“退出”按钮后，将打开“图像预览” 窗口，预览导出设置效果。
10.2 图像的导出操作
10.2.3 图像预览
当“导出向导”执行到最后一步，或者执行【文 件】|【图像预览】菜单命令时，可以打开“图像预 览”窗口，显示为当前文档建议的优化和导出选项的 效果，如图10-22所示。可以对“图像预览”窗口的 设置进行更改，包括优化设置。
10.2 图像的导出操作
10.2.5 快速导出
“快速导出”按钮位于文档窗口的右上角，在 将Fireworks 文件导出到其它应用程序时，使用此 按钮可以很容易地访问常用选项。使用“快速导出” 按钮，用户可以导出为多种格式，如图10-25所示。
使用“快速导出”按钮用户可以将 Fireworks 文件导出到许多 Macromedia 应用程序中，其中包 括 Dreamweaver、Flash、Director 和 FreeHand。 此外，可以将文件导出到 Photoshop、FrontPage、 GoLive 和 Illustrator。
（5）如果经常需要对某一类型图片进行相似的处 理，可以将优化设置保存下来，今后只需要直接调用 就可以了。
10.2 图像的导出操作
10.2.1 导出文档 （1）在“优化”面板中选择要用于导出的文件格