菜单

网页无图再不是希望

2019年2月14日 - Html/Html5

网页无图再不是指望

2015/08/22 · HTML5 · 1
评论
·
网页开发

原文出处: 百码山庄   

直白以来,网页开发对优化方面做的办事并未休止。网页无图也是为着削减页面能源请求而提议的一种畅想。无可厚非在网页开发的历程中在网页无图方面大家早就拿到了彪炳史册的已毕:从一开端零星的小图标财富,到后来小图标合并成3个图形出现7-Up图,再到新兴Webfont的产出不仅可以取代7-Up图,而且彻底化解了图标管理难,变色达成麻烦的题材。明天自身要跟大家介绍1个小工具,也是足以扶助完结网页无图这一终极目的。理论上来讲,它可以将其余一张图纸转换成四个不带图片,不带背景图的干净的html标签。但是那有前提:你的处理器得有丰硕的能源去支持。

 Liya – 2015年8月31日

缘起

那是二个工作日的上午,小编向过去同等按时到来了工作岗位上,运营电脑,打开浏览器作者有时候发现了一篇名曰《20个你或者不相信是用CSS制作出来的东西》的稿子,出于职业敏感,也出于好奇作者就点进去看了一看,发现中间有二个很有意思的小说:http://codepen.io/HugoGiraudel/full/gpcwa/,它只是用一个div标签就完了了那幅作品,于是大家多少个同事好奇使然,开头分析它的落实,渐渐有了上边即将介绍的工具的阴影。


渐入大旨

既然如此可以选择2个标签制作出一副优良的像素图,那么是或不是就象征可以用2个标签还原任一一张图片?唯一无法回复的是图形的精细度难点。但是,就算得以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是那自然消耗非凡多的电脑财富。这一设想便是催生那几个小工具的催化剂,于是小编便初叶盘算起来。

当女神潘潘导师问作者是或不是精晓网页设计中的栅格系统,为啥要采纳栅格系统时,脑中能想到的只有,“听从栅格使网页看起来整齐规范”,“方便重构”,“有利于响应式布局”。。。其实对栅格系统只是一叶障目,并从未系统深远的敞亮,于是做了些功课,整理出那篇小说,希望能给新接触网页设计的伴儿们一点参考。

案例解析

经过应用开发者工具分析以上案例的源码,作者发觉实际它的落实并简单。我们明白在CSS3中新增了2个设置盒子阴影的box-shadow属性,而以此天性可以同时设置任意三个不等颜色和扩散度的阴影块,而案例正是完美的笺注了这些新属性。

既是,那么大家以往来做个试验,咱们在任一一张图上覆盖上2个个轻重缓急相同的小方格子,我们就足以将其余一张图纸分隔成二个个的小方格,我们如若精晓那几个小方格的分寸、顺序和地方,大家就足以结合那张图纸,如下相比较图所示:

图片 1

而是,有个难点:box-shadow的引用颜色是单色的,而各样盒子范围内的图画是扑朔迷离的,大家什么样去处理这一个难题?

因为box-shadow只能设置颜色,所以那几个标题的结果唯有1个,找出一个能表示这些格子的水彩,那么拔取哪2个颜色值就不分轩轾了,可以选格子四角的自由壹个、可选大旨点,可选格子内的自由3个点,作者采取的是格子的左上角这么些点。大家不难察觉,固然大家尽量的压缩格子,小到只剩下三个像素大小,大家就能够全体的还原一张图纸了。

栅格系统的形成

栅格系统(Grid
system)最早采纳在17世纪末的法兰西印刷业,出版业。维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。网页栅格系统是有平面栅格系统中升华而来,以规则的网格阵列来指导和正规网页中的版面布局以及音讯分布。

技能落成

先是,我们考虑怎么着依据图片去取到种种格子的颜色值?那几个题材并不难,HTML5为大家提供了Canvas标签,而透过Canvas大家得以采纳getImageData方法赢拿到画布中任一一个点的颜料新闻以及折射率音信。

