仓酷云

标题: 来看看：网页重构:由网页图标处置激发的思索 [打印本页]

作者: 萌萌妈妈 时间: 2015-1-15 23:31
标题: 来看看：网页重构:由网页图标处置激发的思索
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
网页制造poluoluo文章简介：比来在处置Qzone黄钻图标更新时，想起近期对营业图标举行优化所碰到的一些成绩，把思路拾掇起来和人人一共切磋，接待多方声响。
比来在处置Qzone黄钻图标更新时，想起近期对营业图标举行优化所碰到的一些成绩，把思路拾掇起来和人人一共切磋，接待多方声响。
在实践事情中，图标类的使用十分普遍，好像数组般的品级图标更显其特别性。上面要配合切磋的两个偏向，以甚么体例完成及怎样更幸亏切近项目实践更好地完成并供给用。
假定：营业的用户品级共有10个，加上巨细2种视觉尺寸的图标，另有“过时未续用度户”的体现，共有38个图标必要进库供挪用（以下图）。

在项目标CSS框架研发中，会有几个key作为思索：哀求数、代码量、兼容性、图片文件巨细、是不是可并为组件模块且便利逻辑性完成。

浩瀚分歧品级的图标在分歧体例的普遍使用时，是不是会发生过量的文件哀求；
品级图标的代码在完成上是不是会利用过量的代码，且页面上实在使用的只是大批代码，从而形成代码痴肥；
(x)html+css输入的图标使用到页面中，是不是和页面上别的元素兼容，不然将为到达兼容方针而增添一系列代码；
假如各图标兼并后，衡量项目使用的实践情形，图像文件是不是会过年夜而损耗带宽；
图标的HTML流动，className定名中的某个数字命为作为变量，经由过程修正变量来到达体现效果。

回忆之前的呈现的处置体例，能够回总为三种：

远景图的拔出
这应是最原始的处置体例了，将浩瀚单个品级的图片有序定名寄存到一个目次，由前端页面使用，经由过程修正文件名的体例改换分歧的品级显现。在实践的用户列表页面中，由于分歧的用户通属分歧的品级，那末，就会显现不贩品级图标，如下面假定，就会同时发生38个哀求。且在项目标保护上，极易存在瓶颈。假定依据需目必要对图标文件改换寄存目次或变动其尺寸巨细，那末必要年夜面积对一切使用过的开辟template文件排查处置（变动URL，宽高界说，文件名等），良多情形难以维系在可控局限。
通明图+背景的完成
这是Qzone项目中利用最多的一种体例，在项目标会见速率体验优化及图标实践使用中起到不成消逝的感化，该体例前期也连续为国际外别的网站利用。其详细完成体例是，保留一张1*1像素的通明图片，并将其设置长工夫cache，因其display属性的特别性，图片在页面结构上轻车熟路，且办理了多哀求的成绩，同时办理图片兼并地区扩大保护的成绩。可是，一旦在客户端cache文件行列中被挤失落，cache失利，该体例简单让这张通明的远景替位图发生大水式的哀求，形成服务器压力和年夜流量。且，外表上看，能够节俭文件的哀求，但现实上，它除会招致大批的有效哀求外，还会向日给apache不休写进毛病的log，形成过年夜的服务端压力，同时，在非IE扫瞄器（如firefox)也会体现有缺省图像的红叉。
内容标签+背景
这里说的是带笔墨等外容的标签到场黄钻品级图标背景来完成，如我是黄钻7级用户，给span的右边界说一个图标，把笔墨向右挪动必定的地位。年夜伙在理论中考证，这类在语义上和完成上，能够说是完善的了。可是，不便利项目代码的计划和办理，出格像品级图片这类的能够回进库的代码及使用体例。同时，题目的巨细地区为不成控，在后续的保护中，更会不按期变动其地区巨细，那末，就在图片的兼并上存在瓶颈，难以断定一个图片该预留多年夜的通明地区，使之不影响到别的场景的图片使用，也大概会由于前期的保护处置不妥，影响到别的标签地区的背景显现非常，形成不良的用户体验。
标签载体+背景
分离前几点所述，用一个标签作为图片的载体，再给它界说背景等属性，显现出响应的图标。它既能够免去用图片处置发生的流量和哀求及服务器压力，又减往兼并图片时所思索的预留空间尺寸。一样平常标签不具img的特别属性，既能成块状显现出图标，又能和笔墨等共处一行内，那末在拔取的这个标签要在款式上界说得较少，不容易承继款式影响体现，损坏页面的兼容和库文件的办理保护。
在实践项目中，选用了strong作为图标的替换标签：

