网页制作前段架构

一.Html文档结构

1. 静态页面XHTML代码应采用自动缩进的形式编写,这样代码层次结构清晰。
2.页面一律采用UTF-8编码,避免因编码不一致而导致页面乱码。
3.非特殊情况下必须把CSS外部链接放到页面的顶部(<head>… </ head>标签之间)。
4.非特殊情况下必须把JS代码或外部链接放到页面的底部(</ body>标签之后),工具类 JS嵌入的JS文件除外。
应给每个页面的TITLE进行命名,所有中文页面TITLE设置为本页面的内容描述
5.尽量减少DIV的嵌套层数。
6.统一域名下的项目页面链接使用相对路径。
7.所有XHTML代码必须全部小写。
8.XHTML标签的属性值必须用双引号(””)括起来,并且一定要有值,不能简写缩写。
9.双标记签都要有开始和结束标签,单标记标签的后面一定要加“/”,例如:<br />等,并且有正确的层次。
10.非特殊情况下要求表现和内容分离,代码中不要涉及任何表现的元素,例如:style、font等。
11.id属性,同一页面不要重复使用同一id。
12.给重要图片加上alt属性;给重要的元素和截断的元素加上title。
13.行距建议用百分比来定义,常用的行距的值是line-height: 150%。
14.表格的嵌套尽量控制在三层以内。
15.为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br />来人工干预分段。
16.网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象,非必须情况下请尽量控制页面的大小
17.为了保证浏览器的兼容性,必须设置页面背景<body  bgcolor="#FFFFFF">。
18.超过三屏的内容,应在头部设提纲,直接链接到文内锚点 。

二.css结构

对于每个项目的CSS开发必须采用分层的设计思想,主要为三个大的层次:全局样式、通用元素和结构布局、具体的块状表现区域。对于层次的划分再做一次扩充:
前端固定结构内可进一步细分到:导航系统(包括:菜单,导航,面包屑,站点地图),辅助系统(提示,指南,FAQ),全局通用性功能模块(搜索功能块,登入/登出功能块)。
2.1页面结构 
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

2.2导航

导航: nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

2.3功能 

标志:logo
广告:banner
登录:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

三.图像约定

1.图片采用 gif , jpg 压缩格式,以减小页面下载数据量。<img />标记要增加width, height,以免图像不能正常显示时,出现页面混乱现象。若要另外控制图片的大小,可以通过css样式表来确定,方法查看css的优先级方式。
2.在页面尽量少使用图片,只在必要的情况下使用图片,图片大小最好不要超过8KB。
3.图片统一放在images文件夹下面。
4.图片的存储方式,图片的存储应以web(crtl+alt+shift+s)格式存储为jpeg、gif、png,对以jpeg的压缩品质,保持在80的品质就已经很清晰,这样可以有效的降低图片的大小,提高网页的加载速度。
四.网页注释
注释格式为<!--这里是注释-->感叹号后面2个横线,结束时2个横线,不要在注释内容中使“--”,“--”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是错误的:
<!--这里是注释-----------这里是注释-->
<!-----------这里是注释-----------这里是注释----------->

五.css编码规范

1.为了保证不同浏览器上字号保持一致,字号尽量采用点数(pt)和像素(px)来定义。 
2.原则上尽量采用CSS缩写。
示例:padding-top:1px;padding-left:2px;padding-bottom:3px;padding-rigth:4px
可缩写为:padding:1px 4px 3px 2px;
3. CSS文件一律采用UTF-8编码,避免因为编码问题而造成页面结构混乱。

六.兼容性

Css的兼容性写法可以有效的解决网页在制作的过程中遇到的尺寸问题,熟练掌握这种兼容性写法,对网页的工作中有很大帮助。
Css的终极写法:
.e{
Color:#fff;          /*FF,OP*/
[;color:#fff;]       /*SA,CH*/
Color:#fff\9;        /*IE6,7,8*/
*color:#fff;         /*IE7,6*/
_color:#fff;         /*IE6*/
}

七.css优先级的四大原则

1.继承不如指定
特别指定的等级要大于继承的等级。
2.#ID>.class>标签选择器
#id选择器在页面中只能出现一次,其选择等级大于类别.class的等级,标签选择器主要为:
H1, p, span, a
这些标签选择器的等级要低。
3.包含越具体越强大
当对某个元素的css选择符样式定义的越具体,层级越明确。
4.标签ID>#ID,标签.class>.class
其中四大原则的权重问题遵循以下规则
原则一 > 原则二 > 原则三 > 原则四

八.css选择器 

选择器的使用主要方式选用后代选择器。
这样编写便于将块级元素的样式集中,加上注释后便于查看和维护,不仅让编写者思路更清晰,还能让别的编辑者能够清晰的了解架构。

您可以选择一种方式赞助本站

支付宝转账赞助