电子商务网页设计与网站建设.ppt
《电子商务网页设计与网站建设.ppt》由会员分享,可在线阅读,更多相关《电子商务网页设计与网站建设.ppt(336页珍藏版)》请在三一办公上搜索。
1、网页设计与网站建设,第一章 电子商务网站建设概述,电子商务网站定义电子商务网站是指一个企业、机构或公司在互联网上建立的站点,其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。电子商务网站功能企业形象宣传新闻发布、供求信息发布 产品和服务项目展示 商品和服务定购 转账与支付、物流应用 信息搜索与查询 客户信息管理 销售业务信息管理,第一章 电子商务网站建设概述,电子商务网站的架构,第一章 电子商务网站建设概述,电子商务网站的构成要素网站域名 网站物理地点 网站页面 商品目录 购物车 付款台 计数器 留言板 会员管理 商品盘点更新 客户资料管理 商品配送,第二章 网站总体设计,
2、网站CI设计网站的CI设计,主要是指网站的标志、色彩、字体、标语,是一个网站建立CI形象的关键,是网站的表面文章、形象工程。通过对网站的标志、色彩、字体、标语设计,建立起网站的整体形象。网站的标志(Logo)、名称标准色彩 标准字体 宣传标语,第二章 网站总体设计,网站的目录结构网站的目录是指建立网站时创建的目录。不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主栏目目录下都建立独立的Images目录 目录的层次不要太深 不要使用中文目录 不要使用过长的目录 尽量使用意义明确的目录,第二章 网站总体设计,链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。研究网站的链接结构的目
3、的在于:用最少的链接,使浏览最有效率。一般建立网站的链接结构有两种基本方式:树状链接结构 星状链接结构,第三章 Web页面制作基础 HTML标记,HTML语言 HTML是超文本标记(Hyper Text Markup Language)的缩写,是一种描述文档结构的语言,它使用描述性的标记符来指明文档的结构。,第三章 Web页面制作基础 HTML标记,例:这是标题部分 你好,这是正文部分!,第三章 Web页面制作基础 HTML标记,HTML标记符一般有两种:一般标记符(容器标记符)这些标记符的起始部分与结束部分必须成对出现 空标记符 只是单一的一个标记符而已,如标记符,第三章 Web页面制作基础
4、 HTML标记,文件结构标记符 文件结构标记符标识文件的结构。主要包括如下标记符:HTML标记符 一般格式为:.HEAD标记符 一般格式为:BODY标记符 一般格式为:,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记,区段格式标记符 区段格式标记符将HTML文件中的某个区段文字以特定格式显示,以增加可视性。此类标记符主要包括:Title标记符用于规定HTML文档的标题。一般格式为:HI标记符 HI用于简要描述段落的标题,共有六个级别:H1,H2,H3,H4,H5,H6。其中以H1标题级别为最高,H6标题级别最低。,第三章 Web页面制作基础 HTML标记,例
5、:HTML标题演示示例 标题h1文字显示!标题h2文字显示!标题h3文字显示!标题h4文字显示!标题h5文字显示!标题h6文字显示!,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记,换行标记符是换行标记符,它是单独出现的,作用相当于插入一个回车符。段落标记符 标记符用于划分段落,控制文本放置。一般格式为:水平标记符 标记符是单独使用的标记符,它的作用是换行并在该行下面画一条水平直线。标记符的属性有:Size、Width、align和color。,第三章 Web页面制作基础 HTML标记,size属性用以规定水平线的高度,该属性的参数值必须是数字;width属
6、性用以规定水平线的宽度,该属性的参数值可以是数字(代表字符数)或者百分比(占浏览器宽度的百分比),缺省时水平线占整个浏览器窗口宽度;align属性规定水平线在浏览器窗口的位置,其参数值为left(左侧)、center(中间)、right(右侧)之一;color属性用以指定水平线的颜色。,第三章 Web页面制作基础 HTML标记,预格式化标记符 标记符是预格式化标记符,它是成对出现的。Web浏览器按编辑文档时的字符位置将和标记符之间的内容一成不变地显示出来。,第三章 Web页面制作基础 HTML标记,例:PRE标记符测试文档 1992 January On 15th,the first line
7、 mode browser was Available by anonymous FTP,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记,字符格式标记符 字符格式标记符用来改变HTML文档的显示外观,增加文件的美观程度。HTML文档的字符格式标记符主要有:之间的内容将显示为黑体文字;之间的内容将显示为斜体文字;之间的内容将显示为带下划线的文字;之间的内容将显示为删除线;之间的内容加大显示;文本采用small字体 之间的内容居中显示;之间的内容显示上标;,第三章 Web页面制作基础 HTML标记,之间的内容显示下标;之间的内容显示强调;之间的内容显示加重强调;
8、之间的内容通过标记符内的属性设置来改变字体。它具有的属性有size、face和color。设置字体大小的属性size的有效值是从1到7的整数Face属性是设置字体的类型,其值就是字体类型的名字,如“楷体_GB2312”Color属性设置字体的颜色,其值是颜色值是十六进制值 例:这是Font设置的文字。,第三章 Web页面制作基础 HTML标记,链接标记符 HTML中的链接包括两部分:锚标和目标点。锚标就是链接的源点,当鼠标被移到锚标处时会变成小手状。此时,用户通过点击鼠标就可以到达链接的目标点。HTML是通过链接标记符来实现超链接的。超链接标记符是成对出现的标记符,首标记符和尾标记符之间的内容
9、就是锚标。标记符有一个不可缺省的属性HREF,用于指定链接目标点的位置。链接标记符的一般形式为:,第三章 Web页面制作基础 HTML标记,从一个文件链接到另一个文件有两种方法:链接到一个文件的本身例如:Page two 链接到一个文件中的特定位置 若要链接到文件中的特定位置,就需要先在文档中加入链接点,即链接的目标点。实例如下:Point A字符串“Point A”就是待链接的目标点。通过语句:This Link实现了超链接。,第三章 Web页面制作基础 HTML标记,表格标记符 表格标记符一般格式为:标记符的属性主要有:border属性 width属性 Height属性align属性 ce
10、llspacing属性 cellpadding属性行标记符一般格式为:标记符有两个属性:Align属性Valign属性 单元格标记符一般格式为:标记符的属性主要有:rowspan属性colspan属性 align属性valign属性列标题定义标记符一般格式为:,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记,HTML标记测试实例HTML标记显示结果本实例是对HTML标记的学习效果的一个展示!HTML标记是学好网页设计与网站建设这门课的基础,必须掌握它!链接下面是表格的设计,其中它的边框宽度为1,表格的宽度占屏幕的50,表格中的内容居中显示学号姓名001张三0
11、02李四共2名学生,第三章 Web页面制作基础 制作表单,表单(Form)是用于采集用户输入的信息,从而实现与用户交互的表格。例如,用表单设计订货单、征集用户意见、收集用户信息等等。每一个表单都有一个“提交”按钮,当用户填写完表单并按下“提交”按钮时,用户所填写的信息就发送到web服务器,由服务器负责处理所提交的信息。表单一般由两个部分组成:HTML代码和CGI程序。其中HTML代码主要用来生成表单的可视化界面,CGI程序用来负责对表单所包含的信息进行解释或处理。,第三章 Web页面制作基础 制作表单,表单标记符一般格式为:标记符有两个不可缺省的属性:ACTION属性一般格式为:ACTION属
12、性后面的等号表明当这个表单提交后,用于指定服务器端处理该表单的CGI程序。它的参数值就是该程序的URL。,第三章 Web页面制作基础 制作表单,METHOD属性一般格式为:用于指定表单信息传送到服务器的方式。属性的参数值为get和post之一。使用GET时,将Form的输入信息作为字符串附加到Action所设定的URL后面,中间用“?”隔开,每个表单域之间用“&”隔开,然后把整个字符串传送到服务器端。由于系统环境变量的长度限制输入字符串的长度,因此用Get方式所能得到的信息不能很多,一般在4000字符左右。而且在浏览器的地址栏中将以明文的形式显示在表单中的各个表单域值。使用Post方式,将Fo
13、rm的输入信息进行包装,而不用附加在Action的URL之后,其传送的信息数据量基本上没有什么限制,而且在浏览器的地址栏中不会显示表单域的值。使用get方式的特点是数据立即传送、执行效率高,但它传送的信息数据量小。而使用post方式则可以传送大量信息,但效率不如get方式高。,第三章 Web页面制作基础 制作表单,输入标记符一般格式为 Input标记有六个属性:type、name、size、value、maxlength、checked。其中type和name是两个固定的属性。Name属性的参数值是相应处理程序中的变量名,web服务器将把这条输入信息的值赋予name属性规定的变量。,第三章 W
14、eb页面制作基础 制作表单,Type属性用于指定该输入项提供的输入方式。在不同的输入方式下,标记符的格式略有不同。Type属性的参数值可为以下之一Text类型 这是type的默认类型,指单行文本输入框。其属性有以下几个:name:将输入值传给CGI程序时与输入值相对应的名称;Size:输入窗口的长度,默认值是20,以字节为单位;Value:设定预先在窗口显示的信息;Maxlength:限制最多输入的字节数。password类型 密码输入框,与text类型输入基本相同,但浏览器并不在文本框中显示用户输入的字符,而是将输入的每个字符显示密码提示符“*”。其属性和Text类型一致。,第三章 Web页
15、面制作基础 制作表单,radio类型表示该输入项是一个单选项,即在多个选择之间只能选择其中一项。由于选择是唯一的,因此属性name取相同的值,但属性value的值各不相同。其属性有以下几个:name:将输入值传给CGI程序时与输入值相对应的名称;value:每个选项对应的值;checked:预选项目。checkbox类型 表示该输入项是一个复选框,用户可同时选中表单中的一个或几个复选框作为输入信息。由于每一项都可以被选择,属性name取不同的值,value取相同的值。其属性和radio类型一致。,第三章 Web页面制作基础 制作表单,submit类型 这种类型在浏览器中产生一个提交按钮。当用户
16、单击该按钮时,浏览器就会将表单的输入信息传送给服务器。其属性有以下几个:name:将输入值传给CGI程序时与输入值相对应的名称;Value:用于指定显示提交按钮上的文字。reset类型 这种类型的按钮让浏览器产生一个重置按钮,当用户鼠标点击这个按钮后,则用户输入信息都会被全部清除,以便用户重新输入。其属性和submit类型一致。,第三章 Web页面制作基础 制作表单,hidden类型 这种类型将input标记的区域隐藏起来,使之不出现在屏幕中。在不想显示某些选项而又不愿意将它们从提交信息中删去时使用。其属性有以下几个:name:将输入值传给CGI程序时与输入值相对应的名称;Value:用于指定
17、hidden类型的值。image类型 这种类型使浏览器会在相应位置产生一个图像按钮。当用户单击该按钮时,浏览器就会将表单的输入信息传送给服务器。在使用图像按钮时,必须在标签中添加src属性指出图像所在位置。另外,很多图像标签中使用的属性规定也可以在图像按钮中使用。,第三章 Web页面制作基础 制作表单,下拉菜单标记符一般格式为:标记符有三个属性:name:同input中一样,当form提交时,作为信息的名称;size:该属性是可选的,控制可以同时显示在列表中的选项条数,其参数值是数字,默认值是1,当参数值小于下拉菜单中的菜单项数目时,浏览器会为该下拉菜单添加滚动条,用户可以使用滚动条来查看所有
18、的选项。multiple:该属性允许用户可以选择多个选项,否则只能选择一项。,第三章 Web页面制作基础 制作表单,标记符用于定义下拉菜单中的各个选项。标记符必须与标记符配套使用。有两个属性:value属性:是当某项被选中并提交后,web浏览器传送给服务器的数据。缺省时,浏览器传送选项的内容。Selected属性:用来指定选项的初始状态,表示该选项在初始时是被选中的。例:PHP ASP Vb Script Java Script,第三章 Web页面制作基础 制作表单,滚动文本编辑框标记符一般格式为:标记符有3个属性:name属性:用于指定文本输入框的名字。cols属性:输入窗口的列数。属性的参
19、数值是数字。表示一行所能显示的最大字符数。如果输入信息中有一行和几行的字符数大于cols属性的参数值,浏览器会为该文本输入框添加水平滚动条。rows属性:输入窗口的行数。其它意义跟cols类似。例:请输入相关文字,第三章 Web页面制作基础 制作表单,第三章 Web页面制作基础 制作表单,会员注册 欢迎光临百科图书,请在下面输入您的基本信息 会员名:密码:性别:男女,第三章 Web页面制作基础 制作表单,年龄:所在学校:南京大学 南京林业大学 南京师范大学 东南大学你感兴趣的书籍种类:经济 文学 物理 生物 化学,第三章 Web页面制作基础 制作表单,历史 电子 地理 留言:,第三章 Web页
20、面制作基础 表单处理,Response.write 您的密码是:&userpassword&Response.write 您的性别是:&sex&Response.write 您的年龄是:&age&Response.write 您所在的大学是:&university&,第三章 Web页面制作基础 表单处理,Response.write 你感兴趣的书籍种类:If Request.form(love1)=true Then Response.write 经济 If Request.form(love2)=true Then Response.write、文学 If Request.form(love
21、3)=true Then Response.write、物理 If Request.form(love4)=true Then Response.write、生物 If Request.form(love5)=true Then Response.write、化学 If Request.form(love6)=true Then Response.write、历史 If Request.form(love7)=true Then Response.write、电子 If Request.form(love8)=true Then Response.write、地理 Response.write
22、 Response.write 您的留言是:&information&%,第三章 Web页面制作基础 表单处理,第三章 Web页面制作基础 框架结构,有时候需要在各个网页间跳转时,希望某个页面保持在浏览器中,这时就要用到网页的框架结构。框架结构的一般格式为:。frameset标记内使用另一个标记符来指定框架中每个小(子)窗口的内容。其具体格式为:,第三章 Web页面制作基础 框架结构,Frameset标记有两个属性:Rows属性值:用来说明窗口横向分割的情况。ROWS属性可以指定一系列的值,它们之间用逗号隔开,给出几个值就纵向将窗口分成几个窗口。这些值可以使用像素点、百分比、剩余值和它们的混合
23、形式表示。例:Cols属性值:用来说明窗口纵向分割的情况。,第三章 Web页面制作基础 框架结构,FRAME标记Frame是一个单向标记,使用时放在frameset的开始和结束标记之间。它有六个属性来描述每个子窗口的风格:src:该属性用来链接到一个html文件;name:表示子窗口的名字;marginwidth:用来控制显示内容和窗口左右边界的距离,默认为1;marginheight:用来控制显示内容和窗口上下边界的距离,默认为1;scrolling:指定子窗口是否使用滚动条,有Yes/No/Auto三个值,默认auto,即根据窗口内容决定是否有滚动条;noresize:使用该属性后,指定窗
24、口不能调整窗口大小。,第三章 Web页面制作基础 框架结构,如果想在浏览器中同时做横向和纵向分割,则需要嵌套使用FRAMESET标记,下面提供了一种形式,其形式是:,第三章 Web页面制作基础 框架结构,例:,第三章 Web页面制作基础 框架结构,TARGET属性在框架页面中,每个子窗口内对应一个Frame语句,在该语句中的SRC属性指明了链接的HTML,该文件显示在Frame对应的窗口中。但如果该HTML文件含有超链接,当用户点击该链接时,链接的网页放在哪个窗口呢?如果没有指定,则在原来的子窗口打开;如果要指定在哪个子窗口打开,就要使用Target属性。利用该属性可以完成链接的HTML文件在
25、指定的子窗口打开。,第三章 Web页面制作基础 框架结构,如果想把提交表单的结果放在指定的窗口,可以在Form标记中使用Target属性。语法如下:,第四章 ASP内置对象,ASP概述ASP是Active Server Pages的简称,是服务器端脚本编写环境(包括HTML、VBScript、JavaScript等),使用它可以创建和运行动态、交互的、高性能的web服务器应用程序。使用ASP可以组合HTML页、脚本命令和ActiveX组件以创建交互的Web页和基于Web的功能强大的应用程序。由于所有的程序都在服务器端执行,这样就大大减轻了客户端浏览器的负担,提高了交互速度。ASP页是包括HTM
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务 网页 设计 网站 建设
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-6479582.html