第4章电子商务网站建设_第1页
第4章电子商务网站建设_第2页
第4章电子商务网站建设_第3页
第4章电子商务网站建设_第4页
第4章电子商务网站建设_第5页
已阅读5页，还剩51页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

4.3网页的设计与制作4.2电子商务网站的实施4.1电子商务网站的策划第4章电子商务网站的建设4.1

电子商务网站的策划1.确定网站的服务对象3.确定网站的内容4.确定网站的功能2.确定网站的目标5.确定网站的装饰风格1.

确定网站的服务对象

由于网站资源有限，因此必须整合聚焦服务识别访问者范围。外部访问者客户：了解产品信息、订购、反馈供应商：了解公司产品计划、分析库存竞争者：了解公司战略和经营情况过客：值得访问信息（潜在客户）政府、其它组织和个人、投资者、债权者。内部访问者经常被忽略，仅限于企业的内部按照价值链和业务流程确定：研究部：了解客户的偏好制造部：了解客户对产品评价市场部：利用反馈信息制定特别促销方案财务部：了解客户定货和回款情况采购部：了解客户对产品（原料）评价2.

确定网站的目标公司的任务或目标（Why）补充（辅助）、尝试性、转型（战略调整）推广企业的产品和服务树立企业的形象，宣传企业的产品开展电子商务业务，并为各种客户提供服务和支持3.

确定网站的内容静态内容：一般、常规的信息，包括公司的历史、文化、所属行业等。较长时间内不需修改，通常在建设初期编制。动态内容：公司产品和服务的有关信息。经常变动，保持网站的吸引力，通常用作促销手段。4.

确定网站的功能网站的功能可分为主要功能和辅助功能：主要功能：信息发布、网上交易辅助功能：配合主要功能而设置的。如客户注册管理、客户的互动等。5.

确定网站的装饰风格装饰风格要注意形式服从内容与功能的需要装饰可分为如下三种类型：组织性装饰：

按照小组、系统的结构安排站点功能，如子站点安排布局、颜色基调（整体）功能性装饰：方便顾客利用，如功能、内容的布局安排（局部）可视性装饰：起着美化界面，如用图形等（部件）4.2

电子商务网站的实施1.电子商务网站的实施方式3.电子商务网站的开发4.电子商务网站的维护2.电子商务网站的实施准备1.

实施方式--外包？

--租借？

--自建？

外包指全权委托外部专业化公司提供一揽子解决方案，并且实施。

租借指向电子商务服务站点（ASP）租借存储空间建设站点。企业只需要提供有关材料，维护、收款以及物流配送由门户站点提供。自建指利用企业自身的技术力量，按照电子商务网站的计划书，来设计、开发、维护、推广网站。2.

实施准备(1)Web服务器建设(2)准备站点资料(3)选择网站开发工具

虚拟主机托管整机托管租用网页空间独立服务器

资料内容根据站点内容和功能规划选定材料网站形象策划网站整体形象，统筹安排网页的风格网页内容公司简介、产品资料（图片、价格）其它资料增值服务信息资料（相关产品技术资料、市场行情信息等）材料类型文字、图像、动画、声音、影视等网页设计工具：FrontPage、DreamWeaver图像处理工具：

Photoshop声音、影视处理软件交互式动态页面设计工具：微软ASP开发系统，Perl开发系统3.

网站开发企业电子商务站点的页面组成主要包括：主页、企业信息、新闻、产品服务、帮助、相关虚拟社区等页面主页风格：*导航型提供简洁、清晰的网站结构，树立企业的网上形象*内容展示型展示主要内容，提供直接、快捷的链接，一步到位*视觉效果文本型和图片型文本型追求简洁、快速，辅以图片；图片型美观、下载速度较慢。3.

