网页设计与课件制作范例Word文件下载.docx
《网页设计与课件制作范例Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计与课件制作范例Word文件下载.docx（16页珍藏版）》请在冰豆网上搜索。
xadxl（.htm）保存
（4）点击“右”框架，保存右框架网页文件：
File-saveframe
xadxr（.htm）保存
5.
（1）至此，已在用户站点文件夹中建立了四个网页文件，都可以在浏览器上单独查阅（按F12键）
（2）以后修改存盘时，再不需要单独存（否则易产生错误）可采用全部一次性存盘命令：
FileSaveAllframes
（3）注：
“上”“左”“右”三个网页文件包含在框架集网页文件中。
（四）设置各子框架（“上”“左”“右”）网页属性:
1.设置“上框架”属性：
（1）点击“上框架”Modifypageproperties
（2）在[pageproperties]对话框中先设置如下三项内容：
Title:
:
xadxtlmage:
media/97102003.jpgBackcolor:
#99FFFF
（3）设置后，点[OK]确认
2.设置“左框架”属性:
（1）点击“左框架”Modifypageproperties
Xadxllmage:
media/pbk1.jpgBackcolor:
#99ffcc
（3）设置后，点[OK]确认
3.设置“右框架”属性:
（1）点击“右框架”Modifypageproperties
（2）在[pageproperties]对话框中先设置如下三项内容：
Title:
Xadxrlmage:
media/97101003.jpgBackcolor#99ff99
（五）在各框架页中插入对象（层、表格、媒体无素……）
1.
（1）.点击“上框架”页，插入一个层：
objectscommonDrawlayer
（2）.点击“左框架”页，插入五个层：
objectscommondrawLayer
（3）.点击“右框架”页，插入一个5×
3表格：
objectscommoninsertTable
在windowsproperties属性对框架修改为：
W:
100,H:
500
（4）.全部存盘：
FilesaveAllFrames
2.在框架页、层、表格中插入媒体元素：
（1）在“上框架”左边层中插入动画图像:
insertImage:
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两个网页应事先单独设计好以备用。
二.Fireworks设计范例:
例一：
背景图上添加汉字
1.新建画布：
FileNew760（w）×
150（H）
2.插入背景图：
InsertImage:
xadx/media/02040161.jpg
3.在TOOLS箱中选A,在背景图上点击，
在[TextEditor对话框]中输入汉字“西安大学”
4.改字体（隶书）：
大小（60）、颜色（大红）、位置（居中）,[OK]
5.可双击字体后再次修改,直到满意.
6.导出保存：
FileExportxald.gif（17KB）
例二：
剪裁图形：
1.打开一个图形：
Fileopen022040161.jpg
2.选Toolsovalmarqueetool（M）在图形上圈出范围
3.选Editcut（剪切）
4.选Filenew
5.选Editpaste
6.选FileExportTyk.gi
例三．艺术字体
1．新建画布：
FileNew500（w）×
2．在TOOLS箱中选A,在背景图上点击，
3．改字体（隶书）：
大小（96）、颜色（大红）、位置（居中）,[OK]
4．选windowfillRadial,用Edit编辑色彩变幻（紫金黄）
5．导出保存：
FileExportyszt.gif
例四．文字沿路径分布
1．新建画布：
FileNew600（w）×
500（H）
2．画圆圈，用橡皮（切割）擦缺口，将下半部删除
3．在TOOLS箱中选A,在背景图上点击，
在[TextEditor对话框]中输入汉字“西安联合大学”
4．将文字附着在路径上：
（1）同时选定路径和文字，再选TextAttachtopath（附贴）
（2）改变附贴形式：
Textorjentation
（3）取消路径:
Converttopatns
5.再编辑文字：
windowsstroke（画笔）
windowsEffect（效果）
6．优化处理:
windowsobject
7．导出保存：
FileExportljfb.gif
例五．图像艺术处理
FileNewOK
2.导入图像:
Fileimport…….并用鼠标拖放出图像的大小范围
3.修改画布、图像属性：
Modify……
4．对图像进行艺术处理:
Modify……
*******************************************************************
三.Flash（FlashMX）设计范例
（一）逐帧动画与按钮
例一：
在间隔的各帧画图形并导入声音
1．在第1帧画彩色圆
2．在第2帧插入空白关键帧（insetrblankkeyframe）,在右边再画一个彩色圆
3.在第3帧插入空白关键帧（insetrblankkeyframe）,在右边再画一个彩色圆
依此类推直作到第10帧（注：
圆可以一个比一个大些，颜色亦可改变）
4．导入声音：
FileImport（导入库中），再从库中拖到选定的开始帧
5．预览：
controltestmovie
6．存盘：
zzdh1.fla
例二：
盆中花开放
1.在第1层第1帧画盆，在第20帧插入关键帧
在第2层第1帧到第20帧画不断开放的花辫
2.在第3层第10帧到第20帧画飞来的蝴蝶
3.预览：
4.存盘：
bxwt1.fla
例三：
制作动态按钮
1.插入按钮组件：
insrtNewsymbol;
name:
an;
选Button;
ok确定
[注]出现的编辑状态含有4帧:
UP（弹起）；
Over（经过）；
Down（按下）；
Hit（执行区域）
（1）点选”Up”帧,画红色圆，写字“Up”
（2）点选”Over”帧,插入空白帧，画绿色圆，写字“Over”
（3）点选”Down”帧,插入空白帧，画蓝色圆，写字“Down”
（4）点选”Hit”帧,插入空白帧，画一个大圆作为执行用区域，写字“Hit”
2.转到场景1（Scen1）
在第1帧将图库中的按钮an拖入。
3.编辑按钮，导入图像
（1）双击例三图库中的按钮，进入编辑按钮状态
（2）添加第2层
1）点选”Up”帧,插入空白帧，导入图像1（注：
自选）
2）点选”Over”帧,插入空白帧，导入图像2（注：
3）点选”Down”帧,插入空白帧，导入图像3（注：
4）点选”Hit”帧,插入空白帧，导入图像4（注：
例四．编辑按钮，产生交互作用来调用场景
1．按照例三设计一个按钮:
an
2．在按钮（an）上单击右键，在弹出的快捷菜单上选择Actions（动作）命令
3.在ObjectActions面板选择BasicAction下的GoTo项并双击，将在右侧窗口自动产生语句：
on（release）{
gotoAndPlay（“Scene1”,1）
}
4.注：
按照实际可将1改为2等
例五．燃烧的火焰
1.制作逐帧火焰
（1）在Layer1第1帧中间用铅笔画火焰轮廓（注：
不要对齐网格）
选WindowPanelsFill用（黄色棕黄色）填充
（2）在第2,3,4,5,6,7,8,9,10帧插入关键帧：
insertKeyFrame
并分别修改火焰边沿的形状和颜色,使其稍有差别
（3）分别选中各帧图形的边框颜色，按Delete键将其删除
（4）分别选中各帧图形,选ModifyShapeSoftenFillEdges
（揉化填充边，参数：
20–5）
（5）选中所有帧，复制：
EditCopyFrames
2.制作逐帧焰芯
（1）添加第2层Layer2，在第1帧,粘贴原Layer1选中的所有帧:
EditCutFrames,并删除关键帧后的各帧。
（2）将各帧的图形缩小。
3．制作燃烧的木材
（1）添加第3层Layer3，在第1帧画两根交叉的木材
（2）调整木材与火焰的位置。
（二）变形过渡（shape）动画
变形物体（圆正方形长方形）
1.新建影片（movie）：
FileNew
2.在第1帧画彩色园
3.在第30帧插入空白关键帧（insertblankkeyframe）,再画正方形
4.在第60帧插入空白关键帧（insetrblankkeyframe）,再画长方形
5.分别单击第1帧，第30帧，各选frame面板Tweening:
shape
6.预览：
7.存盘：
1。
将例一图形放大:
击右键选scale拖放
2．将例一图形旋转:
击右键选Rotate拖转
3．给例一图形填过渡色:
选windowpanelsFill……
例三:
变形图像（风景花风景）
1.新建影片（movie）:
filenew
2.在第1帧与第60帧导入风景图像后缩小定位
（1）fileimport02040161.jpg
（2）在图像上击右键：
cale缩小并定位
（3）.在第60帧插入关键帧后,缩小重定位insertkeyframe
3.在第30帧导入花图像后缩小定位：
（1）insertblankkeyframe
（2）fileimport07110101.jpg
（3）在图像上击右键scale缩小并定位
4.将三帧图像分别打碎：
modifybreakapart
5.在第1帧与第30帧选frame面板:
Tweeningspape
6.预览:
7.存盘:
bxtx1.fla
例四：
探照灯（蒙板）照字
1．
（1）在Layer1第1帧写彩色艺术汉字“西安大学”
（2）在Layer1第30帧insert一个Frame
2.
（1）添加Layer2，并在第1帧画圆（在“西安大学”左边）
（2）在Layer2第30帧insert一个KeyFrame（关键帧）
（3）在Layer2第1帧:
Tweeningshape
（4）在Layer2左边击右键，选蒙板（mask）
3.注：
亦可将Layer1设蒙板（mask），但效果不同。
例五．三角形旋转后移动
1.在Layer1第1帧画彩色三角形，按Ctrl+G（ModifyGroup）将其组合起来；
并在Layer1第60帧按F5键（insrtFrame）。
插入一帧。
2.选Layer1第1帧，按Ctrl+C（Editcopy）将其复制到剪贴板。
3.增加Layer2图层.按Ctrl+Shift+V键（EditPasteinPlace）,粘贴到原位置。
4.选Layer2刚粘贴的彩色三角形，ModifyTransFormEditCenter,用鼠标将中心点拖到三角形的右下角上。
5.选Layer2第30帧，按F6键，即insert一个KeyFrame（关键帧）
选WindowPanels（面板）Transform（变换）,再选Rotate（旋转）：
180度
6.选Layer2第60帧，按F6键，即insert一个KeyFrame（关键帧）
将下方图形移到上方构成平行四边形
7.在Layer2第1帧，选WindowPanels（面板）Frame选Motion,选ccw（逆时针旋转）
8.在Layer2第1帧，选WindowPanels（面板）Frame选Motion,默认None
（三）运动渐变（Motion）动画
例一．小球沿导向层圆圈转动
1．
（1）在Layer1第1帧画小球
（2）insert设为图形图符号b1
（3）在Layer1第30帧insertKeyFrame（关键帧）
（4）在Layer1第1帧frameTweeningmotion
2..
（1）添加导向层
（2）在该导向层画圆圈，并用橡皮擦一个小缺口
3．将Layer1第1帧小球和第30帧小球分别对准导向层圆圈缺口的起始端点上
例二．圆锥向两边延伸并旋转
1．插入新动画（Movieclip）图符b1----圆锥向两边延伸:
（1）在第1帧选insertNewsymbol,选Movieclip,name为b1
（2）在第30帧插入关键帧：
（3）再复制，粘贴，然后修改旋转90度
（4）在Layer1第1帧frameTweeningmotion
2.在scene1中使圆锥向两边延伸并旋转
（1）在第1帧调入动画图符b1
（2）在第40帧插入关键帧：
（3）在Layer1第1帧选frameTweeningMotion,Rotate:
cw,1times
例三．光芒四射的五角星
1.放射线并设为图形符号：
xian
（1）选insertNewsymbol,选Graphic,name为xian
（2）在第1帧画一条过中点的垂直的短放射线，再复制９条并分别旋转，即
选ModifyTransformScaleandRotate分别选Rotate为：
18,26,54,72,90,108,126,144,162
2.画五角星并设为图形符号：
（2）在第1帧画一条过中点的垂直直线，再复制 4 条并分别旋转，即
72，144，216，288
3.返回场景1（secne1）：
（1）在Layer1将图库中图形符号xian拖入到第1帧,
在第30帧插入关键帧：
insertKeyFram并全选放大,击右键选Rotate,顺时针旋转360
在Layer1第1帧选frameTweeningMotion,Rotate:
（2）添加第2层Layer2，在Layer2将图库中图形符号wjx拖入到第1帧,
在第30帧插入关键帧：
insertKeyFrame并修改其颜色,击右键选Rotate,逆时针旋转360。
在Layer2第1帧选frameTweeningMotion,Rotate:
ccw,1times
4.测试影片：
ControlTestNovie
例四．两球碰撞
1．画图形符号--小球：
选insertNewsymbol,选Graphic,name为b1
在Layer1第1帧画一个小球
2．返回场景1（secne1）.
3.在Layer1第1帧,将图库中b1拖入到左边
在Layer1第30帧插入关键帧：
insertKeyFrame,将小球拖入到中间
在Layer1第60帧插入关键帧：
insertKeyFrame，将小球拖入到左边
在Layer1第1帧和第30帧分别设置运动状态：
frameTweeningmotion
4.添加第2层Layer2，在Layer2将图库中图形符号b1拖入到第1帧右边
在Layer2第30帧插入关键帧：
在Layer2第60帧插入关键帧：
insertKeyFrame，将小球拖入到右边
在Layer2第1帧和第30帧分别设置运动状态：
5．注：
可在中间画一些火花。
例五．图像旋转渐变（由小变大，由灰变亮）
1.
（1）insertNewSymbol,选MovieClip,命名Name:
TX
（2）Fileimport,自选图像“背景图.jpg”
2.返回场景1（Scene1）的Layer1
（1）将影片符号TX拖入到第1帧的左上方，缩小，设透明度（Alpha）为20%
insertKeyFrame,将影片符号TX拖入
第1帧的右下方，放大，设透明度（Alpha）为100%
（3）在第60帧插入延续帧：
insertFrame
4.在第1帧设置运动状态：
FrameTweeningMotionCW
（四）程序控制动作的动画
例一．多个透明度不同的小球随鼠标移动
1．制作动画组件图符小球b1:
（1）insertNewsymbol,选Graphic,name为b1
（2）在Layer1第1帧画红色小球
2.返回场景1（scene1）
（1）在第1帧将图符小球b1拖入6个（并排放置）
（2）分别选中各个小球，依此改变其透明度（Alpha）为:
10%,20%,35%,45%,65%,100%：
WindowPanels（面板）Effect（效果）Alpha（透明度）
（3）选WindowPanels（面板）Instance（实例）在Behavior选MovieClip,在Name中依此设为1，2，3，4，5，6。
（4）在第2，3，4，5，6帧插入关键帧（insertKeyFrame）
（5）在第1帧双击进入FrameActions
选“+”，选ActionsstartDrag,在Target输入:
1
选Lockmousetocenter（注：
若不选，等距物动）
（6）在第2，3，4，5，6帧，仿照（5）在第1帧的方法设置语句是，但在Target文本框中分别输入:
2，3，4，5，6
例二．电子表
1.ModifyMovie
2.在场景的上边中间输入：
“电子钟”。
下一行左边输入：
“日期、时间：
”
3.在“日期、时间：
”右边拖入一个长方形文本框，右击，选PanelsTextOptions
选文本类型为：
DynamicText（动态文本）,变量输入为：
dzb
4.右击Layer1的第1帧
（1）选Actions，击加号：
“+”选Actionsevaluate（赋值语句表达式）
（2）在Expression框输入:
dates=
（3）选ObjectsDateNewDate,删去（）中的参数，在对话框右边得到：
dates=newDate（）;
5.Layer1的第2帧插入关键帧：
insertKeyFrame。
同上，右击Layer1的第2帧，
选Actions，击加号：
“+”,选Actionsgoto
例三.指针时钟
1．设计图形符号（钟表表盘bp）:
InsertNewSymbol,选Graphic,命名为：
bp,画灰色圆环、填充渐变色、写表盘数字、画圆心
2.设计影片符号（时针sz、分针fz、秒针mz）
（1）InsertNewSymbol,选MovieClip,命名为：
sz,画蓝色无边长形时针
（2）InsertNewSymbol,选MovieClip,命名为：
fz,画绿色无边长形分针
（3）InsertNewSymbol,选MovieClip,命名为：
mz,画金黄色无边长形秒针
升级会员 