静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 教学案例20.docx

教学案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 教学任务二十 、添加简单的首页动态特效 【任务背景】 首页添加一些简单的JavaScript特效后，由于刚接触JavaScript知识，后续大量JavaScript或jQuery的知识还没有涉及，对于初学者来说去编写复杂的JavaScript或jQuery特效显然力不从心，但是页面效果又需要通过JavaScript或jQuery特效来实现，因此考虑通过修改一些现有的JavaScript或jQuery特效实例来提升网页设计的效果。 【任务要求】 将符合网站需求的JavaScript或jQuery网页特效实例进行修改，应用到页面中提升网页的动态效果。特效代码最好是网页的结构、表现和行为分开，这不仅符合网页设计的需求，也有便于在应用中修改特效。 【任务分析】 JavaScript或jQuery特效可以极大地提升网站的动态效果，并提高网站的交互性。在应用JavaScript或jQuery特效案例时，大致从三个方面进行修改： 修改特效中网页表现和行为的路径。 修改特效中所应用的图片，将特效中的图片替换成事先准备好的图片。 修改特效中的样式，以满足网站的设计需要，保持与要应用的网页的设计风格相一致。 通过对首页分析，我们将通过“左右滚动图片切换”特效和“无缝滚动图片”特效，提升页面的动态效果。 【任务详解】 （1）“左右滚动图片切换”特效 某学院计算机系网站首页banner处考虑采用“左右滚动图片切换”特效，来提升了网页banner处的动态效果，如图4-39所示。本任务使用的jQuery特效，大家可以从本章节提供的素材“左右滚动图片切换特效”中找到，或搜集其他更符合页面需求的jQuery特效。 图4-39 “左右滚动焦点图”特效 步骤一：首先打开本章节素材“左右滚动图片切换特效”，或者从“站长之家”、“模板王”、“懒人图库”等网站搜集其他符合页面需求的JavaScript或jQuery特效。将其拷贝并粘贴到站点根目录下，重命名为zygdtptx，其站点目录下的文件列表如图4-40所示： 图4-40 某学院“计算机技术系”网站目录结构 步骤二：打开zygdtptx文件夹内的index.html文件，将body和/body内（删除的除广告之外）的代码进行复制，代码内容如下所示： div class=container div id=featured div class=content style= h1Orbit does content now./h1 h3Highlight me...Im text./h3 /div a href=img src=images/overflow.jpg //a img src=images/captions.jpg data-caption=#htmlCaption / img src=images/features.jpg / /div span class=orbit-caption id=htmlCaptionstrongIm A Badass Caption:/strong I can haz a href=#links/a, emstyle/em or anything that is valid markup :)/span /div 将上述代码粘贴到计算机系网站首页index.html文件的body和/body内的div id=flash和/div之间，把代码中的图片直接替换为素材中的图片“gyjsxy_r17_c42.jpg”，并注释掉span和/span之间的代码，不显示图片的标题文本信息，修改后代码如下所示： div class=container div id=featured div class=content style= h1Orbit does content now./h1 h3Highlight me...Im text./h3 /div a href=img src=images/gyjsxy_r17_c42.jpg //a img src=images/gyjsxy_r17_c42.jpg data-caption=#htmlCaption / img src=images/gyjsxy_r17_c42.jpg