电子商务网页制作 项目10课件.pptx

1、DW电子商务网页制作课程设计指导学习电子商务网站策划进行网站材料的搜集进行内容的创建完成具体网页的设计建站流程一个电子商务网站的建立，通常需要经过以下几个阶段：1.项目立项首先通过与客户不断的接洽和了解，初步达成制作协议，进行项目立项。较好的做法是成立一个专门的项目小组。然后撰写客户需求说明书，请客户提供一个完整的需求说明。很多客户对自己的需求并不是很清楚，需要不断引导和帮助，挖掘出他们潜在的、真正的需求。配合客户写一份完整详细的需求说明，并请客户签字认可，这会花很多时间，但这样做是值得的。把好这一关，可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。小贴士建站流程2.网站总体规划设计在

2、拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体规划设计，并撰写总体规划设计说明书，总体规划设计说明书包括以下内容：网站的栏目和版块 网站的功能和相应的程序 网站的导航结构 数据库的概念设计（如果项目涉及数据库）网站的交互性设计建站流程3.整体形象设计在程序员进行详细设计的同时，网页设计师开始设计网站的整体形象和首页。整体形象设计包括标志、标准字、标准色彩、广告语的设计等。首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括网页横幅、菜单、标题、版权等模块设计。首页一般设计1-3个不同风格，完成后，供客户选择。4.开发制作程序员和网页设计师同时进入全力开发阶段，同时，

3、测试人员需要随时测试网页与程序，不要等到完全制作完毕再测试，以免浪费大量的时间和精力。作为网页设计师，你应该经常与程序员沟通，以了解彼此的工作情况，仔细听取他人的意见，对网页设计是大有帮助的。小贴士建站流程5.调试完善在网站初步完成后，上传到服务器，对网站进行全范围的测试。发现问题及时解决并记录下来。网站成功推出后，长期的维护工作才刚刚开始，在运营过程中需要定期不断更新网站的信息，逐步完善网站的功能。6.网站的推广与维护网站建设不是一劳永逸的事情，一个电子商务网站建好以后，还需要进行宣传和推广，这样才能提高访问量。网站宣传推广的基本方法有：在各搜索引擎注册，让浏览者通过搜索引擎找到网站。在传统

4、媒体上发布网站的信息，扩大网站的影响 在有影响的BBS上发布广告信息。适当通过电子邮件，将网站信息发送给浏览者。与其他同类网站合作，交换广告条。注册网站域名注册网站域名2.域名注册步骤域名注册服务由CNNIC（中国互联网络信息中心）认证的域名注册服务机构提供，目前Internet上有很多这样的机构，下图是一个提供域名注册服务的网站：注册网站域名进行域名注册通常有如下步骤：如果查询域名时显示该域名已经被其他组织注册，而你又对此域名情有独钟，则可以先查询该域名所有人的联系信息。然后与对方协商转让事宜。若协商不成，你只能重新选择其他域名。避免出现这种被动情形的最佳方法，便是立即查询、立即注册。小贴士

5、选题与内容搜集网页设计是基础，网站规划是灵魂，一个电子商务网站是否成功，主要取决于网站规划的好坏。一个优秀的网站规划，可以给整个网站开发带来良好的指导性作用，使以后的网页设计工作变得无比轻松。而这个步骤，也正是你极易忽视的。构思选题做一个电子商务网站，必须要合理地选择经营项目和内容，这样才能保证网站的赢利，同样，做一个成功的课程设计，选题是十分重要的，最好选择那些平时熟悉的、感兴趣的、容易搜集材料的题材，如计算机整机和配件、办公用品、商务礼品、化妆品、图书、音像、旅游业务等，不必过分求新求异。在定下选题之后，你最好先去了解一下类似的网站都做了些什么。使用搜索引擎上网查找这些类似的网站，分析它们

6、有什么特色，可以考虑将其中好的东西融入到自己的网站中，当然抄袭并不是一种好的作法，应该让它变成你自己的东西。小贴士网站内容的搜集虽然视觉效果好的网站会给人留下深刻的印象，但只有丰富充实的网页内容，才会让浏览者收藏你的网站。对于内容的安排，最好给出一个内容清单，这对于设计者来说是十分必要的。内容清单中包含以下内容：具体的产品与服务信息。比如大量的文本信息、产品目录、产品图片、价格资料等等。这些信息主要由文本、图像和声音组成，可以通过网站的栏目设置来展示和体现。企业形象信息。包括主题定位、制作策划、广告宣传等等。网页设计者通过运用适当的视觉语言，营造强烈的视觉效果，以达到树立企业的形象、宣传企业文