网站开发1）电子商务网站的主页企业名称、标志、铭牌、网站图标（Logo）等要素企业站点的网址企业站点的导航系统企业产品和/或服务最新的信息、有关新闻企业的联系方式如E-mail、电话、传真等相关站点的链接2）电子商务网站的新闻页面产品或服务的最新信息，如品种、价格、实现方式等新项目的进行情况企业的内部变动情况行业的最新动态相关行业的情况3.

网站开发3）产品/服务页面

产品/服务介绍分为两部分：栏目入口处和转入具体页面后的产品介绍提供相关信息，尽可能详细，采用多媒体形式展示，虚拟现实

访问者、客户评价，BBS

在线订购和支付

定制订购，如提供购物篮（车）等形象订购系统、选取系统、配送系统、支付系统（如货款、运费、手续费计算）等，重点考虑方便、安全、自动。产品相关信息，产品使用小常识等

页面设计组织时要尽量简洁，按产品线/品牌分类。3.

网站开发4）企业信息页面

功能与作用对公众（客户、投资者）发布企业公开信息发布信息包括

*发展历程、企业大事记*组织架构、业务范围*合作伙伴、发展计划*财务信息（上市公司）页面设计：最好图文并茂，采用多媒体方式展示3.

网站开发5）帮助页面功能和作用

方便浏览者在繁杂的Web页面快速找到信息信息方面帮助*站点结构图（SiteMap）：展示主要链接

*站点内容搜索电子商务活动方面帮助*在线订购、定制规则*在线支付方式和具体方法*物流配送方式3.

网站开发6）虚拟社区虚拟社区的作用

培养访问者的忠诚度；供消费者交流购物体验，增加人气，建立访问者之间的群体关系提供功能*个人电子信箱*公告栏（BBS）*在线聊天室（Chat）*在线实时通信（ICQ）电子虚拟社区的建立选择独具特色的话题，一般与企业的产品、服务、经营方式相关。选择合适的论坛主持人。4.

网站维护电子商务网站维护的任务：保持链接的有效性及时更换信息，根据信息性质不同确定更换频率，保持信息的时效性，最好是规划、落实到具体部门，与业务整合在一起保持页面内容和拼写正确维持与访问者的良好关系，及时反馈4.3

网页的设计与制作1.网页制作的主要软件工具3.HTML常用标记2.HTML概述1.

网页制作的主要软件工具网页设计软件——DreamweaverDreamweaver是一款“所见即所得”的网页编辑工具，其用户界面非常友好易用，为网页设计者带来了很大的便利。Dreamweaver不仅提供了强大的网页编辑功能，而且提供了善的站点管理机制，是一个集网页创作和站点管理两大利器于一身的创作工具。1.

网页制作的主要软件工具动画设计软件——FlashFlash是一款优秀的网页动画制作软件，主要应用于网页设计和多媒体创作等领域。Flash可以很方便地将音乐、声效、图画以及动画随心所欲地结合起来。Flash生成的SWF作品文件“体积”小得出奇，并且可以以插件的形式直接插入到网页中，是目前网络中最常用的动画格式。1.

网页制作的主要软件工具网页图形处理软件——FireworksFireworks是一款真正的网页图形图像处理软件，它与Dreamweaver结合很紧密。Fireworks可用于设计动态按钮等网页元素，甚至可直接设计精美的网站首页。1.

网页制作的主要软件工具图像处理软件——PhotoshopPhotoshop是一款专业的图像处理软件，功能强大，为美工设计人员提供了广阔的创意空间，Photoshop广泛应用于网页图像编辑、桌面出版、广告设计、婚纱摄影等各行各业，成为许多涉及图像处理的行业的事实标准。2.

HTML概述HTML是HyperTextMarkupLanguage的缩写，即超文本标记语言。HTML语言是网页制作的基础语言，因为无论使用什么工具制作网页，生成的网页代码都是以HTML语言为基础的。HTML与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。HTML使用了一些约定的标记，对网页上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。3.

HTML常用标记HTML文档包含两种类型的信息：标记信息：该部分信息用来控制文档内部的显示方式，并允许设计人员指定与其他文档的链接。

