资源描述
Dreamweaver中命名规则整理及常用技巧.docx
《Dreamweaver中命名规则整理及常用技巧.docx》由会员分享,可在线阅读,更多相关《Dreamweaver中命名规则整理及常用技巧.docx(11页珍藏版)》请在冰豆网上搜索。
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.