7、化、传播企业信息的目的。在搜集这些材料的时候要进行深入细致的市场调查，争取企业的业务部门和公关部门的密切配合，甚至需要借助专业广告策划的帮助才能圆满完成。网站内容的搜集制作网页本身所需的各种网页素材。如各种小图标、水平线、背景图片等。事实上，网页内容的收集和组织是网页制作最为困难的一步，前期的准备工作比制作网页本身所花的时间要多许多。小贴士网站内容设计设计网站栏目当网站的内容和素材搜集完毕之后，必须花大量的时间来研究分析和创建网页内容，例如准备文稿，仔细地编辑和校对；整理产品目录、产品图片和价格表，从中遴选出紧凑有用的内容；构思精炼、易记的广告词等等。接下来再把这个巨大的信息资源分门别类地整理

8、好，参考这些信息资源，依据电子商务网站的功能设立出网站栏目。在设置栏目时，要注意安排合理、重点突出、方便浏览者、符合浏览者的浏览习惯。网站栏目相当于网站的一个索引大纲，和书本目录的作用是一样的，它的层次是否清晰，分类是否合理，将直接影响浏览者对网页的浏览，其重要性非同小可。网站内容设计设计网站栏目课程设计仅设计网站前台，前台主要而向企业的外部用户，通常具备信息发布、商务交易、双向交流三类功能。其中信息发布模块的主要功能包括新闻信息发布、产品信息发布、企业信息发布；商务交易模块的功能包括产品选购、订单、合同管理、结算、配送、支付、安全交易等功能；双向交流模块包括BBS论坛、聊天室、公告栏、网上调

9、查、客户反馈等。你可以根据自身的制作水平、课程设计的时间限制等具体情况，对网站功能进行取舍。网站内容设计确立网站目录结构一、文件名的设计规范文件的命名原则是：1以最少的字母达到最容易理解的意义。2团队中的每一个成员都能够方便地理解文件名的含义。3对网站中的文件使用“按名称排列”命令时，同一种大类的文件能够排列在一起，以便查找、修改、替换、计算负载量等操作。网站内容设计确立网站目录结构在为文件命名时应该遵循以下规则：1文件名称统一用小写的英文字母、数字和下划线的组合2每一个栏目文件夹中应该包含一个缺省的html 文件，文件名统一用index.htm 3文件名称分为头尾两个部分，用下划线隔开，头部

10、表示文件的大类性质。如单个产品页面中第一个产品的页面文件为prod_01.htm，第二个产品的页面文件为prod_02.htm。4图片文件命名也采用头尾两部分，头部表示图片的性质，尾部分用来表示图片的具体含义。网站内容设计确立网站目录结构常见的图片文件头部如下表所示：图片性质文件名头部英文含义放置在页面顶部的广告、装饰图案等长方形的图片banner横幅标志性的图片logo标志在页面上位置不固定并且带有链接的小图片button按钮在页面上某一个位置连续出现，性质相同的链接栏目的图片menu菜单装饰用的照片pic图片不带链接表示标题的图片title标题网站内容设计确立网站目录结构二、目录结构的设计

11、规范对网页浏览者来说，无所谓网站目录结构的好坏，但对于网站的建设者和管理者来说，一个混乱的目录结构将严重影响网站的管理和维护，后患无穷。因此，在建立网站时就应该理清思路，创建一个清晰明朗的网站目录结构。建立网站目录的原则是，以最少的层次提供最清晰简便的访问结构。一般在使用Dreamweaver CS5创建站点之前，需要我们先在本地磁盘创建网站的根目录和images子目录，然而仅仅依靠这一个子目录来管理文件是远远不够的。较好的方法是，按主要栏目建立子目录，一个栏目中的文件放在相应的子目录中。还可以为需要经常更新的文件专门设立一个子目录，这样在维护网站时，只需上传这个子目录中的文件就可以了。网站内

12、容设计确立网站目录结构images子目录是专门用来存放图片文件的，但将所有的图片文件都存放在这个images子目录中也不大方便，尤其是将某个栏目删除时，要从images子目录中找出被删除栏目的所有图片是一件相当麻烦的事。所以最好在每一个栏目目录中建立一个独立images子目录，这样管理起来就很方便了。设计师通常会遵循以下几条原则：1根目录只允许存放index.html和main.html文件，以及其他必须的系统文件。2每个栏目建立一个相应的独立目录。3每个目录下存放各自独立images目录。4所有的JavaScript文件存放在根目录下统一目录script，所有的CSS文件存放在各语言版本下的

