静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 计算机系部网站-实训指导书8.docVIP

静态网页设计与制作（项目式） PAGE 218 PAGE 218 课程实训指导书 《静态网页制作（Dreamweaver）》 实训指导书 指导教师：张亚静 所在系别： 计算机技术系 所属专业： 网络技术 指导教师: 张亚静 专业负责人： 孙志成 PAGE PAGE 217 指导书填写要求 实训设计指导书由指导教师根据课题的具体情况进行设计填写，经学生所在专业的负责人审查、系领导签字后生效。此指导书应在实训开始前一周内填好并发给学生； 指导书填写的内容，必须和学生实训完成的情况相一致。若有变更，应当经过所在专业教研室及系主管领导审批后方可重新填写； 本指导书内有关“系”、“专业”等名称的填写，应写中文全称，学生的“学号”要写全，不能只写最后2位或1位数字； 有关年月日等日期的填写，一律用阿拉伯数字书写。如“2017年3月2日”或“2017-03-02”。 PAGE PAGE 7 实训八、 制作网页特效 一、实训的目的与要求 （一）实训目的 设计和制作三木企业网站网页特效。 （二）实训要求 根据网站的特点及布局，选择合适的网页特效，如图4-50就是两款不同的特效案例，我们可以选择其中任何一款，另外，我们还可以选择更多的特效来搭配网站视觉效果，请同学们课下多搜集特效文件进行归纳整理，这样在制作网站的时候就可以更快提高制作效率、提升网站制作效果。 （1）特效1：如图4-50所示，使网页效果丰富起来，具有动感特效。 图4-50 网站首页banner网页特效 （2）特效2：如图4-51所示，设计制作网站多个图片无缝滚动特效。 图4-51 网站多图片无缝滚动特效 【任务要求】 （1）参照图4-50通过修改现有的网页特效实例并应用到网站banner处 （2）参照图4-51通过修改现有的网页特效实例并应用到网站主内容区的最底部 （3）特效应用遵循网页结构、表现与行为分开的原则二、实训的前期准备（设备、用具与软件环境） 二、实训的前期准备（设备、用具与软件环境） 操作系统： WIN10/WIN7/XP等操作系统 应用软件 Dreamwear网页编辑软件及 Flash动画设计软件、PS图形图像处理软件等。 三、实训的步骤 特效1： 修改现有特效资源 修改内容： 小图片 修改为自己图片的名字 修改大图图片的文件名称 注意：这里因为有代码编程（zzsc.js文件中） 所以文件名不能随意命名，你也可以修改代码中的名字，只要保证代码中的名字和文件名相互符合即可。 单独测试成功后，放入到网站中。 首先，复制样式 style type=text/css *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* index_pic */ #index_pic{background:url(images/loadsmall.gif) no-repeat center;overflow:hidden;width:990px;position:relative;height:300px;overflow:hidden;margin:40px auto 0 auto;} #index_pic ul{z-index:999;right:3px;bottom:0px;position:absolute;text-align:left} #index_pic ul li{display:block;font-weight:900;font-size:12px;float:left;width:70px;color:#aaa;position:relative;height:50px;} #index_pic li div{margin-top:5px;display:none;padding-left:10px;margin-left:70px} #index_pic li img{border-right:#fff 1px solid;border-top:#fff 1px solid;filter:alpha(opacity=60);left:10px;float:left;border-left:#fff 1px solid;width:52px;cursor:pointer;margin-right:4px;border-bottom:#fff 1px solid;position:absolute;top:5px;height:35px;moz-opacity:0