个性网页的设计之网页构架.docVIP

PAGE  PAGE 5 个性网页设计之网页构架 .com 现在做主页的朋友越来越多。而对于没有学过设计，以及没有学过美术的朋友而言，怎样去提高自己网页设计水平，或做出自己的个性网页呢？技术也只是为了设计而服务的，在技术的同等条件下，怎样来展示自己？一般网页编排内容有：文字、静态图片和动画。具体可实现的技术更多了，包括视频、音乐和音效、交互式网页、高科技虚拟等等。在设计网页时候，可以广泛应用各种技术。如果把网页比喻成人的话，先要有骨架，也就是网页的排版框架。我进行了大致的分类，主要是：分栏式结构，区块分布，平面图片设计，以及非规律的设计，下面我将逐一讲解。 分栏式结构  分栏结构，也是最常见的方式。常见的有如：E（ HYPERLINK javascript:if(confirm(/%20%20nnThis%20file%20was%20not%20retrieved%20by%20Teleport%20Pro,%20because%20it%20is%20addressed%20on%20a%20domain%20or%20path%20outside%20the%20boundaries%20set%20for%20its%20Starting%20Address.%20%20nnDo%20you%20want%20to%20open%20it%20from%20the%20server?))window.location=/ \t _blank /）的二分栏设计，七色谷（ HYPERLINK javascript:if(confirm(/%20%20nnThis%20file%20was%20not%20retrieved%20by%20Teleport%20Pro,%20because%20it%20is%20addressed%20on%20a%20domain%20or%20path%20outside%20the%20boundaries%20set%20for%20its%20Starting%20Address.%20%20nnDo%20you%20want%20to%20open%20it%20from%20the%20server?))window.location=/ \t _blank ）的三分栏，以及国外常见的四分栏结构，我甚至还特殊设计过五分栏（ HYPERLINK javascript:if(confirm(/vcity%20%20nnThis%20file%20was%20not%20retrieved%20by%20Teleport%20Pro,%20because%20it%20is%20addressed%20on%20a%20domain%20or%20path%20outside%20the%20boundaries%20set%20for%20its%20Starting%20Address.%20%20nnDo%20you%20want%20to%20open%20it%20from%20the%20server?))window.location=/vcity \t _blank /vcity）的网页。通常的布局编排情况有如左图所示。1是二分栏，2是标准三分栏，3是四分栏，4～6是一些LOGO以及导航在下面的情况，而通常会使用Frame。7～9则是一般的变化，而我这里所列出的一些例子也是很泛泛的。见到一些网页的设计，判断上，有一些是以颜色来分栏的，有一些是利用导航分栏的。不论你用那种设计方法，最重要的是心中有数，去编排自己的内容。设计也只是为了你的内容服务的。一个快捷的方法是，在纸上勾画一下，用你的内容名称填充一下，粗略地进行规划。在标准的构架上加一些变化，就会有很多新的编排形式出现，比如上图中的7～9。有空大家可以多在纸上画画，也是一种锻炼，加一些小的变化，也就使你的设计与他人不同，脱颖而出。 区块分布  区块编排，是以颜色或线条，来划分一些区域的编排方式，其实也就是分栏结构的变异。如果说分栏设计太过规范没有新意的话，那么就要看看区块功用了。如左图所示：这样的设计，很漂亮，不过也要依据内容许可程度，国外用此类设计手法的很多，色彩运用上也很出色（以后在本系列中会提到一些色彩问题）。区域编排的设计，一般和竖分栏不同的是，页面一般情况下不长，一屏或一屏半左右的长度，用于信息量少的企业站点，和专业型站点。还有就是看你是什么内容的个人主页，大部分情况都很适用。但是却不适合门户站点和信息量很大的站点。区域的设置可大可小，但是依据内容编排。在分栏式结构里面也可以套设区域结构，所以说，这种骨架结构是“前途无量”，有待大家进一步