本文共 12696 字,大约阅读时间需要 42 分钟。
文件名称统一用小写
的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符
;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。
HTML的命名原则
index.htm index.html index.asp
文件名(小写)index.htm index.html index.asp
;图片的命名原则
banner
,(范例:banner_sohu.gif banner_sina.gif
)logo
(范例:logo_police.gif logo_national.gif
)button
menu
(范例:menu_aboutus.gif menu_job.gif
)pic
(范例:pic_people.jpg
)title
(范例:title_news.gif
)menu1_on.gif menu1_off.gif
)javascript的命名原则
动态语言文件命名原则
register_form.asp register_post.asp topic_lock.asp
文件名 | 文件 |
---|---|
cn | 存放中文HTML文件 |
en | 存放英文HTML文件 |
flash | 存放Flash文件 |
images | 存放图片文件 |
imagestudio | 存放PSD源文件 |
flashstudio | 存放flash源文件 |
inc | 存放include文件 |
library | 存放DW库文件 |
media | 存放多媒体文件 |
project | 存放工程项目资料 |
temp | 存放客户原始资料 |
js | 存放JavaScript脚本 |
css | 存放CSS文件 |
CSS样式可细分为3类:
样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”(例:“ .shadow
”)
.no12
” 、“ .no12-24
”) HTML样式为设计师重新定义已有的HTML标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。样式名“HTML标签” (例:hr { border: 1px dotted #333333 }
)
动态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。
该样式写法有2种:a.nav:link
nav.a:link
第一种只能修饰<a>
标签中; 第二种可以修饰所有包含有<a>
标签的其他标签。 页面内的样式加载必须用链接方式 协作开发及分工:
class与id的使用:
为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide js_show
;
class与id命名:
规避class与id命名
<div id="mainnav"></div>
中加入新的div元素,<div id="mainnav"><div class="firstnav">...</div></div>
, 样式写法: #mainnav .firstnav{.......}
<div id="mainnav"><div class="main_firstnav">...</div></div>
, 样式写法: .main_firstnav{.......}
css属性书写顺序
布局定位属性-->自身属性-->文本属性-->其他属性
. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起.margin、padding、float(包括clear)、position(相应的 top,right,bottom,left)、display、visibility、overflow
等;width & height & background & border
;font、color、text-align、text-decoration、text-indent
等;list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom
等.书写代码前, 考虑并提高样式重复使用率;
充分利用html自身属性及样式继承原理减少代码量
比如:<ul class="list"><li>
这儿是标题列表<span>2010-09-15</span></ul>
定义ul.list li{position:relative} ul.list li span{position:absolute; right:0}
即可实现日期居右显示 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;
使用table标签时(尽量避免使用table标签)
width/ height/cellspacing/cellpadding
等table属性直接定义表现thead,tr,th,td,tbody,tfoot,colgroup,scope;
table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}
, base.css
文件中我会初始化表格样式)杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" />
兼容ie8;
用png图片
做图片时
png-8
格式background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
避免兼容性属性的使用, 比如text-shadow || css3
的相关属性;
减少使用影响性能的属性, 比如position:absolute || float ;
必须为大区块样式添加注释, 小区块适量注释;
代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;
部位名称 | 命名 |
---|---|
头 | header |
内容 | content/container |
尾 | footer |
导航 | nav |
侧栏 | sidebar |
栏目 | column |
页面外围控制整体布局宽度 | wrapper |
左右中 | left right center |
登录条 | loginbar |
标志 | logo |
广告 | banner |
页面主体 | main |
热点 | hot |
新闻 | news |
下载 | download |
子导航 | subnav |
菜单 | menu |
子菜单 | submenu |
搜索 | search |
友情链接 | friendlink |
页脚 | footer |
版权 | copyright |
滚动 | scroll |
内容 | content |
标签页 | tab |
文章列表 | list |
提示信息 | msg |
小技巧 | tips |
栏目标题 | title |
加入 | joinus |
指南 | guild |
服务 | service |
注册 | regsiter |
状态 | status |
投票 | vote |
合作伙伴 | partner |
部位名称 | 命名 |
---|---|
容器 | container |
页头 | header |
内容 | content/container |
页面主体 | main |
页尾 | footer |
导航 | nav |
侧栏 | sidebar |
栏目 | column |
页面外围控制整体布局宽度 | wrapper |
左右中 | left right center |
部位名称 | 命名 |
---|---|
导航 | nav |
主导航 | mainbav |
子导航 | subnav |
顶导航 | topnav |
边导航 | sidebar |
左导航 | leftsidebar |
右导航 | rightsidebar |
菜单 | menu |
子菜单 | submenu |
标题 | title |
摘要 | summary |
部位名称 | 命名 |
---|---|
标志 | logo |
广告 | banner |
登陆 | login |
登录条 | loginbar |
注册 | regsiter |
搜索 | search |
功能区 | shop |
标题 | title |
加入 | joinus |
状态 | status |
按钮 | btn |
滚动 | scroll |
标签页 | tab |
文章列表 | list |
提示信息 | msg |
当前的 | current |
小技巧 | tips |
图标 | icon |
注释 | note |
指南 | guild |
服务 | service |
热点 | hot |
新闻 | news |
下载 | download |
投票 | vote |
合作伙伴 | partner |
友情链接 | link |
版权 | copyright |
/* CSS Document */body { margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{ padding:0; margin:0;} table,td,tr,th{ font-size:12px;}li{ list-style-type:none;}img{ vertical-align:top;border:0;}ol,ul { list-style:none;}h1,h2,h3,h4,h5,h6 { font-size:12px; font-weight:normal;}address,cite,code,em,th { font-weight:normal; font-style:normal;}.fB{ font-weight:bold;}.f12px{ font-size:12px;}.f14px{ font-size:14px;}.left{ float:left;}.right{ float:right;}a { color:#2b2b2b; text-decoration:none;}a:visited { text-decoration:none;}a:hover { color:#ba2636;text-decoration:underline;}a:active { color:#ba2636;}
head区是指HTML代码的<head>
和</head>
之间的内容。
必须加入的标签
<!--- The site is designed by EHM,Inc 07/2005 --->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META name="author" content="webmaster@maketown.com">
<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
<LINK href="../css/style.css" rel="stylesheet" type="text/css">
<title>xxxxxxxxxxxxxxxxxx</title>
可以选择加入的标签
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Window-target" CONTENT="_top">
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指时间停留5秒<META NAME="robots" CONTENT="none">
all,none,index,noindex,follow,nofollow
。默认是all
。<link rel = "Shortcut Icon" href="favicon.ico">
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
<body>
标签: <body>
标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景<body bgcolor="#FFFFFF">
在设定字体样式时对于文字字号样式
和行间距
应必须使用CSS样式表。禁止在页面中出现 <font size=?>
标记。
在网页中中文应首选使用宋体。英文和数字首选使用verdana
和arial
两种字体。一般使用中文宋体的9pt 和11pt 或12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt 和14.7px 的字号比较合适。
为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br>
来人工干预分段。
不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
请不要在网页中连续出现多于一个的 也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace
以及透明的gif 图片
来实现。
行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%.
排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; }
然后给每一段加上 <p>
标记,注意,一般情况下,请不要省略 </p>
结束标记 。
网站中的链接路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样:<a href=”aboutus/index.htm”>
而应该这样:<a href=”aboutus/”>
,所有内页指向首页的链接写成<a href=”/”>
在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码“javascript:void(null)
”代替原来的“#
”标记
1px表格 style="border-collapse: collapse"
实例如下:设置亮、暗边框颜色
在写 <table>
互相嵌套时,严格按照规范,对于单独的一个<table>
来说,<table><tr>
对齐,<td>
缩进两个半角空格,<td>
中如果还有嵌套的表格,<table>
也缩进两个半角空格,如果<td>
中没有任何嵌套的表格,</td>
结束标记应该与 <td>
处于同一行,不要换行
这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写:
一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 标记,以便能够使这个大表格分块显示
首页Flash 网页大小应限定在 200K 以下,尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在 70K 左右,尽可能的使用背景颜色替换大块同色图片。
asp标准写法 <!--#include file="inc/index_top.asp" -->
<%@ include file="../inc/index_top..jsp" %>
都是提示性语言标签,请注意它们之间的区别。
用法如下:
文字
文字
网页不会被缓存
Response.Expires = -1 Response.ExpiresAbsolute = Now() - 1 Response.cachecontrol = "no-cache"
<a href=”url”>
而不 是 <a href=url>.
为了便于INTERNET上信息的传播,一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO,目前有三种规格:
图片经过优化以加快下载的速度,有较佳的视觉空间效果,用图要与页面风格、页面内容相符;制作精美,细节处理得当。
区别IE6,IE7,IE8,FF。
一种是在不同文件中处理,另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
同一文件中处理
不同文件中处理.
转载地址:http://jdqwi.baihongyu.com/