DIVCSS網(wǎng)頁布局開發(fā)參考規(guī)范的示例分析

今天就跟大家聊聊有關DIV CSS網(wǎng)頁布局開發(fā)參考規(guī)范的示例分析，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于網(wǎng)站設計、成都網(wǎng)站設計、華州網(wǎng)絡推廣、微信小程序、華州網(wǎng)絡營銷、華州企業(yè)策劃、華州品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供華州建站搭建服務，24小時服務熱線：13518219792，官方網(wǎng)址：www.rwnh.cn

你對DIVCSS網(wǎng)頁布局開發(fā)參考規(guī)范是否了解，這里和大家分享一下，DIVCSS網(wǎng)站的開發(fā)可能有多人協(xié)作，由一個團隊來完成，這就涉及到很多規(guī)范性操作的問題，本DIV CSS網(wǎng)頁布局規(guī)范既是一個開發(fā)規(guī)范，也是一個腳本語言參考，但是，請大家千萬不要隨意更改規(guī)范。

DIVCSS網(wǎng)頁布局開發(fā)參考規(guī)范

DIVCSS網(wǎng)頁布局也可以算是一個系統(tǒng)的工作，DIVCSS網(wǎng)站的開發(fā)可能有多人協(xié)作，由一個團隊來完成，這就涉及到很多規(guī)范性操作的問題，即使是一個人進行開發(fā)，也需要有一定的條理和規(guī)范，這是一篇轉載自藍色的文章，非常有效，作者總結了很多實用的經(jīng)驗，大家可以參考學習。

總論

本DIV CSS網(wǎng)頁布局規(guī)范既是一個開發(fā)規(guī)范，也是一個腳本語言參考，本規(guī)范并不是一個一成不變的必須嚴格遵守的條文，特殊情況下要靈活運用，做一定的變通。但是，請大家千萬不要隨意更改規(guī)范。如果有任何問題，請及時與我聯(lián)系，我會及時更改本規(guī)范的相關代碼樣例和文檔。

基本要求

1.在網(wǎng)站根目錄中開設imagescommontemp三個子目錄，根據(jù)需要再開設media子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標志、banner條、菜單、按鈕等等；common子目錄中放css、js,、php、include等公共文件；temp子目錄放客戶提供的各種文字圖片等等原始資料；media子目錄中放flash,avi,quicktime等多媒體文件。

2.在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據(jù)需要在每一個欄目的目錄中開設一個images和media的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內(nèi)容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。

3.temp目錄中的文件往往會比較多，建議以時間為名稱開設目錄，將客戶陸續(xù)提供的資料歸類整理。

4.除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導，不到萬不得已不要以拼音作為目錄名稱，經(jīng)驗證明，用拼音命名的目錄往往連一個月后的自己都看不懂。

DIV CSS網(wǎng)頁布局中腳本編寫

我們應該有一個腳本整體風格一致的概念，意思是一個月后和一個月前的你寫的腳本風格保持一致，以及同一個工作組中不同的開發(fā)人員編寫的腳本風格保持一致，因為我們不可能永遠孤立的開發(fā)，你隨時都有可能和三個月前的自己合作（你的客戶要求改版），也經(jīng)常要和工作室中不同的同事共同開發(fā)一個項目，還有可能被要求修改已經(jīng)離職人員開發(fā)的腳本，當然你自己也有可能會扔下一個項目給后來的同事。

1.Html文件的通用模板：

ExampleSourceCode

<html> <!--  Generator:SubDesignStudio(www.eastline.net.cn)  CreationData:2000-8-1  originalAuthor:eastline  --> <head> <title>文檔標題title> <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"> <metanamemetaname="author"content="eastline">

◆DIV CSS中其他meta標記

ExampleSourceCode

<linkrellinkrel="stylesheet"type="text/css"href="style/style.css">

◆樣式表定義

客戶端Javascript函數(shù)定義及初始化操作

ExampleSourceCode

head> <bodybgcolorbodybgcolor="#ffffff"> ……  body>

補充：
為了保證網(wǎng)站能夠與下一代的web語言xml標準兼容，所有的HTML標簽的屬性都要用單引號或者雙引號括起，即我們應該寫而不是.

2.允許全文檢索的頁面，為了使Internet上的搜索引擎能夠有效檢索，在頻道的首頁的html的之間應該加入Keywords和Description元標記，例如：

ExampleSourceCode

<metanamemetaname=”keywords”content=”東方新干線，汽車，買車"/> <metanamemetaname=”description”content=”東方新干勁線，全球中文汽車信息第一站"/>

3.DIV CSS文件的格式樣例代碼：

ExampleSourceCode

