网页设计与课件制作范例Word文件下载.docx

1、xadxl （.htm ） 保存（4）点击“右”框架，保存右框架网页文件：File-save frame xadxr （.htm）保存 5.（1）至此，已在用户站点文件夹中建立了四个网页文件，都可以在浏览器上单独查阅 （按F12键） （2）以后修改存盘时，再不需要单独存（否则易产生错误）可采用全部一次性存盘命令：FileSave All frames（3）注：“上”“左”“右”三个网页文件包含在框架集网页文件中。（四）设置各子框架（“上” “左” “右”）网页属性: 1.设置“上框架”属性： （1）点击“上框架”Modifypage properties （2）在page properties

2、对话框中先设置如下三项内容：Title:xadxt lmage: media/97102003.jpg Backcolor:#99FFFF（3）设置后，点OK确认 2.设置“左框架”属性: （1）点击“左框架” Modifypage propertiesXadxl lmage:media/pbk1.jpg Backcolor :#99ffcc （3）设置后，点OK确认 3.设置“右框架”属性: （1）点击“右框架” Modifypage properties（2）在page properties对话框中先设置如下三项内容： Title:Xadxr lmage:media/97101003.jp

3、g Backcolor #99ff99（五）在各框架页中插入对象（层、表格、媒体无素） 1.（1）.点击“上框架”页，插入一个层： objectscommonDraw layer （2）.点击“左框架”页，插入五个层： objectscommondraw Layer （3）.点击“右框架”页，插入一个53表格： objectscommoninsert Table在windowsproperties属性对框架修改为：W:100 , H:500 （4）.全部存盘：Filesave All Frames 2.在框架页、层、表格中插入媒体元素： （1）在“上框架”左边层中插入动画图像: insertI

4、mage:WELCOME.GIF在“上”框架右边层中插入静态动画图像: insert-lmage:07110271-1.jpg （2）在“左”框架第一层中输入文字“风景欣赏” 在“左”框架第二层中输入文字“多媒体演示”（六）在“左”框架的各层中设置链接调用动能 1.（1）选择“左”框架第一层文字“风景欣赏” （2）在属性对话框中选择：Link ：fixs.htm （3）在属性对话框中选择：Target ：-blank 2.（1）选择“左”框架第二层文字“多媒体演示”（2）在属性对话框中选择：link ：dmtys,htm 3. 注：fixs.htm和dmtys.htm两个网页应事先单独设计好以

5、备用。二.Fireworks设计范例:例一：背景图上添加汉字1.新建画布：FileNew760（w）150（H）2.插入背景图：InsertImage:xadx/media/02040161.jpg3.在TOOLS箱中选A ,在背景图上点击， 在Text Editor对话框中输入汉字“西安大学”4.改字体（隶书）：大小（60）、颜色（大红）、位置（居中）,OK5.可双击字体后再次修改,直到满意.6.导出保存：FileExportxald.gif （17KB）例二：剪裁图形：1.打开一个图形：Fileopen022040161.jpg2.选Tools oval marquee tool（M） 在

6、图形上圈出范围3.选Editcut （剪切） 4.选Filenew5.选Editpaste6.选FileExportTyk.gi例三艺术字体 1新建画布：FileNew500（w） 2在TOOLS箱中选A ,在背景图上点击， 3改字体（隶书）：大小（96）、颜色（大红）、位置（居中）,OK 4选 window fillRadial , 用Edit 编辑色彩变幻（紫 金黄） 5导出保存：FileExportyszt.gif例四文字沿路径分布1 新建画布：FileNew600（w）500（H）2 画圆圈，用橡皮（切割）擦缺口，将下半部删除3 在TOOLS箱中选A ,在背景图上点击，在Text Ed

7、itor对话框中输入汉字“西安联合大学”4 将文字附着在路径上：（1） 同时选定路径和文字，再选 Text Attach to path （附贴）（2） 改变附贴形式：Text orjentation（3） 取消路径:Convert to patns 5. 再编辑文字：windows stroke（画笔） windows Effect（效果）6 优化处理:windows object 7导出保存：FileExportljfb.gif例五图像艺术处理File NewOK2.导入图像: Fileimport.并用鼠标拖放出图像的大小范围3. 修改画布、图像属性：Modify 4对图像进行艺术处理:

