网站布局[编辑]
一、网页字体设置
字体大小的控制是网页字体设置的重点。
一般字体默认的大小是12pt(镑)。而现在网络上最流行的小中文正文字体大小为9pt,究竟我们可以在网页上用几种大小的字体?也就是说,显示器上的网页中,有几种字号是美观的?9pt是公认的字号。绝大多数网页都用它。11pt也好看。那么是如何设定的呢?
方法是用CSS层叠样式表。CSS是DHTML的一个组成部分,它可以定义整个页面的字体显示风格和大小。是较为简便的方法。比如,这里需要设定整个页面文字大小为9pt,我们只要如下图打开样式对话框进行设置就行了:
反应到代码中就是:
a1 {
font-size: 9pt;
color: #000000;}
其中FONT-SIZE:9pt是指字体的大小为9镑。
如果做一个完整的网站,网页文字需要统一的风格,则建议使用外部样式文件。就是说将css的设定作成一个单独的文件,在每个页面里都调用它。一旦你需要修改字体大小,只要修改一个.css文件,所有页面就同时修改了。
下面是几条网页设计中字体的使用原则,可供参考:
1.不要使用超过3种以上的字体。字体太多则显得杂乱,没有主题。
2.不要用太大的字。因为版面是宝贵,有限的,粗陋的大字体不能带给访问者更多信息。
3.不要使用不停闪烁的文字。想让浏览者多停留一会儿的话,就不要使用闪烁的文字。
4.原则上标题的字体较正文大,颜色也应有所区别。
二、网页布局
1、网页布局的基本概念
最开始,网页呈现在你面前的时侯,它就好像一张白纸。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的“标准”或者说大多数访问者的“浏览习惯”,那么你就可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案,但作为网页设计制作者,那么最好明白网页布局的基本概念。
(1)页面尺寸
页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在分辨率在1024×768的情况下,页面的显示尺寸为1007×600象素;800x600的情况下,页面的显示尺寸为780×428个象素;而640x480的情况下,页面的显示尺寸为620×311个象素。从以上数据可以看出,分辨率越高页面的尺寸就越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸肯定是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。提醒大家,除非你肯定站点的内容能够吸引大家拖动,否则不要让访问者拖动页面超过三屏高。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。
(2)整体造型
什么是造型,造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的结合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合比如矩形,圆形,三角形,菱形等。
对于不同的形状,它们所代表的意义是不同的。
比如矩形代表着正式,规则,你注意到很多ICP和政府部门的网页都是以矩形为整体造型;
圆形则代表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;
三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;
菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。
虽然不同形状代表着不同意义,但目前的网页制作多数是结合多种图形加以设计,在这其中某一种图形的构图比例可能占得多一些。
(3)页头
页头又可称之为页眉,页眉的作用是定义页面的主题。比如站点的名称多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。
页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名称的图片和公司标志以及旗帜广告。
(4)文本
文本在页面中出现都数以行或者块(段落)的形式,它们的摆放位置决定着整个页面布局的可视性。
(5)页脚
页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。
(6)图片
图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
(7)多媒体
除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着宽带网的兴起,它们在网页布局上也将变得更重要。
2、网页布局的方法
网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍:
(1)纸上布局法
许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计软件里边设计布局边添加内容。这种不打草稿的方法很难让你设计出优秀的网页来。所以在开始制作网页时,应该先在纸上画出你页面的布局草图来。
(2)软件布局法
如果你不喜欢用纸来画出你的布局意图,那么你还可以利用软件来完成这项工作。可利用的软件如Photoshop。Photoshop所具有的对图像的编辑功能在设计网页布局的设计上更是得心应手。不像用纸来设计布局,利用Photoshop可以方便地使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法表现的布局意念。
3、网页布局理念
网页可以说是网站构成的基本元素。当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个非常重要的因素——网页的布局。
下面,我们就有关网页布局的理论。
4、网页布局类型
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。
(1)“国”字型:也可以称为“同”字型,是一些大型网站所喜欢的类型,如我们学校(www.sxszjzx.com/index1.php)即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
(2)拐角型:这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。如浙江师范大学的网页(http://www.zjnu.edu.cn/rcpy/zdzy.htm)在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。
(3)标题正文型:这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。如我们的校园图书查询系统。
(4)左右框架型:这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。如我们学校信息教研组的网站(http://www.sxszjzx.com/~t236/)
(5)上下框架型:与上面类似,区别仅仅在于是一种上下分为两页的框架。
(6)综合框架型:上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。
(7)封面型:这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
(8)Flash型:其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。
(9)变化型:即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。
5、关于第一屏
所谓第一屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?其实这是未知的。一般来讲,在800*600的屏幕显示模式(这也是最常用的)下,在IE安装后默认的状态(即工具栏地址栏等没有改变)下,IE窗口内能看到的部分为778px*435px,一般来讲,我们以这个大小为标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数考虑了。说了那么多,无非是一个标准的问题,其实接下来不用我说大家也能想到,第一屏当然要放最主要的内容,关键要知道的是,我们要对第一屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。
6、有关导航栏的位置
导航栏能让我们在浏览时容易的到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要清晰、醒目,一般来讲,导航栏要在“第一屏”能显示出来,但是有时第一屏可能会小于上面所说的435px,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第一屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的,而纵向的则不确定性要大的多。
7、什么样的布局是最好的
这是初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息。还有一种就是变化型了,只有不断的变化才会提高,才会不断丰富我们的网页!
网络营销词典内容均由网友提供,仅供参考。如发现词条内容有问题,请发邮件至info # wm23.com。