前端技术规范总结_第1页
前端技术规范总结_第2页
前端技术规范总结_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一部分：目录、文件、CSS命名方式文件夹与文件名称、CSS样式命名、程序中的一些控件等等：名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主（不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂）。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。而且当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。例如：images(图形文件)，flash（Flash文件）等。命名方式：（性质_描素_位置_分类_数量）项相结合，采用简写、组合的方式形成通用规则。例如：news(性质)news_title(性质_描素)news_title_top(性质_描素_位置)news_title_top_01(性质_描素_位置_数量)news_title_top_a_01(性质_描素_位置_分类_数量)news_title_top_b_01(性质_描素_位置_分类_数量)常用目录名：data(数据库)images(图片)install(安装)templets(模版)include(包含)admin(后台)rss(定阅)media(媒体)config(配置)Script(脚本)Language(语言)style(样式)等……常用CSS名：页面外围控制整体布局宽度：wrapper头：header内容：content/container页面主体：main侧栏：sidebar尾：footer等……第二部分：结构（XHTML）网站的前端结构与表现分离，达到95%以上。正式上线后的网页代码结构要清晰、明朗，容易阅读，布局与结构的镶套尽量控制在4-5层以内，严格遵循w3c的xhtml1.0Transtitonal。

并遵循以下原则：DDT类型：XHTML1.0Transitional编码：utf-8元标记必须项：

<metaname="keywords"content=""/>该页面的关键词概况

<metaname="description"content=""/>该页面的简要描述

<metaname="robots"content="all"/>

具体内容根据SEO要求设置Html代码中的所有标签遵循XHTML1.0的书写规范，包括：标签全部使用小写；标签全部闭合；所有属性必须有值而且用双引号；把所有<和&特殊符号用编码表示；所有的标签必须合理嵌套；注释中不要使用--------如这样写是错误的：<!--注释------------注释-->；标签有语意：布局排版用<div>；标题用<h1>——<h6>；段落用<p>；无序列表用<ul>，有序列表用<ol>；放弃不被IE支持的标签，如<abbr；放弃不被w3c推荐的html4标签，如：<center><font><b>等等；title的合理应用：<a>标签必须用title；<img>必须赋予alt值；<div>可以用title说明；根据网站的结构，对HTML进行模块化，比如：信息页面的头部尾部的通用文件，功能页面的头部尾部的通用文件，分页文件，可以模块化的信息列表模块。JS：页面中的JS处理成外部文件，不能在页面中使用大量JS脚本，同时注意js文件调用的位置，比如统计代码跟页面的加载没有任何关系，必须放在页面最底部；尽量不要使用框架；为表单添加<lable>标签；所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的图片采用gif,jpg,png压缩格式，以减小页面下载数据量，<img>标记要有width,height属性第三部分：表现（CSS）CSS文件作为外部链接，在页面的<head>区链接调用，位置在元标记结束下一行，JS调用的上一行。视情况可以在页面中书写内联样式<style></style>，用于定义此页面特殊的样式和覆盖CSS样式库中一定需要更改覆盖的样式，位置在外部链接样式表的下一行；

CSS文件视重要程度添加注释，方法为/*注释*/；

CSS选择器命名书写规范：

#idname,.classname{

width:%或px\em;

height:%或px\em;

margin:

border:

padding:

---------------------------------------------------------容器长宽确定

background:#fffurl()repeatleftbottomfixed1px2px;

color:

font-family:“宋体”,Arial,Helvetica,sans-serif;

font-size:

line-height:

---------------------------------------------------------容器内容格式

display:

visibility:

overflow:

position:

top:

right:

bottom:

left:

float:

clear:

---------------------------------------------------------容器布局

}

每一个属性结尾都必须写分号，其中有的值如果不需要，可以不写，大体上是这样的顺序，也符合思考的顺序。

有几点注意事项：font-family:必须以sans-serif字体做结尾；减少样式数量，尽量重复使用；必须清除float；单位：使用像素（px）；颜色值：使用#RRGGBB格式第四部分：UE指导原则网站LOGO的视觉统一，网站主体的视觉风格、文本颜色、链接颜色、修饰图片风格以及按钮和表单控件的视觉进行统一；为每一个页面设定一个最合适的标题<title>，使用户和搜索引擎一目了然知道页面的主题；为大部分页面加入元标记，即<meta>相关内容，描述页面属性；在最终页<link>加入具有亲和力的版权说明、免责声明、交互设计说明文档的链接地址；页面中必须有回到“首页”的链接——一般做法是将站点LOGO加上首页的链接，最好还是有回到首页的文字链接；如果网站栏目很多，要让用户知道所处的页面属于哪个栏目之下，以及很轻松的可以回到上一级栏目——标签是一种不错的方法；现在位置。如果上一条原则处理的很好，“现在位置”可以去掉；搜索。合理的放置搜索表单，最好在首屏，并且确保搜索结果的准确性；表单设计原则:面向菜鸟和专业用户，填写项尽量精简，做简单的填写说明，仅放置与填写表单相关的链接，避免用户通过其他链接转移视线到别的地方，从而放弃填写表单清晰的验证——告诉用户为什么出现错误，并引导正确的填写；如果完成表单任务需要多个步骤，需要用图形或文字表明所需的步骤，以及当前正在进行的步骤——使用户知道离成功还有多远；如果可能，尽量先放置input、textaera等需要键盘输入的项，再放置下拉、单选、复选等键盘操作的项，紧接着是“提交”按钮——就是说，减少键盘操作被鼠标操作打断的次数；文本域允许更改内容的文本格式，比如加粗、字体大小、超链接、图片等等，而且，尽量让此内容与用户完成发布以后的内容格式相同；提供将表单保存为草稿的功能；设计符合习惯的表单。

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论