设计师如何把握网页布局

网页设计初学者,最好明白网页布局的基本概念。

  1.页面尺寸

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

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

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

2.整体造型

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

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

3.页头

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

4.文本

  文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。(3lian素材)

5.页脚

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

6.图片

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

7.多媒体

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

时间: 2024-09-17 19:10:17

设计师如何把握网页布局的相关文章

网页设计时把握网页布局的参考

参考|设计|网页|网页设计 最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思.在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西.你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念.   1.页面尺寸 由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页

超大网页布局的思考和建议

  对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局.无论是采用大块大块的背景照片还是背景视频,超大网页布局的效果非常显著:极具视觉冲击力,吸引用户注意力. 但是超大网页布局有什么诀窍呢?这里我们通过案例给出一些建议. 大的好处 joes eone-time crema-coffee lrxd riskeverything thewhig 超大网页布局最明显的好处便是具备极强的视觉冲击力(就像上图的妹子一样,想知道妹子是谁咩

Div+CSS标准网页布局容易出现的问题汇总

css|标准|网页|问题 应用Div+CSS网页布局,制作符合web标准的网站,容易出现的一些问题.现在总结一下,以便大家能够看到明白问题出在那里. 一.CSS校验的问题 我们设计的网页,都希望符合XHTML标准,CSS通过W3C的校验.有些未通过CSS2.0校验,主要校验错误都是:"Line : 0 font-family: 建议你指定一个种类族科作为最后的选择"W3C建议字体定义的时候,最后以一个类别的字体结束,而不要以单独某个字体结束.例如"sans-serif&quo

网页设计网页布局教程:CSS布局新属性

文章简介:新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在 the April 2012 issue (226)这期的.n

CSS网页布局错位:CSS宽度计算

文章简介:CSS网页布局错位. 为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么计算CSS宽度例一:我们计算一个左右结构的布局样式.假如总宽度为400px,那么左右加起来就应当小于400px,那我们可能左边为300px,右边为100px正确代码: <!DOCTYPE html><head><meta http-equiv=&q

CSS网页布局避免滥用div元素

文章简介:CSS网页布局应该避免滥用div元素一直是我们倡导的,以合适的HTML标签组织文档是CSS网页布局的基??/font> CSS网页布局应该避免滥用div元素一直是我们倡导的,以合适的HTML标签组织文档是CSS网页布局的基础. 页面中div与span元素的使用是一个新问题,我们也容易过多的使用它们.必要及合理的使用div可以明显的增强文档的结构性.这也是webjx.com一直提倡的. 如果你审视你的HTML文档,发现有着很多的div与span,那你就得换一个眼光来看问题了,是不是存在滥

网站建设中网页布局与颜色运用基本准则

网页布局与颜色运用的基本准则 在网页设计的众多环节中,页面布局.颜色搭配是最为重要的环节之一.接下来,我们将通过五条准则来告诉您如何在布局.颜色方面让您的网页看起来更舒适.更美观. 首先,让我们来讲讲有关页面的布局. 准则一:有太多的条条框框会对你的健康产生不好的影响 有一名设计师说当他或她在页面设计时开始使用一些条条框框以及一些准则的时候就意味着他已经成为设计师了. 当你自己观察你的页面并意识到有必要去做些更有吸引力和创造力的东西来摆脱你所刚做的一些烦人的作品时,或是决定要抛弃一些以前所遵循的

DIV CSS网页布局学习中容易出现的问题汇总

css|网页|问题 应用Div+CSS网页布局,制作符合web标准的网站,容易出现的一些问题.现在总结一下,以便大家能够看到明白问题出在那里. 一.CSS校验的问题 我们设计的网页,都希望符合XHTML标准,CSS通过W3C的校验.有些未通过CSS2.0校验,主要校验错误都是:"Line : 0 font-family: 建议你指定一个种类族科作为最后的选择"W3C建议字体定义的时候,最后以一个类别的字体结束,而不要以单独某个字体结束.例如"sans-serif"就

网页布局设计:使用数学中的模数精确布局

在设计中可以使用许多数学公式,比如常用的黄金分割比就是其中之一.在网页设计布局中,我们也能通过精密的计算来获得理想的排版比例,本文将介绍使用数学中的"模数"来计算网页布局大小,从而获得更为合理的布局. 在IT工业中,内置标准.国际标准.国家标准才是真正意义的规范.而在应用领域(包括web应用的开发)的开发中,标准是各自为政乱七八糟的,微软如果不考虑市场和经济利益也不是不吊这些标准的.我不得不汗一个. 二.模数网页设计中的应用 好了,鄙视完小儿科的网页设计,我们来谈谈"模数&q