8、 Modify *三.Flash （Flash MX）设计范例（一） 逐帧动画与按钮 例一：在间隔的各帧画图形并导入声音1在第1帧画彩色圆2在第2帧插入空白关键帧（insetrblank keyframe）,在右边再画一个彩色圆3. 在第3帧插入空白关键帧（insetrblank keyframe）,在右边再画一个彩色圆 依此类推直作到第10 帧（注：圆可以一个比一个大些，颜色亦可改变）4导入声音：FileImport（导入库中），再从库中拖到选定的开始帧5预览：controltest movie6存盘：zzdh1.fla 例二：盆中花开放1.在第1层第1帧画盆，在第20帧插入关键帧在第 2层

9、第1帧到第20帧画不断开放的花辫2.在第 3层第10帧到第20帧画飞来的蝴蝶3.预览：4.存盘：bxwt1.fla例三：制作动态按钮1.插入按钮组件：insrt New symbol ; name:an ; 选 Button ; ok 确定注 出现的编辑状态含有 4 帧 :UP（弹起） ； Over（经过） ； Down（按下） ； Hit（执行区域 ）（1） 点选”Up” 帧,画红色圆，写字 “Up”（2） 点选”Over” 帧, 插入空白帧， 画绿色圆，写字 “Over”（3） 点选”Down” 帧, 插入空白帧，画蓝色圆，写字 “Down”（4）点选”Hit” 帧, 插入空白帧，画一个大

10、圆作为执行用区域，写字 “Hit”2. 转到场景 1 （ Scen 1） 在第1帧将图库中的按钮an 拖入。3.编辑按钮，导入图像（1）双击例三图库中的按钮，进入编辑按钮状态（2）添加第 2层1）点选”Up” 帧, 插入空白帧，导入图像1（注：自选）2）点选”Over” 帧, 插入空白帧，导入图像2（注：3）点选”Down” 帧, 插入空白帧，导入图像3（注：4）点选”Hit” 帧, 插入空白帧，导入图像4（注： 例四编辑按钮，产生交互作用来调用场景1按照例三设计一个按钮:an2在按钮（an）上单击右键，在弹出的快捷菜单上选择Actions（动作）命令3.在Object Actions面板选择

11、Basic Action 下的Go To项并双击，将在右侧窗口自动产生语句：on（release） gotoAndPlay（“Scene 1”,1）4.注：按照实际可将 1 改为 2 等例五燃烧的火焰1.制作逐帧火焰（1）在Layer 1第 1 帧中间用铅笔画火焰轮廓（注：不要对齐网格）选 Window Panels Fill 用（黄色 棕黄色）填充（2）在第2,3,4,5,6,7,8,9,10帧插入关键帧：insert KeyFrame 并分别修改火焰边沿的形状和颜色,使其稍有差别（3）分别选中各帧图形的边框颜色 ，按Delete键将其删除（4） 分别选中各帧图形,选Modify Shape

12、 Soften FillEdges（揉化填充边，参数：20 5 ）（5）选中所有帧 ， 复制 ： Edit Copy Frames2.制作逐帧焰芯（1）添加第2层 Layer 2，在第 1 帧,粘贴原Layer 1选中的所有帧:Edit Cut Frames , 并删除关键帧后的各帧 。（2） 将各帧的图形缩小。3 制作燃烧的木材（1）添加第3层 Layer3，在第 1 帧画两根交叉的木材 （2）调整木材与火焰的位置。（二）变形过渡（shape）动画变形物体（圆正方形长方形）1.新建影片（movie）：FileNew2.在第1帧画彩色园3.在第30帧插入空白关键帧（insertblank ke

13、yframe）,再画正方形4.在第60帧插入空白关键帧（insetrblank keyframe）,再画长方形5.分别单击第1帧，第30帧，各选 frame 面板Tweening:shape6.预览：7.存盘：1。 将例一图形放大:击右键选scale拖放2 将例一图形旋转:击右键选Rotate拖转3 给例一图形填过渡色:选windowpanelsFill例三:变形图像（风景花风景）1.新建影片（movie）:filenew2.在第1帧与第60帧导入风景图像后缩小定位（1） fileimport02040161.jpg（2） 在图像上击右键：cale缩小并定位（3） .在第60帧插入关键帧后,缩

