Dreamweaver中命名規(guī)則整理及常用技巧

1、主要命名介紹acontainer "就是將頁面中的所有元素包在一起的局部,這局部還可以命名為:“wrapper “,"wrap ", "page .“header是網(wǎng)站頁面的頭部區(qū)域,一般來講,它包含網(wǎng)站的 logo 和一些其他元素.這局部還可以命名為 ：“page-header (或 pageHeader).“navbar 等同于橫向的導(dǎo)航欄,是最典型的網(wǎng)頁元素.這局部還可 以命名為：“nav , a navigation ,“ nav-wrapper .“Mend區(qū)域包含一般的鏈接和菜單,這局部還可以命名為：“subNav “, "link

2、s “,"sidebar-main .5. Main“Main是網(wǎng)站的主要區(qū)域,如果是博客的話它將包含的日志.這部 分還可以命名為：“ content ,“ main-content (或“mainContent ).“Sidebar 局部可以包含網(wǎng)站的次要內(nèi)容,比方最近更新內(nèi)容列表、 關(guān)于網(wǎng)站的介紹或廣告元素等這局部還可以命名為：“subNav二“side-panel ", a secondary-content ".Footer包含網(wǎng)站的一些附加信息,這局部還可以命名為:copyright ".ID命名(1)頁面結(jié)構(gòu)容器：container頁頭：he

3、ader內(nèi)容：content頁面主體：main頁尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column左右中：left right centerwrapper頁面外圍限制整體布局寬度:導(dǎo)航導(dǎo)航：nav主導(dǎo)航：mainbav 子導(dǎo)航：subnav頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu標(biāo)題:title 摘要：summary功能標(biāo)志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：regsiter 搜索：search 功能區(qū)：shop 標(biāo)題：ti

4、tle 力口入：joinus 狀態(tài)：status 按鈕：btn 滾動(dòng)：scroll 標(biāo)簽頁：tab文章列表：list提示信息：msg當(dāng)前的：current小技巧：tips圖標(biāo)：icon注釋：note指南：guild月艮務(wù)：service熱點(diǎn)：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyright網(wǎng)站公用相關(guān)Container div #container 容器Header or banner div #header 頁頭局部Main or global navigation div #main-nav 主導(dǎo)航Menu #men

5、u 菜單Sub Menu #submenu 子菜單Left or right side columns #sidebar-a, #sidebar-b左邊欄或右邊欄Main div #main 頁面主體Content div #content 內(nèi)容局部The main content area #content-main主要內(nèi)容區(qū)域Footer div #footer頁腳局部Tag #tag 標(biāo)簽Message #msg #message 提示信息Tips #tips 小技巧Vote #vote 投票Friend Link #friendlink友情連接Title #title 標(biāo)題Summar

6、y #summary商要Sub-navigation list #sub-nav二級導(dǎo)航Search input #search-input 搜索輸入框Search output #search-output搜索輸出和搜索結(jié)果相似Search #search 搜索Search results #search-results搜索結(jié)果Copyright information #copyright 版權(quán)信息brand #branding 商標(biāo)branding-logo #branding-logo LOGOSite information #siteinfo 網(wǎng)站信息Copyright infor

7、mation etc. #siteinfo-legal法律聲明Designer or other credits #siteinfo-credits信譽(yù)Join us #joinus力口入我們Partnership opportunities #partner 合作伙伴Services #service 月艮務(wù)Regsiter #regsiter 注冊Status #status 狀態(tài)電子貿(mào)易相關(guān)Products .products 產(chǎn)品Products prices .products-prices產(chǎn)品價(jià)格Products description .products-description產(chǎn)

8、品描述Products review .products-review產(chǎn)品評論Editor's review .editor-review 編輯評論New release .news-release最新產(chǎn)品Publisher .publisher 生產(chǎn)商Screen shot .screenshot 縮略圖FAQ .faqs常見問題Keyword .keyword 關(guān)鍵詞Blog .blog 博客Forum .forum 論壇考前須知-使用技巧元素居中margin:0 auto; text-align:center;text-align:center;這句是為了適應(yīng)IE6以下版本的瀏覽

