电子商务网站的规划和设计.ppt

第四章 电子商务网站建设概述,4.1 电子商务解决方案 4.2 电子商务网站的构成要素 4.3 电子商务网站的规划和设计 4.4 网页制作,4.1 电子商务解决方案,电子商务系统的组成 电子商务解决方案,4.1.1 电子商务系统组成,前台（网站） 后台（企业内部信息系统） 安全系统（认证中心） 采购者 支付中心 物流中心 供应者,4.1.2 电子商务解决方案,企业本身是有个性的，企业的电子商务解决方案必然是以客户为中心，量体定制的，但这种量体定制已经是超越了企业信息化初期的那种“以客户为中心”的概念，现在有成千上万的企业在期待着迅速的实现电子商务，而如果再按部就班的找一批人马驻扎到企业去开发，一是时间上不允许，二是电子商务解决方案的提供商软件公司也不干。在一体化设计思想的指导下，将基本功能的模块细分化，使得各个功能模块可以实现积木式的拆装，这样以来，针对不同的企业就可以具体的选择不同的功能模块，迅速的搭建起自己的电子商务平台。,构筑以客户为中心的企业电子商务平台时，有三个重要步骤。 所谓“三步”是指：管理咨询、确立方案、实施服务。,4.2 电子商务网站的构成要素, 电子商务网站的构成要素 商务网站的设计要求,4.2.1 电子商务网站的构成要素,网站域名、网站地点、网站页面 商品目录、购物车、付款台 计数器、留言板、会员管理 商品盘点、更新库存管理、商品配送,4.2.2 商务网站的设计要求,简单实用 页面下载速度快 易于导航和使用 提供搜索引擎和/或网站地图 联系信息方便多样 设计易于更新的工具 符合网络伦理 兼容多种浏览器 无错误链接 强大的并发处理能力 要有良好的容错性能 可扩展性强 要有安全性好 要有强大的后台支撑, 电子商务网站的规划和设计,电子商务网站建设流程 外观设计与策划,4.2.2 商务网站的设计要求, 注册域名和申请IP地址 确定网站的技术解决方案 规划网站的内容并制作网页 网站的发布和推广 网站的更新维护,.1 建设流程,建设流程,网络服务的选择,如何申请域名 1、选择域名 符合规范 简洁 容易记忆 不容易与其他域名混淆 与公司名称、商标或核心业务相关 2、申请域名 中国互联网信息中心 / 互联网信息中心 域名申请表格（网页资料）,网络服务的选择,域名基本常识 域名类似于互联网上的门牌号码，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的互联网协议(IP)地址相对应。如与45对应，但相对于IP地址而言，更便于使用者理解和记忆。域名属于互联网上的基础服务，基于域名可以提供WWW、EMAIL、FTP等应用服务。 域名一般有三到四级，其通用的格式如图所示。,网络服务的选择,架构WWW服务器 在网络上提供资源并对这些资源进行管理的计算机叫服务器。服务器可分为WWW 服务器、E-mail服务器、数据库服务器和DNS服务器等。 WWW服务器（WWW Server)通常也叫Web服务器（Web Server）。在有的资料中，Web服务器是指WWW服务器、FTP服务器和Gopher服务器的集成。例如Windows NT4.0中的IIS（Internet Information Server）实际上就包含了WWW服务器、FTP服务器、Gopher服务器。本书中约定Web服务器指WWW服务器。常用的Web服务器软件有Netscape公司的Enterprise Server和Microsoft公司的IIS。 WWW服务软件与WWW浏览器是配合使用的，WWW服务软件安装在服务器端，WWW浏览器安装在客户机端。 WWW服务器安装Web Server软件，用于存贮和管理主页，提供WWW服务。,企业选择及注册域名的策略,企业的发展规模及其商业范畴 公司、企业、组织的性质或信息内容的性质 简洁、易记、标识性强，具有一定的内涵。 域名的注册还应注意域名抢注与域名冲突的问题,域名注册,国内域名的注册, 中国互联网信息中心 根据中国互联网络域名管理办法的规定，CNNIC在2002年12月16日全面变革域名管理服务模式：CNNIC作为中文域名注册管理机构，不直接面对最终用户提供中文域名注册相关服务，域名注册服务将转由CNNIC认证的域名注册服务机构提供。,域名注册,注册商管理体系结构图如下：,Cn域名注册：中国国家顶级域名 中文域名注册：含有中文文字的新一代域名。 通用网址：新兴的互联网地址资源，自然语言直达网站页面，便捷的网站推广工具. 无线网址：无线互联网应用的最新服务形式，以移动终端为载体，实现随时、随地、随身的信息交互。 IP/AS分配:,域名注册实例： 联锋商务,1.申请成为用户 2.汇款到您的帐户下 3.查询域名是否已注册 4.填写域名注册资料 5.通过购物车支付 6.注册款项自动从帐户扣除 7.支付成功后,注册完毕,最有价值域名Top10 中国主要ISP： 北京信息港（邮电部的公共信息网） 国家档案文献库（明清至1995年间最有权威性的重要档案) 世纪互联网（领跑中国服务集成业） 瀛海威（信息高速公路的导航员） 英特科(服务器产品介绍） 中西网络（北京中西公司） 中软英特（中国顶尖互联网服务供应商） 北京国网(国内最早提供Internet服务） 中国教育网(Adobe产品导览) 上海热线（上海最大的公共信息网）浙江（杭州电信）,确定建站的目的 网站的内容策划 网站的布局策划 网站设计的步骤,.2 电子商务的外观设计,1.确定目的,访问者心理分析 他们总是匆匆忙忙 他们希望“免费”的东西 他们不容易相信人 他们喜欢点击,竞争者分析 销售的区域性与潜在性分析 消费层次及消费需求特征分析,市场分析, 网站题材和名称的定位 有特色的形象包装和设计 配色方案,2.网站内容策划,3.网站的布局,规划网站的内容，将所有信息按类别分开。根据要建立的网站内容确定站点的结构图,4. 网站设计八步骤,一、确定网站主题 (网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。办出自己的特色，这样才能给用户留下深刻的印象。 ) 二、搜集材料 (明确了网站的主题以后，你就要围绕主题开始搜集材料了。 ) 三、规划网站 (一个网站设计得成功与否，很大程度上决定于设计者的规划水平。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等。 ),网站设计八步骤,四、选择合适的制作工具 (网页制作工具 ,图片编辑工具 ,动画制作工具，网页特效工具 ) 五、制作网页 (一定要按照先大后小、先简单后复杂来进行制作。 ) 六、上传测试 (网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看。 ) 七、推广宣传 (进行宣传 :到搜索引擎上注册、与别的网站交换链接、加入广告链等。 ) 八、维护更新 (网站要注意经常维护更新内容，保持内容的新鲜。 ),4.3 电子商务网站的硬件平台和软件平台,1、网络设备 2、服务器 3、软件平台,4.3.1 网络设备,路由器 路由器是一种连接多个网络或网段的网络设备，是将电子商务网站联入广域网的重要设备 交换机 多台不同的计算机可以通过交换机组成网络。交换机能够隔离冲突与何有效的抑制广播风暴的产生。交换机可以在半双工，全双工模式下工作。 防火墙 防火墙是一个由软件、硬件或软硬件结合的系统，是电子商务网站内部网络和外部网络之间的一道屏障，可限制外界未经授权的用户访问内部网络，管理内部用户访问外部网络的权限。,4.3.2 服务器,要求 性能好，成本低，可扩展性，安全可靠 服务器种类： PC机：Windows 2000系统 小型机 小型机以上的计算机系统,UNIX系统,确定服务器解决方案,建立独立的电子商务站点 空间租用 A 虚拟主机 B 主机租用 C 服务器托管（主机托管）,1、建立独立的电子商务站点,成本较高 适合对信息量和网站功能要求较高的大中型企业,2、空间租用,A 虚拟主机 B 主机租用 C 服务器托管（主机托管）,A 租用虚拟主机,虚拟主机是使用计算机软件技术，把一台运行在Internet上的服务器主机分隔成多台“虚拟”主机，每一台虚拟主机都各自具有独立的域名和IP地址，具有比较完善的Internet服务器功能。 优点：开销低 适合刚起步开办电子商务网站的公司,B 主机租用,主机租用（Dedicated Hosting）即客户无须自己购置服务器，而可以直接采用本司提供的多款高级服务器以及软件系统，大大胜却了采购成本，安放在我们的IDC中，带宽、安全、稳定、系统等问题完全由我们来替您打理。,C 主机托管,主机托管就是客户把属于自己的一台服务器放置在某个经营“整机托管”业务网站的数据中心的机房里，由网站机房的技术人员对服务器进行管理和维护。,自建和租用的比较,自建机房成本大：技术人员、软硬件、维护费、线路通信服务费 租用更经济、快捷且实用：远程控制、客户机/服务器 两者相比，租用在成本和服务方面有优势。,应用服务,采用空间租用的同时，可以选择应用服务租用。,4.3.3 软件平台,1、操作系统软件 2、WEB服务器软件,1、操作系统软件,UNIX操作系统：技术成熟、开放性好、可靠性高、网络功能强大。 Linux操作系统：免费的操作系统 Windows2000操作系统：,选用WEB服务器软件时的参考的性能参数： 相应能力：WEB服务器对多个用户浏览信息的相应速度。 与后端服务器的集成 管理的难易程度：管理Web服务器；利用Web界面进行网络管理 信息开发的难易程度： 稳定性 可靠性 安全性：是否泄密；防止黑客的攻击 与其他系统的搭配：Windows 2000+IIS+.NET+SQLSERVE; Linux+apache+PHP+MYSQL,2、WEB服务器软件,DB2，Oracle，Sybase，MS SQL Server，MySQL,3、数据库软件,思考题,简述电子商务网站的建站流程 什么是自建网站 什么是虚拟主机 什么是整机托管 什么是整机托管 电子商务网站域名的注册方法 电子商务系统组成 进行电子商务外观设计时应该注意哪些问题？ 企业选择和注册域名的策略？ 请描述一下典型的域名注册的流程.,上机练习,列出ccnic提供哪些域名服务 访问一个提供域名服务的网站，了解它的域名管理机制 访问一个提供空间租用的网站，了解它的管理机制、提供哪些租用服务以及各服务的费用。,4.4 网页制作,1 HTML标记语言 2 DreamWeaver MX简介,4.4.1 HTML语言,什么是HTML语言？,HTML是超文本标记语言的缩写(Hypertext Markup Language),HTML语言一种描述文档结构的语言，使用描述性的标记符（称为标签）来指明文档的不同内容。 HTML文档包含两种信息: 页面本身的信息 表示页面元素、结构、格式和其他超文本链接的HTML标签。,什么是HTML标签,HTML标签规定WEB文档的逻辑结构，并且控制文档的显示格式。 大部分HTML标签的形式如下： 相应的内容,如何建立HTML文件,用Windows下的“记事本”建立HTML文件 用其它文字处理软件 用网页制作工具来建立HTML HTML文件的扩展名为.htm或.html，每一个网页对应一个HTML文档。,一个HTML文档（网页）的基本结构, 网页标题 网页正文 . ,4.4.2 DreamWeaver MX简介,DreamWeaver的工作环境 简单网页制作,Dreamwaver & Photoshop,可以结合 Dreamwaver 和 Photoshop 来制作网页。 Dreamwaver 可以到这里下 30天试用版，不过要先登记一个免费帐号，/cfusion/tdrc/index.cfm?product=dreamweaver 在网上有这方面的教程 教程 /xhelp/ /（中国建站专家） 主页和个人空间 /（中华网） /yumingzc/yumingzc.asp 建议使用网页制作三剑客Dreamweawer+Firework+Flash 或使用Frontpage 参考资料：/question/3813008.html,如何学网页制作,认识网页/article/ViewArticle.asp?ArticleID=1498 网页设计入门/article/ViewArticle.asp?ArticleID=288 揭开网页的神秘面纱/article/ViewArticle.asp?ArticleID=341 网页初接触/article/ViewArticle.asp?ArticleID=347 什么软件可以做网页？/article/ViewArticle.asp?ArticleID=627 如何选择网页制作工具/article/ViewArticle.asp?ArticleID=1499 请加入QQ群：12411338一起学习！ ,DreamWeaver MX的工作环境,标题栏 菜单栏 文档工具栏 网页文件编辑区 状态栏 浮动面板和浮动面板组,标题栏 /菜单栏,“插入”面板,编辑区域,浮动面板,属性设置区域,状态栏,文档工具栏,“文档“工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码“视图、“设计“视图、同时显示“代码“和“设计“视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。,“文档“窗口底部的状态栏提供与您正创建的文档有关的其它信息。,“插入“栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。 这些按钮被组织到几个类别中，您可以在“插入“栏的左侧切换它们。当您启动 Dreamweaver 时，系统会打开您上次使用的类别。,“属性“检查器使您可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性“检查器中的内容根据选定的元素会有所不同。例如，如果您选择页面上的一个图像，则“属性“检查器将改为显示该图像的属性（如图像的文件路径、图像的宽度和高度、图像周围的边框（如果有），等等）。,“文件“面板用于查看和管理 Dreamweaver 站点中的文件。,创建站点,创建本地站点 创建站点地图 站点中的文件操作,创建本地站点,在Dreamweaver中制作网站，您必须定义一个本地站点，它是您的计算机上任意位置的一个文件夹。之所以一定要定义它，是为了告诉Dreamweaver您的文件存放位置，然后Dreamweaver就会将所有的设置针对该地址设置。,启动 Dreamweaver，选择“站点 “管理站点“。 出现“管理站点“对话框。 单击“新建“按钮，然后选择“站点“。 出现“站点定义“对话框。 如果显示向导（“基本“选项卡），请单击“高级“选项卡，然后从“分类“列表中选择“本地信息“（它应当是默认选项）。 在“站点名称“文本框中，输入 Cafe Townsend 作为站点名称。,在“本地根文件夹”文本框中，指定刚才建立的本地文件夹。 可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹“文本框中输入路径。 在“默认图像文件夹”文本框中，指定本地 文件夹中存放图片的 images 文件夹。 可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹“文本框中输入路径。,单击“确定”。 随即出现“管理站点”对话框，显示您的新站点。 单击“完成“关闭“管理站点“对话框。 此时“文件“面板显示当前站点的新本地根文件夹。“文件“面板中的文件列表将充当文件管理器，允许您复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。,创建本地站点,注意点： 在网页设计中，不要用中文作为文件名或文件夹名。 网页文件命名时，区分字符大小写。 每个网站都有而且只用一个首页。 首页文件应该放在站点的根文件夹下。,创建站点地图,创建站点地图,一定要首先指定首页！ 设置首页的方法： 在站点管理工具里设计 在本地视图设计,若要创建新的空白文档，请执行以下操作： 选择“文件“新建“。 即出现“新建文档“对话框。“常规“选项卡已被选定。 从“类别“列表中选择“基本页“、“动态页“、“模板页“、“其他“或“框架集“；然后从右侧的列表中选择要创建的文档的类型。 例如，选择“基本页“创建 HTML 文档，或选择“动态页“创建 ColdFusion 或 ASP 文档，诸如此类。 单击“创建“按钮。 新文档在“文档“窗口中打开。 保存该文档,创建、打开和保存网页文件,若要保存新文档，请执行以下操作：,选择“文件”“保存”。 提示 最好将您的文件保存在 Dreamweaver 站点中。 在出现的对话框中，定位到要用来保存文件的文件夹。 在“文件名称“文本框中，键入文件名。 请不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊字符（如 、 或 ）或标点符号（如冒号、斜杠或句号）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。 单击“保存“。,若要打开文件，请执行以下操作：,选择“文件“打开“。 在“打开“对话框中，选择文件并单击“打开“。, 创建基于表格的页面布局,页面布局将确定您的页面在浏览器中会如何显示，例如，显示菜单、图像和 Macromedia Flash 内容将如何放置。 表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。您可以使用表格快速轻松地创建布局。,检查设计草样 创建并保存新页面 插入表格 设置表格属性 插入图像占位符 向页面添加颜色,通常，创建 Web 站点并不是以打开Dreamweaver并立即对页面进行布局开始的。创建 Web 站点的初始工作从纸张或图形编辑应用程序（如 Macromedia Fireworks）开始。 设计草样由客户要求其 Web 站点具有的任意数目的页面元素组成。,创建并保存新页面,Dreamweaver 中，选择“文件”“新建”。 在“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。 选择“文件”“另存为”。在“另存为”对话框中，浏览至定义为站点的本地根文件夹的 cafe_townsend 文件夹并打开该文件夹。 在“文件名”文本框中输入 index.html，然后单击“保存”。 文件名即出现在应用程序窗口顶部的标题栏中。 在新文档顶部的“文档标题“文本框中，键入 Cafe Townsend 选择“文件“保存“来保存该页面。,插入表格,接下来，您将添加一个表格，用于放置文本、图形和 Macromedia Flash 资源。 在页面上单击一次，在页面左上角放置插入点。,2 选择“插入“表格“。 3 在“插入表格“对话框中，执行下面的操作： 在“行数“文本框中，输入 3。 在“列数“文本框中，输入 1。 在“表格宽度“文本框中，输入 700。 在“表格宽度“弹出式菜单中，选择“像素“。 在“边框粗细“文本框中，输入 0。 在“单元格边距“文本框中，输入 0。 在“单元格间距“文本框中，输入 0。,4 单击“确定“。 一个三行一列的表格即出现在文档中。该表格的宽度为 700 像素，边框、单元格边距和单元格间距均为 0。,设置表格属性 可以在属性窗口对表格的属性进行设置。,插入图像占位符,图像占位符是在准备好将最终图形添加到 Web 页面之前使用的图形。在对 Web 页面进行布局时图像占位符很有用，因为通过使用图像占位符，您可以在真正创建图像之前确定图像在页面上的位置。,在文档窗口中，在第一个表格的第一行内单击一次。 选择“插入“图像对象“图像占位符“。 在“图像占位符“对话框中，执行下面的操作： 在“名称“文本框中，键入 banner_graphic。 在“宽度“文本框中，输入 700。 在“高度“文本框中，输入 90。 单击颜色框并从颜色选择器中选择一种颜色。我们选择了红棕色 (#993300)。 保留“替换文本“文本框为空。,向页面添加颜色,通过设置某些表格单元格以及页面背景的颜色，向页面添加更多颜色。 在上述包含三列的表格的第一个单元格内单击一次。 单击标签选择器中的 标签（单元格标签）以选择该单元格。,3 在“属性“检查器（“窗口“属性“）中，在“背景颜色“文本框内单击一次。 “背景颜色“文本框位于“背景颜色“(Bg) 颜色框旁。 注意 如果未出现“背景颜色“文本框，请单击“属性“检查器右下角的展开箭头。 4 在“背景颜色“文本框中，输入十六进制值 #993300，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。表格单元格的颜色即变为红棕色。,5 在上述包含三列的表格的第二个单元格内单击一次。 6 单击标签选择器中的 标签（单元格标签）以选择该单元格。 7 在“属性”检查器中，在“背景颜色”文本框内单击一次，输入十六进制值 #F7EEDF，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。表格单元格的颜色即变为浅棕色。 8 重复第 57 步，将第三个表格单元格的颜色也更改为浅棕色。 9 设置完这三个单元格的颜色后，单击一次表格的外部，取消选择该表格。,接下来，您将通过修改页面属性来更改整个页面的背景颜色。通过“页面属性“对话框可以设置一些页面属性，包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。,选择“修改“页面属性“。 在“页面属性”对话框的“外观”类别中，单击“背景颜色”颜色框，然后从颜色选择器中选择黑色 (#000000)。 单击“确定“。 页面的背景即变为黑色。,注意：如果设置了页面的背景图片，则背景颜色的设置不起作用。,2.4 插入各种元素,查找文件 复查您的任务 插入图像 插入文本 创建链接 在浏览器中预览页面,网页图片的插入和属性设置,网页图像格式简介 GIF JPEG PNG,插入图片,在 Dreamweaver 中，打开您创建的index.html文件 双击页面顶部的图像占位符 banner_graphic。 在“选择图像源文件“对话框中，浏览至您定义为站点根文件夹的 cafe_townsend 文件夹中的 images 文件夹。 选择 banner_graphic.jpg 文件并单击“确定“。Dreamweaver 将图像占位符替换为 Cafe Townsend 的横幅图形。,插入网页图像的方法,图片不要用绝对路径插入。 使用相对路径，在插入图片之前，应该把图片放置在网站目录下。 如果插入的图片文件