电子商务网页设计与网站建设

网页设计与网站建设河南蝶动科技制作第一章电子商务网站建设概述电子商务网站定义电子商务网站是指一个企业、机构或公司在互联网上建立的站点，其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。电子商务网站功能企业形象宣传新闻发布、供求信息发布产品和服务项目展示商品和服务定购转账与支付、物流应用信息搜索与查询客户信息管理销售业务信息管理第一章电子商务网站建设概述电子商务网站的架构客户数据产品数据销售数据其他数据接口技术目录、代码、素材代码、程序、脚本信息发布展现商务交易处理管理系统维护接口技术公钥基础设施PKI安全协议与模型认证服务电子证书密钥管理接口技术结算转账数据库服务器浏览器注册、登录选择、订购购买、支付商业银行商家账户消费者银行消费者账户第一章电子商务网站建设概述电子商务网站的构成要素网站域名网站物理地点网站页面商品目录购物车付款台计数器留言板会员管理商品盘点更新客户资料管理商品配送第二章网站总体设计网站CI设计网站的CI设计，主要是指网站的标志、色彩、字体、标语，是一个网站建立CI形象的关键，是网站的表面文章、形象工程。通过对网站的标志、色彩、字体、标语设计，建立起网站的整体形象。网站的标志（Logo）、名称标准色彩标准字体宣传标语第二章网站总体设计网站的目录结构网站的目录是指建立网站时创建的目录。不要将所有文件都存放在根目录下按栏目内容建立子目录在每个主栏目目录下都建立独立的Images目录目录的层次不要太深不要使用中文目录不要使用过长的目录尽量使用意义明确的目录第二章网站总体设计链接结构网站的链接结构是指页面之间相互链接的拓扑结构。研究网站的链接结构的目的在于：用最少的链接，使浏览最有效率。一般建立网站的链接结构有两种基本方式：树状链接结构星状链接结构首页IT新闻页娱乐新闻页财经新闻页一级页面二级页面[财经新闻1，财经新闻2...][娱乐新闻1，娱乐新闻2...][IT新闻1，IT新闻2...]第三章Web页面制作基础－－HTML标记HTML语言HTML是超文本标记（HyperTextMarkupLanguage）的缩写，是一种描述文档结构的语言，它使用描述性的标记符来指明文档的结构。第三章Web页面制作基础－－HTML标记例：htmlheadtitle这是标题部分/title/headbodyp你好，这是正文部分！/P/body/html第三章Web页面制作基础－－HTML标记HTML标记符一般有两种：一般标记符（容器标记符）这些标记符的起始部分与结束部分必须成对出现空标记符只是单一的一个标记符而已，如hr标记符第三章Web页面制作基础－－HTML标记文件结构标记符文件结构标记符标识文件的结构。主要包括如下标记符：HTML标记符一般格式为：HTML……../HTMLHEAD标记符一般格式为：head……/headBODY标记符一般格式为：body……/body第三章Web页面制作基础－－HTML标记htmlhead….../headbody……/bodyhtml主体区标题区HTML文件结构第三章Web页面制作基础－－HTML标记区段格式标记符区段格式标记符将HTML文件中的某个区段文字以特定格式显示，以增加可视性。此类标记符主要包括：Title标记符用于规定HTML文档的标题。一般格式为：title……/titleHI标记符HI用于简要描述段落的标题，共有六个级别：H1，H2，H3，H4，H5，H6。其中以H1标题级别为最高，H6标题级别最低。第三章Web页面制作基础－－HTML标记例：htmlheadtitleHTML标题演示示例/title/headbodyh1标题h1文字显示!/h1h2标题h2文字显示!/h2h3标题h3文字显示!/h3h4标题h4文字显示!/h4h5标题h5文字显示!/h5h6标题h6文字显示!/h6/body/html第三章Web页面制作基础－－HTML标记第三章Web页面制作基础－－HTML标记换行标记符BR是换行标记符，它是单独出现的，作用相当于插入一个回车符。段落标记符P标记符用于划分段落，控制文本放置。一般格式为：P……/P水平标记符HR标记符是单独使用的标记符，它的作用是换行并在该行下面画一条水平直线。HR标记符的属性有：Size、Width、align和color。第三章Web页面制作基础－－HTML标记size属性用以规定水平线的高度，该属性的参数值必须是数字；width属性用以规定水平线的宽度，该属性的参数值可以是数字（代表字符数）或者百分比（占浏览器宽度的百分比），缺省时水平线占整个浏览器窗口宽度；align属性规定水平线在浏览器窗口的位置，其参数值为left（左侧）、center（中间）、right（右侧）之一；color属性用以指定水平线的颜色。第三章Web页面制作基础－－HTML标记预格式化标记符PRE标记符是预格式化标记符，它是成对出现的。Web浏览器按编辑文档时的字符位置将PRE和/PRE标记符之间的内容一成不变地显示出来。第三章Web页面制作基础－－HTML标记例：htmlheadtitlePRE标记符测试文档/title/headbodypre1992JanuaryOn15th,thefirstlinemodebrowserwasAvailablebyanonymousFTP/pre/body/html第三章Web页面制作基础－－HTML标记第三章Web页面制作基础－－HTML标记字符格式标记符字符格式标记符用来改变HTML文档的显示外观，增加文件的美观程度。HTML文档的字符格式标记符主要有：B……/B之间的内容将显示为黑体文字；I……/I之间的内容将显示为斜体文字；U……/U之间的内容将显示为带下划线的文字；Strike……/Strike之间的内容将显示为删除线；big……/big之间的内容加大显示；small……/small文本采用small字体center……/center之间的内容居中显示；sup……/sup之间的内容显示上标；第三章Web页面制作基础－－HTML标记sub……/sub之间的内容显示下标；em……/em之间的内容显示强调；strong……/strong之间的内容显示加重强调；font……/font之间的内容通过font标记符内的属性设置来改变字体。它具有的属性有size、face和color。设置字体大小的属性size的有效值是从1到7的整数Face属性是设置字体的类型，其值就是字体类型的名字，如“楷体_GB2312”Color属性设置字体的颜色，其值是颜色值是十六进制值例：fontcolor=#0000ccsize=7face=楷体_GB2312这是Font设置的文字。/font第三章Web页面制作基础－－HTML标记链接标记符HTML中的链接包括两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移到锚标处时会变成小手状。此时，用户通过点击鼠标就可以到达链接的目标点。HTML是通过链接标记符来实现超链接的。超链接标记符A是成对出现的标记符，首标记符A和尾标记符/A之间的内容就是锚标。A标记符有一个不可缺省的属性HREF，用于指定链接目标点的位置。链接标记符的一般形式为：A……/A第三章Web页面制作基础－－HTML标记从一个文件链接到另一个文件有两种方法：链接到一个文件的本身例如：AHREF=“page.htm”Pagetwo/A链接到一个文件中的特定位置若要链接到文件中的特定位置，就需要先在文档中加入链接点，即链接的目标点。实例如下：Aname=pointAH2PointA/H2/A字符串“PointA”就是待链接的目标点。通过语句：Ahref=links.htm#PointAThisLink/A实现了超链接。第三章Web页面制作基础－－HTML标记表格标记符表格标记符一般格式为：TABLE……/TABLETABLE标记符的属性主要有：border属性width属性Height属性align属性cellspacing属性cellpadding属性行标记符一般格式为：TR……/TRTR标记符有两个属性：Align属性Valign属性单元格标记符一般格式为：TD……/TDTD标记符的属性主要有：rowspan属性colspan属性align属性valign属性列标题定义标记符TH一般格式为：TH……/TH第三章Web页面制作基础－－HTML标记第三章Web页面制作基础－－HTML标记htmlheadtitleHTML标记测试实例/title/headbodycenterBfontsize=5color=ff0000HTML标记显示结果/font/Bhr本实例是对HTML标记的学习效果的一个展示！brHTML标记是学好网页设计与网站建设这门课的基础，必须掌握它！brAhref=“test.htm链接/Ap下面是表格的设计，其中它的边框宽度为1，表格的宽度占屏幕的50％，表格中的内容居中显示/ptableborder=1width=50%TRalign=centerTH学号/THTH姓名/TH/TRTRalign=centerTD001/TDTD张三/TD/TRTRalign=centerTD002/TDTD李四/TD/TRTRalign=centerTDcolspan=2共2名学生/TD/TR/table/center/body/html第三章Web页面制作基础－－制作表单表单（Form）是用于采集用户输入的信息，从而实现与用户交互的表格。例如，用表单设计订货单、征集用户意见、收集用户信息等等。每一个表单都有一个“提交”按钮，当用户填写完表单并按下“提交”按钮时，用户所填写的信息就发送到web服务器，由服务器负责处理所提交的信息。表单一般由两个部分组成：HTML代码和CGI程序。其中HTML代码主要用来生成表单的可视化界面，CGI程序用来负责对表单所包含的信息进行解释或处理。第三章Web页面制作基础－－制作表单表单标记符一般格式为：form……/formform标记符有两个不可缺省的属性：ACTION属性一般格式为：FORMACTION=…ACTION属性后面的等号表明当这个表单提交后，用于指定服务器端处理该表单的CGI程序。它的参数值就是该程序的URL。第三章Web页面制作基础－－制作表单METHOD属性一般格式为：FORMACTION=…METHOD＝…用于指定表单信息传送到服务器的方式。属性的参数值为get和post之一。使用GET时，将Form的输入信息作为字符串附加到Action所设定的URL后面，中间用“？”隔开，每个表单域之间用“&”隔开，然后把整个字符串传送到服务器端。由于系统环境变量的长度限制输入字符串的长度，因此用Get方式所能得到的信息不能很多，一般在4000字符左右。而且在浏览器的地址栏中将以明文的形式显示在表单中的各个表单域