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“.
one
7.Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.
ID命名
(1)页面结构
容器: container
页头：header
内容：content
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
左右中：left right center
页面外围控制整体布局宽度：wrapper
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
two
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
three
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
网站公用相关
Container div #container 容器
Header or banner div #header 页头部分
Main or global navigation div #main-nav 主导航Menu #menu 菜单
Sub Menu #submenu 子菜单
four
Left or right side columns #sidebar-a, #sidebar-b 左边栏或右边栏
Main div #main 页面主体
Content div #content 内容部分
The main content area #content-main 主要内容区域
Footer div #footer 页脚部分
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Sub-navigation list #sub-nav 二级导航
Search input #search-input 搜索输入框
Search output #search-output 搜索输出和搜索结果相似
Search #search 搜索
Search results #search-results 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #branding-logo LOGO
Site information #siteinfo 网站信息
five
Copyright information etc. #siteinfo-legal 法律声明Designer or other credits #siteinfo-credits 信誉Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴Services #service 服务
Regsiter #regsiter 注册
Status #status 状态
电子贸易相关
Products .products 产品
Products prices .products-prices 产品价格
Products description .products-description 产品描述Products review .products-review 产品评论
Editor's review .editor-review 编辑评论
New release .news-release 最新产品
Publisher .publisher 生产商
Screen shot .screenshot 缩略图
FAQ .faqs 常见问题
Keyword .keyword 关键词
Blog .blog 博客
Forum .forum 论坛
six
注意事项-使用技巧
元素居中
{margin:0 auto; text-align:center;}
text-align:center;这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:0 auto;不能解析为居中，所以用这种方式来补救，所以在写代码时把两句都写上。

明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。

在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。

只有两个例外情况可以不定义单位：行高和0值。

除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。

为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

取消class和id前的元素限定
seven
当你写给一个元素定义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;
}
不需要重复定义可继承的值
eight
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。

但是要注意，浏览器可能用一些默认值覆盖你的定义。

最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个class="update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class="update"将被使用，因为class比p更近。

关于优先原则读者可以自己查阅相关资料
nine
多重class定义
一个标签可以同时定义多个class。

例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
<div class="one two"></div>
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。

是的，这样做是可以的，你可以尝试一下。

不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。

例如：
background:url("images/***.gif") #333;
可以写为
background:url(images/***.gif) #333;
如果你加了引号，反而会引起一些浏览器的错误。

ten
组选择器(Group selectors)
当一些元素类型class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。

这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans -serif;
color:#333;
margin:1em 0;
}
如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }
“em”相对于字母高度的比例
“%”相对于长度单位的百分比例
“px”像素（系统预设单位）
“pt”像点
用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是:link :visited :hover :active。

抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。

:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hov er后面。

（参考）
清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个d iv或者一个br，并且定义它的样式为clear: both。

这个办法有一点牵强，介绍一个博客可以去看看:/tang_how ell/blog/static/3144675020116102543221/
本人的方法是在样式表中加入这句代码：
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
然后在页面中需要清除浮动的地方加入：
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：你可以这样定义使它横向居中：
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。

就象这样：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body 的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align: left;是将#warp中的文字居左。

用css hack针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(Hacks)，我只使用其中的两种方法，这两种方法都是最安全的。

1、注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child se lector):
<html>body p {
/* 定义内容 */
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
/* \*/
* html p {
declarations
}
/* */
2、条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。

用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。

就象这样：
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。

我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。

有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会
破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。

outline看起来象boed er，但不会影响元素的尺寸或者位置。

只有少数浏览器支持outline 属性，我所知道的只有Safari、OmniWeb、和Opera。

CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。

在经过不断实践后，我决定采用下面这样的书写样式：selector1, selector2 {
property:value;
border:1px solid #ccc;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。

在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号
而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

其它的写法还有：selector1, selector2 {property:value; bo rder:1px solid #ccc;}
主流浏览器说明（十大主流）：在不同的网站排名上会有不同的变化，不过都是这十大主流。

IE（市场份额最大），
Chrome
Firefox
Safair
Opera
傲游
奇虎360
搜狗
Theworld
枫树浏览器
建议的做测试的时候多使用几种浏览器测试，平时用FF和IE测试就好（代表两类不同的解析内核），
推荐几个学习DW的网站
1./tang_howell/blog/static/31446750 20116102543221/
2./blog/2012/05/responsive_we b_design.html
3./
4./
5./
6./portal.php?mod=topic&topicid= 13
7./index.php/archives/category /html-css。