做好網頁設計，需要掌握的軟體和技術還挺多的，但不建議都把這些技術掌握的很精通，畢竟人的精力是有限的，可以選擇其中的一項技術來認真鑽研，並達到熟練掌握運用。

下面來說下網頁設計的兩個方面

一.視覺方面

如果你是設計專業或者對視覺有很濃厚的興趣，那就可以選擇做這個方向的網頁設計，也就是透過設計軟體，根據原型圖或者草圖製作高保真效果圖。要做這方面的網頁設計，需要掌握的設計軟體有photosho,illustrator等視覺設計軟體。

ps主要用來設計網頁效果圖和對效果圖進行切片以及一些網頁小元素的處理和製作，用處可以說相當大，學好PS就完全可以製作出精美的網頁了。illustrator主要是處理一些向量圖形或者圖示，輔助PS進行網頁設計，這要看你哪個軟體掌握的熟練，就以哪個為主。

掌握了基本的網頁設計軟體，下面就要多學習一些網頁的基本知識，比如網頁尺寸，網頁佈局排版等規範，這些需要長時間的練習和積累，要多看多想多做，慢慢你就會發現自己水平提高了，設計的網頁也越來越專業和漂亮。

二.網頁前端

這個方向的網頁設計，需要掌握和精通前端html程式碼以及css樣式js這些，也就是透過這些把ps設計好的效果圖實現成可以透過瀏覽器瀏覽訪問的網頁頁面。對程式碼有興趣的朋友可以朝這個方向發展。

推薦使用的軟體是Dreamweaver，方便易學，可以快速進行網頁佈局和css，當然隨著學習的深入，你會知道其他很多前端設計軟體，這裡不再一一介紹。

1、 首先將你的想法在紙上畫出來

這是一幅世界各地不同年城市特色建築的草圖，每個人開始設計之前都會在紙上畫草圖，但是很多設計師都跳過了這一步，沒有考慮到他們將會面臨的問題。設計就是要解決問題，但是這些問題透過漸變、陰影設定是解決不了的，只有透過調整佈局和層次結構才能解決。所以在你開始設計之前，一定要先想好佈局。

2、 描繪一個頂層框架

描繪一個基本的框架可以幫助你解決UX方面的問題，同時規劃佈局。當我接手一個專案的時候，做的第一件事就是建立一個頂級框架，這樣可以解決所有的設計問題。這個框架是指環繞在內容周圍的UI，它可以幫助我們執行操作，更好的操縱頁面。它包括導航和元件，比如側邊欄和底部的按鈕。

如果你透過這種方式來做設計，在不看主頁的情況下，你也能清晰的知道應該怎樣佈局。

3、 給PSD新增網格

這是一個有978個網格的PSD檔案，每條線的寬度為10PX。畫網格做起來就像聽起來那麼簡單，雖然你不畫直接開始設計完全可以，但是我相信設計出來的作品絕對沒有畫了網格好。網格的好處就是幫助你構建不同板塊的佈局，起一個指導作用，幫助你製作響應式模板。

4、 選擇你的字型

網頁設計中很重要的一個原則就是一個網頁中不要出現兩種以上的字型在一個專案中，尋找好看的字型也是很重要的一部分，但是我要提醒你，在同一個網頁中千萬別使用兩種以上的字型。選擇字型的原則就是要易於使用者閱讀，尤其是文字很多的頁面，文章標題的字型可以有趣一些，這樣能吸引使用者的注意。在使用字型的時候不要畏首畏尾，個頭大不是問題，只要整體看起來很和諧生動就行了。

5、 選擇合適的顏色主題

使用有限的顏色和色調，減輕使用者的視覺壓力。 在選擇字形的時候，你就應該想好使用者介面、背景、文字該用什麼顏色。我建議你在顏色的原則方面一定要有節制，別想到哪個用哪個，最後五顏六色亂七八糟的，這也是大忌。

在這一步中，你要根據每個元素的功能選擇顏色，並且在使用者介面中，相同的元素顏色一定要一致。你可以觀察一下facebook、推特、quora、vimeo等等網站的頁面，在不干擾功能元件正常使用的情況下，除了使用者介面，它們的插畫和平面細節沒有任何顏色限制。

