网站建设综合实训

1、网站建设综合实训 电子商务实务任务二 网站的设计4项目引入1项目分析2任务一：网站需求与策划 3任务六：网站的管理与维护 8知识回顾9拓展训练10任务三：网站的制作 5任务四：网站的测试 6任务五：网站宣传推广 7项目引入： 随着工作的深入，恒久公司的网站建设项目已提到日程安排上了，经理找到小王，告诉他由于前期工作很出色，公司决定把网站建设这份重要工作交给小王来做。小王听到后非常高兴，想到工作中投入了很多的精力和心血，都是以助手的身份来完成的，现在终于可以独立地完成这项工作，他决定现在就开始做好这项工作。 项目分析： 网站是一个企业或机构在互联网上建立的站点，其目的是为了宣传企业形象、发布产品

2、信息、提供商业服务等。 电子商务网站是企业从事电子商务活动的基本平台，通过Internet浏览器访问有关的电子商务网站，进行信息交互，进而完成商务活动过程。任务分解： 为完成以上工作，可以把本项工作分解成以下六个工作任务。任务一：网站需求与策划任务二：网站的设计任务三：网站的制作任务四：网站的测试任务五：网站宣传推广任务六：网站的管理与维护 www.beijingsijiazhentan .net 任务一：网站需求与策划 相关知识：网站作为网络世界的支撑点，已成为人们关注的热点。政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用网站宣传自己的形象，挖掘无限商机；个人利用网站展

3、示个性风采，创建彼此沟通的桥梁。越来越多的人希望拥有网站，开辟网络世界里的一片天地。为使网站能最大限度地达到建站的目的，满足要求，在网站的建设过程中，需要与客户方进行很好的沟通，遵循建站流程，这样才能既节省时间又保证网站的严谨性、科学性。 任务实施：1了解对客户需求调查的知识2掌握网站策划的方法3培养网站需求与策划的能力/ / / 一、客户需求调查及资料整理有经验的设计人员都会适当做些行业调查及客户方竞争对手的了解。文字资料最好找客户方的专业负责人整理，最好是熟悉市场营销并有一定文字组织能力的人，他们能够站在企业、市场和消费者的多角度考虑文字的组织方式。 1掌握谷歌搜索引擎的使用谷歌搜索引擎操

4、作简单，在搜索框内输入需要查询的内容，敲回车键，或者鼠标点击谷歌搜索按钮，就可以得到最符合查询需求的网页内容。例如：查找家电行业网站，先在IE浏览器中输入：，如图3-1所示 图3-1 谷歌搜索首页在搜索框中填入：家电行业网站，如图3-2所示。 图3-2 输入家电行业网站如图3-3所示，出现符合条件的网站。图3-3 出现符合条件的网站2搜索行业综合网站首先在网页中找到“中国家电网（http:/）”，打开浏览，如图3-4所示。图3-4 家电行业综合门户再通过页面中的知名品牌专区、家电黄页或合作伙伴，如图3-5所示，找到行业龙头企业网站http:/，如图3-6所示。图3-5 相关页面展示图3-6 找

5、到行业龙头企业3了解行业龙头企业网站点击链接http:/网站地图，如图3-7所示。通过网站地图学习优秀网站的建站规划，如内容规划、艺术表现规划及网站功能规划。海尔是家电行业龙头企业，它的网站制作水平具有标志作用。图3-7 网站地图二、网站策划对建立一个成功的网站而言，最重要的是策划，而不是技术。 一个成功的企业网站应该是营销导向的，策划者应该考虑多方面的因素。 1建站企业商业模式及业务流程调查 企业的主营业务是什么？ 企业的顾客是谁？本企业的市场在哪里？ 企业的赢利模式是什么？ 企业的顾客一般从哪里得到企业的产品信息？本企业顾客的上网条件与上网技能如何？ 企业业务流程是什么样的？如何与顾客交易

6、？ 企业产品是否适合网上销售？ 企业建站愿意支付的费用与成本是多少？ 企业建站后的管理模式与推广方式是怎样的？3建站目标、定位及要求功能调查（1）企业建站目标是什么？如何对网站进行定位？ 在线服务型网站。 网上交易型网站。 宣传推广型网站。 内部信息化水平型网站。 综合型网站。（2）企业建站要求的功能有哪些？ B2C零售系统的基本功能（如注册、购物、后台管理等） B2B交易平台系统基本功能（如会员注册与管理、产品目录与产品管理、交易功能、交易统计功能、结算功能等）。任务二 网站的设计 相关知识：网站“设计”不同于“制作”，设计是一个思考的过程，而制作只是将思考的结果表现出来。一个成功的网站首先

