图片展示
图片展示

提高网站设计代码编写效率

作者:科慧设计 浏览: 发表时间:2022-09-20 23:22:33 来源:科慧设计

guandian103banner.jpg

对于网站建设者而言,如果没有经验积累,那么编写准确、高效的HTML和CSS语句是一件耗时的事情。虽然花时间编写高质量的网站制作代码是高级程序员的专利,但同时也要不断提高网站制作的效率。那么,如何才能有效的提高网站代码编写的效率呢?

一、使用代码模板和框架

和网站设计需要原创的网页设计和与众不同的作品呈现不同,后台代码对于用户是不可见的,因此若能有效的利用代码模板和框架的重用性,将大大减少网站建设的重复性工作。比如960   grid system   和Blueprint,这两款软件能够在短时间内帮助程序员将页面布局实现。不过,由于框架代码使用需要一定的学习时间,而且因为不必要的style和markup增加网页大小。

二、使用标准、一致的命名规则

程序员需要在网站编码过程中注意参数的命名规则,尽量使用富有意义和符合逻辑的参数命名,来保证网站作品代码的易读性和可编辑性。

以下是一些非常常用的类、ID和文件命名:

架构性?IDs: #header, #footer, #sidebar, #content, #wrapper, #container   主要的stylesheet: style.css, styles.css, global.css 主要的JavaScript库: javascript.js,   scripts.js JavaScript目录: js, javascript or scripts 图片目录: images, img CSS目录: css,   stylesheets, styles

?好的命名规则能够帮助程序员通过更快的定位和编辑代码来提高效率,同时,对于需要协同合作的大型项目,严格而标准的统一命名能够让大家都默契合作。

三、理解并利用好CSS继承

通过CSS,特别是对于fonts,padding和margins的继承规则,而不是采用给每一个元素赋值的方法,能够有效的减少网站制作代码的工作量。

四、利用CSS简写属性

通过CSS简写,不仅能够有效减少代码编写的时间,同时也能够让文件大小‘瘦身’。另外,更精简的代码能够让程序员更清晰的阅读和维护。

以下分别是代码是否使用CSS简写规则的例子:

Margin 和 Padding值

/* 未简写例子 */ margin-top: 0; margin-right: 20px; margin-bottom: 10px;   margin-left: 15px; padding-top: 0px; padding-right: 20px; padding-bottom: 0px;   padding-left: 20px;

/* 简写例子 */ margin: 0 20px 10px 15px; padding: 15px 20px 0;

快速引导:

当4个属性值被使用情况?– margin/padding: [top | right | bottom | left] 当3个属性值被使用情况?–   margin/padding: [top | left and right | bottom] 当2个属性值被使用情况– margin/padding:   [top and bottom | left and right] 当1个属性值被使用情况?– margin/padding: [top, right,   bottom, and left ] 字体属性

/* 未简写例子 */ font-style: normal; line-height: 11px; font-size: 18px;   font-family: Arial, Helvetica, sans-serif;

/* 简写例子 */ font: normal 18px/11px Arial, Helvetica, sans-serif;

快速引导:

font: [font-style | font-size/line-height | font-family]; 背景属性

/* 未简写例子 */ background-color: #ffffff; background-image:   url('../images/background.jpg'); background-repeat: repeat-x;   background-position: top center;

/* 简写例子 */ background: #fff url('../images/background.jpg') repeat-x top   center;

快速引导:

background: [background-color | background-image:url() | background-repeat |   background-position];

 

总结

当然,代码编写工作需要有长期经验积累和不断实践来加以提高。对于程序员而言,应不断修炼功力来达到代码编写的完美境界。


提高网站设计代码编写效率
对于网站建设者而言,如果没有经验积累,那么编写准确、高效的HTML和CSS语句是一件耗时的事情
长按图片保存/分享

Copyright © 2016-2023 科慧设计有限公司 版权所有       网站地图

添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了
粤ICP备12058681号