网页页面布局带来稳定性和结构性:网格布局

网格可以给网页布局具备稳定的结构,给设计师提供一个建站用的合理模板。

纵观当下一些采用了顶尖设计的大网站,我们会发现他们很有可能运用了一些网格布局。网格可以给网页页面布局带来稳定性和结构性,给设计师提供了一个可在此基础上搭建网站的便利模板。

网格个不意味着你就必须把作品设计的很无趣。一位好的设计师会应用网格布局的基本规则,并知道如何恰当的打破这些规则。

“网格系统是起辅助作用,不是起担保作用。它有许多用途,每个设计师都可以找到一个适合个人风格的运用方式。不过我们先需要学会如何使用网格;网格设计是一门需要大量练习的艺术。”、

——约瑟夫·米勒-布鲁克曼

网格基础知识

先让我们了解一些网格的术语。网格是一种布局划分,它使用横向和纵向引导线将边白(margin),空格和纵列包含进来,从而提供一个内容布局的框架。

网格一般是在出版行业才能看到,不过它也非常适用于网页设计。网格也不是一定是要你把网站搞的像个报纸的布局,但是它确实可以帮你制作出一个可以在此基础上做设计的统一结构。

网格只是一个辅助设计的的工具,而绝不应该成为限制你设计创造性的障碍。

理解并遵循规则

当你开始学习任何特定新技能时,你都应该遵循对应的准则。刚开始学习基础可以确保你能有效的运用这些基本原理。

刚开始网格间的区别不大,你应该按照网格,让所有的设计元素对齐,并放置到位。在你的设计中使用网格可以给你的内容带来结构性。也给你提供了一个起步的地方,但是它绝不应该扼杀你的创造性。

当下有两种创建网格模板的办法。

自己制作一个网格模板

目前有许多不同的理论可以可以帮你设置好你自己的网格,你的选择权无穷无尽,但是最终,你应该改选择一个最适合你手头项目的网格模板来。

你可以将一个空白文档进行分割,创建出偶数或奇数栏来。通常把中缝(栏与栏之间的空白)考虑进你的网格系统会很有帮助的。

你的网格可以很复杂,可以很简单,随你喜欢。你的网格布局越复杂越精巧,网格系统的自由度就越大。而它越简单的话,理解起来就越方便。选择权在你。

下面是几个用PhotoShop参考线(视图>新参考线)创建的网格范例。

下载一个现成的网格模板

现在网络上有许多可以帮助你做网页开发的标准网格模板,它可以帮你省下自己亲自动手所要耗费的时间。

目前最流行的一个网格系统当属960网格系统,这套网格系统由 Nathan Smith制作,你可以选择12栏,16栏或者24栏的网格布局。

这个项目的诞生纯粹是Smith“手痒”,忍不住。

“我发现我过去一年只是因为受到吸引才分享出这套网格布局。如果其他人从中受益,那就在好不过。”Smith这样评论他的960 网格系统。

下载的文件包中包含针对CSS,HTML,Photoshop,Illustrator,Indesign的文件。设计文件包含了若干网格,它对你制作一个结构化的简洁网站非常有帮助。

时间: 2024-11-18 10:19:07

网页页面布局带来稳定性和结构性:网格布局的相关文章

CSS网格布局:制作网页图片幻灯图库特效

文章简介:这里我们指导您使用网格布局来创建一个图片游览库的灯箱效果.我们使用网格布局组织页面的内容,和用媒体查询来优化布局,用于横屏竖屏都能查看.在竖屏中,浏览器高度大于其宽度,在横屏中,浏览器宽度大于其高度. 毫无疑问,当开发人员谈到网页布局时会有很多选择.为了确保你的布局可以适应不同设备.方向和屏幕大小,你需要慎重考虑清楚,你要使用哪些方法来布局.网格布局是一个新的布局方法,使你可以把网页的主要区域在游览器窗口内设置一个固定大小或者自由空间,你也可以两个同时使用. 因为网格布局使用您能够根据

《响应式Web设计实践》一2.3 网格布局