内容信息：该部分信息就是浏览器显示的文本、图形、音频和视频等。3.

HTML常用标记HTML文档包含两种类型的信息：标记信息：该部分信息用来控制文档内部的显示方式，并允许设计人员指定与其他文档的链接。用两个尖括号“<>”括起来，前一个标记是起始标记，后一个标记为结束标记，结束标记以符号“/”开头。一般是双标记。如粗体字标记<B>和</B>。内容信息：该部分信息就是浏览器显示的文本、图形、音频和视频等。某些标记为单标记，只需单独使用就能完整地表达意思。如换行标记<BR>。一些标记有自己的属性，属性细分了标记的功能，属性通常可以赋予具体的属性值。如：<bodybgcolor="#FFC0CB">……</body><body>是正文标记属性值，这里是颜色值(粉红色)

bgcolor就是<body>标记的属性，用于设置背景色3.

HTML常用标记如果一个标记有多个属性，属性和属性之间用空格隔开。标记在使用时，应注意以下几点：HTML标记不区分大小写使用“<!--”和“-->”标记将HTML文档中注解内容括起来各标记可以嵌套，但不能交错。如<head><title>……</head></title>是错误的对于HTML文档中错误的标记及其属性，浏览器通常会跳过它，不处理也不显示。3.

HTML常用标记HTML文档的基本架构HTML文档的基本结构如下：<html>——文件开始标记<head>文件头信息</head><body>文件体信息</body></html>

——文件结束标记3.

HTML常用标记另外，基本结构标记还有网页标题标记。<title>……</title>：

该标记位于<head>……</head>标记中，标记内的文字显示在浏览器的标题栏上。<body>有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。

3.

HTML常用标记以下介绍<body>标记的常用属性：bgcolor：设置网页的背景色；text：设置非链接的文本色彩；link：设置未被访问过的超链接文本的色彩，默认为蓝色；alink：设置超链接文本在被访问瞬间的色彩，默认为蓝色；vlink：设置已访问过的超链接文本的色彩，默认为蓝色；background：设置网页的背景图像；leftmargin：设置页面左边的空白边距，单位是像素；topmargin：设置页面上方的空白边距，单位是像素。

3.

HTML常用标记——文本格式1.字体标记<font>和</font>：该标记可用来设置文本的字体、字号和文本颜色等，是HTML文档中常用的标记。其设置格式为：<fontsize=大小face=字体名称color=颜色>文字</font>size:用于设定字号，即文字的大小，“size”属性的有效值范围为1~7，默认值为3。在size属性值之前可以加上“+”和“-”符号，用于指定相对于默认字号值的增量或减量。face:用于设定字体名称，例如英文字体的“TimesNewRoman”、“Arial”；中文字体的“宋体”、“黑体”、“华文彩云”；color:设定文字颜色，如前所述，各种颜色值可以使用英文颜色名称表示，也可以使用十六进制值表示。3.

HTML常用标记——文本格式[例1]“字体”设置——编写代码制作如下网页文本效果。代码如下：<html><head><title>字体设置</title></head><body><fontsize=1>1号字体</font><p><fontsize=2>2号字体</font><p><fontsize=3color=red>3号字色红体</font><p><fontsize=4color=blue>4号蓝色字体</font><p><fontsize=5color=orange>5号橙色字体</font><p><fontsize=6color=yellowface="黑体">6号黄色黑体字体</font><p><fontsize=7color=greenface="隶书">7号绿色隶书字体</font><p><fontsize=+2color=purpleface="宋体">+2号紫色宋体字体</font><p></body></html>3.

HTML常用标记——文本格式2．文字修饰标记HTML文档允许在要显示的文字两端添加各种文字修饰标记，这些标记及其功能描述如下表：3.

