深圳市全民素质提升计划
电子商务专业
授课班级：新日塑电子商务班
授课教师：李晓
所在单位：科讯教育
商务网站建设与维护
教案
【课题】电子商务网站的制作
【教材版本】
谭建中张淑蕴.教育部职业教育与成人教育司推荐教材——电子商务网站建设与维护.北京：高等教育出版社，2002.8
【教学目标】
知识目标：电子商务网站制作的过程及具体步骤。
能力目标：电子商务网站的规划、构建、设计和制作。
【教学重点与难点】
电子商务网站的规划、构建、设计和制作。
【教学媒体及教学方法】
制作PPT。
演示法、讲授法、项目教学法、小组讨论法。
【课时安排】
2课时（90分钟）。
【教学过程】
第一环节导入
如何建立一个真正的电子商务网站，如何使网站结构清晰合理，内容准确详实，页面生动鲜明，如何保证自己的网站能够在茫茫的网络世界脱颖而出，完整的建设策划方案是我们开始建设网站之前必须要考虑的问题。
第二环节新授课
一、规划构建网站
[讲解]
1．建立电子商务网站的过程和具体步骤
设计、建立一个电子商务网站的过程和具体操作步骤大致如图2-2-1 所示。
在设计制作电子商务网站前，必须要进行市场调研。在市场调研的基础上，确定电子商务网站的服务领域，服务对象及相应的服务内容。对网站合理、恰当的定位，是网站成功的第一步。
[演示]
教师用幻灯片演示电子商务网站建立的过程和具体步骤。
[分组讨论]
学生根据前面演示的具体事例，分组讨论电子商务网站建立的过程和具体步骤。
2．电子商务网站的设计
下面主要从内容组织上讲解网站的规划与设计：
（1）网站CI设计
所谓CI（Corporate Identity）是借用的广告术语，意思是通过视觉来统一企业的形象。
现实生活中的CI 策划杰出的例子如可口可乐公司，全球统一的标志，色彩和产品包装，给我们的印象极为深刻。
一个杰出的网站和实体公司一样，也需要整体的形象包装和设计。准确的、有创意的CI 设计，对网站的宣传推广有事半功倍的效果。对于网站的CI 策划应从以下几个方面考虑：
①设计网站的标志
一个网站的标志如同商标一样，是站点特色和内涵的集中体现，要尽量做到见到它就能让人联想起你的站点。标志可以是中文、英文字母，可以是符号、图案，还可以是动物或者人物等等。比如：新浪用字母sina ＋ 眼睛作为标志，搜狐用sohu ＋ 狐狸作为标志等。下图分别为新浪网和百度网的标志。
②设计网站的标准色彩
“标准色彩”是指能体现网站形象和延伸内涵的色彩。如IBM 的深蓝色，肯德基的红色条型，Windows 视窗标志上的红蓝黄绿色块。一般来说，一个网站的标准色彩不超过3 种，太多则让人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块。给人以整体统一的感觉。适合于网页标准色的颜色有：蓝色、黄/橙色、黑/灰/白色三大系列色。下面分别为IBM 公司网站和可口可乐公司网站截图。
③设计网站的标准字体
和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的
字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。
④设计网站的宣传标语
也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。例如：雀巢的“味道好极了”；麦斯威尔的“好东西和好朋友一起分享”；Intel 的“给你一个奔腾的心”。
（2）网站的栏目安排
栏目实质就是一个网站的大纲索引，通过它应该能明确地显示网站的主体。在安排网站栏目时，一般要注意以下几点：
①突出、紧扣主题
可以将网站的主题按一定的方法分类，将它们作为网站的主栏目。以建一个“网上书店”为例，安排栏目时可以对书籍进行相应的分类，例如按类别就可将主题栏目分为：文学书籍、政治哲学、科技书籍、经济书籍、外文书籍等。
②网站导航或指南栏目
导航索引栏目，用以指导初到网站访问的用户，使他们快速找到想要的内容，而且这种亲切的设置也能使初次访问的用户不会有陌生及无所适从感。
③最近更新栏目及特殊服务栏目
如果网站的主页没有安排专门的版面放置最近更新的内容信息，为了让网站更具人性化并照顾常常光临的访客，就有必要设立一个“最近更新”栏目。例如，在“网上书店”网站的主页可以设立一个“最新书目”栏目，在该栏目下专门介绍最近新增书籍的情况，以方便浏览者。另外，在网站的网页上，还可以安排一些特殊内容及信息的专门介绍。例如：安排有关某一区域的气候变化、新的商务活动、新书动态、展会消息等。
④实时调查或可以双向交流的栏目
安排一些可以进行双向交流的栏目，如论坛、留言本等，让浏览者留下他们的信息。也可以通过网络进行实时或延时地访问调查，收集浏览者对网站的观点、看法和对某一主题的讨论意见。这样可以有效地拉近网络与浏览者的距离，增加亲和力，从而达到网站宣传的目的。
⑤下载栏目
信息资源共享是网络的一大特点，在网站的主页上设置一个资源下载栏
目，以方便浏览者。
（3）网站的版面设计
网站的版面设计往往根据网站的特性、内容和网站建设者的个人爱好的不同而形态各异、
布置千变万化。一个网站的版面如何布局才好看，并没有定式。但一般来说，大都遵循下面的
布局原则：
①尽量精简、简朴
“简单就是美”，这是设计者追求的最高境界。网站的设计应以醒目为上，网页上的图片应力求俭朴，尺寸不要太长，采用GIF 等占用字节数小的格式，避免耽搁用户的时间。
②善用表格
表格在版面布局方面有突出的作用，通过表格内单元格有规则的排列，将图像、文本、表单等内容安置在固定的地点，然后通过单元格的合并、拆分、着色、间距调整，将体现错落有致的网页渲染效果。
③善用图片
图画可以弥补文字之不足，但并不能够完全取代文字。很多用户为了加速网页的下载速度，常常把浏览器设定为略去图像，只看文字。因此，制作主页时，必须注意将图像所表示的重要信息或连接其他页面的指示用文字重复表达—次。
④确定网站的主色调
网站的主色调就是指网页的色彩，一般不要超过3 种。下列色彩组合较易使版面醒目：黑白、蓝白、黑灰白、蓝黑、紫黄。
（4）网站的目录结构
网站的目录是指创建网站时所建立的目录。目录结构创建的好坏，对于站点本身的上传维护，网站内容的扩充和移植有着重要的影响。在创建网站前应该认真考虑网站的目录结构：
①尽量减少存放于根目录下的文件数
如果为了图方便，可将所有文件都放在根目录下，这样做的结果将给网站维护带来下述两个问题：首先，将使文件管理非常混乱，其次，将影响到网站上传速度。服务器一般都会为根目录建立一个文件索引，如果我们将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。
②尽量按栏目内容建立子目录
为管理方便，应尽量按栏目内容建立子目录。例如：“网上书店”电子商务网站可以根据书籍类别分别建立相应的目录，象literature、politics、science 等；另外有关公司简介、产品介绍、价格、在线定单、反馈联系等也应该建立相应目录。
③每个主目录下建立独立的images 目录
系统默认情况下，每个网站根目录下都有一个images 目录。如果将所有图片都存放在这个目录里，对网站图片的管理相当麻烦。因此，最好为每个主栏目建立一个独立的images 目录，而根目录下的images 目录只是用来放主页和一些次要栏目的图片。
④目录的层次不要太多
目录的层次建议不要超过3 层，这样便于维护管理。
⑤目录取名应注意的事项
首先，不要使用中文目录。使用中文目录可能对网址的正确显示造成困难。
其次，不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。
另外，尽量使用含意明确的目录名。上面的例子中，你可以用literature、politics、science
来建立目录，这样便于记忆和管理。
（5）网站的链接结构
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。
①尽量用最少的链接，使得浏览最有效率。
②主页和一级页面之间用网状链接结构，一级和二级页面之间用树状链接结构
（6）网站的网页设计
1．内容的准备、组织
在开始页面设计前，应先把将要展示的内容进行分类并组织好。可以通过画出网页的流程图来标示。
2．主页的设计
主页也称为首页，是整个网站的起始点和汇总点，是用户开始浏览网站的门户。因此，在主页中应当包含：该商务网站及公司的概况介绍、网站的主要内容；清晰、醒目的标题；联络地址，列出公司相关的商务地址、电话及电子邮件地址，以便用户联系等。
[演示]
教师用幻灯片演示电子商务网站的规划和设计。
[分组讨论]
学生根据前面演示的具体事例，分组讨论电子商务网站的规划和设计。
第三环节课堂练习
采用教材中P22-P23的填空题6，7，8，9题。
第四环节小结
本课题从实际出发，详细介绍了规划、设计和建立电子商务网站的过程和具体的步骤，包括需求分析、总体策划、网站构建的工作流程和如何进行电子商务网站设计等内容。
第五环节布置作业
采用教材中的：
（1）P23思考题7，8题：进行课后复习。
（2）P23思考题9，10题：对所学知识要点进行复习与掌握。