6、 分開佈局

網頁結構越簡單，使用者使用越容易在網站中，每個模組都要有個故事，要給使用者一個瀏覽的理由和最終的結果。而設計的作用就是強調這個故事中最重要的那部分。在現實設計中，主頁面不能將所有的資訊都顯示出來，所以你必須在主頁先告訴使用者“進了這個網站你能做什麼”。

發揮你的聰明才智思考一下你能想到的極簡頁面，有最簡單的目標和必要的構件。最後你會發現，原來保持簡單這麼困難。

7、 重新思考

網頁設計，最直接的當然是作圖軟體啦，這是一個工具，ps比較常用，當然其他ai什麼的也可以，每個人習慣不同，也有大神能用excel做圖，難不成說不能用對吧

其次是瞭解網頁結構尺寸，要知道自己做的網頁是什麼尺寸的，哪裡用的，什麼格式

接著要知道美術相關的知識，色彩搭配，透視，陰影等，一般的從業者也是基於目前掌握的知識邊做邊學，當然科班生在學校裡就紮實了一些基礎.這部分是通的，也是非常重要的

還需要了解網頁設計的作用，比如網站首頁，做的東西沒人看，看了一眼就關閉看別的去了，這樣就跟沒做一樣，網頁設計也就沒什麼意義了，當然還有什麼消費者心理學，使用者體驗互動體驗之類的也是對設計也是有用的.我覺得設計是相通的，很多知識不一定是在某一個或者某幾個領域用，多學多看多想，很多時候是感覺用到方恨少.

再者就是網頁背後的程式碼部分了，有程式碼才能讓這些影象展示給我們看.具體大家百度一查就有程式碼相關的

現在有很多的模版之類的可以瞭解使用參考，網路上也有很多非常好的案例可以欣賞學習，獲取資訊的途徑是數不勝數

總之，三言兩語只是簡單的概括一下.希望可以讓你腦子裡大概形成一個概念，瞭解網頁設計.

網頁設計，你是想設計網頁圖片還是想做前端或者程式設計?這三種是不一樣的。完整的網頁設計順序是美工先設計出圖片，然後交給前端製作製作出框架，然後後端程式設計使網頁功能完善。你自己對哪方面感興趣，就可以學習哪方面的技術

第一，要會從設計開始，例如PS，cdr，ai等設計軟體開始，慢慢學會介面設計，色彩搭配，排版設計等基本知識，慢慢過渡到網頁美工設計，排版設計等。

第二，要學會Dreamweaver網頁設計軟體，還要懂HTML（超文字標記語言），css（層疊樣式表），這些基本的網頁程式碼開始，最後結合設計，做好排版即可。

做網頁美工設計等一定要有基本的美工知識，還要有學習軟體的能力，基本的美工設計知識包括色彩搭配，排版設計，字型設計，繪圖切圖等能力。主要應用的軟體有PS，cdr，ai等。另外，還要懂網頁設計所應用的Dreamweaver軟體，HTML，css程式碼等網頁程式碼。除此之外，你還可以學習一下JavaScript指令碼語言，能夠懂一些動態的網頁設計即可！

做好網頁設計，首先你得掌握基本的網頁知識，第一部分，你得學好html知識，HTML是用來描述網頁的一種語言，它是一種超文字標記語言，而標記語言是一套標記標籤，所以你開啟一個網站檢視原始碼之後看到的都是一個個標籤，所以學好html，你就是學好一整套的標記標籤，掌握這些標籤的用法和屬性以及如何用這些標籤實現更好的效果，第二部分，你得學習CSS知識，Cascading Style Sheet,簡稱CSS,通常又成為風格樣式表，或者層疊樣式表，它是用來進行網頁風格設計的，透過設計樣式表，可以統一控制HTML中各標誌的顯示屬性，透過它可以更有效地控制網頁外觀，使用CSS,可以擴充精確指定網頁元素位置，外觀以及建立特殊效果的能力，第三部分，JavaScript知識，JavaScript是一種基於物件和事件驅動並具有相對安全性的客戶端指令碼語言，即Web指令碼，同時也是一種廣泛用於客戶端開發的指令碼語言，常用來給HTML網頁新增動態功能，掌握這些基礎知識後你可以嘗試著做網頁了。

