《电子商务网页设计（第二版）》 课件项目九_第1页
《电子商务网页设计（第二版）》 课件项目九_第2页
《电子商务网页设计（第二版）》 课件项目九_第3页
《电子商务网页设计（第二版）》 课件项目九_第4页
《电子商务网页设计（第二版）》 课件项目九_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件Dreamweaver20203网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8

使用JavaScript制作动态效果9设计与制作电子商务网店结构项目11使用JavaScript制作动态效果9任务一Dreamweaver内置行为的网页特效任务二使用JavaScript制作网页以实现互动

JavaScript是一种基于对象和事件驱动,并具有相对安全性的客户端脚本语言,通过使用它控制网页中的各种元素,实现各种动态网页特效,达到美化页面的效果。例如我们浏览网页时经常看到的导航菜单、浮动的广告窗口、随着鼠标位置的变化而变换的图片、单击一个按钮时弹出的提示框等,在网页设计中都可以使用JavaScript来实现这些效果。

本项目将带领大家学会如何使用JavaScript制作动态效果来美化电子商务网页,达到自己喜欢的效果。项目介绍Contents目录任务分析1相关知识2任务实施3任务一

Dreamweaver内置行为的网页特效任务分析1

通过使用一些内置行为,可以简单有效地制作出一些动态效果。我们在淘宝上看到过很多商品展示图片在鼠标经过时能显示商品的详图，在本任务中我们将学习通过Dreamweaver内置行为来完成我们鼠标经过图层的显示与隐藏，并掌握用内置行为制作网页特效。03040201事件行为使用Dreamweaver的内置行为动作相关知识2

1.行为行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。行为是由事件和动作构成。例如，当用户把鼠标移动至对象上（称：事件），这个对象会发生预定义的变化（称：动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。一个事件也可以触发许多动作，你可以定义它们执行的顺序。在dreamweaver中有多种事件与动作，如图9-1所示，其中英文字母的是事件，中文的是动作。相关知识03040201

1.行为相关知识03040201图9-1行为面板2.事件onload（装入一个文档）：当浏览器完成装入一个窗口或一个帧集合中所有的帧时，产生该事件。onunload（退出一个文档）：当Web页面退出时引发该事件。onsubmit（提交一个表单对象）：在完成信息输入，准备将信息提交给服务器处理时发生该事件。onReset（重置一个表单对象）：当一个表单对象被提交以及被重置时，触发该事件。onmousedown（按下鼠标）：当按下鼠标上一个键时，发生该事件。onmousemove（鼠标移动）：鼠标移动的时候发生该事件。onmouseover（鼠标悬停）：鼠标悬停在一个界面对象时发生该事件。相关知识030402012.事件onmouseout（鼠标滑出界面对象）：当鼠标滑出一个界面对象时，发生该事件。onmouseup（释放鼠标上一个键）：释放鼠标上一个键时发生该事件。onclick（单击一个对象）：当用户单击鼠标按钮时，产生该事件。onfocus（获得焦点）：当表单对象中的文本输入框对象、文本输入区对象或者选择框对象获得焦点时，引发该事件。可通过用鼠标单击或用键盘的Tab键使一个对象得到焦点。onblur（失去焦点）：当表单对象中的文本输入框对象、文本输入区对象或者选择框对象不再拥有焦点时，引发该事件。onchange（改变事件）：当利用文本框或多行文本框输入字符值改变时发生该事件，同时当在列表项中一个选项状态改变后也会引发该事件。onselect（选中事件）：当文本框或多行文本框对象中的文字被加亮后，引发该事件相关知识030402013.动作（1）调用JavaScript：这个行为允许你设置当某些事件被触发时，调用相应的JavaScript脚本，以实现相应的动作。（2）改变属性：这个行为允许你动态地改变对象属性，比如图像的大小、层的背景色等等。需要注意的是，这个行为的设置取决于浏览器的支持。（3）检查浏览器：不同浏览器的支持能力有一定的差异，利用这个行为，我们可以检查浏览器的版本，以跳转到不同的页面。（4）检查插件：有时候我们制作的页面需要某些插件的支持，比如使用Flash制作的网页，所以有必要对用户浏览器的插件进行检查，看看它是否安装了指定的插件。应用这个行为就可以实现。（5）跳转到URL：你可以制定当前浏览器窗口或者指定的框架窗口载入指定的页面。（6）跳转菜单：该行为主要是用于编辑跳转菜单。跳转菜单是文档中的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。相关知识030402013.动作（7）打开浏览器窗口：使用“打开浏览器窗口”动作在一个新的窗口中打开URL。您可以指定新窗口的属性。（8）弹出消息：在页面上显示一个信息对话框，给用户一个提示信息。使用此动作可以提供信息，而不能为用户提供选择。（9）预先载入图像：“预先载入图像”动作会使图像载入浏览器缓存中。这样可防止当图像应该出现时由于下载而导致延迟。(10)设置框架文本：该行为允许您动态设置框架的文本。（11）显示－隐藏元素：显示、隐藏或恢复一个或多个元素的默认可见性。此动作用于在用户与页进行交互时显示信息。（12）交换图像:通过更改img标签的src属性将一个图像和另一个图像进行交换。（13）检查表单：检查指定文本域的内容以确保用户输入了正确的数据类型。相关知识030402014.使用Dreamweaver的内置行为Dreamweaver的行为是将内置的JavaScript代码放置在文档中,以实现Web页的动态效果。“行为”控制面板是在窗口菜单下,选择“行为”项目显示出来的。（1）在编辑文档窗口中选择一个元素,例如一个图像或一个链接,也可选择整个文档的内容,只要点击文档窗口左下侧的标签选择器的<body>标签。（2）选择“窗口”→“行为”命令,如图9—2所示。启用“行为控制面板”,如图9—3所示。相关知识03040201相关知识图9—3行为面板图9—2窗口菜单栏

