仓酷云

标题: 来看看:网页计划标准总结:一套不错的网页制造标准 [打印本页]

作者: 冷月葬花魂    时间: 2015-1-15 22:53
标题: 来看看:网页计划标准总结:一套不错的网页制造标准
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
破洛洛文章简介:为进步团队合作效力,便于背景职员增加功效及前端前期优化保护,输入高质量的文档,特制定此文档.本标准文档一经确认,前端开辟职员必需按本文档标准举行前台页面开辟.本文档若有不合错误大概分歧适的中央请实时提出,经会商决意前方可变动.
标准目标
为进步团队合作效力,便于背景职员增加功效及前端前期优化保护,输入高质量的文档,特制定此文档.本标准文档一经确认,前端开辟职员必需按本文档标准举行前台页面开辟.本文档若有不合错误大概分歧适的中央请实时提出,经会商决意前方可变动.


基础原则
切合web尺度,语义化html,布局体现举动分别,兼容性优秀.页面功能方面,代码请求简便了然有序,尽量的减小服务器负载,包管最快的剖析速率.


文件标准
1.html,css,js,images文件均回档至<体系开辟标准>商定的目次中;
2.html文件定名:英文定名,后缀.htm.同时将对应界面稿放于同目次中,若界面稿定名为中文,请重定名与html文件同名,以便利后端增加功效时查找对应页面;
3.css文件定名:英文定名,后缀.css.共用base.css,首页index.css,其他页面依实践模块需求定名.;
4.Js文件定名:英文定名,后缀.js.共用common.js,其他依实践模块需求定名.

html誊写标准
1.文档范例声明及编码:一致为html5声明范例<!DOCTYPEhtml>;编码一致为<metacharset="gbk"/>,誊写时使用IDE完成井井有条的缩进;
2.非特别情形下款式文件必需外链至<head>...</head>之间;非特别情形下JavaScript文件必需外链至页面底部;
3.引进款式文件或JavaScript文件时,须略往默许范例声明,写法以下:
<linkrel="stylesheet"href="..."/>
<style>...</style>
<scriptsrc="..."></script>

4.引进JS库文件,文件名须包括库称号及版本号及是不是为紧缩版,好比jquery-1.4.1.min.js;引进插件,文件名格局为库称号+插件称号,好比jQuery.cookie.js;

5.一切编码均遵守xhtml尺度,标签&属性&属人命名必需由小写字母及下划线数字构成,且一切标签必需闭合,包含br(<br/>),hr(<hr/>)等;属性值必需用双引号包含;

6.充实使用无兼容性成绩的html本身标签,好比span,em,strong,optgroup,label,等等;必要为html元素增加自界说属性的时分,起首要思索下有无默许的已有的符合标签往设置,假如没有,可使用须以"data-"为前缀来增加自界说属性,制止利用"data:"等其他定名体例;

7.语义化html,如题目依据主要性用h*(统一页面只能有一个h1),段落标志用p,列表用ul,内联元素中不成嵌套块级元素;

8.尽量削减div嵌套,如<divclass="box"><divclass="welcome">接待会见XXX,您的用户名是<divclass="name">用户名</div></div></div>完整能够用以下代码替换:<divclass="box"><p>接待会见XXX,您的用户名是<span>用户名</span></p></div>;

9.誊写链接地点时,必需制止重定向,比方:href="http://itaolun.com/",即须在URL地点前面加上“/”;

10.在页面中只管制止利用style属性,即style="…";

11.必需为含有形貌性表单位素(input,textarea)增加label,如<p>姓名:<inputtype="text"id="name"name="name"/></p>须写成:<p><labelfor="name">姓名:</label><inputtype="text"id="name"/></p>

12.能以背景情势出现的图片,只管写进css款式中;

13.主要图片必需加上alt属性;给主要的元素和截断的元素加上title;

14.给区块代码及主要功效(好比轮回)加上正文,便利背景增加功效;

15.特别标记利用:尽量利用代码替换:好比<(<)&>(>)&空格()&
作者: 若相依    时间: 2015-1-17 19:43
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
作者: 山那边是海    时间: 2015-1-23 23:24
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
作者: 分手快乐    时间: 2015-1-31 21:49
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
作者: 仓酷云    时间: 2015-2-7 02:26
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
作者: 金色的骷髅    时间: 2015-2-20 04:32
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
作者: 谁可相欹    时间: 2015-3-6 17:03
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者: 简单生活    时间: 2015-3-13 05:10
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
作者: 兰色精灵    时间: 2015-3-20 14:19
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。




欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2