谈网站总体设计和网布局

第六章网站总体设计与网页布局规划网站、组织网站1第一页，共四十五页。主要内容1、WEB站点建立的基本步骤2、网站整体风格和创意设计3、网站的目录结构和链接结构4、版面布局与首页搭配5、使用布局视图、框架、表格等进行页面布局。6、网站建设实例讲解2网站总体设计和网页布局第二页，共四十五页。1、WEB站点建立的基本步骤1）网站建设前的准备工作2）创建站点的导航结构3）收集整理相关资料4）组织文档和数据，进行具体的网站建设5）测试站点6）申请域名和主页空间7）上传站点资料3网站总体设计和网页布局第三页，共四十五页。1）网站建设前的准备工作确定网站的主题；计划要发布的内容；一般个人主页可以根据自己的爱好或一些热门的话题来选择网站的主题。如普及医疗卫生知识，提供文学艺术信息，学习计算机技术，向世人推销自己等等。4网站总体设计和网页布局第四页，共四十五页。2）创建站点的导航结构建设网站的整体框架设计。注意在站点的基本结构中，页面之间的链接关系要清晰，同时要兼顾以后的可扩充性，以备网站的修改与发展。5网站总体设计和网页布局第五页，共四十五页。3）收集整理相关资料包括：网站徽标、背景图片、按钮图片以及网站需要展示的内容。有能力者可以自己编制网站建设所需的内容，也可以通过各种渠道搜集相关资料，注意在引用他人的资料和文章时，应征得对方的同意，并注明作者和出处。6网站总体设计和网页布局第六页，共四十五页。4）组织文档和数据，进行具体的网站建设在制作网页之前应设计出网页的页面结构，即需要设计几个栏目和版块。大多数网站都是以表格来布局网页，也可以用框架同表格结合来完成。一般制作的第一个网页应该是首页，首页是整个网站精华的汇集。对于网页制作者来说，首页是最难也是最花工夫的。为制作风格一致的网站，还需要创建模版等。7网站总体设计和网页布局第七页，共四十五页。5）测试站点制作出的网站可以先在本地进行测试，检查站点的浏览器兼容性以及可能存在的错误链接等。8网站总体设计和网页布局第八页，共四十五页。6）申请域名和主页空间域名分为国际域名和国内域名。请登录申请域名，根据你的资金实力和网站的重要性做出选择：大型企业，资金雄厚，可以向邮电局申请专线服务。需要建立自己的机房，配备服务器、路由器、网络管理软件及网络管理人员。中小企业，信息量和数据量都不是很大，可采用虚拟主机托管方案，即租用要建设网站。如果你的企业信息量和数据量较大，可采用服务器托管方案，将已经制作好的服务器主机放到ISP的网络中心机房。如果是个人网站，资金又很有限，如果是个人网站，资金又很有限，可以到一些公司申请他们的域名+主机。（CNNICCN域名认证注册服务机构

，中资源、中国万网等）9网站总体设计和网页布局第九页，共四十五页。7）上传站点资料

利用专门的上传软件对网页进行上传，如：CuteFTP就是一款很好的网页上传软件，方便、灵活。

如果你的企业信息量和数据量较大，可采用服务器托管方案，将已经制作好的服务器主机放到ISP的网络中心机房。10网站总体设计和网页布局第十页，共四十五页。2、网站整体风格和创意设计1）树立网站的风格2）进行创意设计11网站总体设计和网页布局第十一页，共四十五页。1）树立网站的风格风格指站点的整体形象给浏览者的综合感受整体形象主要包括：站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等

给人的感受是平易近人的、生动活泼的、庄严肃穆的……12网站总体设计和网页布局第十二页，共四十五页。1）树立网站的风格如何树立站点的风格网站的内容要有价值网站的配色要合理，并且合乎内容需求网站要具有一定的个性：活泼、诚恳、奔放……与其他站点相比，要有自己的特色或不一样的地方

确立站点风格的问卷13网站总体设计和网页布局第十三页，共四十五页。1）树立网站的风格建立和加强风格印象1.将标志logo尽可能的出现在每个页面上。在页眉，页脚或背景。2.突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。3.突出标准字体。在关键的标题，菜单，图片里使用统一的标准字体。4.想一条朗朗上口宣传标语。把它做在banner里，或放在醒目的位置5.使用统一的语气和人称。6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。7.创造一个特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○

□△→等等。8.用自己设计的花边，线条，点9.展示你网站的荣誉和成功作品。14网站总体设计和网页布局第十四页，共四十五页。2）进行创意设计创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同)创意思考的过程分五阶段1.准备期--研究所搜集的资料，根据旧经验，启发新创意；2.孵化期--将资料咀嚼消化，使意识自由发展，任意结合；3.启示期--意识发展并结合，产生创意；4.验证期--将产生的创意讨论修正；5.形成期--设计制作网页，将创意具体化。