<styletypestyletype="text/css"> <!—  p{text-indent:2em;}  body{font-family:"宋體";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:#99FFFF;  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-size: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:linka:visiteda:hovera:actived的排列順序一定要嚴格照上面的樣例代碼，否則或多或少會出問題。另外我們規(guī)定重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！

4.為了保證不同瀏覽器上字號保持一致，字號建議用點數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px和14.7px這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px的字號比較合適。

在寫

互相嵌套時，嚴格按照的規(guī)范，對于單獨的一個

來說，

對齊，結束標記應該與

縮進兩個半角空格，

中如果還有嵌套的表格，也縮進兩個半角空格，如果

中沒有任何嵌套的表格，

處于同一行，不要換行，

如我們注意在DIV CSS源代碼中不應有這樣的代碼：

ExampleSourceCode

<td><imgsrcimgsrc=”../images/sample.gif”> td>

而應該是這樣的：

ExampleSourceCode

<td><imgsrcimgsrc=”../images/sample.gif”>td>

這是因為瀏覽器認為換行相當于一個半角空格，以上不規(guī)范的寫法相當于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應該這樣寫：

ExampleSourceCode

<td><imgsrcimgsrc=”../images/sample.gif”>td>

屬于同一個級別的

一定是左首對齊的，另外不允許沒有任何內(nèi)容的空的單元格存在，高度大于等于12px的單元格應該在之間寫一個，如果高度小于12px,則應該在之間插入一個1*1大小的透明的gif圖片，這是因為某些瀏覽器認為空單元格非法而不會予以解釋。如果代碼順序較亂，在DW3中可以通過command->applysouceformatting進行重新整理！

和

5.Width和height的寫法也有統(tǒng)一的規(guī)范，一般情況下只有一列的表格，width寫在

的標簽內(nèi)，只有一行的表格，height寫在

的標簽內(nèi)，多行多列的表格，width和height寫在第一行或者第一列的

標簽內(nèi)?？傊裱粭l原則：不出現(xiàn)多于一個的控制同一個單元格大小的height和width,保證任何一個width和height都是有效的，也就是你改動代碼中任何一個width和height的數(shù)值，都應該在瀏覽器中看到變化。做到這一條不容易，需要較長時間的練習和思考。

DIV CSS網(wǎng)頁布局一般原則

1.在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內(nèi)，并且應該盡量避免兩個標記，經(jīng)驗表明，這兩個標記會帶來許多麻煩。

2.一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi)，那么很可能造成的后果就是，當瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用

標記，以便能夠使這個大表格分塊顯示。

3.排版中我們經(jīng)常會遇到需要進行首行縮進的處理，不要使用或者全角空格來達到效果，規(guī)范的做法是在樣式表中定義p{text-indent:2em;}然后給每一段加上

標記，注意，一般情況下，請不要省略

結束標記。

4.原則上，我們禁止用來人為干預圖片顯示的尺寸，而且建議標簽中不要帶上width和height兩個屬性，這是因為制作過程中，圖片往往需要反復的修改，這樣可以避免人為干預圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個副作用是當網(wǎng)頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網(wǎng)頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當圖片的尺寸較大時，這種現(xiàn)象會很明顯，所以當預料到這種會明顯導致網(wǎng)頁抖動的情況會發(fā)生時，請大家務必在最后給附上width和height屬性。

5.為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用
來人工干預分段。

6.不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標點要用全角標點，英文字母和數(shù)字周圍的括號應該使用半角括號。

7.所有的字號都應該用樣式表來實現(xiàn)，禁止在頁面中出現(xiàn)標記。

8.請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用text-indent,padding,margin,hspace,vspace以及透明的gif圖片來實現(xiàn)。

9.中英文混排時，我們盡可能的將英文和數(shù)字定義為verdana和arial兩種字體。

10.行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.

11.網(wǎng)站中的路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：而應該這樣：

12.嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。

13.“網(wǎng)頁大小”定義為網(wǎng)頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點。對于解調(diào)器用戶，網(wǎng)頁大小保持在34K以下為合適。

DIV CSS網(wǎng)頁布局文件命名原則

1.每一個目錄中應該包含一個缺省的html文件，文件名統(tǒng)一用index.htm

2.件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。

3.命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。

4.下面以“新聞”（包含“國內(nèi)新聞”和“國際新聞”）這個欄目來說明html文件的命名原則：

◆第一條缺省新聞取名index.htm

◆所有屬于“國內(nèi)新聞”的新聞依次取名為：china_1.htm,china_2.htm,…

◆所有屬于“國際新聞”的新聞依次取名為：internation_1.htm,internation_2.htm,…

◆如果文件的數(shù)量是兩位數(shù)，請將前九個文件命名為：china_01.htm,china_02.htm以保證所有的文件能夠在文件夾中正確排序。

5.圖片的命名原則遵循以下幾條規(guī)范：

◆名稱分為頭尾兩兩部分，用下劃線隔開。

◆頭部分表示此圖片的大類性質，例如廣告、標志、菜單、按鈕等等。

◆一般來說:

放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們?nèi)∶篵anner

標志性的圖片我們?nèi)∶麨椋簂ogo

在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton

在頁面上某一個位置連續(xù)出現(xiàn)，性質相同的鏈接欄目的圖片我們?nèi)∶簃enu

裝飾用的照片我們?nèi)∶簆ic

不帶鏈接表示標題的圖片我們?nèi)∶簍itle

依照此原則類推。

尾部分用來表示圖片的具體含義。

看完上述內(nèi)容，你們對DIV CSS網(wǎng)頁布局開發(fā)參考規(guī)范的示例分析有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站標題：DIVCSS網(wǎng)頁布局開發(fā)參考規(guī)范的示例分析
瀏覽地址：http://www.rwnh.cn/article28/peddcp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站建設、定制開發(fā)、網(wǎng)站導航、用戶體驗、面包屑導航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

DIVCSS網(wǎng)頁布局開發(fā)參考規(guī)范的示例分析