《
WEB前端设计 良好的页面结构和优美的代码》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302336232013.htm
--> [
网站建设之]WEB前端设计:良好的页面结构和精美的代码
凡是从事互联网的人基本都会写几行html，用过Word的人用Dreamweaver也能做出规整的页面，所以大部分人会很天然地以为“页面的开发没什么技巧含量,
web前端开发经验浅谈，很简单”。不仅有这种广泛的认知,
WEB2.0网站开发规则19条，对从业者来说也有很多怀疑：做页面前端实现，没问题；兼容性，小case；图片集成，一直都在用……还能有什么问题？瓶颈啊、天花板啊、转型啊、出路啊就在从业者中普遍讨论。是不是真的没什么问题了呢？网易邮箱前端技术核心也设破好几年了，似乎有着讨论不完的话题，也常常会有一些新的主意让大家为之一振。那么页面开发还有哪些请求，还要做些什么,
Web2.0的标签（Tag）到底是什么东西？，这里面的水有多深，让我们舀舀看。
在不同的时代对页面前端的见解仿佛是多变的。在互联网早期的时候，小车还是比屋子贵的，烧饼和粉丝还只是用来吃的，菊花还只是用来泡茶的。那时的页面设计作风相对单一，对应的页面需要比较简略，并且当时的浏览器也基本是IE6的天下，javascript也只是网页殊效的代名词，HTML页面本身没有引起太多人的关注，好像只有能用div甚至table加css辅助把图片定好位，把页面内容预留好就OK了，并且这种观点存在了很长一段时间。跟着页面内容的丰富，设计风格的发展，交互复杂性的增长，AJAX的运用，浏览器的更新换代，又让大家从新对最基本的页面自身看重起来。然后热议的就是浏览器的兼容性，遇到问题最热衷的就是满网络搜索hack，顺便再骂骂IE6、7……当这些都做一遍后，好像又碰到了瓶颈，又开始寻找前途。我们就从这个阶段开始说起。
实现效果图是最基本的工作
把视觉稿通过页面代码的方法表示出来包括了两个根本诉求：1.可以实在反应视觉稿；2.可能通过浏览器的兼容。这两个诉求的达成需要我们有追求细节的立场和一定的页面功底，能完成这两个内容就可以初步进入页面前端的从业者行列了，但这就代表着我们可以胜任页面开发的工作了？不，才刚开端！
与设计师的沟通跟项目标参加
沟通很主要。先抛出多少个问题：我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比拟大？有不探讨过局部后果能够用CSS3实现从而使得构造更加简练清楚？有没有在代码和视觉中寻寻求过均衡？页眼前真个开发向基础用户，编写的代码也直接作用在阅读器上，我们有任务对页面的稳固性和渲染效力负责。我们也常常遇到名目在总体进度压力下导致的设计与页面前端开发同步进行，这时更有必要尽量多地获取项目信息，懂得咱们还要做些什么，这些可以辅助我们充足斟酌重用和框架拓展。
良好的页面结构
页面结构的编写比如盖房的地基建设，其好坏会直接影响到CSS代码的品质、js开发、后盾开发回会影响到当前的页面拓展、迭代和页面调整。拿到视觉稿后，不要忙着着手开始，多察看思考。先剖析布局，划分框架，而后规划结构，编写代码。特别在大型项目中,
WEB 2.0 下WAP网站的产品介绍，合理使用模块化的开发不管从整体进行仍是拓展维护都有相称大的利益。
对于hack
许多同窗在页面开发时上网搜寻最多的就是hack了，是否我们完整要依附hack来实现页面兼容性，谜底是否认的。大家常常比方IE6向我们撒了一个谎，结果我们要再撒一百个谎来圆这个谎。不否定IE6时常让我们口吐鲜血，但不代表我们用更多的“谣言”来补充就可以心安理得。大部门情形下可以通过变换思路调剂HTML结构，或使用一些固然无奈说明但绝对保险的css来干掉hack。谁都无法预计使用hack什么时候会让我们栽一个大跟头。比如触发layout或position:relative就可以帮助解决很多IE6的问题。
幽美的代码
当初很多web项目功效庞杂，代码范围也会变得很宏大，如何更好地进行协同开发和维护是我们面临的一个问题。需要考虑完美同一的计划，还有要养成良好的代码开发习惯才会在面临各种情况时熟能生巧,
W3C标准。翻阅页面代码，看到公道的标签使用、良好的解释、清晰的代码结构、用意正确的css不仅如同观赏一个艺术品，更为下游开发和协同开发下降了不小的沟通本钱，我们有什么理由不去这么做呢？举个背面例子：div滥用是现在比较典型的一个问题。数数看自己使用的标签有多少个呢？不同的语义都该使用对应的标签代码，特殊是HTML5提供了更丰硕的语义化标签，它们都苦苦地在等候战场上的冲锋号，让我们去解放它们吧！
无阻碍页面开发
可访问性与易用性是十分主观且人道化的东西。一般人看上去上完善浮现的页面在特别群体中不一定显得那么贴心。当盲人用读屏软件在页面某个区域内陷入轮回时，我们应当觉得内疚,
visibility hidden和display none的区别和使用。只能说目前海内的网站对此的器重水平还远远不够，这就需要我们独特尽力，让更多的人感触到我们的热忱。>
保障效率
作为项目开发中比较靠前的一环，页面开发可能需要尽早完成为项目争夺时光，这就需要我们尽可能地提高效率。“工欲善其事，必先利其器”，除了实战教训和代码习惯的造成可以帮助我们提高效率外，想要提高对自己开发的进度掌控才能,
UTF-8编码中BOM的检测与删除，还有良多帮助工具可以帮助我们进行页面开发。比如应用Less或Sass可以赞助我们拓展和组织CSS，大大提高CSS的编写效率增添了可保护性。比如可以通过zen coding的自动主动实现和自定义代码块让你可以剑指如飞。甚至还见过通过自定义输入法的代码块要害字来晋升开发速度的。多多挖掘一定会找到最适合本人使用的工具。
针对服务器的优化
页面开发也需要了解服务器的优化，尽量减小服务器累赘。好比css sprite就是一个典范减小服务器要求数的例子。在网易邮箱的页面前端开发中大家不停地在做着各种优化，比方始终在追求文件大小与服务器恳求数的平衡；为了尽可能进步缓存应用率采取了补丁进级；对class名进行了混杂紧缩防止命名过长的冗余；利用base64减少请求数量等等办法。这些都是综合衡量的成果，须要考虑各个方面整体优化。由于当页面拜访量达到必定的数目级时,
UEO在SEO面前更重要，再小的一点优化都会到达可观的效果，再小的问题都可能会构成宏大的灾害。
拥抱HTML5
这是一个充斥机遇的时代，HTML5时期的降临随同着挪动互联网的崛起发明了更大的机会，还有太多的货色值得我们去学习去发明。 HTML5供给了丰盛的JS API接口，需要我们去研讨；CSS3的壮丽吸引了足够多的眼球，需要我们去研究；移动装备上如何开发更加适配的页面，需要我们去研究……
Stay Hungry,
text-align justify实现两端对齐一例 , Stay Foolish
水是越舀越多了，却发现本来下面还深不见底，上面的内容越是深刻研究就越会发现更多山川需要翻越。坚持饥饿状况，用眼睛去努力发现发掘，一直丰富技巧才干找到定位，冲破瓶颈，正所谓&ldquo,
table建站,XHTML建站和DIV建站的不同;唯有高屋建瓴方可瓜熟蒂落”。形成本文是因为之前和同行探讨到瓶颈的问题，想给自己，给页面前端的同学一起找找定位，梳理一下思路。拿苹果CEO在斯坦福报告的一句话“Stay Hungry, Stay Foolish”和大家共勉。 Tag：结构 美的 代码 页面 良好 设计
(责任编辑：网站建设)
WEB前端设计 良好的页面结构和优美的代码相关文章