2.3 网格布局 响应式Web设计实践 早在Web出现前的数十年,在设计中使用网格就已经是一种异常流行的做法了,因为网格有助于实现站点的平衡.间距以及组织结构.一个实现良好的网格系统会使你的站点井井有条,同时还可以提高页面的可读性和可浏览性. 注意 关于网格的更多信息,可以参阅Khoi Vinh的书籍,或者找一份Mark Boulton的系列视频来看. 在<"Ordering Disorder: Grid Principles for Web Design"(秩序之美:网页中的网

网页标准学习之详细讲解CSS网页页面布局

css|标准|网页|页面 用CSS 来布局很容易.如果你已经习惯用表格布局的话,起先会感觉比较困难.其实不难,只不过动机不同,并且在实践中更有意义. 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块.你可以绝对或相对地用彼块取代此块. 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定). static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般. relativ

DIV+CSS布局网页页面实现多风格选择的方法

css|网页|页面 1. styleswitcher.js function setActiveStyleSheet(title) {var i, a, main;for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("

CSS3网格布局模块:网格布局实现网页布局

文章简介:CSS3网格布局模块的一个任务是帮助我们处理非常简单和清晰的任何web-imposer(不仅),很有可能是一个内容块在一个虚拟的网络位置. 前言 在我看来,CSS3模块家族中,CSS3网格布局模块是最有趣的一个.W3C官网自发布草案到今天不到一年时间.有一点必须注意,早在2007年 宣布的WD版本中,有些名称和语法有一些变化,但是他们具有相同的本质.今天模块正在前速向前,在IE10中已经初步实现,希望新的特性在将来能得到支持以及其他流行浏览器也将支持这个模块. 为什么我们需要网格布局?

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery

在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起.Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列 两列(使用ui-grid-a类) 三列(使用ui-grid-b类) 四列(使用ui-grid-c类) 五列(使用ui-grid-d类) 网格是100%的宽度,完全看不见的(没有边界或背景)和没有ma

CSS3 Grid布局:CSS3网格布局让内容优先

文章简介:使用CSS3 Grid布局实现内容优先. 浏览器支持许多CSS3的模块,帮助我们解决我们习惯于使用图片的CSS效果.崛起的移动浏览器和响应式网页设计概念给了我们一个全新的方式来来看待Web设计.然而,当它们来临的时候,我们的布局还没有跟上.我们已经讨论了多年的源顺序.内容也结构和内容与样式的分离.然而,为了得到一定的视觉布局,我们大多数不得不决定源秩序. 目前,W3C在制作一些一趣的规范,虽然这些规范会不断的变化,但他们总是在一个起跑线上变动.在这篇文章中,我将向大家介绍CSS的一个模

26个精彩的网格布局网站欣赏

  现在大量网页设计基于网格布局.虽说人们通常注意不到它,但杂乱无章的布局时代确实已经过去了,现在是整齐结构化的天下.无论从理论.美学和整齐来说,这样的布局都很好平衡.网格结构是所有现代网站的基础,它总能给最终用户完美无暇的设计. 尽管通常网格设计仅仅是在规定的间隔下用没有任何多余修饰的水平线和垂直线的交叉,但很多设计师们也会用一些明显突出的几何图形来修饰网格.通常我们会在展示类.博客和新闻相关的网站看到清晰的网格,但有时也有一些个人网站或其他创意网站通过巧妙的处理网格吸引用户目光.不奇怪,它除

CSS3让网页更富于表现和支持更复杂布局

文章简介:CSS3 Region:基于HTML和CSS3的富页面布局. 译自:CSS3 regions: Rich page layout with HTML and CSS3中文:CSS3 Region:基于HTML和CSS3的富页面布局请尊重版权,转载请注明来源,多谢! 互联网已经成为一个提供参考.教材.新闻.文章和交互应用的大宝库了.然而,当为印刷设计内容时,一些功能显然仍然不可能或者很难使用Web标准来实现. 印刷出版物正在探索更好的方法来转换或者改变他们的内容以适应富数字格式.我们也看