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

《实验三 网页设计软件的使用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验三网页设计软件的使用[实验目的]1.掌握站点的创建与管理方法；2.掌握DreamWeaver中多媒体对象的插入方法；3.掌握网页中图片的编辑方法。[实验环境]记事本、IE浏览器、WindowsXP操作系统实验内容：说明：首先熟悉教材第三章中的相关案例，然后独立完成下面的实验内容。1.利用DW软件新建网站站点，并建立相应的文件夹。2.练习在DW中插入图片、鼠标经过图像、导航条、Flash等对象。3.参考下面的Banner，仿制类似效果图，并在网页中插入效果图，为其添加透明Flash。（说明：素材自己另行下载）【参考步骤】1）新建图形文件：图

2、1图22）插入背景图片打开背景图像（第1个图像），在工具箱中选择移动按钮“”，将图像拖入图2。调整位置到合适为止。这时，自动建立图层1。图3关闭第一个图像。3）打开第2个图像。使两个图像水平平铺排列，将第2个图像拖入，自动建立第2个图层。Ctrl+T，缩放图像至适当大小。图4这时，有3个图层：背景图层，图层1插入背景图片，层2插入图片。4）使用蒙板工具，使两张图片融合在一起。选中图像颜色较深的图层2，单击图层面板下方的“添加图层蒙板”按钮。图5选择工具箱中“渐变”工具“”，用渐变工具为遮罩添加黑色到白色的渐变。图6鼠标指针变成“+”形，从左上

3、角到右下角划动，使图层2中的图像与图层1融合。5）添加文字：单击文字工具“”，自动增加一个文字图层。设置文字字体、字号、颜色，输入文字。设置样式。4.仿制先锋网站Banner用到的相关软件：Flash，Photoshop。首页Banner部分长1000px，高200px。制作思路：先在Photoshop中处理好背景图片，然后在Flash中制作出动画效果。具体制作过程如下：⑴PS制作Banner背景①创建文件。首先打开PS软件，新建一个大小为1000*200px，分辨率为72px，颜色模式为RGB的文件。②背景透明化。新建图层1，在该图层内导入

4、选好的党建背景（醒目的红色基调），给该图层添加图层蒙版，使背景的右半边透明化。如图1-9所示。图1-9制作透明的Banner背景③添加背景效果。新建图层2，给背景添加一些党建元素，然后写上“XX先锋网”字样，字体为“叶根友毛笔行书简体”，字号“52号”，给字体加上一些白色描边和发光样式，使得字体更醒目。字样的前面添加先锋网的LOGO。如图1-10所示。图1-10丰富Banner背景元素④分开保存背景和文字。将文字及LOGO隐藏，保存背景图片为：background.png；将背景图片隐藏，保存文字和LOGO：logo.png。⑵利用Flash

5、制作Banner动态效果打开Flash软件，新建一个Flash文件，设置舞台画布大小为1000*200px，将上述所处理过的background背景图片导入到库，拖至图层1的第一帧。如图1-11所示。图1-11Flash导入背景图片①给标题增加醒目的动态效果。新建LOGO影片剪辑，下面将在此影片剪辑内操作。将上述所处理过的logo文字图片导入到库，拖至LOGO影片剪辑图层1的第一帧，相对舞台居中。新建图层2，在第一帧绘制一个白色发光竖型矩形，在第50帧复制粘贴该矩形，两矩形分别放置在logo的头尾，建立补间动画。新建图层3，在该图层上添加文字

6、，与背景图片字体、字号、摆放位置完全一致，并将其设置为遮罩层。制作效果如图1-12所示。图1-12Flash标题的遮罩效果②添加动态副标题。新建FONT影片剪辑，下面将在此影片剪辑内操作。在图层1的第15帧添加文字“——滁州市来安县”，黑体，白色，25号字，投影1px。将该文字转换为元件，并复制在第10帧上。将第15帧的元件设置透明度为8%，将第10帧的元件设置透明度为100%，创建两帧之间的补间动画。最后，给第10帧添加AS脚本stop();。具体效果如图1-13所示。图1-13Flash副标题的动态效果③为Banner右侧添加切换图片效果

7、。新建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的起始帧为第10

8、0帧，图层1的起始帧为第150帧，前一图层的尾帧与后一图层的头帧要相互重叠。这样，四张精美图片的切换效果就完成了。具体效果图如图1-11所示。图1-11Flash图