1、网页设计与课件制作范例网页设计与课件制作范例 Macromedia公司的配套软件-Dreamweaver MX ,Fireworks MX ,Flash MX 既是当前最流行的网页设计软件,也是制作多媒体CAI教学课件的优秀软件。其中:Dreamweaver MX用于网页布局,Fireworks MX 用于文字和图像的美化,Flash MX用于动画片制作,三个软件配合使用即可设计制作出优美的网页和课件。以下通过实例进行分析讨论。 网页制作的流程:(1)规划(2)搜集素材(3)制作网页一.建立用户文件(目录)及子文件夹 1、我的电脑 选文件夹E 文件新建文件夹2、将新建文件夹改为用户文件夹名(例
2、:wlsyrj) 3、打开用户文件夹,再建一个子文件夹:media 4、向子文件夹media中拷入在网页设计中将要用到的文本、图像、动画、声音等多媒体元素.二建立本地网站站点 启动Dreamweaver MX 1、SiteNew site 2、输入Site Name: (例:wlsyrj) 3、选择路径到用户文件夹(wlsyrj)三. Dreamweaver MX网页设计范例启动Dreamweaver MX (一)设计框架集及各子框架网页主网页,并保存为网页文件(.htm)1.单击编辑窗右下方“winodws size”按钮, 选760420(800x600)大小模式2.Windowsobje
3、sts , 显现对象面板窗Frames (框架)3.在各种框架图中点选 ,出现框架集上、左、右三个小框架(即4个网页的框架)4.分别保存为4个网页文件(.htm):(1)保存框架集网页文件:Filesave frameset选择路径为用户文件夹 (xadx),输入文件名:index (.htm) 保存(2)点击“上”框架,保存上框架网页文件:Filesave frame , 选择为用户文件夹(xadx),输入文件名:xadxt (.htm) 保存(3)点击“左”框架,保存左框架网页文件:Filesave frame 选择为用户文件夹(xadx),输入文件名:xadxl (.htm ) 保存(4
4、)点击“右”框架,保存右框架网页文件:File-save frame 选择为用户文件夹(xadx),输入文件名:xadxr (.htm)保存 5.(1)至此,已在用户站点文件夹中建立了四个网页文件,都可以在浏览器上单独查阅 (按F12键) (2)以后修改存盘时,再不需要单独存(否则易产生错误)可采用全部一次性存盘命令:FileSave All frames(3)注:“上”“左”“右”三个网页文件包含在框架集网页文件中。(四)设置各子框架(“上” “左” “右”)网页属性: 1.设置“上框架”属性: (1)点击“上框架”Modifypage properties (2)在page propert
5、ies对话框中先设置如下三项内容:Title:xadxt lmage: media/97102003.jpg Backcolor:#99FFFF(3)设置后,点OK确认 2.设置“左框架”属性: (1)点击“左框架” Modifypage properties (2)在page properties对话框中先设置如下三项内容:Title:Xadxl lmage:media/pbk1.jpg Backcolor :#99ffcc (3)设置后,点OK确认 3.设置“右框架”属性: (1)点击“右框架” Modifypage properties(2)在page properties对话框中先设置
6、如下三项内容: Title:Xadxr lmage:media/97101003.jpg Backcolor #99ff99(3)设置后,点OK确认(五)在各框架页中插入对象(层、表格、媒体无素) 1.(1).点击“上框架”页,插入一个层: objectscommonDraw layer (2).点击“左框架”页,插入五个层: objectscommondraw Layer (3).点击“右框架”页,插入一个53表格: objectscommoninsert Table在windowsproperties属性对框架修改为:W:100 , H:500 (4).全部存盘:Filesave All
7、Frames 2.在框架页、层、表格中插入媒体元素: (1)在“上框架”左边层中插入动画图像: insertImage:WELCOME.GIF在“上”框架右边层中插入静态动画图像: insert-lmage:07110271-1.jpg (2)在“左”框架第一层中输入文字“风景欣赏” 在“左”框架第二层中输入文字“多媒体演示”(六)在“左”框架的各层中设置链接调用动能 1.(1)选择“左”框架第一层文字“风景欣赏” (2)在属性对话框中选择:Link :fixs.htm (3)在属性对话框中选择:Target :-blank 2.(1)选择“左”框架第二层文字“多媒体演示”(2)在属性对话框中
8、选择:link :dmtys,htm (3)在属性对话框中选择:Target :-blank 3. 注:fixs.htm和dmtys.htm两个网页应事先单独设计好以备用。二.Fireworks设计范例:例一:背景图上添加汉字1.新建画布:FileNew760(w)150(H)2.插入背景图:InsertImage:xadx/media/02040161.jpg3.在TOOLS箱中选A ,在背景图上点击, 在Text Editor对话框中输入汉字“西安大学”4.改字体(隶书):大小(60)、颜色(大红)、位置(居中),OK5.可双击字体后再次修改,直到满意.6.导出保存:FileExportx
9、ald.gif (17KB)例二:剪裁图形:1.打开一个图形:Fileopen022040161.jpg2.选Tools oval marquee tool(M) 在图形上圈出范围3.选Editcut (剪切) 4.选Filenew5.选Editpaste6.选FileExportTyk.gi例三艺术字体 1新建画布:FileNew500(w)150(H) 2在TOOLS箱中选A ,在背景图上点击, 在Text Editor对话框中输入汉字“西安大学” 3改字体(隶书):大小(96)、颜色(大红)、位置(居中),OK 4选 window fillRadial , 用Edit 编辑色彩变幻(紫
10、金黄) 5导出保存:FileExportyszt.gif例四文字沿路径分布1 新建画布:FileNew600(w)500(H)2 画圆圈,用橡皮(切割)擦缺口,将下半部删除3 在TOOLS箱中选A ,在背景图上点击,在Text Editor对话框中输入汉字“西安联合大学”4 将文字附着在路径上:(1) 同时选定路径和文字,再选 Text Attach to path (附贴)(2) 改变附贴形式:Text orjentation(3) 取消路径:Convert to patns 5. 再编辑文字:windows stroke(画笔) windows Effect(效果)6 优化处理:windo
11、ws object 7导出保存:FileExportljfb.gif例五图像艺术处理1.新建画布:File NewOK2.导入图像: Fileimport.并用鼠标拖放出图像的大小范围3. 修改画布、图像属性:Modify 4对图像进行艺术处理: Modify *三.Flash (Flash MX)设计范例(一) 逐帧动画与按钮 例一:在间隔的各帧画图形并导入声音1在第1帧画彩色圆2在第2帧插入空白关键帧(insetrblank keyframe),在右边再画一个彩色圆3. 在第3帧插入空白关键帧(insetrblank keyframe),在右边再画一个彩色圆 依此类推直作到第10 帧(注:
12、圆可以一个比一个大些,颜色亦可改变)4导入声音:FileImport(导入库中),再从库中拖到选定的开始帧5预览:controltest movie6存盘:zzdh1.fla 例二:盆中花开放1.在第1层第1帧画盆,在第20帧插入关键帧在第 2层第1帧到第20帧画不断开放的花辫2.在第 3层第10帧到第20帧画飞来的蝴蝶3.预览:controltest movie4.存盘:bxwt1.fla例三:制作动态按钮1.插入按钮组件:insrt New symbol ; name:an ; 选 Button ; ok 确定注 出现的编辑状态含有 4 帧 : UP(弹起) ; Over(经过) ; Do
13、wn(按下) ; Hit(执行区域 )(1) 点选”Up” 帧,画红色圆,写字 “Up”(2) 点选”Over” 帧, 插入空白帧, 画绿色圆,写字 “Over”(3) 点选”Down” 帧, 插入空白帧,画蓝色圆,写字 “Down”(4)点选”Hit” 帧, 插入空白帧,画一个大圆作为执行用区域,写字 “Hit”2. 转到场景 1 ( Scen 1) 在第1帧将图库中的按钮an 拖入。3.编辑按钮,导入图像(1)双击例三图库中的按钮,进入编辑按钮状态(2)添加第 2层1)点选”Up” 帧, 插入空白帧,导入图像1(注:自选)2)点选”Over” 帧, 插入空白帧,导入图像2(注:自选)3)点
14、选”Down” 帧, 插入空白帧,导入图像3(注:自选)4)点选”Hit” 帧, 插入空白帧,导入图像4(注:自选) 例四编辑按钮,产生交互作用来调用场景1按照例三设计一个按钮:an2在按钮(an)上单击右键,在弹出的快捷菜单上选择Actions(动作)命令3.在Object Actions面板选择Basic Action 下的Go To项并双击,将在右侧窗口自动产生语句:on(release) gotoAndPlay(“Scene 1”,1)4.注:按照实际可将 1 改为 2 等例五燃烧的火焰1.制作逐帧火焰(1)在Layer 1第 1 帧中间用铅笔画火焰轮廓(注:不要对齐网格)选 Wind
15、ow Panels Fill 用(黄色 棕黄色)填充(2)在第2,3,4,5,6,7,8,9,10帧插入关键帧:insert KeyFrame 并分别修改火焰边沿的形状和颜色,使其稍有差别(3)分别选中各帧图形的边框颜色 ,按Delete键将其删除(4) 分别选中各帧图形,选Modify Shape Soften FillEdges(揉化填充边,参数:20 5 )(5)选中所有帧 , 复制 : Edit Copy Frames2.制作逐帧焰芯(1)添加第2层 Layer 2,在第 1 帧,粘贴原Layer 1选中的所有帧: Edit Cut Frames , 并删除关键帧后的各帧 。(2) 将
16、各帧的图形缩小。3 制作燃烧的木材(1)添加第3层 Layer3,在第 1 帧画两根交叉的木材 (2)调整木材与火焰的位置。(二)变形过渡(shape)动画例一:变形物体(圆正方形长方形)1.新建影片(movie):FileNew2.在第1帧画彩色园3.在第30帧插入空白关键帧(insertblank keyframe),再画正方形4.在第60帧插入空白关键帧(insetrblank keyframe),再画长方形5.分别单击第1帧,第30帧,各选 frame 面板Tweening:shape6.预览:controltest movie7.存盘:bxwt1.fla例二:1。 将例一图形放大:击
17、右键选scale拖放2 将例一图形旋转:击右键选Rotate拖转3 给例一图形填过渡色:选windowpanelsFill例三:变形图像(风景花风景)1.新建影片(movie):filenew2.在第1帧与第60帧导入风景图像后缩小定位(1) fileimport02040161.jpg(2) 在图像上击右键:cale缩小并定位(3) .在第60帧插入关键帧后,缩小重定位insert keyframe3. 在第30帧导入花图像后缩小定位: (1)insertblank keyframe(2)fileimport07110101.jpg(3)在图像上击右键scale缩小并定位4.将三帧图像分别打
18、碎:modifybreak apart5. 在第1帧与第30帧选frame面板:Tweeningspape6.预览:controltest movie7.存盘:bxtx1.fla例四:探照灯(蒙板)照字1(1)在Layer 1第 1 帧写彩色艺术汉字“西安大学” (2)在Layer 1第 30 帧insert 一个 Frame2. (1) 添加Layer 2 ,并在第 1 帧画圆(在“西安大学”左边)(2)在Layer 2第 30 帧insert 一个 KeyFrame(关键帧)(3)在Layer 2第 1 帧:Tweening shape(4) 在Layer 2 左边击右键,选蒙板(mask
19、)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+V键(Edit Paste in Place),粘贴到原位置。4.选Layer 2刚粘贴的彩色三角形,ModifyTransFormEdit Center , 用鼠标将中心点拖到三角形的右下角上。5
20、.选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 选Motion ,选 ccw(逆时针旋转)8.在Layer 2第 1 帧,选 Window Panels(面板)Frame 选Motion,默认None(三)运动渐变(Motion)动画例一 小球沿
21、导向层圆圈转动 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 帧小球分别对准导向层圆圈缺口的起始端点上例二圆锥向两边延伸并旋转1插入新动画(Movie clip)图符b1 - 圆锥向两边延伸:(1)在第 1 帧选 insert New symbol ,选 Movie clip ,name 为b1(2)
22、在第 30 帧插入关键帧:insert KeyFrame(3)再复制,粘贴,然后修改旋转90度(4) 在Layer 1第 1 帧 frame Tweeningmotion2. 在scene 1 中使圆锥向两边延伸并旋转(1)在第 1 帧调入动画图符b1(2)在第 40 帧插入关键帧:insert KeyFrame(3)在Layer 1第 1 帧选frameTweeningMotion,Rotate:cw , 1 times例三 光芒四射的五角星1.放射线并设为图形符号:xian(1)选 insert New symbol ,选 Graphic ,name 为xian(2)在第 1 帧画一条过中
23、点的垂直的短放射线,再复制条并分别旋转,即选ModifyTransformScale and Rotate分别选 Rotate 为 :18,26,54,72,90,108,126,144,1622.画五角星并设为图形符号:xian(1)选 insert New symbol ,选 Graphic ,name 为xian (2)在第 1 帧画一条过中点的垂直直线,再复制4条并分别旋转,即选ModifyTransformScale and Rotate分别选 Rotate 为 :72,144,216,2883.返回场景1(secne 1):(1)在Layer 1将图库中图形符号xian拖入到第 1
24、 帧, 在第 30 帧插入关键帧:insert KeyFram并全选放大,击右键选Rotate,顺时针旋转360在Layer 1第 1 帧选frameTweeningMotion,Rotate:cw , 1 times(2)添加第2层 Layer 2,在Layer 2将图库中图形符号wjx拖入到第 1 帧,在第 30 帧插入关键帧:insert KeyFrame 并修改其颜色, 击右键选Rotate,逆时针旋转360。在Layer 2第 1 帧选frameTweeningMotion,Rotate:ccw , 1 times4. 测试影片 : Control Test Novie例四 两球碰撞
25、1画图形符号-小球:选 insert New symbol ,选 Graphic ,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 帧右边在L
26、ayer 2第 30 帧插入关键帧:insert KeyFrame , 将小球拖入到中间在Layer 2第 60 帧插入关键帧:insert KeyFrame ,将小球拖入到右边在Layer 2第 1 帧和第 30 帧分别设置运动状态: frame Tweeningmotion5注:可在中间画一些火花。 例五图像旋转渐变(由小变大,由灰变亮) 1.(1)insert New Symbol , 选Movie Clip , 命名Name:TX (2)File import , 自选图像“背景图.jpg” 2. 返回场景1 (Scene 1)的 Layer 1 (1)将影片符号TX拖入到第1帧的左上
27、方,缩小,设透明度( Alpha)为 20%(2)在第 30 帧插入关键帧:insert KeyFrame , 将影片符号TX拖入第1帧的右下方,放大,设透明度( Alpha)为 100% (3) 在第 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 帧将图符
28、小球b1拖入6个(并排放置)(2) 分别选中各个小球,依此改变其透明度(Alpha)为:10%,20%,35%,45%,65%,100%:Window Panels(面板) Effect(效果) Alpha(透明度)(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 输入
29、: 1选 Lock mouse to center (注:若不选,等距物动)(6)在第 2,3,4,5,6 帧 ,仿照(5)在第 1 帧的方法设置语句是,但在 Target 文本框中分别输入 : 2,3,4,5,6例二电子表1. ModifyMovie 2.在场景的上边中间输入 :“电子钟”。下一行左边输入:“日期、时间:” 3.在“日期、时间:”右边拖入一个长方形文本框,右击,选Panels Text Options 选文本类型为: Dynamic Text(动态文本) , 变量输入为: dzb4.右击Layer1的第1 帧 (1)选Actions ,击加号:“+” 选Actionseval
30、uate(赋值语句表达式)(2)在Expression框输入 :dates =(3)选 Objects Date New Date ,删去()中的参数,在对话框右边得到:dates = new Date();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 , 画金黄色无边长形秒针
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1