网页设计讲座( Macromedia)
合集下载
Dreamweaver-Flash-Fireworks网页制作培训教程第2课
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
2.1.1 知识讲解
本节将学习如何选取位图、填充颜色、模 糊与锐化图像、加深与减淡图像等。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
2.1.1 知识讲解
1. 2. 3. 4. 5. 6. 7. 8.
1. 绘制图形
1）规则图形的绘制 规则图形主要包括矩形、椭圆、多边形和星形。 用相应的工具拖动可绘制矩形、椭圆，比较简 单；按住【Shift】键可绘制正方形或正圆。要 绘制圆角矩形，可在绘制完矩形后在【属性】 面板的【矩形圆度】文本框中输入圆角的半径； 也可从自动形状图形列表中选择圆角矩形工具 进行绘制。 绘制多边形或星形时，可以在多边形工具的 【属性】面板的【形状】下拉列表中选择形状， 在【边】文本框中设置边数，在【角度】文本 框中设置多边形或星形的内角度数。
2.2.2 典型案例——绘制公司标志
案例目标 本案例将制作公司标志，主要练习图形绘 制、钢笔工具、打孔、联合、文本转路径、 矢量纹理填充及滤镜的使用，制作出的效 果如下图所示。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
2.2.2 典型案例——绘制公司标志
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
2.2.1 知识讲解
本节中将学习矢量图形的绘制、路径的编 辑、滤镜的使用及文本的编辑等内容。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
2.2.1 知识讲解
1. 绘制图形 2. 组合路径 3. 分割路径
8.橡皮图章工具
DreamweaverFlashFireworks网页制作培训教程第7课
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
2. 调用元件
调用元件的方法为：在库中选取要调用的 元件，将其拖入场景或编辑区后释放鼠标。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
3. 逐帧动画
逐帧动画已经在第6课的典型案例中应用 过了，它是以单帧中内容的变化来实现动 画效果的。这种动画文件占用的存储空间 较大，因此，变化过程太长的动画不宜采 用该类型；但变化比较复杂、不易体现出 变化过程的动画，如表现举手、抬足或面 部表情等，应采用该类型。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
2. 创建引导动画
创建引导动画的具体操作如下： （1）创建引导层。单击图层区中的 按
钮新建引导层，此时建立的引导层与下方 的图层已建立了链接关系。 （2）在引导层中绘制路径。选中引导层， 选择工具箱中的铅笔、钢笔、多边形、矩 形或椭圆工具进行绘制。绘制完成的路径 只能为笔触线，而不能有填充色。
本课导读
使用Flash就是为了制作出漂亮的动画效 果，本课就来讲解Flash的这个核心内容。 根据创建方式的不同，Flash动画分为基 础动画和特殊动画。其中，基础动画可分 为逐帧动画和补间动画，补间动画根据不 同对象又可分为形状补间动画和动画补间 动画两种；根据不同的辅助对象，特殊动 画可分为引导动画和遮罩动画两种。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第7课
2. 创建引导动画
（3）在被引导层中创建动画补间动画， 并且首末关键帧中的元件实例必须位于路 径中的不同位置。
网页设计与制作DreamWeaver教案：第十三讲 网页中的动感元素
第十三讲网页中的动感元素度的2倍：512，左对齐。
预览才可看到生动的波纹效果。
5）插入背景音乐1）插入布局/绘制层/绘制一个层/光标置于层中，插入/媒体/插件：xzm.mid；2）选中插件标记，“参数”：autostart:true，loop:2，代码如下：<embedsrc="00.mid" width="32" height="32" autostart="true"loop="2"></embed>3）选择层，“属性”面板设置层的可见性为hidden（隐藏）5.扩展功能（使用第三方插件）Macromedia Extension Manager 就是功能扩展管理器。
功能扩展管理器可与Dreamweaver、Dreamweaver UltraDev、Fireworks 和Flash 并行运行；功能扩展管理器1.6 支持新版Dreamweaver、Fireworks 和Flash 以及已添加的许多新功能，可支持新的DW 产品套件内的轻松扩展。
课堂实践（1）打开“课堂实践”网站文件夹“09动感元素”中的网页文档“09.html”。
（2）分别在页面的上部和中部插入两个层，在两个层中插入flash动画。
疑难解析问题1：如何将Flash动画的背景颜色设置为透明？答：在网页文档中选中所插入的Flash动画，在Flash的“属性”面板中单击【参数】按钮，弹出“参数”对话框，在该对话框中，在“参数名”文本框输入“Wmode”，在“值”文本框中输入“transparent”，如图8-13所示。
然后单击【确定】按钮即可。
将Flash动画的背景颜色设置为透明，使页面的背景在Flash动画下衬托出来。
图8-13 “参数”对话框问题2：如何在网页中插入Flash视频？答：Dreamweaver 8能够直接在页面中插入Flash视频内容，而无需使用Flash创作工具。
dreamweaver8网页设计教程
d re a m w e a v e r8网页设计教程本页仅作为文档封面，使用时可以删除This document is for reference only-rar21year.March《dreamweaver8网页设计》目录第一章遨游DREAMWEAVER8精彩世界错误!未定义书签。
第二章创建与规划站点错误!未定义书签。
第三章文本及其格式化错误!未定义书签。
第四章表格错误!未定义书签。
第五章图像错误!未定义书签。
第六章框架错误!未定义书签。
第七章页面布局视图的使用错误!未定义书签。
第八章链接错误!未定义书签。
第九章层与时间轴错误!未定义书签。
第十章表单错误!未定义书签。
第十一章行为错误!未定义书签。
第十二章制作动态页面错误!未定义书签。
第十三章代码片断、库项目和模板错误!未定义书签。
第十四章网页的制作错误!未定义书签。
第十五章网站的测试与上传错误!未定义书签。
第十六章使用FIREWORKS 8处理网页图像错误!未定义书签。
第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用FrontpageDreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
Dreamweaver-Flash-Fireworks网页制作培训教程第16课
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
16.2.1 设计主页效果
案例目标 本节将制作浪度沙发网站的主页，主要练 习在Fireworks中制作图像效果。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
16.2.1 设计主页效果
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
16.3.2 对简介页进行布局
删除导航条下方的栏目内容。合并单元格，再拆 分为两行，第1行放置“简介标题”；第2行插入 2行1列的表格，左列放置子导航按钮，右列放置 内容。 在右列中再插入2行1列的表格，第1行拆分为3 列，并设置左右列的宽度均为10像素，中间列放 置简介内容。第2行放置角边图。 在页脚中修改背景图，并添加内容。 保存文件，浏览效果。
主页效果的设计主要分为以下几部分。 导航条的确定：主页效果是基于浪度沙发 网站的流程图进行构思的。流程拓扑图中 包含了4大部分，这4部分可看做一个网站 的导航，因此在设计界面效果（包括内页 效果）时将其作为导航条处理。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
案例目标 本节将制作banner变换效果，主要练习 Flash中帧的使用和动画的制作。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
16.2.2 制作banner动画
操作思路：
（1）设置动画场景大小为774×229像素， 帧频为20fps。 （2）导入图像并打散。 （3）绘制一个与banner大小一致的黑色矩 形框。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
网页设计与网站建设PPT课件
2. 两边做成渐变式柱状或花边式。 3. 在CSS面板中新建CSS样式，选中重定
义HTML标签和仅对该文档，选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片，在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素，如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片，在属性面板中记 下高度（需要时可记下宽度）。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性，如高度，边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界，编码等属性 3. 为网页建立柱状和花边背景，并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW，建立站点，注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性，设置边界为 0及编码为简体中文。
3. 在标签区找到Table，点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形，大小 1000×*，
返回
1.5 位图处理
1. 位图导入：主要是jpg、gif图形 2. 位图选取：使用选取工具加羽化、反选、
等 3. 效果处理：透明度，边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例：广告区背景制作并进行相应切片等
返回
1.６ 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。
义HTML标签和仅对该文档，选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片，在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素，如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片，在属性面板中记 下高度（需要时可记下宽度）。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性，如高度，边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界，编码等属性 3. 为网页建立柱状和花边背景，并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW，建立站点，注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性，设置边界为 0及编码为简体中文。
3. 在标签区找到Table，点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形，大小 1000×*，
返回
1.5 位图处理
1. 位图导入：主要是jpg、gif图形 2. 位图选取：使用选取工具加羽化、反选、
等 3. 效果处理：透明度，边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例：广告区背景制作并进行相应切片等
返回
1.６ 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。
零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案第8课
操作步骤请老师参照软件讲解
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
8.2.2 典型案例 典型案例——设置“主页” 设置“主页” 设置 文档环境
案例小结 通过本例的学习， 通过本例的学习，希望读者能够快速掌握 文档的新建、设置、 文档的新建、设置、外部文件的导入以及 画布的修改等知识。这些知识都是很简单、 画布的修改等知识。这些知识都是很简单、 很基础的，一定要熟练掌握， 很基础的，一定要熟练掌握，因为一切的 操作都由此开始。 操作都由此开始。
新建文件的具体操作如下： 新建文件的具体操作如下：
（1）选择【文件】→【新建】命令，或按【Ctrl+N】 ）选择【文件】 【新建】命令，或按【 】 组合键，打开【新建文档】对话框。 组合键，打开【新建文档】对话框。 画布大小】栏中设置要制作的图像的宽、 （2）在【画布大小】栏中设置要制作的图像的宽、 ） 高与分辨率大小。 高与分辨率大小。 画布颜色】栏中指定画布颜色。 （3）在【画布颜色】栏中指定画布颜色。默认状态 ） 为白色，如果需要其他颜色，可选中【自定义】 为白色，如果需要其他颜色，可选中【自定义】单 选按钮，再单击 图标，从弹出的颜色选择器中选 选按钮， 图标， 择需要的颜色。 择需要的颜色。 （4）设置完成后单击【确定】按钮，完成 ）设置完成后单击【确定】按钮，完成Fireworks 文档的创建。 文档的创建。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
1. 认识 认识Fireworks工作界面 工作界面
从【开始】菜单中启动Fireworks后，进入 开始】菜单中启动 后 Fireworks启动界面，如下图所示。 启动界面， 启动界面 如下图所示。
DreamweaverMX网页设计与制作第4章有声有色的页面效果课件
4.3 插入插件
如果想在浏览器中访问更多类型的媒体对 象，就必须借助于插件，前面所介绍的 Shockwave就是插件中的一员。插件的类 型主要有对象类、命令类、行为类、组件 类4种，我们常使用的是对象类插件。
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
Dreamweaver MX自带 网络下载 从素材库导入 自己制作
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
插入Shockwave影片 插入Applet 插入ActiveX控件
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
如果想在浏览器中访问更多类型的媒体对 象，就必须借助于插件，前面所介绍的 Shockwave就是插件中的一员。插件的类 型主要有对象类、命令类、行为类、组件 类4种，我们常使用的是对象类插件。
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
Dreamweaver MX自带 网络下载 从素材库导入 自己制作
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
插入Shockwave影片 插入Applet 插入ActiveX控件
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
网页设计与制作Dreamweaver8网页设计培训课件
3.1.5 网页编辑窗口
第一页
工具栏下面的区域是“网页编辑区 上一页 域”，在Dreamweaver 8启动时显示一个
“起始页”，其中包括“打开最近项目”、 下一页 “创建新项目”、“从范例创建”三个较
方便使用的项目。选中任意项，出现“网
最后页
页编辑窗口” ，则“网页编辑区域”就会 退出 出现“网页编辑窗口”，用户可以在文档
开网页的话，在后面还会显示该网页的一些信息， 下一页 如网页标题、所在位置及文件名称，右边有3个
按钮，分别对应Dreamweaver 8窗口的最小化、 最后页 最大化和关闭的操作。
退出
3.1 Dreamweaver 8简介
3.1.3 菜单栏
第一页
“标题栏”的下面是“菜单栏”， 菜单栏中提供了
“文件”、“编辑”、“查看”、“插入”、“修改”、 上一页 “文本”、“命令”、“站点”、“窗口”和“帮助”
十个菜单项。单击其中任意一个菜单，会出现一个
下一页 下拉式指令菜单，如果指令选项为浅灰色的话，
则代表该指令在当前的状态下不能执行。有些指
最后页 令的右边会有键盘的代码，这是该指令的快捷键，
熟练使用快捷键将会有助于提高工作效率。有些
退出 指令的右边会有一个小黑三角的标记，它代表该
指令还包含有下一级的指令，鼠标停留片刻即可
如果要制作一个完整的网站，在制作网站的 第一页 具体页面之前，首先需要创建一个本地站点。下
面我们以本章案例的站点建设为例，说明本地站
上一页
点创建与管理的方法。
下一页
3.2.1 建立站点
创建过程如下：打开“文件”面板 ； 单击 最后页 “管理站点”，出现 “管理站点”对话框；单击
“新建”按钮，并从下拉菜单中选择“站点”命 退出 令 ，按向导新建站点。
第一页
工具栏下面的区域是“网页编辑区 上一页 域”，在Dreamweaver 8启动时显示一个
“起始页”，其中包括“打开最近项目”、 下一页 “创建新项目”、“从范例创建”三个较
方便使用的项目。选中任意项，出现“网
最后页
页编辑窗口” ，则“网页编辑区域”就会 退出 出现“网页编辑窗口”，用户可以在文档
开网页的话，在后面还会显示该网页的一些信息， 下一页 如网页标题、所在位置及文件名称，右边有3个
按钮，分别对应Dreamweaver 8窗口的最小化、 最后页 最大化和关闭的操作。
退出
3.1 Dreamweaver 8简介
3.1.3 菜单栏
第一页
“标题栏”的下面是“菜单栏”， 菜单栏中提供了
“文件”、“编辑”、“查看”、“插入”、“修改”、 上一页 “文本”、“命令”、“站点”、“窗口”和“帮助”
十个菜单项。单击其中任意一个菜单，会出现一个
下一页 下拉式指令菜单，如果指令选项为浅灰色的话，
则代表该指令在当前的状态下不能执行。有些指
最后页 令的右边会有键盘的代码，这是该指令的快捷键，
熟练使用快捷键将会有助于提高工作效率。有些
退出 指令的右边会有一个小黑三角的标记，它代表该
指令还包含有下一级的指令，鼠标停留片刻即可
如果要制作一个完整的网站，在制作网站的 第一页 具体页面之前，首先需要创建一个本地站点。下
面我们以本章案例的站点建设为例，说明本地站
上一页
点创建与管理的方法。
下一页
3.2.1 建立站点
创建过程如下：打开“文件”面板 ； 单击 最后页 “管理站点”，出现 “管理站点”对话框；单击
“新建”按钮，并从下拉菜单中选择“站点”命 退出 令 ，按向导新建站点。
Dreamweaver-Flash-Fireworks网页制作培训教程第4课
操作思路：
（1）应用并修改样式，创建单个按钮。 （2）复制5个按钮作为导航栏，并通过【对齐】 面板进行对齐和分布，使按钮排列整齐。 （3）修改按钮文本，并添加超链接。
操作步骤请老师参照软件讲解
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
4.2.2 典型案例——制作网站导航栏
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
4.3.2 典型案例——制作产品导航栏的 弹出菜单
案例目标
4.3.1 知识讲解
1. 切片与热点 2. 切片的交互功能 3. 添加弹出菜单
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
1. 切片与热点
切片用于创建交互性的区域，它以网页形式存 在，而不以图像形式存在。网页设计人员常用 切片将Fireworks文档分割成多个部分并将每部 分导出为单独的文件。 热点用于创建图像映射，使较大图形中的各个 小部分产生交互，并将网页图形的区域链接到 URL。热点的创建方法与切片相似，在【Web】 栏中选择 工具进行绘制即可。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
4.2.1 知识讲解
在不同的程序中，按钮有不同的状态。在 Fireworks中，按钮存在5种状态，分别 是释放、滑过、按下、按下时滑过和有效 区域。本节将介绍按钮的状态、创建及导 出方法。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
3. 添加弹出菜单
/ 按钮：单击 按钮增加菜单项，单击 按钮删 除菜单项。 按钮：将当前菜单项指定为上一个菜单项下的子菜 单。 按钮：将当前菜单项变为与上一个菜单项同级的菜 单。 （2）单击【外观】选项卡，设置弹出菜单的外观效果。 （3）在【高级】选项卡中，设置弹出菜单的表格效果。 （4）在【位置】选项卡中，设置弹出菜单与切片的相对 位置。 （5）设置完毕后单击 按钮，完成弹出菜单的创建。
（1）应用并修改样式，创建单个按钮。 （2）复制5个按钮作为导航栏，并通过【对齐】 面板进行对齐和分布，使按钮排列整齐。 （3）修改按钮文本，并添加超链接。
操作步骤请老师参照软件讲解
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
4.2.2 典型案例——制作网站导航栏
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
4.3.2 典型案例——制作产品导航栏的 弹出菜单
案例目标
4.3.1 知识讲解
1. 切片与热点 2. 切片的交互功能 3. 添加弹出菜单
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
1. 切片与热点
切片用于创建交互性的区域，它以网页形式存 在，而不以图像形式存在。网页设计人员常用 切片将Fireworks文档分割成多个部分并将每部 分导出为单独的文件。 热点用于创建图像映射，使较大图形中的各个 小部分产生交互，并将网页图形的区域链接到 URL。热点的创建方法与切片相似，在【Web】 栏中选择 工具进行绘制即可。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
4.2.1 知识讲解
在不同的程序中，按钮有不同的状态。在 Fireworks中，按钮存在5种状态，分别 是释放、滑过、按下、按下时滑过和有效 区域。本节将介绍按钮的状态、创建及导 出方法。
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
Dreamweaver 8，Flash 8，Fireworks 8网页制作培训教程
3. 添加弹出菜单
/ 按钮：单击 按钮增加菜单项，单击 按钮删 除菜单项。 按钮：将当前菜单项指定为上一个菜单项下的子菜 单。 按钮：将当前菜单项变为与上一个菜单项同级的菜 单。 （2）单击【外观】选项卡，设置弹出菜单的外观效果。 （3）在【高级】选项卡中，设置弹出菜单的表格效果。 （4）在【位置】选项卡中，设置弹出菜单与切片的相对 位置。 （5）设置完毕后单击 按钮，完成弹出菜单的创建。
Dreamweaver网页设计培训教程06
6.1 插入Flash媒体元素
在网页中添加动态元素可使网页看起来更 吸引人。Flash动画是网页中最常见的动 态元素。
Flash动画是一种矢量动画，它具有生成 的动画文件较小、效果好、并能够实现交 互等优点。要制作Flash动画，可以使用 Macromedia公司出品的Flash软件。
6.1 插入Flash媒体元素
在Dreamweaver 8中除了可以插入Flash 媒体元素外还可添加其他媒体元素，如 Shockwave影片、Java Applet及背景音 乐等。
6.2 插入其他媒体元素
6.2.1 知识讲解 6.2.2 典型案例——在“天府美食” 网页插入插件
6.2.1 知识讲解
下面讲解在Dreamweaver 8中插入 Shockwave影片、Java Applet以及背景 音乐的方法。
2.插入Flash动画
具体操作如下：
（1）将光标插入点定位到需插入Flash动画文件 的位置。
（2）选择【插入】→【媒体】→【Flash】命令 ，打开【选择文件】对话框。
（3）在该对话框的【查找范围】下拉列表框中选 择文件所在的位置，然后在文件列表框中选中 要插入的Flash文件。
（4）单击【确定】按钮，完成Flash动画文件的 插入。
6.3.2在网页中插入Shockwave
影片
操作思路
在网页左下角单元格中插入“图片.dcr”。 在【属性】面板中设置其宽度为400像素，
高度为300像素。
5.插入FlashPaper
FlashPaper是一种特殊的Flash动画文件，可 以通过FlashPaper软件制作。制作网页时，可 以利用插入FlashPaper功能在网页中插入 Macromedia FlashPaper文档。这样在浏览器 中打开包含FlashPaper文档的网页时，用户就 可浏览FlashPaper文档中的所有页面，而无须 加载新的网页。用户也可以搜索、打印和缩放 该文档。
网页设计讲座( Macromedia)
Macromedia Fireworks Macromedia Freehand Adobe Photoshop Adobe Illustrator ……
Macromedia网页设计
Macromedia三剑客
当今网页设计领域内的主流软件： 网页制作：
网页设计讲座
( Macromedia)
Macromedia网页设计
要
点
1. 网页设计主流软件及网站制作流 程 2.作品展示 3. 网站实例的规划、设计和制作 4. 网页设计技巧 5. 电脑美术课程介绍
Macromedia网页设计
Macromedia三剑客
当今网页设计领域内的主流软件： 网页设计：
3.突出标准字体。
在关键的标题，菜单，图片里使用统 一的标准字体。
4.使用统一的图片处理效果。
网页色彩的搭配
色彩的三个属性： (1)色相(Hue)： 颜色的基本特征 (2)饱和度(Saturation)： 也叫纯度。 (3)明度(Brightness）： 也叫亮度，体现颜色的深浅。
Macromedia网页设计
Macromedia三剑客
世界著名软件公司Macromedia公司占据 全球互动多媒体行业85%市场份额，并于 1994年进入中国市场，在网上出版、多 媒体、图形处理等领域占据了先导地位。 Dreamweaver MX Fireworks MX Flash MX
网页色彩的搭配 不同的色彩——不同的心理感受
红色---热情，活力 绿色---宁静，希望 橙色---轻快，时尚 蓝色---凉爽，清新，专业 白色---洁白，纯真 黑色---深沉
DreamweaverFlashFireworks网页制作培训教程第14课
（1）将光标定位在表单中要添加列表/菜单的位 置。
（2）在插入栏的【表单】选项卡中单击 按钮， 在指定位置添加列表/菜单。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
6. 添加跳转菜单
跳转菜单类似于弹出菜单，可给菜单列表中的 选项添加URL链接；如果不指定链接，则与列 表/菜单的属性相同。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
14.3 插入媒体对象
w 14.3.1 知识讲解 w 14.3.2 典型案例——制作风景网页
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
14.3.1 知识讲解
14行1列的表格。 （4）依次在单元格中添加调查表的内容及对应的
表单元素。
w 操作步骤请老师参照软件讲解
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
14.1.2 典型案例——制作调查表
w 案例小结 本案例通过制作调查表练习了表单的创建， 文本域、单选按钮、复选框、列表/菜单 及按钮的添加与属性设置等。在制作表单 时，可以通过CSS样式中的方框类别来指 定表单中的文本域和按钮等元素的宽度和 高度。
14.2.1 知识讲解
1. 认识【行为】面板 2. 附加行为
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
1. 认识【行为】面板
按【Shift+F4】组合键打开【行为】面板，如下图所示。 通过【行为】面板，可将行为附加到页面元素中。已附 加到当前所选页面的行为显示在行为列表中，并按字母 顺序排列事件。
（2）在插入栏的【表单】选项卡中单击 按钮， 在指定位置添加列表/菜单。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
6. 添加跳转菜单
跳转菜单类似于弹出菜单，可给菜单列表中的 选项添加URL链接；如果不指定链接，则与列 表/菜单的属性相同。
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
14.3 插入媒体对象
w 14.3.1 知识讲解 w 14.3.2 典型案例——制作风景网页
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
14.3.1 知识讲解
14行1列的表格。 （4）依次在单元格中添加调查表的内容及对应的
表单元素。
w 操作步骤请老师参照软件讲解
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
14.1.2 典型案例——制作调查表
w 案例小结 本案例通过制作调查表练习了表单的创建， 文本域、单选按钮、复选框、列表/菜单 及按钮的添加与属性设置等。在制作表单 时，可以通过CSS样式中的方框类别来指 定表单中的文本域和按钮等元素的宽度和 高度。
14.2.1 知识讲解
1. 认识【行为】面板 2. 附加行为
PPT文档演模板
DreamweaverFlashFireworks网页制 作培训教程第14课
1. 认识【行为】面板
按【Shift+F4】组合键打开【行为】面板，如下图所示。 通过【行为】面板，可将行为附加到页面元素中。已附 加到当前所选页面的行为显示在行为列表中，并按字母 顺序排列事件。
相关主题