电子商务网站的内容设计与开发

电子商务网站的内容设计与开发第1页/共140页1.新、精、专的信息内容信息内容永远处于第一位；内容设计要有组织；及时更新信息内容。2.安全快速的访问提高浏览者的访问速度；要有安全良好运转的硬件和软件环境；遵循“三次点击”原则，即网站的任何信息都应在最多三次点击之内得到。第2页/共140页3.美感十足、方便用户访问的页面提供交互性；完善的检索和帮助功能；方便用户访问和购买。第3页/共140页5.1.2网站内容设计流程通常，电子商务网站的内容设计流程都必须经过如下步骤：(见课本p108图5.1)收集关于该网站的一些关键信息；网站信息结构的设计；网站运行环境的选择，其具体选择标准和原则可参见第三章内容；进行网页可视化设计；网页制作，通常情况下，在网页制作过程中，需利用一定的web数据库技术进行信息和数据的动态发布和提供；网站的维护和管理。第4页/共140页5.2电子商务网站信息结构的设计一般来说，电子商务网站建设与企业的经营战略、产品特性、财务预算以及当时的建站目的等因素有着直接关系。第5页/共140页5.2.1网站信息内容及其功能模块尽管每个电子商务网站规模不同，表现形式各有特色，但从经营的实质上来说，不外乎信息发布型和产品销售型这两种基本形式，一个综合性的网站可能同时包含了这两种基本形式。

第6页/共140页信息发布型的网站仍然是电子商务网站的主流形式。

信息发布型网站中信息结构的设计主要是从以下几个方面来进行的：见书p110图5.2公司概况；员工信息；产品目录；产品价格表；产品搜索；公司动态；网上订购；销售网络；售后服务；技术支持信息；第7页/共140页

联系信息；财务报告；辅助信息，用来弥补产品品种比较少，网页内容单调等不足；其他内容信息；比如反馈表、公司人才招聘信息、到其他相关站点的链接；增值服务；开辟网络环境下的新服务项目，以增加其服务功能，吸引网民再次光临。第8页/共140页如：海尔网站静态内容》一般、常规信息：公司的历史、文化等》修改较少，初期建设注意规划动态内容》公司产品和服务有关信息，促销信息》经常修改，保持网站的吸引力和作用第9页/共140页分为主要功能和辅助功能主要功能》信息发布、网上交易（海尔）辅助功能》配合主要功能而设置的。如客户注册管理(8848)功能确定原则》内容与功能统一，功能满足顾客需求（如退货）第10页/共140页完全电子商务网站的基本功能企业形象宣传产品展示商品与服务的在线订购顾客关系与服务新闻、信息发布网上调查销售业务信息管理第11页/共140页在规划设计一个具体网站内容模块和功能时，主要应考虑企业本身的目标和所决定的网站功能导向，让企业上网成为整体战略的一个有组成部分，让网站真正成为有效的品牌宣传阵地、有效的营销工具，或者有效的网上销售场所。第12页/共140页5.2.2网站目录与链接结构的设计网站链接结构的原则是：用最少的链接，使得浏览最有效率。一般地，建立网站的链接结构有如下两种基本方式。树状链接结构（一对一）类似dos的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构像一棵树。优点：条理清晰，不会“迷路”；缺点：浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕径首页。第13页/共140页2.

