电子商务网站建设第6章.pptx
- 文档编号:30782983
- 上传时间:2023-09-07
- 格式:PPTX
- 页数:70
- 大小:1.04MB
电子商务网站建设第6章.pptx
《电子商务网站建设第6章.pptx》由会员分享,可在线阅读,更多相关《电子商务网站建设第6章.pptx(70页珍藏版)》请在冰豆网上搜索。
第6章动态网页技术,本课要点具体要求本课导读上机练习,本课要点,应用表单使用行为插入媒体对象滚动特效,具体要求,掌握表单的创建及表单元素的使用熟悉行为的设置方法掌握动画、声音和视频的添加了解标签及属性参数,本课导读,动态网页技术主要包含表单的提交、行为控制、Flash动画的插入、影片的插入、声音的添加、滚动效果的制作等,合理地使用这些动态元素,可以为网页添加丰富的动态效果。
6.1应用表单,表单的作用是从访问者那里获取信息验证。
访问者可以在文本域、列表框、复选框以及单选按钮等表单元素中输入信息,然后提交这些信息到服务器进行处理。
6.1应用表单,6.1.1知识讲解6.1.2典型案例制作“在线报名”页面,6.1.1知识讲解,本节将学习表单的创建及表单元素的属性设置等知识。
6.1.1知识讲解,1.表单2.添加文本域3.添加复选框4.单选按钮及单选按钮组5.添加列表/菜单6.添加跳转菜单7.添加文件域8.添加按钮,1.表单,表单是放置表单元素的区域,表单内的元素通过用户单击【提交】按钮,将所有填写的信息提交给服务器进行处理。
创建表单的具体操作如下:
(1)在打开的文档中,将鼠标光标定位在要插入表单的位置。
(2)选择【插入记录】【表单】【表单】命令,或在插入栏的【表单】选项卡中单击按钮,在指定位置添加一个红色的虚线框,即表单。
2.添加文本域,文本域用于创建一个包含单行或多行文本的区域。
用户可以创建一个隐藏用户输入文本的密码文本域。
添加文本域的具体操作如下:
(1)将鼠标光标定位在表单中要添加文本域的位置。
(2)在插入栏的【表单】选项卡中单击或按钮,即可在指定位置添加文本域。
3.添加复选框,允许用户从一组选项中同时选择多个选项,这些选项就是复选框,选中时显示为。
添加复选框的具体操作如下:
(1)将鼠标光标定位在要添加复选框的位置。
(2)在插入栏的【表单】选项卡中单击按钮,即可在指定位置添加复选框。
4.单选按钮及单选按钮组,单选按钮是要求用户只能从一组选项中选择一个选项的表单元素。
单选按钮通常成组地使用,在同一个组中的所有单选按钮必须具有相同的名称。
4.单选按钮及单选按钮组,添加单选按钮的具体操作如下:
(1)将鼠标光标定位在要添加单选按钮的位置。
(2)在插入栏的【表单】选项卡中单击按钮,在指定位置添加单选按钮。
若单击按钮,可打开【单选按钮组】对话框,添加单选按钮组。
(3)设置完成后,单击【确定】按钮。
5.添加列表/菜单,列表/菜单表单元素即是在一个列表中显示选项值,用户可以从该列表中选择多个选项。
当页面空间有限,又需要显示许多选项时,就使用菜单,菜单中只显示一个选项,其他的选项被隐藏。
列表/菜单的添加方法如下:
(1)将鼠标光标定位在表单中要添加列表/菜单的位置。
(2)在插入栏的【表单】选项卡中单击按钮,即可在指定位置添加列表/菜单。
6.添加跳转菜单,跳转菜单类似于弹出菜单,可给菜单中的选项添加URL链接,如果不指定链接,则与列表/菜单的属性相同。
添加跳转菜单的具体操作如下:
(1)将鼠标光标定位在要添加跳转菜单的位置。
(2)在插入栏的【表单】选项卡中单击按钮,打开【插入跳转菜单】对话框。
(3)设置完成后单击【确定】按钮。
7.添加文件域,使用文件域表单元素,用户可以选择本地计算机上的文件,并将该文件上传到服务器。
文件域的外观与文本域类似,只是文件域多一个【浏览】按钮。
在文件域的文本框中可以手动输入要上传的文件路径,也可以单击【浏览】按钮指定上传文件。
添加文件域的具体操作如下:
(1)将鼠标光标定位在要添加文件域的位置。
(2)在插入栏的【表单】选项卡中单击按钮,插入文件域。
8.添加按钮,按钮有两种:
一种是图像域,另一种是普通按钮。
图像域是用图像作为按钮图标,用于提交或重置表单信息等,与普通按钮的功能相同。
在插入栏的【表单】选项卡中单击按钮,打开【选择图像源文件】对话框,从计算机中找出要作为按钮图标的图像,单击【确定】按钮,插入的图像即为图像域。
在插入栏的【表单】选项卡中单击按钮,在鼠标光标处可插入普通按钮。
6.1.2典型案例制作“在线报名”页面,案例目标本案例将制作一份“在线报名”页面,主要介绍表单的创建以及表单元素的添加与设置等,完成的效果如下图所示。
6.1.2典型案例制作“在线报名”页面,6.1.2典型案例制作“在线报名”页面,操作思路:
(1)在ls6站点中建立“baoming.html”文档。
(2)插入2行1列的表格,添加表格标题。
(3)在第2行添加表单,并在表单中添加一个20行3列的表格。
(4)依次在单元格中添加报名表内容及对应的表单元素。
6.1.2典型案例制作“在线报名”页面,案例小结本案例制作了一份在线报名的网页,主要介绍了表单的创建、文本域、单选按钮、复选框、列表/菜单及按钮的添加与属性设置等内容。
在制作表单时,可以通过CSS规则定义中的【方框】类别来指定表单中的文本域和按钮等元素的宽度和高度。
6.2使用行为,使用行为可将JavaScript代码嵌入到文档中,使访问者可以与Web页进行交互,从而以多种方式更改页面或执行任务。
行为由事件和该事件触发的动作两部分组成。
6.2使用行为,6.2.1知识讲解6.2.2典型案例检测报名表,6.2.1知识讲解,本节将介绍【行为】面板和添加行为的方法。
6.2.1知识讲解,1.认识【行为】面板2.添加行为,1.认识【行为】面板,按【Shift+F4】组合键打开【行为】面板,如下图所示。
通过【行为】面板,将行为添加到页面元素中,即可实现相应的操作,已添加到当前文档的行为显示在行为列表中,并按字母顺序排列。
2.添加行为,行为可以添加到整个文档,也可以添加到链接、图像、表单或其他HTML元素中,但不能将行为添加到纯文本上,因为和等标签不能在浏览器中生成事件。
如果要给文本指定行为,则需要先给该文本指定一个链接,即创建空链接。
6.2.2典型案例检测报名表,案例目标本案例将对报名表进行检测设置,主要介绍行为中的表单检测动作及行为的添加和使用方法,完成后的效果如下图所示。
6.2.2典型案例检测报名表,6.2.2典型案例检测报名表,操作思路:
(1)将“baoming.html”文档另存为“baoming1.html”文档。
(2)选取整个表单,在【行为】面板中设置各个文本域是否为必填项、文本内容是否必须为数字等。
(3)保存文档,在浏览器中填写表单并提交。
6.2.2典型案例检测报名表,案例小结本例对报名表进行了检测设置,主要介绍了检测表单行为的添加方法。
行为的添加比较简单,重要的是对各个行为动作的设置。
本例中的“检测表单”行为用于检测文本的输入是否正确,如果出错将弹出提示信息,以便访问者正确填写。
6.3插入媒体对象,媒体对象即含有图像和声音的对象。
在Dreamweaver中可以将Flash动画与Shockwave影片、QUICKTIME、AVI、JavaApplet、ActiveX控件,以及各种格式的音频文件嵌入到网页中。
6.3插入媒体对象,6.3.1知识讲解6.3.2典型案例在网页中插入Flash动画和背景音乐,6.3.1知识讲解,本节将学习Flash动画与元素的插入,以及视频与声音文件的嵌入方法。
6.3.1知识讲解,1.插入Flash动画2.嵌入视频3.嵌入声音,1.插入Flash动画,Dreamweaver自带有Flash文本和Flash按钮,可以将其插入到网页中。
除此之外,用户还可以插入Flash动画,下面分别进行讲解。
单击插入栏【常用】选项卡中按钮旁的下拉按钮,在弹出的【媒体】下拉菜单中选择按钮对应的命令,打开【插入Flash文本】对话框,如下图所示。
1.插入Flash动画,1.插入Flash动画,单击插入栏【常用】选项卡中按钮旁的下拉按钮,在弹出的【媒体】下拉菜单中选择按钮对应的命令,打开【插入Flash按钮】对话框,如下图所示。
1.插入Flash动画,1.插入Flash动画,Flash文本与Flash按钮在设计网页时使用比较少,使用较多的是在Flash中制作的按钮和动画。
单击插入栏【常用】选项卡中的按钮,可插入站点中的Flash动画,也可以从【文件】面板中直接拖动动画文件到页面中要插入Flash动画的位置。
2.嵌入视频,各种视频文件都可以添加到网页,但有些视频文件需要相应的插件的支持才能正确显示。
常见的视频文件有Flash视频、Shockwave影片、AVI和MPEG文件等。
视频文件可以通过链接方式嵌入,也可以作为插件嵌入。
Flash视频和Shockwave影片可以分别通过插入栏【常用】选项卡中的【Flash视频】和【Shockwave】按钮直接插入。
3.嵌入声音,嵌入声音的方法有代码法、链接法、插件法和直接插入法4种。
6.3.2典型案例在网页中插入Flash动画和背景音乐,案例目标本案例将在网页中插入Flash动画和背景音乐,完成后的效果如右图所示。
6.3.2典型案例在网页中插入Flash动画和背景音乐,操作思路:
(1)将“index.html”文档另存为“flash.html”文档。
(2)在代码视图中使用标签添加背景音乐,并设置为循环播放。
6.3.2典型案例在网页中插入Flash动画和背景音乐,案例小结本例主要介绍了在代码视图中应用标签添加背景音乐,及插入Flash文件的操作,这里添加背景音乐使用的是代码法。
6.4滚动特效,滚动特效在网页中使用得比较普遍,如新闻滚动或广告语滚动等。
滚动特效是通过设置标签及添加相应的属性参数来完成的。
6.4滚动特效,6.4.1知识讲解6.4.2典型案例制作滚动栏,6.4.1知识讲解,本节将介绍标签及对应的属性参数的应用。
6.4.1知识讲解,1.认识标签2.标签的属性参数,1.认识标签,标签用于制作可移动的文本效果,可以在标签间的任意位置添加,其基本语法结构为:
,在标签间可添加文本、表格、图像、动画、视频和表单等元素。
2.标签的属性参数,标签的属性参数添加在“”中,各属性参数间用空格分隔,其属性参数有大小、对齐方式、移动方式、移动方向、循环次数、速度和延迟方式等。
6.4.2典型案例制作滚动栏,案例目标本案例会将上一案例中的“最新礼品”栏制作成滚动栏,主要介绍标签的使用及属性参数的设置,完成后的效果如下图所示。
6.4.2典型案例制作滚动栏,6.4.2典型案例制作滚动栏,操作思路:
(1)打开文件“flash.html”文档,然后另存为“marq.html”文档。
(2)在代码视图中添加标签。
(3)设置标签属性参数。
6.4.2典型案例制作滚动栏,案例小结本例制作了滚动栏,主要介绍了标签的使用,滚动区的大小设置,循环播放、滚动方式、播放速度、对齐方式设置,以及鼠标对滚动对象的控制等内容。
在制作滚动效果时,如果要水平移动,可以指定“direction”参数的值为“left”或“right”,如果需要走走停停,可以指定“scrolldelay”参数的值。
6.5添加Spry构件,6.5.1知识讲解6.5.2典型案例制作选项卡式个人简历,6.5.1知识讲解,1.插入Spry菜单栏2.插入选项卡式面板3.Spry折叠式4.插入Spry可折叠面板,1.插入Spry菜单栏,在插入Spry构件时应先保存文件,在插入构件后,将在站点中生成名为“SpryAssets”的文件夹,用于存放Spry构件所需的样式表文件和脚本程序。
单击插入栏【Spry】选项卡中的按钮,打开对话框,设置菜单栏的布局方向,单击【确定】按钮,在页面中插入菜单栏,如下图所示。
2.插入选项卡式面板,单击插入栏【Spry】选项卡中的按钮,在文档中插入选项卡式面板,如下图所示。
2.插入选项卡式面板,更改选项卡中的文字内容与格式,与修改单元格中的内容及格式的方法相同,要修改被隐藏的选项卡内容时,将鼠标移至选项卡名称的位置,单击图标,即可将该选项卡设置为当前选项卡,从而可对其进行编辑。
3.Spry折叠式,单击插入栏【Spry】选项卡中的按钮,在文档中插入Spry折叠式,如下图所示。
4.插入Spry可折叠面板,单击插入栏【Spry】选项卡中的按钮,在文档中插入可折叠面板,如下图所示。
6.5.2典型案例制作选项卡式个人简历,案例目标本例通过制作选项卡式个人简历,主要介绍Spry选项卡式面板的插入、属性设置及内容的添加,同时了解Spry构件的基本使用方法,完成后的效果如右图所示。
6.5.2典型案例制作选项卡式个人简历,操作思路:
(1)在站点中新建文档“jl.html”,打开并编辑该文档。
(2)在页面中插入Spry选项卡式面板并设置其属性。
(3)在选项卡相应位置添加内容。
6.5.2典型案例制作选项卡式个人简历,案例小结本例制作了选项卡式简历,主要介绍了Spry构件的插入、属性设置、内容修改以及设置构件对应的CSS样式等。
在修改Spry构件内容的时候,可以将它当成是普通的对象直接更改,修改其外观样式时可以修改外观样式所对应的CSS样式。
6.6上机练习,6.6.1利用Spry折叠式制作简历6.6.2制作“信息反馈”栏目,6.6.1利用Spry折叠式制作简历,下面练习Spry折叠式的使用,如下图所示,主要练习Spry折叠式的属性设置,内容添加及CSS样式的修改。
6.6.1利用Spry折叠式制作简历,操作思路:
新建文档并插入Spry折叠式。
添加项目。
设置项目标题名称,在对应的内容区域插入内容。
设置对应区域的CSS样式。
6.6.2制作“信息反馈”栏目,下面,在“联系我们”页面中增加“信息反馈”栏目,主要练习表单及表单元素的使用,效果如右图所示。
6.6.2制作“信息反馈”栏目,操作思路:
打开“lianxi2.html”文档。
在“联系信息”栏的下方插入表单,并插入9行2列,宽为“100”的表格,设置表格属性。
添加表单元素,在【属性】面板中为每个文本域设置不同的名称。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务 网站 建设