资源描述
Dreamweaver中命名规则整理及常用技巧.docx
《Dreamweaver中命名规则整理及常用技巧.docx》由会员分享，可在线阅读，更多相关《Dreamweaver中命名规则整理及常用技巧.docx（9页珍藏版）》请在冰点文库上搜索。
Dreamweaver中命名规则整理及常用技巧
主要命名介绍
1.Container
“container“就是将页面中的所有元素包在一起的部分，这部分还可以命名为:
“wrapper“,“wrap“,“page“.
2.Header
“header”是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。
这部分还可以命名为:
“page-header”（或pageHeader）.
3.Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。
这部分还可以命名为:
“nav”,“navigation”,“nav-wrapper”.
4.Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为:
“subNav“,“links“，“sidebar-main”.
5.Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。
这部分还可以命名为:
“content“,“main-content”（或“mainContent”）。
6.Sidebar
“Sidebar”部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为:
“subNav“,“side-panel“,“secondary-content“.
7.Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为:
“copyright“.
ID命名
（1）页面结构
容器:
container
页头：
header
内容：
content
页面主体：
main
页尾：
footer
导航：
nav
侧栏：
sidebar
栏目：
column
左右中：
leftrightcenter
页面外围控制整体布局宽度：
wrapper
（2）导航
导航：
nav
主导航：
mainbav
子导航：
subnav
顶导航：
topnav
边导航：
sidebar
左导航：
leftsidebar
右导航：
rightsidebar
菜单：
menu
子菜单：
submenu
标题:
title
摘要:
summary
（3）功能
标志：
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
网站公用相关
Containerdiv#container容器
Headerorbannerdiv#header页头部分
Mainorglobalnavigationdiv#main-nav主导航
Menu#menu菜单
SubMenu#submenu子菜单
Leftorrightsidecolumns#sidebar-a,#sidebar-b左边栏或右边栏
Maindiv#main页面主体
Contentdiv#content内容部分
Themaincontentarea#content-main主要内容区域
Footerdiv#footer页脚部分
Tag#tag标签
Message#msg#message提示信息
Tips#tips小技巧
Vote#vote投票
FriendLink#friendlink友情连接
Title#title标题
Summary#summary摘要
Sub-navigationlist#sub-nav二级导航
Searchinput#search-input搜索输入框
Searchoutput#search-output搜索输出和搜索结果相似
Search#search搜索
Searchresults#search-results搜索结果
Copyrightinformation#copyright版权信息
brand#branding商标
branding-logo#branding-logoLOGO
Siteinformation#siteinfo网站信息
Copyrightinformationetc.#siteinfo-legal法律声明
Designerorothercredits#siteinfo-credits信誉
Joinus#joinus加入我们
Partnershipopportunities#partner合作伙伴
Services#service服务
Regsiter#regsiter注册
Status#status状态
电子贸易相关
Products.products产品
Productsprices.products-prices产品价格
Productsdescription.products-description产品描述
Productsreview.products-review产品评论
Editor'sreview.editor-review编辑评论
Newrelease.news-release最新产品
Publisher.publisher生产商
Screenshot.screenshot缩略图
FAQ.faqs常见问题
Keyword.keyword关键词
Blog.blog博客
Forum.forum论坛
注意事项-使用技巧
元素居中
{margin:
0auto;text-align:
center;}
text-align:
center;这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:
0auto;不能解析为居中，所以用这种方式来补救，所以在写代码时把两句都写上。
明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。
在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：
width:
100pxwidth:
100em。
只有两个例外情况可以不定义单位：
行高和0值。
除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。
为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而class可以在页面中多次使用。
你限定某个元素毫无意义。
例如：
div#content{/*declarations*/}
fieldset.details{/*declarations*/}
可以写成
#content{/*declarations*/}
.details{/*declarations*/}
这样可以节省一些字节。
元素属性的默认值
通常padding的默认值为0，background-color的默认值是transparent。
但是在不同的浏览器默认值可能不同。
如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
使用全局声明（建议使用）
*{
margin:
0;
padding:
0;
}
不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。
但是要注意，浏览器可能用一些默认值覆盖你的定义。
最近优先原则
如果对同一个元素的定义有多种，以最接近（最小一级）的定义为最优先，例如有这么一段代码
Update:
Loremipsumdolorset
在CSS文件中，你已经定义了元素p，又定义了一个class="update"
p{
margin:
1em0;
font-size:
1em;
color:
#333;
}
.update{
font-weight:
bold;
color:
#600;
}
这两个定义中，class="update"将被使用，因为class比p更近。
关于优先原则读者可以自己查阅相关资料
多重class定义
一个标签可以同时定义多个class。
例如：
我们先定义两个样式，第一个样式背景为#666；第二个样式有10px的边框。
.one{width:
200px;background:
#666;}
.two{border:
10pxsolid#F00;}
在页面代码中，我们可以这样调用
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。
是的，这样做是可以的，你可以尝试一下。
不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。
例如：
background:
url（"images/***.gif"）#333;
可以写为
background:
url（images/***.gif）#333;
如果你加了引号，反而会引起一些浏览器的错误。
组选择器（Groupselectors）
当一些元素类型class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。
这可以节省不少字节。
例如：
定义所有标题的字体、颜色和margin，你可以这样写：
h1,h2,h3,h4,h5,h6{
font-family:
"LucidaGrande",Lucida,Arial,Helvetica,sans-serif;
color:
#333;
margin:
1em0;
}
如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
h1{font-size:
2em;}
h2{font-size:
1.6em;}
“em”相对于字母高度的比例
“%”相对于长度单位的百分比例
“px”像素（系统预设单位）
“pt”像点
用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是:
link:
visited:
hover:
active。
抽取第一个字母是"LVHA"，你可以记忆成"LoVeHAte"（喜欢讨厌）。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:
focus属性。
:
focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:
hover效果，你就把:
focus写在:
hover前面；如果你希望聚焦效果替代:
hover效果，你就把:
focus放在:
hover后面。
（参考）
清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear:
both。
这个办法有一点牵强，介绍一个博客可以去看看:
本人的方法是在样式表中加入这句代码：
.clearfloat{clear:
both;height:
0;font-size:
1px;line-height:
0px;}
然后在页面中需要清除浮动的地方加入：
--用于清除浮动的元素-->
横向居中（centering）
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：
CSS如何横向居中？
你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层（容器）中，就象这样：
你可以这样定义使它横向居中：
#wrap{
width:
760px;/*修改为你的层的宽度*/
margin:
0auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：
用text-align属性。
就象这样：
body{
text-align:
center;
}
#wrap{
width:
760px;/*修改为你的层的宽度*/
margin:
0auto;
text-align:
left;
}
第一个body的text-align:
center;规则定义IE5/Win中body的所有元素居中（其他浏览器只是将文字居中），第二个text-align:
left;是将#warp中的文字居左。
用csshack针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧（Hacks），我只使用其中的两种方法，这两种方法都是最安全的。
1、注释的方法
（a）在IE中隐藏一个CSS定义，你可以使用子选择器（childselector）:
bodyp{
/*定义内容*/
}
（b）下面这个写法只有IE浏览器可以理解（对其他浏览器都隐藏） *htmlp{
/*declarations*/
}
（c）还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
/*\*/
*htmlp{
declarations
}
/**/
2、条件注释（conditionalcomments）的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释（conditionalcomments）。
用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。
就象这样：
--[ifIE]>
[endif]-->
调试技巧：
层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。
我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。
有些人建议用border，一般情况也是可以的，但问题是，有时候border会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。
outline看起来象boeder，但不会影响元素的尺寸或者位置。
只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。
在经过不断实践后，我决定采用下面这样的书写样式：
selector1,selector2{
property:
value;
border:
1pxsolid#ccc;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。
在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
最后，关闭的大括号}单独写一行。
其它的写法还有：
selector1,selector2{property:
value;border:
1pxsolid#ccc;}
主流浏览器说明（十大主流）：
在不同的网站排名上会有不同的变化，不过都是这十大主流。
IE（市场份额最大），
Chrome
Firefox
Safair
Opera
傲游
奇虎360
搜狗
Theworld
枫树浏览器
建议的做测试的时候多使用几种浏览器测试，平时用FF和IE测试就好（代表两类不同的解析内核），
推荐几个学习DW的网站
1.
2.
3.
4.
5.
6.
7.
升级会员 