网状链接结构（一对多）类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构像一张网。优点：浏览方便，随时可以到达自己喜欢的页面；缺点：链接太多，容易“迷路”。第14页/共140页第15页/共140页主页产品展示关于我们网上销售在线服务网站管理信息发布企业简介企业动态业务联系产品分类产品目录产品简介产品详情分类查询品牌介绍新品推介产品查询用户注册购物车订单查询电子合同交易证书下载FAQ在线提问售后服务技术支持用户反馈信息展示信息查询客户资源管理产品管理供应商管理交易管理新闻管理访问分析技术支持管理超级用户管理第16页/共140页这两种基本结构都只是理想方式，在实际的网站中，总是将这两种结构混合起来使用。最好的办法是：首页和一级页面之间用网状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条。一级页面二级页面企业新闻页—新闻1，新闻2首页—产品信息页—产品1，产品2技术服务页—服务1，服务2第17页/共140页随着电子商务的推广，网站竞争越来越激烈，对链接结构设计的要求已经不仅仅局限与可以方便快速地浏览，更加注重个性化和相关性例子，请见书p114倒数第三段5.2.3网站整体风格的设计整体风格设计是网站设计中的重点和难点，是所有网页开发者最希望掌握的，也是最难以学习的，因为没有一个固定的程式可以参照和模仿。第18页/共140页网站风格是抽象的，是指站点的整体形象给浏览者的综合感受。有风格的网站与普通网站的区别在于：在普通网站上看到的只是堆砌在一起的信息，浏览者只能用理性的感受来描述；但有风格的网站可以使人有更深一层的感性认识。通常情况下，网站的设计者要根据企业的具体情况，找出其最有特色、特点的东西——即是最能体现网站风格的东西，并以它作为网站的特色加以重点强化，突出宣传。第19页/共140页具体做法没有定式，这里仅提供以下一些参考使企业的标志尽可能出现在每个页面上，或者在页眉，或者页脚，或者背景；突出网站的标准色彩；突出网站的标准字体；设计一条朗朗上口宣传标语；使用统一的图片处理效果；创造一个企业站点特有的符号或图标使网站的标志尽可能出现在每个页面第20页/共140页创意设计网站的创意创意思考的过程准备期孵化期启示期验证期形成期创意思考的途径1.把它颠倒2.把它缩小3.把颜色换一下4.使它更长5.使它闪动6.把它放进音乐里7.结合文字音乐图画8.使它成为年轻的9.使它重复10.使它变成立体11.参加竞赛12.参加打赌13.变更一部分14.分裂它15.使它速度加快16.使它对称等第21页/共140页5.3网页的可视化设计

5.3.1网页设计原则网页命名要简洁这样既会有助于以后方便地管理网页，又会在向搜索引擎提交网页时更容易被别人检索到。确保页面的导览性好一般来说，网站应提供一个关于本站点的地图，让用户知道在哪儿以及能去哪儿。第22页/共140页3.网页要易读这就意味着需要规划文字与背景颜色的搭配方案。此外，网页的字体、大小也是需要考虑的因素。4.合理设计视觉效果视觉效果主要体现在网页的结构和排版上。要善用表格来布局网页，突出显示出网站内容的层次性和空间性。第23页/共140页5.为图片添加文字说明这样一来，当网速很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时，照样能阅读网页的内容6.不宜使用太多的动画和静态图片太多的动画和静态图片会增大网页容量，浪费用户的金钱和时间。第24页/共140页7.页面长度要适中一个长页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使用户在等待中失去耐心。如有大量的基于文本的文档，就应当以AdobeAcrobat格式的文件形式来放置。8.Java程序少用为宜因为目前来讲Java的运行速度还比较慢，往往使浏览者没有耐心等待页面全部显示出来。第25页/共140页9.整个页面风格要一致这样用户就会在浏览网页时觉得舒服、顺畅，对网站留下深刻的印象。10.计数器能不用最好不用计数器也是由程序设计成的，显示计数器的过程其实就是一个程序的执行过程，它需要占用用户宝贵的上网时间，并且往往毫无意义。第26页/共140页11.尽量使用超级链接这样制作的网页的可移植性比较强，输入量较小。另外要保证超链接的直观有效，以便使用户能够很快地找到其想要的东西。12.不要滥用尖端技术使用尖端技术有可能会打击企业部分用户访问网站的兴趣和积极性；另一方面，最新的网站开发技术还存在用户浏览器的版本支持问题。第27页/共140页网站CI形象设计CI:企业形象。CI设计主要指网站的标志、色彩、字体、标语等。1、网站标志、名称设计网站有代表性的人、事、物专业性网站的代表性物品英文名称作标志网站名称要合法、合理、合情第28页/共140页网站标志、名称第29页/共140页设计网站的标准色彩标准色彩：指能体现网站形象和延伸内涵的色彩。一般地，网站的标准色彩不要超过3种标准色彩要用于网站的标志、标题、主菜单和主色块。第30页/共140页色彩设计色彩的基本知识三原色原理色彩搭配色彩的心理感觉色彩的对比色彩的区域大小和形状色彩的位置第31页/共140页网页色彩设计网页配色的基本方法底色和图形色整体色彩颜色的平衡配色时要有重点色渐变色的调和统调配色分割配色第32页/共140页网页色彩设计网页内容的色彩网页标题色导航菜单色侧栏色页脚色网页色彩搭配的技巧暖色调冷色调对比色调第33页/共140页网页配色第34页/共140页第35页/共140页宣传型电子商务网站第36页/共140页第37页/共140页实现网上商务交易的电子商务网站第38页/共140页第39页/共140页第40页/共140页第41页/共140页第42页/共140页第43页/共140页第44页/共140页企业信息化的电子商务网站第45页/共140页5.3.2网页版面布局的设计版面指的是用户在浏览器中看到的一个完整页面（可以包含框架和层）。布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。1.网页版面布局步骤创建初始方案。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。第46页/共140页见的版面布局形式a)“T”结构布局。所谓“T”结构，就是指网页上边和左边相结合，页面顶部的横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，这是网页设计中用的最广泛的一种布局方式优点：信息能被用户最大限度的获取，而且很方便；其次是页面结构清晰，主次分明、易于使用。缺点：规矩呆板，让人“看之无味”。第47页/共140页第48页/共140页“口”型布局。指页面上下各有一个广告条，左面是主菜单，右面是友情链接等，中间是主要内容。优点：页面充实、内容丰富、信息量大；缺点：页面拥挤，不够灵活。第49页/共140页第50页/共140页“三”型布局。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。对称对比布局。优点：视觉冲击力强；缺点：将两部分有机地结合比较困难。第51页/共140页POP布局。指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。

