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

网页设计与课件制作范例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,画金黄色无边长形秒针