网页的排版与布局

网页

 
  按照平面设计的形式来看,整个页面可以分为几个部分,每个部分有不同的功能,也能体现不同的形式,具体看来就是上边、左边、下边、右边、中间、看似无奇,自身却有许多独特的地方,就说划分的大小吧!中间的部分一般是最大的,因为它承载着主要的信息,使用者主要就是看中间这个部分的内容,有些网站也为了出新意把整个页面进行任意划分,特别是个人网页,例如把整个页面平分为左右两个部分,但是这样会让人不着重点,还有的框架用得太多,影响了页面的整体性。总结一下有这么几种布局方式,下面进行比较,

  1. 上边和左边相结合,这是最常用的一种方式,上面是页面的提头和广告条,左边是按钮和其它的链接,这样的布局有其本质上的优点,因为人的注意力主要在右下角,所以主要想得到的信息都能最大可能的获取,而且很方便。但是有一个问题不得不注意,就是按钮在左边,都知道我们都是用的右手来操作鼠标的,要到左边去点击按钮就要移动过整个屏幕,所以每次都这样会很不方便。当然这也有一个习惯的问题,因为现在大部分的网站都采用这种形式,无形中造成使用者一打开网页都是习惯性的在左边去点击按钮。所以在比较正规的网站还是尽量符合这种使用方式,当然也不是一成不变的采用,要能够在这种基础上做一些变化。就能作出很好的网页来。

  2. 上边和下边的结合,这种方式用得少一些,都是也有很多的网站采用。这样可以解决使用上的问题,因为在屏幕下方移动鼠标可以很自如。同时由于上面有横的提头或者是广告条,这样上下造成一种对比和呼应,无论其中的内容如何安排,页面都会显得非常平衡,从而显得更协调,这是一种形式感很强的布局形式。

  3. 上、左、下边相结合,这种方式也有一些应用,这种方式的采用可以将功能性的东西有条理的放的左边和下边,使用起来更方便,像很多的按钮和链接(文字链接和图片链接以及E-mail链接等)都可以很清楚的显示出来,由此具有很好的导向性。但是这样也有不利的地方,例如这样整个页面被占去的地方较多,是页面的主要要显示的内容受到影响。所以也是使用的时候要斟酌的,看在什么情况下适合才能采用这种形式。

间太少了,所以这种应用得也比较少。不过经过一些刻意的变化之后能作出很漂亮的形式来,所以一些个人站点有时也采用。

  这是简单的进行提炼之后得出的几种类别,但是现实的应用中基本上都是经过一定的变化的,所以呈现出丰富多彩的布局形式,所以在了解这些布局的一些基本的优劣之后,适当的利用其优点,结合一些富有形式美感的因素,进行设计。就能设计出非常漂亮的网页,同时在使用上也能够非常的方便。

综合起来看

  内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,以为只要能够把具体内容清晰流畅的放到网站上就行了,造成整个页面的形式感很差,这样严重影响使用者的心情。同样假如不顾网页的内容,只顾页面的形式,尽管页面再漂亮,使用者也不会欢迎,因为这样是他们根本没有得到什么东西(或者获得的信息很少),使他们的目的没有达到,他们上网的目的就是获取信息,不只是欣赏。因为这种网络环境下,受现代生活方式的影响,是不大有心情来欣赏这些的。好的形式只是促进人获取信息的辅助物,不是对象。只重形式正如买椟还珠。所以作为设计者就要找到这两者的一个切入点。选好这个切入点很重要,这需要仔细的考虑自己的网页的题目之后,进行展开,然后作出草图来对比不同的形式之间的优劣,然后优选出一个来进行最终的设计。设计的同时要不断的进行排版布局的调整,一旦发现两者之间有些不够协调的地方就要不断的返回去修改,对照自己的设计构思。这样才能作出令人满意的网页来

