第4章-电子商务网站建设ppt课件

,.,4.3网页的设计与制作,4.2电子商务网站的实施,4.1电子商务网站的策划,第4章电子商务网站的建设,.,4.1电子商务网站的策划,.,1.确定网站的服务对象,由于网站资源有限，因此必须整合聚焦服务识别访问者范围。外部访问者客户：了解产品信息、订购、反馈供应商：了解公司产品计划、分析库存竞争者：了解公司战略和经营情况过客：值得访问信息（潜在客户）政府、其它组织和个人、投资者、债权者。内部访问者经常被忽略，仅限于企业的内部按照价值链和业务流程确定：研究部：了解客户的偏好制造部：了解客户对产品评价市场部：利用反馈信息制定特别促销方案财务部：了解客户定货和回款情况采购部：了解客户对产品（原料）评价,.,2.确定网站的目标,公司的任务或目标（Why）补充（辅助）、尝试性、转型（战略调整）,推广企业的产品和服务,树立企业的形象，宣传企业的产品,开展电子商务业务，并为各种客户提供服务和支持,.,3.确定网站的内容,静态内容：一般、常规的信息，包括公司的历史、文化、所属行业等。较长时间内不需修改，通常在建设初期编制。动态内容：公司产品和服务的有关信息。经常变动，保持网站的吸引力，通常用作促销手段。,.,4.确定网站的功能,网站的功能可分为主要功能和辅助功能：主要功能：信息发布、网上交易辅助功能：配合主要功能而设置的。如客户注册管理、客户的互动等。,.,5.确定网站的装饰风格,装饰风格要注意形式服从内容与功能的需要装饰可分为如下三种类型：组织性装饰：按照小组、系统的结构安排站点功能，如子站点安排布局、颜色基调（整体）功能性装饰：方便顾客利用，如功能、内容的布局安排（局部）可视性装饰：起着美化界面，如用图形等（部件）,.,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.网页制作的主要软件工具,网页设计软件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文档包含两种类型的信息：标记信息：该部分信息用来控制文档内部的显示方式，并允许设计人员指定与其他文档的链接。用两个尖括号“”括起来，前一个标记是起始标记，后一个标记为结束标记，结束标记以符号“/”开头。一般是双标记。如粗体字标记和。内容信息：该部分信息就是浏览器显示的文本、图形、音频和视频等。,.,3.HTML常用标记,如果一个标记有多个属性，属性和属性之间用空格隔开。标记在使用时，应注意以下几点：HTML标记不区分大小写使用“”标记将HTML文档中注解内容括起来各标记可以嵌套，但不能交错。如是错误的对于HTML文档中错误的标记及其属性，浏览器通常会跳过它，不处理也不显示。,.,3.HTML常用标记,HTML文档的基本架构HTML文档的基本结构如下：文件开始标记文件头信息文件体信息文件结束标记,.,3.HTML常用标记,另外，基本结构标记还有网页标题标记。：该标记位于标记中，标记内的文字显示在浏览器的标题栏上。有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。,.,3.HTML常用标记,以下介绍标记的常用属性：bgcolor：设置网页的背景色；text：设置非链接的文本色彩；link：设置未被访问过的超链接文本的色彩，默认为蓝色；alink：设置超链接文本在被访问瞬间的色彩，默认为蓝色；vlink：设置已访问过的超链接文本的色彩，默认为蓝色；background：设置网页的背景图像；leftmargin：设置页面左边的空白边距，单位是像素；topmargin：设置页面上方的空白边距，单位是像素。,.,3.HTML常用标记文本格式,1.字体标记和：该标记可用来设置文本的字体、字号和文本颜色等，是HTML文档中常用的标记。其设置格式为：文字size:用于设定字号，即文字的大小，“size”属性的有效值范围为17，默认值为3。在size属性值之前可以加上“+”和“-”符号，用于指定相对于默认字号值的增量或减量。face:用于设定字体名称，例如英文字体的“TimesNewRoman”、“Arial”；中文字体的“宋体”、“黑体”、“华文彩云”；color:设定文字颜色，如前所述，各种颜色值可以使用英文颜色名称表示，也可以使用十六进制值表示。,.,3.HTML常用标记文本格式,例1“字体”设置编写代码制作如下网页文本效果。,代码如下：字体设置1号字体2号字体3号字色红体4号蓝色字体5号橙色字体6号黄色黑体字体7号绿色隶书字体+2号紫色宋体字体,.,3.HTML常用标记文本格式,2文字修饰标记HTML文档允许在要显示的文字两端添加各种文字修饰标记，这些标记及其功能描述如下表：,.,3.HTML常用标记文本格式,例2文字修饰标记制作如图2-5所示的多格式网页文本效果。,代码如下：文字修饰标记粗体字斜体字加下划线下标字效果带删除线字体字体强调效果,.,3.HTML常用标记文本格式,2特殊字符标记空格、字符“”、“”、“”结束。,.,3.HTML常用标记段落格式,1标题标记：正文的第一级标题标记。第二、三、四、五、六级标题标记，分别为、和。标题级别越高，文字越小。设置为标题的文字将独占一行。可以使用align属性指定标题文字的对齐方式，属性值有“left”，“right”和“center”，分别表示左对齐、右对齐和居中对齐，默认值为“left”。,.,3.HTML常用标记段落格式,例3“标题”设置示例将各级标题的文本加入到网页中，并设置其中四、五、六级标题的对齐方式分别为：左对齐、居中对齐和右对齐。,标题设置H1:一级标题H2:二级标题H3:三级标题H4:四级标题,左对齐H5:五级标题,居中对齐H6:六级标题,右对齐,.,3.HTML常用标记段落格式,2.分段标记：段落标记。它的作用是将其内的文字另起一段显示。通常可以省略。段与段之间有一个空行。可以使用align属性指定段落的对齐方式，使用方法同上。3换行标记：是换行标记。表示以后的内容移到下一行。它是单标记，没有。,.,3.HTML常用标记段落格式,4.水平线标记标记是一条水平线，是单标记。可以使用“align”属性设置对齐方式；“color”属性设置水平线颜色；“size”属性设置水平线粗细，以像素为单位，默认值为2。使用“width”属性可设置线段长度，可以是以像素为单位的绝对值，也可以一个百分比的相对值，如“width=50%”表示相对于当前窗口50%的宽度。,.,3.HTML常用标记段落格式,例4分段、换行及水平线标记。,早发白帝城早发白帝城作者：李白朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。,代码如下：,.,4.HTML常用标记列表,有序列表的结构如下所示：第一项第二项第三项,.,3.HTML常用标记列表,是无序列表标记，其中的列表项用标记引导文字，显示网页中的这些文字后，文字前会自动加上“”序号。无序列表的结构如下所示：第一项第二项第三项有序列表和无序列表的标记可省。有序列表和无序列表都允许自身嵌套或相互嵌套。,.,3.HTML常用标记列表,例：有序列表以下是一个有序列表，有4个列表项。网页多媒体的插入文本的插入图片的插入视频及动画的插入音频的插入,将该例中的“”改为“”，则为无序列表,.,3.HTML常用标记列表,嵌套列表示例：,实现代码：有序列表与无序列表以下是一个有序列表，有4个列表项，其中第3项嵌入一个无序列表，也有4个列表项。网页多媒体的插入文本的插入图片的插入视频及动画的插入mp4视频格式rm视频格式gif动画格式flash动画格式音频的插入,.,3.HTML常用标记图像,图像标记格式为：src属性是图像标记的必需属性，用来指定图像源文件的路径和文件名。网页使用的图片格式可以是GIF或JPEG。height和width的属性值为整数数值时，单位为像素，属性值以百分比表示（1%100%）时，图片将以相对当前窗口大小的百分比来显示。,.,3.HTML常用标记图像,align属性有left、right、top、middle和bottom共5种。其中“top”设置图像的顶部与文本顶部对齐；“middle”设置图像在垂直方向的中部与文本中部对齐；“bottom”设置图像的底部与文本的底部对齐。hspace属性用来指定图像与浏览器窗口左边界的水平距离；vspace属性用来指定图像与窗口上端边界的垂直距离，单位是像素。alt属性用来指定图像的替换文字，当图像正在下载或下载未成功时，图像所处的位置即可出现指定的替换文字。标记没有对应的结束标记。,.,3.HTML常用标记图像,例：图片的插入如左图所示在网页中插入一蒲公英花地的图片，当在硬盘上删除了该图片文件“picture.JPG”后，网页打开的效果如右图所示。,实现代码：图片的插入,.,3.HTML常用标记表格,1表格标记，一个标记对定义设置一个表格。标记有如下属性：border：定义表格边框的粗细，单位为像素，如果省略则不带边框；width：定义表格的宽度，属性值为像素数或百分数（相对窗口百分比）；height：定义表格的高度，属性值为像素数或百分数（相对窗口百分比）；cellspacing：定义表项间隙，单位为像素；cellpadding：定义表项内部空白，单位为像素。,.,3.HTML常用标记表格,表格行标记，一个标记对定义表格的一个行。表项标记，一个标记对定义一个单元格，单元格内容写在该标记对之间。在、和标记可使用以下属性改变整个表格或个别行、个别单元格的背景和边框的色彩。bgcolor：设置背景色彩；background：设置背景图像；bordercolor：边框的色彩。,.,3.HTML常用标记表格,例：表格插入,在网页中插入一3行2列的表格,实现代码：表格的插入表项1表项2表项3表项4表项5表项6,.,3.HTML常用标记超级链接,超链接标记格式为：用于超链接锚点的文字或图像href属性用来指定锚点被触发之后所链接到的URL。标记中还可以包含target属性，用来指定在哪个窗口打开所链接的目标网页，target属性的属性值如下：_blank：在新窗口中打开；_parent：在上级窗口中打开；_self：在当前窗口中打开（默认）；_top：在整个浏览器窗口中打开，并删除窗口的所有框架。,.,3.HTML常用标记超级链接,例：超级链接,点击网页中“这里”字样实现对“al.html”的超级链接。,实现代码：超级链接点击这里链接到一个图片网页,.,3.HTML常用标