HTML常用标记——文本格式[例2]文字修饰标记——制作如图2-5所示的多格式网页文本效果。代码如下：<html><head><title>文字修饰标记</title></head><body><B>粗体字</B><p><I>斜体字</I><p><U>加下划线</U><p><sub>下标字效果</sub><p><strike>带删除线字体</strike><p><Strong>字体强调效果</strong><p></body></html>

3.

HTML常用标记——文本格式2．特殊字符标记空格、字符“<”、“>”、“””、“&”等具有特殊意义，要在网页中显示该些字符也同样要用专门的字符串表示。该类字符串标记都必须以“&”开头，以“;”结束。3.

HTML常用标记——段落格式1．标题标记<h1>……</h1>：正文的第一级标题标记。第二、三、四、五、六级标题标记，分别为<h2>……</h2>、<h3>……</h3>、<h4>……</h4>、<h5>……</h5>和<h6>……</h6>。标题级别越高，文字越小。设置为标题的文字将独占一行。可以使用align属性指定标题文字的对齐方式，属性值有“left”，“right”和“center”，分别表示左对齐、右对齐和居中对齐，默认值为“left”。3.

HTML常用标记——段落格式[例3]“标题”设置示例——将各级标题的文本加入到网页中，并设置其中四、五、六级标题的对齐方式分别为：左对齐、居中对齐和右对齐。<html><head><title>标题设置</title></head><body><h1>H1:一级标题</h1><h2>H2:二级标题</h2><h3>H3:三级标题</h3><h4align=left>H4:四级标题,左对齐</h4><h5align=center>H5:五级标题,居中对齐</h5><h6align=right>H6:六级标题,右对齐</h6></body></html>

3.

HTML常用标记——段落格式2.分段标记<p>……</p>：段落标记。它的作用是将其内的文字另起一段显示。</p>通常可以省略。段与段之间有一个空行。可以使用align属性指定段落的对齐方式，使用方法同上。3．换行标记<br>：是换行标记。表示以后的内容移到下一行。它是单标记，没有</br>。3.

HTML常用标记——段落格式4.水平线标记<hr>标记是一条水平线，是单标记。可以使用“align”属性设置对齐方式；“color”属性设置水平线颜色；“size”属性设置水平线粗细，以像素为单位，默认值为2。使用“width”属性可设置线段长度，可以是以像素为单位的绝对值，也可以一个百分比的相对值，如“width=50%”表示相对于当前窗口50%的宽度。3.

HTML常用标记——段落格式[例4]分段、换行及水平线标记。<html><head><title>早发白帝城</title></head><body><palign=center>早发白帝城

<palign=center>作者：李白

<hr><palign=center>

朝辞白帝彩云间，

<br>千里江陵一日还。

<br>两岸猿声啼不住，

<br>轻舟已过万重山。

<hr></body></html>

代码如下：4.

HTML常用标记——列表有序列表的结构如下所示：<ol><li>第一项</li><li>第二项</li><li>第三项</li>……</ol>3.

HTML常用标记——列表<ul>……</ul>是无序列表标记，其中的列表项用<li>……</li>标记引导文字，显示网页中的这些文字后，文字前会自动加上“·”序号。无序列表的结构如下所示：<ul><li>第一项</li><li>第二项</li><li>第三项</li>……</ul>有序列表和无序列表的</li>标记可省。有序列表和无序列表都允许自身嵌套或相互嵌套。3.

HTML常用标记——列表例：<html><head><title>有序列表</title></head><body>

以下是一个有序列表，有4个列表项。

<ol>

网页多媒体的插入<p><li>文本的插入</li><li>图片的插入</li><li>视频及动画的插入</li><li>音频的插入

</ol></body></html>

将该例中的“<ol>……</ol>”改为“<ul>……</ul>”，则为无序列表3.

HTML常用标记——列表嵌套列表示例：实现代码：<html><head><title>有序列表与无序列表</title></head>

<body>

以下是一个有序列表，有4个列表项，其中第3项嵌入一个无序列表，也有4个列表项。

<ol>

