菜单

网页无图再不是指望

2019年2月12日 - JavaScript

网页无图再不是梦想

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

初稿出处: 百码山庄   

直接以来,网页开发对优化方面做的做事尚未休止。网页无图也是为着减少页面资源请求而提议的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们曾经收获了不朽的形成:从一伊始零星的小图标资源,到后来小图标合并成一个图纸出现Pepsi-Cola图,再到新兴Webfont的出现不仅可以代表Coca Cola图,而且彻底化解了图标管理难,变色完结麻烦的难题。今日我要跟我们介绍一个小工具,也是足以扶助达成网页无图这一终极目标。理论上来讲,它能够将其它一张图纸转换成一个不带图片,不带背景图的洁净的html标签。可是那有前提:你的电脑得有丰硕的资源去协理。

 Liya – 2015年8月31日

缘起

那是一个工作日的清早,我向过去同一准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你大概不倚重是用CSS制作出来的事物》的作品,出于职业敏感,也是因为好奇我就点进入看了一看,发现其间有一个很有趣的创作:http://codepen.io/HugoGiraudel/full/gpcwa/,它然而用一个div标签就形成了那幅文章,于是大家多少个同事好奇使然,开头分析它的落到实处,逐步有了上面即将介绍的工具的黑影。


渐入宗旨

既然可以应用一个标签制作出一副非凡的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不可以回复的是图表的精细度难题。但是,如若可以精细到每一种像素点,那么高精度的还原整张图也完全可行,只是那自然消耗非常多的电脑资源。这一设想便是催生这几个小工具的催化剂,于是我便开端盘算起来。

当女神潘潘导师问我是还是不是了然网页设计中的栅格系统,为啥要选拔栅格系统时,脑中能想到的唯有,“听从栅格使网页看起来整齐规范”,“方便重构”,“有利于响应式布局”。。。其实对栅格系统只是挂一漏万,并从未系统深远的驾驭,于是做了些功课,整理出那篇文章,希望能给新接触网页设计的伴儿们一点参考。

案例解析

manbetx2.0手机版,通过应用开发者工具分析以上案例的源码,我发现实际它的贯彻并简单。大家精通在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这些本性可以同时设置任意三个不等颜色和扩散度的阴影块,而案例正是完美的表明了那几个新属性。

既是,那么大家以后来做个考试,大家在任一一张图上覆盖上一个个分寸一样的小方格子,大家就能够将其他一张图纸分隔成一个个的小方格,我们只要明白这么些小方格的分寸、顺序和职位,我们就足以组合那张图纸,如下比较图所示:

manbetx2.0手机版 1

只是,有个难点:box-shadow的引用颜色是单色的,而各种盒子范围内的图画是扑朔迷离的,我们怎样去处理那些难点?

因为box-shadow只好设置颜色,所以那个难题的结果唯有一个,找出一个能代表这些格子的颜色,那么选用哪一个颜色值就一视同仁了,可以选格子四角的随机一个、可选大旨点,可选格子内的任意一个点,我接纳的是格子的左上角这一个点。大家不难窥见,如若我们尽量的减少格子,小到只剩余一个像素大小,大家就可以完全的死灰复燃一张图纸了。

栅格系统的朝秦暮楚

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

技巧完结

首先,大家着想怎么样依照图片去取到各个格子的颜色值?那个标题并简单,HTML5为大家提供了Canvas标签,而因此Canvas大家可以使用getImageData方法取得到画布中任一一个点的颜色音信以及透明度新闻。

接下来,大家来考虑怎么着设计我们的小工具。第一步,依据分歧的图形或者会适合差别的格子大小,所以我会保留一个size选项用于安装盒子的轻重缓急;第二步,格子与格子之间是不是保留间隙,可能依照用户习惯会有例外,所以我提供space选项来设置间隙大小;第三步,格子实际就是一个盒子的内部一个黑影,而阴影的形状是可以依照盒子本人爆发变化的,所以我提供radius属性来布局格子圆角大小;最终,既然我们获取的将是一个html标签,那么标签是足以涵盖各天性能的(比如:id、class等),所以本人提供一个attrs属性(一个json对象),来安装生成的html成分的品质。好了,万事俱备,只欠代码完毕了!

末段,大家梳理逻辑,封装代码,达成了最基础的本子。效果如下演示:

manbetx2.0手机版 2

为了便利大家看到更诚实的作用,那里给大家提供在线DEMO

栅格系统的规律

栅格系统可以按栅格数分为12列,16列,24列等,可以无限制设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表一个栅格单元的增幅,a代表一个栅格的增幅,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
评论

manbetx2.0手机版 3

经典960栅格

设计师们偏爱用苹果系统做规划,苹果下浏览器的暗中认同宽度为960px, 在 1024 x
768 的分辨率下,我们再打开Firefox,自然状态下,Firefox窗体的大小约为 974
x 650. 减掉左右两边7px的边框,网页的实际上尺寸为上图中的赤褐部分,高宽为
960 x 650.有趣的960就这么出现了。960只是个标志,并不是标准数。

上边列举的都是巨型门户网站,它们的首页宽度为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。

应用栅格系统的优势

对此设计师来说,栅格系统更多的是一种布局考虑,可以更有逻辑地开展规划工作。灵活地利用栅格系统,不仅可以让总体网站相继页面的布局保持一致,让网页的信息彰显更为雅观易读,让规划稿有更好的社团,更可以透过匹配不相同组合,做出过多精美和极度的排版设计。使用网格系统,可以使网页设计给用户正式感和规范感,还享有一种结构鲜明的设计感,升高用户体验。网格系统不意味着循序渐进,一味依据网格线来举行布局。网格系统的含义在于更灵活的提携设计师有序布局,而不是限量设计师的规划。

对以前端开发人员来说,栅格系统的运用,给整个网站的页面结构定义了一个规范,大大进步了网页的规范性。在栅格系统下,页面中享有组件的尺码都以有规律的可选拔的,那对于大型网站的支付和珍视的话,能省掉不少股本。

乘势响应式设计的风靡,栅格系统开始被予以新的意义,那就是,一种响应式设计的兑现格局。响应式的要义是为同一个页面设计各种布局形态,分别适配差别屏幕尺寸的装备。

可以见见,一个页面可以拆分成两个区块来了然,而正是那一个区块共同组成了这些页面的布局。根据不相同的显示器尺寸情形,调整这个区块的排版,就可以完结响应式设计。而借助于栅格系统,设计与前端开发人士可以很简单的宏图和创办响应式的页面布局。

栅格系统是一种格式化的设计工具,使用栅格系统是一种好的习惯,设计师可以更小心于内容呈递,更小心于强调根本。当然,规矩是用来打破的,当大家驾驭了布局的见解,领会了栅格的手腕之后,也无需拘泥于栅格的样式,可以对其“革命”,举行革新。

资源干货

对于新手来说,使用栅格系统有一定的资金,要求数学基础,懂比例,会推测,但今天网络上已经有诸多援救设计栅格系统的工具和模版,可以即拿即用。那里介绍几个常用工具。

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地图