第十章  网站建设实例
    前面已介绍了网页制作的各种方法、网页制作中应注意的问题以及制作网页可使用的各种工具。本节将以“中国UNIX用户协会（CUUG）网页”为例介绍实际的制作过程。
10.1  网站的设计原则及标准
    1．设计原则
    （1）总体设计
    就像编写程序前需要绘制程序流程图一样，设计网站之前也需要进行总体框图的设计。Web站点应针对不同的服务对象（网页文件的类型）具有不同的表现形式。某些站点仅提供简洁的文本信息（这种情况现在几乎已没有）；有些站点不仅有文本信息，还采用了多媒体的表现手法，将图像、声音、视频等运用到复杂的页面中。要制作能吸引人的Web站点应该将适当的多媒体有效地组织结合起来。在进行总体设计时，合理的结构设计对于网站规划至关重要，这在前面第二章已提到，对于不同功能采用不同结构，在具体规划时可能需要作一定的调整。
    1．分级结构
                   
图10-1  分级结构图
   
2．线形和分级结构的结合
图10-2  分级结构图
3． Web多重链路
图10-3  Web多重链路图
（2）主题鲜明、结构合理
    将网站的全部内容建立为索引，确保索引的每一部分内容对应一个网页，并使每个网页具有鲜明的主题，以吸引驻足本站点的浏览者，而对那些匆匆而过的浏览也应留下一定的印象。值得说明的是：应该充分应用你的行业标志和公司标志。同时必须注意索引间的层次结构的合理性。此外，还需实现各网页之间的链接，使它们有机地结合成一个整体，以引导读者在网页间浏览。
    （3）组织网页
    网页的组织原则是：将丰富的内容和多样的形式组织在一个统一的结构中，表达出设计思想或情感，从而达到形式与内容的统一。形式语言必须符合页面所要表述的内容。在页面中，应当正确使用对比与调和、对称与平衡、节奏与韵律以及留白等手段，注意颜的搭配和多媒体的使用。
    （4）设计主页的考虑
    主页（HomePage）作为网站的首页，在整个网站中具有举足轻重的作用。主页要能体现网站的总体概念，使人一目了然，而且应该集中以下各级的链接，使用户可以迅速转入感兴趣的网页。而且主页的设计应力求布局合理、美观大方，又不失生动活泼，能够吸引浏览者的注意力。当然，优秀的主页必须配以丰富的网站内容，只有这样才能使之具有强大的生命力。
    2．设计标准
    设计网站需要遵循一定的标准。其中之一是应该使整个网站保持一致的风格，给浏览者以整体的美感。诚然，多样化的格式和标志会使网页更显活泼，但必须把握好尺度，因为
过分花哨的网页只会分散浏览者的注意力，而达不到预期的效果。其二是要控制好网页文件的大小。鉴于网络通信流量和传输设置性能等因素的影响，目前网上信息传输速度还不理想。如果文件过大、图片过多会使网页下载时间过长，使浏览者失去耐心，整个网站也就会失去吸引力。所以必须合理地规划网页的内容。另外，网站的全部内容的组织都应紧扣网页设计的目标，使主题鲜明突出。
10.2  准备工作
要建设一个网站首先要准备好以下项目：
    1、申请域名
    2、申请空间
    3、网站规划
    4、选择配方案
    5、准备素材及设计工具
    6、设计网站
