日期:2013-09-28  浏览次数:20737 次

  正如你如今所看到的一样,网页的规划设计变得越来越重要。访问者不情愿再看到只注重内容的站点。虽然内容很重要,但只要当网页规划和网页内容成功接合时,这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。

   一.网页规划的基本概念

   最开始,网页呈如今你面前的时侯,它就好像一张白纸,它需求你任意挥洒你的设计才思。在开始的时侯,你需求明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种商定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上本人的东西。你当然也可以创造出本人的设计方案,但如果你是初学者,那么最好明白网页规划的基本概念。

   1.页面尺寸:

   由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且由于浏览器也将占去不少空间,留下给你的页面范围变得越来越小。普通分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高页面尺寸越大。

   浏览器的工具栏也是影响页面尺寸的缘由。普通目前的浏览器的工具栏都可以取消或者添加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。

   在网页设计过程中,向下拖动页面是独一给网页添加更多内容(尺寸)的方法。但我想提示大家除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需求在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。

   2.全体外型:

   什么是外型,外型就是创造出来的物体笼统。这里是指页面的全体笼统,这种笼统应该是一个全体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的外型,你可以充分运用自然界中的其它外形以及它们的组合:矩形,圆形,三角形,菱形等。

   对于不同的外形,它们所代表的意义是不同的。比如矩形代表着正式,规则,你留意到很多ICP和政府网页都是以矩形为全体外型;圆形带表着柔和,团结,温暖,安全等,许多时髦站点喜欢以圆形为页面全体外型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面全体外型;菱形代表着平衡,协调,公允,一些交友站点常运用菱形作为页面全体外型。虽然不同外形带表着不同意义,但目前的网页制造多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。

   3.页头:

   页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

   4.文本:

   文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面规划的可视性。在过去由于页面制造技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的衰亡,文本曾经可以按照本人的要求放置到页面的任何位置。

   5.页脚:

   页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制造者或者公司信息的地方。你能看到,许多制造信息都是放置在页脚的。

   6.图片

   图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面规划的关键。而你的规划思维也将体如今这里。

   7.多媒体

   除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的衰亡,它们在网页规划上也将变得更重要。

   二.网页规划的方法

   网页规划的方法有两种,第一种为纸上规划;第二种为软件规划。下面分别加以引见:

   1.纸上规划法

   许多网页制造者不喜欢先画出页面规划的草图,而是直接在网页设计器里边设计规划边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制造网页时,要先在纸上画出你页面的规划草图来。

   预备一若干张白纸和一只铅笔,你要设计一个时髦站点。

   *尺寸选择:

   目前普通800X600的分辨率为商定俗成的浏览模式。所以为了照顾大多数访问者,你页面的尺寸以800X600的分辨率为准。

   *外型的选择:

   先在白纸上画出意味浏览器窗口的矩形,这个矩形就是你规划的范围了。选择一个外形作为整个页面的主题外型,我们选择圆形,由于它代表者柔和,和时髦流行比较相称,然后在矩形框架里随意画出来,你可以试者在添加一些圆形或者其它外形。这样画下来,你会发现很乱。其实,如果你一开始就想设计出一个完满的规划来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别的外型出来。还要留意一点,你不要担心你设计的规划能否能够实现。理想上,只需你能想到的规划都能靠现今的HTML技术实现。

   考虑到左边向左凹的弧线,为了取得平衡我们在页面左边添加了一个矩形(也可以是一条线段)。

   *添加页头:

  . jpg是我们从.jpg和2.jpg得到的规划外型,那么我们该添加页头了。普通页头都是位于页面顶部,所以我们为.jpg添加了一个页头,为了和左边的弧线和左边的矩形取得平衡,我们添加了一个矩形页头并让页头相交与左边的弧线。

   *添加文本:

   页面的空白部分加别加入文本和图形。由于在页面左边有矩形作为陪衬,所以文本放置在空白部分不会由于左边的弧线而显得不协调。

   *添加图片:

   图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。

   经过以上的几个步骤,一个时髦页面的大概规划就出现了。当然,它不是最后的结果,而是你当前制造时的重要参考依据。

   2.软件规划法

   如果你不喜欢用纸来画出你的规划意图,那么你还可以利用软件来完成这些任务。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功用用到设计网页规划上更显得心应手。不像用纸来设计规划,利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功用设计出用纸张无法实现的规划意念。

   三.网页规划的技术

   1.层叠款式表的使用

   在新的HTML4.0标准中,CSS(层叠款式表)被提出来,它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂,但它的确是一个好的规划方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上,层叠款式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的引见和使用方法。

   2.表格规划

   表格规划好像曾经成为一个标准,随便浏览一个站点,它们一定是用表格规划的。表格规划的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS愈加方便。表格规划独一的缺点是,当你用了过多表格时,页面下载速度遭到影响。对于表格规划,你可以随便找一个站点的首页,然后保存为HTML文件,利用网页编辑工具打开它(要所见即所得的软件),你会看到这个页面是如何利用表格的。

   3.框架规划

   不知道什么原故,框架结构的页面开始被许多人不喜欢,可能是由于它的兼容性。但从规划上考虑,框架结构不失为一个好的规划方法。它好像表格规划一样,把不同对象放置到不同页面加以处理,由于框架可以取消边框,所以普通来说不影响全体美观。

   我今天来引见的规划指南并不是全部的网页规划技术,从某种意义上来说,我想引导你在制造网页的时侯,怎样把图片和文本放置的恰到好处,而且如何拥有一个跳越的设计思维。