14、小重定位insert keyframe3. 在第30帧导入花图像后缩小定位： （1）insertblank keyframe（2）fileimport07110101.jpg（3）在图像上击右键scale缩小并定位4.将三帧图像分别打碎：modifybreak apart5. 在第1帧与第30帧选frame面板:Tweeningspape6.预览:7.存盘:bxtx1.fla例四：探照灯（蒙板）照字1（1）在Layer 1第 1 帧写彩色艺术汉字“西安大学” （2）在Layer 1第 30 帧insert 一个 Frame2. （1） 添加Layer 2 ，并在第 1 帧画圆（在“西安大学”左

15、边）（2）在Layer 2第 30 帧insert 一个 KeyFrame（关键帧）（3）在Layer 2第 1 帧:Tweening shape（4） 在Layer 2 左边击右键，选蒙板（mask）3. 注：亦可将Layer 1设蒙板（mask），但效果不同。例五三角形旋转后移动1.在Layer1第1帧画彩色三角形，按Ctrl+G （Modify Group）将其组合起来；并在Layer 1第 60 帧按F5键 （insrt Frame）。插入一帧。2.选Layer 1第 1 帧，按Ctrl + C （Edit copy）将其复制到剪贴板。3.增加Layer 2图层.按Ctrl+Shift

16、+V键（Edit Paste in Place）,粘贴到原位置。4.选Layer 2刚粘贴的彩色三角形，ModifyTransFormEdit Center , 用鼠标将中心点拖到三角形的右下角上。5.选Layer 2第 30 帧，按F6键，即insert 一个 KeyFrame（关键帧）选 Window Panels（面板） Transform（变换）,再选 Rotate（旋转）：180 度6.选Layer 2第 60 帧，按F6键，即insert 一个 KeyFrame（关键帧）将下方图形移到上方构成平行四边形7.在Layer 2第 1 帧，选 Window Panels（面板）Frame

17、 选Motion ,选 ccw（逆时针旋转）8.在Layer 2第 1 帧，选 Window Panels（面板）Frame 选Motion,默认None（三）运动渐变（Motion）动画例一 小球沿导向层圆圈转动 1（1）在Layer 1第 1 帧画小球（2）insert 设为图形图符号b1（3） 在Layer 1第 30 帧 insert KeyFrame（关键帧）（4） 在Layer 1第 1 帧 frameTweeningmotion2. （1） 添加导向层 （2）在该导向层画圆圈，并用橡皮擦一个小缺口3将Layer 1第 1 帧小球和第 30 帧小球分别对准导向层圆圈缺口的起始端点上

18、例二圆锥向两边延伸并旋转1插入新动画（Movie clip）图符b1 - 圆锥向两边延伸:（1）在第 1 帧选 insert New symbol ,选 Movie clip ,name 为b1（2）在第 30 帧插入关键帧：（3）再复制，粘贴，然后修改旋转90度（4） 在Layer 1第 1 帧 frame Tweeningmotion2. 在scene 1 中使圆锥向两边延伸并旋转（1）在第 1 帧调入动画图符b1（2）在第 40 帧插入关键帧：（3）在Layer 1第 1 帧选frameTweeningMotion,Rotate:cw , 1 times例三 光芒四射的五角星1.放射线并

19、设为图形符号：xian（1）选 insert New symbol ,选 Graphic ,name 为xian（2）在第 1 帧画一条过中点的垂直的短放射线，再复制条并分别旋转，即选ModifyTransformScale and Rotate分别选 Rotate 为 ：18,26,54,72,90,108,126,144,1622.画五角星并设为图形符号： （2）在第 1 帧画一条过中点的垂直直线，再复制4条并分别旋转，即72，144，216，2883.返回场景1（secne 1）：（1）在Layer 1将图库中图形符号xian拖入到第 1 帧, 在第 30 帧插入关键帧：insert K

