《第4章电子商务网站建设摘要》由会员分享，可在线阅读，更多相关《第4章电子商务网站建设摘要（56页珍藏版）》请在金锄头文库上搜索。
1、,4.3 网页的设计与制作,4.2 电子商务网站的实施,4.1 电子商务网站的策划,第4章 电子商务网站的建设,4.1 电子商务网站的策划,1. 确定网站的服务对象,由于网站资源有限，因此必须整合聚焦服务识别访问者范围。 外部访问者 客户：了解产品信息、订购、反馈 供应商：了解公司产品计划、分析库存 竞争者：了解公司战略和经营情况 过客：值得访问信息（潜在客户） 政府、其它组织和个人、投资者、债权者。 内部访问者 经常被忽略，仅限于企业的内部 按照价值链和业务流程确定： 研究部：了解客户的偏好 制造部：了解客户对产品评价 市场部：利用反馈信息制定特别促销方案 财务部：了解客户定货和回款情况 采
2、购部：了解客户对产品（原料）评价,2. 确定网站的目标,公司的任务或目标（Why） 补充（辅助）、尝试性、转型（战略调整）,推广企业的产品和服务,树立企业的形象，宣传企业的产品,开展电子商务业务，并为各种客户提供服务和支持,3. 确定网站的内容,静态内容： 一般、常规的信息，包括公司的历史、文化、所属行业等。 较长时间内不需修改，通常在建设初期编制。动态内容： 公司产品和服务的有关信息。 经常变动，保持网站的吸引力，通常用作促销手段。,4. 确定网站的功能,网站的功能可分为主要功能和辅助功能： 主要功能： 信息发布、网上交易 辅助功能： 配合主要功能而设置的。如客户注册管理、客户的互动等。,5
3、. 确定网站的装饰风格,装饰风格要注意形式服从内容与功能的需要装饰可分为如下三种类型： 组织性装饰：按照小组、系统的结构安排站点功能，如子站点安排布局、颜色基调（整体） 功能性装饰：方便顾客利用，如功能、内容的布局安排（局部） 可视性装饰：起着美化界面，如用图形等（部件）,4.2 电子商务网站的实施,1. 实施方式,- 外包？- 租借？- 自建？外包指全权委托外部专业化公司提供一揽子解决方案，并且实施。租借指向电子商务服务站点（ASP）租借存储空间建设站点。企业只需要提供有关材料，维护、收款以及物流配送由门户站点提供。自建指利用企业自身的技术力量，按照电子商务网站的计划书，来设计、开发、维护、
4、推广网站。,2. 实施准备,(1)Web服务器建设(2)准备站点资料(3)选择网站开发工具,虚拟主机托管 整机托管 租用网页空间 独立服务器,资料内容 根据站点内容和功能规划选定材料 网站形象 策划网站整体形象，统筹安排网页的风格 网页内容 公司简介、产品资料（图片、价格） 其它资料 增值服务信息资料（相关产品技术资料、市场行情信息等） 材料类型 文字、图像、动画、声音、影视等,网页设计工具：FrontPage、DreamWeaver 图像处理工具： Photoshop 声音、影视处理软件 交互式动态页面设计工具：微软ASP开发系统，Perl开 发系统,3. 网站开发,企业电子商务站点的页面组
5、成主要包括： 主页、企业信息、新闻、产品服务、帮助、相关虚拟社区等页面主页风格：* 导航型提供简洁、清晰的网站结构，树立企业的网上形象* 内容展示型展示主要内容，提供直接、快捷的链接，一步到位* 视觉效果文本型和图片型文本型追求简洁、快速，辅以图片；图片型美观、下载速度较慢。,3. 网站开发,1）电子商务网站的主页 企业名称、标志、铭牌、网站图标（Logo）等要素 企业站点的网址 企业站点的导航系统 企业产品和/或服务最新的信息、有关新闻 企业的联系方式如E-mail、电话、传真等 相关站点的链接 2）电子商务网站的新闻页面 产品或服务的最新信息，如品种、价格、实现方式等 新项目的进行情况 企
6、业的内部变动情况 行业的最新动态 相关行业的情况,3. 网站开发,3）产品/服务页面产品/服务介绍分为两部分： 栏目入口处和转入具体页面后的产品介绍提供相关信息，尽可能详细，采用多媒体形式展示， 虚拟现实访问者、客户评价，BBS在线订购和支付定制订购，如提供购物篮（车）等形象订购系统、 选取系统、配送系统、支付系统（如货款、运费、 手续费计算）等，重点考虑方便、安全、自动。产品相关信息，产品使用小常识等页面设计组织时要尽量简洁，按产品线/品牌分类。,3. 网站开发,4）企业信息页面 功能与作用对公众（客户、投资者）发布企业公开信息发布信息包括* 发展历程、企业大事记* 组织架构、业务范围* 合
7、作伙伴、发展计划* 财务信息（上市公司）页面设计：最好图文并茂，采用多媒体方式展示,3. 网站开发,5）帮助页面 功能和作用方便浏览者在繁杂的Web页面快速找到信息 信息方面帮助* 站点结构图（Site Map）：展示主要链接* 站点内容搜索 电子商务活动方面帮助* 在线订购、定制规则 * 在线支付方式和具体方法* 物流配送方式,3. 网站开发,6）虚拟社区 虚拟社区的作用培养访问者的忠诚度；供消费者交流购物体验，增加人气，建立访问者之间的群体关系 提供功能* 个人电子信箱 * 公告栏（BBS）* 在线聊天室（Chat） * 在线实时通信（ICQ） 电子虚拟社区的建立 选择独具特色的话题，一般
8、与企业的产品、服务、经营方式相关。选择合适的论坛主持人。,4. 网站维护,电子商务网站维护的任务：保持链接的有效性 及时更换信息，根据信息性质不同确定更换频率，保 持信息的时效性，最好是规划、 落实到具体部门，与业务整合在一起 保持页面内容和拼写正确 维持与访问者的良好关系，及时反馈,4.3 网页的设计与制作,1. 网页制作的主要软件工具,网页设计软件Dreamweaver Dreamweaver是一款“所见即所得”的网页编辑工具，其用户界面非常友好易用，为网页设计者带来了很大的便利。 Dreamweaver不仅提供了强大的网页编辑功能，而且提供了善的站点管理机制，是一个集网页创作和站点管理两
9、大利器于一身的创作工具。,1. 网页制作的主要软件工具,动画设计软件Flash Flash是一款优秀的网页动画制作软件，主要应用于网页设计和多媒体创作等领域。Flash可以很方便地将音乐、声效、图画以及动画随心所欲地结合起来。Flash生成的SWF作品文件“体积”小得出奇，并且可以以插件的形式直接插入到网页中，是目前网络中最常用的动画格式。,1. 网页制作的主要软件工具,网页图形处理软件Fireworks Fireworks是一款真正的网页图形图像处理软件，它与Dreamweaver结合很紧密 。Fireworks可用于设计动态按钮等网页元素，甚至可直接设计精美的网站首页。,1. 网页制作的主
10、要软件工具,图像处理软件Photoshop Photoshop是一款专业的图像处理软件，功能强大，为美工设计人员提供了广阔的创意空间， Photoshop广泛应用于网页图像编辑、桌面出版、广告设计、婚纱摄影等各行各业，成为许多涉及图像处理的行业的事实标准。,2. HTML概述,HTML是Hyper Text Markup Language的缩写，即超文本标记语言。HTML语言是网页制作的基础语言，因为无论使用什么工具制作网页，生成的网页代码都是以HTML语言为基础的。HTML与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。 HTML使用了一些约定的标记，对网页上的各
11、种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。,3. HTML常用标记,HTML文档包含两种类型的信息：标记信息：该部分信息用来控制文档内部的显示方式，并允许设计人员指定与其他文档的链接。内容信息：该部分信息就是浏览器显示的文本、图形、音频和视频等。,3. HTML常用标记,HTML文档包含两种类型的信息：标记信息：该部分信息用来控制文档内部的显示方式，并允许设计人员指定与其他文档的链接。 用两个尖括号“”括起来，前一个标记是起始标记，后一个标记为结束标记，结束标记以符号“/”开头。一般是双标记。如粗体字标记和 。内容信息：该部分信息就是浏
12、览器显示的文本、图形、音频和视频等。,3. HTML常用标记,如果一个标记有多个属性，属性和属性之间用空格隔开 。 标记在使用时，应注意以下几点： HTML标记不区分大小写 使用“”标记将HTML文档中注解内容括起来 各标记可以嵌套，但不能交错。 如 是错误的 对于HTML文档中错误的标记及其属性，浏览器通常会跳过它，不处理也不显示。,3. HTML常用标记,HTML文档的基本架构 HTML文档的基本结构如下： 文件开始标记文件头信息文件体信息文件结束标记,3. HTML常用标记,另外，基本结构标记还有网页标题标记。：该标记位于标记中，标记内的文字显示在浏览器的标题栏上。有很多属性，可以定义页
13、面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。,3. HTML常用标记,以下介绍标记的常用属性：bgcolor：设置网页的背景色； text：设置非链接的文本色彩； link：设置未被访问过的超链接文本的色彩，默认为蓝色； alink：设置超链接文本在被访问瞬间的色彩，默认为蓝色； vlink：设置已访问过的超链接文本的色彩，默认为蓝色； background：设置网页的背景图像； leftmargin：设置页面左边的空白边距，单位是像素； topmargin：设置页面上方的空白边距，单位是像素。,3. HTML常用标记文本格式,1. 字体标记 和：该标
14、记可用来设置文本的字体、字号和文本颜色等，是HTML文档中常用的标记。其设置格式为：文字 size: 用于设定字号，即文字的大小，“size”属性的有效值范围为17，默认值为3。在size属性值之前可以加上“+”和“-”符号，用于指定相对于默认字号值的增量或减量。 face: 用于设定字体名称，例如英文字体的“Times New Roman”、“Arial”；中文字体的“宋体”、“黑体”、“华文彩云”； color: 设定文字颜色，如前所述，各种颜色值可以使用英文颜色名称表示，也可以使用十六进制值表示。,3. HTML常用标记文本格式,例1“字体”设置编写代码制作如下网页文本效果。,代码如下：
15、字体设置1号字体2号字体3号字色红体4号蓝色字体5号橙色字体6号黄色黑体字体7号绿色隶书字体+2号紫色宋体字体,3. HTML常用标记文本格式,2文字修饰标记 HTML文档允许在要显示的文字两端添加各种文字修饰标记，这些标记及其功能描述如下表 ：,3. HTML常用标记文本格式,例2文字修饰标记制作如图2-5所示的多格式网页文本效果 。,代码如下：文字修饰标记 粗体字斜体字加下划线下标字效果带删除线字体字体强调效果,3. HTML常用标记文本格式,2特殊字符标记 空格、字符“”、“”、“”结束。,3. HTML常用标记段落格式,1标题标记 ：正文的第一级标题标记。 第二、三、四、五、六级标题标
16、记，分别为、和。 标题级别越高，文字越小。 设置为标题的文字将独占一行。 可以使用align属性指定标题文字的对齐方式，属性值有“left”，“right”和“center”，分别表示左对齐、右对齐和居中对齐，默认值为“left”。,3. HTML常用标记段落格式,例3 “标题”设置示例将各级标题的文本加入到网页中，并设置其中四、五、六级标题的对齐方式分别为：左对齐、居中对齐和右对齐。,标题设置H1: 一级标题H2: 二级标题H3: 三级标题H4: 四级标题,左对齐H5: 五级标题,居中对齐H6: 六级标题,右对齐,3. HTML常用标记段落格式,2. 分段标记：段落标记。它的作用是将其内的文字另起一段显示。通常可以省略。 段与段之间有一个空行。 可以使用align属性指定段落的对齐方式，使用方法同上。 3换行标记 ：是换行标记。表示以后的内容移到下一行。 它是单标记，没有。,
