实验三网页设计软件的使用.doc

实验三网页设计软件的使用———————————————————————————————— 作者：———————————————————————————————— 日期： 实验三 网页设计软件的使用 [实验目的]1. 掌握站点的创立与管理方法 ；2. 掌握DreamWeaver中多媒体对象的插入方法； 3. 掌握网页中图片的编辑方法 [实验环境]记事本、IE浏览器、Windows XP操作系统实验内容：说明：首先熟悉教材第三章中的相关案例，然后独立完成下面的实验内容1. 利用DW软件新建网站站点，并建立相应的文件夹2. 练习在DW中插入图片、鼠标经过图像、导航条、Flash等对象3. 参考下面的Banner ，仿制类似效果图，并在网页中插入效果图，为其添加透明Flash〔说明：素材自己另行下载〕【参考步骤】1〕新建图形文件：图1图22〕插入背景图片翻开背景图像〔第1个图像〕，在工具箱中选择移动按钮“〞，将图像拖入图2调整位置到适宜为止这时，自动建立图层1图3关闭第一个图像3〕翻开第2个图像使两个图像水平平铺排列，将第2个图像拖入，自动建立第2个图层Ctrl+T，缩放图像至适当大小图4这时，有3个图层：背景图层，图层1插入背景图片，层2插入图片。

4〕使用蒙板工具，使两张图片融合在一起选中图像颜色较深的图层2，单击图层面板下方的“添加图层蒙板〞按钮图5选择工具箱中“渐变〞工具“〞，用渐变工具为遮罩添加黑色到白色的渐变图6鼠标指针变成“+〞形，从左上角到右下角划动，使图层2中的图像与图层1融合5〕添加文字：单击文字工具“〞，自动增加一个文字图层设置文字字体、字号、颜色，输入文字设置样式4. 仿制先锋网站Banner用到的相关软件：Flash，Photoshop首页Banner局部长1000px，高200px制作思路：先在Photoshop中处理好背景图片，然后在Flash中制作出动画效果具体制作过程如下：⑴ PS制作Banner背景① 创立文件首先翻开PS软件，新建一个大小为1000*200px，分辨率为72px，颜色模式为RGB的文件② 背景透明化新建图层1，在该图层内导入选好的党建背景〔醒目的红色基调〕，给该图层添加图层蒙版，使背景的右半边透明化如图1-9所示图1-9 制作透明的Banner背景③ 添加背景效果新建图层2，给背景添加一些党建元素，然后写上“XX先锋网〞字样，字体为“叶根友毛笔行书简体〞，字号“52号〞，给字体加上一些白色描边和发光样式，使得字体更醒目。

字样的前面添加先锋网的LOGO如图1-10所示图1-10 丰富Banner背景元素④ 分开保存背景和文字将文字及LOGO隐藏，保存背景图片为：background.png；将背景图片隐藏，保存文字和LOGO：logo.png⑵ 利用Flash制作Banner动态效果翻开Flash软件，新建一个Flash文件，设置舞台画布大小为1000*200px，将上述所处理过的background背景图片导入到库，拖至图层1的第一帧如图1-11所示图1-11 Flash导入背景图片① 给标题增加醒目的动态效果新建LOGO影片剪辑，下面将在此影片剪辑内操作将上述所处理过的logo文字图片导入到库，拖至LOGO影片剪辑图层1的第一帧，相对舞台居中新建图层2，在第一帧绘制一个白色发光竖型矩形，在第50帧复制粘贴该矩形，两矩形分别放置在logo的头尾，建立补间动画新建图层3，在该图层上添加文字，与背景图片字体、字号、摆放位置完全一致，并将其设置为遮罩层制作效果如图1-12所示图1-12 Flash标题的遮罩效果② 添加动态副标题新建FONT影片剪辑，下面将在此影片剪辑内操作在图层1的第15帧添加文字“——滁州市来安县〞，黑体，白色，25号字，投影1px。

将该文字转换为元件，并复制在第10帧上将第15帧的元件设置透明度为8%，将第10帧的元件设置透明度为100%，创立两帧之间的补间动画最后，给第10帧添加AS脚本stop();具体效果如图1-13所示图1-13 Flash副标题的动态效果③ 为Banner右侧添加切换图片效果新建PIC影片剪辑，下面将在此影片剪辑内操作导入四张160*200px的本镇精巧图片到库首先新建图层1，将第一张图片拖入至第1帧，将其转换为元件，修改透明度为8%；其次在第10帧，第20帧，第50帧，第70帧插入该元件，分别设置透明度为50%，100%，100%，0%；最后在第1帧到10帧之间，第10帧到第20帧之间，第50帧到第70帧之间创立补间动画这样一张从无到有再到无的图片动画就制作好了其他三张图片的制作方式大致一样，分别添加图层2，图层3和图层1为了保证四张图片切换的连贯性，图层2的起始帧为第50帧，图层3的起始帧为第100帧，图层1的起始帧为第150帧，前一图层的尾帧与后一图层的头帧要相互重叠这样，四张精巧图片的切换效果就完成了具体效果图如图1-11所示图1-11 Flash图片切换效果图④ 回到舞台，新建图层2，拖入PIC影片剪辑；将图层1的背景图片放置图层2之上；新建图层3，拖入LOGO影片剪辑；新建图层1，拖入FONT影片剪辑。

Banner的制作就此完成了最终效果图如图1-15所示图1-15 Banner最终效果图。