web標準頁面制作規(guī)范.ppt

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