如何把握网页布局

Post by 张美工, 2008-12-12, Views:

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

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

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

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

2.整体造型

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

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

3.页头

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

4.文本

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

5.页脚

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

6.图片

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

7.多媒体

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

相关文章:                                                 
 # Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总()
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 ()
# JS表单判断函数代码大全 ()
# JS表单判断函数代码大全 

 

 

#  I E和火狐的css兼容性问题归总

体验css+div 之 CSS hack:区分IE6,IE7,firefox

体验css+div 兼容标准XHTML的浮动层特效实现

因为编码差异 导致IE6不能正常解析CSS文件

#  商业网站响应用户需求重视与Firefox兼容


#  
frameset 的属性
frameset元素属性详解、浮动框架的制作、超链接与框架的制作

 

体验css+div 之 SEO

#  40个网页常用小代码

div+css样式几个小精华

网站用户体验--CSS常用小技巧

#  体验css+div css技巧-经典中的经典

#  体验css+div CSS样式表设计的十条技巧

体验css+div 网页切图过程中div+css命名规则

网站用户体验--根据项目需求定义 常用CSS2基本定义例子
#  体验css+div 三种使网站背景图片自动适应浏览器大小的方法

 

#  搜索

#  创建锚链接

#  如何让单行文本框input与多行文本框textarea背景透明

EditPlus转化文件格式到UTF-8
#  让长字符URL/Email自动换行

HTML特殊字符显示

 

#  体验css+div定位与table定位代码的差异
体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别?

 

体验css+div 简单的滑动门效果代码

#  体验css+div 超实用的滑动门效果代码(css和代码都包含在内)

 

彻底弄懂CSS盒子模式(DIV布局快速入门)

如何把握网页布局
实例详解CSS网页布局原理

体验CSS+DIV 基本布局

#  体验css+div 解决流体布局的问题
#  体验css+div 固定宽度布局、流体布局、弹性布局的优势对比<弹性布局>
#  
体验css+div 固定宽度布局、流体布局、弹性布局的优势对比<流体布局>
体验css+div 固定宽度布局、流体布局、弹性布局的优势对比<固定宽度布局>

 

 

 

#  体验css+div 为什么css+div 会盛行
#  体验css+div中id和class各自的用法及区别

体验css+div 规划、组织和维护样式表

体验css+div 基本列表样式

体验css+div 为样式找到目标

 

体验css+div 圆角框

体验css+div 层叠和特殊性
#  css之自动换行

#  CSS控制连续英文字母或数字强制换行

#  css使网页图片半透明

体验css+div 背景透明内容不透明的写法
体验css+div 给整个页面添加渐变背景
用css样式控制做成的按钮,取代图片按钮

体验css+div 鼠标经过按钮发生变化效果
体验css+div 文本框自适应窗口宽度
体验css+div 老问题重新讲“怎样使页面整体居中”
体验css+div之图像替换 1.徽标图像替换
体验css+div 使用自动空白边让设计居中
 

 

                                                                                                                   +     

 

Tags: 把握网页布局 
分类:css+div | 评论:0 | 引用:0
上一篇:photoshop教程 之 去掉GIF图片的毛边
下一篇:彻底弄懂CSS盒子模式(DIV布局快速入门)

或许你还对下面的文章感兴趣

Comments

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

<#template:pagebar#>

最新文章

最新评论

Guest