高职网页制作教学中图片切换CSS应用.docVIP

高职网页制作教学中图片切换CSS应用 　　摘要：图片切换在各种大型网站中很受青睐，几乎每个主页上都能看到。在分析了业内常用的两种方法在高职网页制作教学中的弊端的基础上，探讨了用CSS技术实现图片切换的妙处所在。 　　关键词：CSS技术；图片切换；高职教学 　　中图分类号：G712 文献标识码：A 文章编号：1672-5727（2013）09-0082-02 　　图片切换的通用制作方法 　　图片切换在各种大型网站中很受青睐，几乎每个主页上都能看到。它们或是最近新闻，或是特色展示，这些图片在不断切换，我们把这种做法叫做焦点图片切换（图1为新闻图片焦点切换的效果）。 　　那么，如何来实现图片切换呢？在网页制作中常用的方法有两种：一是用Flash 软件制作，然后插入网页中；二是用JavaScript 代码实现。 　　用Flash 制作图片切换卡 先准备好做切换的素材图片，将图片分别导入到舞台，每个图片占一个图层，选中后转换为图形元件。插入帧，转变为关键帧，把图形元件的Alpha值调整为0，添加补间动画，依次排列好，保存文件。插入到网页中，实现循环播放。 　　用JavaScript 实现图片动态切换 先创建SQL数据库，引用外部CSS代码，然后编写JS代码，最后，在CSS中进行数据库调用。其中，图片的宽高、切换时间差、图片链接地址均可在JS代码中进行更改。 　　常用方法在高职教学中的弊端 　　随着社会的发展，网页制作这个工作岗位对高职毕业生提出了更高的要求：必须具有快速上手能力和独立解决问题的能力。但在目前的高职教学中，学生学习不够主动，缺乏实际开发能力，程序设计开发经验不足，一旦操作过程中出现挫折就会产生厌学心理。 　　针对图片焦点切换这个课题来说，用Flash实现虽然制作过程比较简单，不需要代码编写，但由于网页中插入Flash会导致页面加载速度下降，用户体验不好；且后期维护需要重新制作Flash，维护网站的时间成本过大，导致网站维护的实时性很难保证。 　　用JavaScript实现虽然能够自动切换，后期维护图片文字只需简单修改，但是JavaScript语言涉及逻辑编程，对于高职学生来说比较困难，在学习过程中很容易产生挫败感而导致放弃学习。 　　相比之下???用CSS技术实现图片切换在高职教学中可以得到很好的应用。文件容量偏小，代码编写容易，后期维护简单；对素材图片没有要求，因为CSS中已经强制规定了显示的大小，只需更改图片地址和链接地址即可。 　　CSS技术的发展历程及应用优势 　　20世纪90年代初，样式表和HTML同时被发明。最初HTML版本只含有很少的显示属性，而读者用样式表来调节网页的显示方式。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。所以，外来定义样式的语言越来越没有意义。 　　1994年，哈坤·利提出了CSS，这是第一个含有“层叠”主意的样式表。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式，这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。 　　哈坤·利于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时，W3C刚刚建立，由于对CSS的发展很感兴趣，W3C特地为此组织了一次讨论会。哈坤、波斯是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及的问题，其结果是1998年5月出版的第二版要求。到2007年为止，第三版还未完备。采用CSS技术进行网页重构相对于传统表格布局具有以下3个显著优势：（1）表现和内容相分离。HTML文件中只存放内容信息，将表现放在一个独立样式文件中。搜索引擎更容易被发现这样的页面。（2）提高页面浏览速度。相同的页面视觉效果，采用CSS技术的页面容量要比表格排版的文件容量小得多，一般只有1/2大小。浏览器就不用去编译大量冗长的标签。（3）易于维护和改版。只要加载别的CSS文件就可以重新设计网站的页面。 　　图片切换的CSS技术的实现 　　接下来从零开始制作网页，用CSS技术实现流行的图片切换。它的原理就是巧妙利用锚链接来动态控制定义列表显示顺序。在制作过程中，将面临五个技术难题，现在就来一一解决。 　　图片和链接用什么基本HTML来实现 定义列表通常用于术语解析，其中列表用DL元素来表示；术语名称用DT来表示；术语的解释说明用DD元素表示。常用结构为。这里可以应用DL标签来制作图片放映窗口，DT标签来包含切换链接即导航按