网页的排版与布局
叶德辉
 

  很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver、flash、firework、photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快。

  今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现。我想强调的是关于网页排版布局方面的必要的知识,很多初学者都忽视这方面,以为技术就能代表一切,能够知道怎么用这个做网页的工具就能够做出质量较高的网页来。其实不然,因为软件知识只是一种工具,就像你有了笔,但不一定能作出好的文章来一样。很多人对技术很熟练但是做出来的网页却通常是照搬人家的东西,并没有体现做网页的水平的提高。

  网络时代,人本身的因素是相当重要的,只有拥有这方面的一定的审美知识,才有机会做好网页,而真正技术上的东西是不重要的,毕竟技术的发展是使每个使用者使用更加的方便,发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以,我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上,网页的设计呈现出多样化的趋势,但是万变不离其宗,我想认真的分析一下,可以得到一些有用的东西,在我们应用的时候作为参考。

  虽然网页设计拥有传统的媒体的不具有的优势,例如是能够声音、图片、文字、动画相结合,营造一个富有生气的独特世界,同时它拥有极强交互性,使使用者能够参与其中,同设计者相交流。但是最基本的模式还是平面设计的内容,所以平面设计就要考虑形式美的内容,其中网页的排版布局就属于形式的内容,那什么形式呢?

  形。原形,包括原始形,或称自然形。
  式。许慎之《说文解字》说:“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义,也就是一种“格律”。

  中国古典建筑形式就称为“法式”。“形”是自然的,“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造,才能起更大的作用,由于这个原因,就形成了今天的审美形态,形象是客观的,形式则是依据客观的规律进行主观的创造。如果没有主观的创造,就没有艺术,也不可能有今天的一切,当然对于实际的网页制作来说,这也是最基本的,就是主观的创造,因为这是一个网页的灵魂,假如没有自己的主观创造,就只能拾人牙慧? 复别人丢掉不用的东西,是毫无意义的。所以现在强调网页设计的创造,表现在对页面的布局上,具体说就是体现在页面的形式美方面。就是通过页面的合理安排,例如文字的条理清楚、流畅、整体,使形式美得到体现。

  从网站内容上来进行排版
  现在的网站通常具有的内容是文字、图片、符号、动画、按钮等,其中文字占很大的比重,因为现在网络基本上还是以传送信息为主,而用文字还是非常有效率的一种方式,其次是图片,加入图片不但可以是页面更加的活跃,而且可以形象的说明问题。所以按照目前网页的设计,可以有针对性的对这些内容作一些调整,可以得出一些可以借鉴的东西……

  从网页的布局形式上来看
  按照平面设计的形式来看,整个页面可以分为几个部分,每个部分有不同的功能,也能体现不同的形式,具体看来就是上边、左边、下边、右边、中间、看似无奇,自身却有许多独特的地方,就说划分的大小吧!中间的部分一般是最大的,因为它承载着主要的信息,使用者主要就是看中间这个部分的内容,有些网站也为了出新意把整个页面进行任意划分,特别是个人网页,例如把整个页面平分为左右两个部分,但是这样会让人不着重点,还有的框架用得太多,影响了页面的整体性……

  综合起来看
  内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,以为只要能够把具体内容清晰流畅的放到网站上就行了,造成整个页面的形式感很差,这样严重影响使用者的心情……

时间: 2024-12-05 06:12:55

网页的排版与布局的相关文章

网页的版式设计---网页的排版与布局

网页的版式设计---网页的排版与布局 很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver.flash.firework.photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快. 今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现.我想强调的是关于网页排版布局方面的必要的知识,很多初学者都忽视这方面,以为技术就能代表一切,能够知道怎么用这个做网页的工具就能够

Dreamweaver 4 简明教程(七、网页的排版4)

dreamweaver|教程|网页 七.网页的排版 新增的排版功能 前面之所以以将图层与表格互换的功能一笔带过,是因为在DW4,推出了一个新的Layout排版功能,能够更加直接方便地对页面布局进行编排.在对象面板的最下方有四个按钮: 标准视图(Standard View):默认状态下的视图: 排版视图(Layout View):转入排版视图,就是这次要介绍的功能: 按下 按钮后,上面的Layout的两个按钮就可以使用了: 表格排版(LayOut Table):象画图一样在页面里面排版表格: 单元