15网站总体设计和网页布局第十五页，共四十五页。2）进行创意设计创意思考的途径最常用的是联想，这里提供了网站创意的25种联想线索：1.把它颠倒

2.把它缩小

3.把颜色换一下

4.使它更长

5.使它闪动

6.把它放进音乐里7.结合文字音乐图画8.使它成为年轻的9.使它重复

10.使它变成立体

11.参加竞赛12.参加打赌13.变更一部分

14.分裂它

15.使它罗曼蒂克16.使它速度加快17.增加香味18.使它看起来流行19.使它对称

20.将它向儿童诉求21.价格更低22.给它起个绰号23.把它打包24.免费提供25.以上各项延伸组合

-------------(转载自樊志育《广告制作》)16网站总体设计和网页布局第十六页，共四十五页。3、网站的目录结构和链接结构1）网站的目录结构2）网站的链接结构17网站总体设计和网页布局第十七页，共四十五页。1）网站的目录结构网站的目录是指你建立网站时创建的目录目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。18网站总体设计和网页布局第十八页，共四十五页。1）网站的目录结构建立目录结构的一些建议:不要将所有文件都存放在根目录下，否则会造成：文件管理混乱上传速度慢按栏目内容建立子目录

子目录的建立，首先按主菜单栏目建立其他的次要栏目，需要经常更新的可以建立独立的子目录。不太更新的可合并放在一个目录下。所有的程序一般都存放在特定目录下。在每个主目录下都建立独立的images（图片）目录

目录的层次不要太深，不要超过3层。19网站总体设计和网页布局第十九页，共四十五页。1）网站的目录结构其他注意事项:1.不要使用中文目录。使用中文目录可能对网址的正确显示造成困难。2.不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。3.尽量使用意义明确的目录。例如可以用Flash,Dhtml,Javascript来建立目录，也可以用1，2，3建立目录，但明显前者更明确，更便于记忆和管理。20网站总体设计和网页布局第二十页，共四十五页。2）网站的链接结构网站的网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。用最少的链接，使得浏览最有效率。21网站总体设计和网页布局第二十一页，共四十五页。2）网站的链接结构建立网站的链接结构有两种基本方式：1.树状链接结构(一对一)。首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。2.星状链接结构(一对多)。类似网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。22网站总体设计和网页布局第二十二页，共四十五页。2）网站的链接结构在实际的网站设计中，总是将这两种结构混合起来使用；浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置，解决办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。

首页财经新闻页

娱乐新闻页

体育新闻页

[财经新闻1，财经新闻2，……][娱乐新闻1，娱乐新闻2，……][体育新闻1，体育新闻2，……]二级页面一级页面23网站总体设计和网页布局第二十三页，共四十五页。2）网站的链接结构注意:以上我们都是用的三级页面举例。若站点内容庞大，分类明细，需要超过三级页面，则建议在页面里显示导航条，可以帮助浏览者明确自己所处的位置。即为经常看到许多网站页面顶部的，类似这样:“您现在的位置是:首页->财经新闻->股市信息->深圳股->深发展”24网站总体设计和网页布局第二十四页，共四十五页。4、版面布局与首页搭配1）设计要求整洁大方：各种元素的运用应适度突出重点：突出主体内容平衡对称：页面的上下左右应给人以任意匀称的感觉风格一致：样式统一，配色合理2）实例：详见书P90页面尺寸整体造型页面题头页脚文本与图片25网站总体设计和网页布局第二十五页，共四十五页。5、使用布局视图、框架、表格等进行页面布局。1）使用表格进行布局2）使用框架进行布局3）使用图层进行布局4）使用布局视图进行页面布局布局模式绘制布局表格和布局单元格编辑布局表格和布局单元格使用网格内容添加，制作主页26网站总体设计和网页布局第二十六页，共四十五页。6、网站建设实例讲解（1）栏目设置（2）颜色设计（3）整体布局设计（4）头部设计（5）导航条和背景图像制作（6）制作“主广告区”、“信息分类”区与页脚（7）创建样式（8）添加导航栏信息与分类信息（9）添加页脚及公告栏、标语栏信息（10）制作首页（11）其他页面链接制作（12）添加网站链接27网站总体设计和网页布局第二十七页，共四十五页。实例讲解－（1）栏目设置根据网站的主题来确定网站的栏目例如以建立一个教育站点（如Internet与网页设计站点）为例：分析：既有组织类站点的功能又有信息类站点的功能栏目设置为：课程大纲——介绍课程的学习大纲，自学大纲课程内容——课程的具体内容，提供对应的PPT下载资料素材——分类提供相关学习资料、建站素材课程练习——提供各章节的对应练习题课程互动——提问与解答娱乐放松——提供娱乐链接28网站总体设计和网页布局第二十八页，共四十五页。实例讲解－（2）颜色设计可采用配色软件来完成——一般主色少于四种颜色人对色彩的联想：红色：热情、震撼、高贵、力量来源、刺激、上进灰色：压抑、暧昧、内向、失望、消极蓝色：清凉、哀伤、沉稳、深远、开朗黄色：高贵、富有、灿烂、活泼黑色：严肃、夜晚、沉着白色：纯洁、简单、洁净绿色：植物、生命、生机紫色：浪漫、富贵棕色：大地、厚朴

