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

《电子商务网页设计与网站建设课件》由会员分享，可在线阅读，更多相关《电子商务网页设计与网站建设课件（336页珍藏版）》请在金锄头文库上搜索。

1、网页设计与网站建设,河南蝶动科技制作,第一章 电子商务网站建设概述,电子商务网站定义 电子商务网站是指一个企业、机构或公司在互联网上建立的站点，其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。 电子商务网站功能 企业形象宣传 新闻发布、供求信息发布 产品和服务项目展示 商品和服务定购 转账与支付、物流应用 信息搜索与查询 客户信息管理 销售业务信息管理,第一章 电子商务网站建设概述,电子商务网站的架构,第一章 电子商务网站建设概述,电子商务网站的构成要素 网站域名 网站物理地点 网站页面 商品目录 购物车 付款台 计数器 留言板 会员管理 商品盘点更新 客户资料管理 商品

2、配送,第二章 网站总体设计,网站CI设计 网站的CI设计，主要是指网站的标志、色彩、字 体、标语，是一个网站建立CI形象的关键，是网站 的表面文章、形象工程。通过对网站的标志、色 彩、字体、标语设计，建立起网站的整体形象。 网站的标志（Logo）、名称 标准色彩 标准字体 宣传标语,第二章 网站总体设计,网站的目录结构 网站的目录是指建立网站时创建的目录。 不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主栏目目录下都建立独立的Images目录 目录的层次不要太深 不要使用中文目录 不要使用过长的目录 尽量使用意义明确的目录,第二章 网站总体设计,链接结构 网站的链接结构是指页面之

3、间相互链接的拓扑结构。研究网站的链接结构的目的 在于：用最少的链接，使浏览最有效率。 一般建立网站的链接结构有两种基本方式： 树状链接结构 星状链接结构,第三章 Web页面制作基础 HTML标记,HTML语言 HTML是超文本标记（Hyper Text Markup Language）的缩写，是一种描述文档结构的语言，它使用描述性的标记符来指明文档的结构。,第三章 Web页面制作基础 HTML标记,例： 这是标题部分 你好，这是正文部分！ ,第三章 Web页面制作基础 HTML标记,HTML标记符一般有两种： 一般标记符（容器标记符） 这些标记符的起始部分与结束部分必须成对出现 空标记符 只是

4、单一的一个标记符而已，如标记符,第三章 Web页面制作基础 HTML标记,文件结构标记符 文件结构标记符标识文件的结构。主要包括如下标记 符 ： HTML标记符 一般格式为： HEAD标记符 一般格式为： BODY标记符 一般格式为：,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记,区段格式标记符 区段格式标记符将HTML文件中的某个区段文字以特定格式显示，以增加可视性。此类标记符主要包括： Title标记符 用于规定HTML文档的标题。 一般格式为： HI标记符 HI用于简要描述段落的标题，共有六个级别：H1，H2，H3，H4，H5，H6。其中以H1标题级

5、别为最高，H6标题级别最低。,第三章 Web页面制作基础 HTML标记,例： HTML标题演示示例 标题h1文字显示! 标题h2文字显示! 标题h3文字显示! 标题h4文字显示! 标题h5文字显示! 标题h6文字显示! ,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记,换行标记符 是换行标记符，它是单独出现的，作用相当于插入一个回车符。 段落标记符 标记符用于划分段落，控制文本放置。 一般格式为： 水平标记符 标记符是单独使用的标记符，它的作用是换行并在该行下面画一条水平直线。 标记符的属性有：Size、Width、align和color。,第三章 Web页

6、面制作基础 HTML标记,size属性用以规定水平线的高度，该属性的参数值必须是数字； width属性用以规定水平线的宽度，该属性的参数值可以是数字（代表字符数）或者百分比（占浏览器宽度的百分比），缺省时水平线占整个浏览器窗口宽度； align属性规定水平线在浏览器窗口的位置，其参数值为left（左侧）、center（中间）、right（右侧）之一； color属性用以指定水平线的颜色。,第三章 Web页面制作基础 HTML标记,预格式化标记符 标记符是预格式化标记符，它是成对出现的。Web浏览器按编辑文档时的字符位置将和标记符之间的内容一成不变地显示出来。,第三章 Web页面制作基础 HTM

7、L标记,例： PRE标记符测试文档 1992 January On 15th , the first line mode browser was Available by anonymous FTP ,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记,字符格式标记符 字符格式标记符用来改变HTML文档的显示外观，增加文件的美观程度。HTML文档的字符格式标记符主要有： 之间的内容将显示为黑体文字； 之间的内容将显示为斜体文字； 之间的内容将显示为带下划线的文字； 之间的内容将显示为删除线； 之间的内容加大显示； 文本采用small字体 之间的内容居中显示； 之

8、间的内容显示上标；,第三章 Web页面制作基础 HTML标记,之间的内容显示下标； 之间的内容显示强调； 之间的内容显示加重强调； 之间的内容通过标记符内的属性设置来改变字体。它具有的属性有size、face和color。 设置字体大小的属性size的有效值是从1到7的整数 Face属性是设置字体的类型，其值就是字体类型的名字，如“楷体_GB2312” Color属性设置字体的颜色，其值是颜色值是十六进制值 例：这是Font设置的文字。,第三章 Web页面制作基础 HTML标记,链接标记符 HTML中的链接包括两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移到锚标处时会变成小手状。此时，用

