建立旅游电子商务网站实践讲稿.ppt
《建立旅游电子商务网站实践讲稿.ppt》由会员分享,可在线阅读,更多相关《建立旅游电子商务网站实践讲稿.ppt(70页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、建立旅游电子商务网站实践建立旅游电子商务网站实践第一页,讲稿共七十页哦5.1.1超链接概述超链接概述超链接是用准备好的文本、按钮、图像等对象与其他对象建超链接是用准备好的文本、按钮、图像等对象与其他对象建立链接,也就是在立链接,也就是在源端点和目标端点源端点和目标端点之间建立一种链接。之间建立一种链接。源端点是超链接的起始端点,目标端点是链接的对象,也称源端点是超链接的起始端点,目标端点是链接的对象,也称为目标锚。为目标锚。超链接按源端点的链接划分,分为超文本链接和非超文超链接按源端点的链接划分,分为超文本链接和非超文本链接两类本链接两类。超文本链接的源锚文本下方有下划线。非超文本链接是。超文
2、本链接的源锚文本下方有下划线。非超文本链接是用除文本之外的其他对象构建的链接,源锚可以是图像、表格、列表、用除文本之外的其他对象构建的链接,源锚可以是图像、表格、列表、表单、多媒体等对象。表单、多媒体等对象。超链接按目标端点的链接划分,可分为外部链超链接按目标端点的链接划分,可分为外部链接、内部链接、电子邮件链接、局部链接、脚本链接等接、内部链接、电子邮件链接、局部链接、脚本链接等。5.1 超链接及其应用超链接及其应用第二页,讲稿共七十页哦在超链接中,链接路径是通过在超链接中,链接路径是通过URL(统一资源定位符,统一资源定位符,英语英语Uniform Resource Locator的缩写,
3、也被称的缩写,也被称为网页地址,是因特网上标准的资源的地址。为网页地址,是因特网上标准的资源的地址。)来)来确定的。根据使用的协议不同,确定的。根据使用的协议不同,URL的形式也不同,常用的形式的形式也不同,常用的形式有有HTTP、FTP和和File等几种等几种。(1)HTTP开头的开头的URL通常指向通常指向WWW服务器,通常称为网址;服务器,通常称为网址;(2)FTP开头的开头的URL主要用于文件的传递,包括文件的上传和下载;主要用于文件的传递,包括文件的上传和下载;(3)File开头的开头的URL主要访问本地计算机中的文件信息。主要访问本地计算机中的文件信息。在超链接中,在超链接中,使用
4、完整的使用完整的URL地址的链接路径称为绝对路径。地址的链接路径称为绝对路径。绝对路径指明目标端点所在的具体位置。绝对路径指明目标端点所在的具体位置。在超链接中,指明目标在超链接中,指明目标端点与源端点的相对位置关系的路径称为相对路径。端点与源端点的相对位置关系的路径称为相对路径。第三页,讲稿共七十页哦(1)在网页编辑窗口中选中源端点对象,然后选择在网页编辑窗口中选中源端点对象,然后选择【修改】【修改】|【创建链接】创建链接】命令,打开【选择文件】对话框,选中目标端点便可创命令,打开【选择文件】对话框,选中目标端点便可创建链接。建链接。(2)在网页编辑窗口中选中源端点对象后,鼠标右击,在快捷菜
5、单在网页编辑窗口中选中源端点对象后,鼠标右击,在快捷菜单中选择【创建链接】命令,打开【选择文件】对话框,选中目标中选择【创建链接】命令,打开【选择文件】对话框,选中目标端点便可创建链接。端点便可创建链接。(3)在网页编辑窗口中选中源端点对象,然后在属性面板的【链接】文在网页编辑窗口中选中源端点对象,然后在属性面板的【链接】文本框中输入目标端点及路径便可创建超链接。或单击【链接】文本框右本框中输入目标端点及路径便可创建超链接。或单击【链接】文本框右边的按钮,打开【选择文件】对话框,选择目标端点便可创建超链接,边的按钮,打开【选择文件】对话框,选择目标端点便可创建超链接,如图如图5-1所示。所示。
6、5.1.2 创建超链接的方法创建超链接的方法第四页,讲稿共七十页哦图图5-1创建超链接的属性面板创建超链接的属性面板第五页,讲稿共七十页哦电子邮件链接的方式在很多网页中都被广泛地电子邮件链接的方式在很多网页中都被广泛地采用,当浏览者单击该链接时,系统会启动电子邮采用,当浏览者单击该链接时,系统会启动电子邮件发送程序(如件发送程序(如Outlook Express),),并将网页设并将网页设计者的邮件地址放在【收件人】文本框中,为浏览计者的邮件地址放在【收件人】文本框中,为浏览者发送电子邮件做好准备,这种链接方式方便了信者发送电子邮件做好准备,这种链接方式方便了信息的交流与反馈。息的交流与反馈。
7、5.1.4 创建电子邮件链接创建电子邮件链接第六页,讲稿共七十页哦在网页上创建电子邮件链接的步骤如下。在网页上创建电子邮件链接的步骤如下。(1)在网页上选择准备作为电子邮件链接的在网页上选择准备作为电子邮件链接的文字文字,如如“请与我联系请与我联系”、“请提意见请提意见”等。等。(2)选择选择【插入】【插入】|【电子邮件链接】命令【电子邮件链接】命令,或者,或者在【插入】栏板的在【插入】栏板的【常用】选项卡中单击插入【电【常用】选项卡中单击插入【电子邮件链接】子邮件链接】按钮,此时网页编辑窗口弹出【电子按钮,此时网页编辑窗口弹出【电子邮件链接】对话框,如图邮件链接】对话框,如图5-4所示。所示
8、。(3)在在E-mail文本框中输入自己的电子邮件地址,文本框中输入自己的电子邮件地址,然后单击【确定】按钮。然后单击【确定】按钮。第七页,讲稿共七十页哦图图5-4【电子邮件链接】对话框【电子邮件链接】对话框第八页,讲稿共七十页哦在网页上创建电子邮件链接的另一种方法的操作步在网页上创建电子邮件链接的另一种方法的操作步骤如下。骤如下。(1)在网页上选中准备作为电子邮件链接的在网页上选中准备作为电子邮件链接的源端源端点对象。点对象。(2)在【属性】面板的【链接】文本框中输入在【属性】面板的【链接】文本框中输入“mailto:电子邮件地址电子邮件地址”,如图,如图5-5所示。所示。(3)按回车键,便
9、可创建一个电子邮件链接。按回车键,便可创建一个电子邮件链接。图图5-5在【属性】面板中设置电子邮件链接在【属性】面板中设置电子邮件链接第九页,讲稿共七十页哦通常在网页的首页上可设置一个通常在网页的首页上可设置一个导航条导航条,这样,这样既可为浏览者浏览网站提供一个索引,又能引导浏既可为浏览者浏览网站提供一个索引,又能引导浏览者浏览整个网站的不同页面。览者浏览整个网站的不同页面。导航条又称导航栏导航条又称导航栏,可由一幅或多幅按钮图像,可由一幅或多幅按钮图像组成,按钮图像的状态根据浏览者的鼠标动作而改组成,按钮图像的状态根据浏览者的鼠标动作而改变。当鼠标移到、移出或单击图像时,该图像就会变。当鼠
10、标移到、移出或单击图像时,该图像就会被替换成另一幅图像。被替换成另一幅图像。在创建导航条之前,在创建导航条之前,应先准备好导航条中要用应先准备好导航条中要用的图片。的图片。这些图片分别表示导航条某个按钮不同动这些图片分别表示导航条某个按钮不同动作的状态。在网页上创建导航条的操作步骤如下。作的状态。在网页上创建导航条的操作步骤如下。5.1.5 创建导航条创建导航条第十页,讲稿共七十页哦(1)在网页上选择插入导航条的位置。在网页上选择插入导航条的位置。(2)选择选择【插入】【插入】|【图像对象】【图像对象】|【导航条】【导航条】命命令,或者在【插入】栏的令,或者在【插入】栏的【常用】选项卡中,单击
11、【常用】选项卡中,单击【导航条】按钮【导航条】按钮,此时在网页编辑窗口中会弹出【,此时在网页编辑窗口中会弹出【插入导航条】对话框,如图插入导航条】对话框,如图5-6所示。所示。(3)在【项目名称】文本框中输入导航条元素的在【项目名称】文本框中输入导航条元素的名称,名称,名称对中文不支持名称对中文不支持。所输入的名称将在【导。所输入的名称将在【导航条元件】列表框里显示。可用按钮、调整导航条航条元件】列表框里显示。可用按钮、调整导航条中元素的次序。中元素的次序。第十一页,讲稿共七十页哦图图5-6【插入导航条】对话框【插入导航条】对话框第十二页,讲稿共七十页哦(4)分别单击【状态图像】、【鼠标经过图
12、像】、【按下图分别单击【状态图像】、【鼠标经过图像】、【按下图像】、【按下时鼠标经过图像】像】、【按下时鼠标经过图像】4个文本框右侧的【浏览】按个文本框右侧的【浏览】按钮,选择图像。这些图像的意义分别是:钮,选择图像。这些图像的意义分别是:【状态图像】表示的图像为页面载入时的初始图像;【状态图像】表示的图像为页面载入时的初始图像;【鼠标经过图像】表示的图像为鼠标移到【导航条】按钮上时所【鼠标经过图像】表示的图像为鼠标移到【导航条】按钮上时所显示的图像;显示的图像;【按下图像】表示的图像为鼠标单击【导航条】按钮时所显示的图像;【按下图像】表示的图像为鼠标单击【导航条】按钮时所显示的图像;【按下时
13、鼠标经过图像】表示的图像是单击【导航条】按钮后将光【按下时鼠标经过图像】表示的图像是单击【导航条】按钮后将光标移去时所显示的图像。标移去时所显示的图像。第十三页,讲稿共七十页哦(5)在【替换文本】的文本框中,输入该【导航条】按钮的替在【替换文本】的文本框中,输入该【导航条】按钮的替换文字。换文字。(6)在【按下时,前往的在【按下时,前往的URL】文本框中,输入要链接的网页文本框中,输入要链接的网页地址,并在右侧的下拉列表框中,选择在何处打开要链接的网页。地址,并在右侧的下拉列表框中,选择在何处打开要链接的网页。(7)如果要在打开网页时先将图像装载到内存中,应选中【预如果要在打开网页时先将图像装
14、载到内存中,应选中【预先载入图像】复选框。先载入图像】复选框。(8)如果要在导航条上显示【按下时鼠标经过图像】的图像,如果要在导航条上显示【按下时鼠标经过图像】的图像,可选中【页面载入时就显示可选中【页面载入时就显示“鼠标按下图像鼠标按下图像”】复选框。】复选框。(9)在【插入】下拉列表框中选择【水平】或【垂直】选项,在【插入】下拉列表框中选择【水平】或【垂直】选项,在网页上水平或垂直放置导航条。在网页上水平或垂直放置导航条。第十四页,讲稿共七十页哦(10)如果要将导航条插入表格中,则选中【使用表格】复选框。如果要将导航条插入表格中,则选中【使用表格】复选框。(11)单击、按钮,可将该【导航条
15、】按钮加入导航条中或从导航单击、按钮,可将该【导航条】按钮加入导航条中或从导航条中移去。条中移去。(12)重复第重复第(3)(11)步,插入导航条中的其他按钮。步,插入导航条中的其他按钮。(13)完成后,单击【确定】按钮,并返回网页编辑窗口。完成后,单击【确定】按钮,并返回网页编辑窗口。(14)按按F12键预览网页。键预览网页。如果要修改导航条,可以选择【修改】如果要修改导航条,可以选择【修改】|【导航条】命令,在【导航条】命令,在弹出的【修改导航条】对话框中修改导航条。弹出的【修改导航条】对话框中修改导航条。第十五页,讲稿共七十页哦跳转菜单是一个下拉式菜单跳转菜单是一个下拉式菜单,其中的每一
16、个选,其中的每一个选项都是一个超链接。设计者可以用跳转菜单创建网项都是一个超链接。设计者可以用跳转菜单创建网站站点的各种链接,实现网页之间的跳转链接。站站点的各种链接,实现网页之间的跳转链接。要在网页上添加一个跳转菜单,操作步骤如下。要在网页上添加一个跳转菜单,操作步骤如下。(1)在网页的合适位置插入光标,在网页的合适位置插入光标,选择【插入】选择【插入】|【表单对象】【表单对象】|【跳转菜单】命令【跳转菜单】命令。或者在【插入】。或者在【插入】浮动面板的【表单】选项卡中,浮动面板的【表单】选项卡中,单击【跳转菜单】单击【跳转菜单】按钮按钮,也可以,也可以拖曳【跳转菜单】按钮拖曳【跳转菜单】按
17、钮到当前网页的到当前网页的光标处。光标处。5.1.6 创建跳转菜单创建跳转菜单第十六页,讲稿共七十页哦(2)网页编辑窗口弹出【插入跳转菜单】对话框,网页编辑窗口弹出【插入跳转菜单】对话框,如图如图5-7所示。如果要在跳转菜单中创建一个提示所示。如果要在跳转菜单中创建一个提示选项,可在【文本】框中输入提示内容的文字,然选项,可在【文本】框中输入提示内容的文字,然后【选项】区域里选中【更改后【选项】区域里选中【更改URL后选择第一个项后选择第一个项目】复选框。这一选项是菜单提示性质的说明,单目】复选框。这一选项是菜单提示性质的说明,单击按钮添加这个提示项。击按钮添加这个提示项。(3)在【文本】文本
18、框中,输入跳转菜单其他选在【文本】文本框中,输入跳转菜单其他选项的名字。项的名字。第十七页,讲稿共七十页哦(4)单击【选择时,前往单击【选择时,前往URL】文本框中右侧的文本框中右侧的【浏览】按钮,输入该菜单选项所链接的页面文件【浏览】按钮,输入该菜单选项所链接的页面文件和路径。和路径。图图5-7【插入跳转菜单】对话框【插入跳转菜单】对话框第十八页,讲稿共七十页哦(5)在【打开在【打开URL于】下拉列表框中,选择链接于】下拉列表框中,选择链接页面文件的显示方式。页面文件的显示方式。(6)要想继续添加菜单选项,可单击按钮,然后要想继续添加菜单选项,可单击按钮,然后重复第重复第(3)(6)步的操作
19、。步的操作。(7)如果在跳转菜单右边添加一个提交按钮,可如果在跳转菜单右边添加一个提交按钮,可选中【菜单之后插入前往按钮】复选框。如果要在选中【菜单之后插入前往按钮】复选框。如果要在选择了某个菜单选项后重新返回再选择第一个菜单选择了某个菜单选项后重新返回再选择第一个菜单项,可选中【更改项,可选中【更改URL后选择第一个项目】复选框。后选择第一个项目】复选框。(8)完成设置后,单击【确定】按钮。完成设置后,单击【确定】按钮。(9)按按F12键预览网页,显示结果如图键预览网页,显示结果如图5-8所示。所示。第十九页,讲稿共七十页哦图图5-8带跳转按钮的跳转菜单带跳转按钮的跳转菜单第二十页,讲稿共七
20、十页哦跳转菜单的跳转功能是由跳转菜单的跳转功能是由JavaScript脚本代码脚本代码来实现的,这些代码是由来实现的,这些代码是由Dreamweaver 8添加到添加到网页文档中的。跳转菜单的修改较为方便。网页文档中的。跳转菜单的修改较为方便。修改跳转菜单的操作步骤如下:修改跳转菜单的操作步骤如下:(1)在网页文档中,选中要修改的跳转菜单。在网页文档中,选中要修改的跳转菜单。(2)在【属性】面板中,显示的跳转菜单如图在【属性】面板中,显示的跳转菜单如图5-9所示,单击【列表值】按钮。所示,单击【列表值】按钮。(3)在弹出的【列表值】对话框中,修改菜单选在弹出的【列表值】对话框中,修改菜单选项,
21、如图项,如图5-10所示。所示。(4)修改完成后,单击【确定】按钮。修改完成后,单击【确定】按钮。第二十一页,讲稿共七十页哦图图5-9转跳菜单的【属性】面板转跳菜单的【属性】面板图图5-10【列表值】对话框【列表值】对话框第二十二页,讲稿共七十页哦热点链接是在一个图像中划分出几个不同的几热点链接是在一个图像中划分出几个不同的几何图形区域,然后分别为这个图像不同的几何图形何图形区域,然后分别为这个图像不同的几何图形区域建立超链接,图像中建立超链接的几何图形区区域建立超链接,图像中建立超链接的几何图形区域称为热点。域称为热点。浏览时,当热点被单击后就会完成相应的超链浏览时,当热点被单击后就会完成相
22、应的超链接操作,不同的热点对应于不同的超链接,这就是接操作,不同的热点对应于不同的超链接,这就是图像的热点链接。图像的热点链接。5.1.7 创建热点链接创建热点链接第二十三页,讲稿共七十页哦创建创建热点热点链接的操作步骤如下。链接的操作步骤如下。(1)在网页编辑窗口中在网页编辑窗口中插入一幅图像插入一幅图像,并选中这,并选中这幅图像。幅图像。(2)此时在图像的【属性】面板左下方有一个名此时在图像的【属性】面板左下方有一个名为【地图】的文本框,如图为【地图】的文本框,如图5-11所示,可在所示,可在其中输其中输入入热点热点链接的名称链接的名称。若不输入内容,若不输入内容,Dreamweaver
23、8将会自动加上将会自动加上一个一个热点热点链接的名字。链接的名字。第二十四页,讲稿共七十页哦图图5-11图像的【属性】面板图像的【属性】面板第二十五页,讲稿共七十页哦(3)在【地图】文本框下面有在【地图】文本框下面有4个图标按钮个图标按钮,分,分别是别是选择编辑箭头选择编辑箭头、矩形、矩形热点热点、圆形、圆形热点热点和多边形和多边形热热点工具点工具,这些图标的功能分别是,这些图标的功能分别是调整热点区域调整热点区域,创,创建矩形、圆形和不规则多边形的热点区域。建矩形、圆形和不规则多边形的热点区域。(4)单击创建多边形热点区域的图标,然后用鼠单击创建多边形热点区域的图标,然后用鼠标依次在选作标依
24、次在选作热点热点链接的几何图形外部轮廓线上依链接的几何图形外部轮廓线上依次单击,可定义一个多边形的热区,如图次单击,可定义一个多边形的热区,如图5-12所示。所示。(5)如果用鼠标单击矩形或圆形图标,然后在选如果用鼠标单击矩形或圆形图标,然后在选作作热点热点的外部轮廓线上拖曳鼠标,可定义矩形或圆的外部轮廓线上拖曳鼠标,可定义矩形或圆形的热区,如图形的热区,如图5-12所示。所示。第二十六页,讲稿共七十页哦图图5-12定义热点链接定义热点链接第二十七页,讲稿共七十页哦(6)当一个热区被选定后,图像的【属性】面板当一个热区被选定后,图像的【属性】面板变成变成图像热点的【属性】面板图像热点的【属性】
25、面板,如图,如图5-12所示。所示。(7)单击图像热点的【属性】面板中【链接】文单击图像热点的【属性】面板中【链接】文本框右边的图标,选择当前热区链接的文件。或者本框右边的图标,选择当前热区链接的文件。或者直接在直接在【链接】【链接】文本框中输入链接文件的路径和名文本框中输入链接文件的路径和名称。称。(8)在【目标】下拉列表框中设置链接的目标对在【目标】下拉列表框中设置链接的目标对象的显示方式。象的显示方式。(9)在【替代】文本框中输入所定义的热区的说在【替代】文本框中输入所定义的热区的说明文字。在浏览网页时,鼠标指在热区上将会显示明文字。在浏览网页时,鼠标指在热区上将会显示【替代】文本框中的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 建立 旅游 电子商务 网站 实践 讲稿
限制150内