进行规范的代码设计

时间:2023-12-21 点赞:45809 浏览:88265 作者原创标记本站原创

本文是一篇网站设计论文范文,关于网站设计毕业论文的格式,关于进行规范的代码设计相关毕业论文的格式范文。适合网站设计及代码及结构设计方面的的大学硕士和本科毕业论文以及网站设计相关开题报告范文和职称论文写作参考文献资料下载。

相信很少有人会在网页设计的过程中把代码设计单独拿出来说,虽然在软件设计中代码设计很受重视,但在web设计里,大家更关心网站结构设计、数据库设计、页面视觉设计,很少有人会真正关心前端代码设计.这恰恰是因为代码设计的优劣不是一般用户所能感觉出来的,设计得差的前端代码,在用户使用过程中也许毫无影响,却能将前端工程师和web程序员弄得一塌糊涂.

DIV的规范及科学统筹

说到前端代码,不能不说DIV架构.目前主流的网站页面架构方式已经转向DIV+CSS的结构层和表现层脱离的方式,这个过程也叫做网站的标准化.这与以往的利用表格定位的方式完全不同,更加强调了界面元素的模块化定位,由DIV确定模块的界限,再由CSS代码表现该DIV元素的表现形式.


在DIV的布局方式中,我们更多强调的是规范,因为DIV的ID名称和CLASS类名称是能够由代码编写者自行定义的,所以有明确规范的DIV设计是前端代码设计的前提.如今的web工作往往牵涉到一个团队中的多人进行协作开发,代码被阅读和被修改的次数远远多于它被编写的次数,而保持代码易读、易修改的关键,就在于在代码编写前期确定能被认同的代码规范.

首先我们先了解DIV架构中的命名规则,DIV的许多规范要点体现在ID或者CLASS的命名中,绝大多数设计师习惯使用属性命名方式:即显示绿色14号字的类就命名为green14,蓝色背景区域的类就命名为blueBg.这样命名也未尝不可,但是这样的命名方式对于合作的其他职能部门的同事来说,是毫无意义的.PHP程序员不会关心这个类的字是什么颜色,他只管这块区域应该和哪个程序模块接口;模板编辑也不会关心背景究竟该是什么颜色,他只管哪个区域是用来显示头图、哪个区域显示全站导航和全站通用底部.所以我们比较倡导表意命名方式和接口命名方式,比如pageHead和loginArea这样的命名,pageHead明确表示了这块区域的意思,而loginArea指代了这是个登录区域的接口.不管这两个类里的字号颜色等将来因为改版发生了什么改变,它们起到的作用和所定义的固定区域是不会改变的.

其次我们了解一下DIV中类的复用,同一个页面中,DIV的ID是唯一的,表示该页面上独一无二的一种特定表现;而CLASS(类)是可以无限重复使用的,表现该页面上有某些属性相同的若干区域,所以DIV的复用仅仅指的是类.牵涉到复用的时候,类的命名应该尽量多地表意化,有必要的情况下使用属性命名也能起到很好的效果.比如页面中有很多个不同的内容列表区块,但是宽度都是760px,那么使用contList760这样的类名称进行复用就比contListA、contListB、contListC等这样单独且表意不明显的命名要好得多.如图1所示的网站alistapart.,由图2我们可以看出,它的代码设计非常规整.

名词解释

CSS是英语CascadingStyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件式样的计算机语言.

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者通过使用样式表格式化这个块来进行控制.

