电子商务网页制作-课程设计指导培训课件

网站内容设计——网站的导航设计
在网站中，信息是自由流动的，浏览者使用点击的方式浏览信息，很容易陷入 信息的迷宫，即所谓信息迷航，因此必须设计一个清晰的导航系统，保证浏览者在 浏览过程中，能随时知道在哪里，以及能够去哪里，以下规则应该遵守：
（1） 浏览者很容易地了解目前所处的位置，能很方便地返回主页。 （2） 提供搜索和索引功能，使浏览者可以更容易地找到查找的信息。 （3） 为浏览者提供与网站管理员，以及公司相关人员的联系方式，以便在必 要的时候获取帮助。 （4） 整个网站导航的外观保持一致，如将导航栏放在网页的同一位置，使用 外观相同的按钮或文字等。 （5） 在长网页中加入书签链接，以避免频繁的页面滚动，并能保证随时可以 回到页头。 （6） 不要为没有建设好的网页提供超链接。
pic
图片
title
标题
网站内容设计——确立网站目录结构
二、目录结构的设计规范 对网页浏览者来说，无所谓网站目录结构的好坏，但对于网站的建设者和管
理者来说，一个混乱的目录结构将严重影响网站的管理和维护，后患无穷。因此 ，在建立网站时就应该理清思路，创建一个清晰明朗的网站目录结构。建立网站 目录的原则是，以最少的层次提供最清晰简便的访问结构。
电子商务 网页制作
DW
项目十 课程设计指导
项目目标
• 学习电子商务网站策划 • 进行网站材料的搜集 • 进行内容的创建 • 完成具体网页的设计
建站流程
一个电子商务网站的建立，通常需要经过以下几个阶段：
1. 项目立项 首先通过与客户不断的接洽和了解，初步达成制作协议，进行项目立项。较好
的做法是成立一个专门的项目小组。然后撰写客户需求说明书，请客户提供一个完 整的需求说明。
网站内容设计——确立网站目录结构
images子目录是专门用来存放图片文件的，但将所有的图片文件都存放在这个 images子目录中也不大方便，尤其是将某个栏目删除时，要从images子目录中找 出被删除栏目的所有图片是一件相当麻烦的事。所以最好在每一个栏目目录中建立 一个独立images子目录，这样管理起来就很方便了。
整体形象设计包括标志、标准字、标准色彩、广告语的设计等。首页设计包括版面 、色彩、图像、动态效果、图标等风格设计，也包括网页横幅、菜单、标题、版权 等模块设计。首页一般设计1-3个不同风格，完成后，供客户选择。
4. 开发制作 程序员和网页设计师同时进入全力开发阶段，同时，测试人员需要随时测试网
页与程序，不要等到完全制作完毕再测试，以免浪费大量的时间和精力。
小贴士 很多客户对自己的需求并不是很清楚，需要不断引导和帮助
，挖掘出他们潜在的、真正的需求。配合客户写一份完整详细的 需求说明，并请客户签字认可，这会花很多时间，但这样做是值 得的。把好这一关，可以杜绝很多因为需求不明或理解偏差造成 的失误和项目失败。
建站流程
2. 网站总体规划设计 在拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体规
一般在使用Dreamweaver CS5创建站点之前，需要我们先在本地磁盘创建网 站的根目录和images子目录，然而仅仅依靠这一个子目录来管理文件是远远不够 的。较好的方法是，按主要栏目建立子目录，一个栏目中的文件放在相应的子目 录中。还可以为需要经常更新的文件专门设立一个子目录，这样在维护网站时， 只需上传这个子目录中的文件就可以了。
网站内容设计——确立网站目录结构
常见的图片文件头部如下表所示：
图片性质
放置在页面顶部的广告、装饰图案等长方形的图片 标志性的图片 在页面上位置不固定并且带有链接的小图片
文件名头部 英文含义
banner
横幅
logo
标志
button
按钮
在页面上某一个位置连续出现，性质相同的链接栏目的图片
menu
菜单
装饰用的照片 不带链接表示标题的图片
划设计，并撰写总体规划设计说明书，总体规划设计说明书包括以下内容： • 网站的栏目和版块 • 网站的功能和相应的程序 • 网站的导航结构 • 数据库的概念设计（如果项目涉及数据库） • 网站的交互性设计
建站流程
3. 整体形象设计 在程序员进行详细设计的同时，网页设计师开始设计网站的整体形象和首页。
设计师通常会遵循以下几条原则： 1．根目录只允许存放index.html和main.html文件，以及其他必须的系统文件。 2．每个栏目建立一个相应的独立目录。 3．每个目录下存放各自独立images目录。 4．所有的JavaScript文件存放在根目录下统一目录\script ，所有的CSS文件存放在 各语言版本下的style目录，所有的CGI程序存放在根目录并列目录\cgi_bin目录。
网页设计与制作——确定网站配色方案
色彩能通过视觉使浏览者产生不同的生理反应和心理联想，因此深入了解色彩 的心理感觉和象征作用，对网页设计具有重要的意义。 网站色彩的整体效果，要求悦目而有个性，既能抓住浏览者的视线，又能通过色彩 的象征产生不同的感受。在设计网站的配色方案时，要以企业标准色和商品形象色 为主，参阅季节流行色，突出产品和服务，树立网站的形象，产生亲切感，吸引浏 览者的目光。
小贴士 在定下选题之后，你最好先去了解一下类似的网站
都做了些什么。使用搜索引擎上网查找这些类似的网站 ，分析它们有什么特色，可以考虑将其中好的东西融入 到自己的网站中，当然抄袭并不是一种好的作法，应该 让它变成你自己的东西。
网站内容的源自文库集
虽然视觉效果好的网站会给人留下深刻的印象，但只有丰富充实的网页内容， 才会让浏览者收藏你的网站。
注册网站域名
注册网站域名
2. 域名注册步骤 域名注册服务由CNNIC（中国互联网络信息中心）认证的域名注册服务机构提
供，目前Internet上有很多这样的机构，下图是一个提供域名注册服务的网站：
注册网站域名
进行域名注册通常有如下步骤：
小贴士 如果查询域名时显示该域名已经被其他组织注册，
而你又对此域名情有独钟，则可以先查询该域名所有人 的联系信息。然后与对方协商转让事宜。若协商不成， 你只能重新选择其他域名。避免出现这种被动情形的最 佳方法，便是立即查询、立即注册。
和推广，这样才能提高访问量。网站宣传推广的基本方法有： • 在各搜索引擎注册，让浏览者通过搜索引擎找到网站。 • 在传统媒体上发布网站的信息，扩大网站的影响 • 在有影响的BBS上发布广告信息。 • 适当通过电子邮件，将网站信息发送给浏览者。 • 与其他同类网站合作，交换广告条。
网站成功推出后，长期的维护工作才刚刚开始，在运营过程中需要定期不断更 新网站的信息，逐步完善网站的功能。
选题与内容搜集
网页设计是基础，网站规划是灵魂，一个电子商务网站是否成功，主要取决于 网站规划的好坏。
一个优秀的网站规划，可以给整个网站开发带来良好的指导性作用，使以后的 网页设计工作变得无比轻松。而这个步骤，也正是你极易忽视的。
构思选题
做一个电子商务网站，必须要合理地选择经营项目和内容，这样才能保证网站 的赢利，同样，做一个成功的课程设计，选题是十分重要的，最好选择那些平时熟 悉的、感兴趣的、容易搜集材料的题材，如计算机整机和配件、办公用品、商务礼 品、化妆品、图书、音像、旅游业务等，不必过分求新求异。
网站内容设计——确立网站目录结构
一、文件名的设计规范 文件的命名原则是： 1．以最少的字母达到最容易理解的意义。 2．团队中的每一个成员都能够方便地理解文件名的含义。 3．对网站中的文件使用“按名称排列”命令时，同一种大类的文件能够排列在一 起，以便查找、修改、替换、计算负载量等操作 。
网站内容设计——确立网站目录结构
网站栏目相当于网站的一个索引大纲，和书本目录的作用是一样的，它的层次 是否清晰，分类是否合理，将直接影响浏览者对网页的浏览，其重要性非同小可。
网站内容设计——设计网站栏目
课程设计仅设计网站前台，前台主要而向企业的外部用户，通常具备信息发布 、商务交易、双向交流三类功能。其中信息发布模块的主要功能包括新闻信息发布 、产品信息发布、企业信息发布；商务交易模块的功能包括产品选购、订单、合同 管理、结算、配送、支付、安全交易等功能；双向交流模块包括BBS论坛、聊天室 、公告栏、网上调查、客户反馈等。你可以根据自身的制作水平、课程设计的时间 限制等具体情况，对网站功能进行取舍。
对于内容的安排，最好给出一个内容清单，这对于设计者来说是十分必要的。 内容清单中包含以下内容：
• 具体的产品与服务信息。比如大量的文本信息、产品目录、产品图片、价格资料 等等。这些信息主要由文本、图像和声音组成，可以通过网站的栏目设置来展示 和体现。
• 企业形象信息。包括主题定位、制作策划、广告宣传等等。网页设计者通过运用 适当的视觉语言，营造强烈的视觉效果，以达到树立企业的形象、宣传企业文化 、传播企业信息的目的。在搜集这些材料的时候要进行深入细致的市场调查，争 取企业的业务部门和公关部门的密切配合，甚至需要借助专业广告策划的帮助才 能圆满完成。
网页设计与制作——设计网站标志
标志是一个网站浓缩的形象代表，如可口可乐公司红底白字的“Cocacola”字 样、麦当劳快餐的“M”形拱门标志、搜狐网站的狐狸标志、中国工商银行的古钱 币标志都给人以极为深刻的印象，使人能很快联想起这些公司或网站。
电子商务网站的标志可以直接采用公司的标志（如中国工商银行的网站），也 可以采用公司产品的商标（如可口可乐公司的网站）。如果没有现成的标志可以使 用，就需要自己来设计了。可以考虑选用具有代表性的人物、动物、植物、物品等 作为标志，（如德国奔驰公司的方向盘、搜狐网的狐狸等），也可以用网站的名称 作为标志，（如微软的“Microsoft”标志、新浪网的“sina”标志）。总之网站 的标志，要求造型简练，立意准确，具有个性。
网站内容设计——网站风格的确立
一个平庸的网站与一个成熟的、有品味的网站最大区别在于，前者只是信息的 堆砌，而后者则具有独特的风格。这种风格通过标志、色彩、字体、标语、版面布 局、文字风格、交互方式以及技术特点表现出来，给浏览者留下深刻的印象，使浏 览者能很快地分辨出这个网站。
电子商务网站通常是用来推销产品的，要注意网站风格与主题的统一：一个推 销图书的网站，应该温文儒雅、色彩柔和，美观大方；而一个推销医疗器械的网站 则应有高科技感，质量精良。如果前者过于前卫花哨，而后者因漂亮的图片吸引了 大量的儿童访问的话，这样的网站就已失去最初的意义了。另外，在确立网站风格 时，还要参考产品及服务的销售对象、电子商务的类别，以及目前的流行态势。例 如产品销售的主要对象是什么国家、地区；网站主要应用于B2B还是B2C；客户的 年龄、性别、文化水平、生活方式和风俗习惯 ；甚至竞争对手的经营策略、宣传手 段、技术水平都要考虑进来。
在为文件命名时应该遵循以下规则： 1．文件名称统一用小写的英文字母、数字和下划线的组合 2．每一个栏目文件夹中应该包含一个缺省的html 文件，文件名统一用 index.htm 3．文件名称分为头尾两个部分，用下划线隔开，头部表示文件的大类性质。如单 个产品页面中第一个产品的页面文件为prod_01.htm，第二个产品的页面文件为 prod_02.htm。 4．图片文件命名也采用头尾两部分，头部表示图片的性质，尾部分用来表示图片 的具体含义。
小贴士 作为网页设计师，你应该经常与程序员沟通，以了
解彼此的工作情况，仔细听取他人的意见，对网页设计 是大有帮助的。
建站流程
5. 调试完善 在网站初步完成后，上传到服务器，对网站进行全范围的测试。发现问题及时
解决并记录下来。
6. 网站的推广与维护 网站建设不是一劳永逸的事情，一个电子商务网站建好以后，还需要进行宣传
网站内容的搜集
• 制作网页本身所需的各种网页素材。如各种小图标、水平线、背景图片等。
小贴士 事实上，网页内容的收集和组织是网页制作最为困
难的一步，前期的准备工作比制作网页本身所花的时间 要多许多。
网站内容设计——设计网站栏目
当网站的内容和素材搜集完毕之后，必须花大量的时间来研究分析和创建网页 内容，例如准备文稿，仔细地编辑和校对；整理产品目录、产品图片和价格表，从 中遴选出紧凑有用的内容；构思精炼、易记的广告词等等。接下来再把这个巨大的 信息资源分门别类地整理好，参考这些信息资源，依据电子商务网站的功能设立出 网站栏目。在设置栏目时，要注意安排合理、重点突出、方便浏览者、符合浏览者 的浏览习惯。