20、eyFram并全选放大,击右键选Rotate,顺时针旋转360在Layer 1第 1 帧选frameTweeningMotion,Rotate:（2）添加第2层 Layer 2，在Layer 2将图库中图形符号wjx拖入到第 1 帧,在第 30 帧插入关键帧：insert KeyFrame 并修改其颜色, 击右键选Rotate,逆时针旋转360。在Layer 2第 1 帧选frameTweeningMotion,Rotate:ccw , 1 times4. 测试影片 ： Control Test Novie例四 两球碰撞1画图形符号-小球：选 insert New symbol ,选 Grap

21、hic ,name 为b1在Layer 1第 1 帧画一个小球2返回场景1（secne 1）.3. 在Layer 1第 1 帧 , 将图库中b1拖入到左边在Layer 1第 30 帧插入关键帧：insert KeyFrame , 将小球拖入到中间在Layer 1第 60 帧插入关键帧：insert KeyFrame ，将小球拖入到左边在Layer 1第 1 帧和第 30 帧分别设置运动状态： frame Tweeningmotion4.添加第2层Layer 2，在Layer 2将图库中图形符号b1拖入到第 1 帧右边在Layer 2第 30 帧插入关键帧：在Layer 2第 60 帧插入关键帧

22、：insert KeyFrame ，将小球拖入到右边在Layer 2第 1 帧和第 30 帧分别设置运动状态：5注：可在中间画一些火花。 例五图像旋转渐变（由小变大，由灰变亮） 1.（1）insert New Symbol , 选Movie Clip , 命名Name:TX （2）File import , 自选图像“背景图.jpg” 2. 返回场景1 （Scene 1）的 Layer 1 （1）将影片符号TX拖入到第1帧的左上方，缩小，设透明度（ Alpha）为 20%insert KeyFrame , 将影片符号TX拖入第1帧的右下方，放大，设透明度（ Alpha）为 100% （3） 在

23、第 60 帧插入延续帧：insert Frame4. 在第 1 帧设置运动状态： Frame Tweening Motion CW（四）程序控制动作的动画 例一多个透明度不同的小球随鼠标移动1制作动画组件图符小球b1:（1）insert New symbol ,选Graphic ,name 为b1（2）在Layer 1第 1 帧画红色小球2. 返回场景1（scene 1）（1） 在第 1 帧将图符小球b1拖入6个（并排放置）（2） 分别选中各个小球，依此改变其透明度（Alpha）为:10%,20%,35%,45%,65%,100%：Window Panels（面板） Effect（效果） Al

24、pha（透明度）（3） 选 Window Panels（面板） Instance（实例）在Behavior 选Movie Clip ,在 Name 中依此设为 1，2，3，4，5，6 。（4） 在第 2，3，4，5，6 帧插入关键帧（insert KeyFrame）（5） 在第 1 帧双击进入 Frame Actions选 “+”，选Actions startDrag , 在 Target 输入 : 1选 Lock mouse to center （注：若不选，等距物动）（6）在第 2，3，4，5，6 帧 ，仿照（5）在第 1 帧的方法设置语句是，但在 Target 文本框中分别输入 : 2，

25、3，4，5，6例二电子表1. ModifyMovie 2.在场景的上边中间输入 ：“电子钟”。下一行左边输入：“日期、时间：” 3.在“日期、时间：”右边拖入一个长方形文本框，右击，选Panels Text Options 选文本类型为： Dynamic Text（动态文本） , 变量输入为： dzb4.右击Layer1的第1 帧 （1）选Actions ，击加号：“+” 选Actionsevaluate（赋值语句表达式）（2）在Expression框输入 :dates =（3）选 Objects Date New Date ,删去（）中的参数，在对话框右边得到：dates = new Dat

26、e（）;5.Layer1的第2 帧插入关键帧：insert KeyFrame 。 同上，右击Layer1的第2 帧， 选Actions ，击加号：“+”, 选Actionsgoto例三. 指针时钟 1设计图形符号（钟表表盘bp）:Insert New Symbol,选Graphic, 命名为：bp, 画灰色圆环、填充渐变色、写表盘数字、画圆心2.设计影片符号（时针sz、分针fz、秒针mz）（1）Insert New Symbol,选Movie Clip, 命名为：sz , 画蓝色无边长形时针（2）Insert New Symbol,选Movie Clip, 命名为：fz , 画绿色无边长形分针（3）Insert New Symbol,选Movie Clip, 命名为：mz , 画金黄色无边长形秒针