电子商务网页设计全书电子教案课件.ppt

,*,*,第,1,章,*,第,2,章,*,第,3,章,*,第,4,章,*,第,5,章,*,第,6,章,*,第,7,章,电子商务网页设计,（第三版）,国家级职业教育规划教材,目 录,第,1,章 电子商务网站概述,第,2,章 网页版面设计,第,3,章 表格在网页中的应用,第,4,章 层和框架在网页中的应用,第,5,章 网页特效,第,6,章 超链接在网页中的应用,第,7,章 网站发布,目 录,课件制作,谢谢观看,第,1,章,电子商务网站概述,第,1,节,电子商务网站需求分析,第,2,节 电子商务网站结构设计,第,3,节 利用,Dreamweaver CS5,创建站点,第,1,节,电子商务网站需求分析,第一章,电子商务发展迅猛，消费者通过网络进行购物已经成为习惯，使用电子商务网站进行营销也已经是企业经营的主要渠道。要建设好电子商务网站，就要掌握网站建设的基本知识和流程，做好网站建设的前期准备工作。,第一章,1.,网页和网站,（,1,）网页,网页通常是使用网页制作工具制作或者使用,HTML,语言进行编写，通过网络传播，并被浏览器翻译成为可以显示出来的集文本、超链接、图像、声音、动画、视频等信息元素为一体的页面文件。,一、电子,商务网站建设概述,（,2,）,网站,网站是,指根据一定的规则，使用各种网页制作工具制作的用于展示特定信息内容的相关网页的集合,。浏览,者可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。对于电子商务网站，客户通过浏览器访问相关电商网站，浏览具体商品网页了解商品详细信息来实现交易,。,2.,电子,商务网站建设工具,（,1,）,Frontpage,和,Expression Web,（,2,）,Dreamweaver,3.,商务网站建设流程,改版,测试通过,前期调研，分析需求,确定站点整体规划,硬件软件搭建调试,网页制作,网站测试与排错,网站维护与推广,素材收集、整理,素材数字化处理,站点新建及设置,网站发布,发现问题,二、客户信息收集,1,收集,的信息内容,（,1,）企业自身信息,（,2,）市场信息,（,3,）目标客户信息,2,搜集信息的方法,（,1,）资料统计法,（,2,）现场观察法,（,3,）会议收集法,（,4,）网络收集法,三、客户需求分析,1,需求分析的内容,需求分析,业务需求,功能需求,用户需要的功能,商家需要的功能,非功能需求,可用性,可靠性,性能,接口需求,2.,网站功能整合描述,包揽天下网店,前台,商品展示,购物车,订单结算,用户订单查询,后台,商品类别管理,品牌管理,商品管理,订单管理,物流管理,人员管理,四、搜集易买网商城的客户信息,信息的采集需要通过现场观察、召开会议、资料统计、问卷调查等方式进行，以全面掌握其公司基本信息、客户群体资料以及建设网站的目的和网站功能定位。主要工作是填写网站建设调查表。,五、,对,易买网商城,进行,需求分析,1.,业务需求,2.,功能需求,3.,非功能需求,4.,接口需求,六、易买网商城的功能,第,2,节,电子商务网站结构设计,一、,网站物理结构,第一章,1.,网站物理结构的概念,网站物理结构指的是网站真实的目录及所包含文件所存储的真实位置所表现出来的结构，也就是网站的实际目录,，,或者说是文件实际的物理地址。一般来说静态网站才有物理结构，动态网站或伪静态网站是不存在物理结构的。,2.,网站物理结构的类型,网站,物理结构有两种不同的表现形式，一种是扁平式物理结构，另一种是树形物理,结构。,1,网站目录结构的概念,网站目录结构是指建立网站时所创建的文件目录。,二、网站目录结构,2.,网站目录的建立原则,（,1,）不要,将,所有文件都存放在根目录下。（,2,）按主菜单栏目内容,建立,子目录。（,3,）根据更新要求建立和管理次要栏目。（,4,）,在每个目录下都建立独立的,image,目录,。（,5,）目录的层次不要太深。（,6,）不要使用中文目录。一般建议使用英文意思的名称。如,images,目录中存放图像，,css,目录存放,css,样式表等。,三、网站逻辑链接结构,1.,网站逻辑链接结构的概念,网站逻辑链接结构也叫作链接结构，主要是指网页页面之间相互链接的关系。逻辑链接结构和物理结构的区别在于，逻辑链接结构由网站页面的相互链接关系决定，而物理结构则由网站页面的物理存放位置决定。,在网站的逻辑链接结构中，通常采用,“,链接深度,”,来描述页面之间的逻辑关系。,“,链接深度,”,是指从源页面到达目标页面所经过的路径数量。,2.,网站逻辑链接结构基本形式,树状链接结构（一对一）,星状链接结构（一对多）,3.,网站逻辑链接结构的选择,最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。,四、页面流程,1.,页面流程的概念,网站设计者为访问者设计的在浏览网站时的浏览经历就是页面流程。,2.,页面流程设计,（,1,）功能模块的划分,（,2,）根据功能模块划分网站页面,（,3,）建立页面链接流程,五、设计易买网商城物理结构和目录结构,1.,设计易买网商城物理结构,2.,设计易买网商城的目录结构,六、分析易买网商城的逻辑结构,1.,功能模块划分,2.,分析页面链接流程图,第,3,节 利用,Dreamweaver CS5,创建站点,一、安装,Dreamweaver CS5,二、,Dreamweaver CS5,简单使用,1.,启动,Dreamweaver CS5,2.Dreamweaver CS5,工作区的构成,3.Dreamweaver CS5,的工作视图,三、新建和管理易买网商城本地站点,1.,新建站点,2.,站点信息,3.,服务器配置,4.,高级设置,5.,选择保存，完成配置,四、新建第一个网页页面,1.,菜单栏中选择,“,文件,”,/,“,新建,”,2.,编辑简单的网页,课件制作,谢谢观看,第,2,章 网页版面设计,第,1,节 网页的结构和色彩设计,第,2,节,HTML,基础,第,3,节 网页的基本操作,第,1,节 网页的结构和色彩设计,一、网站风格,1.,网站风格概述,通过网站的外表、内容、文字等就可以概括出一个站点的风格，这些风格或者是色彩，或者是技术，或者是交互方式，能让浏览者明确分辨出这是该网站独有的。,2.,网站风格的分类,功能型,展示型,二、网页结构的类型,1.,“,同,”,字型布局,2.,“,国,”,字型布局,3.T,型布局,4.,“,三,”,字型布局,5.,标题文本型布局,6.POP,海报型布局,7.,框架型布局,三、页面色彩搭配,1.,颜色传达的信息,2.,网页色彩搭配要注意的问题,（,1,）使用单色,（,2,）使用邻近色,（,3,）使用对比色,（,4,）黑色的使用,（,5,）网页配色注意事项,1,）同一个页面色彩过于繁杂，会给人造成凌乱的印象。,2,）不要将所有颜色都用到，尽量控制在三种色彩以内。,3,）背景和前文的对比尽量要大，以便突出页面主要内容，但是也尽量不要用花纹繁复的图案和纯度很高的色彩作背景。,四、易买网商城首页结构设计,1.,绘制布局草图,2.,设置首页内容,3.,在,Dreamweaver,中创建布局,五、易买网商城页面色彩搭配,1.,网页的底色,2.,文字字型,第,2,节,HTML,基础,1.HTML,的概念,超文本标记语言，用于描述网页（网页文档）的语言。每一个页面的代码保存为一个网页源文件（,“,.html,”,文件）。,HTML,不是一种编程语言，而是一种标记语言，包括一些定义页面的文本、图像、声音和动画等内容及其格式的符号，这些符号称为标记。,一、,HTML,的概念及作用,2.HTML,的作用,二、标记的概念及分类,1.,标记的概念,（,1,）,HTML,标记是放在尖括号里的关键词，如,。,（,2,）大多数标记都成对出现，如,和,。,（,3,）标记对中的第一个标签是开始标记（也叫开放标记），第二个标签是结束标记（也叫闭合标记）。,（,4,）结束标记和开始标记所用的字符相同，只是前面加一个斜杠，例如，,用于标记一个自然段。,（,5,）标记可以具有相应的属性，如,size,、,color,、,width,等。,2.,标记的分类,（,1,）用来指定网页上的元素及其格式。,（,2,）用来指向其他的资源。,三、,HTML,及标记在网页中的应用,1.HTML,在网页文档结构中的应用,HTML,可以用来指明一个网页文档的基本结构。页面,HTML,文档通常由版本信息、文档头（,head,）、文档主体（,body,）三部分组成。,（,1,）,是版本信息说明,（,2,）,是文件标记,（,3,）,是头部标记,（,4,）,是主体标记,2.,内容及其格式标记的简单应用,（,1,）格式标记,用来创建一个段落，在此标记之间的文本将按照段落的格式显示。,是一个很简单的换行标记，它没有结束标记，用来创建一个换行。,是普通列表标记，,和,都必须放在,标记之间。,用来创建一个列表；,用来创建列表中的上层项目；,用来创建列表中最下层项目。,（,2,）添加文本并设置格式,1,）,（六级标题标记）,2,）,（字体标记）,3,）,（字体的大小颜色标记）,（,3,）超链接标记,（,4,）图像标记和多媒体标记,图像标记,将音乐或影像嵌入网页，可以用,标记,（,5,）表单标记及其应用,标记用来创建一个表单,标记具有,action,、,method,和,target,属性。,第,3,节 网页的基本操作,网页的基本组成部分包括文本、图像、多媒体和超链接。制作网页时首先注意主题要鲜明，其次内容要丰富，才能不断吸引访问者。文字是必不可少的元素，网站思想、内容的表达都需要文字加以传递。同时，适当地配合一些图像、,Flash,动画、其他媒体对象等能够提高网页的观赏性。页面上的元素应用超链接就构成了一个有机整体，实现互联互通，这样能够让浏览者在不同页面间进行跳转，找到所需的内容。,一、网页中添加文本,1.,添加普通文本,（,1,）直接输入文本,（,2,）复制粘贴文本,（,3,）从其他文件导入,2.,添加空格,在需要输入的地方单击鼠标左键，将输入法切换到半角状态，单击空格键即可输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：,（,1,）菜单,“,插入记录,”,/,“,HTML,”,/,“,特殊字符,”,/,“,不换行空格,”,。,（,2,）直接按,“,Ctrl+Shift+Space,”,快捷键。,（,3,）设置软件首选参数,“,允许连续空格,”,。,3.,插入水平线,4.,插入特殊字符,（,1,）通过菜单插入。先将光标放置到需要插入特殊字符的位置，在,“,HTML,”,/,“,特殊字符,”,的级联菜单中选择需要插入的特殊字符。,（,2,）通过,“,文本,”,插入工具栏插入。先在,Dreamweaver CS5,的,“,插入,”,工具栏中选择,“,文本,”,，显示,“,文本,”,插入工具栏，然后选择需要插入的特殊字符。,5.,设置文本格式,二、网页中插入图像,1.,网页中常用的图像格式,2.,易买网首页插入图像操作,三、网页中插入,Flash,动画,1.Flash,动画类型,2.,插入,Flash,动画操作,四、网页中插入,FLV,视频,五、在网页中插入音频,课件制作,谢谢观看,第,3,章 表格在网页中的应用,第,1,节 利用表格显示数据,第,2,节 利用表格布局网页,第,1,节 网页的结构和色彩设计,一、表格的概念,1.,网页中的表格,表格是组成网页的基本元素之一。很多网站的页面是以表格为框架制作的。,和,Excel,电子表格一样，网页中也可以用表格来显示数据，但是网页中的表格功能更强一些，网页中的表格还可以用来进行网页布局设计（排版）。,2.,表格的组成元素,表格由三个主要元素构成：行、列以及单元格。单元格是行和列相交的部分。单元格和单元格之间的距离叫单元格间距。单元格内容和单元格边界的距离叫单元格边距。整张表格的边缘叫作边框。表格也可以带一标题，标题在表格的顶端，表格也以有背景色，可以单独对表格、行、单元格设置不同的背景色。,二、表格的基本操作,1.,新建表格,2.,选择表格元素,3.,调整表格、列和行的大小,4.,添加,/,删除行和列,当行被选中时，单击键盘上的,“,Delete,”,键可以删除一行；,当列被选中时，单击键盘上的,“,Delete,”,键可以删除一列；,单击选中任意一个单元格时，按,“,Ctrl+M,”,快捷键可以在当前单元格下方插入一行；,单击选中任意一个单元格时，按,“,Ctrl+Shift+A,”,快捷键可以在当前单元格左边插入一列。,5.,复制、粘贴和删除单元格,6.,设置单元格、行或列的属性,7.,合并或拆分单元格,三、在网页中制作简单的表格,1.,可视化创建表格,2.,表格的,HTML,表示,（,1,）,表示表格。,（,2,）,表示表格的标题。,（,3,）,表示行。,（,4,）,表示单元格。,（,5,）,width,表示表格宽度，,border,表示表格的边框线粗细，,cellpadding,表示单元格的边距,cellspacing,表示单元格的间距，,bgcolor,表示背景色。,（,6,）单元格的具体内容写在,之间，,就象一对括号，,表示括号开始，,表示括号结束，它们必须成对出现。,第,2,节 利用表格布局网页,网页布局就是将页面上的元素按照一定的形式排列好。,一般网页的版面都是分布整齐、左右对称的，具有类似表格的特点，因此可以借助表格来进行网页布局。在用表格进行布局时，一般主要用单元格来分割版面中的不同显示部分，所以不需要设表格的背景色、表格的边框线等，通过调整单元格的宽度、高度、间距、边距等参数来调节版面，另外利用表格嵌套功能，还可以对局部进行更精细地调整。,一、网页布局的概念和原理,二、利用表格布局网页的简单实例,1.,创建表格,2.,表格参数设置,3.,表格标签检查器的设置,4.,输入表格内容,5.,表格的,HTML,表示,三、用表格布局易买网商品列表页（,product-list.htm,）,1.,插入表格,（,1,）打开,Dreamweaver CS5,，新建页面命名为,“,product-list.htm,”,，并保存。,（,2,）单击菜单,“,插入,”,/,“,表格,”,，或按,“,Ctrl+Alt+T,”,快捷键。,（,3,）在弹出的,“,表格,”,对话框中，输入行数为,“,4,”,，列数为,“,4,”,。,2.,设置表格属性,3.,添加图片并设置属性,4.,添加文本及设置其格式,5.,完成表格的其他商品,课件制作,谢谢观看,第,4,章 层和框架在网页中的应用,第,1,节 层在网页中的应用,第,2,节 框架在网页中的应用页,第,1,节 层在网页中的应用,一、层的概念和分类,1.,层的概念,层是网页内容的一个容器，只要是能放置在网页中的内容，都可以放置在层当中。层最主要的特性就是它可以在网页上自由浮动，从而实现对网页元素的精确定位，而且层的位置是可以重叠的，可以任意地控制层的前后位置、显示或隐藏，大大增强了网页设计的灵活性。,2.,层的分类,（,1,）普通层和嵌套层,（,2,）固定层和浮动层,1,）固定层。固定层在网页中的位置固定。,2,）浮动层。在网页设计视图内，可以通过拖动控制手柄使浮动层移动。,二、层的创建及设置,1.,普通层的创建,（,1,）使用菜单命令创建普通层,（,2,）使用布局面板创建普通层,2.,嵌套层的创建,（,1,）使用菜单命令创建嵌套层,（,2,）使用插入面板创建嵌套层,3.,层属性的设置,4.,层的基本操作,（,1,）选择层,（,2,）移动层,（,3,）改变层大小,（,4,）对齐层,三、使用,Div,布局易买网首页,1.,新建空白文档,2.,插入,Div,标签,四、使用,“,Div+CSS,”,美化易买网首页,1.,生成,CSS,文件,2.Div,应用样式,3.,编辑网页内容,五、使用,AP Div,实现浮动广告,1.,插入,AP Div,2.,设置,AP Div,浮动效果,3.,保存网页并浏览,六、,AP Div,与表格的转换,1.,把,AP Div,转换为表格,2.,把表格转换为,AP Div,第,2,节 框架在网页中的应用,一、框架与框架集,1.,框架,框架（,frame,）是指用来分隔网页的窗格，每个框架都是浏览器中的一个区域，它可以显示与浏览器窗口中所显示内容相关的,HTML,文档，是一个独立的,HTML,页面。,2.,框架集,框架集（,frameset,）是指定义一组网页布局结构与属性的,HTML,页面，其中包含了显示在页面中框架的数量、尺寸、装入框架的页面来源及其他可定义的属性相关信息。,3.,框架结构的优点,（,1,）使网页结构清晰，易于维护和更新。,（,2,）每个框架网页都具有独立滚动条，因此访问者可以独立控制各个页面。,（,3,）便于修改。一般情况下，每隔一段时间，网站的设计就要做一定的修改，如果是公共部分需要修改，只需修改公共页面，整个网站就同时更新。,（,4,）访问者的浏览器不需要为每个页面重新加载与导航相关的图形，当浏览器的滚动条滚动时，这些链接不随滚动条的滚动而上下移动，一直固定在某个窗口，便于访问者能随时跳转到另一个页面。,二、创建预定义框架集,1.,示例方式,2.,按钮方式,3.,菜单方式,4.,保存框架,三、框架和框架集基本操作,1.,选择框架和框架集,（,1,）在,“,框架,”,面板中选择框架和框架集,（,2,）在设计窗口中选择框架或框架集,2.,拆分和删除框架,3.,属性设置,（,1,）设置框架集属性,（,2,）设置框架属性,4.,识别代码,（,1,）框架的基本结构代码,（,2,）框架集标签,标签的属性,1,）,framespacing,属性，通过该属性来设置框架集边框的宽度,2,）,bordercolor,属性，通过该属性来设置框架集边框的颜色,3,）,rows,属性，在垂直方向，浏览器可以被分割成多个窗口,4,）,cols,属性，在水平方向浏览器可以被分割成多个窗口,（,3,）框架标签,的属性,1,）,src,属性，显示页面源文件的路径。,2,）,name,属性，框架的名称。,3,）,scrolling,属性，框架滚动条显示属性。,4,）,noresize,属性，框架尺寸调整属性。,5,）,marginwidth,属性，框架边缘宽度属性。,6,）,marginheight,属性，框架边缘高度属性。,四、框架布局,“,图书首页,”,页面,1.,创建框架布局页面,2.,向框架中添加内容,3.,保存并预览框架布局页面,五、使用框架布局易买网图书页面,1.,创建框架布局页面,2.,调整框架结构,3.,向框架中添加内容,4.,保存并预览框架布局页面,课件制作,谢谢观看,第,5,章 网页特效,第,1,节,CSS,样式表特效,第,2,节 行为特效,第,1,节,CSS,样式表特效,一、层叠样式表的基础知识,1.,层叠样式表的概念,层叠样式表（,Cascading Style Sheets,，简称,CSS,），是专门用于定义各种各样的样式的一套规范，是网页元素的修饰者，有了它就可以非常灵活方便地设计和汇总样式来控制网页内容的外观。,2.,层叠样式表的功能,（,1,）样式丰富多样,（,2,）灵活方便,（,3,）减少网站开发者工作的重复性,3.,层叠样式表的类型,（,1,）行内式样式表,（,2,）嵌入式样式表,（,3,）外联式样式表,二、,CSS,样式表创建,1.,创建,CSS,样式表的方法,（,1,）通过菜单选项创建样式表,（,2,）通过,“,CSS,样式,”,面板创建样式表,（,3,）通过,“,属性,”,面板创建样式表,2.,新建,CSS,规则,三、,CSS,样式属性定义,1.,文本属性,2.,背景属性,3.,边框属性,4.,列表属性,四、,CSS,样式表的引用,1.,引入外部样式表,2.,应用,CSS,样式表,（,1,）通过菜单应用,（,2,）通过,“,属性,”,面板应用,（,3,）通过,“,CSS,样式,”,面板应用,3.CSS,的应用优先级,CSS,样式的优先级总结来说，离被设置元素越近优先级别越高，一般依据下面的规则划分优先级，即行内样式表（在,HTML,元素内部）,内部样式表（位于,标签内部）,外联样式表,浏览器缺省设置。,行内样式（在,HTML,元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：,标签中的样式声明、外部样式表中的样式声明或者浏览器中的样式声明（缺省值）。,五、,CSS,样式的应用,1.,内部样式表的应用,2.,外部样式表的应用,3.,应用外部样式,第,2,节 行为特效,一、认识行为,1.,行为的概念,行为是由对象、事件和该事件触发的动作构成的。,Dreamweaver CS5,内置了很多行为，使设计者不用输入复杂的代码即可在网页上实现一些很实用的交互效果，如果对,JavaScript,语言有些掌握，还可以编写代码实现更加丰富的效果。,2.,对象,对象是产生行为的主体。,3.,事件,事件是由用户或浏览器针对页面元素的一种操作。,4.,动作,动作通常是由一段预先编写的,JavaScript,代码组成的，用于完成某些特殊的任务。,二、添加与编辑行为,1.,打开,“,行为,”,面板,2.,添加行为,3.,编辑行为,三、表单,Form,表单用于申明表单，定义采集数据的范围，也就是,和,里面包含的数据将被提交到服务器，通常形式是：,。,表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框、文件上传框、下拉选择框等。,1.,文本框,文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或简短的回答。,2.,多行文本框,多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。,3.,密码框,密码框是一种特殊的文本域，用于输入密码，当访问者输入文字时，文字会被星号或其他符号代替，而输入的文字会被隐藏。,4.,隐藏域,隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的，当表单被提交时，隐藏域就会将信息用设置时定义的名称和值发送到服务器上。,5.,复选框,复选框允许在待选项中选中一项以上的选项，每个复选框都是一个独立的元素，都必须有一个唯一的名称。,6.,单选框,当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。,7.,文件上传框,有时候需要用户上传文件，文件上传框看上去和其他文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件路径或者单击浏览按钮选择需要上传的文件。,8.,下拉选择框,下拉选择框允许在一个有限的空间设置多种选项。,9.,表单按钮,表单按钮控制表单的运作。提交按钮用来将输入的信息提交到服务器。,四、,JavaScript,脚本语言,JavaScript,是一种直译式脚本语言，它的解释器被称为,JavaScript,引擎，是广泛用于客户端的脚本语言。,1.JavaScript,的功能,JavaScript,常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。,2.JavaScript,的特性,（,1,）简单性 （,2,）动态性 （,3,）跨平台性,五、制作表单文本框行为特效,1.,设计表单,2.,添加行为,3.,预览效果,六、使用,JavaScript,脚本实现弹出对话框特效,1.JavaScript,脚本嵌入网页头部,2.JavaScript,脚本与页面代码进行交互,七、使用,JavaScript,脚本实现漂浮广告窗,1.,添加跳转效果,2.,编写实现漂浮效果的,JavaScript,脚本代码,3.,页面引用,JavaScript,脚本文件,4.,浏览效果,课件制作,谢谢观看,第,6,章 超链接在网页中的应用,一、超链接,1.,超链接的概念,超链接（,Hyper Link,）是指从一个网页指向一个目标的连接关系。,一个完整的超链接由两部分组成，即超链接目标和超链接对象。链接目标一般用,URL,来表示，链接目标可以是网页、图片以及其他各种文件，也可以是电子邮件、空链接等，超链接对象是屏幕上的显示部分，是超链接在网页中的显示载体,2.,超链接的分类,（,1,）按照,URL,组成部分的不同，超链接可以分为外部链接、内部链接和锚点链接，其中内部链接又可分为绝对链接和相对链接。外部链接连接到其他的网站，内部链接连接到网站内部的其他网页，绝对链接包含网站地址或磁盘根目录路径，相对链接不含网站地址及磁盘根目录，只有当前网页所在路径的相对关系，锚点链接连接到一个网页的内部指定部分，比普通链接更具体。,（,2,）按照超链接对象不同，网页中的链接可以分为文本超链接、图片超链接、图片热区超链接等。,另外还有一些其他类型的超链接，如邮件链接、脚本链接、文件链接、空链接等。,3.,超链接路径,（,1,）统一资源定位符,URL,完整的,URL,一般由网络协议、网站地址、服务器端口、磁盘目录路径、网页、命名锚记等组成。,（,2,）绝对路径和相对路径,URL,中含有网站地址的叫绝对路径，不含网站地址的叫相对路径。,二、创建文本超链接,1.,直接输入要链接的地址,2.,通过鼠标选择,三、创建图片超链接,四、创建图片热区超链接,1.,图片属性,2.,拖出热区,3.,热区设置,五、创建,E-mail,超链接,六、创建锚点超链接,七、创建易买网商城网页间的链接,1.,本地链接,制作网站时最常建立的链接是本地链接，本地链接又分为同一个站点内的网页链接和本地不同站点间的网页链接。,同一站点内的网页链接就是指在同一个站点内的不同页面间的链接，本地不同站点是指一个服务器中存放的多个站点，如一些大型的网站服务器里可以存放多个站点，这些站点类似于个人计算机中可以存放不同的文件，这些文件都有自己的存放位置而不会相互影响，可以使用完整的,URL,建立本地网页的链接，但建立快捷的到其他网页的链接，可以节省时间和系统资源。,2.,建立同一站点内链接的方法,八、创建下载文件链接,课件制作,谢谢观看,第,7,章 网站发布,一、空间和域名,1.,空间,空间就是,Web,服务器上的存储空间，把建设的站点内容上传到其中存储。申请网站空间的目的是让网站的程序和资料在网络上有一个储存的地方，这样通过互联网就能访问网站。空间有免费和收费两种，区别是免费空间一般容量较小，功能和兼容性受限，而且现在免费空间越来越少；收费空间相对容量较大，还可以根据客户需求定制。,虚拟空间的模式分为主机托管、主机租用和虚拟主机。大多数网站使用虚拟主机。,2.,域名,按照一定的规则给,Internet,上的计算机起的名字就叫域名，每个域名在网络上都是唯一的。域名是按照地理或组织域进行分层，从右往左依次变小。,二、为易买网商城申请域名和空间,1.,申请域名,2.,申请虚拟主机,三、在本地测试易买网商城站点,1.,配置测试环境,2.,页面显示是否正常、浏览器兼容性测试,3.,链接测试,4.,速度测试,四、易买网商城站点发布,1.,配置服务器连接信息,2.,发布站点,课件制作,谢谢观看,