Godzilla. 2018-07-20 網站建設

實用！分享上海網頁制作中常用的一些技術要點

隨著現在社會的發(fā)展，越來越多的商家和企業(yè)都開始做起了網站建設，因為互聯網的快速發(fā)展，網站建設已經成為當下經濟發(fā)展必不可需的一個重要內容了。那網頁制作作為網站建設中最重要的一環(huán)，在網頁設計中，既要展現網站獨特的創(chuàng)意，也要凸顯整個網頁。因此，設計師在進行網頁制作時，要注意的和掌握的技術要點也有很多。那么，下面上海網頁制作就來分享一些在網頁制作中常用的技術要點。

　　1、XHTML和CSS文件注釋

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

　　2、清除浮動的方法

　?。?）在結尾出加空div標簽clear:both

　　（2)在父級div頂一overflow：hidden

　?。?）在父級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中，一個元素要么自己對自身的內容進行計算大小和組織，要么依賴于父元素來計算尺寸和組織內容。為了調節(jié)這兩個不同的概念，渲染引擎采用了HasLayout的屬性，屬性值可以為true或false。當一個元素的HasLayout屬性值為true時，我們說這個元素有一個布局（layout）。

　　大部分的IE顯示錯誤，都可以通過激發(fā)元素的HasLayout屬性來修正。可以通過設置一些CSS屬性來激發(fā)元素的HasLayout屬性，使其“擁有布局”。在IE 6中就可以通過zoom：1來激發(fā)元素的HasLayout。

　　7、CSS Sprites技術利弊

　　利：減少對服務器的請求數量，進而加快頁面加載速度。

　　弊：（1）測算每個背景單元的精確位置，很繁瑣；（2）如果頁面背景有少許改動，一般就要改合并的圖片。

　　8、marquee標簽

　　標簽里面是滾動文字的內容

　　9、word-spacing

　　上海網頁制作修改字間距。簡單地說，課室是任何非空白字符組成地串，并由某種空白符包圍。所以象形文字是無法指定字間隔地。除非字之間有空格。因此，這個屬性主要是針對英文單詞地，要使其對中文起作用，需要在中文之間加空格?？隙髂莻€設計者認為兩詞之間沒空格就是一個詞。

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

　　上海網站制作公司在做導航條的時候，一般會用到ul-li結構，大多數時候我們是把li設置為浮動，讓其并排顯示在同一行。但是如果當行中l(wèi)i的數目不確定，并且又需要導航中的文字在頁面中居中顯示時，用這種方法就不太方便了，因為每次修改當行中l(wèi)i的數目量或文字時都需要調整ul或者第一個li標簽的padding或者margin屬性值。

　　還有一種方法就是設置li為“display：inline-block;”這樣就可以達到同樣的效果，而且無論有幾個li標簽或者li中的文字如何變化，只要設置ul中的text-align屬性的值為center就可以實現ul中的所有文字水平居中顯示。

　　IE6、IE7塊級元素不識別inline-block，對于行內元素不存在兼容問題。可以用*display：inline；*zoom：1來代替。

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

　　網頁瀏覽者在看網頁時使用自己電腦上的字庫來顯示字體的，如果在制作網頁時用了特殊的字體，必須保證瀏覽網頁的用戶的電腦上也有這樣的字庫才能看到相同的效果，如果用戶的電腦上沒有所定義的字體，那么它會自動用系統默認字體來顯示，一般中文的默認字體都是宋體。特殊字體只能做成圖片。

　　CSS中常用的字體包括：宋體、黑體、微軟雅黑、Arial、verdana、serif。

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

　　（1）JPG不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡單的圖片。對于寫實的攝影圖片或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能達到最佳的壓縮效果。根據經驗，在頁面中使用的商品圖片、采用人像或者實物素材制作的廣告banner等圖像更適合采用JPG的圖片格式保存。

　?。?）對于需要高保真的較復雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。圖像上顏色較少，并且主要以純色或者平滑的漸變色進行填充?；蛘呔邆漭^大亮度差異以及強烈對比的簡單圖像適合使用PNG格式進行存儲。

　?。?）PNG8支持1為布爾透明通道，所謂布爾透明值得是要么完全透明要么完全不透明。而PNG24則支持8為的Alpha通道透明，也就是說可以存儲從完全透明到完全不透明一共256個層級的透明度。

　　（4）對于小圖標或小動畫，可以保存成gif格式。

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

　　1、z-index屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

　　2、該屬性設置一個定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。

　　14、兼容問題的技巧

　?。?）寫DTD聲明。

　?。?）為網頁樣式引入CSS重置代碼，重置各瀏覽器默認屬性值。

　?。?）同時為一個元素寫float和margin-left或margin-right時，同時設置display：inline，為解決IE6雙邊距問題。

　?。?）給元素設置高度后，同時設置overflow：hedden，避免在IE6中高度繼續(xù)擴展的問題。

　?。?）對于文本，在使用margin-left、padding-left、margin-top、padding-top之前有限考慮是否可用text-indent和line-height代替，因為計算尺寸的代價相對來說要大些。