优点：漂亮吸引人；缺点：速度慢。第52页/共140页第53页/共140页第54页/共140页3.页面版面布局原则与技巧

只有当内容和形式，即具体的网页的排版布局达到一种协调的状态才算是一种真正成功的网页设计。以下是一些设计原则：正常平衡；多指左右、上下对照形式。主要强调秩序，能达到安定诚实、信赖的效果2）异常平衡；即非对照形式，但也要平衡和韵律。此种布局能达到强调性、不安性、高注目性的效果3）对比；色彩、色调等技巧的对比，及内容上的古今、新旧、贫富对比。第55页/共140页凝视；指利用页面中人物的视线，使浏览者仿照跟随的心理，以达到注视页面的效果。

5)空白；突出卓越和优越感，有效体现网页格调。图片解说。此法对不能用语言说服、或用语言无法表达的情感，特别有效第56页/共140页5.3.3网页色彩设计在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。研究表明：彩色的记忆效果是黑白色得3.5倍。也就是说，彩色页面较完全的黑白页面更加吸引人。第57页/共140页在网页设计中较常的做法：主要内容文字用非彩色（黑色），边框、背景、图片用彩色，这样页面整体不单调，用户看主要内容也不会眼花。1.网页色彩搭配的原理色彩的鲜明性；色彩的独特性；色彩的合适性；色彩的联想性。第58页/共140页网页色彩搭配的技巧相同色系色彩；运用对比色或互补色；使用过渡色；用黑色和一种彩色；不要将所有颜色都用到，尽量控制在三种色彩以内；背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读；在设计中要考虑主要用户群的背景和构成。8）标准色彩要用于网站的标志、标题、主菜单和主色块。第59页/共140页5.3.4网页中图片和文字的设计1.善用图片现今web上展现的绝大多数图片和图象是GIF和JPEG格式、PNG和FlashPix文件格式。一般情况下，GIF格式:

漫画、图标、动画和平铺式图案背景。JPEG格式:

照片和艺术复制品。第60页/共140页图像的格式与大小大小：单张30KB，单页60KB，较大图像应进行“切割”图象的格式：GIF、JPEG图像设计技巧为图片加入说明缩略图的使用图片的更新透明色的使用慎用网页背景图片动画设计GIF动画与Flash动画第61页/共140页图像的内容应有一定的实际作用，切忌虚饰浮夸，最佳的图象应集美观与信息内容与一身。图象可以弥补文字的不足，但并不能够完全取代文字。因此，制作页面时，必须注意将图象所包含的重要信息或链接到其他页面的指示用文字重复表达一次。第62页/共140页2.网站字体下面是网页设计中有关字体的使用原则和技巧：不要使用超过三种以上的字体；不要用太大或太小的文字；避免过多使用不停闪烁的文字。标准字体：指用于标志、标题、主菜单、主体内容的字体。不常用字体最好通过图片形式显示第63页/共140页5.4首页设计

首页也叫主页，它是网站的形象页面，是网站的“门面”，故被称为“HomePage”,它的设计是一个网站成功与否的关键。首页的设计应该遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则，同时应纳入企业CIS（企业形象识别系统）计划，与企业CIS的其他内容协调起来。第64页/共140页5.4.1首页的功能模块首页的功能模块是指在首页上需要实现的主要内容及其功能，最简单地在主页上必须清楚地列出三项要点：机构名称、提供的产品或服务以及主页内容（即网站上其他页面还载有什么资料）。第65页/共140页第66页/共140页页头用来准确无误地标示企业的网站，它应该能够体现出企业网站的主题，而该主题是与企业的产品和服务紧密相关的。主菜单即导航条，它提供了对关键页面的简捷导航，其超链接或图标应明确地表明企业网站的其他页面上还载有什么样的信息。第67页/共140页最新消息的传递如果企业网站的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸引用户再来浏览。为保新鲜感，应时刻确保主页提供的是最新信息。电子邮件地址在页面底部设计简单的电子邮件链接，可使用户与网站的有关负责人迅速取得联系。有利于用户节省大量搜索时间，同时企业也能及时获得信息反馈。第68页/共140页联络信息。可以列出通讯地址、公关或营业部门的电话号码等，以便用户联系。版权信息。其他信息。如广告条、搜索、友情链接、邮件列表、计数器等。处理技术上的细节风格、链接、图形、动画、文字、速度第69页/共140页5.4.2首页的可视化设计

确定好首页的内容和功能后，就可以设计首页的版面了。在图文类首页中，通常以图片和标题为视觉兴趣点。为吸引浏览者的注意力，可将文字标题融合在画面中，使两个兴趣点合为一体。勾画草图—软件实现vioso2002第70页/共140页