13、style目录，所有的CGI程序存放在根目录并列目录cgi_bin目录。网站内容设计网站的导航设计在网站中，信息是自由流动的，浏览者使用点击的方式浏览信息，很容易陷入信息的迷宫，即所谓信息迷航，因此必须设计一个清晰的导航系统，保证浏览者在浏览过程中，能随时知道在哪里，以及能够去哪里，以下规则应该遵守：（1）浏览者很容易地了解目前所处的位置，能很方便地返回主页。（2）提供搜索和索引功能，使浏览者可以更容易地找到查找的信息。（3）为浏览者提供与网站管理员，以及公司相关人员的联系方式，以便在必要的时候获取帮助。（4）整个网站导航的外观保持一致，如将导航栏放在网页的同一位置，使用外观相同的按钮或文字等

14、。（5）在长网页中加入书签链接，以避免频繁的页面滚动，并能保证随时可以回到页头。（6）不要为没有建设好的网页提供超链接。网站内容设计网站风格的确立一个平庸的网站与一个成熟的、有品味的网站最大区别在于，前者只是信息的堆砌，而后者则具有独特的风格。这种风格通过标志、色彩、字体、标语、版面布局、文字风格、交互方式以及技术特点表现出来，给浏览者留下深刻的印象，使浏览者能很快地分辨出这个网站。电子商务网站通常是用来推销产品的，要注意网站风格与主题的统一：一个推销图书的网站，应该温文儒雅、色彩柔和，美观大方；而一个推销医疗器械的网站则应有高科技感，质量精良。如果前者过于前卫花哨，而后者因漂亮的图片吸引了大

15、量的儿童访问的话，这样的网站就已失去最初的意义了。另外，在确立网站风格时，还要参考产品及服务的销售对象、电子商务的类别，以及目前的流行态势。例如产品销售的主要对象是什么国家、地区；网站主要应用于B2B还是B2C；客户的年龄、性别、文化水平、生活方式和风俗习惯；甚至竞争对手的经营策略、宣传手段、技术水平都要考虑进来。网页设计与制作设计网站标志标志是一个网站浓缩的形象代表，如可口可乐公司红底白字的“Cocacola”字样、麦当劳快餐的“M”形拱门标志、搜狐网站的狐狸标志、中国工商银行的古钱币标志都给人以极为深刻的印象，使人能很快联想起这些公司或网站。电子商务网站的标志可以直接采用公司的标志（如中国

16、工商银行的网站），也可以采用公司产品的商标（如可口可乐公司的网站）。如果没有现成的标志可以使用，就需要自己来设计了。可以考虑选用具有代表性的人物、动物、植物、物品等作为标志，（如德国奔驰公司的方向盘、搜狐网的狐狸等），也可以用网站的名称作为标志，（如微软的“Microsoft”标志、新浪网的“sina”标志）。总之网站的标志，要求造型简练，立意准确，具有个性。网页设计与制作确定网站配色方案色彩能通过视觉使浏览者产生不同的生理反应和心理联想，因此深入了解色彩的心理感觉和象征作用，对网页设计具有重要的意义。网站色彩的整体效果，要求悦目而有个性，既能抓住浏览者的视线，又能通过色彩的象征产生不同的感受

17、。在设计网站的配色方案时，要以企业标准色和商品形象色为主，参阅季节流行色，突出产品和服务，树立网站的形象，产生亲切感，吸引浏览者的目光。企业标准色是企业指定的某一种特定色彩或一组色彩系统，运用在所有视觉设计的媒体上，如商标、标志、包装、广告等一切企业用品上，通过色彩的视知觉刺激和心理反应，传达企业的经营理念或产品及服务的内容特征。企业标准色正是利用色彩的象征作用，使人一看到色彩，就会产生各种联想或情感。如美国可口可乐公司选用红色作为标准色，洋溢着青春、健康、欢乐的气息；柯达胶片公司的黄色充分表现色彩饱满、绚丽辉煌的产品品质。网页设计与制作确定网站配色方案商品形象色是指不同商品在人们印象中的固有

18、色，也是泛指不同类别的商品一贯使用的、能促进销售的色调。如女性化妆品运用高明度的柔和色调，而男式服装则采用深沉的蓝灰色调。从色彩心理学的角度来看，红色系一般运用于食品、药品、金融、百货类网站；蓝色系运用于药品、电器、体育用品类网站；紫色系运用于化妆品、装饰品、服装、出版类网站，粉色系运用于妇女儿童类网站。但有时选择与众不同的色彩，扩大同类网站之间的差异，也是确定网站配色方案的一个重要方面，如美国百事可乐的红与蓝就是一个成功的例证。网页设计与制作确定网站标准字体文字在设计之中具有明确的思想表现力，文字不仅是指文稿的构思，而且还包括字体的应用。网页的默认字体是宋体，类似产品说明、企业介绍这样的正文