想要做好網頁設計，學習的東西還是不少的。

第一：從學習設計開始，例如PS、AI、cdr等設計軟體，學會色彩搭配、排版設計、字型設計等基本知識。

第二：還要學習HTML，HTML是一種超文字標記語言，用於描述網頁文件的一種標記語言。html標籤由一個個標籤組成，可以參考W3school,掌握好這些標籤的使用，就能完成一個網頁的製作。

第三：還要學習css，指層疊樣式表 (Cascading Style Sheets)。相同的也可以參考W3school，使用 CSS 同時控制多重網頁的樣式和佈局，學好css也是非常重要。

網頁設計相對帶硬體知識的嵌入式程式設計和PC端網路程式設計的難度要小多了，一個簡單的網頁只需要學習html，css，js這三個即可。最後有C語言的基礎。

我學習網頁在2003年非典在家沒事上網，想做一個網上線上執行的CRC計算器，即網頁版本的CRC計算器。

當時只要實現功能即可，介面不需好看，故只需要html+js(因為需要gb2312漢字編碼，故需要vbs)。

因為本人就是搞軟硬體的，學習的程式語言眾多，故非常快的入門並實現了初步的線上離線執行的功能。

一直在IE下執行，即只能在PC端的windows環境下執行，其他瀏覽器都無法執行(不支援vbs)，所以相容性太差。

在網上執行13年後，終於下決心做全相容，可以在任何平臺上執行。

為了美化介面，有臨時學習了css，終於自己需要的HotCRC計算器實現了全相容。

所以，不要萬事求人！只要自己想做，沒有不能做的事才行。

網頁設計--根據企業希望向瀏覽者傳遞的資訊（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作，作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的網際網路品牌形象至關重要。

整個頁面的設計應該是和諧統一的頁面整體和諧了，給瀏覽者是一個暢快舒服的感覺，要做到這個視覺效果，必須注意頁面裡文字、圖片、線條、背景的統一融合，把這些組成網頁的因素都有機聯絡起來，做到這個比設計好一張圖片困難，他需要有整體大局的眼光，不去拘泥於區域性或細小的地方。其實網頁設計就應該先整體再區域性，不過設計師最經常犯的錯誤就是鑽進區域性的巷子裡忘記出來。網頁設計應該合理運用好網頁的色彩色彩在設計行業非常重要，如果一個設計師的色彩感很強，那麼他到達優秀的距離就很近了。設計師需要根據色彩對人們心理的影響，合理運用好文字的色彩、圖片的色彩、線條的色彩和背景的色彩。如果是企業網頁設計，則可以根據企業的VI進行色彩的運用。網頁設計不是為了設計而設計，是為了更好地突出內容每一個網頁設計師都應該記住，我們做設計，不是為了讓使用者感覺到你的設計好看，而是為了更好地展現我們設計的目的，我們應該給使用者展現的東西是什麼？所以，一個好的網站設計，頁面的設計效果都應該是被弱化的；一個好的網站設計，應該是在最短的時間內讓使用者知道你的網站是做什麼的，有什麼功能。網頁設計需要考慮實際的瀏覽效果最怕剛從其他設計行業轉行過來的設計師，一味地使用背景、圖片、不支援的字型，不會充分利用好網頁本身的線條、邊框、背景功能。導致網頁設計出來了，效果很好看，但實際製作成網站後，因為背景或圖片使用過多，頁面開啟太慢，瀏覽效果大打折扣，這樣的設計也是非常失敗的。一個好的網頁設計應該是怎樣的呢？我想必須要做到以上四點才算好的設計，當然做到以上四點不一定是好的，設計是一門很深的學問，使用者的要求和設計感越來越強，需要我們不斷探索和研究，才能給使用者更好地設計作品。

　　1. 簡單易懂的紋理

　　真正優秀的背景紋理，在絕大多數時候甚至是不會被使用者注意到的。它應該是一個幾乎不可見的元素，並且有助於提高整體的可讀性和可用性，同時提供足夠的視覺深度。

　　簡單而低調的背景紋理是提升整個設計的可用性的最佳方式。在去年的 Github 宇宙會議的頁面上，設計師就採用了簡單的黑色背景加上白色圓點的紋理設計，營造出夜空的效果。在夜空的映襯之下，多彩的 LOGO 和漸變的按鈕有著良好的可識別度。