设计版面的最好方法是：找一张白纸、一支笔，先将理想中的草图勾勒出来，然后再用网页制作软件实现设计人员要了解企业的CIS，熟悉企业标志、吉祥物、字体及用色标准，以便在网站的局部将之体现出来，于平淡之中勾画出一个优美的符合企业特点的曲线，从而将企业印在浏览者的脑海里。在设计中，应避免“封面”问题。封面是指没有具体内容，只放一个标徽Logo点击进入，或者只有简单的图象菜单的首页。第71页/共140页第72页/共140页5.4.3首页设计要注意的问题首页明确，主题突出；尽可能缩短下载时间。此外，还需注意配合最抵挡的设备第73页/共140页5.5其他页面的设计5.5.1新闻页面的设计任何类型企业的电子商务站点都应该有一个新闻页面，该页面担负着双重作用，既可以用来动态发布有关新产品或新开发项目或公司活动的情况，又可以作为公司的活动年表。建立新闻页面，首先在主页上要编写并设置可点击的新闻标题，然后再编写完整的新闻页面，这些页面通过超链接与新闻标题相连。第74页/共140页1.主页中的新闻标题通常标题的文字不宜过长，主要包括的要素与设计的方法如下：1)新闻标题组成的要素新闻日期，日期位于标题的开头；使用一个动词来描述该新闻的目的；设计的产品或企业，着重表示该新闻直接涉及到产品或企业；提示语，用来激发浏览者的兴趣。第75页/共140页新闻标题的版面布置主页中新闻标题的版面布置要保持简单、清晰、引人注目，通常可采用以下几种方法。新闻标题的排列按降序进行排列，开头顶部是最近的新闻，底部是最旧的新闻；可在新闻标题前采用标准编目符或小的图象作为点缀，增加页面的可读性；将新闻标题的列表放在一个上下滚动的窗口中以容纳更多的新闻。第76页/共140页2.新闻页面新闻页面要满足易于导航的要求，通常可以通过在新闻页面建立以下几种方式来实现。建立菜单栏导航系统以便与用户实现新闻页面与网站中其他页面间的无缝跳转。建立与前面或后面新闻的链接；将新闻进行分类或时间索引，建立菜单，用户可根据时间或内容检索其感兴趣的新闻；第77页/共140页4)在新闻页面中包含与该新闻有关的图片、声音或其他多媒体文件；将稿件中出现的关键人名链接到其E-mail地址或其因特网页面上；考虑链接到稿件中提到的任何企业合伙人、公司雇员的见解或其他说明；客户、分析家或公共舆论对该新闻稿主题的见解。第78页/共140页5.5.2产品页面的制作产品页面一般采用信息分层、逐层细化的方法展示公司产品或服务。产品页面的主要内容应包括因特网产品/价格清单以及单个产品页面，建立产品名称到产品页面的链接，还可以利用高级的表格给目录增加新的风格和生动的图象。产品页面的创建主要在于掌握产品目录的层次结构和导航方法。第79页/共140页产品目录的分层通常如下：第一层：首先建立一个产品/价格列表，该表使用户能够全面浏览公司的产品；第二层：对应每个产品的页面，该页面将对此项产品的有关信息进行全面的介绍；第三层：产品更深层次的信息，从这一层中浏览者可以深入了解该产品的技术细节、设计维护等；第四层：如果浏览者对第三层的信息还不满足，可以通过网络向公司的有关人员进一步了解信息。第80页/共140页产品页面应达到以下要求：包含关于产品尽可能多的有用的信息；具有独创性；包含站点的导航菜单及其到产品/价格列表目录的链接。另外要注意的是不要在产品页面上增加太多无用的链接。第81页/共140页5.5.3雇员页面雇员是企业最宝贵的资源和财富，网上企业通过创建每个雇员的页面可以吸引潜在客户，同时也是使虚拟企业人格化的有效手段。目前，网上企业的雇员页面大都采用框架（Frames）形式。最简单的框架是将网页分成左右两部分，左半部分放置雇员名字按字母顺序排列的清单，每个雇员名字都链接到该雇员的个人页面；个人页面的内容放置在右半部分的框架中。第82页/共140页1.设计雇员目录设计按字母排序的雇员清单，填入左框。2.创建默认页面默认页面应提供下列基本信息：企业名称及标志；如何使用框架浏览式的雇员目录页面；返回站点主页的链接。3.创建个人页面个人页面应包括以下信息：联系信息；组织和部门信息；雇员背景信息；增加一些有趣的材料。第83页/共140页5.5.4其他页面设计

客户支持页面市场调研页面企业信息页面其他内容。第84页/共140页5.6网页制作5.6.1电子商务网站中的web资源一般而言，一个电子商务网站中的web资源总是包括静态网页和动态网页两种。静态网页：是一个个.html文件，内容相对稳定，不需要经常修改，文件比较小，适合在网上传输，执行效率很高；如公司介绍、员工信息、销售网络、售后服务信息等是一些相对固定不变的信息。第85页/共140页动态网页：

由数据库和相应的应用程序构成，包含需要频繁更新的数据。由于其页面中包含的内容是来自数据库的，因此，可根据用户的不同选择返回不同的页面。如有关于产品的信息、网上销售的信息以及其他服务（如技术支持、公司新闻动态、论坛系统），特别是网站的管理系统，一般而言都是采用动态页面的形式。总而言之，凡是网页上的内容需要与用户进行交互，就要用动态网页的方式来进行。第86页/共140页5.6.2静态网页的制作