做网页,用DIV布局好还是table布局好?

网页布局 做网页,用DIV布局好?还是table布局好??请问他们的优缺点各是什么呢?div相对table布局来说,调试起来要麻烦多了.因为要考虑各种浏览器下的css支持标准兼容性. 实际上,布局时根据需要来决定,倾向于table表示数据,div用来布局. div,table都是HTML标签,怎么用,只要表达给网站浏览者信息就足够了,如何组织信息是设计者的问题. 表格代码冗长,维护麻烦,如今推行WEB标准,用丰富的标签设置更灵活,维护也更方便,当然包括TABLE和DIV. 如今DIV的滥用程度似

Dreamweaver 4 简明教程(七、网页的排版2)

dreamweaver|教程|网页 七.网页的排版 表格的使用之二 根据上面对表格和单元格的参数,我们可以做出以下的表格: 以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并:单元格边距.单元格间距.表格线宽度都为10:表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色: 在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是: 宽度为0的边框线,在编辑状态下会以虚线表示,而实际的浏览效果为:

Dreamweaver 4 简明教程(七、网页的排版)

dreamweaver|教程|网页 七.网页的排版 表格的使用 表格是网页的一个非常重要元素,因为HTML本身并没有提供更多的排版手段,我们往往就要借助表格实现网页的精细排版.可以说表格的是网页制作中最为重要的一个技巧,表格运用得好坏,直接反映了了网页设计师的水平. 点击对象面板的 ,看到如下的对话框: ① Rows:表格的行数:Columns:表格的列数: ② Width:表格的宽度,单位可以是Pixels(像数)或Percent(百分比).按像素定义的表格大小是固定的,而按百分比定义的表格,

网页设计时CSS布局调试的有效方法

网页设计中CSS布局是很重要的部分,下面介绍几种检查调试CSS布局的有效方法. 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否书写正确 检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误. 3. 用删除法确定错误发生的位置 如果错误影响了整体布局,则可以逐个删除di

网页设计中排版与布局基础

设计|网页|网页设计 有些人始终认为,网页最主要是内容,不需要再搞些门面上的东西,还拿出MUD来比喻.可是,红花还需要绿叶陪衬.想想,若MUD不只是单纯的文本,还有画面出来,那么,它所吸引的何止现在的这些MUD迷呢?那么,我所要说的到底是什么呢?初学者如果能够了解一些设计上的东西,那么,自己的页面不会显得乱,自己看了也开心,别人看了也开心,何乐而不为呢? 我们的主页,说到底,只是一个800*600的画面,那么,我们要怎么对它进行安排才合理呢?首先,也是最重要的一点,就是先停下创作,先想好一个主题

网页设计中排版与布局小基础

设计|网页|网页设计 有些人始终认为,网页最主要是内容,不需要再搞些门面上的东西,还拿出MUD来比 喻.可是,红花还需要绿叶陪衬.想想,若MUD不只是单纯的文本,还有画面出来, 那么,它所吸引的何止现在的这些MUD迷呢? 那么,我所要说的到底是什么呢?初学者如果能够了解一些设计上的东西,那么, 自己的页面不会显得乱,自己看了也开心,别人看了也开心,何乐而不为呢? 我们的主页,说到底,只是一个800*600的画面,那么,我们要怎么对它进行安排 才合理呢? 首先,也是最重要的一点,就是先停下创作,先

四点网页版面设计(布局设计)的方法和技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站版面设计也可以理解为布局设计,版面就是在浏览器上显示的一个完整的页面,它是网站设计的重要内容.网站与用户的交互就是通过一个个页面来实现的,每个页面通常都包含了文字.表格.图像.动画.链接等诸多要素. 从表面上看,网页版面设计是一种关于排版的学问,而实际上,它不仅是一种技能,更是技术与艺术的高度统一. 网页版面设计的方法和技巧主要有以下几点