回忆完各类处置体例后，一同来懂得一下完成上的细节，剖析一下文章第一张图所示，共有38个图标，且都是图形化，原始设法是，把38个图兼并成一个文件。但仔细看，这38个图片，有很多多少的不异的图形，经由收拾后，失掉上面这张图：

除四个图标载体外，数字都是不异的，由于这里利用的是第四种处置体例，那末在图标的兼并上，不必给各小图片块预留过量的通明地区。
雪碧图处置好今后，就能够动手写代码来完成效果了。
<strongclass="gb_vip_1">lv1
<strongclass="gb_vip_2">lv2
为了让标签具有img的特有属性，给strong界说display:-moz-inline-stack;display:inline-block;
因各扫瞄器兼容性的缘故原由，必要界说了两个属性，这里不由必定要问了，为何不选用-moz-inline-box呢？这里选用-moz-inline-stack而非-moz-inline-box的缘故原由是：

利用-moz-inline-stack能够办理Firefox2不撑持inline-block的成绩，可是一切的Firefox版本关于属性为-moz-inline-stack的Element，它的Firstchildelement会承继该Element的宽度和高度，可是再下一级的Element不会再承继该属性。
这里说说一下与本图标使用有关的话题，在实践使用中-moz-inline-box会存在元素间的对齐等成绩，在处置自顺应宽的<button>就可以碰到。固然Firefox有一个公有属性-moz-box-align来匡助办理Element程度对齐成绩，但未能预感的成绩仍旧很多，而绝对来讲-moz-inline-stack的体现更像inline-block，这点能够在Firefox3中考证出来。仅管云云，-moz-inline-stack利用时也会有一个bug，假如一个moz-inline-stack的Element外层Element是inline属性就会使Firefox中其包括的链接不成点(和IE6的filter+position:absolute呈现的BUG一样），这个能够借助position:relative;来办理。

设置完display属性后，我们就给图标界说宽高。实践的图标处置中，完成这两步基础就OK了。可是这个图标使用较为特别，由于它是两个背景分解一个图标的（载体+品级数），以下图：

上面是两个载体的拼合表示：

以是在布局上加多了两个span，一个是给品级数字的背景载体，另外一个是埋没图标交换笔墨。
代码写完后，发明代码量相称的惊人，由于只在最外层界说分歧的className，那末，就意味着，我们要对浩瀚个类及其内里的题目界说：
.gb_vip_1span,
.gb_vip_2span,
.gb_vip_3span,
.gb_vip_4span,
.gb_vip_5span,
.gb_vip_6span,
.gb_vip_7span

如许代码就相称痴肥，因而，改动className的界说体例，给各个品级图标最外层容器界说不异的定名，给内里数字的载体界说区分显现的定名(带数字的定名是便利逻辑完成)：
<strongclass="gb_vip_icon"><spanclass="lv1"><spanclass="gb_vip_none">lv1
<strongclass="gb_vip_icon"><spanclass="lv2"><spanclass="gb_vip_none">lv2
以上所述的供会商和参考，期盼年夜伙一些别的的设法和分享。

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

作者: 小妖女 时间: 2015-1-16 18:52
标题: 来看看：网页重构:由网页图标处置激发的思索
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 不帅 时间: 2015-1-18 21:48
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 飘灵儿 时间: 2015-1-27 21:36
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 小女巫 时间: 2015-2-5 15:30
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 第二个灵魂 时间: 2015-2-12 19:00
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 愤怒的大鸟 时间: 2015-3-3 08:11
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 蒙在股里 时间: 2015-3-11 10:17
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 只想知道 时间: 2015-3-18 12:29
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 再现理想 时间: 2015-3-26 02:44
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

欢迎光临仓酷云 (http://www.ckuyun.com/)