网页布局设计基础
发布时间:2008-10-16 13:58:00
正如你现在所看到的一样,网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要,但只有当网页布局和网页内容成功接合时,这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。
一.网页布局的基本概念
最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念。
1.页面尺寸:
由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。
2.整体造型:
什么是造型,造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。
对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多ICP和政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。
3.页头:
页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
4.文本:
文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚:
页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。
6.图片
图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
7.多媒体
除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着 * 页的兴起,它们在网页布局上也将变得更重要。


猜你喜欢
- 在我们学习和使用JavaScript的中,会经常使用到数组的去重,接下来的内容,来给大家分享一下,我们在开发过程中,常用到的数组去重方法,这
- Vue路由跳转传参或打开新页面跳转1. 通过路由中的name属性 使用params传递参数, 使用this.$route.para
- 1比如python提倡简单实用的思想,它就没有switch语句,如果要实现switch语句的效果 的话可以通过2个方法来写把 (1)通过if
- Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架
- let和const声明的变量只在代码块内有效{let a = 10;var b = 1;}a // ReferenceError: a is
- 一、低配logging日志总共分为以下五个级别,这个五个级别自下而上进行匹配 debug-->info-->warning--&
- 1. 循环require在JavaScript中,模块之间可能出现相互引用的情况,例如现在有三个模块,他们之间的相互引用关系如下,大致的引用
- 继续还是工作中使用colly,不管是官网,还是网上的一些文章(其实90%就是把官网的案例抄过去),都是一样的格式,没有讲到post,测试了几
- 本文实例讲述了Python中list以及list与array的相互转换实现方法。分享给大家供大家参考,具体如下:python中的list是一
- 本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码,供大家参考,具体内容如下要实现的效果如下:<!DOCTYP
- 一个已知管用的方法是,使用session_set_save_handler,接管所有的session管理工作,一般是把session信息存储
- SELECT (case when a.colorder=1 then d.name else '
- 一、前言MySQL启动后,BufferPool就会被初始化,在你没有执行任何查询操作之前,BufferPool中的缓存页都是一块块空的内存,
- 今天在对一堆新数据进行数据清洗的时候,遇到了一个这样的问题:ValueError: cannot convert float NaN to
- 前端开发部门在壮大,人员在增加,技术在进步。CSSer虽然不能代表前端开发团队,但CSSer是前端开发中非常重要的组成部分。一、文档写程序的
- python加密打包程序加密方式:将py文件转为pyd格式安装easycython模块 pip install easycython使用ea
- 附上官网地址:https://pytorch.org/docs/stable/index.html1.torch.squeezesqueez
- 为了让大家更好的对python中WSGI有更好的理解,我们先从最简单的认识WSGI着手,然后介绍一下WSGI几个经常使用到的接口,了解基本的
- Django项目默认使用sqlite 数据库,但是我想用mysql数据库,应该如何配置呢。Django连接mysql数据库的操作,是通过根模
- 上篇文章讲了js中的传值和传址 和 函数的作用域.这章我们来探讨js中的变量,表达式,和运算符 还有一些 js 语句。升级中……1, 表达式