網頁設計時應注意什么問題

時應注意什么問題

網頁設計時應注意什么問題？多重漸變幾種鮮艷的色彩和大量有鮮明對比的色調及飽和度，會破壞你網站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(如藍色)，再搭配反相的單色(白灰黑)以獲得一個漂亮的搭配。下面是更多網頁設計注意問題的介紹，希望對您有所幫助。



一、太多的色彩

背景一種顏色，內容文本一種顏色，鏈接一種顏色，頁頭和lightbox一種顏色，圖案和頁腳各一種顏色。這很好，因為它幫助區分了有用的內容。但是，多重漸變幾種鮮艷的色彩和大量有鮮明對比的色調及飽和度，會破壞你網站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(如藍色)，再搭配反相的單色(白灰黑)以獲得一個漂亮的搭配。這里強調下豆瓣的配色。也是我喜歡的顏色搭配。

二、太多的字體

一般一個簡單的網頁設計，一般字體不超過3種。多則亂沒有足夠的空白

空白可以說是設計中最重要的一部分。它有助于防止用戶在瀏覽網站時變得疲憊，它可以在內容中劃出距離，而且它本身也看上去不錯?？瞻撞皇潜仨氂冒咨?，而是，它僅僅是為其他設計元素提供間隔和緩沖的空間不考慮用戶的分辨率

你的屏幕分辨率有2560像素，這非常好。但很多人還在屏幕上用1024像素的分率，有些還在用640*480或800*600。雖然這種分辨率的顯示器正在減少，但采用更小的分辨率的手機設備也來了?，F在的網頁設計寬度標準是960像素，雖然沒有照顧到每一種分辨率，但在主流分辨率上可以呈現的最好。假如你希望面對大量的手機用戶，最好考慮一個手機版設計。

三、貧乏的尺寸大小

標準做法是h1的文字大于h2的文字，頭部文字大于段落文字。盡量保持一致的尺寸，因為它有助于一致性(第8條)和內容層次(第4條)。保持文字的可讀性，但不要太大，讓字體的大小表現信息的重要性。還有，10像素以下的尺寸對大量閱讀的人來說太小了。

四、沒有足夠的文字間距

與空白有關，文字間距有兩個部分，一個是字距(這個不能用CSS直接調整，可以通過一些高級技術解決)，關系到字母之間的空白。一個是行距，可以用CSS直接調整，關系到兩行文字之間的距離。這些有助于區分行與段落，使用戶更容易閱讀文字。

五、對比的問題

你考慮過閱讀黑底白字和白底黑字的不同嗎?你有沒有試過閱讀一下白底灰字?有些方式之所以比其他的更好，其原因就是這是一種眼睛感知到對比的方式。如果你很難舒服的閱讀文字，考慮一下改變字體大小或方式。成為一個大師級網頁設計師的秘訣：對比，對比，對比。

同一件事情做的不夠多，或做的太多(過猶不及多重導航非常好，如一個在頁頭一個在頁腳。在頁腳加一個
返回頂部
的按鈕也很好。但是，太多指向同一目標的途徑會降低可用性。讓你的奶奶用下你的網站，如果她搞不定，想想哪些東西讓初次訪問的用戶拒絕使用這個網站。

六、沒有內容層次

用戶的眼睛喜歡有秩序的設計，如頭部包含導航和LOGO，特定內容使用lightbox，三列分欄，頁腳。它有助于在內心組織重要的信息，并引導用戶注意在你想讓他注意的地方。在傳統藝術中，新手們被教導色彩價值和線性透視三原則和其他藝術指導。在網頁設計中，沒有特別奉行的準則，但以直觀的方式組織你的內容是一條很好的經驗規則。也是多年培養的用戶習慣。最終習慣就是最終用戶。當然一成不變不是我們所鼓勵的。

七、不一致

一致性是網頁設計的關鍵。它是把網頁設計組織在一起的方式，可以創造一種緊密結合的感覺。在網站頁面互相鏈接的情況下，它可以幫助用戶把所有頁面都聯系在一起。如果你在整個網站持續改變字體大小和色彩，用戶很快會覺得不知所措。

網頁設計的注意問題

1、頁面內容要新穎

網頁內容的選擇要不落俗套，要重點突出一個
新
字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。
放眼望去，網上的許多個人主頁簡直就是雜貨店，內容包羅萬象,題材千篇一律，人人都是軟件下載,個個都有網絡導航，從頭到尾找不出一絲
鮮
意。所以，我們在設計網頁時，要把功夫下在選材上。選材要盡量做到
少
而
精
,又必須突出
新
，如能堅持天天更新的話,我相信這樣的網頁一定會受到大家的歡迎。

2、網頁命名要簡潔

由于一個網站不可能就是由一個網頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最后能給這些頁面起一些有代表性的而且簡潔易記的網頁名稱。這樣既會有助于你以后方便網頁，在向搜索引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用自己常用的或符合頁面內容的小寫英文字母，這直接關系到頁面上的連接。

3、要及時更新網頁

網頁制作好后，不能說萬事大吉了，其實事后的工作量更大。因為網頁制作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連接，在苦苦的等待之后，換來的是無法訪問的結果，那么他們會對你的網頁大失所望，可能以后再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。

4、注意視覺效果

設計Web頁面時，一定要用1024*768的分辨率來
分別觀察。許多瀏覽器使用1024*768的分辨率，盡管在1280*1024高分辨率下一
些Web頁面看上去很具吸引力，但在1024*768的模式下可能會黯然失色。作一點小小的努力，設計一個在不同分辨率下都能正常顯示的網頁

5、隨時注意網站升級

時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。

6、
網頁內容要易讀

網站設計最重要的訣竅，恐怕就是你的網頁要易讀。這就意味著，你必須花點心思來規劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳
。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受;文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。

7、善用表格來布局

不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。

8、
少用特殊字體

雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什么。在你的計算機里看起來相當好的頁面，在另一個不同的平臺上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助于解決這些問題，但是只有最新版的瀏覽器才支持CSS。

9、多學習和使用超文本標記語言(標準通用標記語言下的一個應用)

為了成功地設計網站，你必須理解HTML(標準通用標記語言下的一個應用)是如何工作的。大多數的網站設計者建議網絡新手應從有關HTML的書中去尋找答案，用Notepad制作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟件包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站發送到Web之前，預覽你的網站。

10、盡量少用Java程序

不要大幅度地使用的Java程序，能夠用javascript替代效果的則盡量不要使用java。因為來講java的運行速度實在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設計便毫無效果啦。

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

1、XHTML和CSS文件注釋

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

2、清除浮動的方法




1)在結尾出加空div標簽clear:both

2)在父級div頂一overflow：hidden

3)在父級div頂一味蕾：after和zoom

3、塊級元素和行內元素

塊級元素是指這些元素顯示為一塊內容。與之相反，行內元素是指這些元素的內容顯示在行中。每個塊級元素都是從一個新行開始顯示，而且其后的元素也是另起一行進行顯示。而行內元素一般顯示在塊級元素里面。

塊級元素和行內元素之間可以通過設置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)如果頁面背景有少許改動，一般就要改合并的圖片。

網頁制作中應該注意的問題

1、marquee標簽

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

2、word-spacing

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

3、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來代替。

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

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

特殊字體只能做成圖片。

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

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

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

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

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

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

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

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

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

7、兼容問題的技巧

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代替，因為計算尺寸的代價相對來說要大些。