项目三 网站建设综合实训

项目三：网站建设综合实训电子商务实务任务二网站的设计4项目引入1项目分析2任务一：网站需求与策划3任务六：网站的管理与维护8知识回顾9拓展训练10任务三：网站的制作5任务四：网站的测试6任务五：网站宣传推广7项目引入：随着工作的深入，恒久公司的网站建设项目已提到日程安排上了，经理找到小王，告诉他由于前期工作很出色，公司决定把网站建设这份重要工作交给小王来做。小王听到后非常高兴，想到工作中投入了很多的精力和心血，都是以助手的身份来完成的，现在终于可以独立地完成这项工作，他决定现在就开始做好这项工作。项目分析：网站是一个企业或机构在互联网上建立的站点，其目的是为了宣传企业形象、发布产品信息、提供商业服务等。电子商务网站是企业从事电子商务活动的基本平台，通过Internet浏览器访问有关的电子商务网站，进行信息交互，进而完成商务活动过程。任务分解：为完成以上工作，可以把本项工作分解成以下六个工作任务。•任务一：网站需求与策划•任务二：网站的设计•任务三：网站的制作•任务四：网站的测试•任务五：网站宣传推广•任务六：网站的管理与维护任务一：网站需求与策划•相关知识：•网站作为网络世界的支撑点，已成为人们关注的热点。政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用网站宣传自己的形象，挖掘无限商机；个人利用网站展示个性风采，创建彼此沟通的桥梁。越来越多的人希望拥有网站，开辟网络世界里的一片天地。为使网站能最大限度地达到建站的目的，满足要求，在网站的建设过程中，需要与客户方进行很好的沟通，遵循建站流程，这样才能既节省时间又保证网站的严谨性、科学性。任务实施：1．了解对客户需求调查的知识2．掌握网站策划的方法3．培养网站需求与策划的能力一、客户需求调查及资料整理•有经验的设计人员都会适当做些行业调查及客户方竞争对手的了解。文字资料最好找客户方的专业负责人整理，最好是熟悉市场营销并有一定文字组织能力的人，他们能够站在企业、市场和消费者的多角度考虑文字的组织方式。1．掌握谷歌搜索引擎的使用•谷歌搜索引擎操作简单，在搜索框内输入需要查询的内容，敲回车键，或者鼠标点击谷歌搜索按钮，就可以得到最符合查询需求的网页内容。例如：查找家电行业网站，先在IE浏览器中输入：，如图3-1所示图3-1谷歌搜索首页在搜索框中填入：家电行业网站，如图3-2所示。图3-2输入家电行业网站•如图3-3所示，出现符合条件的网站。图3-3出现符合条件的网站2．搜索行业综合网站•首先在网页中找到“中国家电网（）”，打开浏览，如图3-4所示。图3-4家电行业综合门户再通过页面中的知名品牌专区、家电黄页或合作伙伴，如图3-5所示，找到行业龙头企业网站，如图3-6所示。图3-5相关页面展示图3-6找到行业龙头企业3．了解行业龙头企业网站•点击链接网站地图，如图3-7所示。•通过网站地图学习优秀网站的建站规划，如内容规划、艺术表现规划及网站功能规划。海尔是家电行业龙头企业，它的网站制作水平具有标志作用。图3-7网站地图二、网站策划•对建立一个成功的网站而言，最重要的是策划，而不是技术。一个成功的企业网站应该是营销导向的，策划者应该考虑多方面的因素。1．建站企业商业模式及业务流程调查①企业的主营业务是什么？②企业的顾客是谁？本企业的市场在哪里？③企业的赢利模式是什么？④企业的顾客一般从哪里得到企业的产品信息？本企业顾客的上网条件与上网技能如何？⑤企业业务流程是什么样的？如何与顾客交易？⑥企业产品是否适合网上销售？⑦企业建站愿意支付的费用与成本是多少？⑧企业建站后的管理模式与推广方式是怎样的？3．建站目标、定位及要求功能调查（1）企业建站目标是什么？如何对网站进行定位？①在线服务型网站。②网上交易型网站。③宣传推广型网站。④内部信息化水平型网站。⑤综合型网站。（2）企业建站要求的功能有哪些？①B2C零售系统的基本功能（如注册、购物、后台管理等）②B2B交易平台系统基本功能（如会员注册与管理、产品目录与产品管理、交易功能、交易统计功能、结算功能等）。任务二网站的设计相关知识：•网站“设计”不同于“制作”，设计是一个思考的过程，而制作只是将思考的结果表现出来。一个成功的网站首先需要一个优秀的设计，然后辅之优秀的制作。设计是网站的核心和灵魂。网站设计包含的内容很多，大体分两个方面：一方面是纯网站本身的设计，比如文字排版、图片制作、平面设计、三维立体设计、静态无声图文、动态有声影像等；另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互、制作策划、形象包装、宣传营销等。任务实施1．了解网站设计步骤2．掌握网站设计方法3．培养学生网站设计能力网页给浏览者带来视觉感受，是能否吸引浏览者继续深入浏览网站的关键。网页设计必须考虑到目前Internet的制约因素，如网络传输速率、服务器性能指标以及客户端浏览模式等，切不可为了单纯追求页面的奢华而加大网络传输图片的负荷。图片虽然能使整个页面生动，但不能过多，而且图片只是起画龙点睛作用。一、首页设计•“良好的开端是成功的一半”。首页的设计是一个网站成功与否的关键。一般来说，对中小型网站的设计来说，首页设计和制作占整个制作时间的40%～50%。•首页的设计大致要注重以下这几方面：①版面布局；②色彩搭配；③字体的设置；④考虑不同的浏览器和分辨率；⑤logo和banner设计；⑥meta标签的重要性；二、版面布局•设计首页的第一步是设计版面布局。静态网页的版面布局设计，就像传统的报刊杂志编辑一样，可以将网页看作一张报纸，一本杂志来进行排版布局。•下面分析常见的版面布局形式。1．“T”型布局•如图3-8所示，这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。图3-8“T”型布局2．“口”型布局•如图3-9所示。在这种布局的页面中，一般上下各有一个广告条，左侧是主菜单，右侧是相关链接，中间是主体内容，这种布局的优点是充分利用版面，信息量大图3-9“口”型布局3．“三”型布局•如图3-10所示，这种布局特点是将页面横向分割成多个横条的色块，用来存放菜单、广告条，夺目耀眼，广告效果很好。图3-10“三”型布局4．对比或对称布局•采用左右强色彩对比，或采取左右对称的布局。对比是增强视觉冲击力的一种手法，对称有一种很自然和谐的美感，缺点是将两部分有机的结合比较困难，要在两部分的结合方面下工夫。如图3-11所示。。图3-11对称布局5．POP布局•POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，优点是漂亮吸引人，缺点是图像较大时造成网页打开速度较慢。如图3-12所示。图3-12POP布局三、网站风格设计•网站风格指的是站点的整体形象给浏览者的综合感受。风格体现在作品内容和形式的各种要素中。例如，对处理题材、描绘形象、表现手法、运用语言等方面所形成的特色，就是作品的风格。•网站风格是抽象的、独特的，能让浏览者明确分辨出这是你的企业网站独有的。网站风格是有人性的，能通过网站的外表、内容、文字、交流等概括出一个站点的个性和情绪。那么，如何树立网站的风格呢？知识回顾：•（1）香港迪斯尼网站该网站的地址为：=HomePage，进入该网站后使人感到这是一个很明显的游乐园，生动活泼，有趣可爱，还有冒险刺激。所谓主题公园，就是园中的一切，从环境布置到娱乐设施都集中表现一个或几个特定的主题。图3-13香港迪斯尼网站主页（2）网易网站该网站的地址为：，该网站是唯一定位于个人互联网应用的门户网站。这一特点使得B2C企业、消费品生产商、生活资料供应商用网易搜索引擎向最终消费者推广成为首选。图3-14网易网站主页（3）IBM网站该网站的地址为：，该网站传递了专业和行业权威的信息。IBM即国际商业机器公司，是世界上最大的信息工业跨国公司。以世界一流的最新技术开发新产品，并以最快的生产速度进入市场，是IBM的产品发展战略。图3-15IBM网站主页四、网站程序设计•在页面中加入小程序段，可使页面中包含动态元素，如站点计数器，当前日期和时间显示，标题栏、状态栏特效等。•在动态网站中应该有运行在服务器端的脚本，有后台数库的支持，可与用户交互，可根据用户需要提供浏览内容等。简单地说，如果网站中含有诸如BBS论坛、新闻动态、会员管理、聊天室等功能模块，则可称为动态网站。在静态网站中，一个HTML文档定义一个页面，而动态网站的页面内容可根据用户的浏览要求生成，并且网站维护人员也可非常方便地对网站内容进行增、删、改。什么是动态网站？•动态网站是指网站内容的更新和维护是通过基于数据库技术的内容管理系统来完成的，它将企业网站建设从单纯的静态页面制作延伸为企业对信息资源的组织和管理。动态网站具有以下显著优点。①网站内容[企业新闻动态/产品信息/常见问题解答（FAQ）等]的维护（增加/删除/修改）通过编辑器完成，轻松快捷、方便易用，一般业务人员经过简单培训即可胜任网站内容的维护，从而显著提高网站维护的效率，降低维护的技术门槛。②网站的维护可通过远程工作站进行，满足企业随时随地更新网站内容、发布企业新闻的要求，提升企业形象。③网站内容（新闻/产品数据）保存在数据库中，成为企业永久信息资源，便于企业搜索、查询、分类、统计。④网站开发中要用到动态语言，如ASP、PHP、CGI、JSP、ASP.NET等。任务三网站的制作相关知识：•网站建设是电子商务的基础，而网页制作是网站建设的第一步。服务器提供给用户许多信息资源，如网页、外部应用程序、数据库、图片、动画、视频、音频文件等，其中网页是保存在资源，是一种可以在Internet上传输并被浏览器认识和翻译成页面显示出来的文件。网页不但包含多种字体和样式的文本、图片、图形、电影片断、声音，还包含一些高级语言所编写的应用程序，由此可以分为两种类型的网页——静态网页和动态网页。任务实施：1．了解Dreamweaver工具的使用2．掌握网页建立的基本方法•我们以一个简单网页为主，力图以简捷的方式讲清楚网页制作的过程，使读者在看完本节内容以后能够制作简单的静态网页•1．准备好DreamweaverMX工作环境•首先要安装DreamweaverMX软件，安装时需要输入序列号、个人及公司信息等内容，安装完毕后，运行DreamweaverMX图3-16DreamweaverMX的主窗口2．网页制作过程（1）站点建立打开DreamweaverMX，首先是建立一个站点，所谓站点就是要制作的网站的名称，它里面可以包含很多各种各样的文件，如网页文件、图像文件、声音文件等。这些文件将全部存放在刚才建立的文件夹“D:\myweb”中。•通过点击站点、新建站点、高级，在本地信息里面进行相应设置，假设网站的名称为“中国文学”，具体设置如图3-17所示。图3-17新建站点（2）首页规划•其次是进行网页的首页规划，假设将网页布局分成四个部分，上部为标题区，左下部为菜单区，中下部为新闻区，右下部为链接区，依次将其称为层1、层2、层3、层4。为了排版方便，可以借助图层来进行网页的分区，图层是一种为网页元素进行定位的工具，通过对图层的操作，可以对图层及图层内部的网页、图像等进行任意的排版，甚至可以做出动态效果。•插入图层的方法很简单，只要点击菜单中的插入层即可，一共要插入4个层，每个层插入完毕后可以用拖放调整其大小和位置，为了清晰起见，先将属性窗口关闭，调整结束后的结果见图3-18。图3-18网页首页的图层设置•这里面需要强调的是，属性窗口非常重