9、器而加的,IE6以下對margin:0 auto;不能解析為居中,所以用這種方式來補(bǔ)救： 所以在寫代碼時(shí)把兩句都寫上.明確定義單位,除非值為0忘記定義尺寸的單位是 CSSlf手普遍的錯(cuò)誤.在 HTML中你可以只寫 width="100",但是在 CSS中,你必須給一個(gè)準(zhǔn)確的單位,比方： width:100px width:100em .只有兩個(gè)例外情況可以不定義單位：行 高和0值.除此以外,其他值都必須緊跟單位,注意,不要在數(shù)值和 單位之間加空格.區(qū)分大小寫當(dāng)在XHTM中使用CSS CSS里定義的元素名稱是區(qū)分大小寫的.為 了防止這種錯(cuò)誤,我建議所有的定義名稱都采用小寫.c

10、lass和id的值在HTMLF口 XHTM中也是區(qū)分大小寫的,如果你 一定要大小寫混合寫,請仔細(xì)確認(rèn)你在CSS勺定義和XHTML1的標(biāo)簽 是一致的.取消class和id前的元素限定 當(dāng)你寫給一個(gè)元素定義class或者id,你可以省略前面的元素限定, 由于ID在一個(gè)頁面里是唯一的,而 class可以在頁面中屢次使用.你限定某個(gè)元素毫無意義.例如：div#content /* declarations */ /* declarations */ 可以寫成#content /* declarations */ .details /* declarations */ 這樣可以節(jié)省一些字節(jié).元素屬性的默

11、認(rèn)值通常 padding 的默認(rèn)值為 0 , background-color 的默認(rèn)值是 transparent .但是在不同的瀏覽器默認(rèn)值可能不同. 如果怕有沖突,可以在樣式表一開始就先定義所有元素的margin和padding值都為0,象這樣：使用全局聲明建議使用* margin:0;padding:0;不需要重復(fù)定義可繼承的值CSSt子元素自動(dòng)繼承父元素的屬性值,象顏色、字體等,已經(jīng)在 父元素中定義過的,在子元素中可以直接繼承,不需要重復(fù)定義.但 是要注意,瀏覽器可能用一些默認(rèn)值覆蓋你的定義.最近優(yōu)先原那么如果對同一個(gè)元素的定義有多種,以最接近最小一級的定義為最 優(yōu)先,例如有這么一段代

12、碼Update: Lorem ipsum dolor set在CSS文件中,你已經(jīng)定義了元素p,又定義了一個(gè) class="update"P margin:1em 0;font-size:1em;color:#333;.update font-weight:bold;color:#600;這兩個(gè)定義中,class="update"將被使用,由于class比p更近.關(guān)于優(yōu)先原那么讀者可以自己查閱相關(guān)資料多重class定義一個(gè)標(biāo)簽可以同時(shí)定義多個(gè)class.例如：我們先定義兩個(gè)樣式,第 一個(gè)樣式背景為#666;第二個(gè)樣式有10 px的邊框.onewidth:

13、200px;background:#666;.twoborder:10px solid #F00;在頁面代碼中,我們可以這樣調(diào)用<div class="one two"></div>這樣最終的顯示效果是這個(gè)div既有#666的背景,也有10Px的 邊框.是的,這樣做是可以的,你可以嘗試一下.不需要給背景圖片路徑加引號為了節(jié)省字節(jié),我建議不要給背景圖片路徑加引號,由于引號不是必 須的.例如：background:url("images/*gif") #333;可以寫為background:url(images/*.gif) #333

14、;如果你加了引號,反而會(huì)引起一些瀏覽器的錯(cuò)誤.組選擇器(Group selectors)當(dāng)一些元素類型class或者id都有共同的一些屬性,你就可以 使用組選擇器來防止屢次的重復(fù)定義.這可以節(jié)省不少字節(jié).例如：定義所有標(biāo)題的字體、顏色和 margin ,你可以這樣寫：h1,h2,h3,h4,h5,h6 font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;color:#333;margin:1em 0;如果在使用時(shí),有個(gè)別元素需要定義獨(dú)立樣式,你可以再加上新 的定義,可以覆蓋老的定義,例如：h1 font

