网页布局设计基础(2)
发布时间:2008-10-16 13:58:00
二.网页布局的方法
网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍:
1.纸上布局法
许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时,要先在纸上画出你页面的布局草图来。
准备一若干张白纸和一只铅笔,你要设计一个时尚站点。
*尺寸选择:
目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者,你页面的尺寸以800X600的分辨率为准。
*造型的选择:
先在白纸上画出象征浏览器窗口的矩形,这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型,我们选择圆形,因为它代表者柔和,和时尚流行比较相称,然后在矩形框架里随意画出来,你可以试者在增加一些圆形或者其它形状。这样画下来,你会发现很乱。其实,如果你一开始就想设计出一个完美的布局来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点,你不要担心你设计的布局是否能够实现。事实上,只要你能想到的布局都能靠现今的HTML技术实现。
考虑到左边向左凹的弧线,为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。
*增加页头:
. jpg是我们从.jpg和2.jpg得到的布局造型,那么我们该增加页头了。一般页头都是位于页面顶部,所以我们为.jpg增加了一个页头,为了和左边的弧线和右边的矩形取得平衡,我们增加了一个矩形页头并让页头相交与左边的弧线。
*增加文本:
页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬,所以文本放置在空白部分不会因为左边的弧线而显得不协调。
*增加图片:
图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。
经过以上的几个步骤,一个时尚页面的大概布局就出现了。当然,它不是最后的结果,而是你以后制作时的重要参考依据。
2.软件布局法
如果你不喜欢用纸来画出你的布局意图,那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局,利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。
三.网页布局的技术
1.层叠样式表的应用
在新的HTML4.0标准中,CSS(层叠样式表)被提出来,它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂,但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上,层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。
2.表格布局
表格布局好像已经成为一个标准,随便浏览一个站点,它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是,当你用了过多表格时,页面下载速度受到影响。对于表格布局,你可以随便找一个站点的首页,然后保存为HTML文件,利用网页编辑工具打开它(要所见即所得的软件),你会看到这个页面是如何利用表格的。
3.框架布局
不知道什么原故,框架结构的页面开始被许多人不喜欢,可能是因为它的兼容性。但从布局上考虑,框架结构不失为一个好的布局方法。它如同表格布局一样,把不同对象放置到不同页面加以处理,因为框架可以取消边框,所以一般来说不影响整体美观。
我今天来介绍的布局指南并不是全部的网页布局技术,从某种意义上来说,我想引导你在制作网页的时侯,怎样把图片和文本放置的恰到好处,而且如何拥有一个跳越的设计思维。
猜你喜欢
- 把这两个很普遍性的网友比较关心的问题总结回答一下。in和exist的区别从sql编程角度来说,in直观,exists不直观多一个select
- asp生成html如果采用utf8编码方式,多数采用的是Adodb.Stream组件,因为fso并不能支持Utf-8最近在写一个生成HTML
- MySql5.0以后均支持存储过程,最近有空,研究了一下这个格式:CREATE PROCEDURE 过程名 ([过程参数[,...]])[特
- 首先要声明一点,大部分情况下,修改MySQL是需要有mysql里的root权限的, 所以一般用户无法更改密码,除非请求管理员。方法一使用ph
- 以前经常吃公司旁边的食堂,人多,排队。夏天的时候,我们总要找一个靠窗口通风好的地方坐,没有空调只有风扇,风扇很多,开关都集中在一个地方,应该
- <table width="636" border="0" align="cente
- 白天总是玩着不看书,这两晚却很神奇地因为睡不着起来看书,正则表达式。很好玩的东西。《Javascript 高级程序设计》是本好书,写得很系统
- js运行效果,含公历农历,生肖及节日的javascript日历代码:<html><head><meta htt
- 一、ASPJPEG文字水印对图片描边:程序代码: <% Set Jpeg = Se
- 在正文前,先简短介绍自己。我任职于广州的某个网站服务公司的系统开发员,主要任务是以.Net编写各种web系统,例如CMS.EIP。大家都知道
- HTML 5基本思维概念形成于2003年,之后W3C对页面超文本应用技术工作小组(WHATWG)开发的HTML草图颇感兴趣,这个小组的开发人
- 最近参与了将一个Sybase数据库移植到Microsoft SQL Server 2000上的项目,我在这一项目上获得的经验,将对Sybas
- 好多网友问起来,·深度学习网址导航·深度学习整站系统 的后台管理能否增加批量删除功能,如何加:就是列出N篇文章或网址信息,每篇文章或网址前有
- 内容摘要:近年来,视频点播VOD(Video on Demand)的名字在媒体上出现得越来越多。VOD技术使人们可以根据
- 上一篇介绍了 HTML5 中 Canvas 的基本概念,这篇将要介绍一下 Canvas&n
- 这个目前还是有个别无法显示,翻了下msdn貌似没看到更好的解决方案,暂时放弃继续研究,有晓得完全解决的朋友不妨回复说一声。 先附bat创建畸
- 这是一个网页设计中经常会用到的图片特效,实现多个图片之间的轮换,并分别带有连接。以前的代码只能适用于IE,在FF下始终没有得到很好的解决今天
- 完美的渐变透明效果。支持IE,Firefox渐变,自己写的JS框架中用的东西,发出来了。修正完全隐藏时,偶尔不display = "
- 见下,把数字转成条形图、条形码的一个程序:<%Sub ShowChart(ByRef aValues,
- 首先,把这个“功能”包含到页首:<!--#include virtual="/readini/inifile.in