下一场,我们来设想什么筹划大家的小工具。第一步,依据不相同的图纸可能会符合不一致的格子大小,所以笔者会保留二个size选项用于安装盒子的深浅;第二步,格子与格子之间是还是不是保留间隙,恐怕基于用户习惯会有两样,所以自个儿提供space选项来安装间隙大小;第三步,格子实际就是几个盒子的里边1个阴影,而阴影的形状是足以依照盒子本人暴发变化的,所以小编提供radius属性来布署格子圆角大小;最终,既然我们赢得的将是壹个html标签,那么标签是能够分包各样品质的(比如:id、class等),所以作者提供三个attrs属性(2个json对象),来安装生成的html成分的性质。好了,万事俱备,只欠代码完毕了!

说到底,大家梳理逻辑,封装代码,完毕了最基础的本子。效果如下演示:

图片 2

为了便于我们看看更实在的功力,那里给大家提供在线DEMO

栅格系统的法则

栅格系统可以按栅格数分为12列,16列,24列等,可以肆意设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表1个栅格单元的宽窄,a代表3个栅格的幅度,i为栅格与栅格之间的偏离,n为正整数,则有W=(a*n)+(n-1)*i,由于A=a+i,可得(A*n)-i=W。

                                 (A*n)-i = W

其一公式表述了网页的布局与网页背后栅格系统之间的关系。来察看经典的雅虎案例:

Yahoo的网站页面宽度为W=950px,每一个区块与区块的间隔为i=10px;如若利用方面的公式,可以推出A=40px,既Yahoo首页横向版式设计使用的栅格系统为:(40×n)-
10 =
W。只要保险多少个横向维度的一一区块的n值相加等于24,即可保险页面的幅度一定是950px,950px的肥瘦也恰恰就是当n=24的时候,W的大幅度值。

在栅格系统中,设计师依据要求指定不一样的版式大概私分区块改变A和i的值举办规划,那样,贰个栅格系统的使用就将来起先了。

基于12列的栅格划分

总结

从功用上来看,作者落成了图片到html成分的变换,可是或然毫无是最好的网页无图完成方案,因为工具转换出的HTML标签,设置了太多的阴影块,对浏览器的渲染并不友好,会对用户电脑硬件有一定的渴求,越发是块大小为1(即全体还原图片)的时候,转换进度卓殊缓慢,假如图片再大些,极有只怕导致用户浏览器崩溃,因而提出大家测试时慎用大图做测试。而且,转换后得到的html标签和体制字符串大小将有只怕远远超过图片本人的大大小小,所以笔者不得不说那是一种有效的技术方案,但未必是好的兑现方案。(然并卵)

1 赞 4 收藏 1
评论

图片 3

经典960栅格

设计师们偏爱用苹果系统做筹划,苹果下浏览器的暗中认同宽度为960px, 在 1024 x
768 的分辨率下,大家再打开Firefox,自然状态下,Firefox窗体的高低约为 974
x 650. 减掉左右两边7px的边框,网页的其实尺寸为上图中的桃红部分,高宽为
960 x 650.有趣的960就这么出现了。9五十八头是个记号,并不是标准数。

地点列举的都以大型门户网站,它们的首页宽度为950px/960px。除了微软的Live
Search。依据地方的简约解析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选取将页面宽度定为950px/960px。为啥要挑选这一个幅度呢?我们从数学开首:960足以分解为2的6次方乘以3和5,
那使得960方可划分成以下宽度的整数倍:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80,
96, 120, 160, 192, 240, 320, 480

共26种(26 = 7 * 2 * 2 – 2, 减去2是去掉1和960作者),大家标记为:

N(960) = N(2^6 * 3 * 5) = 26

据悉地点的算法,可以取得:

N(360) = N(2^3 \ 3^2 * 5) = 22*

