电子商务网页设计与网站建设课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《电子商务网页设计与网站建设课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务 网页 设计 网站 建设 课件
- 资源描述:
-
1、网页设计与网站建设网页设计与网站建设河南蝶动科技制作第一章第一章 电子商务网站建设概述电子商务网站建设概述 l电子商务网站定义l电子商务网站是指一个企业、机构或公司在互联网上建立的站点,其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。 l电子商务网站功能l企业形象宣传企业形象宣传l新闻发布、供求信息发布新闻发布、供求信息发布 l产品和服务项目展示产品和服务项目展示 l商品和服务定购商品和服务定购 l转账与支付、物流应用转账与支付、物流应用 l信息搜索与查询信息搜索与查询 l客户信息管理客户信息管理 l销售业务信息管理销售业务信息管理 第一章第一章 电子商务网站建设概述电子
2、商务网站建设概述l电子商务网站的架构客户数据产品数据销售数据其他数据接口技术目录、代码、素材代码、程序、脚本信息发布展现商务交易处理管理系统维护接口技术 公钥基础设施PKI安全协议与模型认证服务电子证书密钥管理接口技术结算转账数据库服务器WWW服务器安全服务器结算服务器专用网络Internet网站访问者WWW浏览器注册、登录选择、订购购买、支付商业银行商家账户消费者银行消费者账户第一章第一章 电子商务网站建设概述电子商务网站建设概述l电子商务网站的构成要素l网站域名 l网站物理地点 l网站页面 l商品目录 l购物车 l付款台 l计数器 l留言板 l会员管理 l商品盘点更新 l客户资料管理 l商
3、品配送 第二章第二章 网站总体设计网站总体设计 l网站CI设计网站的CI设计,主要是指网站的标志、色彩、字体、标语,是一个网站建立CI形象的关键,是网站的表面文章、形象工程。通过对网站的标志、色彩、字体、标语设计,建立起网站的整体形象。l网站的标志(Logo)、名称l标准色彩 l标准字体 l宣传标语 第二章第二章 网站总体设计网站总体设计l网站的目录结构网站的目录是指建立网站时创建的目录。 l不要将所有文件都存放在根目录下 l按栏目内容建立子目录 l在每个主栏目目录下都建立独立的Images目录 l目录的层次不要太深 l不要使用中文目录 l不要使用过长的目录 l尽量使用意义明确的目录 第二章第
4、二章 网站总体设计网站总体设计l链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。研究网站的链接结构的目的在于:用最少的链接,使浏览最有效率。一般建立网站的链接结构有两种基本方式: l树状链接结构 l星状链接结构 首页IT新闻页娱乐新闻页财经新闻页一级页面二级页面财经新闻1,财经新闻2.娱乐新闻1,娱乐新闻2.IT新闻1,IT新闻2.第三章第三章 Web页面制作基础页面制作基础 HTML标记标记lHTML语言 HTML是超文本标记(Hyper Text Markup Language)的缩写,是一种描述文档结构的语言,它使用描述性的标记符来指明文档的结构。 第三章第三章 Web页面制作基
5、础页面制作基础 HTML标记标记例: 这是标题部分 你好,这是正文部分! 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记lHTML标记符一般有两种:l一般标记符(容器标记符)这些标记符的起始部分与结束部分必须成对出现 l空标记符 只是单一的一个标记符而已,如标记符 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l文件结构标记符 文件结构标记符标识文件的结构。主要包括如下标记符 :lHTML标记符 一般格式为:. lHEAD标记符 一般格式为: lBODY标记符 一般格式为: 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记 . 主体区标题区HTML
6、文件结构第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l区段格式标记符 区段格式标记符将HTML文件中的某个区段文字以特定格式显示,以增加可视性。此类标记符主要包括:lTitle标记符用于规定HTML文档的标题。一般格式为: lHI标记符 HI用于简要描述段落的标题,共有六个级别:H1,H2,H3,H4,H5,H6。其中以H1标题级别为最高,H6标题级别最低。 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记例: HTML标题演示示例 标题h1文字显示! 标题h2文字显示! 标题h3文字显示! 标题h4文字显示! 标题h5文字显示! 标题h6文字显示! 第三章第三
7、章 Web页面制作基础页面制作基础 HTML标记标记第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l换行标记符是换行标记符,它是单独出现的,作用相当于插入一个回车符。 l段落标记符 标记符用于划分段落,控制文本放置。 一般格式为:l水平标记符 标记符是单独使用的标记符,它的作用是换行并在该行下面画一条水平直线。 标记符的属性有:Size、Width、align和color。 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记size属性用以规定水平线的高度,该属性的参数值必须是数字; width属性用以规定水平线的宽度,该属性的参数值可以是数字(代表字符数)或者百分
8、比(占浏览器宽度的百分比),缺省时水平线占整个浏览器窗口宽度; align属性规定水平线在浏览器窗口的位置,其参数值为left(左侧)、center(中间)、right(右侧)之一;color属性用以指定水平线的颜色。 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l预格式化标记符 标记符是预格式化标记符,它是成对出现的。Web浏览器按编辑文档时的字符位置将和标记符之间的内容一成不变地显示出来。第三章第三章 Web页面制作基础页面制作基础 HTML标记标记例: PRE标记符测试文档 1992 January On 15th , the first line mode brows
9、er was Available by anonymous FTP 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l字符格式标记符 字符格式标记符用来改变HTML文档的显示外观,增加文件的美观程度。HTML文档的字符格式标记符主要有:l之间的内容将显示为黑体文字;l之间的内容将显示为斜体文字;l之间的内容将显示为带下划线的文字;l之间的内容将显示为删除线;l之间的内容加大显示;l文本采用small字体 l之间的内容居中显示;l之间的内容显示上标;第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l之间的内
10、容显示下标;l之间的内容显示强调;l之间的内容显示加重强调;l之间的内容通过标记符内的属性设置来改变字体。它具有的属性有size、face和color。 设置字体大小的属性size的有效值是从1到7的整数Face属性是设置字体的类型,其值就是字体类型的名字,如“楷体_GB2312” Color属性设置字体的颜色,其值是颜色值是十六进制值 例:这是Font设置的文字。 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l链接标记符 lHTML中的链接包括两部分:锚标和目标点。锚标就是链接的源点,当鼠标被移到锚标处时会变成小手状。此时,用户通过点击鼠标就可以到达链接的目标点。lHTML
11、是通过链接标记符来实现超链接的。超链接标记符是成对出现的标记符,首标记符和尾标记符之间的内容就是锚标。标记符有一个不可缺省的属性HREF,用于指定链接目标点的位置。l链接标记符的一般形式为: 第三章第三章 Web页面制作基础页面制作基础 HTML标记标记l从一个文件链接到另一个文件有两种方法:链接到一个文件的本身例如:Page two 链接到一个文件中的特定位置 若要链接到文件中的特定位置,就需要先在文档中加入链接点,即链接的目标点。实例如下:Point A字符串“Point A”就是待链接的目标点。通过语句:This Link实现了超链接。 第三章第三章 Web页面制作基础页面制作基础 HT
12、ML标记标记l表格标记符 l表格标记符一般格式为: 标记符的属性主要有:border属性 width属性 Height属性align属性 cellspacing属性 cellpadding属性l行标记符一般格式为:标记符有两个属性:Align属性Valign属性 l单元格标记符一般格式为: 标记符的属性主要有:rowspan属性colspan属性 align属性valign属性l列标题定义标记符一般格式为:第三章第三章 Web页面制作基础页面制作基础 HTML标记标记第三章第三章 Web页面制作基础页面制作基础 HTML标记标记HTML标记测试实例HTML标记显示结果本实例是对HTML标记的学
13、习效果的一个展示!HTML标记是学好网页设计与网站建设这门课的基础,必须掌握它!链接下面是表格的设计,其中它的边框宽度为1,表格的宽度占屏幕的50,表格中的内容居中显示学号姓名001张三002李四共2名学生第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单l表单(Form)是用于采集用户输入的信息,从而实现与用户交互的表格。例如,用表单设计订货单、征集用户意见、收集用户信息等等。每一个表单都有一个“提交”按钮,当用户填写完表单并按下“提交”按钮时,用户所填写的信息就发送到web服务器,由服务器负责处理所提交的信息。 l表单一般由两个部分组成:HTML代码和CGI程序。其中HTML代
14、码主要用来生成表单的可视化界面,CGI程序用来负责对表单所包含的信息进行解释或处理。第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单l表单标记符l一般格式为:l标记符有两个不可缺省的属性:lACTION属性一般格式为:ACTION属性后面的等号表明当这个表单提交后,用于指定服务器端处理该表单的CGI程序。它的参数值就是该程序的URL。 第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单lMETHOD属性一般格式为: 用于指定表单信息传送到服务器的方式。属性的参数值为get和post之一。使用GET时,将Form的输入信息作为字符串附加到Action所设定的URL后面,
15、中间用“?”隔开,每个表单域之间用“&”隔开,然后把整个字符串传送到服务器端。由于系统环境变量的长度限制输入字符串的长度,因此用Get方式所能得到的信息不能很多,一般在4000字符左右。而且在浏览器的地址栏中将以明文的形式显示在表单中的各个表单域值。使用Post方式,将Form的输入信息进行包装,而不用附加在Action的URL之后,其传送的信息数据量基本上没有什么限制,而且在浏览器的地址栏中不会显示表单域的值。 使用get方式的特点是数据立即传送、执行效率高,但它传送的信息数据量小。而使用post方式则可以传送大量信息,但效率不如get方式高。 第三章第三章 Web页面制作基础页面制作基础
16、制作表单制作表单l输入标记符l一般格式为 lInput标记有六个属性:type、name、size、value、maxlength、checked。其中type和name是两个固定的属性。lName属性的参数值是相应处理程序中的变量名,web服务器将把这条输入信息的值赋予name属性规定的变量。 第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单lType属性用于指定该输入项提供的输入方式。在不同的输入方式下,标记符的格式略有不同。Type属性的参数值可为以下之一lText类型 这是type的默认类型,指单行文本输入框。其属性有以下几个:name:将输入值传给CGI程序时与输入值相
17、对应的名称;Size:输入窗口的长度,默认值是20,以字节为单位;Value:设定预先在窗口显示的信息;Maxlength:限制最多输入的字节数。lpassword类型 密码输入框,与text类型输入基本相同,但浏览器并不在文本框中显示用户输入的字符,而是将输入的每个字符显示密码提示符“*”。 其属性和Text类型一致。第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单lradio类型表示该输入项是一个单选项,即在多个选择之间只能选择其中一项。由于选择是唯一的,因此属性name取相同的值,但属性value的值各不相同。 其属性有以下几个:name:将输入值传给CGI程序时与输入值相
18、对应的名称;value:每个选项对应的值;checked:预选项目。 lcheckbox类型 表示该输入项是一个复选框,用户可同时选中表单中的一个或几个复选框作为输入信息。由于每一项都可以被选择,属性name取不同的值,value取相同的值。 其属性和radio类型一致。第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单lsubmit类型 这种类型在浏览器中产生一个提交按钮。当用户单击该按钮时,浏览器就会将表单的输入信息传送给服务器。 其属性有以下几个:name:将输入值传给CGI程序时与输入值相对应的名称;Value:用于指定显示提交按钮上的文字。lreset类型 这种类型的按钮
19、让浏览器产生一个重置按钮,当用户鼠标点击这个按钮后,则用户输入信息都会被全部清除,以便用户重新输入。 其属性和submit类型一致。第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单lhidden类型 这种类型将input标记的区域隐藏起来,使之不出现在屏幕中。在不想显示某些选项而又不愿意将它们从提交信息中删去时使用。其属性有以下几个:name:将输入值传给CGI程序时与输入值相对应的名称;Value:用于指定hidden类型的值。limage类型 这种类型使浏览器会在相应位置产生一个图像按钮。当用户单击该按钮时,浏览器就会将表单的输入信息传送给服务器。 在使用图像按钮时,必须在标
20、签中添加src属性指出图像所在位置。另外,很多图像标签中使用的属性规定也可以在图像按钮中使用。 第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单l下拉菜单标记符l一般格式为: l标记符有三个属性:lname:同input中一样,当form提交时,作为信息的名称;lsize:该属性是可选的,控制可以同时显示在列表中的选项条数,其参数值是数字,默认值是1,当参数值小于下拉菜单中的菜单项数目时,浏览器会为该下拉菜单添加滚动条,用户可以使用滚动条来查看所有的选项。lmultiple:该属性允许用户可以选择多个选项,否则只能选择一项。 第三章第三章 Web页面制作基础页面制作基础 制作表单
21、制作表单l标记符用于定义下拉菜单中的各个选项。标记符必须与标记符配套使用 。l有两个属性:value属性:是当某项被选中并提交后,web浏览器传送给服务器的数据。缺省时,浏览器传送选项的内容。Selected属性:用来指定选项的初始状态,表示该选项在初始时是被选中的。 例: PHP ASP Vb Script Java Script 第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单l滚动文本编辑框标记符l一般格式为: l标记符有3个属性:lname属性:用于指定文本输入框的名字。lcols属性:输入窗口的列数。属性的参数值是数字。表示一行所能显示的最大字符数。如果输入信息中有一行
22、和几行的字符数大于cols属性的参数值,浏览器会为该文本输入框添加水平滚动条。lrows属性:输入窗口的行数。其它意义跟cols类似。例:请输入相关文字 第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单 会员注册 欢迎光临百科图书,请在下面输入您的基本信息 会员名: 密码: 性别:男女 第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单年龄:所在学校: 南京大学 南京林业大学 南京师范大学 东南大学你感兴趣的书籍种类:经济 文学 物理 生物 化学第三章第三章 Web页面制作基础页面制作基础 制作表单制作表单
23、 历史 电子 地理 留言: 第三章第三章 Web页面制作基础页面制作基础 表单处理表单处理 % dim username dim sex dim userpassword dim age dim university dim information username=Request.form(1)userpassword=Request.form(password) sex=Request.form(sex) age=Request.Form(age) university=Request.form(university)information=Request.form(information
24、)Response.write 您的姓名是: & username & 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(l
25、ove2)=true Then Response.write 、文学 If Request.form(love3)=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 Re
展开阅读全文