7、需要一个优秀的设计，然后辅之优秀的制作。设计是网站的核心和灵魂。网站设计包含的内容很多，大体分两个方面：一方面是纯网站本身的设计，比如文字排版、图片制作、平面设计、三维立体设计、静态无声图文、动态有声影像等；另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互、制作策划、形象包装、宣传营销等。任务实施 1了解网站设计步骤2掌握网站设计方法3培养学生网站设计能力 网页给浏览者带来视觉感受，是能否吸引浏览者继续深入浏览网站的关键。 网页设计必须考虑到目前 Internet的制约因素，如网络传输速率、服务器性能指标以及客户端浏览模式等，切不可为了单纯追求页面的奢华而加大网络传输图片的

8、负荷。图片虽然能使整个页面生动，但不能过多，而且图片只是起画龙点睛作用。一、首页设计“良好的开端是成功的一半”。首页的设计是一个网站成功与否的关键。一般来说，对中小型网站的设计来说，首页设计和制作占整个制作时间的40%50%。 首页的设计大致要注重以下这几方面： 版面布局； 色彩搭配； 字体的设置； 考虑不同的浏览器和分辨率； logo 和 banner 设计； meta 标签的重要性； 二、版面布局 设计首页的第一步是设计版面布局。静态网页的版面布局设计，就像传统的报刊杂志编辑一样，可以将网页看作一张报纸，一本杂志来进行排版布局。下面分析常见的版面布局形式。1“T”型布局如图3-8所示，这是

9、网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。 图3-8 “T”型布局2“口”型布局如图3-9所示。在这种布局的页面中，一般上下各有一个广告条，左侧是主菜单，右侧是相关链接，中间是主体内容，这种布局的优点是充分利用版面，信息量大 图3-9 “口”型布局3“三”型布局如图3-10所示，这种布局特点是将页面横向分割成多个横条的色块，用来存放菜单、广告条，夺目耀眼，广告效果很好。图3-10 “三”型布局 4对比或对称布局采用左右强色彩对比，或采取左右对称的布局。对比是增强视觉冲击力的一种手法，对称有一种很自然和谐的美感，缺点是将两部分有机的

10、结合比较困难，要在两部分的结合方面下工夫。如图3-11所示。 。 图3-11 对称布局 5POP布局 POP 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中 心。常用于时尚类站点，优点是漂亮吸引人，缺点是图像较大时造成网页打开速度较慢。如图3-12所示。图3-12 POP 布局三、网站风格设计网站风格指的是站点的整体形象给浏览者的综合感受。风格体现在作品内容和形式的各种要素中。例如，对处理题材、描绘形象、表现手法、运用语言等方面所形成的特色，就是作品的风格。网站风格是抽象的、独特的，能让浏览者明确分辨出这是你的企业网站独有的。网站风格是有人性的，能通过网站的外表、内

11、容、文字、交流等概括出一个站点的个性和情绪。那么，如何树立网站的风格呢？知识回顾 ：（1）香港迪斯尼网站 该网站的地址为：http:/，进入该网站后使人感到这是一个很明显的游乐园，生动活泼，有趣可爱，还有冒险刺激。所谓主题公园，就是园中的一切，从环境布置到娱乐设施都集中表现一个或几个特定的主题。 图3-13 香港迪斯尼网站主页（2）网易网站 该网站的地址为：/，该网站是唯一定位于个人互联网应用的门户网站。这一特点使得B2C企业、消费品生产商、生活资料供应商用网易搜索引擎向最终消费者推广成为首选。 图3-14 网易网站主页（3）IBM网站 该网站的地址为：http:/us/，该网站传递了专业和行

12、业权威的信息。IBM即国际商业机器公司，是世界上最大的信息工业跨国公司。以世界一流的最新技术开发新产品，并以最快的生产速度进入市场，是IBM的产品发展战略。图3-15 IBM网站主页四、网站程序设计在页面中加入小程序段，可使页面中包含动态元素，如站点计数器，当前日期和时间显示，标题栏、状态栏特效等。News.ldz.cc 在动态网站中应该有运行在服务器端的脚本，有后台数库的支持，可与用户交互，可根据用户需要提供浏览内容等。简单地说，如果网站中含有诸如 BBS 论坛、新闻动态、会员管理、聊天室等功能模块，则可称为动态网站。在静态网站中，一个HTML文档定义一个页面，而动态网站的页面内容可根据用户

