网页设计实用教程 第16章 网页设计综合应用实例——网.ppt

* 第16章 网页设计综合应用实例——网上客服中心 制作人：曾俊国 重点和难点 掌握网页布局方法 网页三剑客的综合运用 理解如何规划网站 理解网页外观特征的建立应基于网站性质与类型 16.1 案例背景 16.1.1、 建立网上客服中心的原因 当今世界，稍有规模的企事业单位，无不有自己的网站。一方面，可以通过建立网站，将一些日常业务在网上进行，这样可以降低办公成本；另一方面，可以借此来扩大本企业的影响，加强与外界的联系，特别是与客户的沟通。在信息技术快速发展的今天，基于电子商务的企业网上客户服务中心就应运而生了。下面以建立一图书销售公司的网上客服中心为例，讲解网站的创建步骤，在此，不妨假定该公司名称为“丹阳图书销售有限公司”，当然实际上有无同名的公司，笔者无从考证，如有雷同，实属巧合。 随着经济的发展、社会的进步，各领域的企业之间竞争日益激烈，为在竞争中获得优势，网站已经成为各个企业不可缺少的竞争手段之一。企业只有不断推出最友好、最专业的客户服务，才能在市场经济的大潮中始终立于不败之地。 16.1.2、 建立网上客服中心的目标 本网站客服中心建设完备之后，应满足以下功能： 1.订书业务受理 2. 图书查询 3. 客户投拆建议 4. 新书预告 5. 客户回访和满意度调查 6. 图书促销 16.2　规划网站及首页布局 正式建立网站之前，首先要对网站做一个宏观的规划，只要这样，才会是后面的网站创建及维护变得有章可循。 16.2.1、策划网站主题 确定完整主题是摆在网站设计人员面前的第一个问题，本网站所要创建的是一个图书销售公司的网上客服中心，类似于售后服务之类的网络平台，基于该网站所确定的主要功能，其网站主题应该确定为：为广大客户及合作者提供周到、及时、人性化的服务。 16.2.2、策划网站风格 确定好网站的主题后，接下来是根据该主题来确定网站的风格。由于本章所介绍的是一个类似售后服务的网站，这就要求网站充满温馨气息、富有人性化、用户浏览信息方便快捷等特点。为此，本网站的主要特点是： 设计风格大众化，为提高浏览速度，尽量减少图片的使用，而更多地用表格来实现各种服务功能。 背景以白色为主，文字颜色主要采用黑色、蓝色和红色为辅。 文字要简洁委婉，标题尽量要温馨，字体一般采用宋体，字号一般为12像素。 16.2.3、构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过仔细研究和反复修改，最后确定完整的栏目和内容的层次结构。根据本网站的性质和功能，可把网站分为以下栏目：网上订书、图书查询、投诉建议、新书预告、问卷调查、图书促销等。 16.2.4、规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、条理有序，首页、栏目页、内容页区分明确，以便日后的修改。比如本网站将Image文件夹用于存储各网页中所需要的各种图片，将Music文件夹用于存储音乐、音频文件，将CSS文件夹用于存储CSS样式。需提醒读者的是，文件夹和文件名称最好不要使用中文名，因为中文名在HTML文档中容易生成乱码，从而产生的错误链接。 图 网站首页的布局草图 16.2.5、网站首页的布局 版权信息、公司联系方式、公司网站网址、公司联系电话等文本显示区 嵌入页面的内容 纵向导航栏 横向导航栏 动画横幅 网页语种按钮 公司标题及相关图片 Logo 使用表格对首页的布局结构草图进行设计 16.3　制作网页素材 16.3.1、利用Flash CS4制作Banner动画 接下来网站设计人员需要根据网站的栏目、内容设计、链接结构设计、首页的布局结构，几个主要导航页面的布局结构，准备所需素材。 Banner动画 16.3.2、利用Fireworks CS4制作导航栏 导航栏按钮 16.3.3、利用Fireworks CS4制作轮换图像 在网页的某个位置处将若干图像轮流循环的播放是比较常见的，比如循环播放最近的新闻图片、展示某系列产品图像信息等。 16.4　网站首页的设计与制作 网站首页制作的好坏直接关系到网站的设计效果，在对前期工作做好充分准备后，接下来的重要内容就是对首页的设计和制作。首先应按照第2章和第15章所介绍的有关知识创建一个本地站点，然后在该网站根目录下创建首页文件“Index.html”，在“设计”视图状态下，打开“index.html”，开始对首页进行布局。 16.4.1、布局网站首页 根据网站的性质和内容，可将首页的布局做如下安排： （1）整个页面分为4个区域，从上往下依次为：表格1、表格2、表格3、表格4。 （2）表格1为1行3列（1000×56），用于插入Logo标