制作静态网页的第一步就是选定一种网页制作软件（或工具）。从原理上来讲，用任何一种文本编辑器都可以制作静态网页，但“所见即所得”的可视化开发工具无疑是最方便的。这里介绍目前主流的两种开发工具。1.MSFrontPage98/2000FrontPage不但拥有优越的网页编辑能力，而且具备网站管理的功能。第87页/共140页

页面制作有FrontPage中的网页视图（98中为Editor）来完成，其工作窗口由三个选项卡组成，分别是WYSIWYG的编辑页、HTML代码编辑页、预览页。站点管理功能有文件夹、导航、超链接、报表、任务视图（98下为Explorer）所组成。具体地讲，FrontPage2000提供了以下功能：精确到像素的定位和分层；预先设计好的主题；自定义主题；第88页/共140页跨浏览器的DHTML动画效果；级联样式表；嵌套子站点；协作和管理；链接自动修复；Web服务器管理。第89页/共140页2.Dreamweaver3.0/8.0（MX）Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。自Dreamweaver3.0开始，Macromedia注意了网站开发工具的配合，由Dreamweaver和制作矢量动画的Flash、处理网页图象的Firework，共同组成了著名的DreamTeam开发工具包，被Macromedia公司称为DreamTeam（梦之队），业界则称之为“网页设计三剑客”。第90页/共140页具体来讲，Dreamweaver具备以下的特点：最佳的制作效率；网站管理；无可比拟的控制能力；所见即所得；梦幻样板和XML；全方位呈现。第91页/共140页5.6.3动态网页的制作一般而言，动态网页的制作分为两种：网页表现形式的动态制作和网页数据内容的动态制作。1.网页表示形式的动态制作目前有四种制作方式，分别介绍如下：Script（脚本）语言；JavaApplets;层叠样式表（CSS）；虚拟现实建模语言（VRML）。第92页/共140页2.网页数据内容的动态制作交互式动态网页中网页数据内容的动态制作一般是和数据库系统联系在一起，通过特定的编程语言和外部应用程序来访问企业信息系统已经存在于数据库中的信息。交互式动态网页的制作主要包括两大步骤：第93页/共140页第94页/共140页数据库设计阶段此阶段主要工作是根据前面确定的网站信息结构图进行数据库的逻辑设计、物理设计，并将具体的数据录入到数据库管理系统中去。程序设计阶段Web数据库接口技术的选择；编程语言的选择；应用程序的编写。第95页/共140页Web编程回顾HTMLHTML纯静态网页HTMLHTML静态站点与数据录入处理和制表系统到系统的基于互连网的应用数据库HTMLHTML动态生成复杂简单文档中心的应用中心的数据库HTMLHTML查询记录通过站点的动态数据访问第96页/共140页四、静态网页制作技术1、HTML语言：HyperTextMarkupLanguage，中文名“超文标记语言”特点：通过“标记”描述页面元素（文本、图片、动画、音乐、影片等媒体）的显示方式源文件为纯文本文件，无需编译，通过浏览器解释运行一个HTML文件（*.htm，*.html）对应一个Web页具备各个Web页面可以通过“链接标记”实现“超级链接”第97页/共140页2、客户端Script脚本语言Script：脚本，一段嵌在HTML源代码中的小程序JavaScript：Netscape公司开发VBScript：Microsoft公司开发的，是VB的一个子集3、CSS技术CascadingStyleSheets，层叠样式表功能：实现网页数据的编排、格式化显示及特殊效果，以弥补HTML在格式化网页数据方面的不足第98页/共140页请利用PhotoShop或Fireworks或其他图像设计软件为网上书店进行主页设计。第99页/共140页附：网站设计基础语言HTMLHTML简介HTML的语法格式文件标签版式标签框架标签字体标签表格与清单标签表单标签超链接标签多媒体标签第100页/共140页一、HTML简介（1）HTML语法标记（标签）：以”<”、”>”括起来的内容，大多成对出现（称为首标记与尾标记），也有单一的标记。书写约定：不区分大小写，忽略标记间多余的空格与回车分类：描述页面元素样式的标记：<body>、<p>、<h1>指向其他资源的标记：<img>、<a>例：这是<b>粗体</b>字标记的作用：描述页面元素的显示方式及其他资源访问方式属性及其值：进行一步提供详细描述信息，所有属性均放在首标记中，多个属性间以空格分开如：<imgsrc=logo.gifwidth=520height=81>属性值属性名第101页/共140页一、HTML简介（2）HTML页面文档的结构一个简单的HTML页面<html>

