網(wǎng)頁設(shè)計(jì)制作規(guī)范 -_第1頁
網(wǎng)頁設(shè)計(jì)制作規(guī)范 -_第2頁
網(wǎng)頁設(shè)計(jì)制作規(guī)范 -_第3頁
網(wǎng)頁設(shè)計(jì)制作規(guī)范 -_第4頁
網(wǎng)頁設(shè)計(jì)制作規(guī)范 -_第5頁
已閱讀5頁，還剩1頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、網(wǎng)頁設(shè)計(jì)制作規(guī)范 -     總 論 本規(guī)范既是一個開發(fā)規(guī)范，也是一個腳本語言參考，本規(guī)范并不是一個一成不變的必須嚴(yán)格遵守的條文，特殊情況下要靈活運(yùn)用，做一定的變通。但是，請大家千萬不要隨意更改規(guī)范。如果有任何問題，請及時與我聯(lián)系，我會及時更改本規(guī)范的相關(guān)代碼樣例和文檔。 /基 本 要 求 1. 在網(wǎng)站根目錄中開設(shè)images common temp 三個子目錄，根據(jù)需要再開設(shè)media 子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標(biāo)志、banner 條、菜單、按鈕等等；common 子目錄中放css、js,、php、incl

2、ude 等公共文件；temp 子目錄放客戶提供的各種文字圖片等等原始資料；media 子目錄中放flash, avi, quick time 等多媒體文件 。 2. 在根目錄中原則上應(yīng)該按照首頁的欄目結(jié)構(gòu)，給每一個欄目開設(shè)一個目錄，根據(jù)需要在每一個欄目的目錄中開設(shè)一個images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內(nèi)容特別多，又分出很多下級欄目，可以相應(yīng)的再開設(shè)其他目錄。3. temp 目錄中的文件往往會比較多，建議以時間為名稱開設(shè)目錄，將客戶陸續(xù)提供的資料歸類整理。 4. 除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得

3、包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導(dǎo)，不到萬不得已不要以拼音作為目錄名稱，經(jīng)驗(yàn)證明，用拼音命名的目錄往往連一個月后的自己都看不懂， /腳 本 編 寫 我們應(yīng)該有一個腳本整體風(fēng)格一致的概念，意思是一個月后和一個月前的你寫的腳本風(fēng)格保持一致，以及同一個工作組中不同的開發(fā)人員編寫的腳本風(fēng)格保持一致，因?yàn)槲覀儾豢赡苡肋h(yuǎn)孤立的開發(fā)，你隨時都有可能和三個月前的自己合作（你的客戶要求改版），也經(jīng)常要和工作室中不同的同事共同開發(fā)一個項(xiàng)目，還有可能被要求修改已經(jīng)離職人員開發(fā)的腳本，當(dāng)然你自己也有可能會扔下一個項(xiàng)目給后來的同事。 1. Html 文件的通用模板： ) Creation Data:

4、 2000-8-1 Original Author: eastline -> <head> <title> 文檔標(biāo)題 </title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <meta name="author" content="eastline"> 其他meta 標(biāo) 記 <link rel="stylesheet" typ

5、e="text/css" href="style/style.css"> 樣式表定義 客戶端Javascript 函數(shù)定義及初始化操作 </head> <body bgcolor="#ffffff"> </body> 補(bǔ)充： 為了保證網(wǎng)站能夠與下一代的web 語言xml 標(biāo)準(zhǔn)兼容，所有的HTML 標(biāo)簽的屬性都要用單引號或者雙引號括起，即我們應(yīng)該寫 <a href=”url”> 而不 是 <a href=url>. 2. 允許全文檢索的頁面，為了使Internet 上的搜

6、索引擎能夠有效檢索，在頻道的首頁的html的<head></head>之間應(yīng)該加入Keywords 和Description 元標(biāo)記，例如 ： <meta name=”keywords” content=”東方新干線，汽車，買車”> <meta name=”description” content=”東方新干勁線，全球中文汽車信息第一站”> 3. CSS 文件的格式樣例代碼 ： <style type="text/css"> <! p text-indent: 2em; body font-family: &

7、quot;宋體" font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px table font-family: "宋體" font-size: 9pt; line-height: 20px; color: #000000 a:link font-size: 9pt; color: #FFFFFF; text-decoration: none a:visited font-size: 9pt; color: #99

8、FFFF; text-decoration: none a:hover font-size: 9pt; color: #FF9900; text-decoration: none a:active font-size: 9pt; color: #FF9900; text-decoration: none a.1:link font-size: 9pt; color: #3366cc; text-decoration: none a.1:visited font-size: 9pt; color: #3366cc; text-decoration: none a.1:hover font-siz