对于申请域名，有收费的和免费的。收费的是由专门的ISP商提供的，有较好的服务和稳定的速度。免费的适合个人网站，而且免费的域名都是二级、三级域名；所以作为公司来讲要选用一家好的ISP商来注册自己的域名。选择域名的原则是便于记忆，体现公司名称，而且是未被申请的。因为域名在全球是唯一的。中国UNIX用户协会的域名是www.cuug。，cuug的意思是China Unix User Group。
像注册公司一样，有了公司名字还要有办公地点，而网站的空间就是网站的工作地点。一般空间的申请是和域名一起完成的。这样可以减少很多不必要的麻烦。申请的空间一般提供FTP维护以及集团邮件，有的ISP还提供同域名下的web邮箱，可以在web上收发邮件。拥有集团邮件后就会拥有“xxx@域名”形式的信箱，如中国UNIX用户协会其中的一个邮箱就是cuug@cuug。邮箱的大小和服务的功能不同价格也将不同，可以根据企业需要申请邮箱空间。如果公司拥有自己的web服务器和邮件服务器就另当别论了，这已经超出本节的范围，在此不作叙述。
网站的规划是对网站的内容，栏目设置，布局作一个整体的设计，在以后的设计中，按照
这个思路来设计，比如www.cuug上的内容以UNIX相关和公司业务为主，栏目设置有技术培训、系统集成、网站建设、网络学院、网上书店、业务联系等。一般网页设计有一个固定模式，即头、中、尾三部分，头部是公司的Logo，中部是内容，尾部是版权声明和等。没有必要一定要遵循这个模式，作网页就是一种创意，而创意时常是不同于一般的。
配方案的选择是网站设计很重要的一个环节，好的彩搭配给人轻松愉悦的感觉，可以吸引浏览者，这一步和上一步都是要有美工参与的，美工在网页制作中非常重要，一般专业网站都会有美工，而对于一般网页设计人员来讲，有一点美工基础当然更好，也可以完全由自己来作，只要好看就行，而且要多参照一些好的网站。CUUG的配方案为文字颜#0066CC(淡蓝)和#009900（淡绿）和黑即#000000，链接为＃0066CC（淡蓝），访问过的链接#336600（偏蓝），背景为白。其他图片彩以淡黄为基准。
素材的准备在制作网页时是不可缺少的。有些小图片不一定要自己作，网络上很多好的图片素材可以下载下来直接使用，再根据需要制作图片。素材主要是图片，精美网页的模板，
简单的Script代码等。当然素材有了，还要有好的制作工具，所谓工欲善其事，必先利其器。好的制作工具可以使制作速度加快，网页制作工具有FrontPage、DreamWeaver，Hotdog等，在这里我们选用DreamWeaver来制作，图片的制作工具有Photoshop、Freehand、Fireworks等。在这里我们选用Photoshop和Fireworks，因为两个工具各有长处。
网站建设网页制作教程
接下来我们可以开始正式制作了。
10.3  具体设计及规划
    对于CUUG的网站，我们开始作如下工作。在其他网站的建设过程中也可套用这种模式。
1．确定建设目的
    建设网站是为了宣传本单位、本企业（公司）。
    2．涉及内容
    为了宣传CUUG，应首先让人们了解本协会，即应包括该CUUG的介绍；然后再介绍该协会的业务范围，例如，应包括：培训中心、培训教材和承接的咨询和设计项目，等等。
    3．收集资料
    根据该网站所涉及的内容，收集相关的资料。CUUG的网站包括“协会简介”、“培训中心”、“培训教材”和“承接项目”，因此应搜集CUUG的简介，培训中心的历史、社会评价、开设课程、培训教材、教学计划、学员报名时所要填写的报名表等，还有培训教材的各种资料和承接项目内容等。
    4．安排布局
    接下来，就要根据网站所涉及的内容和已收集的资料安排整个网站的布局，也就是安排这些内容在网站中的位置及它们的链接关系。
    CUUG网站的页面安排如下：
    主页：制作主页除了应注意前面章节所述的注意事项外，还应注意主页的内容不能太多，
最好是一屏恰好放下；能过浏览主页，浏览者能了解你我网页所介绍的内容，为此，CUUG主页除了具有对该网站的浏览需求外，应具有该网站的总体说明以各部分内容链接。还可以包含某些欢迎词和一个访问计数器。该页包括的链接有：协会简介、培训中心、项目咨询、等
    协会简介：单独一页，该页与主页建立链接关系
    技术培训：该页与主页有些相似，均包括其子页的链接点。由于该页的子页比较多，但某些子页的内容目前不很多，因此该页可以设计为分栏（Frame）形式，即当在左边单击某些内容不太多的子页链接点时，右边显示其内容；而对于内容较多的子页，则设计为使用整个显示区显示。另外，由于培训中心需要培训教材和，因此，该页应分别与“培训教材”页和“”页建立链接关系。该页的其它链接有：开设课程，网上报名，师资与环境，社会评价，培训历史，团体培训，其中部分子页单独成页，另一些子页显示在右边。
    网上书店：单独一页。该页与“主页”和“培训中心”页建立链接，并且也应与每本培训教材的所属页、“推荐图书”页、“网上订书”页建立链接关系。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。