N(480) = N(2^5 \ 3 * 5) = 22*

N(720) = N(2^4 \ 3^2 * 5) = 28*

N(750) = N(2 \ 3 * 5^3) = 14*

N(800) = N(2^5 \ 5^2) = 16*

N(960) = N(2^6 \ 3 * 5) = 26*

N(1000) = N(2^3 \ 5^3) = 14*

N(1024) = N(2^10) = 9

N(1440) = N(2^6 \ 3^2 * 5) = 34*

N(1920) = N(2^7 \ 3 * 5) = 30*

N越大,可组成的增进率值就越来越多。对栅格系统来说,这意味着越灵活。

此时此刻多数屏幕都支持 1024 x 768
及其以上分辨率。为了使得的利用屏幕宽度同时确保栅格的灵活度,可以观看960是那几个确切的。这样,在脚下主流显示屏下,960就变成网页栅格系统中的最佳宽度了,只怕不久的以往,将会流行1440。

应用栅格系统的优势

对于设计师来说,栅格系统越多的是一种布局考虑,可以更有逻辑地展开统筹工作。灵活地选拔栅格系统,不仅可以让所有网站相继页面的布局保持一致,让网页的信息呈现更为美丽易读,让规划稿有更好的协会,更可以透过匹配分歧组合,做出过多出色和特殊的排版设计。使用网格系统,可以使网页设计给用户正式感和规范感,还有所一种结构显著的设计感,进步用户体验。网格系统不意味着安份守己,一味根据网格线来开展布局。网格系统的含义在于更灵敏的扶持设计师有序布局,而不是限制设计师的布置性。

对在此之前端开发人士来说,栅格系统的行使,给整个网站的页面结构定义了一个正式,大大进步了网页的规范性。在栅格系统下,页面中所有组件的尺码都是有规律的可选择的,那对于大型网站的开支和保险的话,能省去不少本钱。

乘胜响应式设计的风行,栅格系统先河被赋予新的意义,那就是,一种响应式设计的落到实处格局。响应式的要点是为同二个页面设计二种布局形态,分别适配差距屏幕尺寸的配备。

可以观望,2个页面可以拆分成多少个区块来了然,而正是那么些区块共同组成了那么些页面的布局。按照不相同的屏幕尺寸情形,调整那一个区块的排版,就足以兑现响应式设计。而借助于栅格系统,设计与前端开发人员可以很不难的宏图和成立响应式的页面布局。

栅格系统是一种格式化的安顿性工具,使用栅格系统是一种好的习惯,设计师可以更小心于情节呈递,更专注于强调首要。当然,规矩是用来打破的,当大家通晓了布局的见地,精通了栅格的手法之后,也无需拘泥于栅格的格局,能够对其“革命”,举办翻新。

能源干货

对于新手来说,使用栅格系统有早晚的本钱,须求数学基础,懂比例,会臆想,但后天网络上已经有众多救助设计栅格系统的工具和模版,可以即拿即用。那里介绍几个常用工具。

960.GS

拔取960.GS应有是最简易的栅格方法,下载960栅格系统,地址http://960.gs/联合图层,置入网页文件,采纳混合方式叠加,并锁定,便得以依据其栅格设计网页。

GuideGuide

那一个是免费的好用PS外挂,输入数值就会自动画参考线。在筹划网页前先将参考线全体拉出来。至于怎么着设置和操作格局,网络上早已重重人写了,可以参见那里:PS
参考线插件GUIDEGUIDE下载及应用验证

WebZap

另一款PS外挂神器,可是要付钱,拥有强劲的布局爆发器,可只透过点击操作,在几分钟内做出网页原型。下载和演示地址:http://webzap.uiparade.com/

参考小说

网站网页栅格化

Grid的运用:ps外挂

网页的栅格系统规划

网页设计中的960栅格系统

Maintainable responsive
layouts

Using the 960 Grid System as a Design
Framework

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图