<head>

<title>HTML文件结构</title>

</head>

<body>

在这里显示文件的主体内容。</body></html>第102页/共140页一、HTML简介（3）HTML标记的结构形态<标记>页面元素内容</标记>如：<p>这是一个文本段落</p><标记属性名=“属性值”>页面元素内容</标记>如：<fontcolor=“red”>红色字</font><标记>如：以内容下换行显示<br>第二行内容第103页/共140页二、创建HTML文档（1）准备工作新建一个用于保存网页及相关资料的文件夹收集网页素材，复制保存在新建文件夹中画出网页草图，安排页面元素用工具软件创建HTML文档利用DreamweaverMX创建HTML文档新建文档查看代码保存文档：文件扩展名*.htm或*.html用文本编辑软件创建HTML文档用记事本进行HTML文档的编辑注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名查看保存的HTML文档效果打开IE浏览器，执行“文件—打开”菜单命令第104页/共140页二、创建HTML文档（2）在浏览页面时修改HTML源文件执行“查看—源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。三、文件标记（1）<html></html>标记：不是HTML文档必须，但最好保持文档的完整性<head></head>标记：此标记中内容是提供给浏览器的，即文件头信息。第105页/共140页三、文件标记（2）<body>标记可包括属性，由此决定页面内容的总体显示风格、背景等。Text属性：用于设定文字颜色Bgcolor属性：设定页面背景颜色link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。Background属性：用于设定背景图片Scroll属性：设定浏览器滚动条是否显示，取值”yes”或“no”，一般用于弹出式窗口第106页/共140页三、文件标记（2）<title></title>标记：置于<head>区段，用于设定浏览器的标题<meta>标记：用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字常见属性：

Name和content属性：指定“网页描述”类型及相应值

http-equiv和content属性：指定HTTP响应头标及相应值举例：第107页/共140页四、排版标记功能：实现页面的版式编排，应用广泛，兼容性强。主要有以下标记：<!---->：注释标记<p></p>：段落标记<br>：换行标记<hr>：水平线标记<pre></pre>：预设格式标记<div></div>区段标记第108页/共140页商务网站数据库设计的过程数据库的设计过程一般包括六个阶段：需求分析概念设计逻辑设计物理设计数据库实施和运行数据库的使用和维护第109页/共140页B2C商务网站数据库实例一、示例B2C商务网站的数据流图会员注册会员数据商品采购会员网上订购商品数据订购商品明细数据结算结算数据客户端服务器端送货；更新商品库存数据（事务处理）货到付款信用卡支付(事务处理)财务数据第110页/共140页二、确定数据表（逻辑设计）会员 （members）商品 （wares）商品类别（class）订单 （orders）订单明细（orderdetail）第111页/共140页1、会员表：membersmembers

