網(wǎng)站制作之CSS開發(fā)規(guī)范，下面一起學(xué)習(xí)一下： 基 本 要 求 1. 在網(wǎng)站根目錄中開設(shè)images common temp 三個(gè)子目錄，根據(jù)需要再開設(shè)media 子目錄，images目錄中放不同欄目的頁(yè)面都要用到的公共圖片，例如公司的標(biāo)志、banner 條、菜單、按鈕等等；common 子目錄中放css、js,、php、include 等公共文件；temp 子目錄放客戶提供的各種文字圖片等等原始資料；media 子目錄中放動(dòng)畫, avi, quick time 等多媒體文件 。 2. 在根目錄中原則上應(yīng)該按照首頁(yè)的欄目結(jié)構(gòu)，給每一個(gè)欄目開設(shè)一個(gè)目錄，根據(jù)需要在每一個(gè)欄目的目錄中開設(shè)一個(gè)images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，假如這個(gè)欄目的內(nèi)容特別多，又分出很多下級(jí)欄目，可以相應(yīng)的再開設(shè)其他目錄?！ ?. temp 目錄中的文件往往會(huì)比較多，建議以時(shí)間為名稱開設(shè)目錄，將客戶陸續(xù)提供的資料回類整理?！ ?. 除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請(qǐng)盡量以英文為指導(dǎo)，不到萬(wàn)不得已不要以拼音作為目錄名稱，經(jīng)驗(yàn)證實(shí)，用拼音命名的目錄往往連一個(gè)月后的自己都看不懂， 腳 本 編 寫 我們應(yīng)該有一個(gè)腳本整體風(fēng)格一致的概念，意思是一個(gè)月寧波地圖后和一個(gè)月前的你寫的腳本風(fēng)格保持一致，以及同一個(gè)工作組中不同的開發(fā)職員編寫的腳本風(fēng)格保持一致，由于我們不可能永遠(yuǎn)孤立的開發(fā)，你隨時(shí)都有可能和三個(gè)月前的自己合作（你的客戶要求改版），也經(jīng)常要和工作室中不同的同事共同開發(fā)一個(gè)項(xiàng)目，還有可能被要求修改已經(jīng)離職職員開發(fā)的腳本，當(dāng)然你自己也有可能會(huì)扔下一個(gè)項(xiàng)目給后來(lái)的同事。 1. Html 文件的通用模板： 其他meta 標(biāo) 記 樣式表定義 客戶端Javascript 函數(shù)定義及初始化操縱 … … 補(bǔ)充： 為了保證網(wǎng)站能夠與下一代的web 語(yǔ)言xml 標(biāo)準(zhǔn)兼容，所有的HTML 標(biāo)簽的屬性都要用單引號(hào)或者雙引號(hào)括起，即我們應(yīng)該寫 而不 是 . 2. 答應(yīng)全文檢索的頁(yè)面，為了使Internet上的搜索引擎能夠有效檢索，在頻道的首頁(yè)的html的之間應(yīng)該加進(jìn)Keywords 和Description 元標(biāo)記，例如 ： 3. CSS 文件的格式樣例代碼 ： 這里尤其要留意的是a:link a:visited a:hover a:actived 的排列順序一定要嚴(yán)格照上面的樣例代碼，否則或多或少會(huì)出題目。另外我們規(guī)定重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！ 為了保證不同瀏覽器上字號(hào)保持一致，字號(hào)建議用點(diǎn)數(shù)pt和像素px來(lái)定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px 和14.7px 這是經(jīng)過(guò)排名推廣的字號(hào)，黑體字或者宋體字加粗時(shí)，一般選用11pt和14.7px 的字號(hào)比較合適?！ ≡趯?互相嵌套時(shí)，嚴(yán)格按照的規(guī)范，對(duì)于單獨(dú)的一個(gè) 來(lái)說(shuō)， 對(duì)齊， 縮進(jìn)兩個(gè)半角空格， 中假如還有嵌套的表格，也縮進(jìn)兩個(gè)半角空格，假如 中沒(méi)有任何嵌套的表格， 結(jié)束標(biāo)記應(yīng)該與 處于同一行，不要換行， 如我們留意在源代碼中不應(yīng)有這樣的代碼： 而應(yīng)該是這樣的： 這是由于瀏覽器以為換行相當(dāng)于一個(gè)半角空格，以上不規(guī)范的寫法相當(dāng)于無(wú)意中增加一個(gè)半角空格，假如確實(shí)有必要增加一個(gè)半角空格，也應(yīng)該這樣寫： 屬于同一個(gè)級(jí)別 的
一定是左首對(duì)齊的，另外不答應(yīng)沒(méi)有任何內(nèi)容的空的單元格存在，高度大于即是12px 的單元格應(yīng)該 在 和 之間寫一個(gè) ，假如高度小于12px, 則應(yīng)該 在 和 之間插進(jìn)一個(gè)1*1 大小的透明的gif 圖片，這是由于某些瀏覽器以為空單元格非法而不會(huì)予以解釋。假如代碼順序較亂，在DW3中可以通過(guò)command->apply souce formatting進(jìn)行重新整理！ 5. Width 和height 的寫法也有同一的規(guī)范，一般情況下只有一列的表格，width 寫在
的標(biāo)簽內(nèi)，只有一行的表格，height 寫在 的標(biāo)簽內(nèi)，多行多列的表格，width 和height 寫在第一行或者第一列的 標(biāo)簽內(nèi)?？傊裱粭l原則：不出現(xiàn)多于一個(gè)的控制同一個(gè)單元格大小的height 和width, 保證任何一個(gè)width 和height 都是有效的，也就是你改動(dòng)代碼中任何一個(gè)width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一條不輕易，需要較長(zhǎng)時(shí)間的練習(xí)和思考。 一 般 原 則 1. 在排布表格之前，請(qǐng)大家一定要好好思考一個(gè)最佳的方案，表格的嵌套盡量控制在三平衡機(jī)層以內(nèi)，并且應(yīng)該盡量避免 兩個(gè)標(biāo)記，經(jīng)驗(yàn)表明，這兩個(gè)標(biāo)記會(huì)帶來(lái)很多麻煩?！ ?. 一個(gè)網(wǎng)頁(yè)要盡量避免用整個(gè)一張大表格，所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi)，由于瀏覽器在解釋頁(yè)面的元素時(shí)，是以表格為單位逐一顯示，假如一張網(wǎng)頁(yè)是嵌套在一個(gè)大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲進(jìn)網(wǎng)址，他要先面對(duì)一片空缺很長(zhǎng)時(shí)間，然后所有的網(wǎng)頁(yè)內(nèi)容同時(shí)出現(xiàn)。假如必須這樣做，請(qǐng)使用
標(biāo)記，以便能夠使這個(gè)大表格分塊顯示。 3. 排版中我們經(jīng)常會(huì)碰到需要進(jìn)行首行縮進(jìn)的處理，不要使用 或者全角空格來(lái)達(dá)到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上
標(biāo)記，留意，一般情況下，請(qǐng)不要省略
結(jié)束標(biāo)記 ?！ ?. 原則上，我們禁止用 來(lái)人為干預(yù)圖片顯示的尺寸，而且建議 標(biāo)簽中不要帶上width 和height 兩個(gè)屬性，這是由于制作過(guò)程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個(gè)副作用是當(dāng)網(wǎng)頁(yè)還未加載圖片時(shí)，不會(huì)留出寧波品牌網(wǎng)圖片的站位大小，可能會(huì)造成網(wǎng)頁(yè)在加載過(guò)程中抖動(dòng)（假如圖片是插在一個(gè)固定大小的表格里的，不會(huì)有這個(gè)現(xiàn)象），尤其是當(dāng)圖片的尺寸較大時(shí)，這種現(xiàn)象會(huì)很明顯，所以當(dāng)預(yù)料到這種會(huì)明顯導(dǎo)致網(wǎng)頁(yè)抖動(dòng)的情況會(huì)發(fā)生時(shí)，請(qǐng)大家務(wù)必在最后給 附上 width 和 height 屬性?！ ?. 為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能，在一段完整的文字中請(qǐng)盡量不要使用
來(lái)人工干預(yù)分段?！ ?. 不同語(yǔ)種的文字之間應(yīng)該有一個(gè)半角空格，但避頭的符號(hào)之前和避尾的符號(hào)之后除外漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字四周的括號(hào)應(yīng)該使用半角括號(hào)?！ ?. 所有的字號(hào)都應(yīng)該用樣式表來(lái)實(shí)現(xiàn)，禁止在頁(yè)面中出現(xiàn) 標(biāo)記?！ ?. 請(qǐng)不要在網(wǎng)頁(yè)中連續(xù)出現(xiàn)多于一個(gè)的也盡量少使用全角空格（英文字符集下，全角空格會(huì)變成亂碼），空缺應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來(lái)實(shí)現(xiàn)?！ ?. 中英文混排時(shí)，我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體?！ ?0. 行距建議用百分比來(lái)定義，常用的兩個(gè)行距的值是line-height:120%/150%. 11. 網(wǎng)站中的路徑全部采用相對(duì)路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣： 而應(yīng)該這樣： 12. 嵌進(jìn)圖形文本的使用較大的字體，建議不要在圖形中包括文本?！ ?3.“網(wǎng)頁(yè)大小”定義為網(wǎng)頁(yè)的所有文件大小的總和，包括HTML文件和所有的嵌進(jìn)的對(duì)象。用戶喜歡快的而不是新奇的站點(diǎn)。對(duì)于解調(diào)器用戶，網(wǎng)頁(yè)大小保持在34K以下為合適?！ ∥?件 命 名 原 則 1. 每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html 文件，文件名同一用index.htm 2.件名稱同一用小寫的英文字母、數(shù)字和下劃線的組合?！ ?. 命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義，二是當(dāng)我們?cè)谖募A中使用“按名稱排例”的命令時(shí)，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計(jì)算負(fù)載量等等操縱?！ ?. 下面以“新聞”（包含“國(guó)內(nèi)新聞”和“國(guó)際新聞”）這個(gè)欄目來(lái)說(shuō)明html 文件的命名原則 ： ☆ 在根目錄下開設(shè)news目 錄 ☆ 第一條缺省新聞取名index.htm ☆ 所有屬于“國(guó)內(nèi)新聞”的新聞依次取名為：china_1.htm, china_2.htm, … ☆ 所有屬于“國(guó)際新聞”的新聞依次取名為：internation_1.htm, internation _2.htm, … ☆ 假如文件的數(shù)目是兩位數(shù)，請(qǐng)將前九個(gè)文件命名為：china_01.htm, china_02.htm 以保證所有的文件能夠在文件夾中正確排序?！ ?. 圖片的命名原則遵循以下幾條規(guī)范 ： ☆ 名稱分為頭尾兩兩部分，用下劃線隔開?！ ?頭部分表示此圖片的大類性質(zhì)，例如廣告、標(biāo)志、菜單、按鈕等等?！ ?一般來(lái)說(shuō): 放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片我們?nèi)∶篵anner 標(biāo)志性的圖片我們?nèi)∶麨椋簂ogo 在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton 在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu 裝飾用的照片我們?nèi)∶簆ic 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle 依照此原則類推?！ ?尾部分用來(lái)表示圖片的具體含義?！ ?下面是幾個(gè)樣例，大家應(yīng)該能夠一眼看明白圖片的意義： banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.gif title_news.giflogo_police.giflogo_national.gifpic_people.jpg pic_hill.jpg. 網(wǎng)站制作之CSS開發(fā)規(guī)范，?？茨軒椭酱蠹襼！
