郑州网站建设网页设计在本质上就是一个进化的原则和理论创造的演化过程中打印。设计行业带来了很多的技术网络,但是一些花的时间掌握在一个虚拟环境。不幸的是,我们没有一个单一的平台为我们的内容出现在;我们必须战斗与多个浏览器,操作系统,屏幕尺寸。

随着网络的发展,所以我们观察到的设计原则。基于网格的设计有玫瑰近年来,即把他们的网站设计者可以根据一个圆柱状的网格。网格系统是一个非常受欢迎的方法来组织和排列元素,并添加到一个页面,一般命令通过应用比例和平衡。

把我们的知识的使用比例和平衡,你可以采用另一个印刷设计原则:基线网格。

郑州网站建设-什么是基线网格吗?

基线网格技术用于更好的你的基于web的排版。从本质上讲,它使你所有的文本垂直网格,每个字母的底部被放置到电网,就像写在横格纸。最终的结果是一个身体的文字完美的组织,一个潜意识的识别的平衡��调和。

就像我以前说的,印刷是一个静态的介质。设计一个打印格式允许您指定什么你所有的观众将会看到。然而,由于你的设计可替代平台web上的解释,你的CSS将不可避免地呈现你的行高,和其他印刷上的值,对于不同的用户有不同的。对于很多设计师,这原来只是猜测和预测最终用户将看到。

基线网格在打印

许多印刷设计师使用基线网格结合自己的设计套件,无论是排版软件名称或其他。网格在打印一直追溯到1200年代早期,不受限制的只是网页设计。事实上,从网格的黄金比例(即大多数数学理论)是共享在生活的其他方面,最明显的是架构。

网格可以把所有的设计元素——类型字符,摄影,绘画和色彩——变成一个正式的关系,彼此;也就是说,网格系统是一种手段,引入秩序设计。一个故意设计组成一个更清晰,更整齐的排列和更成功的效果比随机广告放在一起。-约瑟夫·穆勒布罗克曼

郑州网站建设-创建一个基线网格

现在,让我们看看我们如何创建我们的基线网格。

首先,我们需要定义一个行高为基线网格基于比率与我们的字体大小,对于这个示例,1:1 5是一个很好的数量,提供我们一个慷慨的50%领先。如果我们有一个文本大小12 px,行高(使用这个1:1 5比)将18 px。150%是一个不错的数量,给我们提供了一个设计,将很容易阅读,但是这个值可以不同。然而,你应该尽量约130%的范围-160%当考虑行高。

在我们继续之前,你应该知道如何CSS属性实际上作品行高。行高的是整体的、集体的高度行文本,而不是文本本身。它通过添加填充上面和下面的文本空间出来。如果我们真的需要一些文本和把它放在一个统治的背景,我们会看到文本定位在字里行间,��一定在他们。

到CSS

为了使事情简单,我们假设我们的文本有一个基地大小为10 px。坚持我们的粗糙的比率,这意味着我们的行高将15 px,虽然我们可以改变这个。(做一个边注,10 px是相当小的,我不一定会推荐它在大多数情况下,但我在这里用它纯粹是为了使他们更容易在数学系)。为了使各种元素融入我们的基线网格系统,我们需要设置在我们的CSS。

在我们继续下去之前,虽然,这些示例假设您使用的是某种CSS重置。如果你没有,那么默认的利润率可能会妨碍我们的工作今天做。

段落

开始做事了,一旦我们设置行高,我们需要配��一致的保证金在每个标题和段落。因为我们正在与一个15像素网格这里,我们踢做事了覆盖标准的底部边缘的一个段落标记(默认情况下,这是1 em,在这种情况下将10 px)来同我们的行高在文本。这将创建一个空行每一段下成比例,等于身高如果文本在那里居住。

头

相似,因为标题,我们只是需要继续遵守增量15像素。通过简单的标签在我们的保证金一边150%行高,我们创建一个类似的、一致的打破。

我走之前任何进一步的,我想说的是你的文字可能不总是实际上坐在线,如果你申请一个你的背景。不要担心,只要线高度是一样的。如果你的文本漂浮在中间的线,你可以很容易地玩耍和你的利润,但这不是必要的。

郑州网站建设-列表

接下来,我们如何处理列表吗?首先,我们要运用我们的标准保证金以同样的方式,我们做我们的段落。这给了一个水平的一致性与内容。

这是开始变得容易了!如果你仍然有一个行高15像素定义在其他地方,你的列表将会适应得很好与其他内容。

图像

图片是在它开始变得有点困难。最好是,我们要有相同的一致性在我们的利润率,因此图像都是以同样的方式对待的仿佛一块文本。它意味着,你的图片需要大小的倍数你行高价值,在这种情况下,15。

在我的例子中,我将向右浮动的形象,所以我有一个15像素边缘应用到左边和底部。与我们现有的保证金在段落,这给了我们一个一致的保证金等于我们余下的基线网格。

当然,这些并不是唯一的因素,我们需要修改以符合我们的新基线网格。关键是要确保你的工作在一个一致的增量,所以一切都是狭隘的,相同的网格。这可以导致和谐和平衡变得明显在你的网页在使用大量丰富的文本。

我们的示例

这是我们完成的例子,一个简单的网页标题、段落、特色一个图像和一个列表。如果你想走出你的尺子,你可以,但我可以向你保证,一切遵循一致的网格,建立从我们的排版。

我们只是刚刚打破了表面使用基线网格。它可以变得更为困难当你开始试图将它们应用到更复杂的设计,最终导致一些在网络上使用。然而,它是可能的,并且会导致平衡,比例设计,可以导致更好的用户体验。

郑州网站建设-结论

基线网格是一个伟大的方式和比例的增加一些平衡你的排版。这是其中的一个微妙的实现,可以添加到您的设计中一些自然的感觉。对于基线网格,我们的排版变得符合标准化的间隔给它,和谐的感觉。

然而,不幸的是,我们仍然要对抗这种威胁的浏览器不兼容的问题,可以使我们的CSS呈现不同的方式为不同的用户当他们浏览在交替的浏览器、操作系统或设备。这是一个任务,似乎不像它在它的出路,尽管添加一个基线网格并提供其他优点。例如,这种类型的网格系统可以帮助极大,因此,当缩放和强迫浏览器重新呈现它的CSS。基线网格提供更多的灵活性和鼓励为浏览器正确地做事。

这是一个比平时短文章,但那是因为基线网格没有很多解释关于或展示如何使用。真正的魔力来自当设计师调整和测试,以确保他的基线网格作品,高于一切,使设计吸引人的视觉效果(更)。另一种旋转的事情,阅读一个列表分开的文章在这个敏感话题。直到下一次,快乐的设计!

上一篇网页设计应该掌握的分割布局

下一篇郑州网站建设中光影特效运用技巧