4.使用Dreamweaver的内置行为（3）单击“添加行为”按钮,从弹出的菜单中选择“弹出信息”,如图9—4所示,在弹出的对话框中设置该动作的参数,如图10—5所示。会弹出包含全部事件的事件列表,如图9—6所示,用户可根据需要选择相应的事件。这里我们选择“onClick”事件。（4）按F12键浏览网页效果,点击相应的元素,弹出一个对话框,如图9—9所示。相关知识03040201相关知识图9—4设置内容项

图9—5弹出信息设置图9—6事件设置图9—7效果3任务实施打开站点下的index.html文件，在BODY的状态下选择菜单栏“插入”→“DIV”,新建一个层。在弹出的插入DIV对话框中单击“新建CSS规则”按钮。12图9-8新建规则对话框3在新建规则对话框的选择器名称中输入新建类名“hddiv”,单击“确定”按钮，如图9-8所示。3任务实施在.hddiv的CSS规则定义对话框中，选择方框分类，设置宽度width为560，高度为400；在定位分类中设置位置position为absolute,设置Z-index为99，设置placement组中top为346px，right为160，设置在背景分类的背景颜色background-color为red(背景颜色这里的设置是测试和观察用的，在后期在层中添加图片之后可能删除背景颜色的设置)单击“确定”按钮返回dreamweaver主界面，如图9-9所示。4图9-9规则定义对话框3任务实施在网页里我们就一个新层出现在图层之上，按F12在浏览器预览，使新层能覆盖“商品详情”的内容，如图9-10所示。5图9-10新建层效果3任务实施删除层中多余的文字，单击菜单栏“插入”→“image”,在对话框中选择商品一样的大图，预览如图9-11所示。6图9-11插入图像3任务实施在状态栏上单击DIV层，在属性面板中CSS-P元素中输入层名称newdiv，在可见性中选择hidden，删除背景颜色的red，如图9-12所示。按F12在浏览器预览时新建层就不会显示，下面再进行行为设置当鼠标在商品图片上时就显示新建层，当鼠标移出商品图片时就隐藏。7图10-12属性面板3任务实施单击商品图片，在行为面板中选择下面的“显示-隐藏元素”，如图9-13所示。8图9-13行为面板3任务实施在弹出的显示-隐藏对话框中选择新建层“divnewdiv”，单击显示，再单击“确定”按钮，如图9-14所示。9图9-14显示-隐藏元素对话框3任务实施返回行为面板设置事件为“onMouseOver”，使鼠标在图片上时就显示新建层，如图9-15所示。10图9-15事件设置3任务实施根据上面的方法在商品图片上再设置“onMouseOut”事件，动作是隐藏新建层，如图9-16所示，完成操作再按F12在浏览器中浏览行为效果。11图9-16完成图

