《网页设计ms》实验要求
班级： 学号： 姓名 ：
|
实验 |
内容 |
参考作品 |
| 1 |
网站空间、本地站点、 个人主页（P168） |
|
| Fireworks MX | ||
| 2 | 减小JPG图像
文件大小（P24） |
88kB  21kB  |
| 3 | 附加到路径（P73） | 附加到路径 网站标志 我的网站标志 |
|
网站标志
|
网络书店、网络狂想、 梦幻夜空、梦的天堂、流星空间、 拂晓晨风、阳光创意、阳光极地、多彩校园、 寻找真我、浪迹天涯、聚闲山庄、随意乐园、 青春舞动、青春活力、英雄传说、书香频道、 阳光女孩、月亮女孩、运动女孩 |
|
| 4 | 贴入内部（P98） | 贴入内部 我的贴入内部图像 |
| 5 | 批处理图片（P111）
生成动画（P114、P125） |
山水动画 广告动画
我的 GIF 动画 |
| 6 | 创建按钮（P147）
弹出式菜单（P161） |
网站开发 我的弹出式菜单 |
| Dreamweaver MX | ||
| 7 | 图像映射（P220） |
图像映射 我的图像映射 |
| 8 | 框架网页（P244） |
kjwy 我的框架网页 |
| 9 | 跳转菜单（P299） | whjy 我的跳转菜单 |
| 10 | 弹出式菜单（P303） | wzkf 我的弹出式菜单 跳转菜单必须指明 MM_jumpMenu 函数 弹出式菜单生成 mm_menu.js 动态网页生成 animate.js 广告管理器生成 FProtate.class FProtatx.class 悬停按钮生成 FPhover.class FPhoverx.clas |
| Flash MX | ||
| 11 | 位图填充（P330） | 自然风光 位图填充 我的位图填充 |
| 12 | 路径导引动画（P369） |
背景音乐 22秒*2帧/秒=44帧 我的路径导引动画 |
|
12a |
路径导引动画 | 飞绕云峰 飞机写字 正弦波 正弦波1 |
|
13 |
旋转动画（秒针 P377） | 风景秒针 田园秒针 人相秒针 |
| 14 |
地球自转公转 |
我的地球自转公转 |
|
15 |
文字遮罩彩条（P387） | 文字遮蔽彩条 wzzcth wzzctz lldt |
| 16 |
图像声音按钮 |
我的图像声音按钮 |
|
17 |
跳转按钮(P409) |  飞机  鲤鱼
|
声音素材：
导出声音：Flash 共享库—声音，如 Beam Scam—拖入场景—文件—导出影片—
文件名：fjs，保存类型：WAV 音频文件—声音格式：22 KHz 8 位 单声道。
汽车喇叭声：qc16 qc16a (qc16.wav qc16a.wav)
泉水声：qss16 qss21 (ss16.wav qss21.wav)
流水声：lss17 lss19 (lss17.wav lss19.wav)
时钟敲击：zs20 zs47 (zs20.wav zs47.wav)
实验1 申请个人网站空间、定义本地站点、设计个人主页（P168）
实验1 申请个人网站空间、定义本地站点、设计个人主页（P168）
实验名称：申请个人网站空间、定义本地站点、设计个人主页
所用软件：IE 浏览器、CuteFTP 软件
实验目的：到中国学生网申请 20MB、50MB 空间或 100M ASP 空间。
在国际互联网上建立一个自己的家。
实验过程：
1.登录“中国学生网”购买交费的 网站空间，
建立一个“互联网上的家园，展现自我的空间，勾画心中的蓝图，描绘美好的人生”。
发展方向提供网络虚拟空间，如朋友留言、知已聊天、学术论坛、……。
20MB空间4个人共用每人5MB空间，每月交费2元，每人0.5元。
2.共用的网站空间中每人一个文件夹，文件夹名用姓名的拼音首字母。
每个人应有自己的主页 index.htm。
3.填写用户名和口令，要求用笔记录，用户名不能忘记。
用户名：如，wltd828（网络天地828），只能用拼音或英文字母，不能用汉字。
口令：如，******
电子邮件：如，fsxss@tom.com，要求真实邮箱，
用于接收学生网发送的有关个人网站空间开通的邮件。
4.交费开通个人网站空间后，下载“文件上传下载”的软件
CutFTP32.rar。
打开
CuteFTP 软件，建立新站点，填写资料。
主机地址，如 asp2.6to23.com, vip.6to23.com, my.6to23.com
用户名：如 wltd828
口令：如，******
连接远程站点
5.选择“本地站点”上的文件 如，index.htm，点击上传按钮传送到远程个人空间。
6.在 IE 浏览器地址栏输入网址，如 http://asp2.6to23.com/wltd828 ，
打开个人主页。
定义本地站点（P168）
1.在 Windows 资源管理器中新建文件夹，如 E:\本地站点。
2.在 Dreamweaver MX 中
站点—新站点—高级选项卡—类别：本地信息
站点名称：如，本地站点
本地根文件夹：如，E:\本地站点
建立个人主页
1.在资源管理器中建立文件夹，如
E:\本地站点。
2.打开
FrontPage，打开站点，如 E:\本地站点。
3.下载文件到
E:\本地站点。不要采取直接编辑、文件另存为的方法。
要求采取复制粘贴的方法，可以保持链接老师网站的参考内容。
4.在 FrontPage
中打开主页 index.htm。
链接实验要求时采取浏览方法找到实验要求文件。
5.实验要求页面：填写班级、学号、姓名。链连实验结果。
6.要求个人主页链接：|实验要求|期中机试|期末机试|老师网站
实验目的：
通过ACDSee和Fireworks的各种方法减小JPG图像文件大小为1/20到1/10。
海边椰林
hbyl 88kB
21kB
实验过程：
1.文件另存转换格式：ACDSee 中 BMP、JPG 文件另存为 JPG 文件。
2.图像优化降低质量和减少锐化：
降低质量到40、减少锐化、增加平滑（模糊）到4。
3.缩小图像尺寸：取 777*555 点以下，重新取样。
把超过800*600像素点的相片缩小为 777*555 点。
4.剪取图像需要的部分。
5.画布缩小：使图像占满画布。
实验目的：制作附加到路径的网站标志
实验过程：
1.输入文本；如网址“http://wltd828.126.com”（大小 18）
2.在中心输入网站名称，如“网络天地828”（大小 32、26）。
3.绘制路径，如椭圆、圆形;
4.同时选中“网址”文本和圆形路径；
5.文本菜单—附加到路径（大小 180*70） 网站标志（大小 180*180）；
实验目的：制作贴入内部的图像
实验过程：
1.导入图像。
2.在位图上画矢量椭圆。
3.用箭头选中位图后剪切。
4.选中圆形后，选择编辑菜单贴入内部命令。
实验目的：制作 GIF 动画
实验过程：
1. 批处理图片：文件—批处理—选择图片—添加—继续—
导出—添加—JPEG-较小文件—
缩放—添加—缩放到大小：200*300—继续—
与原始文件位置相同、复盖现有备份（或自定义位置）— 批次。
2. 打开多个文件生成动画（P114、P125）
文件—打开—选择图像序列，以动画打开—
选择多帧—双击[帧延时]—输入“80/100秒”（0.8秒）—
优化面板— GIF 动画。
实验目的：创建按钮元件和弹出菜单
实验过程：
1. 新建文件—画布大小：666 * 555。
2. 编辑—插入—新建按钮—输入按钮名称、类型—
导入按钮，如 4-State Button—修改按钮文字，如“网站建设”—
滑过状态—更新其他按钮状态中的文字—把按钮拖到页面上的合适位置—
继续插入按钮，如“教学园地” ……。
3. 创建弹出菜单（P160）
创建弹出菜单：选择按钮，如“网站建设”—窗口—行为—[+]—
设置弹出菜单—输入弹出菜单各项目—
| 菜单文本 | 超链接地址 | 目标窗口 |
| 网页设计实验 | WYSJ_sy.htm | 新窗口 blank |
| ASP 模块实验 | ASPb_sy.htm | 本窗口 self |
外观：字体、字号；
位置：将菜单位置设置到切片的底部。
文件—导出—
路径、文件名、保存类型：HTML 和图像、
不选择：包括无切片区域
选择：将图像放入子文件夹。
实验目的：制作图像映射网页
实验过程：
1.选择图像。
2.在属性面板上选择矩形热点工具，再在图像拖放出矩形。
3.在属性面板上，找出链接的文件。
实验目的：制作框架网页
实验过程：
1.新建框架网页，选择框架类型包含：标题、导航栏目、主框架。
2.标题栏中输入与本站点相关的标题。
3.导航栏目中输入本站点的导航项目。
4.导航栏目中设置导航项目链接的目标框架为主框架。
5.文件—保存全部—框架集、标题框架、导航框架、主框架。
实验目的：制作跳转菜单
实验过程：
1）创建跳转菜单（P299）
插入—表单对象—跳转菜单—菜单项，如
文本：文化教育
选择时，转到 URL：空
选项：更改 URL 后选择第一个项目
2）增加项目：按“+”号按钮，如
文本：中央电大
选择时，转到 URL：http://www.crtvu.edu.cn
3）修改跳转菜单
点击“跳转菜单”—属性面板—列表值—增减项目，修改项目标签、值。或者，
点击“跳转菜单”—窗口—行为—行为面板—跳转菜单—增减项目，修改项目标签、值。
4）跳转菜单 JavaScript 脚本语言代码必须指明 MM_jumpMenu 函数，否则运行出错。
<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<form name="form1">
<p>
<select name="文化教育" onChange="MM_jumpMenu('parent',this,1)">
<option selected>文化教育</option>
<option value="http://www.tsinghua.edu.cn">清华大学</option>
<option value="http://www.pku.edu.cn">北京大学</option>
<option value="http://www.crtvu.edu.cn">中央电大</option>
<option value="http://www.fsrtvu.net">佛山电大</option>
<option value="http://www.ounh.org">南海电大</option>
</select>
</p>
</form>
实现跳转3个自选网站和跳转3个本站网页 wzss。
网站搜索：
| 网站名称 | 网站域名 | 网站标志 |
| 佛山电大 | www.fsrtvu.net | 
|
| 南海电大 | www.ounh.org | 
|
本站导航：
| 网页标题 | 网页文件名 | 按钮链接 |
|
|
||
|
|
跳转菜单必须指明 MM_jumpMenu 函数
弹出式菜单生成 mm_menu.js
动态网页生成 animate.js
广告管理器生成 FProtate.class FProtatx.class
悬停按钮生成 FPhover.class FPhoverx.clas
实验目的：制作弹出式菜单
实验过程：
1.使用 Dreamweaver MX 插入导航条按钮（包含多按钮的水平菜单）
插入—图像对象—导航条—导航元件：
项目名称：如，jxyd
状态图像：如，jxyd1.gif
鼠标经过图像：如，jxyd2.gif
按下时，前往的 URL：如，jxyd.htm；
添加项—
项目名称：如，jttx,dhsp,txsj,xswz,bysj,wssd，……。
2.对各导航条按钮创建弹出式菜单（垂直菜单）
选择某一个按钮—行为面板[+]—显示弹出式菜单—
输入弹出菜单要显示的文本：如，网络信息，网络数据库，……。
超链接地址：如，wlxx.htm,wlsjk,htm，……；
目标窗口：如，_blank,_self，……；
外观：字体、字号；
位置：将菜单位置设置到导航条按钮的底部。
3.修改弹出式菜单
修改导航条按钮：插入—图像对象—导航条—修改目前的导航条。
修改弹出式菜单：选择某一个按钮—行为面板[+]—双击“显示弹出式菜单”。
更换导航条按钮：
选择某一个按钮—行为面板[+]—双击“设置导航条图像”—从本地站点选择按钮。
创建弹出式菜单后， Dreamweaver MX 生成 mm_menu.js 文件 31kB。
实验目的：制作位图填充
实验过程：
1.同时导入三个位图到图形库。
2.打开 Flash 画板—绘制三个椭圆。
3.选择一个椭圆图形。
4.在窗口菜单选择混色器命令。
5.填充样式选择位图填充。
6.用不同位图分别填充三个椭圆。
7.更换位图：删除库中已有的位图后，才能导入其它位图。
所用软件：Micromedia Flash MX 动画制作软件
实验目的：制作掌握路径导引动画的制作
实验过程：
1.使用共享图库的原地游水鱼 GIF 动画。
窗口—共享图库—电影剪辑 Movie Clips
Fish Movie Clips 游水鱼影片导出影片才能看到效果。
Supporting Graphic 支持图形
Fish Animated Graphic 旋转游水鱼
Fish Graphic 原地游水鱼
2.增加导引层
3.用铅笔绘制运动轨迹，选择工具的“平滑”模式。
4.注意选中主要栏中的“贴近对象”按钮。
5.光标移到鱼的中心，拖动鱼，第1帧，使鱼对准运动轨迹起点。
6.结束帧，使鱼对准运动轨迹终点。
7.右击鱼层任一帧，选择“创建动画动作”。
8.右击运动层任一帧—面板—帧—使路径适应。
9.按Ctrl+Enter键测试影片。
心得体会：在实验中学习和掌握到什么技巧？有什么提高？有什么想法和建议？
所用软件：Micromedia Flash MX 动画制作软件
实验目的：制作带声音旋转动画的制作
实验过程：（P97）
1.在场景中画一个时钟刻度盘—把层改名刻度盘—刻度盘中背景使用位图填充。
2.在刻度盘层上插入秒针层。
3.在秒针层上用刷子画秒针。
或者用文字工具—输入网站标志，如“网络天地 828 http://wltd828.ecbest.com”。
在网站标志上增加字母构成秒针。
4.用箭头工具选定秒针—修改—转换为元件：
名称：秒针元件，行为：图形，注册：选中下点。
5.用箭头工具选定秒针—点击旋转工具—移动秒针的中心点到中下位置。
6.秒针对准刻度“12”，秒针转轴心、时钟刻度中心都应与工作区中心对齐。
7.右击第15帧，插入关键帧，顺时针旋转秒针 90°。
8.依次右击第30、45、60帧，分别插入关键帧，分别顺时针旋转秒针 90°。
9.依次右击第1、15、30、45帧—创建动画动作。
10.修改—影片，
帧频：1帧/秒,每分旋转1周。尺寸：550px * 400px,背景颜色：天蓝色。
|
关键帧 |
1 |
15 |
30 |
45 |
60 |
|
秒数 旋转角度 |
1 0 |
15 90 |
30 180 |
45 270 |
60 360 |
11.增加秒针滴答声层。
12.窗口—共享库—声音—用 Latch Metal Click 模拟滴答声，把它拖到第1帧。
13.右击第1帧—复制帧—右击第2帧—粘贴帧。
14.按住[Ctrl]—选中第1、2帧—右击—复制—粘贴到3、4帧。
15.由1至4帧复制粘贴到5至8帧，……最后使60帧都带滴答声。
所用软件：Micromedia Flash MX 动画制作软件
实验目的：制作遮蔽层动画
实验过程：（P231）
有文字笔划处看到移动的彩色条纹色块，空白处遮蔽彩条。
1.修改—影片—尺寸：500*150。
2.彩条层—选择线性填充—画矩形：1000*150—删除矢量线。
3.点击彩条矢量色块—插入—转换成符号 cst。
4.设置彩条起始关键帧、结束关键帧位置—设为运动动画。
5.添加文字层—输入文字：字号90、60—定义为遮蔽层—
系统自动定义彩条层已遮蔽。
心得体会：在实验中学习和掌握到什么技巧？有什么提高？有什么想法和建议？
实验目的：制作图像声音按钮
实验过程：
15.1 制作图像声音按钮
素材可以采用多种方法获取：
下载网上共享资源、Flash 动画逐帧播放获取、
数码相机拍照、扫描仪扫描、用画图软件绘制。
参考网上共享资源 Flash 动画别墅奇观，取别墅作背景制作别墅按钮动画
实验过程：
1.插入—新建元件—影片声音 ypsy 按钮—窗口—共享库—按钮—Pill Botton。
|
按钮状态 |
一般 |
经过 |
按下 |
反应区 |
|
按钮层 |
飞鸽飞鱼 |
飞鸽上天 |
飞鱼跳水 |
探测鼠标 |
|
影片层 |
fgfy 影片 |
fgst 影片 |
fyts 影片 |
|
|
声音层 |
an.MP3 |
Camera Shutter |
Cloth Rip |
|
2.按钮层有四种状态：一般、经过、按下和反应区。
按钮状态分别用不同的文字：飞鸽飞鱼、飞鸽上天、飞鱼跳水。
3.按钮符号增加影片层和声音层。
4.按钮层、影片层和声音层对应鼠标经过和按下状态都插入关键帧。
5.用不同文字、影片和声音加入相应的层和关键帧。
6.利用 Flash 共享库的相似声音：窗口—共享库—声音—
用 Camera Shutter 模拟飞鸽吱吱叫，用 Cloth Rip 模拟飞鱼跳水声。
7.导入外部声音：文件—导入—例如：F:/wltd828/an.MP3。an22 an26
8.按[Ctrl]+[Enter]键预览动画。
15.2 制作跳转按钮动画
实验目的：制作跳转按钮动画
实验过程：
1.跳转帧
单击场景中关键帧（如,20帧）—窗口—动作—帧动作卡—动作—基本动作—
双击跳转命令(goto)—设置跳转场景、目标类型（如,帧数）、帧序号（如,1）。
Flash MX 2004 版
行为面板[+]—影片剪辑—转到帧或标签并在该处播放—播放帧号，如 1。
2.跳转按钮
右击场景中按钮—动作—对象动作卡—动作—基本动作—双击跳转命令(goto)—
系统添加代码"On (Release) {gotoAndPlay(1)}"—
设置跳转场景、目标类型（如，帧数）、帧序号（如,21）。
Flash MX 2004 版
右击场景中按钮—当前位置编辑—场景—
“动作-按钮”面板—全局函数—影片剪辑控制—双击 on 命令—选择 Release—
系统添加代码"On (Release) {};"—
“动作-按钮”面板—全局函数—时间轴控制—双击 gotoAndPlay 命令—
系统添加代码"On (Release) {gotoAndPlay()};"—
设置跳转场景、目标类型（如，帧数）、帧序号（如,21）。
|
声音层 |
Beam Scan Metal Klank |
Camera Shutter |
Cloth Rip |
|||
|
影片层 |
天上飞机 火箭射机 |
天上飞鸽 鱼射飞鸽 |
水上飞鱼 飞鸽追鱼 |
|||
|
跳转帧 |
1—19帧 |
20关键帧 跳转到1帧 |
21—39帧 |
40关键帧 跳转到21帧 |
41—59帧 |
60关键帧 跳转到41帧 |
|
跳转按钮 背景层 |
[跳转飞鸽] 跳转到21帧 |
[跳转飞鱼] 跳转到41帧 |
[跳转飞机] 跳转到1帧 |
4.选择模拟声音
用 Beam Scan 模拟飞机轰轰声 fjs (fjs.wav)，
用 Camera Shutter 模拟飞鸽吱吱叫 fgs (fgs.wav)，
用 Cloth Rip 模拟飞鱼跳水声 lys (lys.wav)。
用 Metal Klank 模拟爆炸声 bzs (bzs.wav)。
