页面重构中的组件制作要点网页设计

页面重构中的组件制作要点网页设计（精选6篇）

篇1：页面重构中的组件制作要点网页设计

在写完前面“模块化”相关的文章后，感觉试图用“模块化”本身去讲什么是“模块化”真是不容易讲得清，相信大家都多多少少能理解什么是“模块化”，但是不容易说得清，也有不少同学反馈说缺少实例。现在的团队里在推“组件化”，做为“模块化”的一个应用方式，也许正好可以从另一个方面讲讲“模块化”的实现。

这里的“组件”跟“模块”并没有本质的区别，那为什么还要提一个新的名词呢？在《 页面重构中的模块化思维 》中提到了“模块化”的应用是十分广的，而且大家已经对它有了自己的理解，想要重新认识“模块化”是不太容易的，因此决定换一个名。“模块化”更多的讲一种思维，而这里的“组件化”更多的是讲一种实现。

一个组件效果的实现，需要的支持可能是不同的，组件强调的是“效果的完整”，要保证效果完整，就需要HTML、CSS、前端脚本甚至后台脚本等的配合。

简单列下做组件时需要注意的几点：

组件需要一个底层的运行环境。特别是对于CSS，就是常说的全站公共样式，包括reset。

确保同一组件在同一底层环境中的效果完整。

组件中的定义需要注意受组件外继承定义^{1的影响。}

在使用上面这些定义的时候，应该注意继承性对作用范围中标签的影响。同理，为了减少组件中被外层定义中的有继承性定义的影响，必要时须要在组件中reset。

在做一个组件之前，有几个问题需要先搞清楚，如：

是否需要静态化？

组件有多少种状态？

是否通过脚本程序实现状态的更改？

组件更新的频率？

这些问题对于组件如何实现更优起了很重要的作用。了解了基本的实现方式后，在制作组件所要考虑的方面，大概有下面这些：

效果的完整性（同一底层环境）

良好的性能

可移植、复用（同一底层环境）

易维护

易扩展

一个好用的组件，应该是充分考虑到上面这些点，并在它们间找到平衡。

我们来看一个例子：

首先，我们需要了解基本的实现环境：

是否需要静态化？（需要）

组件有多少种状态？（三种基本状态：正常、当前、已完成）

是否通过脚本程序实现状态的更改？（不使用）

组件更新的频率？（较低）

第一步第二步第三步第一步第二步第三步第一步第二步第三步