13、的浏览要求生成，并且网站维护人员也可非常方便地对网站内容进行 增、删、改。 什么是动态网站？动态网站是指网站内容的更新和维护是通过基于数据库技术的内容管理系统来完成的，它将企业网站建设从单纯的静态页面制作延伸为企业对信息资源的组织和管理。动态网站具有以下显著优点。 网站内容企业新闻动态/产品信息/常见问题解答（FAQ）等的维护（增加/删除/修改） 通过编辑器完成，轻松快捷、方便易用，一般业务人员经过简单培训即可胜任网站内容的维护，从而显著提高网站维护的效率，降低维护的技术门槛。 网站的维护可通过远程工作站进行，满足企业随时随地更新网站内容、发布企业新闻的要求，提升企业形象。 网站内容（新闻/产

14、品数据）保存在数据库中，成为企业永久信息资源，便于企业搜索、查询、分类、统计。 网站开发中要用到动态语言，如ASP、PHP、CGI、JSP、ASP.NET等。 任务三 网站的制作相关知识：网站建设是电子商务的基础，而网页制作是网站建设的第一步。WWW服务器提供给用户许多信息资源，如网页、外部应用程序、数据库、图片、动画、视频、音频文件等，其中网页是保存在WWW服务器中供用户访问的主要的WWW资源，是一种可以在Internet上传输并被浏览器认识和翻译成页面显示出来的文件。网页不但包含多种字体和样式的文本、图片、图形、电影片断、声音，还包含一些高级语言所编写的应用程序，由此可以分为两种类型的网页

15、静态网页和动态网页。任务实施：1了解Dreamweaver工具的使用2掌握网页建立的基本方法 www.beijingsijiazhentan .net / / / 我们以一个简单网页为主，力图以简捷的方式讲清楚网页制作的过程，使读者在看完本节内容以后能够制作简单的静态网页1准备好Dreamweaver MX工作环境首先要安装Dreamweaver MX软件，安装时需要输入序列号、个人及公司信息等内容，安装完毕后，运行Dreamweaver MX 图3-16 Dreamweaver MX的主窗口2网页制作过程（1）站点建立 打开Dreamweaver MX，首先是建立一个站点，所谓站点就是要制作

16、的网站的名称，它里面可以包含很多各种各样的文件，如网页文件、图像文件、声音文件等。这些文件将全部存放在刚才建立的文件夹“D:myweb”中。通过点击站点、新建站点、高级，在本地信息里面进行相应设置，假设网站的名称为“中国文学”，具体设置如图3-17所示。图3-17 新建站点（2）首页规划其次是进行网页的首页规划，假设将网页布局分成四个部分，上部为标题区，左下部为菜单区，中下部为新闻区，右下部为链接区，依次将其称为层1、层2、层3、层4。为了排版方便，可以借助图层来进行网页的分区，图层是一种为网页元素进行定位的工具，通过对图层的操作，可以对图层及图层内部的网页、图像等进行任意的排版，甚至可以做出

17、动态效果。插入图层的方法很简单，只要点击菜单中的插入层即可，一共要插入4个层，每个层插入完毕后可以用拖放调整其大小和位置，为了清晰起见，先将属性窗口关闭，调整结束后的结果见图3-18。 图3-18 网页首页的图层设置这里面需要强调的是，属性窗口非常重要，它可以非常灵活地对相关内容的属性进行设置，从而随心所欲地进行网页的编排。编排结束后，结果如图3-19所示。图3-19 首页内容（3）超级链接 现在进行网页设计中的关键一环，建立超级链接。可以将网页中的图像、文字等链接到网页文件、邮件、图像、声音等文件，如果供软件下载的话，也可以链接到任意文件，为简捷起见，做如下链接。将层2菜单中的“文学大师”链

18、接到文件“wxds.htm”，该文件还没有建立，稍后建立这个文件。方法是用鼠标选择“文学大师”4个字，然后在属性窗口的链接中输入：wxds.htm。具体见图3-20。图3-20 网页链接（一）将层2中的“联系我们”链接到一个Email地址，如，方法是用鼠标选择“联系我们”4个字，然后在属性窗口的链接输入：mailto: 。具体见图3-21。图3-21 邮件链接将层4中的中国文学网链接到网站/，方法是用鼠标选择“中国文学网”，然后在属性窗口的链接中输入：。具体见图3-22。这里需要强调的是，以上菜单中的所有网页、新闻中的所有网页以及友情链接中的所有网址都必须一一进行链接，一个网站往往由数十上百个