19、应采用较小的宋体，而用于标志、标题、主菜单、导航栏等的字体则应采用网站特有的标准字体。标准字体的选择和变化，要兼顾表现的内容和形式的美观，力求醒目、易读，符合表现意图，不仅要争取浏览者的注意力，而且要争取浏览者的心灵。字体的样式要有一定的象征意义：粗壮有力的黑体，让人联想到重工业品；而较细的黑体给人以清秀之感，适用于电器和轻工业品的网页；端庄敦厚的篆体、隶书稳重而带有历史感，适用于传统艺术站点；典雅秀丽的仿宋，则适用于服装、化妆品。需要说明的是，像标志、标题、主菜单这样重要的元素，如果当作文本来处理，就应该采用默认字体，否则必须以图像而非文本的形式出现在网页中，不然很可能因为浏览者的计算机没有

20、安装你所选择的特殊字体，而无法正确浏览网页的内容。网页设计与制作设计与制作网页构思网页的第一步就是进行初步的布局定位设计，最好先用笔在纸上画一个粗略的草图，考虑网页上各元素的排列以及它们之间的关系，尽量使网页整洁美观。网页设计中突出的主体要服从视觉流程的需要，与版面上其它元素达到视觉上的和谐，使整个网页浏览起来方便流畅。一般来说，浏览者的最佳视觉流程是从左到右，从上到下。因此网站标志、导航栏、主要栏目等最重要的元素应放在网页的上部、中上部的位置，次要元素可放在稍微靠后的位置。广告位的变化较多，可根据广告本身的重要程度来确定放置的位置，重要的广告（如新品上市、打折、优惠等）可以放在网站标志旁边；

21、一般性的广告则可根据版面安排的具体情况来定。草图确定后，就要对布局进行的细化，此时要注意版面在视觉上的平衡，前后有呼应，色彩及图形元素有对比变化，整个版面安排疏密有致，要适当留白，切不可安排得太满、太密。总而言之，一个优秀的版面设计要有具备丰富的视觉效果和强列的视觉冲击力，网页均衡、有节奏感。网站的发布与运行调试网站制作完毕后，要进行运行调试，测试网页的各个链接能否正确跳转，网页图像是否能正常显示，网页特效能否正确运行等等。调试最好在多个浏览器中进行，以确保网页在所有浏览者的显示器中都有正确的显示。调试完毕后，可将网站发布到远程网站上。本项目的课程设计为你展示自我提供了舞台，同时也是对学习效果

22、的检验。课程设计包括了构思选题、写网站说明书、内容搜集、确立网站目录结构、进行网站的导航设计、进行网站整体形象设计等等。在设计过程中要注意同伴间的团结协作，并将电子商务网页“以人为本，客户至上”的设计思想贯彻始终。谢谢观赏！谢谢观赏！树立质量法制观念、提高全员质量意识。22.11.1822.11.18Friday,November 18,2022人生得意须尽欢，莫使金樽空对月。21:55:5821:55:5821:5511/18/2022 9:55:58 PM安全象只弓，不拉它就松，要想保安全，常把弓弦绷。22.11.1821:55:5821:55Nov-2218-Nov-22加强交通建设管理

23、，确保工程建设质量。21:55:5821:55:5821:55Friday,November 18,2022安全在于心细，事故出在麻痹。22.11.1822.11.1821:55:5821:55:58November 18,2022踏实肯干，努力奋斗。2022年11月18日下午9时55分22.11.1822.11.18追求至善凭技术开拓市场，凭管理增创效益，凭服务树立形象。2022年11月18日星期五下午9时55分58秒21:55:5822.11.18严格把控质量关，让生产更加有保障。2022年11月下午9时55分22.11.1821:55November 18,2022作业标准记得牢，驾轻就熟除烦恼。2022年11月18日星期五21时55分58秒21:55:5818 November 2022好的事情马上就会到来，一切都是最好的安排。下午9时55分58秒下午9时55分21:55:5822.11.18一马当先，全员举绩，梅开二度，业绩保底。22.11.1822.11.1821:5521:55:5821:55:58Nov-22牢记安全之责，善谋安全之策，力务安全之实。2022年11月18日星期五21时55分58秒Friday,November 18,2022相信相信得力量。22.11.182022年11月18日星期五21时55分58秒22.11.18谢谢大家！谢谢大家！