29网站总体设计和网页布局第二十九页，共四十五页。实例讲解－（2）颜色设计设计用色实例1、这是一个娱乐类的综合性网站UGO，他的配色方案是：背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。30网站总体设计和网页布局第三十页，共四十五页。实例讲解－（2）颜色设计设计用色实例2、下面的这个网站是的微软公司网站：背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0）。31网站总体设计和网页布局第三十一页，共四十五页。实例讲解－（2）颜色设计设计用色实例3、下面的网站Smirnoff采用红黑色调为主，很体现公司的个性：他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）32网站总体设计和网页布局第三十二页，共四十五页。实例讲解－（2）颜色设计设计用色实例5、一般网页颜色的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了四种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。33网站总体设计和网页布局第三十三页，共四十五页。实例讲解－（3）整体布局设计1、可先思考网站的整体布局格式；2、而后通过DreamWeaver新建一个站点。准备设计网页。信息提示课程介绍信息分类课程大纲课程内容资料素材课程练习课程互动娱乐放松34网站总体设计和网页布局第三十四页，共四十五页。实例讲解－（3）整体布局设计3、绘制布局——头部绘制（注：仅在设计状态下使用）（1）工具条－布局－布局模式－使用布局表格进行绘制。在属性面板中设置表格宽：756pt；高：105pt右键单击表格－对齐－居中对齐（2）设置用于放置头部信息的单元格选择“绘制布局单元格”按钮进行布局，拖动时注意左右边缘部分与表格之间留空隙。宽：730pt，高：105pt（可查看对应代码，在说明标记内写上对应说明）改写为“网页头部”35网站总体设计和网页布局第三十五页，共四十五页。实例讲解－（3）整体布局设计3、绘制布局——导航条绘制（1）工具条－布局－布局模式－使用布局表格进行绘制。在属性面板中设置表格宽：756pt；高：45pt右键单击表格－对齐－居中对齐（2）设置用于放置导航栏的布局单元格选择“绘制布局单元格”按钮进行布局一次左右绘制两个布局单元格，宽度可在以后的制作中据要求进行调节。统样的方式在代码中为导航栏设置注释标记。36网站总体设计和网页布局第三十六页，共四十五页。实例讲解－（3）整体布局设计3、绘制布局——“课程介绍”采用同上的方式绘制“课程介绍”区域。宽756，高190（可据实际高度设定），居中。绘制单元格，宽180，高190，用于放置“信息提示”板块在右上方绘制单元格，宽550，高19，用于放置课程介绍的标题剩下的即为绘制“课程介绍”板块。接着写上说明。37网站总体设计和网页布局第三十七页，共四十五页。实例讲解－（3）整体布局设计3、绘制布局——“主信息区”板块（1）绘制布局表格：宽756，高564（2）在刚才的布局表格内再绘制布局表格，宽180，高564（3）绘制布局单元格：——主信息区板块中“信息分类”区使用CTRL键：连续绘制多个单元格使用ALT键：禁止表格靠齐点击绘制单元格按钮后，再按住CTRL键可不断绘制单元格。（4）绘制主信息区板块中的主信息区用布局单元格绘制信息标语栏：宽550，高19用布局表格绘制标语栏下方的主信息区：38网站总体设计和网页布局第三十八页，共四十五页。实例讲解－（3）整体布局设计3、绘制布局——页脚（1）绘制布局表格：宽756，高75，居中对齐绘制730×15的布局单元格再绘制730×43的布局单元格再绘制730×16的布局单元格39网站总体设计和网页布局第三十九页，共四十五页。实例讲解－（3）整体布局设计4、头部设计（1）可以通过PhotoShop或FireWork制作头部的图片（2）或者从网上寻找素材。＃C8E2B1＃FFFAB3＃00A06840网站总体设计和网页布局第四十页，共四十五页。实例讲解－（3）整体布局设计5、导航条和背景图像制作使用Fireworks制作6、制作“课程介绍区”、“信息分类”区与页脚使用Fireworks制作页脚直接设置背景颜色7、创建样式body:方框－上边界：0td：字号12px.biaoti：字号12px.yanse：文字为白色.liebiao：下