1、content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件Dreamweaver 20203网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8 使用JavaScript制作动态效果9设计与制作电子商务网店结构项目119任务一 Dreamweaver内置行为的网页特效任务二 使用JavaScript制作网页以实现互动 JavaScript是一种基于对象和事件驱动,并具有相对安全性的客户端脚本语言,通过使用它控制网页中的各种元素,实现各种动态网页特效,达到美化页面的效果。例如我们浏
2、览网页时经常看到的导航菜单、浮动的广告窗口、随着鼠标位置的变化而变换的图片、单击一个按钮时弹出的提示框等,在网页设计中都可以使用JavaScript来实现这些效果。本项目将带领大家学会如何使用JavaScript制作动态效果来美化电子商务网页,达到自己喜欢的效果。项目介绍Contents目录任务分析1相关知识2任务实施3 任务一任务一 Dreamweaver内置内置行为的网页特效行为的网页特效任务分析1 通过使用一些内置行为通过使用一些内置行为,可以简单有效地制作可以简单有效地制作出一些动态效果。我们在淘宝上看到过很多商品出一些动态效果。我们在淘宝上看到过很多商品展示图片在鼠标经过时能显示商品
3、的详图，在本展示图片在鼠标经过时能显示商品的详图，在本任务中我们将学习通过任务中我们将学习通过DreamweaverDreamweaver内置行为来内置行为来完成我们鼠标经过图层的显示与隐藏，并掌握用完成我们鼠标经过图层的显示与隐藏，并掌握用内置行为制作网页特效。内置行为制作网页特效。03040201事件行为使用Dreamweaver 的内置行为动作相关知识2 1.行为行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。行为是由事件和动作构成。例如，当用户把鼠标移动至对象上（称：事件），这个对象会发生预定义的变化（称：动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释
4、译来执行动作。一个事件也可以触发许多动作，你可以定义它们执行的顺序。在dreamweaver中有多种事件与动作，如图9-1所示，其中英文字母的是事件，中文的是动作。相关知识03040201 1.行为相关知识03040201图9-1 行为面板2.事件onload（装入一个文档）：当浏览器完成装入一个窗口或一个帧集合中所有的帧时，产生该事件。onunload（退出一个文档）：当Web页面退出时引发该事件。onsubmit（提交一个表单对象）：在完成信息输入，准备将信息提交给服务器处理时发生该事件。onReset（重置一个表单对象）：当一个表单对象被提交以及被重置时，触发该事件。onmousedow
5、n（按下鼠标）：当按下鼠标上一个键时，发生该事件。onmousemove（鼠标移动）：鼠标移动的时候发生该事件。onmouseover（鼠标悬停）：鼠标悬停在一个界面对象时发生该事件。相关知识030402012.事件onmouseout（鼠标滑出界面对象）：当鼠标滑出一个界面对象时，发生该事件。onmouseup（释放鼠标上一个键）：释放鼠标上一个键时发生该事件。onclick（单击一个对象）：当用户单击鼠标按钮时，产生该事件。onfocus（获得焦点）：当表单对象中的文本输入框对象、文本输入区对象或者选择框对象获得焦点时，引发该事件。可通过用鼠标单击或用键盘的Tab键使一个对象得到焦点。on
6、blur（失去焦点）：当表单对象中的文本输入框对象、文本输入区对象或者选择框对象不再拥有焦点时，引发该事件。onchange（改变事件）：当利用文本框或多行文本框输入字符值改变时发生该事件，同时当在列表项中一个选项状态改变后也会引发该事件。onselect（选中事件）：当文本框或多行文本框对象中的文字被加亮后，引发该事件相关知识030402013.动作（1）调用JavaScript：这个行为允许你设置当某些事件被触发时，调用相应的JavaScript脚本，以实现相应的动作。（2）改变属性：这个行为允许你动态地改变对象属性，比如图像的大小、层的背景色等等。需要注意的是，这个行为的设置取决于浏览器
7、的支持。（3）检查浏览器：不同浏览器的支持能力有一定的差异，利用这个行为，我们可以检查浏览器的版本，以跳转到不同的页面。（4）检查插件：有时候我们制作的页面需要某些插件的支持，比如使用Flash制作的网页，所以有必要对用户浏览器的插件进行检查，看看它是否安装了指定的插件。应用这个行为就可以实现。（5）跳转到URL：你可以制定当前浏览器窗口或者指定的框架窗口载入指定的页面。（6）跳转菜单：该行为主要是用于编辑跳转菜单。跳转菜单是文档中的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。相关知识030402013.动作（7）打开浏览器窗口：使用“打开浏览器窗口”动作在一个新的窗口中打开 U
8、RL。您可以指定新窗口的属性。（8）弹出消息：在页面上显示一个信息对话框，给用户一个提示信息。使用此动作可以提供信息，而不能为用户提供选择。（9）预先载入图像：“预先载入图像”动作会使图像载入浏览器缓存中。这样可防止当图像应该出现时由于下载而导致延迟。(10)设置框架文本：该行为允许您动态设置框架的文本。（11）显示隐藏元素：显示、隐藏或恢复一个或多个元素的默认可见性。此动作用于在用户与页进行交互时显示信息。（12）交换图像:通过更改 img 标签的 src 属性将一个图像和另一个图像进行交换。（13）检查表单：检查指定文本域的内容以确保用户输入了正确的数据类型。相关知识030402014.使
9、用Dreamweaver 的内置行为Dreamweaver的行为是将内置的JavaScript代码放置在文档中,以实现Web页的动态效果。“行为”控制面板是在窗口菜单下,选择“行为”项目显示出来的。（1）在编辑文档窗口中选择一个元素,例如一个图像或一个链接,也可选择整个文档的内容,只要点击文档窗口左下侧的标签选择器的标签。（2）选择“窗口”“行为”命令,如图92所示。启用“行为控制面板”,如图93所示。相关知识03040201相关知识 图93 行为面板图92 窗口菜单栏 4.使用Dreamweaver 的内置行为（3）单击“添加行为”按钮,从弹出的菜单中选择“弹出信息”,如图94所示,在弹出的
10、对话框中设置该动作的参数,如图105所示。会弹出包含全部事件的事件列表,如图96所示,用户可根据需要选择相应的事件。这里我们选择“onClick”事件。（4）按F12键浏览网页效果,点击相应的元素,弹出一个对话框,如图99所示。相关知识03040201相关知识图94 设置内容项 图95 弹出信息设置图96 事件设置图97 效果3任务实施打开站点下的打开站点下的index.htmlindex.html文件，在文件，在BODYBODY的状态下选择菜单栏的状态下选择菜单栏“插入插入”“DIV”,”“DIV”,新建一个层。新建一个层。在弹出的插入在弹出的插入DIVDIV对话框中单击对话框中单击“新建新
11、建CSSCSS规则规则”按钮。按钮。12图9-8 新建规则对话框3在新建规则对话框的选择器名称中输入新在新建规则对话框的选择器名称中输入新建类名建类名“hddiv”,“hddiv”,单击单击“确定确定”按钮，按钮，如图如图9-89-8所示。所示。3任务实施在在.hddiv.hddiv的的CSSCSS规则定义对话框中，选择方框分类，设置宽度规则定义对话框中，选择方框分类，设置宽度widthwidth为为560560，高度为，高度为400400；在定位分类中设置位置；在定位分类中设置位置positionposition为为absolute,absolute,设置设置Z-indexZ-index为为
12、9999，设置，设置placementplacement组中组中toptop为为346px346px，rightright为为160160，设置在背景分类的背景颜色，设置在背景分类的背景颜色background-background-colorcolor为为red(red(背景颜色这里的设置是测试和观察用的，在后期在层中添加图片之后背景颜色这里的设置是测试和观察用的，在后期在层中添加图片之后可能删除背景颜色的设置可能删除背景颜色的设置)单击单击“确定确定”按钮返回按钮返回dreamweaverdreamweaver主界面，如图主界面，如图9-99-9所所示。示。4图9-9 规则定义对话框3任务
13、实施在网页里我们就一个新层出现在图层之上，按在网页里我们就一个新层出现在图层之上，按F12F12在浏览器预览，在浏览器预览，使新层能覆盖使新层能覆盖“商品详情商品详情”的内容，如图的内容，如图9-109-10所示。所示。5图9-10 新建层效果3任务实施删除层中多余的文字，单击菜单栏删除层中多余的文字，单击菜单栏“插入插入”“image”,”“image”,在对在对话框中选择商品一样的大图，预览如图话框中选择商品一样的大图，预览如图9-119-11所示。所示。6图9-11 插入图像3任务实施在状态栏上单击在状态栏上单击DIVDIV层，在属性面板中层，在属性面板中CSS-PCSS-P元素中输入层
14、名称元素中输入层名称newdivnewdiv，在可见性中选择在可见性中选择hiddenhidden，删除背景颜色的，删除背景颜色的redred，如图，如图9-129-12所示。按所示。按F12F12在浏览器预览时新建层就不会显示，下面再进行行为设置当鼠标在商在浏览器预览时新建层就不会显示，下面再进行行为设置当鼠标在商品图片上时就显示新建层，当鼠标移出商品图片时就隐藏。品图片上时就显示新建层，当鼠标移出商品图片时就隐藏。7图10-12 属性面板3任务实施单击商品图片，在行为面板中选择单击商品图片，在行为面板中选择 下面的下面的“显示显示-隐藏元素隐藏元素”，如图，如图9-139-13所所示。示。
15、8图9-13 行为面板3任务实施在弹出的显示在弹出的显示-隐藏对话框中选择新建层隐藏对话框中选择新建层“div newdiv”“div newdiv”，单击显示，再单击，单击显示，再单击“确定确定”按钮，如图按钮，如图9-149-14所示。所示。9图9-14 显示-隐藏元素对话框3任务实施返回行为面板设置事件为返回行为面板设置事件为“onMouseOver”“onMouseOver”，使鼠标在图片上时就，使鼠标在图片上时就显示新建层，如图显示新建层，如图9-159-15所示。所示。10图9-15 事件设置3任务实施根据上面的方法在商品图片上再设置根据上面的方法在商品图片上再设置“onMouse
16、Out”“onMouseOut”事件，动事件，动作是隐藏新建层，如图作是隐藏新建层，如图9-169-16所示，完成操作再按所示，完成操作再按F12F12在浏览器中在浏览器中浏览行为效果。浏览行为效果。11图9-16 完成图 小思考 如何用JavaScript内置行为创建跳转菜单?提示:1.在文档中插入表单“选择(列表/菜单)”对象。2.在“行为”面板添加“跳转菜单”对话框。3.根据需要选择相应的事件。Contents目录任务分析1任务实施3任务二任务二 使用使用JavaScript制作网页以制作网页以实现互动实现互动相关知识2在本任务中我们将学习用JavaScript制作网页,通过JavaSc
17、ript实现数量增减与统计反馈，与消费者实现互动。任务分析1 了解JavaScriptJavaScript的基本结构相关知识2了解JavaScript相关知识2JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言。如今随着电子商务网站的发展,客户要求越来越高,JavaScript在网页制作方面被广泛应用起来。JavaScript是 Netscape公司开发的一种脚本语言(Scripting Language),或称为描述语言。JavaScript的出现使得网页和用户之间有了一种实时性、动态性、交互性的关系,可使网页包括更多活跃的元素和更加精彩的内容。了解JavaScript相
18、关知识2JavaScript具有以下一些基本特点:(1)解释性。JavaScript不同于一些编译性的程序语言,它是一种解释性的程序语言,它的源代码不需要经过编译,而直接在浏览器运行时被解释。(2)动态性。JavaScript是动态的,它可以直接对用户或客户端输入做出响应,无须经过Web服务程序。(3)跨平台性。JavaScript依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并有支持JavaScript的浏览器就可以执行。(4)安全性。JavaScript是一种安全性语言,只能通过浏览器实现信息浏览或动态交互,有效地防止丢失数据。JavaScript的基本结构相关知识2Java
19、Script程序是根据HTML文件中出现的顺序来逐行执行。整个HTML文件中都可以嵌入JavaScript,但最好放在HTML文件中的和之间。以下是一个JavaScript应用的实例:在网页上插入一幅图片,给图片设置的行为是:当鼠标指向图片时,弹出信息框,即“onMouseOver”事件,引发弹出信息框的动作,如图101所示。4321文字滚动特效.漂浮广告特效.制作日期特效.实现鼠标经过图片时的变换相关知识2知识链接 JavaScript常用语法:(1)创建脚本块语法如下:(2)输出到浏览器语法如下:document.write(Hello);(3)定义变量语法如下:Var i;或var i=
20、字符串;(4)定义函数语法如下:function函数名(函数值)内容(5)页面跳转语法如下:window.location=URL地址;(6)语句块语法如下:if(条件成立)执行语句;else 执行语句);3任务实施打开站点下的打开站点下的index.htmlindex.html文件，在表单数字后面修改表格。先单击属文件，在表单数字后面修改表格。先单击属性面板性面板“拆分单元格为行或为列拆分单元格为行或为列”按钮拆分为两列，调整列的位置，按钮拆分为两列，调整列的位置，再将后面的单元拆分为两行，如图再将后面的单元拆分为两行，如图9-189-18所示。所示。1图9-18 拆分图3任务实施在拆分单元
21、格的第一行中选择菜单栏在拆分单元格的第一行中选择菜单栏“插入插入”“”“表单表单”“”“按钮按钮”，插入按钮后在属性面板设置按钮的插入按钮后在属性面板设置按钮的valuevalue值为值为“+”“+”，表示添加命令，表示添加命令，如图如图10-1810-18所示。所示。2图9-19 属性面板3任务实施在拆分单元格的第二列，按上面的方法再插入一个在拆分单元格的第二列，按上面的方法再插入一个valuevalue值为值为“-”“-”的的按钮，如图按钮，如图10-2010-20所示。所示。3图9-20 添加按钮图3任务实施单击单击CSSCSS设计器面板的选择器前的设计器面板的选择器前的“+”“+”，添
22、加一个名为，添加一个名为.btncss.btncss的的CSSCSS类，设置类，设置widthwidth为为2424，heightheight为为1818，边框中，边框中widthwidth为为1px1px，stylestyle为为solidsolid，colorcolor为为#9a9a9a#9a9a9a，如图，如图9-219-21所示。所示。4图9-21 CSS设计器面板3任务实施单击第一个单击第一个“+”“+”按钮，在属性面板的按钮，在属性面板的classclass中选择新建的中选择新建的.btncss.btncss类，类，将新建的将新建的.btncss.btncss应用到按钮上，如图应用
23、到按钮上，如图9-229-22所示。所示。5图9-22 属性面板3任务实施按上面的方法将按上面的方法将CSSCSS再应用到第二个按钮，再调整新增第一行与第二再应用到第二个按钮，再调整新增第一行与第二行单元格属性面中垂直对齐方式，使两个按钮能贴合在一起，如图行单元格属性面中垂直对齐方式，使两个按钮能贴合在一起，如图9-9-2323所示。所示。6图9-23 效果图3任务实施单击单击“代码代码”视图，进入视图，进入JavaScriptJavaScript编写。编写。78在在与与之间输入如下之间输入如下JavaScriptJavaScript代码代码function changenum(num)fun
24、ction changenum(num)var ch=document.getElementById(number);var ch=document.getElementById(number);ch.value=parseInt(ch.value)+num;ch.value=parseInt(ch.value)+num;if(ch.value1)if(ch.value1)alert(alert(数量不能少于数量不能少于1);1);ch.value=1;ch.value=1;提示：dreamweaver提供代码提示，如果提示第一个内容是您需要的代码直接按Enter可将内容输入到网页中，也可以用
25、简写快速定位语句后按Enter填充。3任务实施8在在“+”“+”号按钮的定义标签后面加上号按钮的定义标签后面加上onClick=changenum(1)onClick=changenum(1)，在，在“-”“-”号定义标签后面加上号定义标签后面加上onClick=changenum(-1)onClick=changenum(-1)，完成数量的增加与减少操作。，完成数量的增加与减少操作。input name=button2 type=button class=btncss id=button2 value=+onClick=changenum(1)input name=button3 type=
26、button class=btncss id=button3 value=-onClick=changenum(-1)（1010）在前一个）在前一个JavaScriptJavaScript的后面加一个新函数用于购物统计。的后面加一个新函数用于购物统计。function sumcm()function sumcm()var nb=document.getElementById(number).value;var nb=document.getElementById(number).value;var ct=parseInt(nb)var ct=parseInt(nb)*199-parseInt(
27、nb)199-parseInt(nb)*10;10;alert(alert(你选择的数量是：你选择的数量是：+nb+nb+您一共要支付：您一共要支付：+ct+ct+元元););本项目通过三个任务进行学习,总结如下:(1)Dreamweaver 的内置行为:掌握使用Dreamweaver的一些内置行为进行美化网页,主要应用于网页制作的信息交互,是网页设计必不可少的部分。(2)JavaScript制作网页特效:文字滚动、浮动广告,这些应用是电子商务网站中非常流行的元素。在Dreamweaver的环境下编辑,可以减少初学者在代码编写方面的困难,加深对基本语法的理解,通过简单的操作设计出优美的动态效果。经验交流:同学们将学习过程中的疑难问题记录下来,和大家交流一下吧。项目总结