字段说明(member_id Character(15), 帐号(主关键字)

password Character(15), 密码字

name Character(20), 姓名

sex Character(2), 性别

birthday date, 出生日期

idcard Character(18), 身份证号码

company Character(50), 公司、单位

address Character(50), 住址

tel_bp Character(30), 电话或手机号码

zip Character(6), 邮政编码

country Character(16), 国家或地区

province Character(16), 省、市或自治区

city Character(16), 所在城市

email Character(50) 电子邮箱地址）第112页/共140页2、商品表：wareswares

字段说明(class_id Character(15), 所属类别编号

ware_id Character(15), 商品编号主关键字

pp Character(12), 品牌

pm Character(18), 品名

cd Character(20), 产地

xh Character(20), 型号

gg Character(20), 规格

dw Character(2), 数量单位

jj memo, 商品简介

lsj Currency, 参考零售价

yhj Currency, 网上优惠价

kcl Integer, 库存量

tp Character(30) 商品图片的文件名）第113页/共140页3、商品类别表：classclass

字段说明(parent_id Character(15), 父类别编号

class_id Character(15), 类别编号主关键字

class_name Character(10), 类别名）第114页/共140页4、订单表：ordersorders

字段说明( order_id LongInteger, 订单号，主关键字

member_idCharacter(15), 会员号，来自会员表

pdate DateTime, 订购时间

sendate DateTime, 送货时间

sender Character(10), 送货人

paytype Character(10), 货款支付方式

sendstatus Logical, 货物是否送达

paystatus Logical, 货款是否已付）第115页/共140页5、订单明细表：orderdetailorderdetail

字段说明(order_id LongInteger, 订单号，来自于订单表

ware_id Character(15), 商品号，来自商品表

price Currency, 成交价

number Integer, 购物数量）第116页/共140页三、确定表之间的关系Membersmember_idpasswordnamesex……waresware_idclass_idpppm……orderdetailorder_idware_idpricenumberordersmember_idorder_idpdatesendate……Classparent_idclass_idclass_name第117页/共140页电子商务网站的实施方式外包、租借和自建第118页/共140页（一）外包全权委托外部专业化公司提供一揽子解决方案，并且实施特点》速度快，利用专业化服务，如上海书城采用IBMNet.CommerceV3的解决方案，2个月完成》定制方案，可以要求提供针对企业实际的方案》节省开发费用，可以节省1/3》获得专业化服务，如网上支付、物流服务第119页/共140页（二）租借利用电子商务服务站点（ASP、BSP）提供空间建设站点。企业只需要提供有关材料，维护、收款以及物流配送由门户站点负责。网上商城Http://

操作步骤：填写用户资料，获取用户代码和密码，交纳保证金商人门户网站Http://特点：简单、快捷、廉价缺点：大众化、缺乏发展空间第120页/共140页（三）自行建设外包适合非技术类的大中企业，租借适合中小企业或者试探性大中企业自行建设适合大企业，技术力量雄厚。需要有经验、时间和大预算。优势是可以建立独特的有竞争力的功能。自行建设时应充分利用现有的开放的平台，并在此基础上进行开发。如：IBM、HP、Intel、Microsoft等第121页/共140页电子商务网站的域名申请

见第五章相关内容（一）域名的命名（二）域名的申请第122页/共140页（一）域名的命名与企业已有商标或企业名称具有相关性简单易记易用，3-8个字符多个域名：出现申请类似的域名，如Sohu、Sohoo国际性：以英语单词为准,china与拼音民族性：第123页/共140页域名的命名规则域名中只能包含26个英文字母0-9数字“-”连字符域名中字符组合规则英文字母不区分大小写长度有限制第124页/共140页国际域名命名规则:可使用顶级域：COM，NET，ORG只能使用英文字母、数字及连字符不能以连字符开始和结尾域名总长度不要超过26个字符国内域名命名规则:遵守域名命名共同规则域名长度不得超过20个字符不得使用或限制使用以下名称：注册含有“china、chinese、cn、national”等的域名需经国家部以上单位正式批准。公众知晓的其他国家、地区名、外国名、国际组织名不得使用县级以上（含县级）行政区划名的全称或缩写需由相关县级以上人民政府批准行业名称或商品通用名不得使用对国家、社会或公共利用有损害的名称不得使用第125页/共140页2、域名的选择：考虑企业发展规划及其商业范畴公司、企业、组织的性质或信息的性质简练、易记、标识性强，具有一定内涵域名被抢注与冲突对策3、域名注册管理机构国内域名注册：中国互联网络信息中心（CNNIC））授权其代理进行第126页/共140页国际域名注册：通过国际互联网络信息中心（INTERNIC）（）授权其代理进行国内域名注册步骤（仅限公司和单位）在线填写注册申请表域名查询选择注册商确认注册内容下载域名注册委托书，打印并加盖公章完成在线填写域名注册申请表，打印并加盖公章邮寄申请材料付款第127页/共140页国内英文域名的注册步骤进入中国互联网络中心网站查询希望注册的域名是否已经存在CNNIC会向你推荐相关的其他域名问你是否希望同时注册，或你是否希望放