15、-size:2em; h2 font-size:; “e吊相對于字母高度的比例“%相對于長度單位的百分比例“px像素系統(tǒng)預(yù)設(shè)單位pt像點(diǎn)用正確的順序指定鏈接的樣式當(dāng)你用CSS來定義鏈接的多個(gè)狀態(tài)樣式時(shí),要注意它們書寫的順 序,正確的順序是:link :visited :hover :active .抽取第一個(gè)字 母是"LVHA",你可以記憶成"LoVe HAte"喜歡討厭.如果你的用戶需要用鍵盤來限制,需要知道當(dāng)前鏈接的焦點(diǎn),你 還可以定義：focus屬性.：focus屬性的效果也取決與你書寫的位置, 如果你希望聚焦元素顯示:hover效果,你就把：fo

16、cus寫在:hover前 面；如果你希望聚焦效果替代:hover效果,你就把：focus放在:hov er后面.參考去除浮動(dòng)一個(gè)非常常見的CSS問題,定位使用浮動(dòng)的時(shí)候,下面的層被浮動(dòng)的 層所覆蓋,或者層里嵌套的子層超出了外層的范圍.通常的解決方法是在浮動(dòng)層后面添加一個(gè)額外元素,例如一個(gè)div或者一個(gè)br,并且定義它的樣式為clear: both .這個(gè)方法有一 點(diǎn)牽強(qiáng),介紹一個(gè)博客可以去看看本人的方法是在樣式表中參加這句代碼:.clearfloat clear:both;height:0;font-size: 1px;line-height: 0px;然后在頁面中需要去除浮動(dòng)的地方參加：&l

17、t;br class="clearfloat" /><!-用于去除浮動(dòng)的元素->橫向居中(centering)這是一個(gè)簡單的技巧,但是值得再說一遍,由于我看見太多的新手 問題都是問這個(gè)：CSS®何橫向居中你需要定義元素的寬,并且定義 橫向的margin,如果你的布局包含在一個(gè)層(容器)中,就象這樣：你可以這樣定義使它橫向居中：#wrap width:760px; /*修改為你的層的寬度*/margin:0 auto;但是IE5/Win不能正確顯示這個(gè)定義,我們采用一個(gè)非常有用的技巧來解決：用text-align 屬性.就象這樣：body text

18、-align:center;)#wrap width:760px; /*修改為你的層的寬度*/margin:0 auto;text-align:left;)第一個(gè) body 的 text-align:center;規(guī)那么定義 IE5/Win 中 body的所有元素居中(其他瀏覽器只是將文字居中),第二個(gè)text-align: left;是將#warp中的文字居左.用css hack針對IE的優(yōu)化有些時(shí)候,你需要對IE瀏覽器的bug定義一些特別的規(guī)那么,這里有 太多的CS能巧(Hacks),我只使用其中的兩種方法,這兩種方法都 是最平安的.1、注釋的方法(a)在IE中隱藏一個(gè)CS淀義,你可以使用

19、子選擇器(child se lector):<html>body p /*定義內(nèi)容*/)(b)下面這個(gè)寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)* html p /* declarations */)(c)還有些時(shí)候,你希望IE/Win有效而IE/Mac隱藏,你可以使 用"反斜線技巧：/* */* html p declarations)/* */2、條件注釋(conditional comments)的方法另外一種方法,我認(rèn)為比 CSS Hacks更加經(jīng)得起考驗(yàn)就是采用 微軟的私有屬性條件注釋(conditional comments).用這個(gè)方法你可 以給IE單獨(dú)定義一些樣式,而不影響主樣式表的定義.就象這樣：<link rel="stylesheet" type="text/css" href="" /><!endif->調(diào)試技巧：層有多大當(dāng)調(diào)試CSS發(fā)生錯(cuò)誤,你就要象排版工人,逐行分析 CSS弋碼.我 通常在出問題的層上定義一個(gè)背景顏色,這樣就能很明顯看到層占據(jù)多大空間.有些人建議用border , 一般情況也是可以的,但問題是, 有時(shí)候border會(huì)增加元素的尺寸,border-top 和boeder-bottom會(huì) 破壞縱向margin的值,所以使用ba