小思考如何用JavaScript内置行为创建跳转菜单?提示:1.在文档中插入表单“选择(列表/菜单)”对象。2.在“行为”面板添加“跳转菜单”对话框。3.根据需要选择相应的事件。Contents目录任务分析1任务实施3任务二使用JavaScript制作网页以实现互动相关知识2在本任务中我们将学习用JavaScript制作网页,通过JavaScript实现数量增减与统计反馈，与消费者实现互动。任务分析1

了解JavaScriptJavaScript的基本结构相关知识2了解JavaScript相关知识2JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言。如今随着电子商务网站的发展,客户要求越来越高,JavaScript在网页制作方面被广泛应用起来。JavaScript是Netscape公司开发的一种脚本语言(ScriptingLanguage),或称为描述语言。JavaScript的出现使得网页和用户之间有了一种实时性、动态性、交互性的关系,可使网页包括更多活跃的元素和更加精彩的内容。了解JavaScript相关知识2JavaScript具有以下一些基本特点:(1)解释性。JavaScript不同于一些编译性的程序语言,它是一种解释性的程序语言,它的源代码不需要经过编译,而直接在浏览器运行时被解释。(2)动态性。JavaScript是动态的,它可以直接对用户或客户端输入做出响应,无须经过Web服务程序。(3)跨平台性。JavaScript依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并有支持JavaScript的浏览器就可以执行。(4)安全性。JavaScript是一种安全性语言,只能通过浏览器实现信息浏览或动态交互,有效地防止丢失数据。JavaScript的基本结构相关知识2JavaScript程序是根据HTML文件中出现的顺序来逐行执行。整个HTML文件中都可以嵌入JavaScript,但最好放在HTML文件中的<head>和</head>之间。以下是一个JavaScript应用的实例:在网页上插入一幅图片,给图片设置的行为是:当鼠标指向图片时,弹出信息框,即“onMouseOver”事件,引发弹出信息框的动作,如图10—1所示。4321文字滚动特效.漂浮广告特效.制作日期特效.实现鼠标经过图片时的变换相关知识2知识链接

JavaScript常用语法:(1)创建脚本块语法如下:

<scriptlanguage="JavaScript"></script>(2)输出到浏览器语法如下:document.write("<strong>Hello</strong>");(3)定义变量语法如下:Vari;或vari="字符串";(4)定义函数语法如下:<scriptlanguage=”JavaScript”>function函数名(函数值){内容}</script>(5)页面跳转语法如下:<scriptlanguage="JavaScript">window.location="URL地址";</script>(6)语句块语法如下:if(条件成立){执行语句;}else{执行语句);}3任务实施打开站点下的index.html文件，在表单数字后面修改表格。先单击属性面板“拆分单元格为行或为列”按钮拆分为两列，调整列的位置，再将后面的单元拆分为两行，如图9-18所示。1图9-18拆分图3任务实施在拆分单元格的第一行中选择菜单栏“插入”→“表单”→“按钮”，插入按钮后在属性面板设置按钮的value值为“+”，表示添加命令，如图10-18所示。2图9-19属性面板3任务实施在拆分单元格的第二列，按上面的方法再插入一个value值为“-”的按钮，如图10-20所示。3图9-20添加按钮图3任务实施单击CSS设计器面板的选择器前的“+”，添加一个名为.btncss的CSS类，设置width为24，height为18，边框中width为1px，style为solid，color为#9a9a9a，如图9-21所示。4图9-21CSS设计器面板3任务实施单击第一个“+”按钮，在属性面板的class中选择新建的.btncss类，将新建的.btncss应用到按钮上，如图9-22所示。5图9-22属性面板3任务实施按上面的方法将CSS再应用到第二个按钮，再调整新增第一行与第二行单元格属性面中垂直对齐方式，使两个按钮能贴合在一起，如图9-23所示。6图9-23效果图3任务实施单击“代码”视图，进入JavaScript编写。78在<head>与</head>之间输入如下JavaScript代码<scripttype="text/javascript"> functionchangenum(num) { varch=document.getElementById("number"); ch.value=parseInt(ch.value)+num; if(ch.value<1) { alert("数量不能少于1"); ch.value=1; } } </script>提示：dreamweaver提供代码提示，如果提示第一个内容是您需要的代码直接按Enter可将内容输入到网页中，也可以用简写快速定位语句后按Enter填充。3任务实施8在“+”号按钮的定义标签后面加上onClick

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论