19、文件组成，这些文件都要进行拷贝或制作，并且都要放在“d:myweb”文件夹下面。图3-22 网页链接（二）（4）其他相关网页制作 其他相关网页其实很多，这里仅以文学大师网页“wxds.htm”为例做简要说明，基本的制作步骤和首页制作是一样的，唯一不同的是不需要再建立新站点了，只要打开刚才定义的站点“文学大师”即可。另外，如果“wxds.htm”浏览完成后需要返回首页，也可以输入“返回首页”4个字，再将其超级链接到“index.html”即可。当然，如果有必要，“wxds.htm”中的相关内容可以继续链接其他网页、图片、网址等，对链接内容的多少原则上是没有限制的，这也正是WWW之所以风靡的原因。

20、这个网页如图3-23所示。（5）模拟显示 至此，整个网页就建立好了，可以用浏览器预览一下效果，并测试一下超级链接是否有效，可以在Dreamweaver MX中打开首页文件，然后按F12预览，也可以关闭Dreamweaver，然后双击“d:mywebindex.html”。当然也可以用同样的方法预览其他页面。 图3-23 子页面的建立任务四 网站的测试相关知识：网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容如下。 服务器的稳定性和安全性。 程序及数据库测试。 网页兼容性测试，如浏览器、显示器。 根据需要的其他测试。任务实施1了解网站测试注意问题2掌握网站测试的方法3培养学生理

21、论联系实际的能力网站发布之后就可以立即上网浏览自己的网站了，这就处在完全真实的 Internet 环境中了，下面就要在完全真实的Internet环境中对网站进行测试了。尽管在站点开发的每个步骤中都要进行测试，但在把站点发布到Web之后仍需继续测试。测试分两个阶段： 把文件上传到 Web 服务器上，先由开发方自己对站点进行严格测试； 提供给客户（委托方）URL地址，让客户测试验收。 一、测试要考虑的问题如果仍使用站点开发时使用的计算机对站点进行测试，一定要清除浏览器缓存。缓存清除后，浏览器将从服务器上重新下载所有文件来浏览，这样就可以显现用户第一次访问站点时的真实场面。在尽可能多的环境中进行测试

22、，尤其要针对以下问题进行测试。1多种浏览器 用尽可能多的浏览器进行测试，以保证页面的兼容及显示的一致性，如：Internet Explorer(IE)、Netscape(NC)。2多种操作系统 在不同的操作系统、不同的版本下进行测试。例如：在Windows环境下开发的，可在Macintosh、UNIX环境下测试。因为计算机软件及硬件都在飞速发展，现实中各种硬件配置和各种软件环境的计算机用户都有可能去拜访你的网站。3连接速度 测试时不要依赖于一种连接速度，尤其是当你工作于比用户的平均连接速度高得多的环境时。可以到朋友家、图书馆或网吧去上网，在不同的连接速度下测试下载时间。4显示类型在不同的屏幕分

23、辨率下进行测试，以保证在各种分辨率下版面布局不乱，还要在不同的色彩模式设置下测试（8位256色，增强色16位，真彩色32位等）。5继续测试链接 点击站点上的所有链接，确保每个都能到达预定的目标。每个链接到外部站点的链接也应该进行测试，以确保目标站点没有更换地址、关闭或张贴了不想要的内容。 二、用户测试在浏览者对网站的测试过程中，他们可能提出有关网站建设技术方面的问题，也可能提出有关内容提供方面的问题，这时建站双方要协作来解决这些问题。向浏览者提供最满意的服务，是建站双方共同的目标。1选择不同的测试对象2建立一个反馈表任务五 网站的宣传推广相关知识：网站已精心地设计制作完成，且已经上传，网站投入

24、了运营。一段时间后，会发现访问站点的人数寥寥无几。在浩瀚的互联网海洋中，客户很难找到该网站。即使已登录了搜索引擎，网站却被排在了不引人注目的位置。为了真正发挥一个站点的作用，则需要以该站点为基础，在网上网下开展长期而有效的推广工作。任务实施1了解网站推广的方法2掌握网站营销策略3培养学生实践动手能力 www.beijingsijiazhentan .net / / / 推广网站的目的是提高网站访问量并达到网络营销的目的。基于这种前提，网站的经营者应该利用互联网的特性和自己对目标市场的准确定位，让更多的潜在客户知道网站的存在并成为回头客。下面介绍几种网站的推广。 一、利用搜索引擎1最常用的中文搜