9、e: 9pt; color: #FF9900; text-decoration: none a.1:active font-size: 9pt; color: #FF9922; text-decoration: none .blue font-family: "宋體" font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em -> </style> 這里尤其要注意的是a:link a:visited a:hover a:actived 的排列順序一定要嚴(yán)格照上面的樣例

10、代碼，否則或多或少會出問題。另外我們規(guī)定重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！ 為了保證不同瀏覽器上字號保持一致，字號建議用點(diǎn)數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px 和14.7px 這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字號比較合適。 在寫 <table> 互相嵌套時，嚴(yán)格按照的規(guī)范，對于單獨(dú)的一個<table>來說，<table><tr>對齊，<td> 縮進(jìn)兩個半角空格，<td> 中如果還有嵌套的表格，<

11、table>也縮進(jìn)兩個半角空格，如果<td>中沒有任何嵌套的表格，</td> 結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行，不要換行， 如我們注意在源代碼中不應(yīng)有這樣的代碼： <td><img src=”./images/sample.gif”> </td> 而應(yīng)該是這樣的： <td><img src=”./images/sample.gif”></td> 這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個半角空格，以上不規(guī)范的寫法相當(dāng)于無意中增加一個半角空格，如果確實(shí)有必要增加一個半角空格，也應(yīng)該這樣寫：

12、 <td><img src=”./images/sample.gif”> </td> 屬于同一個級別 的 <table> 一定是左首對齊的，另外不允許沒有任何內(nèi)容的空的單元格存在，高度大于等于12px 的單元格應(yīng)該 在 <td> 和 </td> 之間寫一 個   如果高度小于12px, 則應(yīng)該 在 <td> 和 </td> 之間插入一個1*1 大小的透明的gif 圖片，這是因?yàn)槟承g覽器認(rèn)為空單元格非法而不會予以解釋。如果代碼順序較亂，在DW3中可以通過command->a

13、pply souce formatting進(jìn)行重新整理！ 5. Width 和height 的寫法也有統(tǒng)一的規(guī)范，一般情況下只有一列的表格，width 寫在<table> 的標(biāo)簽內(nèi)，只有一行的表格，height 寫在 <table> 的標(biāo)簽內(nèi)，多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標(biāo)簽內(nèi)?？傊裱粭l原則：不出現(xiàn)多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是你改動代碼中任何一個width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一

14、條不容易，需要較長時間的練習(xí)和思考。 /一 般 原 則 1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內(nèi)，并且應(yīng)該盡量避免 <colspan> <rowspan> 兩個標(biāo)記，經(jīng)驗(yàn)表明，這兩個標(biāo)記會帶來許多麻煩。 2. 一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)，因?yàn)闉g覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用 <tbody>標(biāo)記，以便

15、能夠使這個大表格分塊顯示。 3. 排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用   或者全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義 p text-indent: 2em; 然后給每一段加上 <p> 標(biāo)記，注意，一般情況下，請不要省略 </p> 結(jié)束標(biāo)記 。 4. 原則上，我們禁止用 <img width=? height=?> 來人為干預(yù)圖片顯示的尺寸，而且建議 <img> 標(biāo)簽中不要帶上width 和height 兩個屬性，這是因?yàn)橹谱鬟^程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)

16、揮瀏覽器自身的功能；但是這樣的一個副作用是當(dāng)網(wǎng)頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網(wǎng)頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當(dāng)圖片的尺寸較大時，這種現(xiàn)象會很明顯，所以當(dāng)預(yù)料到這種會明顯導(dǎo)致網(wǎng)頁抖動的情況會發(fā)生時，請大家務(wù)必在最后給 <img>附上 width 和 height 屬性。 5. 為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預(yù)分段。 6. 不同語種的文字之間應(yīng)該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字周圍

17、的括號應(yīng)該使用半角括號。 7. 所有的字號都應(yīng)該用樣式表來實(shí)現(xiàn)，禁止在頁面中出現(xiàn) <font size=?> 標(biāo)記。 8. 請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個 的   也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實(shí)現(xiàn)。 9. 中英文混排時，我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體。 10. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%. 11. 網(wǎng)站中的

18、路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應(yīng)該這樣：<a href=”aboutus/”> 12、嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。 13、“網(wǎng)頁大小”定義為網(wǎng)頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點(diǎn)。對于解調(diào)器用戶，網(wǎng)頁大小保持在34K以下為合適。 /文 件 命 名 原 則 1. 每一個目錄中應(yīng)該包含一個缺省的html 文件，文件名統(tǒng)一用index.htm 2文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。 3. 命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作 。 4. 下面以“新聞”（包含“國內(nèi)新聞”和“國際新聞”）這個欄目來說明html 文件的命名原則 ： 在根目錄下開設(shè)news目

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論