9、户通过点击鼠标就可以到达链接的目标点。 HTML是通过链接标记符来实现超链接的。超链接标记符是成对出现的标记符，首标记符和尾标记符之间的内容就是锚标。标记符有一个不可缺省的属性HREF，用于指定链接目标点的位置。 链接标记符的一般形式为：,第三章 Web页面制作基础 HTML标记,从一个文件链接到另一个文件有两种方法： 链接到一个文件的本身 例如：Page two 链接到一个文件中的特定位置 若要链接到文件中的特定位置，就需要先在文档中加入链接点，即链接的目标点。 实例如下：Point A 字符串“Point A”就是待链接的目标点。 通过语句：This Link实现了超链接。,第三章 Web

10、页面制作基础 HTML标记,表格标记符 表格标记符 一般格式为： 标记符的属性主要有： border属性 width属性 Height属性 align属性 cellspacing属性 cellpadding属性 行标记符 一般格式为： 标记符有两个属性： Align属性 Valign属性 单元格标记符 一般格式为： 标记符的属性主要有： rowspan属性 colspan属性 align属性 valign属性 列标题定义标记符 一般格式为：,第三章 Web页面制作基础 HTML标记,第三章 Web页面制作基础 HTML标记, HTML标记测试实例 HTML标记显示结果 本实例是对HTML标记的

11、学习效果的一个展示！ HTML标记是学好网页设计与网站建设这门课的基础，必须掌握它！ 链接 下面是表格的设计，其中它的边框宽度为1，表格的宽度占屏幕的50，表格中的内容居中显示 学号姓名 001张三 002李四 共2名学生 ,第三章 Web页面制作基础 制作表单,表单（Form）是用于采集用户输入的信息，从而实现与用户交互的表格。例如，用表单设计订货单、征集用户意见、收集用户信息等等。每一个表单都有一个“提交”按钮，当用户填写完表单并按下“提交”按钮时，用户所填写的信息就发送到web服务器，由服务器负责处理所提交的信息。 表单一般由两个部分组成：HTML代码和CGI程序。其中HTML代码主要用

12、来生成表单的可视化界面，CGI程序用来负责对表单所包含的信息进行解释或处理。,第三章 Web页面制作基础 制作表单,表单标记符 一般格式为： 标记符有两个不可缺省的属性： ACTION属性 一般格式为： ACTION属性后面的等号表明当这个表单提交后，用于指定服务器端处理该表单的CGI程序。它的参数值就是该程序的URL。,第三章 Web页面制作基础 制作表单,METHOD属性 一般格式为： 用于指定表单信息传送到服务器的方式。属性的参数值为get和post之一。 使用GET时，将Form的输入信息作为字符串附加到Action所设定的URL后面，中间用“？”隔开，每个表单域之间用“&”隔开，然后

13、把整个字符串传送到服务器端。由于系统环境变量的长度限制输入字符串的长度，因此用Get方式所能得到的信息不能很多，一般在4000字符左右。而且在浏览器的地址栏中将以明文的形式显示在表单中的各个表单域值。 使用Post方式，将Form的输入信息进行包装，而不用附加在Action的URL之后，其传送的信息数据量基本上没有什么限制，而且在浏览器的地址栏中不会显示表单域的值。 使用get方式的特点是数据立即传送、执行效率高，但它传送的信息数据量小。而使用post方式则可以传送大量信息，但效率不如get方式高。,第三章 Web页面制作基础 制作表单,输入标记符 一般格式为 Input标记有六个属性：typ

14、e、name、size、value、maxlength、checked。其中type和name是两个固定的属性。 Name属性的参数值是相应处理程序中的变量名，web服务器将把这条输入信息的值赋予name属性规定的变量。,第三章 Web页面制作基础 制作表单,Type属性用于指定该输入项提供的输入方式。在不同的输入方式下，标记符的格式略有不同。Type属性的参数值可为以下之一 Text类型 这是type的默认类型，指单行文本输入框。 其属性有以下几个： name：将输入值传给CGI程序时与输入值相对应的名称； Size：输入窗口的长度，默认值是20，以字节为单位； Value：设定预先在窗口显

15、示的信息； Maxlength：限制最多输入的字节数。 password类型 密码输入框，与text类型输入基本相同，但浏览器并不在文本框中显示用户输入的字符，而是将输入的每个字符显示密码提示符“*”。 其属性和Text类型一致。,第三章 Web页面制作基础 制作表单,radio类型 表示该输入项是一个单选项，即在多个选择之间只能选择其中一项。由于选择是唯一的，因此属性name取相同的值，但属性value的值各不相同。 其属性有以下几个： name：将输入值传给CGI程序时与输入值相对应的名称； value：每个选项对应的值； checked：预选项目。 checkbox类型 表示该输入项是一

16、个复选框，用户可同时选中表单中的一个或几个复选框作为输入信息。由于每一项都可以被选择，属性name取不同的值，value取相同的值。 其属性和radio类型一致。,第三章 Web页面制作基础 制作表单,submit类型 这种类型在浏览器中产生一个提交按钮。当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。 其属性有以下几个： name：将输入值传给CGI程序时与输入值相对应的名称； Value：用于指定显示提交按钮上的文字。 reset类型 这种类型的按钮让浏览器产生一个重置按钮，当用户鼠标点击这个按钮后，则用户输入信息都会被全部清除，以便用户重新输入。 其属性和submit类型一致。,第三章 Web页面制作基础 制作表单,hidden类型 这种类型将input标记的区域隐藏起来，使之不出现在屏幕中。在不想显示某些选项而又不愿意将它