DIV+CSS是网站标准(或称“Web标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.

CSS整站规划――网站设计的重中之重

说过DIV当然要说说CSS,CSS使现代网站大放异彩.符合标准化的网站,仅仅通过更换一个不同的CSS文件,就可以瞬间实现整站所有页面改变更新的显示效果.CSS统一了网页的表现层,而不影响网站结构和数据传输.

而CSS的书写方式也因设计师的不同而各有千秋,在此,我们强调CSS的设计关键在于代码的缩略与复用:缩略能使CSS代码更加简明扼要,CSS文件也能缩小体积;复用则是提高代码的利用率,以最少的代码实现最高的重复使用效率.如图3所示,腾讯网的CSS设计就十分优秀.

首先我们来看代码的缩略,很多编辑器生成的CSS代码片段会像图4一样杂乱随意,而实际上这段代码能缩略掉所有不需要的空格,组合起同系列元素,使得代码行读起来更加轻松无负担.

毕竟,编辑器是按照一定的程序运算而提供出来的CSS样式,它能自动实现预期效果的CSS样式,而绝不会自动精简代码.这个过程还是需要人的干预,而且对于不同的应用场合,CSS代码中的缩略方式也会有所不同,而取谁舍谁,则完全看具体情况而定了.

其次,我们来了解CSS的复用.同样是复用,CSS的复用情况和DIV很不同.设计中我们需要尽量实现CSS代码的复用,尽量多利用CSS的继承和层叠,而不是到处定义新的CSS类.在繁琐的CSS设计中,也许会遇见两个大部分属性一致而只有某一两个细节不同的类,那么可以考虑这两个类是否是继承关系,或者说将它们相同的属性提炼出来,形成另一个可供公用的类.

后期整理――代码也可以很美

之前说的都是代码编写的前期规范,而页面完成之后,代码的后期整理对于今后的修改维护“可持续发展”也非常重要.在这里,我们需要注意以下几个方面的内容.

1.样式表统一:样式表分为内联样式表和外联样式表,成型的网站架构要求对样式表统一管理,所有的样式表都需要独立出来,作为一个或几个外联样式表文件;除非是极特殊的情况,该CSS只在这一个页面中出现,不会有另外的页面需要复用它,那么可以考虑使用内联,而内联样式很多时候会被视为极不专业的做法.如图5,色影无忌网站的设计从外观看很符合标准化设计,但从图6我们可以看出色影无忌的代码设计非常混乱.

2.注释:再科学、再规范的代码,也不见得能一眼就被其他人读懂,所以这个时候需要代码注释.CSS的注释很简单,在HTML里的DIV注释因为其层级嵌套关系的问题,需要使用的方式进行包含处理,这样能使代码更加模块化.如图7所示,新浪的页面注释就很整齐.

3.空格:关于CSS代码中的空格问题一直被激烈地讨论着,我的主张是,在页面发布之前,因为代码的规整而产生的空格是没有问题的,这样更便于编辑与调试,而在网站定稿上线后,可以将CSS类里的空格换行都删除,每个定义类都并成一行代码,这样既能压缩文件空间,也能使所有类的名称整齐划一,便于查找.

4.其他:有些编辑器产生的CSS代码会出现大写字符,建议统一修改成小写,而对color:#666666之类的颜色代码,可以缩写为color:#666.这对维护没增加什么困难,而且确实减小了文件体积.

CSS标准化在页面应用的补充

●摒弃table布局不是说禁止使用table,table标签仍可以用在容纳表格型数据的场合,而不用于页面布局的目的.

●页面中的标签都是带有结构含义的,尽量少因为布局的目的引入额外的div标签.

●页面中的结构与表现完全分离,结构位于文件中,表现位于css文件中.

●尽量使用通用的CSS语法,少用特定于某种浏览器的CSS语法.必需要用的,则将这类语法隔离在单独的css文件中,以便日后浏览器升级后删除.

相关论文

新规范在桥梁设计和施工中的应用

本文是一篇桥梁设计论文范文,桥梁设计方面有关本科论文开题报告,关于新规范在桥梁设计和施工中的应用相关毕业论文开题报告范文。适合桥梁设。

室内设计开题报告规范

本文是一篇室内设计论文范文,关于室内设计相关硕士学位论文,关于室内设计开题报告规范相关硕士毕业论文范文。适合室内设计及装饰材料及开题。

毕业设计(文)的规范要求

这篇开题报告论文范文属于大学毕业论文免费优秀学术论文范文,关于开题报告方面专科毕业论文开题报告,与毕业设计(文)的规范要求相关毕业论。

建筑结构设计规范和设计方法

本文是一篇砌体结构论文范文,砌体结构相关毕业论文开题报告范文,关于建筑结构设计规范和设计方法相关本科论文范文。适合砌体结构及结构设计。