網頁製作中需要注意的問題

1、XHTML和CSS文件註釋

文件註釋必不可少,但是要適可而止。註釋太多回增大文件的大小,受帶寬影響,用戶在瀏覽網頁時增加了等待時間,造成不好的用戶體驗。網站在上線前先要在測試服務器上進行測試,測試好沒問題後,將相關的CSS文件、JavaScript文件先刪除註釋,然後進行壓縮。這些文件的壓縮可以利用下載相關工具實現,也可以使用在線壓縮工具實現。

2、清除浮動的方法

1)在結尾出加空div標籤clear:both
2)在父級div頂一overflow:hidden
3)在父級div頂一味蕾:after和zoom

3、塊級元素和行內元素

      塊級元素是指這些元素顯示爲一塊內容。與之相反,行內元素是指這些元素的內容顯示在行中。每個塊級元素都是從一個新行開始顯示,而且其後的元素也是另起一行進行顯示。而行內元素一般顯示在塊級元素裏面。
一般的塊級元素由<p>、<h1>~<h6>、<ul><ol><li>、<table>、<form>、<div>和<body>等。而內聯元素有<input>、<a>、<img>、<span>等。
塊級元素和行內元素之間可以通過設置display的值來進行轉換。將diaplay的值設置爲block,可以讓行內元素表現得像塊級元素一樣。也可以通過把display得值設置爲inline,讓塊級元素表現得跟行內元素一樣。

4、CSS文檔流

網頁元素按照XHTML結構自上而下,從左向右一行一行得佈局,叫做CSS文檔流。

5、label標籤中得for屬性

當用戶選擇label標籤時,瀏覽器回自動將焦點轉到和標籤相關的表單元素上。

6、zoom:1的作用

一般是爲了解決IE6下樣式不兼容的問題。
HasLayout是IE渲染引擎的一個內部組成部分。在IE中,一個元素要麼自己對自身的內容進行計算大小和組織,要麼依賴於父元素來計算尺寸和組織內容。爲了調節這兩個不同的概念,渲染引擎採用了HasLayout的屬性,屬性值可以爲true或false。當一個元素的HasLayout屬性值爲true時,我們說這個元素有一個佈局(layout)。
大部分的IE顯示錯誤,都可以通過激發元素的HasLayout屬性來修正。可以通過設置一些CSS屬性來激發元素的HasLayout屬性,使其“擁有佈局”。在IE 6中就可以通過zoom:1來激發元素的HasLayout。

7、CSS Sprites技術利弊

利:減少對服務器的請求數量,進而加快頁面加載速度。
弊:1)測算每個背景單元的精確位置,很繁瑣。
2)如果頁面背景有少許改動,一般就要改合併的圖片。

8、marquee標籤

標籤裏面是滾動文字的內容

9、word-spacing

修改字間距。簡單地說,課室是任何非空白字符組成地串,並由某種空白符包圍。所以象形文字是無法指定字間隔地。除非字之間有空格。因此,這個屬性主要是針對英文單詞地,要使其對中文起作用,需要在中文之間加空格。肯恩那個設計者認爲兩詞之間沒空格就是一個詞。

10、display:inline-block;的使用方法

在桌導航條的時候,一般會用到ul-li結構,大多數時候我們是把li設置爲浮動,讓其並排顯示在同一行。但是如果當行中li的數目不確定,並且又需要導航中的文字在頁面中居中顯示時,用這種方法就不太方便了,因爲每次修改當行中li的數目量或文字時都需要調整ul或者第一個li標籤的padding或者margin屬性值。
還有一種方法就是設置li爲“display:inline-block;”這樣就可以達到同樣的效果,而且無論有幾個li標籤或者li中的文字如何變化,只要設置ul中的text-align屬性的值爲center就可以實現ul中的所有文字水平居中顯示。
IE6、IE7塊級元素不識別inline-block,對於行內元素不存在兼容問題。可以用*display:inline;*zoom:1來代替。

11、

12、網頁設計稿中特殊字體的處理

網頁瀏覽者在看網頁時使用自己電腦上的字庫來顯示字體的,如果在製作網頁時用了特殊的字體,必須保證瀏覽網頁的用戶的電腦上也有這樣的字庫才能看到相同的效果,如果用戶的電腦上沒有所定義的字體,那麼它會自動用系統默認字體來顯示,一般中文的默認字體都是宋體。
特殊字體只能做成圖片。
CSS中常用的字體包括:宋體、黑體、微軟雅黑、Arial、verdana、serif。

13、切圖時應該保存成那種圖片格式

1)JPG不適用於所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。對於寫實的攝影圖片或是顏色層次非常豐富的圖像採用JPG的圖片格式保存一般能達到最佳的壓縮效果。根據經驗,在頁面中使用的商品圖片、採用人像或者實物素材製作的廣告banner等圖像更適合採用JPG的圖片格式保存。
2)對於需要高保真的較複雜的圖像,PNG雖然能無損壓縮,但圖片文件較大,不適合應用在Web頁面上。圖像上顏色較少,並且主要以純色或者平滑的漸變色進行填充。或者具備較大亮度差異以及強烈對比的簡單圖像適合使用PNG格式進行存儲。
3)PNG8支持1爲布爾透明通道,所謂布爾透明值得是要麼完全透明要麼完全不透明。而PNG24則支持8爲的Alpha通道透明,也就是說可以存儲從完全透明到完全不透明一共256個層級的透明度。
4)對於小圖標或小動畫,可以保存成gif格式。

14、製作中需要注意的問題——z-index屬性

1、z-index屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面
2、該屬性設置一個定位元素沿z軸的位置,z軸定義爲垂直延伸到顯示區的軸。如果爲正數,則離用戶更近,爲負數則表示離用戶更遠。

15、兼容問題的技巧

1)寫DTD聲明
2)爲網頁樣式引入CSS重置代碼,重置各瀏覽器默認屬性值。
3)同時爲一個元素寫float和margin-left或margin-right時,同時設置display:inline,爲解決IE6雙邊距問題。
4)給元素設置高度後,同時設置overflow:hedden,避免在IE6中高度繼續擴展的問題
5)對於文本,在使用margin-left、padding-left、margin-top、padding-top之前有限考慮是否可用text-indent和line-height代替,因爲計算尺寸的代價相對來說要大些。

發佈了42 篇原創文章 · 獲贊 10 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章