1流程
網站伴隨着
[1]
網絡的快速發展而快速興起，做爲上網的主要依託，因爲人們使用網絡的頻繁而變得很是的重要。因爲
企業須要經過網站呈現產品、服務、理念、文化，或向受衆提供某種功能服務。所以網頁設計必須首先明確設計站點的目的和用戶的需求，從而作出切實可行的設計方案。
專業的網頁設計，須要經歷如下幾個階段：
-
須要根據 消費者的需求、市場的情況、企業自身的狀況等進行綜合分析，從而創建起營銷模型。
-
以業務目標爲中心進行功能策劃，製做出欄目結構關係圖。
-
以知足用戶體驗設計爲目標，使用 axure rp或同類軟件進行頁面策劃，製做出交互用例。
-
以頁面精美化設計爲目標，使用PS、AI等軟件，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
-
根據用戶反饋，進行頁面設計調整，以達到最優效果。
2目標
-
業務邏輯清晰，能清楚的向瀏覽者傳遞信息，瀏覽者能方便的尋找到本身想要查看的東西
-
用戶體驗良好，用戶在視覺上，操做上都能感到很溫馨
-
頁面設計精美，用戶能獲得美好的視覺體驗，不會爲一些糟糕的細節而感到不適
-
建站目標明晰，網頁很好的實現了企業建站的目標，向用戶傳遞了某種信息，或展現了產品、服務、理念、 文化
3詳介
主題明確
Web站點應針對所服務對象（機構或人）的不一樣而具備不一樣的形式。有些站點只提供簡潔文本信息；有些則採用多媒體表現手法，提供華麗的圖像、閃爍的燈光、複雜的頁面佈置，甚至能夠
下載聲音和錄像片斷。好的Web站點把圖形表現手法和有效的組織與通訊結合起來。
爲了作到主題鮮明突出，要點明確，應該使配色和圖片圍繞預約的主題；調動一切手段充分表現網站點的個性和情趣，辦出網站的特色。
充分利用已有信息，如客戶手冊．公共關係文檔．技術手冊和數據庫等。
設計思路
-
簡潔實用：這是很是重要的，網絡特殊環境下，儘可能以最高效率的方式將用戶所要想獲得的信息傳送給他就是最好的，因此要去掉全部的冗餘的東西。
-
使用方便：同第一個是相一致的，知足使用者的要求，網頁作得越適合使用，就越顯示出其功能美
-
總體性好：一個網站強調的就是一個總體，只有圍繞一個統一的目標所作的設計纔是成功的。
-
網站形象突出：一個符合美的標準的網頁是可以使網站的形象獲得最大限度的提高的。頁面用色協調，佈局符合形式美的要求：佈局有條理，充分利用美的形式，是網頁富有可欣賞性，提升檔次。固然雅俗共賞是人人都追求的。
-
交互式強：發揮網絡的優點，是每一個使用者都參與到其中來，這樣的設計才能算成功的設計。這樣的網頁纔算真正的美的設計。
版式設計
版式設計經過文字圖形的空間組合，表達出和諧與美。
多頁面站點頁面的
編排設計要求把頁面之間的有機聯繫反映出來，特別要求處理好頁面之間和頁面內的秩序與內容的關係。爲了達到最佳的視覺表現效果，反覆推敲總體佈局的合理性，使瀏覽者有一個流暢的視覺體驗。
色彩做用
色彩是藝術表現的要素之一。在網頁設計中，
設計師根據和諧、均衡和重點突出的原則，將不一樣的色彩進行組合．搭配來構成美麗的頁面。 根據色彩對人們心理的影響，合理地加以運用。若是企業有
CIS（
企業形象識別系統），應按照其中的VI進行色彩運用。
形式內容
爲了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。
三維空間的構成
網絡上的三維空間是一個假想空間，這種空間關係需藉助動靜變化．圖像的比例關係等空間因素表現出來。 在頁面中，圖片、文字位置先後疊壓，或頁面位置變化所產生的視覺效果都各不相同。經過圖片、文字先後疊壓所構成的空間層次不太適合網頁設計，根據現有
瀏覽器的特色，網頁設計適合比較規範、簡明的頁面，儘管這種疊壓排列能產生強節奏的空間層次，視覺效果強烈。
網頁上常見的是頁面上、下、左、右、中位置所產生的空間關係，以及疏密的位置關係所產生的空間層次，這兩種位置關係使產生的空間層次富有彈性，同時也讓人產生輕鬆或緊迫的心理感覺。
虛擬現實
人們已不知足於
HTML（
標準通用標記語言下的一個應用）編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現實要在Web網上展現其迷人的風采，因而VRML語言出現了。
VRML是一種面向對象的語言，它相似Web
超級連接所使用的
HTML語言，也是一種基於文本的語言，並能夠運行在多種平臺之上，只不過可以更多地爲虛擬現實環境服務。
多媒體
便於使用
若是人們看不懂或很難看懂您的網站，那麼，他如何瞭解你的企業信息和
服務項目呢？使用一些醒目的標題或文字來突出您的產品與服務。而且即便您擁有最棒的產品，若是客戶從您的網站上看不清楚您在介紹什麼或不清楚如何受益的話，他們是不會喜歡您的網站的，這對於網頁設計而言是失敗的。
導向清晰
網頁設計中導航使用
超文本連接或圖片連接，令人們可以在您的網站上自由前進或後退，而沒必要讓他們使用瀏覽器上的前進或後退。咱們在全部的圖片上使用「ALT」
標識符註明圖片名稱或解釋，以便那些不肯意自動加載圖片的觀衆可以瞭解圖片的含義。
快速下載時間
不少的瀏覽者不會進入須要等待5分鐘下載時間才能進入的網站，在
互聯網上30秒的等待時間與咱們日常10分鐘等待時間的感受相同。所以，建議在網頁設計中儘可能避免使用過多的圖片及體積過大的圖片。主要頁面的容量應確保普通瀏覽者頁面等待時間不超過10秒。
非圖形內容
在必要時適當使用動態「
Gif」圖片，爲減小動畫容量，應用巧妙設計的
Java動畫能夠用很小的容量使圖形或文字產生動態的效果。可是，因爲在互聯網瀏覽的大可能是一些尋找信息的人們，仍然建議您要肯定您的網站將爲他們提供的是有價值的內容，而不是過分的裝飾。
反饋與溝通
所以，若是是產品或服務介紹網站，應該有留言、電話、在線諮詢等功能或信息呈現。
在企業的Web站點上，要認真回覆用戶的
電子郵件和傳統的聯繫方式如信件．電話垂詢和傳真，作到有問必答。最好將用戶的用意進行分類，如售前通常瞭解．售後服務等，由相關部門處理，使網站訪問者感覺到企業的真實存在並由此產生信任感。
測試改進
測試其實是模擬用戶詢問網站的過程，用以發現問題並改進網頁設計。應該與用戶共同安排
網站測試。
內容更新
企業Web站點創建後，要不斷更新網頁內容。站點信息的不斷更新，讓瀏覽者瞭解企業的發展動態和網上職務等，同時也會幫助企業創建良好的形象。
注意不要許諾你實現不了的東西，在你真正有能力處理回覆以前，不要懇求用戶輸入信息或羅列一大堆本身不能及時答覆的電話號碼。 若是要求訪問者自願提供其我的信息，應公佈並認真履行我的隱私保承諾。
4用戶體驗
1. 輸入控件的自動聚焦和可用鍵盤切換輸入焦點
使用JavaScript實現頁面加載完成後當即自動聚焦(focus)到第一個輸入控件。可用TAB鍵（IE缺省實現）或
方向鍵切換聚焦到下一個輸入控件。
2. 可用Enter（或Ctrl+Enter）鍵提交，確保和點擊提交按鈕的效果是相同的
不要在提交按鈕上加入onClick=」…」這樣的JavaScript代碼。
3．鼠標動做提示和迴應
對用戶的鼠標定位操做，當移動到可響應的位置上時，應給予視覺或聽覺的提示。
4．儘量早的在客戶端完成輸入數據合法性驗證
輸入數據的合法性檢驗應該在客戶端使用JavaScript進行驗證。除非驗證只能在服務器端完成，不然驗證工做應在最先能完成的狀況下進行。
5．根據應用場景決定在表單頁面和提交後返回頁面間是否使用中間過渡頁面
根據應用場景，決定是否顯示接收表單頁面（表單頁面和提交後返回頁面間的中間過渡頁面），以及使用何種方式顯示接收表單頁面。
6．防止表單重複提交處理
對提交按鈕點擊後作變灰處理避免在網絡響應較慢狀況下用戶重複提交同一個表單。使用頁面過時失效避免用戶後退瀏覽重複提交表單。
7．頁面連接是打開新窗口、使用原窗口仍是彈出窗口的原則
通常而言，首頁上連接能夠使用
target=」_blank」屬性打開新窗口，而其餘頁面上的連接都應使用原窗口或彈出窗口。若是連接頁面內容相對原頁面來講不重要，是附屬性質的，能夠使用彈出窗口方式。
8．儘量少的排列可選項，儘量少的安排操做步驟
根據用戶操做習慣安排儘量少的操做菜單選項，同時要保證儘量少的操做步驟。
9．操做邏輯無漏洞，保證數據是操做安全的
多個頁面間的操做和同個頁面上的多個操做間的邏輯關係在設計上是安全和嚴謹的。保證不會出現不被容許的用戶操做組合，至少不會由於用戶的不適當的操做致使出錯。
5中西方網頁設計
網頁設計的基本概念 在這個頁面，你會發現基本的網頁設計概念，以及如何他們能夠用來提升您的項目的信息。 設計到Web相關的也有幾個原則。其中有接近，對齊，重複和對比。這四項原則的影響，如何被認爲網頁。 接近 接近是指在Web頁面上的元素的元素彼此之間的關係之間的距離。這些元素包括文本，導航，標題，等等。 通常來講，併攏的元素，彷佛有強大的關係網比元素相距較遠。 在合適的的插圖顯示的差別，使得接近。被放置的點遠的部分所形成的弱的佈局間距寬。
6發展趨勢
在網頁設計中，老是有傾向的特定技術來觀察，或跟蹤的網頁設計師增強的趨勢。這裏有專有和開源和免費的技術專用的支持者。然而，近些年來，又增長自由和開放源碼技術，包括由W3C和WHATWG進行監控和批准，監督和實施增長。
趨勢能夠發現，不只在看在時尚領域的使用的技術，如網站和匹配的標誌是清晰的喜愛肯定。著名的藝術字Web 2.0至今的重要做用的幫助。
網頁設計是一個不斷更新換代、推陳出新的行業，它要求設計師們必須隨時把握最新的設計趨勢，從而確保本身不被這個行業所淘汰。2013年，網頁設計主要流行響應式設計、扁平化設計、無限滾動、單頁、固定標頭、大膽的顏色、更少的按鈕和更大的網頁寬度。
[2]
7實戰技巧
網頁技術更新很快，一個網站的
界面設計壽命僅僅2-3年而已。無論是垃圾仍是精品，都沒有所謂的經典，經典只存在因而哪一個首次成功創新性的應用。一個閉門造車者作出的東西，是遠遠趕不上綜合借鑑者的。網頁設計不一樣於其餘藝術，在模仿加創新的網頁設計領域當中，即使是徹底本身設計的，也是沿用了人們已經認同的大部分用戶習慣，並且這種沿襲的痕跡是很是明顯的！還有哪一個設計者敢腆着臉說，這都是我本身的原創設計？對於業界來講，經典只是個理念和象徵！
設計環境
不能否認，國內
網頁設計環境還停留在初級的認知階段，也就是說，絕大多數人不知道網絡的真正的可用之處，你去作一個業務的時候，不得不去作大量的說服教育工做。以乙方的身份去說服甲方，以專業角度去教育非專業人士，結果是可想而知的。也正是這種全體社會廣泛的低認知水平，致使了大量網絡垃圾的產生。
企業客戶所在行業每每有其特定的設計需求，特別是對於企業網站建設當中的配色，除了應根據企業的VI標準色，以及客戶自身的喜愛進行配色分析外，同時不能忽略整個行業對於顏色上的‘慣例’。那麼，企業網站在設計和製做當中，到底有哪一些配色規則須要設計師遵循呢？
一、行業避忌的顏色
某些行業的企業客戶，對於網站總體顏色的要求涉及到具體的顏色避忌，例如金融、投資類的企業網站，應儘可能避免綠色，或相近顏色的使用。這是由於，綠色在金融投資行業當中表明的是低迷，不景氣，下滑等負面的元素，所以即使企業宣揚的是環保、低碳等企業文化，也是不能輕易予以使用。
二、特徵選色
企業客戶在不一樣的發展階段，對於網站設計的配色需求並不同。在企業初創階段，企業建站的目的是打造品牌網絡形象，開拓客戶資源，這時候的企業客戶更多的是關注自身的個性化，如何才能凸顯企業的特質，如何才能在行業當中顯示其獨有的特性，這是初建網站的企業客戶所重點關注的內容；在企業造成規模，進行品牌提高階段，企業建設網站或進行改版的目的是重塑品牌網絡形象，打造更爲專業、沉穩和可持續發展的品牌理念和文化，這時候的企業客戶更多的是考慮如何將企業的品牌內涵與行業相融合，在配色的選擇上更傾向於穩重、包容，可以適應各類場合須要的配色。
好的網頁設計師
一、內容和功能決定表現形式和界面設計
經常拿到的任務是一張小紙條，上面兩句話，叫你去作一個網站設計。有的人看看紙條就去設計頁面了，憑兩句話，你就能夠爲
客戶作一個頁面設計，以我七、8年的設計經驗，我都不敢去作，你真是個人偶像啊！
作網頁設計，你須要瞭解客戶的東西不少：
（1）建設網站的目的；
（2）欄目規劃及每一個欄目的表現形式和功能要求；
（3）網站主體色調、客戶性別喜愛、聯繫方式、舊版網址、偏好網址；
（4）根據行業和客戶要求，那些要着重表現；
（5）是否分期建設、考慮後期的兼容性；
（6）客戶是否有強烈的建設網站的慾望；
（7）你是否能在精神意識上控制住客戶；
（8）面對你未接觸的技術知識，你有底嗎；
（9）網站類型。
等等
當你把這些內容都瞭解清楚的時候，在你的大腦中就已經對這個網站有了全面而形象的定位，這時纔是有的放矢去作界面設計的時候。
二、界面弱化
一個好的界面設計它的界面是弱化的，它突出的是功能，着重體現的是網站業提供給使用者主要是什麼。這就涉及到瀏覽順序、功能分區等等。
要讓訪客在0.5秒內就能把握網站的行業性質，1秒內就知道該從哪一個地方開始使用這個網站，能點一次的，毫不點第二次。固然上面說的是大多數功能性網站，對於宣傳展現性網站，諸如加特效的或Flash網站，可能就不得不花哨一些，但不能太過度。網站不是動畫片，在效率愈來愈高，社會心理愈來愈浮躁的
中國，人們的耐心愈來愈小，
心理承受能力愈來愈低。效果能夠體現意境，點到爲止。
三、模塊化和可修改性強
模塊化不只能夠提升重用性，也能統一網站風格，還能夠下降程序開發的強度。這裏就涉及一些尺寸、模數、寬容度、命名規範等等知識了，再也不冗述。
不管是架構仍是模塊或圖片，都要考慮可修改性強。舉個簡單的例子，logo、按鈕等，不少人喜歡製做圖片，N個按鈕就是N張圖片。若是隻作3-5類按鈕的背景圖片，而後用在
網頁代碼裏打上文字，那麼修改起來就簡單了，讓程序員本身改字就能夠了。然而網頁顯示的
字體是帶有鋸齒的，通常既能清晰又保證美觀的字體
字號有幾類：
宋體12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ |
四、創意是可恥的，分析能力遠比創意來的重要
設計界動輒就大談什麼「創意」，我要說的是，尚未搞清目的意義內容，還沒在技術製做上臻於完善的基礎上，用創意和特效來迷惑客戶和訪客是可恥的。一個網頁設計者的分析能力遠比創意來的重要。
結尾，經驗
一、網頁配色基本概念
（1）白紙黑字是永遠的主題，誰都說不出很差來。
（2）網頁最經常使用流行色
·藍色
·綠色
·橙色
·暗紅
（3）顏色的忌諱
·忌髒
·忌純
·忌跳
·忌花
·忌粉
·藍色忌純，綠色忌黃，紅色忌豔。
（4）幾種固定搭配
·藍白橙
·綠白蘭
·橙白紅
·暗紅黑
二、網頁設計理念
（1）內容決定形式
先把內容充實上，再分區塊，再定色調，再處理細節。
（2）先總體，後局部，最後迴歸到總體。
全局考慮，把能填上的都填上，佔位置。而後定基調，分模塊設計。最後調整不滿意的幾個局部細節。
（3）功能決定設計方向
看網站的用途，決定設計思路.商業性的就要突出贏利目的；政府型的就要突出形象和權威性的文章；教育性的，就要突出師資和課程。
總結∶網站設計應簡潔，明瞭。從用戶體驗度出發設計。
設計收費制度
每一種不一樣的產品，設計的方式也就不同，每個代運營團隊必需要有一個實力較強的設計師，要對產品的背景圖片進行設計、要給產品拍照、作後期的圖像處理。每一種產品的不一樣，難度和方式就會不一樣。例如咱們的作的產品是珠寶，那麼設計師就要考慮怎麼拍照才能拍出最好的效果，才能體現出珠寶的高貴，而且以什麼形式展現爲最好，這些都是設計師須要考慮的難題。因此產品的難度是決定收費的一個項目。
8標題設計
1、網頁標題不宜太短或者過長
通常來講6-10個漢字比較理想，最好不要超過30個漢字。
網頁標題字數過少可能包含不了有效
關鍵詞，字數過多不只搜索引擎沒法正確識別標題中的核心關鍵詞，並且也讓用戶難以對網頁標題（尤爲是首頁標題，表明了網站名稱）造成深入印象，也不便於其餘
網站連接。
2、網頁標題應歸納網頁的核心內容
當用戶經過搜索引擎檢索時，在檢索結果頁面中的內容通常是
網頁標題（加連接）和網頁摘要信息，要引發用戶的關注，網頁標題發揮了很大的做用，若是網頁標題和頁面摘要信息有較大的相關性，摘要信息對網頁標題將發揮進一步的補充做用，從而引發用戶對該網頁信息點擊行爲的發生（也就意味着
搜索引擎推廣發揮了做用）。另外，當
網頁標題被其餘網站或者本網站其餘欄目/網頁連接時，一個歸納了網頁核心內容的標題有助於用戶判斷是否點擊該網頁標題連接。
3、網頁標題中應含有豐富的關鍵詞
考慮到
搜索引擎營銷的特色，搜索引擎對
網頁標題中所包含的關鍵詞具備較高的
權重，儘可能讓網頁標題中含有用戶檢索所使用的關鍵詞。以網站首頁設計爲例，通常來講首頁標題就是網站的名稱或者公司名稱，可是考慮到有些名稱中可能沒法包含公司/網站的核心業務，也就是說沒有核心關鍵詞，這時一般採用「核心關鍵詞+公司名/品排名」的方式來做爲網站首頁標題。本文開頭所列舉的某
網絡營銷服務商網站首頁標題實例，其實也是採用這種方式來設計
網頁標題，只不過因爲羅列了太多的「核心關鍵詞」，反而沒有了核心。
作美工看起來並非一件容易的事情。首先，要對整個站點和企業有個大體的瞭解。例如：某些企業喜歡藍色的主調，你不可能去作個紅色的主調，這樣徹底違背客戶的主要意願，若是
百度的標誌改爲五光十色的，相信你們也不會承認的。
站長的職責是規劃
網站結構。一樣也須要有必定的審美觀。下面介紹了幾款經常使用的繪圖工具和基本知識。
9設計要點
網頁設計的兩大要點是：總體風格和色彩搭配。
肯定網站總體風格
在這裏，我提供給你們一些參考經驗：
1．將你的標誌logo，儘量的放在每一個頁面上最突出的位置。
2．突出你的標準色彩。
3．總結一句能反映貴站精髓的宣傳標語！
4．相同類型的圖像採用相同效果，好比說標題字都採用
陰影效果，那麼在網站中出現的全部標題字的陰影效果的設置應該是徹底一致的！
網站的總體風格及其創意設計是最難以學習的，難就難在沒有一個固定的模式能夠參照和模仿。給你一個主題，任何兩人都不可能設計出徹底同樣的網站。
R、G、B就是Red、Green、Blue（紅，綠，藍）三種顏色，RGB模式就是由這三種顏色爲基色進行疊加而模擬出大天然色彩的色彩組合模式。咱們平常用的彩色電腦
顯示器、彩色電視機等的色彩都使用這種模式。
一、 矢量圖
矢量圖又叫作向量圖，是用一系列計算機指令來描述和記錄一幅圖，一幅圖能夠解爲一系列由點、線、面等到組成的子圖，它所記錄的是對象的幾何形狀、線條粗細和色彩等。生成的矢量圖文件存儲量很小，特別適用於文字設計、圖案設計、版式設計、標誌設計、計算機輔助設計（CAD）、工藝美術設計、插圖等。矢量圖只能表示有規律的線條組成的圖形，如工程圖、三維造型或藝術字等； 常見的矢量圖處理軟件有CoreIDRAW、AutoCAD、Illustrator和FreeHand等。
二、位圖
位圖又叫點陣圖或像素圖，計算機屏幕上的圖你是由屏幕上的發光點（即像素）構成的，每一個點用二進制數據來描述其顏色與亮度等信息，這些點是離散的，相似於點陣。 位圖在放大到必定限度時會發現它是由一個個小方格組成的，這些小方格被稱爲像素點，一個像素是圖像中最小的圖像元素。也就是咱們俗稱的馬賽克。
bmp：是未通過壓縮的用
點陣來表示的真彩圖片,佔用磁盤空間較大
gif：是通過壓縮的,只能表示256種顏色,佔用磁盤空間小,經常使用來演示色彩單一的成塊的卡通圖案,GIF還有一種能夠表示連續的動畫。
png：是fireworks的圖片格式
jpg：也稱爲jpeg,是有損壓縮格式可是它表示的顏色比較豐富,通常用來顯示真彩的照片或圖案。
做爲設計者和客戶（這裏指各站長），若是事先沒有明文協議的話設計者有權不提供源文件。
VI是Visual Identity的縮寫，中文譯爲「
企業視覺識別」。VI是CI計劃的靜態識別符號，是企業理念視覺化傳達的載體，所以它項目最多，效果最爲直接。VI做爲視覺識別，它是外在表現，當然須要具備美感，但VI必須是MI的體現，直接反映企業的理念。所以VI設計包含這樣一些原則：即充分傳達企業理念、人性原則、民族性原則、簡潔抽象及動態原則、員工參與原則、法律原則、藝術性原則和個性原則。
CI是Corporate Identity的縮寫，中文譯爲「企業形象」。CI計劃，是指企業有目的、有計劃、戰略性地創造出所但願的自身形象，由此提升企業的社會
知名度，最終獲得本身最適合的經營環境。
而logo只是網站或企業一個標誌。
網頁色彩搭配
1．用一種色彩。這裏是指先選定一種色彩，而後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。
2．用兩種色彩。先選定一種色彩，而後選擇它的對比色。
3．用一個色系。簡單的說就是用一個感受的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
在網頁配色中，還要切記一些誤區：
1．不要將全部顏色都用到，儘可能控制在三至五種色彩之內。
2．背景和前文的對比儘可能要大(絕對不要用花紋繁複的圖案做背景)，以便突出主要文字內容。
網頁設計工具
圖像處理設計：
動畫設計：
-
Adobe Flash，前稱 Macromedia Flash， 外語簡稱 Flash，前身 FutureSplash，既指Adobe Flash Professional多媒體創做程序，也指Adobe Flash Player。
網頁代碼編輯器：
-
Adobe Dreamweave（前稱 Macromedia Dreamweaver）用於編輯HTML、ASP、JSP、PHP、CSS、XML、JS的頁面製做工具；是Adobe公司的著名網站開發工具。它使用所見即所得的接口，亦有HTML編輯的功能。有支持Mac和Windows兩個系統的版本。
10注意問題
當你在INTERNET這個信息的海洋中盡情遨遊時，會發現許許多多內容豐富、創意新穎、設計獨特的我的網頁，不知道你見到這樣漂亮可人的網頁是否有點心動。一旦你具有了上網的條件，又萌發了製做主頁的念頭，那麼就應該注意網頁設計時應考慮哪些方面的問題，包括網站功能和以及訪問者須要什麼。你的整個設計都應該圍繞這些方面來進行。下面筆者就本身在實踐操做中的使用體會來談談網頁設計時應該考慮哪些問題，但願能給初建網站的用戶帶來必定的做用。
一、頁面內容要新穎
網頁內容的選擇要不落俗套，要重點突出一個「新」字，這個原則要求咱們在設計網站內容時不能照抄別人的內容，要結合自身的實際狀況創做出一個獨一無二的網站。 放眼望去，網上的許多我的主頁簡直就是"雜貨店"，內容一應俱全,題材千篇一概，人人都是"軟件下載",個個都有"網絡導航"，從頭至尾找不出一絲「鮮」意。因此，咱們在設計網頁時，要把功夫下在選材上。選材要儘可能作到「少」而「精」,又必須突出「新」，如能堅持每天更新的話,我相信這樣的網頁必定會受到你們的歡迎。
二、網頁命名要簡潔
因爲一個網站不可能就是由一個網頁組成，它有許多子頁面，爲了能使這些頁面有效地被鏈接起來，用戶最後能給這些頁面起一些有表明性的並且簡潔易記的網頁名稱。這樣既會有助於你之後方便管理網頁，在向搜索引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用本身經常使用的或符合頁面內容的小寫英文字母，這直接關係到頁面上的鏈接。
三、要及時更新網頁
網頁製做好後，不能說萬事大吉了，其實過後的工做量更大。由於網頁製做是一時的，而維護更新的工做是天天都要作的。要及時把網頁上已經做廢的鏈接應該當即刪除掉，好比用戶無心中點擊了頁面中的一個鏈接，在苦苦的等待以後，換來的是沒法訪問的結果，那麼他們會對你的網頁大失所望，可能之後不再會光顧你的網頁了。若不能及時更新，也最好在主頁上發佈信息，告訴前來訪問的朋友，因有特殊狀況須要離開一段時間，未能及時更新主頁，但願各位見諒，這樣就能給人一種對別人負責的感受，同時能獲得網友的信任。
四、注意視覺效果
設計Web頁面時，必定要用1024*768的
分辨率來 分別觀察。許多瀏覽器使用1024*768的分辨率，儘管在1280*1024高分辨率下一 些Web頁面看上去很具吸引力，但在1024*768的模式下可能會
黯然失色。做一點小小的努力，設計一個在不一樣分辨率下都能正常顯示的網頁
五、隨時注意網站升級
時刻注意網站的運行情況。性能很好的主機隨着訪問人數的增長，可能會運行緩慢。可是，若是你不想失去訪問者的話，必定要仔細計劃好你的升級計劃。
六、 網頁內容要易讀
網站設計最重要的訣竅，恐怕就是你的網頁要易讀。這就意味着，你必須花點心思來規劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，別用花裏胡哨的色彩組合，讓人看起你的網頁來很費勁。通常來講，淺色背景下的深色文字爲佳 。這個要點要求你最好別把文字的規格設得過小、也不能太大。文字過小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是衝着人大喊大叫，看起來不舒服。另外，最好讓文本
左對齊，而不是居中。按
當代中文的閱讀習慣，文本大都居左的。固然，標題通常應該居中，由於這符合讀者的閱讀習慣。
七、善用表格來佈局
不要把一個網站的內容象做報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，令人一眼就能看出你的網站重點突出，結構分明。
八、 少用特殊字體
雖然你能夠在你的HTML中使用特殊的字體，可是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機裏看起來至關好的頁面，在另外一個不一樣的平臺上看起來可能很是糟糕。一些網站設計員喜歡使用來定義特性，這雖然容許你使用特殊的字體，可是仍須要一些變通的方法，以避免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助於解決這些問題，可是隻有最新版的瀏覽器才支持CSS。
爲了成功地設計網站，你必須理解
HTML（
標準通用標記語言下的一個應用）是如何工做的。大多數的網站設計者建議網絡新手應從有關HTML的書中去尋找答案，用Notepad製做網頁。由於用
HTML設計網站，能夠控制設計的整個過程。可是，若是你僅僅是網站設計的新手，你應該尋找一個容許修改HTML的
軟件包。HomeSite4是一個很好的Web設計工具。在設計過程當中，HomeSite4能幫助你學習
HTML。它還容許你切換到所見即所得的模式，以便你在把網站發送到Web以前，預覽你的網站。
十、儘可能少用Java程序
不要大幅度地使用的Java程序，可以用javascript替代效果的則儘可能不要使用java。由於來說java的運行速度實在慢的讓人沒法忍受，每每使瀏覽者沒有耐心等頁面所有顯示出來，這樣你的精心設計便毫無效果啦。
十一、 少放
網站地圖
許多設計者把他們的網站地圖放在網站上，這種作法，倒是弊大於利。絕大部分的訪問者上網是尋找一些特別的信息，他們對於
你的網站是如何工做的，並無興趣。若是你以爲你的網站須要地圖，那極可能是須要改進你的導航和工具條。
十二、要爲圖片附加註釋文字
給每一個圖形加上文字的說明，在出現以前就能夠看到相關內容，尤爲是導航按鈕和大圖片更應如此。這樣一來，用戶在訪問你的站點時就有一種親切感受，認爲你心細，比較善解人意，時時刻刻爲他人着想，相信你的好心會有好報的。
1三、作個網站介紹
一個簡單明瞭的網站介紹，不只能讓別人對你的網站可以提供些什麼有個瞭解，引起共鳴或是表達你的誠意，經常最能打動讀者，並且還能使訪問者能快速找到想要的東西。可是，許多設計者都沒有這樣作。有效的
導航條和搜索工具令人們很容易找到有用的信息，這對訪問者很重要。告訴訪問者你所提供的正是他們想要的信息。
1四、考慮瀏覽器的兼容性
固然IE所佔的市場份額愈來愈大，可是咱們仍然須要考慮到Netscape以及Opera這些瀏覽器用戶。設計風格的考慮，如色彩的搭配，圖形、線條的使用等等。要時刻爲用戶着想，必須最少在幾種不一樣類型的瀏覽器下測試網站，看看兼容性如何。
1五、不宜多用閃爍文字
有的設計者想經過閃爍的文字來引發訪問者的注意是能夠被人理解的，但一個頁面中最多不能有三處閃爍文字，太多了給用戶一種眼花繚亂的感受，反而會影響用戶去訪問該網站的其餘內容，正所謂「物極必反」也。
1六、每一個頁面都要有導航按鈕
應當避免強迫用戶使用
工具欄中的向前和向後按鈕。你的設計應當使用戶可以很快地找到他們所要的東西。絕大多數好的站點在每一頁一樣的位置上都有相同的導航條，使瀏覽者可以從每一頁上訪問網站的任何部分。
1七、避免長文本頁面
在一個站點上有許多隻有文本的冗長頁面，是使人乏味的，人們爲了閱讀這些長文本，不得不使用卷滾條，從而也浪費了用戶在網上衝浪的時間。若是你有大量的基於文本的文檔，應當以Adobe Acrobat格式的文件形式來放置，以便你的訪問者能離線閱讀，從而節省寶貴的時間。
1八、 網頁風格要統一
你網頁上全部的圖像、文字，包括像背景顏色、區分線、字體、標題、註腳什麼的，要統一風格，貫穿全站。這樣子讀者看起來舒服、順暢，會對
你的網站留下一個「很專業」的印象。
1九、動畫最多隻用一個
你們都喜歡用GIF動畫來裝飾網頁，它的確很吸引人，但咱們在選擇時，是否能肯定必須用GIF動畫，若是答否，那麼就選擇靜止的圖片，由於它的容量要小得多。一樣的尺寸的LOGO，GIF動畫的容量有5K，而靜止LOGO的只有3K。雖然只有2K之差，但多起來，就會影響下載的速度，因此，若是有些不是
必須的，就選擇最小的。
20、善用圖像
用戶在網上四處漫遊，你必須設法吸引和維護他們對你的主頁的注意力。萬維網的其中一個最重大資源是其多媒體能力，因此咱們不管如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特點，使人過目不忘。圖像的內容應有必定的實際做用，切忌
虛飾浮誇。注意圖畫能夠彌補文字之不足，但並不可以徹底取代文字。不少用戶把瀏覽軟件設定爲略去圖像，以求節省時間他們只看文字。所以，製做主頁時，必須注意將圖像所鏈接的重要信息或聯接其餘頁面的指示用文字重複表達幾回，同時要注意避免使用過大的圖像，若是不得不放置大的圖像在網站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預覽效果顯示出來，這樣用戶就沒必要浪費金錢和時間去下載他們根本不想看的大圖像。
2一、
網站導航
要清晰
全部的
超連接應清晰無誤地向讀者標識出來，全部導航性質的設置，像圖像按鈕，都要有清晰的標識，讓人看得明白，千萬別光顧視覺效果是熱鬧的，而讓人家不知東西南北。連接文本的顏色最好用約定俗成的：未訪問的，藍色；點擊過的，
紫色或栗色。總之，文本連接必定要和頁面的其餘文字有所區分，給讀者清楚的導向 。
2二、最好不用記數器
因爲
計數器也是由程序設計成的，顯示計數器的過程其實就是在執行一個程序的過程，它須要佔用用戶寶貴的上網時間，何況大多數瀏覽者認爲計數器毫無心義，它們很容易被作假，瀏覽者也不想看廣告。所以筆者建議不要輕易考慮在
你的網站上放置一個醒目的點擊記數器。你設計網站是爲了給訪問者提供服務，而不是推銷你本身認爲重要的東西。若是你顯示你的網站是多麼受歡迎，你最好提供一個連接，顯示訪問日誌。
2三、不能忽視錯別字
一個好的網站對設計的每個細節都不會放過，哪怕是一個微小的拼寫錯誤都是絕對不能出現的。可是遺憾的是，許多設計者都缺乏這種技能。確保你拼寫正確，而且格外注意日常容易誤寫的錯別字，要時時刻刻保持一種嚴謹的科學態度。
2四、不要用
框架
與記數器同樣，
框架在網頁上愈來愈流行。在大多數網站上，在屏幕的左邊有一個框架。可是設計者馬上就發現，在使用框架時產生了許多的問題。使用框架時若是沒有17英寸的顯示屏幾乎不可能顯示整個網站。框架也使得網站內我的主頁不可以成爲書籤。也許更重要的是，
搜索引擎經常被框架混淆，從而不能列出你的網站。
2五、使用著名的
插件
若是網站上有聲音或視頻，要保證使用者經過使用某個知名的插件，可以聽到或看到。若是訪問者沒有所要求的插件，將不得不到其它站點去下載，這樣訪問者有可能就不會返回了。許多站點使用QuickTime、RealPlay和 Shockwave插件。由於，許多訪問者並不肯意浪費不少時間和金錢去下載可能僅使用一次的插件。
2六、使網站具備交互功能
一個
靜態網頁始終給人一種呆板的感受，缺乏一種活力和生氣。最好在網站上提供一些回答問題的工具以及其餘具備交互性能的設計，使得訪問者能從網站上得到交互的信息，從而使訪問者有一種參與網絡建設的新鮮感和成就感。
11設計師
第一部分（美術部分）
結構素描、光影素描、速寫、設計素描、戶外寫生
色彩原理、色彩配色、
設計色彩、色調小稿訓練、色彩長期做業
第二部分（靜態網頁）
Dreamweaver CS4：網頁佈局、製做；
Html&Css簡介；網站管理與維護、上傳與下載；案例分析
Flash CS4：經典網頁動畫、廣告、片頭、賀卡設計與分析；MTV製做、交互式網站簡介
Photoshop CS4：Photoshop操做基礎、圖像優化處理、經典實例分析與製做、
gif動畫、廣告gif圖片
IllustratorCS4：廣告招牌製做、燈箱廣告、服裝
廣告設計、企業徽標設計、名片設計
第三部分（
動態網頁
）
HTML（
標準通用標記語言下的一個應用）、
CSS樣式、IIS、C#語言、asp動態、Asp. net動態、PHP動態、CGI動態、jsp動態、SQLServer數據庫、Access數據庫、MySQL數據庫、JavaScript、Flash8.0高級編程、網站籌劃、
網站推廣、電子購物車、ChatRoom、BBS製做。注：此部分基本上是程序員工做，並非
網頁設計師所要學會的。
第四部分（
網頁美工
）
三大構成：平面構成、色彩構成、立體構成
Photoshop美工及網頁配色、排版設計、網站框架美工設計、網頁logo網頁設計、banner設計；
Illustrator網頁設計、網頁
字體設計、網頁規劃設計
12網站分類
企業網站主要爲了外界瞭解企業自身、樹立良好企業形象、並適當提供必定服務的網站。根據行業特性的差異，以及企業的建站目的和主要目標羣體的不一樣，大體能夠把企業網站分爲：
基本信息型
主要面向客戶、業界人士或者普通瀏覽者，以介紹企業的基本資料、幫助樹立企業形象爲主；也能夠適當提供行業內的新聞或者知識信息。這種類型網站一般也被形象的比喻爲企業的"web catalog"。
電子商務型
主要面向供應商、客戶或者
企業產品（服務）的消費羣體，以提供某種直屬於企業業務範圍的服務或交易、或者爲業務服務的服務或者交易爲主；這樣的電子商務網站建設能夠說是正處於電子商務化的一箇中間階段，因爲行業特點和企業投入的深度廣度的不一樣，其電子商務化程度可能處於從比較初級的服務支持、產品列表到比較高級的網上支付的其中某一階段。一般這種類型能夠形象的稱爲"網上xx企業"。例如，網上銀行、網上酒店等。
多媒體廣告型
主要面向客戶或者企業產品（服務）的消費羣體，以宣傳企業的核心品牌形象或者主要產品（服務）爲主。這種類型不管從目的上仍是實際表現手法上相對於普通網站而言更像一個平面廣告或者電視廣告，所以用"多媒體廣告"來稱呼這種類型的網站更貼切一點。
13網站格式
靜態網頁
靜態網頁多數爲單一的超文本標記語言檔案。現今很多網站建設皆傾向把動態網頁靜態化,從而令搜尋引擎最佳化。
動態網頁
動態網頁的內容隨着用戶的輸入和互動而有所不一樣,或者隨着用戶、時間、數據修正等而改變。網頁上的內容也能夠由用戶經過使用客戶端描述語言(JavaScript、JScript、Actionscript)來改變。
14網頁佈局
網頁能夠說是網站構成的基本元素。當咱們輕點鼠標，在網海中遨遊，一副副精彩的網頁會呈如今咱們面前，那麼，網頁的精彩與否的因素
是什麼呢？色彩的搭配、文字的變化、圖片的處理等，這些固然是不可忽略的因素，除了這些，還有一個很是重要的因素——網頁的佈局。下面，咱們就有關網頁佈局談論一下。
一、「國」字型
也能夠稱爲「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一塊兒羅列到底，最下面是網站的一些基本信息、聯繫方式、版權聲明等。這種結構是咱們在網上見到的差很少最多的一種結構類型。
二、拐角型
這種結構與上一種其實只是形式上的區別，實際上是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列連接等，右列是很寬的正文，下面也是一些網站的
輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航連接。
三、標題正文型
這種類型即最上面是標題或相似的一些東西，下面是正文，好比一些文章頁面或註冊頁面等就是這種類。
四、封面型
這種類型基本上是出一些網站的首頁，大部分爲一些精美的平面設計結合一些小的動畫，放上幾個簡單的連接或者僅是一個「進入」的連接甚至直接在首頁的圖片上作連接而沒有任何提示。這種類型大部分是企業網站和我的主頁，若是說處理的好，會給人帶來賞心悅目的感受。
五、「T」結構佈局
所謂「T」結構佈局，就是指網頁上邊和左邊相結合，頁面頂部爲橫條網站標誌和廣告條，左下方爲主菜單，右面顯示內容，這是網頁設計中用得最普遍的一種佈局方式。在實際設計中還能夠改變「T」結構佈局的形式，如左右兩欄式佈局，一半是正文，另外一半是形象的圖片、導航。或正文不等兩欄式佈置，經過
背景色區分，分別放置圖片和文字等。
這樣的佈局有其固有的優勢，由於人的注意力主要在右下角，因此企業想要發佈給用戶的信，大都能被用戶以最大可能性獲取，並且很方便，其次是頁面結構清晰，主次分明、易於使用。缺點是規矩呆板，若是細節色彩上不注意，很容易讓人「看之無味」。
六、「口」型佈局
這是一個形象的說法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情連接等，中間是主要內容。
這種佈局的優勢是頁面充實、內容豐富、信息量大，是綜合性網站經常使用的版式，特別之處是頂部中央的一排小圖標起到了活躍氣氛的做用。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站使用多幀形式，只有頁面中央部分能夠滾動，界面相似遊戲界面。使用此類版式的有多維遊戲娛樂性網站。
七、「三」型佈局
這種佈局多用於國外網站，國內用得很少。其特色是頁面上橫向兩條色塊，將頁面總體分割爲4個部分，色塊中大多放廣告條。
八、 對稱對比佈局
顧名思義，它指採起左右或者上下對稱的佈局，一半深色，一半淺色，通常用於設計型網站。其優勢是視覺衝擊力強，缺點是將兩部分有機地結合比較困難。
九、POP佈局
POP源自廣告術語，指頁面佈局像一張宣傳海報，以一張精美圖片做爲頁面的設計中心。經常使用於時尚類網站，優勢顯而易見：漂亮吸引人，缺點是速度慢。
15佈局錯誤
一、導航菜單使用圖片、flash
二、不恰當地使用圖片
三、內容裏特殊字體的運用
四、新窗口打開
五、無實際意義的特效
六、內容滾動
七、用戶難以獲取本身想要的內容
八、文件名命名不規範
九、長篇文章未設置分頁
十、顏色搭配錯誤，網頁難於閱讀
十一、沒有返回指向
十二、顯眼的點擊計數器
1三、使用框架
1四、不恰當地使用聲音
1五、兼容性不佳
1七、急於發佈網站。
16排版問題
一、字間距太擠或太寬
二、行距過小或太大
三、段距太少或太多
四、每行字數太多或太少
17提升效率
最好的方法莫過於模塊化，此前國內少有真正優秀的網頁
模板，PSD吧專一設計多年，擁有一批高水準的設計師，PSD吧公開下載頂尖設計檔次的模板，並受權用於商業，可大大提升網頁設計的效率。
另外，像來自美國，風靡亞洲的
怪獸模板網站，其網站上的網站模板設計具備很高的水平。
怪獸模板開發了不少CMS網站模板包括
joomla，
WordPress，
magento，
drupal，
mambo等,以及設計精美的
ZenCart，
magento，
oscommerce網店系統等目前市場上最流行各類類型各類行業的
網站模板。
18設計誤區
1、不重視域名和空間
很多企業在進行網頁設計時的時候，不注重域名和空間的穩定性，隨便找個域名和空間來註冊。一個空間能夠存放不少網站，一旦其中一個網站被降權或被K那將影響到其餘的網站，選擇好的、有保障的供應商很是重要。
2、注重外觀不注重實用
不少企業在進行網頁設計時，網站注重網站外觀是否漂亮，有的網頁爲追求漂亮，用了大量的flash，實際上flash不利於百度蜘蛛的抓取，不利於企業開展網絡營銷，建議企業在進行網頁設計時的時候，不只要重視它的外觀是否漂亮，還要注意網頁是否迎合搜索引擎的喜愛。
3、網站維護的缺少
不少企業把網頁建好之後就無論不問了，有的網頁成年累月沒有更新內容，這樣百度就沒法收錄對於企業來講，必須找一些專業人士進行網頁內容更新。
19工做內容
1 、負責對網站總體表現風格的定位，對用戶視覺感覺的總體把握；
二、進行網頁的具體設計製做；
三、產品目錄的平面設計；
四、各種活動的廣告設計；
五、協助開發人員頁面設計等工做。
好處
首要，是作到用戶價值上的簡單。在中心用戶價值上只保存最重要的一項，其餘均可以先捨去。這樣作最大的優勢是用戶能夠很簡單瞭解你所要表達的價值。就好像談到查找引擎用戶就很天然地想到百度。
20優化問題
框架結構
有些搜索引擎(如FAST)是不支持框架結構的，他們的「蜘蛛」程序沒法閱讀這樣的網頁。
頁面結構
DIV+CSS是網頁美工必須瞭解和掌握的一門技術，互聯網是屬於
web2.0的時代，主流的網站都採用DIV+CSS結構。
DIV+CSS便是樣式和數據分離，利於搜索引擎讀懂網站頁面，提升網頁收錄數量，最主要是方便管理和維護網站。
圖像區塊
除AltaVista、Google和Northern Light(現已中止公共搜索服務)明確支持圖像區塊連接外，其餘引擎是不支持它的。當「蜘蛛」程序遇到這種結構時，每每會感到
茫然不知所措。所以儘可能不要設置Image Map連接。
特效連接
咱們常常看到有些網站爲導航連接加上了特效，如點擊某個項目會展開下層連接等。這些效果通常經過Java Script實現，視覺上很是新穎，但在「蜘蛛」程序的眼裏則沒那麼誘人，相反它沒法解讀這種連接。爲了讓搜索引擎順利檢索到你的網頁，建議仍是犧牲掉一些花哨的東西。
FLASH
雖然FLASH製做的網頁視覺效果較好，但搜索引擎對此卻不太感冒，個案代表這一類的網站很難被
百度搜索引擎索引。明智的作法是提供FLASH和非FLASH網頁兩種選擇，這樣即增長了網頁的觀賞性，又照顧到了搜索引擎的情緒。
加密網頁
除非你不但願搜索引擎檢索你的網頁，不然不要給你的網頁加密。
網頁容量
包括圖像在內的網頁字節數最好不要超過50K。體型龐大的網頁下載速度慢，不只會讓普通訪問者等得心急如焚，有時也會使「蜘蛛」程序感到不耐煩。