网页多媒体的插入<p><li>文本的插入</li><li>图片的插入</li><li>视频及动画的插入</li><ul><li>mp4视频格式</li><li>rm视频格式</li><li>gif动画格式</li><li>flash动画格式</li></ul><li>音频的插入

</ol></body></html>3.

HTML常用标记——图像<img>图像标记格式为：

<imgsrc=图片文件URL……>src属性是<img>图像标记的必需属性，用来指定图像源文件的路径和文件名。网页使用的图片格式可以是GIF或JPEG。height和width的属性值为整数数值时，单位为像素，属性值以百分比表示（1%~100%）时，图片将以相对当前窗口大小的百分比来显示。3.

HTML常用标记——图像align属性有left、right、top、middle和bottom共5种。其中“top”设置图像的顶部与文本顶部对齐；“middle”设置图像在垂直方向的中部与文本中部对齐；

“bottom”设置图像的底部与文本的底部对齐。hspace属性用来指定图像与浏览器窗口左边界的水平距离；vspace属性用来指定图像与窗口上端边界的垂直距离，单位是像素。alt属性用来指定图像的替换文字，当图像正在下载或下载未成功时，图像所处的位置即可出现指定的替换文字。<img>标记没有对应的结束标记。3.

HTML常用标记——图像例：图片的插入——如左图所示在网页中插入一蒲公英花地的图片，当在硬盘上删除了该图片文件“picture.JPG”后，网页打开的效果如右图所示。

实现代码：<html><head><title>图片的插入</title></head><body><imgsrc="picture.JPG"width=100height=80border=2alt="蒲公英花地"></body></html>

3.

HTML常用标记——表格1．<talbe>……</table>表格标记，一个<table>标记对定义设置一个表格。<table>标记有如下属性：border：定义表格边框的粗细，单位为像素，如果省略则不带边框；width：定义表格的宽度，属性值为像素数或百分数（相对窗口百分比）；height：定义表格的高度，属性值为像素数或百分数（相对窗口百分比）；cellspacing：定义表项间隙，单位为像素；cellpadding：定义表项内部空白，单位为像素。

3.

HTML常用标记——表格<tr>……</tr>表格行标记，一个<tr>标记对定义表格的一个行。

<td>……</td>表项标记，一个<td>标记对定义一个单元格，单元格内容写在该标记对之间。在<table>、<tr>和<td>标记可使用以下属性改变整个表格或个别行、个别单元格的背景和边框的色彩。bgcolor：设置背景色彩；background：设置背景图像；bordercolor：边框的色彩。3.

HTML常用标记——表格例：表格插入,在网页中插入一3行2列的表格实现代码：<html><head><title>表格的插入</title></head><body><tableborder=2cellspacing=5cellpadding=10><tr><td>表项1</td><td>表项2</td></tr><tr><td>表项3</td><td>表项4</td></tr><tr><td>表项5</td><td>表项6</td></tr><tr></tr></table></body></html>

3.

HTML常用标记——超级链接<a>……</a>——超链接标记格式为：

<ahref=URL>用于超链接锚点的文字或图像</a>href属性用来指定锚点被触发之后所链接到的URL。<a>标记中还可以包含target属性，用来指定在哪个窗口打开所链接的目标网页，target属性的属性值如下：_blank：在新窗口中打开；_parent：在上级窗口中打开；_self：在当前窗口中打开（默认）；_top：在整个浏览器窗口中打开，并删除窗口的所有框架。3.

HTML常用标记——超级链接例：超级链接,点击网页中“这里”字样实现对“al.html”的超级链接。实现代码：<html><head><title>超级链接</title></head><body>

点击<ahref=a1.html>这里</a>链接到一个图片网页

</body></html>

3.

HTML常用标记——音频、视频标记音频文件格式有：mp3、wma、wav、mid等，视频、动画文件格式有：avi、、rm、swf、ram等1．添加背景音乐使用<bgsound>标记可以在网页中插入背景音乐<bgsound>标记可以放在<html

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论