.flow_step{width:950px;height:25px;margin:20px auto 10px;padding:0;}.flow_step ol{margin:0;padding:0;}.flow_step li{float:left;padding:0px 15px 0px 0px;list-style.:decimal inside;background:url(step.png) #E6E6E6 no-repeat 100% -50px;color:#333333;font:700 14px/25px “宋体”;text-align:center;}

/* 当前步骤 */.flow_step li.current{background-color:#FF5500;color:#FFFFFF;}

/* 已完成步骤 */.flow_step li.done{background-position:100% 0px;background-color:#FFD98D;color:#FF6600;}

/* 已完成无当前步骤 */.flow_step li.done_none{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;}

/* 当前步骤的上一步 */.flow_step li.current_prev{background-position:100% -25px;background-color:#FFD98D;}

/* 最后一个步骤 */.flow_step li.last{background:none;background-color:#E6E6E6;}

/* 最后一个步骤为当前步骤 */.flow_step li.last_current{background:none;background-color:#ff5500;color:#FFFFFF;}.flow_step li.last_current_none{background:none;background-color:#FFD98D;color:#FF6600;}.flow_step .cols3 li{width:301px;}.flow_step .cols4 li{width:222px;}.flow_step .cols5 li{width:175px;}

完成效果见 Demo ，再看看它几个方面的分析：

效果的完整性，可移植、复用，良好的性能：没问题

易维护：较差。HTML维护量较大，每个状态需要一个新的HTML代码；样式的组合需要花点时间理解。

易扩展：较差。新增一个5步的导航，需要增加10个HTML代码片段；样式基本不需要更新。

较难做成程序模板，HTML代码量较大。

同一个效果，如果基本的实现环境有所改变，可能就需要一种新的作法：

是否需要静态化？（需要）

组件有多少种状态？（三种基本状态：正常、当前、已完成）

是否通过脚本程序实现状态的更改？（可使用CGI）

组件更新的频率？（有多种步骤，3~5步）

有多个步骤同在一个页面的情况

第一步第二步第三步

/* 组件页面流程图 */.flow_step{width:950px;height:25px;overflow:hidden;margin:20px auto 10px;padding:0;}.flow_step ol{width:110%;margin:0;padding:0;}.flow_step li{float:left;padding:0px 15px 0px 0px;list-style.:decimal inside;background:url(step.png) #e6e6e6 no-repeat 100% -50px;color:#333333;font:700 14px/25px “宋体”;text-align:center;}.flow_step .cols3 li{width:301px;}.flow_step .cols4 li{width:222px;}.flow_step .cols5 li{width:175px;}.flow_step .cols6 li{width:143px;}

/* 当前步骤效果 */.flow_step_no1 .step_1,.flow_step_no2 .step_2,.flow_step_no3 .step_3,.flow_step_no4 .step_4,.flow_step_no5 .step_5,.flow_step_no6 .step_6{background-position:100% -50px;background-color:#FF5500;color:#FFFFFF;}

/* 最后一步去箭头 */.cols3 .step_3,.cols4 .step_4,.cols5 .step_5,.cols6 .step_6{background-image:none;}

/* 当前步骤时前一步的效果 */.flow_step_no2 .step_1,.flow_step_no3 .step_2,.flow_step_no4 .step_3,.flow_step_no5 .step_4,.flow_step_no6 .step_5{background-position:100% -25px;background-color:#FFD98D;color:#FF6600;}

/* 前前步骤时除去前一步外已完成的效果 */.flow_step_no3 .step_1,.flow_step_no4 .step_1,.flow_step_no4 .step_2,.flow_step_no5 .step_1,.flow_step_no5 .step_2,.flow_step_no5 .step_3,.flow_step_no6 .step_1,.flow_step_no6 .step_2,.flow_step_no6 .step_3,.flow_step_no6 .step_4{background-position:100% 0;background-color:#FFD98D;color:#FF6600;}

/* 最后一步时的效果 */.flow_step_no3 .cols3 .step_3,.flow_step_no4 .cols4 .step_4,.flow_step_no5 .cols5 .step_5,.flow_step_no6 .cols6 .step_6{background-color:#ff5500;color:#ffffff;}

/* 已完成无当前步骤 */.flow_step_no1_n .step_1,.flow_step_no2_n .step_2,.flow_step_no3_n .step_3,.flow_step_no4_n .step_4,.flow_step_no5_n .step_5,.flow_step_no6_n .step_6{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;}.flow_step_no2_n .step_1,.flow_step_no3_n .step_2,.flow_step_no4_n .step_3,.flow_step_no5_n .step_4,.flow_step_no6_n .step_5{background-position:100% 0;}.flow_step_no3_n .cols3 .step_3,.flow_step_no4_n .cols4 .step_4,.flow_step_no5_n .cols5 .step_5,.flow_step_no6_n .cols6 .step_6{background-color:#FFD98D;color:#FF6600;}

完成效果见 Demo ，再看看它几个方面的分析：

效果的完整性，可移植、复用，良好的性能：没问题

易维护：一般。HTML维护简单，多个步骤、状态同在一个HTML；样式的维护点较多。

易扩展：一般。HTML扩展性较好；样式的扩展性一般，基本不需更新。

可较方便的制作为程序模板。

从上面的例子可以看出，同样的效果，不同的实现方式，它的可维护、可扩展等等特性是不大相同的，在CSS森林群里讨论这个图的实现时，还看到了上面两种之外的实现方式，像完全使用脚本将各个状态输出等。

近期对模块化实现方式的一点总结，欢迎讨论。

1常用有继承性的样式定义：

text-indent

text-align

layout-flow

writing-mode

line-break

white-space

word-wrap

list-style

list-style-image

list-style-position

list-style-type

font

font-style

font-variant

font-weight

font-size

line-height

font-family

color

text-transform

letter-spacing

word-spacing

本文来自：www.cssforest.org/blog/index.php?id=146

篇2：页面重构中的组件制作要点网页设计

“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？

什么是模块化？

对“模块化”的解释，在CNKI中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。

先看一下百度词条是怎么解释“ 模块化 ”的：

模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。

相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。

页面制作为什么需要模块化？

站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？

我们很容易就想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。

我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了一下：

提高代码重用率

提高开发效率、减少沟通成本

降低耦合

降低发布风险

减少Bug定位时间和Fix成本

提高页面容错

更好的实现快速迭代

更好的支持灰度发布

其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一，

如何实现“模块化”？

这里的主要问题是HTML与CSS的“模块化”，我们可以看下换肤的实现方法：

同一类名，换文件（JS）

同一文件，换类名（JS）

由此可知HTML与CSS的接口实现：

CSS引入的三种方式

类名

为了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都使用原类名后加“_n”，Tab的实现方式等等。有了这些约定、规则、规范后，HTML代码就很容易可以实现模板化，统一接口规范。

有两个误区需要先认清下：

模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）

模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）

完全独立的模块放在同一项目中，由于项目有自己的表现、交互统一性，所以各模块间必定出现类似的部分，这些部分可以被提出来做为公共的定义，减少冗余，这时就会出现耦合的问题，完全不耦合是不可能的，因此模块化中很重要一点就是“适度的耦合”。有了公共定义，就得调整模块样式的实现方式了，而这种调整也会影响到“接口”的实现方式。

篇3：网页页面构图中的重心平衡设计

页面的构图是什么呢?这就要先讲一下构图的概念, 我们经常会听到构图这个名词, 摄影讲究构图, 绘画作品讲究构图, 那么到底是构图是个什么样的概念?构图是造型艺术术语。指作品中艺术形象的结构配置方法。它是造型艺术表达作品思想内容并获得艺术感染力的重要手段。而我们在网页制作方面, 则可以把它理解为根据网站题材和建设网站的主题思想, 把要表现的形象适当地组织起来, 构成一个协调的完整的页面。

网站中一个完整的页面, 要使浏览者有种视觉上的享受, 第一步是要做的整个页面的一个到重心平衡, 如果在一个页面上重心没有平衡, 这个页面不论内容多丰富, 图片运用多得当, 都会让浏览者在浏览的时候产生别扭感, 而使浏览者不愿意在这个页面上逗留从而影响了一个网站的浏览量, 因此, 一个页面的重心是否平衡是网页设计者第一个要考虑的要素。而要明白如何把握一个页面的重心平衡的问题, 就要了解什么是重心平衡。重心平衡指的就是在页面中心反映的网页上各种元素分布的协调程度。任何一张图片, 或者一段文字, 甚至是一个色块, 装饰性的线条都会在网页中占据一定空间位置, 我们可以把这张图片, 文字, 色块, 装饰性线条都看作一个模块, 而当一个模块插入到一个空白网页后就会明显改变整个网页的重心, 就好像在一个天平上, 模块就雷同与天平的砝码, 在天平的一头, 放置了一个砝码, 想要天平保持平衡, 就需要在天平的另一边也放置一个重量相同的砝码, 这里必须要注意的是, 而作为一个模块来说, 它的本身就具有一个重心位置, 而根据模块的重心不同, 插入网页后对重心平衡的改变也不同, 这需要设计者多次的试验让页面的重心达到一个和谐平衡的位置。如一个页面, 在页面的左边, 插入了一张图片, 这个页面的整个重心都改变了, 页面的重心向有图片的那边倾斜, 整个页面看起来有种重心失调的感觉, 让人觉得这个页面看起来很别扭, 有种左右不平衡的感觉, 而且要整个页面看起来舒服需要把这个页面的重心调整到页面的中心位置, 要把重心调整到网页的中心位置, 需要在右手边, 即页面这个空白处, 插入一些元素, 这些元素可以是图片, 可以是文字, 或者一个表格等, 插入这些元素后, 这个页面看起来就比较舒服了, 重心达到个平衡的位置。

虽然重心平衡的原理就是简单的让页面中的所有元素处于一个互相平衡的位置上面, 但是初学者在实际的操作中很容易忽视这个问题, 或者是对重心平衡这个问题感到非常的困惑, 初学者面对着一个页面上那么多不同的元素, 例如, 文字、图片、表格、按钮等等东西, 感到无从下手, 不知道如何把那么多的元素在一个页面上安排妥当, 使页面重心平衡, 让浏览者看起来舒服。针对这个问题, 这里简单的分析几种常用的重心平衡的设计实例:

第一种是卫星式类型。这个类型的最大特点是:中心有重点, 四周元素围绕重这个中心点展开, 传递稳定而牢固的印象。而中心点可以是图片、文字等等, 这里就要注意到一个问题, 中心点的位置问题, 它的位置建议是在页面的三分之一处, 在这个位置对初学者来说比较容易把握。值得注意的是根据中心点的大小, 颜色或是文字的舒密程度不同, 四周元素的颜色、文字的舒密程度也需要相应的有所改变。

第二种是散开式类型。散开式类型网页版式的特征是不受限制的优雅与自由, 使浏览者对页面产生流动的印象, 常用来表现轻松氛围。这中类型对于第一种类型来说, 难度比较大一点, 这种类型讲究一种疏, 疏说的就是空间上的留白, 一个页面要向浏览者表达一种轻松, 自由的氛围, 那就需要在页面上大量的留白, 然后看似随意放置的一些元素, 这些看似随意放置的元素, 都是经过深思熟滤的, 这些元素的放置注重各元素之间的承接连贯, 假设页面在左边放置了柱体, 右边放置个不规则的几何图形, 使到重心很好的保持保持平衡, 而不规则的几何图很好的破除了左边的柱体的呆板, 使整个页面更加活泼。

第三种是对称类型。从它的名字就可以知道, 它的特征是, 或上下, 或左右对称, 保持该对称的做法是放置图片或文字时, 在画面中央引出一条虚拟的中轴线, 然后以此为轴进行上下或左右对称的配置。

以上简单分析了几种关于页面重心平衡的几个实例, 而重心平衡是设计一个优美的页面时必须考虑的一个重要因素, 如果在制作网页的时候, 发现自己的制作的页面看起来不协调的时候, 首先考虑一下自己制作的页面重心是否平衡。即使在一开始设计的时候, 就考虑到重心平衡的问题, 但是随着设计的深入, 或者一些图片或颜色的更改和内容放置位置的改动, 都会使页面的重心发生改变, 这需要设计者在页面设计的同时, 也要时刻的注意页面重心的变化, 把握好页面重心的改变, 是设计出一个美观页面的第一步。

摘要：网页页面构图中的重心平衡是影响一个页面美观的一个关键, 如果在一个页面上重心没有平衡, 这个页面不论内容多丰富, 图片运用多得当, 都会让浏览者在浏览的时候产生别扭感, 因此一个页面的重心是否平衡是网页设计者第一个要考虑的要素。

关键词：网站,页面,构图,重心平衡

参考文献

[1]黄光学, 关南宝, 钟剑.网页设计与制作.北京邮电大学出版社, 2004.

篇4：刍议电商无线端页面设计要点

【关键词】电商无线端；页面设计；响应速度；用户体验

随着移动设备的普及和无线互联网时代的来临，电子商务平台无线端的成交率逐年直线上升，无线客户端成为诸多电商平台新宠，战略重心逐渐向移动端偏移。据中国电子商务研究中心（100EC.CN）监测数据显示，在2014年移动购物市场规模份额中，淘宝无线达85.9%占据第一位；手机京东占4.3%排名第二。移动电商不仅是PC端电商的移动化，更关键的是o2o领域市场竞争必将更加激烈。占有重要位置的淘宝网采取一系列举措推进无线端布局，例如2013年发布了手机版宝贝详情页将给予流量倾斜的政策。随后阿里、京东、苏宁、唯品会等各大电商向移动电商倾斜。京东负责人曾表示“移动端与PC端有很大不同，其中一个特点是黏性很强，超过60%的用户都会二次购买，移动电商用户是电商市场强大的购买力增量”。可见，无线端已经是电商平台的一个重要布局，而且在日后的发展中无线端的内容会更加丰富，购买量也一定会越来越突出，所以电商店主尽快布局尽早受益。

一方面，无线互聯网接入设备由于自身的特点限制，不可能将常规网络营销的方式全盘照搬到无线领域。另一方面，电子商务平台在PC端和无线端在消费群体、消费场景、消费理念上存在很大的差异。因此，在PC端热卖的商品在无线端不一定受到青睐。很多商家花了大量的时间精力装修无线端店铺，或者直接将产品描述与pc端同步，导致无线端的详情页不适合于移动设备浏览，图片量很大导致加载速度非常慢，甚至不能显示，用户体验很差而无法激起买家内心购买的冲动。优化无线端页面设计，提高响应速度，注重用户体验，无疑是电商无线端战略的重要环节。电商无线端页面设计如何做到精准有效，需要注意以下几点：

1 快速响应，注重体验

无线端用户使用电商平台购物的痛点在于流量，无论是2G/3G/4G或者Wi-Fi的移动终端用户流量都弥足珍贵，他们都希望有良好用户体验的同时尽量的节约流量。调查数据表明，移动终端买家在详情页平均停留时间平均为70秒，50.07%的买家看不到30秒就关掉页面。因此，优秀的无限详情页都是由4至10屏组成，看重的事质而不是量，重点在于展示产品，而不应该再过多地强调店铺的品牌调性。尤其在电商平台的购物节双十一当天，几乎所有的店铺都在打折，消费者的时间更加宝贵，页面容量大小尽量控制在1.5M以下，帮助消费者快速读取页面。另一方面，制作中也要注意按照无线端的文件尺寸和要求制作：音频文件要小于200K的mp3；最多30张图片，单张图片宽度在480px-620px内、高度小于等于960px；每个文本模块不超过500字符；所有的详情页文件加起来不能超过1.5M。

2 版式设计简洁明了

电商无线端页面设计的版式设计方面，首先要考虑到手机端屏幕有限，无法像PC端那样面面俱到，因此排版简洁明了是第一要素，一般采用拼接式的图片，美观又简单。字体大小方面，在手机上浏览感觉最舒服的正文文字是雅黑/26px/锐利模式，26px在pc上看起来很大，其实在手机上显示刚好合适的。配色方面，不要使用太多色彩，尽量使用单色背景，或者浅色图片， “极简”设计在无线端上看其来会很清晰和舒服。促销信息的设计上，尽量的突出，让顾客一进店就能看到优惠券和红包，帮助促成购买，增加客单价格。同时，在设计中也要融入店铺品牌调性，找到卖货与品牌之间的平衡点。

3 内容精简，优化爆款

电商无线端页面设计的内容要精简，直接把PC端的内容缩小照搬到无线端，会造成文字过小无法阅读，浪费买家流量。因此要选取PC端的页面精华，又要有无线端的特色，可以通过价格曲线等方式突出亮点增加转化。突出促销信息，让顾客一进店就能看到优惠券和红包。同时，对于店内已经有了一定的基础的主推爆款进行优化，设置手机专享价。例如全店的TOP10，提前优化，对提升转化率更有帮助。

4 页面框架简约呈现

无线详情页的内容框架的呈现主要体现在：

（1）引发兴趣；

（2）激发需求；

（3）产生信任，引导购买；

（4）从信赖到占有；

（5）打消顾虑促成成交。

如表1所示。

5 把握时机，多种预案

电商无线端页面设计在迎接电商购物节的时候要把我时机准备多种预案。双十一对于设计师而言往往是需要1-3个月的准备时间，可以分为造势期、预热期、爆发期3个阶段。预热期的页面最重要的就是制造出双十一的活动气氛和对当天出售的产品进行预测评估，为双十一当天的变动作好准备和规划。在各个阶段至少要准备两个以上的页面，以便及时根据各阶段的需求以及销量情况，进行替换、调整。

6 小结

电商无线端页面展示面积有限，所以要珍惜任何可以利用的地方，“小而美小而精”是无线端页面设计的终极目标。面对飞速发展的电商无线端，要不断的优化无线端详情页面，抢占先机，拥抱变化，精心沉淀，做的更好。

作者单位

篇5：页面重构中的组件制作要点网页设计

一、HTTP请求数的权衡

1、为什么要关心http请求？

当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息。在用户打开一个页面的初初，包括等待时间、请求时间、建立响应时间、渲染时间……，都是消耗在前端的。比如下载图片、下载样式表、JavaScript脚本、flash等文件。大家应该都经历过那个“多图杀猫”的时代，加载那样一个网页会花费大量的时间。减少这些资源文件的请求数将是提高网页显示效率的重点。

假设用户家的网速是10Mbps，10Mbps=10/8=1.25MB/s，那么他打开一个网页时，如果网页文件小于1.25MB，理论上他可以在一秒之内打开网页。下载网页的快慢在显示速度上占了很大比重，所以，网页本身体积越小，浏览速度就会越快。这就需要产品、交互、设计，从最初就遵循尽量精简的原则。

现在，就揭开新版微博的面纱，看看微博3.0和新版微博的区别吧。

微博3.0截图

新版微博截图

微博3.0是大家熟悉的两栏结构，总宽为800px，有一级导航和二级导航、发布框、feed区、个人简介区。新版微博是现在最流行的三栏式布局，总宽950px，除以前的内容一个都不少之外，还整合出了左侧导航和右侧各种引导和公告。所以从理论上讲，虽然内容更丰富了，但新版微博着实比微博3.0的页面体积大了很多。

2、什么是bigpipe？

网上有个例子举得好：在饭馆点菜吃的时候，如果点了四个菜，厨师没有必要把四个菜一起炒好再上来。微博3.0就是这种把所有菜都炒好再上桌的网页加载模式。所以用户吃上菜的时候，已经是第5秒了。现在新版微博的bigpipe网页加载模式，是炒好一个菜先一个菜，用户可以先吃着，厨师再炒第二个菜。甚至可以几个菜并发同时炒。所以用户吃上第一口菜的时间可能是第1秒，比之前提前了很多。

bigpipe模式示意图

JS工程师把页面分割成若干个小块（pagelet），模块彼此独立，把html语言转变为JS语言，再把CSS通过style的方式加载进这段代码，而不需要用以往的头部link css地址的方式取样式。每个模块有自己对应的html、CSS、JS，一旦开始运行模块，就会寻找到对应的CSS，并显示对应innerHTML内容插入到对应的html元素中，同时渲染出本模块效果。比如执行到feed区域的 id=“pl_content_homeFeed”时，样式表只调用了feed.css。

3、为什么新版微博 CSS的HTTP请求数不降反增？

通过上面说的这种模式，css被全部link到头部，是为了给后台代码提供出pagelet所需要的样式列表。以前微博3.0头部只link了3个CSS，新版微博首页头部却需要link10多个css。虽然加载文件多了，新版微博CSS加载请求数反而高于v3，看似yslow降级了（这个数据已经不能说明任何问题了）。但实际上新版微博CSS没有像以往一样合并起来，而是用一个加载一个，CSS和JS被分配到不同流水线中，模块的加载变成并行的，先执行完的模块先显示出来。所以新版微博CSS渲染的总时间并不超过V3CSS渲染的总时间，速度反而快了很多，减少了视觉等待。

请求数

总大小

加载时间

V3 CSS

3 个请求

76.3 KB

8.53s

V4 CSS

24个请求

50.2KB

6.08s

上面这张表格，来自yslow的分析。我们通过把页面切成细小模块写样式的做法，虽然请求数比以前大了8倍，但总大小上直降20K。

将多个CSS合并的做法固然可以减少请求，但对上亿用户的微博页面来说，完成合并也许会带来5%速度的提升。但是如果按bigpipe模式，即使http请求数提高了，但是整体的速度也许是之前的50%。

二、对CSS的优化处理

1、提取公用模块或公用元素，并反复调用

如果用户每次访问微博首页时，就重新下载读取CSS文件。这就会造成给服务器带来额外压力且用户重复读取耗时。新版微博的做法是，把模块分为全局级模块和页面级模块，首页是全站的核心，所有模块都是重要且重复性高的，所以首页的所以模块都是全局级模块。首页所需要的CSS被整理成一个pl列表反馈给工程师，等待处理。而一些非公共的css模块样式被单独写在属于本页面的文件里，这样就最大化的节省了文件大小及利用率。这么做还有一个好处，就是公共模块样式被调用过后，会在浏览器里留下缓存。调用最频繁的模块，反而样式被最快的加载进来。

举个简单的例子：

.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}

.clearfix {display: inline-block;}

这是一段全局代码，基本上每个页面都会用到这个类，我们就没必要把这句写在每个网页的CSS里面，只把它提取到base.css里，并方便进行皮肤管理，

又比如，首页右侧栏有个“可能感兴趣的活动”类似的模块都是采用独立的div容器，这个段落的详细代码，如果写在公用CSS文件里，肯定就浪费了。

2、尽可能少的使用css images

能通过代码或字符实现的，就不用图片去解决。比如“可能感兴趣的人”展开气泡上下三角、返回顶部的箭头、“更多”后面的»符号等。既减小CSS图片请求，又不会面临若干套皮肤升级困难的问题，仅通过对CSS的color、backgroud等属性的控制，就可以换色了。

可以看看按这个做法之后明显的优势，下图来自yslow的statistics。微博3.0的css image总大小为970.1K，新版微博的css image总大小为693.9K，总量直降30%。

微博3.0 statistics

新版微博 statistics

3、尽量使用CSS3等新技术

在新版微博里，我们制定了使用CSS3的原则，即非图片类的元素效果图，如圆角、阴影、渐变、半透等效果，可以通过样式控制，而无需切图的元素，在得到设计师认可后，不用图片，只做样式控制。满足高级浏览器的视觉，ie系列不能显示的，有原则的放弃。不仅为速度助力，还在放弃低级浏览器的大方向前进一步。

4、鼠标滑上效果改用伪类实现

在逐步放弃ie6的事情上，新版微博已经尽最大的努力做了。为了保证各浏览器的完全兼容，微博3.0以前我们曾经放弃让CSS实现鼠标滑上效果，而由JS控制。随着ie6使用率的日益降低，新版微博又一大革新就是重新使用伪类，仅通过CSS就实现的浏览器原生效果，不仅计算速度比计算一个JS快得多，也终于放弃了低端的ie6。

举个评论页feed区的例子：

CSS代码如下：

每个单条feed在鼠标滑上时，都会显示举报和删除链接。这是交互设计出于对页面呈现内容的视觉舒适感所做的设计，我们通过对块元素直接写伪类，实现这个效果，不需要再通过JS了。ie6呢？就让它一直摆着去吧。

三、对dom结构的优化处理

1、bigpipe模式重构并优化垃圾代码

v2从v1来，v3从v2来，在v3不堪重负的时候，新版微博的代码优化誓在必行了。所以我们并没有沿用之前的结构和CSS，而是直接推翻v3，重构新版微博。和JS工程师一起搭建的bigpipe模式，把页面分成细小的块，每一个模块对应一个CSS。代码写到最优，结构和样式完全分离，并杜绝内联调用的方式。下图示意了我们用模块配页面的最终效果，模块可以被细分为如此程度。模块拆的细，复用性被提高。

2、尽量减少代码体积

由于代码行数越少体积就越小，所以我们这次想办法减少网页代码的行数。相同或类似的模块，说服设计师把视觉规范统一。我们只通过对CSS补丁，覆盖原样式，并不改变页面的dom结构，直接降低重复代码率。举个例子，“我的首页”和“我的profile页”，同样是有feed区域的，区别是但一个有头像，一个没有头像。只需要一套feed.css代码，然后在“我的profile页”独立的页面级CSS中，打个去掉头像的补丁即可。

3、首页中杜绝Table布局和iframe

杜绝首页中出现Table布局。因为传统的table布局，是把内容全部加载完成后，才渲染样式，延迟效果严重。而iframe页面框架，是非语义的，即使为空也会有较大资源消耗，还会阻止页面的onload。

四、对图片的优化处理

1、图片的存储格式

我们改变了v3的做法，把icon类小图片或背景类图片，由以前的gif存储尽可能多的转为png8的存储，这是个减小图片体积的好办法。Png8有gif的所有特点，但是相比gif，png8的优势是alpha透明和更优的压缩。png24全透明的图片，只给支持的浏览器使用，ie6在不影响视觉的前提下，改为gif呈现。我们还会利用的图片优化工具处理图片，保证效果但却降低文件大小。下图是主键类页面的images文件夹示意图，除必须独立的icon外，png类型的图片比重大得多。这在之前的V3并没有做到。

2、css sprites

在图片的拼合方面，我们是持之以恒这么做的。在v3里，我们把所有首页和profile页里出现的背景类图片都拼合到一张大图上，新版微博比之前高明在，我们把放置文件夹细分。假设我们把公用型放入common，页面类放入index，换肤类放入skin。把sprites拆分的更细，尽可能在加载首页时，减少图片请求数。

3、大图片、小图片

对于大背景图，我们的做法是不分割成小区块儿的。首先的因为，原本一个图片的请求数会变成多个。另外，大约80%以上调用图片所消耗的时间，是用来检索缓存和确定链接是否有效的阻塞时间。也就是说，如果把一个大图片，切成若干小图片，虽然解决了图片的加载时间，却花费了更多的阻塞时间。

4、在已知宽高的图片标签内，直接指定宽高。

Feed区域里头像需求是50*50的，所以后台直接吐出这个尺寸的图片。在已知宽高的情况的，我们在img标签中直接指定了height和width参数。因为如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，首页有多少条feed就有多少个头像，浏览器需要不断地调整计算。当浏览器知道了height和width参数后，即使图片暂时无法显示，页面上也会预留空位，继续加载后面的内容。

篇6：浅述网页设计中的页面布局技术

1.常见的页面布局方式

(1) 表 格

表格布局是页面布局技术中最简单的布局方式。在Dreamweaver中插入表格就类似于在WORD里插入表格 , 具有所见即所得的特点。利用表格组织各种网页元素, 既直观又操作简单。但是在网页中插入大量表格, 会造成页面源代码存在大量冗 余、可读性 差、直接导 致网页读 取速度慢 的问题不利于网站的更新和维护, 目前大中型网站一般不用表格布局。

(2) 框架

框架就是把浏览器窗口划分为若干个区域, 每个区域称为一个框架, 每个框架都可以独立显示一个网页。框架布局比较灵活, 若有效运用, 则能使网页更整洁、清晰。但是对于内容多、布局复杂的网站, 不宜采用框架布局, 过多的框架会影响网页下载所需的时间, 影响网页的读取速度, 而且浏览器对框架结构的兼容性不好。

(3) DIV+CSS

DIV+CSS布局技术 的出现弥 补了表格 和框架布 局的不足, 优势在于代码精简、页面下载速度快, 表现和内容相分离布局灵活, 便于维护。我们可以将样式单独保存在CSS文件中例如用手机WAP上网时, 样式文件就可以不加载, 大大地节约页面下载时间。多个页面可共享一个CSS文件, 要修改页面样式时, 只需修改CSS文件即可实现对整个页面的重新布局, 不影响网页内容。目前多数大型网站都采用此种方法进行布局但是对于初学者来说, 它的操作相对复杂, 要求用户对代码有一定的了解。

2.DIV+CSS网页布局设计举例

以一个最常见的三栏式结构为例, 网页分成头部 (#top) 内容 (#main) 、底部 (#bottom) 三部分, 内容部分分成左侧 (#leftmain) 和右侧 (#rightmain) 两部分。

有了页面的区块划分, 只是建立好基本的布局结构, 还需要在各个区块中添加实际的网页内容 (如文字等信息) , 最后要通过设置CSS文件美化网页。

3.结 语

本文介绍了目前网页设计中常见的布局技术, 表格、框架和DIV+CSS各有优缺点。虽然DIV+CSS布局方式将成为今后网页设计的标准, 但是DIV+CSS的操作相对复杂, 特别是对于网页初学者, 要完全用DIV+CSS布局页面, 需要用户有扎实的代码基础。目前不是所有的浏览器都支持CSS的页面, 使用范围页有一定局限。所以在日常教学中, 要根据学生的实际情况合理利用布局技术, 用table+CSS布局构建小型个人网站是不错的选择。

参考文献

[1]杨阳.DIV+CSS网站布局实录[M].北京:科学出版社, 2009.

[2]温谦.CSS网页设计标准教程[M].北京:人民邮电出版社, 2009.

[3]王俭敏等.CSS+DIV网页样式与布局案例指导[M].北京:电子工业出版社, 2009, 4.