web標(biāo)準(zhǔn)頁面制作規(guī)范.ppt

Web標(biāo)準(zhǔn)頁面制作規(guī)范,目錄,文件目錄命名規(guī)范 HTML文件命名規(guī)范 HTML代碼規(guī)范 圖片制作規(guī)范 CSS編寫規(guī)范,文件目錄命名原則 以最少的層次提供最清晰簡(jiǎn)便的訪問結(jié)構(gòu)，并能夠使所有項(xiàng)目參與者清晰理解和記憶每一個(gè)文件目錄的意義，從而可以更方便的查找、修改、移植等管理操作，提高工作效率。 文件目錄名稱統(tǒng)一用小寫的英文單詞，長(zhǎng)度不超過20個(gè)字符。如果需要加數(shù)字以區(qū)分頁面文件，可以在單詞后面添加數(shù)字，但是禁止用數(shù)字開頭、禁止用中文字符、禁止用特殊字符作為文件目錄的名稱。 文件目錄名稱的命名要與所定義的內(nèi)容語義接近，字母要小寫，需要兩個(gè)以上單詞表達(dá)時(shí)，第二個(gè)單詞首字母大寫，不要超過四個(gè)單詞，如果單詞過長(zhǎng)，取其前三個(gè)字母。 根目錄一般只存放index.htm以及其他必須的系統(tǒng)文件；每個(gè)主要欄目開設(shè)一個(gè)相應(yīng)的獨(dú)立目錄；以欄目名稱英文單詞或單詞縮寫命名；例如：根目錄下的images目錄用于存放各頁面都要使用的所有圖片；根目錄下的javascript目錄存放所有JS腳本文件；所有CSS文件存放在根目錄下css目錄；等等。,目錄結(jié)構(gòu)命名規(guī)范,文件目錄命名原則 清晰的站點(diǎn)目錄結(jié)構(gòu)方便文件的維護(hù)和管理，同時(shí)對(duì)增加搜索引擎的友好度和移植也有著重要的影響。 例如： 項(xiàng)目根目錄下Style文件夾css樣式文件夾，images文件夾， icon文件夾名，js文件夾。,Style文件夾內(nèi)文件命名 項(xiàng)目靜態(tài)頁面命名 項(xiàng)目根目錄下項(xiàng)目名稱（不可以用中文）頁面.html文件（不可以用中文）,目錄結(jié)構(gòu)命名參考列表,HTML文件命名規(guī)范,HTML文件命名規(guī)范如下： 文件名要以最少的字母達(dá)到最容易理解的意義，盡量按單詞的英語翻譯為名稱。如help.html（幫助中心頁面） 文件名稱應(yīng)當(dāng)統(tǒng)一使用小寫的英文字母、數(shù)字組合，長(zhǎng)度不超過20個(gè)字符。 禁止使用英文和中文拼音混搭；禁止用數(shù)字開頭、禁止用中文字符、禁止用特殊字符作為文件的名稱。 登錄頁文件名：login.html，首頁文件名：index.html，二級(jí)頁文件：name.html 多個(gè)同類型文件使用英文字母加下劃線擴(kuò)展名。例如： message.html ； message_add.html,HTML命名參考列表,HTML代碼規(guī)范,DOCTYPE文檔聲明標(biāo)準(zhǔn)代碼 要建立符合標(biāo)準(zhǔn)的網(wǎng)頁，DOCTYPE聲明是必不可少的關(guān)鍵組成部分；一個(gè)正確的DOCTYPE，你的標(biāo)識(shí)和CSS才會(huì)完美生效。 DOCTYPE聲明必須放在每一個(gè)XHTML文檔最頂部，在所有代碼和標(biāo)識(shí)之上。 XHTML 1.0 提供了三種DTD聲明可供選擇： 嚴(yán)格型：稱之為嚴(yán)格型，這是最理性的文檔類型，在往后的日子里會(huì)逐步普及。目前暫不推薦使用。DTD(XHTML 1.0 Strict) 過渡型：現(xiàn)在的站點(diǎn)基本用這種，對(duì)于大多數(shù)接觸web標(biāo)準(zhǔn)的設(shè)計(jì)師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇。因?yàn)檫@種DTD還允許我們使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，也比較容易通過W3C的代碼校驗(yàn)。 框架型：專門針對(duì)框架頁面設(shè)計(jì)使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD 。DTD(XHTML 1.0 Frameset) 。,HTML代碼規(guī)范,CSS樣式表定義規(guī)范 CSS文件引用標(biāo)準(zhǔn)代碼： 除特殊的css樣式之外（如”display:none”），其他所有的樣式表應(yīng)當(dāng)編寫在外部css樣式表中；禁止使用style來單獨(dú)定義頁面的樣式； JavaScript腳本定義規(guī)范 腳本引用方式 腳本引用標(biāo)準(zhǔn)代碼： 為了減小頁面的加載負(fù)擔(dān)，除特殊的頁面效果需要之外，其他所有的JS腳本都應(yīng)當(dāng)編寫在外部js文件中；,HTML代碼規(guī)范,meta標(biāo)簽描述 語言編碼聲明: 為了被瀏覽器正確解釋和通過W3C代碼校驗(yàn)，XHTML文檔必須聲明它所使用的編碼語言；統(tǒng)一規(guī)定使用： 網(wǎng)頁描述設(shè)置 描述網(wǎng)頁的內(nèi)容概況，利于搜索引擎檢索信息，建議不要超過30到35個(gè)字符。如： 搜索關(guān)鍵字設(shè)置 描述網(wǎng)頁的 “關(guān)鍵詞”，利于搜索引擎檢索信息，建議不要重復(fù)和堆砌關(guān)鍵詞。如：,HTML代碼規(guī)范,Title代碼規(guī)范 對(duì)于web軟件界面頁面標(biāo)題，應(yīng)當(dāng)采用軟件項(xiàng)目名稱作為標(biāo)題標(biāo)簽，如：edus教務(wù)管理系統(tǒng) 標(biāo)簽和標(biāo)簽屬性屬性名稱必須小寫 HTML要求所有的標(biāo)簽必須使用小寫。例如：必須寫成，必須寫成。 在標(biāo)簽中編寫屬性，必須使用小寫，正確的寫法是： ，不允許使用CLASS或Class這樣的形式。 屬性值必須使用雙引號(hào) 在HTML代碼中，必須使用雙引號(hào)來填寫屬性值，以免引發(fā)不必要的頁面問題，正確的寫法是： 、 不允許使用、這樣的形式,HTML代碼規(guī)范,不允許使用屬性簡(jiǎn)寫 在HTML代碼中不允許使用簡(jiǎn)寫屬性，必須使用完整的寫法，正確的寫法： 不允許使用這樣簡(jiǎn)寫的形式。 必須使用結(jié)束標(biāo)簽 頁面中如果有開始標(biāo)簽，就必須有結(jié)束標(biāo)簽，例如： 如果使用img或 br、hr、input這樣的單體標(biāo)簽，那么必須使用空格加正斜線作為結(jié)束，例如： ,HTML代碼規(guī)范,必須設(shè)置圖片的alt屬性 alt屬性指定了當(dāng)圖片不能顯示的時(shí)候就顯示供替換文本，這樣做對(duì)使用不同頁面的瀏覽器的用戶來說非常有幫助，而且對(duì)純文本瀏覽器和使用屏幕閱讀機(jī)的用戶來說是至關(guān)重要的。正確的寫法： 所有的特殊符號(hào)編碼化 ，不是標(biāo)簽的一部分，必須被編碼為,HTML代碼規(guī)范,頁面中主要的區(qū)快加上注釋 由于瀏覽器的兼容性對(duì)XHTML頁面的解析不同，過多的注釋會(huì)造成一些頁面錯(cuò)亂的問題；因此在頁面主要區(qū)塊前加注釋。 如： 標(biāo)簽必須合理嵌套 因?yàn)閄HTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，因此所有的標(biāo)記都必須按合理順序嵌套。 合理的嵌套格式： 不合理嵌套格式： 內(nèi)聯(lián)元素標(biāo)簽不可以嵌套塊元素標(biāo)簽，如： 必須使用統(tǒng)一的后綴 為了統(tǒng)一管理，靜態(tài)頁面必須使用統(tǒng)一的頁面后綴.html。例如：index.html。（index.html和index.htm文件兩個(gè)不同的文件）,HTML代碼規(guī)范,正確使用HTML標(biāo)簽定義頁面內(nèi)容,HTML代碼規(guī)范,Table標(biāo)簽定義規(guī)范 避免嵌套過多的表格，嵌套盡量不要超過3層。 對(duì)于不可避免的表格嵌套，每級(jí)table以一個(gè)“TAB”鍵縮進(jìn)，確保代碼層次分明； 建議不要采用thead、tfoot 以及 tbody 元素。 表格的樣式應(yīng)當(dāng)統(tǒng)一使用css定義； 表格的填充（cellpadding）、間距（cellspacing）屬于內(nèi)置屬性，無法用css定義控制； 表格的寬度（width）避免使用數(shù)值控制，應(yīng)當(dāng)用百分比值來控制，以方便UI的制作修改和界面的升級(jí)拓展； 表格線的是通過設(shè)置表格的屬性參數(shù)填充（cellpadding）、間距（cellspacing）來實(shí)現(xiàn)表格線的粗細(xì)寬度；然后分別定義表格的背景色和表格列的背景色來實(shí)現(xiàn)表格線顏色；,HTML代碼規(guī)范,頁面寬度的設(shè)定 采用百分比定義頁面寬度 代碼格式：例：width：100%； 解釋說明：采用%百分比設(shè)定頁面寬度時(shí)，可以隨著瀏覽器寬度的改變而改變。在制作過程中一定要考慮好頁面內(nèi)容的表現(xiàn)，要做到內(nèi)容在不同寬度瀏覽器中顯示時(shí)布局要整齊、內(nèi)容排版比例協(xié)調(diào)。 采用固定像素定義頁面寬度 代碼格式：例：width：1004px； 解釋說明：采用固定值設(shè)定頁面寬度時(shí)，頁面不會(huì)隨著瀏覽器寬度的改變而改變。,圖片制作規(guī)范,圖片命名規(guī)范 名稱為英文單詞，如果需要加數(shù)字表達(dá)的，可以在單詞或拼音后面添加數(shù)字，但是禁止用數(shù)字開頭、禁止用中文字符、禁止用特殊字符做為文件的名稱。 圖片文件名稱的命名要與所定義的內(nèi)容語義接近，字母要小寫，需要兩個(gè)以上單詞表達(dá)時(shí)，用下劃線分開兩個(gè)單詞，不要超過三個(gè)單詞，如果單詞過長(zhǎng)，取其前三個(gè)字母。 圖片名稱分為頭尾兩部分，中間用下劃線隔開。 頭部分表示此圖片的大類性質(zhì)。例如：放置在頁面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片我們?nèi)∶篵anner；標(biāo)志性的圖片我們?nèi)∶麨椋簂ogo；在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton；在頁面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu；裝飾用的照片我們?nèi)∶簆ic；不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle依照此原則類推。 尾部分用來表示圖片的具體含義，用英文字母表示。例如： banner_sina.gif menu_aboutus.gif menu_job.gif logo_police.gif logo_national.gif pic._people.jpg pic_hill.jpg.,CSS文件命名規(guī)范,CSS文件命名規(guī)范 CSS文件名稱統(tǒng)一用小字的英文單詞，長(zhǎng)度不超過20個(gè)字符。如果需要加數(shù)字和下劃線以區(qū)分頁面文件，可以在單詞后面添加數(shù)字，但是禁止用數(shù)字開頭、禁止用中文字符、禁止用特殊字符作為文件的名稱 CSS文件名稱的命名要與所定義的內(nèi)容語義接近，字母要小寫，需要兩個(gè)以上單詞表達(dá)時(shí)，第二個(gè)單詞首字母大寫，不要超過四個(gè)單詞，如果單詞過長(zhǎng)，取其前三個(gè)字母。 系統(tǒng)公共樣式表：base.css；（頁面中基礎(chǔ)的樣式） 系統(tǒng)公共（功能性）模塊樣式表：global.css（如系統(tǒng)中對(duì)話框及按 鈕的樣式）其他根據(jù)各個(gè)頁面的名稱來命名。例如：主要的： master.css 主題：theme.css ，專欄：column.css ，文字：font.css 表格：table.css ，控件樣式：userControls.css,CSS文件命名規(guī)范,CSS文件名稱命名參考列表,CSS代碼規(guī)范,CSS文件的編碼格式 如果項(xiàng)目對(duì)編碼有要求，則需遵守指定的編碼要求；如果沒有要求則默認(rèn)為國(guó)際編碼utf-8。如： charset “utf-8“; CSS文件的引入 所有的CSS的定義盡量書寫在外部樣式表中。除特殊需要外，頁面中禁止使用style進(jìn)行CSS定義。 零值的縮寫 css中值都必須帶明確的單位，0值除外，可以省去單位。例如bodymragin:0; 避免使用id定義CSS 在頁面中，除特殊需要外，盡量的少用或避免使用id來定義程序頁面的CSS樣式；以免給程序頁面的開發(fā)和修改帶來不必要的麻煩；解決方法就是統(tǒng)一使用class（類）來控制它們的樣式；,CSS代碼規(guī)范,CSS屬性順序化 顯示屬性 display 、 list-style 、position 、float 、clear 自身屬性 width 、height 、margin 、 padding 、border 、 background 文本屬性 color 、 font 、 text-decoration 、text-align vertical-align 、white-space 、other text 、 content 屬性值書寫順序 外邊框margin和內(nèi)邊距padding的書寫順序應(yīng)當(dāng)按照“上右下左”的順時(shí)針順序書寫屬性數(shù)值。 偽類書寫順序 偽類必須按照順序定義：當(dāng)你用CSS來定義鏈接的多個(gè)狀態(tài)偽類樣式時(shí)，應(yīng)當(dāng)遵循正確書寫順序。正確的順序是：:link :visited :hover :active。抽取第一個(gè)字母是“LVHA”。否則，書寫順序錯(cuò)誤將導(dǎo)致CSS效果將無法正常生效顯示。,CSS代碼規(guī)范,注釋的寫法 CSS文件相關(guān)信息放在文件中最上部分 /* * * 文件名稱：common.css * 編 寫 者：* * 編寫日期：20012-08-08 * 內(nèi)容概要：頁面基礎(chǔ)公共樣式 * */ 模塊內(nèi)容樣式注釋信息 /* 模塊內(nèi)容樣式 開始 */ 模塊內(nèi)容具體樣式 /* 模塊內(nèi)容樣式 結(jié)束 */ CSSHack注釋 使用了CSSHack，一定要添加注釋，并且要寫明為什么使用此CSSHack。例如： .top width:200px; *width:210px;/*IE7*/ _width:208px;/*IE6*/ ,CSS代碼規(guī)范,注釋的修改注意 修改項(xiàng)目公共樣式時(shí)，修改注釋信息 /* * * 文件名稱：common.css * 編 寫 者：*（修改人） * 編寫日期：20012-08-08（修改日期） * 內(nèi)容概要：頁面基礎(chǔ)公共樣式（修改內(nèi)容簡(jiǎn)單描述） * */,CSS代碼規(guī)范,代碼書寫格式 /* 內(nèi)容部分樣式 */ .content width：100%；（前面空白的地方使用TAB空一格） Hack使用規(guī)則 由于不同的瀏覽器，比如IE 6,IE7,IE8 ,Firefox等，對(duì)CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個(gè)針對(duì)不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack,也叫寫CSS hack。如 .top width:200px/*IE8*/; *width:210px;/*IE7*/ _width:208px;/*IE6*/ ,CSS代碼規(guī)范,通用樣式定義標(biāo)準(zhǔn) 整個(gè)站點(diǎn)的背景色（background）：缺省時(shí)定義為白色； 中文大小(font-size)：12px； 中文字體(font-family)：宋體； 英文字體(font-family)：Arial； 空白(margin)：0px； 間隙(padding)：0px； 字體鏈接顏色：a:link、a:visited、a:active、a:hover 圖片邊框(border)：0px； 輸入框定義(input) 按鈕定義(button) 注：在定義樣式文件時(shí)，一定要注意默認(rèn)值這個(gè)問題，因?yàn)椴煌瑸g覽器對(duì)默認(rèn)值的解釋都不一樣，所以在定義屬性時(shí)，一定要慎重考慮并定義標(biāo)簽元素的默認(rèn)值。,CSS命名原則,按web頁面的結(jié)構(gòu)布局位置命名。網(wǎng)站整體通用的命名規(guī)則以網(wǎng)頁頂部、中部、底部三個(gè)大區(qū)塊位置及其內(nèi)部位置進(jìn)行劃分與命名。 網(wǎng)頁頂部定義的樣式命名為：class=”header”； 網(wǎng)頁中部定義的樣式命名為：class=”middle”； 網(wǎng)頁底部定義的樣式命名為：class=”footer”； 按照web頁面的區(qū)塊命名。在網(wǎng)頁中部定義中，我們應(yīng)當(dāng)按其位置劃分為左右兩個(gè)區(qū)塊或者左、中、右三個(gè)區(qū)塊： 網(wǎng)頁中部左側(cè)運(yùn)用的樣式命名為：class=”left”； 網(wǎng)頁中部中間運(yùn)用的樣式命名為：class=”middle”； 網(wǎng)頁中部右側(cè)運(yùn)用的樣式命名為：class=”right”； 按功能模塊命名。對(duì)于web網(wǎng)站中模塊樣式定義，我們應(yīng)當(dāng)按照模塊名稱定義模塊的布局樣式。例如： 登錄模塊，我們應(yīng)當(dāng)這樣命名：class=”login” 按照組件名稱命名。使用組件制作的網(wǎng)站，對(duì)于組件的樣式，我們通常采用組件的名稱命名樣式的名稱；如果一個(gè)組件有多個(gè)樣式，我們可以在名稱的后面加上數(shù)字以示區(qū)分，例如： 某組件的第一種樣式命名為：class=” xxx1”； 它組件的第二種樣式命名為：class=” xxx2”；,CSS命名原則,在定義css中的class時(shí)，建議使用層次分時(shí)的方式來描述語句。 示例結(jié)構(gòu)： 示例Css: .menu .menu .menulist .menu .menulist .selectit 在上例中，從最終效果來看，.menu沒有必要重復(fù)出現(xiàn)，但是實(shí)際上如果在前面加上.menu，將會(huì)讓文檔的層次更加明了，更利于查找和閱讀,class命名規(guī)范,class命名規(guī)范 class命名要用英文單詞作為其名稱，如果需要加數(shù)字表述的，可以在單詞后面添加數(shù)字，禁止用數(shù)字開頭為其名稱，禁止用中文為其名稱，禁止用特殊字符為其名稱。 首字母小寫第二個(gè)單詞首字母大寫，不要超過四個(gè)單詞，如果單詞太長(zhǎng)，取其前三位字母。例如：兩個(gè)單詞class名稱：.productlist 三個(gè)單詞class名稱：.productlistleft id和class命名采用所定義內(nèi)容的英文單詞或組合命名。 不建議使用id來定義樣式，因與后期開發(fā)人員建立的id名稱有預(yù)期沖突，盡可能使用class來定義，而且class有更多的資源重復(fù)利用的可能。 同一類型的class名稱第一個(gè)單詞要一致。例如：字體， 紅色字體：.fontRed 綠色字體：.fontGreen 加粗字體：.fontBold,id和class命名參考列表,id和class命名參考列表,CSS縮寫規(guī)則,顏色縮寫：16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫一半，例如：#000000可以縮寫為#000;#336699可以縮寫為#369; 字體(fonts) font：font-style | font-variant | font-weight | font-size | line-height | font-fa