25、索引擎（1）Google搜索引擎（2）雅虎中国搜索引擎 （3）百度（baidu）中文搜索引擎 （4）Lycos中国搜索引擎 （5）新浪搜索引擎 （6）搜狐搜索引擎 （7）网易搜索引擎 （8）3721网络实名/智能搜索 2关键字的选择策略目前，绝大多数搜索引擎都支持关键字索引，即按照登录网站提供的关键字记录网站并按照查询者输入的关键字索引网站。 （1）不断地寻找关键字并增加关键字（2）关键字的地区性（3）使用更长的关键字（4）关键字应该避免无重要意义的词（5）了解人们使用关键字及关键字组合的习惯3向搜索引擎提交网站在搜索引擎上找到网站登录的链接，向搜索引擎提交网站。这是搜索引擎提供的一项免费服务

26、。选择最著名的搜索引擎，如Google、雅虎、百度（baidu）、Lycos、sina等。这些搜索引擎向别的主要搜索引擎和门户网站提供搜索内容。 图3-24 登录到Google的界面4搜索引擎竞价排名在很多搜索引擎（如Google、百度、3721、搜狐、新浪、网易）上，提供有竞价排名服务。如Google的关键字广告（AdWords）（https:/select/）。 图3-25 Google的AdWords付费广告效果 二、传统营销策略利用各种宣传手段，在设计公司的 CI（企业识别系统）时应该将网站这个因素考虑进去，使网站成为CI设计中的一个要素。 网下的传统推广方法依然奏效，多种手段并用的方

27、式尤其有效。在现阶段的中国，传统媒体宣传的影响力仍然很大，电视、报纸、杂志等这些媒体的效应是立竿见影。 1注重日常宣传2使用传统媒体广告 3提供免费服务 4发布新闻三、E-mail策略大量发送E-mail是增加访问量的重要方法，但前提是不能发送未经许可的垃圾邮件。1在发出的邮件中创建一个“签名”2建立邮件列表，可定期向用户发送新闻邮件 3向邮件列表用户发布产品信息，如优惠券、新产品及促销信息，要选择一个有吸引力的邮件主题，以提高开信率。四、Web分类广告服务Internet拥有巨大的信息资源和用户资源，其商业价值备受关注。目前网上有大量的专业Web站点提供了信息发布手段，为各种商业合作与开发提

28、供了场所。发布应考虑以下方面： 网页上方比下方效果好，但通常收费与位置有关； 广告面积越大越好，但收费也越高； 经常更换图片可以提高点击率； 采用合适的语句能引起访客的好奇和兴趣，如“最后机会”、“免费”等； 使广告靠近网站最主要、最吸引人的部分； 将广告链接到网站特定的页面，而不是网站的首页； 适当运用动画图片，但要注意不能因文件太大而影响下载速度； 简短标语、口号性文字的效果也是很好的； 选择合适的广告网站。 五、其他策略 利用论坛和聊天室作为宣传阵地； 构造竞赛环境，发送奖品。但竞赛的开展需要在网站有一定访问量的基础上； 将网站上所宣传的商品提交到比较购物网站和拍卖网站； 让用户将网页加

29、入收藏、设为主页。 任务六 网站的管理与维护相关知识：网站的管理与维护，是指在不改动网站功能、页面结构的前提下进行的文字更换、图片修改。为了保持网站的时效性，一个网站不可能在建成之后就永远不再有任何变化。网站相当于企业的出版物，其后期维护是一种日常性事务，但由于不同企业经营性质等因素上的差异，其在一定时间内更新的次数也有多有少。任务实施1了解网站维护形式2掌握网站管理技巧3培养学生管理与维护的能力 当一个电子商务网站创建后，意味着网站工作的开始，一方面要对网站进行日常管理，另一方面要对网站进行日常维护。由于企业的情况在不断地变化，网站的内容也需要随之调整，给人常新的感觉，公司的网站才会更加吸引访问者，而且给访问者留下很好的印象。 一、网站硬件系统维护1服务器维护服务器维护包括系统安装、升级；致命故障；故障判断；故障处理；系统优化；系统配置；系统检查；清洁、保养；裸机系统安装；覆盖或升级安装；迅速准确判断系统故障；区分故障类型；操作系统故障解决；硬件维修或更换；内部邮件服务器故障解决；其他故障解决；安装补丁；系统参数调整；垃圾文件及注册表清理；内存管理优化；磁盘管理优化；启动选项优化；操作系统配置；网络