　　簡單的背景紋理通常有著小而緊密的重複的圖案，它可以是任何顏色，這個思路讓背景紋理不會作為焦點存在，而是作為襯托其他元素的重要工具。

　　2. 紋理可以更大，更大膽

　　紋理可以很微妙，很小，但是也同樣可以很大。大膽一點，選擇更大的紋理或者說圖案，同樣能夠產生不錯的效果。

　　這種超大的圖案所構成的紋理能夠作為背景來使用，前景應該有更重的元素，比如一定數量的文字，或者是圖片等相對較重的視覺內容。這樣的背景紋理/圖案其實總體處理起來會比較棘手，因為它有一定的機率會讓使用者注意到並且分散注意力。

　　為了確保這種超大的紋理圖案不影響正常的效果，最好是注意分析使用者習慣，並且匹配整體的內容，如果頁面的流量或者轉化率下降那麼一定是使用者沒有獲取到其中的資訊。

　　3. 結合當前設計趨勢的紋理

　　結合時下流行的設計趨勢來設計紋理，往往能夠讓整個設計呈現出富有時代感的體驗。

　　幾何圖形元素是時下流行的設計元素之一，將幾何圖形融入到背景當中，毫無疑問可以非常吸引人。看看 Apacio 這個網站的設計，深色的背景之上混合色彩鮮豔的幾何圖案，創建出富有深度且抓人眼球的視覺，透過對比讓使用者將注意力集中在較大的文字和 CTA 元素上。文字採用了簡約的非襯線體，這使得它們可以從黑色和綠色的背景中脫穎而出。

　　紋理的層次對於整體的效果是有所支撐的。值得注意的是，背景中的紋理和圖案、背景以及前景元素之間的對比。

　　4. 使用圖片來構建紋理

　　背景紋理並不一定非得是那種精心製作的小圖案，有些細節豐富的圖片同樣可以作為背景紋理，它能夠增加視覺層次，提升吸引力。

　　這種設計的訣竅在於，圖片需要淡入到背景當中。

　　在上面的案例當中，Oxeva 這個網站透過兩種方式來做到融入背景的設計，設計師一方面讓圖片的明度降低了，讓使用者能夠看到景觀的輪廓，然後設計師在前景疊加上了一個漸變色彩層，這使得整個背景顯得極為富有視覺表現力。圖片所提供的細節並不多，但是在視覺上依然可以分辨。

　　5. 使用色彩變化來創造紋理

　　使用不同明暗飽和度的同系色彩可以構建出形狀或者文字，同樣能夠達到效果。色彩的變化同樣能夠創造出有深度的視覺效果。

　　Types of Type 這個網站就使用帶有色彩變化的巨大字母在背景中作為紋理，即使沒有用到漸變和陰影這樣的技巧，同樣也有深度，也足夠平衡。這樣的設計讓整個頁面顯得活潑而不乏味，對比使得整個設計主次分明。

　　6. 使用漸變來製造紋理效果

　　現如今的漸變幾乎成了時尚的代名詞，漸變色彩可以在背景中替代紋理存在，也能結合圖片和其他的元素來使用。

　　幾乎所有的色彩組合都能夠創造出漸變效果，想要藉助漸變創造出視覺深度和紋理的體驗並不難，如果你還沒有成型的配色方案，你可以直接從 WebGradients 中找你喜歡的配色方案。

　　Mobipad 這個網站在背景中使用了多個不同的漸變色來創造效果，合理的對比度控制讓前景的動畫非常的明顯，深色的部分有著良好的可讀性，一目瞭然。

　　7. 讓背景動起來

　　絕大多數的背景紋理的技巧都是靜態背景的設計技巧，但是背景和紋理同樣可以是動態的。

　　為了避免喧賓奪主，動態的背景紋理應該是很微妙的，否則會影響前景主要資訊的傳達。配色應該是柔和的，就像上面這個名為 Latvian Alphabet 的網站一樣。

　　動態的網站背景紋理可以是動態的圖片或者被調整過的影片。動態的背景是吸引使用者注意力的好辦法，只不過要適度就好了。