Godzilla. 2018-07-20
網(wǎng)站建設(shè)
實(shí)用！分享上海網(wǎng)頁(yè)制作中常用的一些技術(shù)要點(diǎn)
隨著現(xiàn)在社會(huì)的發(fā)展，越來(lái)越多的商家和企業(yè)都開(kāi)始做起了網(wǎng)站建設(shè)，因?yàn)榛ヂ?lián)網(wǎng)的快速發(fā)展，網(wǎng)站建設(shè)已經(jīng)成為當(dāng)下經(jīng)濟(jì)發(fā)展必不可需的一個(gè)重要內(nèi)容了。那網(wǎng)頁(yè)制作作為網(wǎng)站建設(shè)中最重要的一環(huán)，在網(wǎng)頁(yè)設(shè)計(jì)中，既要展現(xiàn)網(wǎng)站獨(dú)特的創(chuàng)意，也要凸顯整個(gè)網(wǎng)頁(yè)。因此，設(shè)計(jì)師在進(jìn)行網(wǎng)頁(yè)制作時(shí)，要注意的和掌握的技術(shù)要點(diǎn)也有很多。那么，下面上海網(wǎng)頁(yè)制作就來(lái)分享一些在網(wǎng)頁(yè)制作中常用的技術(shù)要點(diǎn)。
1、XHTML和CSS文件注釋
上海網(wǎng)頁(yè)制作文件注釋必不可少，但是要適可而止。注釋太多回增大文件的大小，受帶寬影響，用戶在瀏覽網(wǎng)頁(yè)時(shí)增加了等待時(shí)間，造成不好的用戶體驗(yàn)。網(wǎng)站在上線前先要在測(cè)試服務(wù)器上進(jìn)行測(cè)試，測(cè)試好沒(méi)問(wèn)題后，將相關(guān)的CSS文件、Javascript文件先刪除注釋?zhuān)缓筮M(jìn)行壓縮。這些文件的壓縮可以利用下載相關(guān)工具實(shí)現(xiàn)，也可以使用在線壓縮工具實(shí)現(xiàn)。
2、清除浮動(dòng)的方法
?。?）在結(jié)尾出加空div標(biāo)簽clear:both
?。?)在父級(jí)div頂一overflow：hidden
（3）在父級(jí)div頂一味蕾：after和zoom
3、塊級(jí)元素和行內(nèi)元素
上海網(wǎng)頁(yè)制作塊級(jí)元素是指這些元素顯示為一塊內(nèi)容。與之相反，行內(nèi)元素是指這些元素的內(nèi)容顯示在行中。每個(gè)塊級(jí)元素都是從一個(gè)新行開(kāi)始顯示，而且其后的元素也是另起一行進(jìn)行顯示。而行內(nèi)元素一般顯示在塊級(jí)元素里面。
一般的塊級(jí)元素由<p>、<h1>~<h6>、<ul><ol><li>、<table>、<form>、<div>和<body>等。而內(nèi)聯(lián)元素有<input>、<a>、<img>、<span>等。
塊級(jí)元素和行內(nèi)元素之間可以通過(guò)設(shè)置display的值來(lái)進(jìn)行轉(zhuǎn)換。將diaplay的值設(shè)置為block，可以讓行內(nèi)元素表現(xiàn)得像塊級(jí)元素一樣。也可以通過(guò)把display得值設(shè)置為inline，讓塊級(jí)元素表現(xiàn)得跟行內(nèi)元素一樣。
4、CSS文檔流
上海網(wǎng)頁(yè)制作網(wǎng)頁(yè)元素按照XHTML結(jié)構(gòu)自上而下，從左向右一行一行得布局，叫做CSS文檔流。
5、label標(biāo)簽中得for屬性
當(dāng)用戶選擇label標(biāo)簽時(shí)，瀏覽器回自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單元素上。
6、zoom:1的作用
一般是為了解決IE6下樣式不兼容的問(wèn)題。
HasLayout是IE渲染引擎的一個(gè)內(nèi)部組成部分。在IE中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行計(jì)算大小和組織，要么依賴(lài)于父元素來(lái)計(jì)算尺寸和組織內(nèi)容。為了調(diào)節(jié)這兩個(gè)不同的概念，渲染引擎采用了HasLayout的屬性，屬性值可以為true或false。當(dāng)一個(gè)元素的HasLayout屬性值為true時(shí)，我們說(shuō)這個(gè)元素有一個(gè)布局（layout）。
大部分的IE顯示錯(cuò)誤，都可以通過(guò)激發(fā)元素的HasLayout屬性來(lái)修正?？梢酝ㄟ^(guò)設(shè)置一些CSS屬性來(lái)激發(fā)元素的HasLayout屬性，使其“擁有布局”。在IE 6中就可以通過(guò)zoom：1來(lái)激發(fā)元素的HasLayout。
7、CSS Sprites技術(shù)利弊
利：減少對(duì)服務(wù)器的請(qǐng)求數(shù)量，進(jìn)而加快頁(yè)面加載速度。
弊：（1）測(cè)算每個(gè)背景單元的精確位置，很繁瑣；（2）如果頁(yè)面背景有少許改動(dòng)，一般就要改合并的圖片。
8、marquee標(biāo)簽
標(biāo)簽里面是滾動(dòng)文字的內(nèi)容
9、word-spacing
上海網(wǎng)頁(yè)制作修改字間距。簡(jiǎn)單地說(shuō)，課室是任何非空白字符組成地串，并由某種空白符包圍。所以象形文字是無(wú)法指定字間隔地。除非字之間有空格。因此，這個(gè)屬性主要是針對(duì)英文單詞地，要使其對(duì)中文起作用，需要在中文之間加空格?？隙髂莻€(gè)設(shè)計(jì)者認(rèn)為兩詞之間沒(méi)空格就是一個(gè)詞。
10、display:inline-block;的使用方法
上海網(wǎng)站制作公司在做導(dǎo)航條的時(shí)候，一般會(huì)用到ul-li結(jié)構(gòu)，大多數(shù)時(shí)候我們是把li設(shè)置為浮動(dòng)，讓其并排顯示在同一行。但是如果當(dāng)行中l(wèi)i的數(shù)目不確定，并且又需要導(dǎo)航中的文字在頁(yè)面中居中顯示時(shí)，用這種方法就不太方便了，因?yàn)槊看涡薷漠?dāng)行中l(wèi)i的數(shù)目量或文字時(shí)都需要調(diào)整ul或者第一個(gè)li標(biāo)簽的padding或者margin屬性值。
還有一種方法就是設(shè)置li為“display：inline-block;”這樣就可以達(dá)到同樣的效果，而且無(wú)論有幾個(gè)li標(biāo)簽或者li中的文字如何變化，只要設(shè)置ul中的text-align屬性的值為center就可以實(shí)現(xiàn)ul中的所有文字水平居中顯示。
IE6、IE7塊級(jí)元素不識(shí)別inline-block，對(duì)于行內(nèi)元素不存在兼容問(wèn)題?？梢杂?display：inline；*zoom：1來(lái)代替。
11、網(wǎng)頁(yè)設(shè)計(jì)稿中特殊字體的處理
網(wǎng)頁(yè)瀏覽者在看網(wǎng)頁(yè)時(shí)使用自己電腦上的字庫(kù)來(lái)顯示字體的，如果在制作網(wǎng)頁(yè)時(shí)用了特殊的字體，必須保證瀏覽網(wǎng)頁(yè)的用戶的電腦上也有這樣的字庫(kù)才能看到相同的效果，如果用戶的電腦上沒(méi)有所定義的字體，那么它會(huì)自動(dòng)用系統(tǒng)默認(rèn)字體來(lái)顯示，一般中文的默認(rèn)字體都是宋體。特殊字體只能做成圖片。
CSS中常用的字體包括：宋體、黑體、微軟雅黑、Arial、verdana、serif。
12、切圖時(shí)應(yīng)該保存成那種圖片格式
?。?）JPG不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡(jiǎn)單的圖片。對(duì)于寫(xiě)實(shí)的攝影圖片或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能達(dá)到最佳的壓縮效果。根據(jù)經(jīng)驗(yàn)，在頁(yè)面中使用的商品圖片、采用人像或者實(shí)物素材制作的廣告banner等圖像更適合采用JPG的圖片格式保存。
?。?）對(duì)于需要高保真的較復(fù)雜的圖像，PNG雖然能無(wú)損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁(yè)面上。圖像上顏色較少，并且主要以純色或者平滑的漸變色進(jìn)行填充。或者具備較大亮度差異以及強(qiáng)烈對(duì)比的簡(jiǎn)單圖像適合使用PNG格式進(jìn)行存儲(chǔ)。
（3）PNG8支持1為布爾透明通道，所謂布爾透明值得是要么完全透明要么完全不透明。而PNG24則支持8為的Alpha通道透明，也就是說(shuō)可以存儲(chǔ)從完全透明到完全不透明一共256個(gè)層級(jí)的透明度。
?。?）對(duì)于小圖標(biāo)或小動(dòng)畫(huà)，可以保存成gif格式。
13、制作中需要注意的問(wèn)題——z-index屬性
1、z-index屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
2、該屬性設(shè)置一個(gè)定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。
14、兼容問(wèn)題的技巧
?。?）寫(xiě)DTD聲明。
?。?）為網(wǎng)頁(yè)樣式引入CSS重置代碼，重置各瀏覽器默認(rèn)屬性值。
?。?）同時(shí)為一個(gè)元素寫(xiě)float和margin-left或margin-right時(shí)，同時(shí)設(shè)置display：inline，為解決IE6雙邊距問(wèn)題。
?。?）給元素設(shè)置高度后，同時(shí)設(shè)置overflow：hedden，避免在IE6中高度繼續(xù)擴(kuò)展的問(wèn)題。
（5）對(duì)于文本，在使用margin-left、padding-left、margin-top、padding-top之前有限考慮是否可用text-indent和line-height代替，因?yàn)橛?jì)算尺寸的代價(jià)相對(duì)來(lái)說(shuō)要大些。
文章標(biāo)簽：
上海網(wǎng)頁(yè)制作 網(wǎng)頁(yè)設(shè)計(jì)
Godzilla 簽
為了在編輯、圖象設(shè)計(jì)方面進(jìn)一步的提高，我想投身于網(wǎng)站行業(yè)中，一展所長(zhǎng)，為所在的公司和社會(huì)貢獻(xiàn)一分力量!
文章評(píng)論：