电子商务网页设计与制作配套教材课件完整版电子教案.ppt

知识分析 2.float属性的使用 float属性在DIV+CSS的布局模式中使用频率非常高,主要用于设置对象是否浮动显示,并设置其具体的浮动方式,其属性值包括:none、left以及right。浮动是一种经常使用的布局方式,它能够改变页面中对象的前后排列顺序,这样使得DIV+CSS的布局更加方便。 知识分析 3.利用模板来创建网页 (1)创建模板 (2)编辑模板 (3)修改并更新模板 (4)从模板中分离 4.“库”元素在网页中的应用 (1)创建库项目 (2)应用及更新库项目 (3)与库项目分离 拓展练习 利用DIV+CSS完成农产品网站的首页面。 习题 1.简述对CSS盒子模式的理解。 2.简述SPAN元素和DIV元素的区别与用法,并分别各自写出一个例子。 谢谢观看欢迎指导！ 项目八设计与制作网页的交互特效 项目综述 网页特效的制作不是一件很难的事情,只要具备一定的JavaScript基础和CSS样式知识就可以在页面上实现丰富的动态特殊效果。本项目将介绍现今几个比较流行的网页特效制作实例(图片放大制作、广告图片自动轮换制作和浮动广告制作),以提高学习者的网页特效制作能力。 项目目标 能力目标： 学习完本项目后,学生应当能够依据公司项目要求完成页面的特效制作,包括: (1)结合CSS和JavaScript实现广告图片自动轮换特效。 (2)利用JavaScript实现浮动广告特效。 (2)利用JavaScript实现悬浮客服特效。 (2)利用JavaScript实现两侧悬浮促销广告特效。 知识目标： (1)JavaScript的嵌入格式及方法。 (2)JavaScript代码的编写方法。 (3)JavaScript函数的定义及调用。 (4)CSS样式在特效中的应用方法。 (5)JavaScript在特效中的应用方法。 Part 01 任务一· 广告图片自动轮换的制作 任务引导 本任务的目标是利用CSS实现个人网站首页的广告图片的自动轮换特效功能。广告图片自动轮换是通过图片的自动切换展示出各种广告图片,如果要浏览某张图片,可以通过点击图片跳转到相应的页面,在这个页面里除了浏览此图片之外还可以浏览其他相关信息,这是一种形象生动的广告形式 。 任务实施 1. 添加图片 2. 添加图片轮换功能 知识分析 需要说明的是在实际使用中,JavaScript代码在IE浏览器和其他，例如Firefox浏览器中会存在一些差异。banner轮播动画有时会通过其他不同代码来完成，这也是为了增加其通用性。 1.JavaScript格式 上述图片自动轮换播放特效采用了JavaScript技术, JavaScript使用的是成对的标记:script/script,这种代码可以在网页的head/head之间或者在body/body之间嵌入,格式如下: 　　script language=JavaScripttype=text/javascript 　　!--　 JavaScript代码编写 　　-- 　　/script 知识分析 2.JavaScript函数 图片自动轮换播放的JavaScript代码中定义了函数,分别为$(),galleryplay()和loop()。将脚本编写为函数,就可以避免页面载入时执行该脚本。函数包含着一些代码,这些代码只能被事件激活,或者说在函数被调用时才会执行。你可以在页面中的任何位置调用脚本(如果函数嵌在一个外部的.js文件,那么甚至可以从其他的页面中调用)。这里主要说明galleryplay()这个函数,该函数实现了广告图片自动轮换功能。JavaScript中创建函数的语法如下: function 函数名(参数1,参数2,…,参数n){ 　代码… } 知识分析 3.CSS revealtrans滤镜 使用CSS的revealtrans滤镜可以制作出图片切换时的播放效果,它的书写格式是这样的: Filter:revealtrans(duration=转换的秒数,transition=转换的类型) 拓展练习 1.什么是脚本语言 脚本语言包含以下几点含义: (1)脚本语言包括JavaScript、VBscript、PHP和PERL等,是一种介于HTML和C、C++、Java、C#等编程语言之间的语言,其同样由程序代码组成。 (2)脚本语言与编程语言有很多相似地方,其函数与编程语言比较相似。与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。 (3)脚本语言一般都有相应的脚本引擎来解释执行。它们一般