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

实验三 网页设计软件的使用 [实验目的] 掌握站点的创建与管理方法 ； 掌握DreamWeaver中多媒体对象的插入方法； 掌握网页中图片的编辑方法 。 [实验环境] 记事本、IE浏览器、Windows XP操作系统 实验内容： 说明：首先熟悉教材第三章中的相关案例，然后独立完成下面的实验内容。 利用DW软件新建网站站点，并建立相应的文件夹。 练习在DW中插入图片、鼠标经过图像、导航条、Flash等对象。 参考下面的Banner ，仿制类似效果图，并在网页中插入效果图，为其添加透明Flash。（说明：素材自己另行下载） 【参考步骤】 1）新建图形文件： 图1 图2 2）插入背景图片 打开背景图像（第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中制作出动画效果。具体制作过程如下：  = 1 \* GB2 \* MERGEFORMAT ⑴ PS制作Banner背景  = 1 \* GB3 \* MERGEFORMAT ① 创建文件。首先打开PS软件，新建一个大小为1000*200px，分辨率为72px，颜色模式为RGB的文件。  = 2 \* GB3 \* MERGEFORMAT ② 背景透明化。新建图层1，在该图层内导入选好的党建背景（醒目的红色基调），给该图层添加图层蒙版，使背景的右半边透明化。如图1-9所示。 图1-9 制作透明的Banner背景  = 3 \* GB3 \* MERGEFORMAT ③ 添加背景效果。新建图层2，给背景添加一些党建元素，然后写上“XX先锋网”字样，字体为“叶根友毛笔行书简体”，字号“52号”，给字体加上一些白色描边和发光样式，使得字体更醒目。字样的前面添加先锋网的LOGO。如图1-10所示。 图1-10 丰富Banner背景元素  = 4 \* GB3 \* MERGEFORMAT ④ 分开保存背景和文字。将文字及LOGO隐藏，保存背景图片为：background.png；将背景图片隐藏，保存文字和LOGO：logo.png。  = 2 \* GB2 \* MERGEFORMAT ⑵ 利用Flash制作Banner动态效果 打开Flash软件，新建一个Flash文件，设置舞台画布大小为1000*200px，将上述所处理过的background背景图片导入到库，拖至图层1的第一帧。如图1-11所示。 图1-11 Flash导入背景图片  = 1 \* GB3 \* MERGEFORMAT ① 给标题增加醒目的动态效果。新建LOGO影片剪辑，下面将在此影片剪辑内操作。将上述所处理过的logo文字图片导入到库，拖至LOGO影片剪辑图层1的第一帧，相对舞台居中。新建图层2，在第一帧绘制一个白色发光竖型矩形，在第50帧复制粘贴该矩形，两矩形分别放置在logo的头尾，建立补间动画。新建图层3，在该图层上添加文字，与背景图片字体、字号、摆放位置完全一致，并将其设置为遮罩层。制作效果如图1-12所示。 图1-12 Flash标题的遮罩效果  = 2 \* GB3 \* MERGEFORMAT ② 添加动态副标题。新建FONT影片剪辑，下面将在此影片剪辑内操作。在图层1的第15帧添加文字“——滁州市来安县”，黑体，白色，25号字，投影1px。将该文字转换为元件，并复制在第10帧上。将第15帧的元件设置透明度为8%，将第10帧的元件设置透明度为100%，创建两帧之间的补间动画。最后，给第10帧添加AS脚本stop();。具体效果如图1-13所示。 图1-13 Flash副标题的动态效果  = 3 \* GB3 \* MERGEFORMAT ③ 为Banner右侧添加切换图片效果。新建PIC影片剪辑，下面将在此影片剪辑内