新手學做網頁的20個技巧怎樣編寫網頁設計 _經驗分享

網頁設計詳細操作步驟
一、確定網頁主題
網頁主題就是你建立的網頁所要包含的主要內容，一個網頁必須要有一個明確的主題。特別是對于個人網頁，你不可能像綜合網頁那樣做得內容大而全，包羅萬象。你沒有這個能力，也沒這個精力，所以必須要找準一個自己最感興趣內容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網頁的主題無定則，只要是你感興趣的，任何內容都可以，但主題要鮮明，在你的主題范圍內內容做到大而全、精而深。
二、搜集材料
明確了網頁的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊” 。要想讓自己的網頁有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網頁就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯網上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網頁的素材。
三、規劃網頁
一個網頁設計得成功與否，很大程度上決定于設計者的規劃水平，規劃網頁就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網頁規劃包含的內容很多，如網頁的結構、欄目的設置、網頁的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網頁才能有個性、有特色，具有吸引力。如何規劃網頁的每一項具體內容，我們在下面會有詳細介紹。
四、選擇合適的制作工具
盡管選擇什么樣的工具并不會影響你設計網頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網頁制作涉及的'工具比較多，首先就是網頁制作工具了，目前大多數網民選用的都是所見即所得的編輯工具，這其中的優秀者當然是Dreamweaver和Frontpage了，如果是初學者， Frontpage2000是首選。除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等;動畫制作工具，如Flash、Cool 3d、Gif Animator等;還有網頁特效工具，如有聲有色等，網上有許多這方面的軟件，你可以根據需要靈活運用。
五、制作網頁
材料有了，工具也選好了，下面就需要按照規劃一步步地把自己的想法變成現實了，這是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現問題時好修改。在制作網頁時要多靈活運用模板，這樣可以大大提高制作效率。
六、上傳測試
【新手學做網頁的20個技巧怎樣編寫網頁設計】 網頁制作完畢，最后要發布到Web服務器上，才能夠讓全世界的朋友觀看，現在上傳的工具有很多，有些網頁制作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網頁發布到自己申請的主頁存放服務器上。網頁上傳以后，你要在瀏覽器中打開自己的網頁，逐頁逐個鏈接的進行測試，發現問題，及時修改，然后再上傳測試。全部測試完畢就可以把你的網址告訴給朋友，讓他們來瀏覽。
七、推廣宣傳
網頁做好之后，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網頁的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊、與別的網頁交換鏈接、加入廣告鏈等。
八、維護更新
網頁要注意經常維護更新內容，保持內容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內容，才能夠吸引住瀏覽者。
拓展閱讀：網頁設計的禁忌
關于外觀的禁忌
1、不要先決定網頁的外觀，然后強迫自己甚至是強迫別人去適應它。應該從網站的瀏覽者、網站要傳達的信息以及網站的發展目標考慮，設計出一個最適合的網頁架構。
2、不要每頁都采用不同的背景圖片，以免每次轉頁都要花時間去下載。采用相同的背景色及近似的按鈕都能增加網頁一致性，樹立統一的風格。這也是最基本的網站VI設計(視覺識別系統) 。
3、不要把圖片的白色部分當作是透明的顏色，要知道別人的操作系統是并不一定會將底色設為白色的。解決的方法是把網頁的底色設為白色。而最好的方法是用圖片編輯工具為圖片設置好透明底色。
4、底色或背景須與文字顏色形成明顯對比，方便閱讀。若你的網頁里有較多文字，不妨在這方面下多點功夫，力求讓瀏覽者能舒適閱讀你的文章。
5、每頁的排版不要太疏或用太大的字，盡量避免看網頁的時候要作很大的卷動。
6、太長的一頁要使用內部鏈接，聰明的網頁設計者不會讓瀏覽者在看網頁時太多卷動。常見的內部鏈接例子如 FAQ、或名詞解釋。
7、在17寸顯示器尚未普及的時候，不要以 800x600 以上的像素設計網頁。因為這常常會導致設計上的判斷失誤。因此，無論你有再大的顯示器，能上再大的分辨率，將顯示器設置成 800x600的顯示模式是適當的。
8、不要于每頁插入太多的廣告牌。相信你也不會喜歡貼滿廣告的網頁。什么廣告交換、點錢Banner、彈出窗口，還有時下最流行卻又最討厭的浮動廣告，還是少放為妙。至少,當我看到的時候，是會第一時間按右上角的“X”的。
關于操守的禁忌
1、不要抄襲別人的創作。網絡上的所有資料都是公開的，但都有版權的，若想引用別人的作品，不妨先征得同意，一般作者都只要你注明出處，對于電腦方面的東西，大多數朋友都是熱情而慷慨的。更不要下載了別人的網站后，當作是自己的放在網上，這樣做的結果是使所有人都知道你是個剽竊者。
2、引用 Newsgroup、BBS、或其他非電子傳媒的文章，切記要注明原作者名稱及文章事源，若引用別有的網頁更要通知網主。尊重版權，避免官司，利人利已。
3、不要利用網頁散布謠言、中傷他人，網絡雖然難管理，但本著道德良心，都應潔身自愛。維持良好網絡環境，要靠大家努力，從我做起。
4、不要將別人的網頁變成你的框架中的一個窗口，這樣不僅為瀏覽者帶來不便，令人的網頁更丑陋，而且也侵犯了別人的版權，解決方法是采用鏈接中的 target 參數，如 target="_top" ，或是target="_blank" 從新窗口打開網頁等。若重視訪問者的感受請從每一細節做起。
5、不要將別人正在使用的搜索引擎、表單及計數器等放到自己的網頁中，這樣做會擾亂其正常運作、增加該服務器的負荷，除非該主人表示可以連到他的 cgi-bin 或 JavaClass 。

網頁設計的基本步驟及設計方法
網頁設計通常有哪些基本步驟呢？要想設計出漂亮的頁面。需要熟悉哪些設計方法呢？以下僅供參考！
第一步. 收集與歸納素材
確定項目設計方案、確定項目創意要點、確定項目表現形式、確定項目文案以及確定項目相關素材。
第二步. 處理醞釀,構思畫出項目原型圖
讓思想自由馳騁，發揮思維的靈活性；對前期收集的信息進行綜合處理；運用各種方法勾畫出若干可實施方案。
第三步：討論并總結可實施方案
對一眾方案進行篩選并挑選出最具備可行性特質的方案。
第四步. 項目設計實施與后期校驗
在整個項目進行過程中，都要對項目的各個關鍵點進行全面的思考，并要與項目相關的各個角色保持高效的溝通，善于抓住問題核心并能給出相應的解決方案，很多時候設計師的溝通水平決定了項目的進展、推進速度與最后輸出成果的質量。
網頁設計創意方法之一——借鑒創意法
特點：較適用于短平快．但又要求有細節的項目。
借鑒創意法可以從我們已知的一切入手，一如街邊的路牌、途中的風景、斑駁的墻漆、月夜下的街燈，再到同行的案例啟發，這些都是我們可以吸取的地方。相信我們都有逛網的習慣，這不僅是積累各方知識及了解時下流行視覺趨勢的好方法，無形中也豐富了我們的創意閱歷，為借鑒創意種下良好的因子。在工作中，當我們黔驢技窮，為找不出一個好的創意解決方案而撓頭時，可以吸取日常工作、生活中的所見所聞，從其中的一個點，或者一個表現出發，借鑒其成功之處，拓寬創意思路，結合項目現狀，給出優質的創意設計。
網頁設計創意方法之二——情景(情感)映射創意法
特點：較適用于短平快．對情感有一定訴求的項目。
說明：情景創意法的'進行要求對一個想法進行縱向深入發掘，思維忌橫向發散。
生活中，我們都是獨一無二的，不同的成長的歷程賦予了我們不同的閱歷、不同的性格、不同的想法與世界觀。我們每個人都有自己獨一無二的想像力、理解力和判斷力。于是乎，當我們面對同一件事物時，會做出不同的情感反映。同樣的，在我們的日常創作過程中，也就有了不同視覺風格，不同創意想法的出現。
情景映射創意法是把我們所要表達的概念化的、抽像化的東西（如文案、主題等）豐富化、立體化。把這些所要表達的概念逐步的從低級抽象向高級抽象演變，直至獲得滿意的創意表達為止。
比如說春天，在想到春天的時候。在腦海里我們都會出現不同的元素，豐富而有詩意，綠色、和風、細雨、春泥、青草，還有風箏、燕子、踏青諸如此類。由此，我們可以充份發揮我們的主觀能動性，融合主題創造出富有感染力的創意畫面。
網頁設計創意方法之三——思維導圖創意
特點：要求有較好的視覺表現力，有思想深度、延展度的項目，如海報、平面、廣告、富媒體等。
思維導圖是一種放射性的創意模式，被認為是最自然的一種創意工具(自認為是這樣) ，很多時候，當項目對創意表達有較高的要求時，它是一個既簡單有效又具有美感的創意工具。思維導圖法以需要解決的問題為起點，把我們所認識的、與問題有關的元素進行聯想細分，向外延展，再延展，充分發揮聯想的創造力。然后思維再跳出來，把這些之前創造性的想法都結合起來，進而激發出我們創意的火花。
網頁設計創意方法之四——頭腦風暴與逆向思維
說明：較適用對整體創意有較高要求的項目，如大中型項目的創意起始階段。
局限性：頭腦風暴方法對會議的主持人有一定要求，要求具備相當的專業性與組織能力。
說起頭腦風暴，似乎已經沒有人不知道了；在創意工作開始的時候，想到的最優先的，也應該是頭腦風暴，但在這里還是想提一下。因為始終覺得在眾多創意方法中，頭腦風暴確實是優秀的且可行性很高的創意方法之一。
頭腦風暴的特點是：眾志成城。是集眾人才智解決創意缺失的良好方法。是眾多創意方案的集合。是創意工作中的捷徑。

如何制作一個網頁
制作一個網頁只要掌握了正確的方法，其實并不難，那你知道如何制作一個網頁嗎?下面是由我分享的如何制作一個網頁的方法，希望對你有用。
制作一個網頁的步驟
確定網頁的主體色調風格。
我們制作自己的網頁首先應該對自己的網頁有一個整體的規劃，是建一個什么類型的網站，網站主色調使用哪種顏色、設計布局采用什么樣的方式等這些都需要有一個很好的規劃。
規劃網站的整體布局——導航、按鈕、圖片、文字的排版方式。
做什么事都不能盲目的沒有目的的進行，那樣只能浪費時間浪費精力，在我們制作網頁之前一定要對網頁的基本元素進行一些設計。可以簡單的畫草圖，或者瀏覽幾個自己比較喜歡的網站學習借鑒。
準備和歸類素材——圖片、音頻、視屏、文章等。
制作一個網頁需要大量的文件，我們必須先將這些不同類型的文件進行歸類放置，整理到一個文件夾中。
打開Dreamweaver軟件，新建一個站點，然后在站點下建立不同的文件夾存放素材。
建立自己的主頁，按照之前的定的風格設計布局。
不要急著添加圖片和文字，先將導航欄，標題欄和內容欄都規劃好然后在進行素材的導入。注意無論是文件夾的名還是素材名最好使用英文而不是中文。中文狀態很容易報錯，文件添加后就不要更改文件路勁了，否則會導致文件的丟失。
制作網頁是一個非常復雜的過程，如果想從頭到尾自己制作一個網頁的話是很難說清楚的，所以這里就分享一個很簡單的方法。
找到一個適合自己風格或是自己比較喜歡的網頁，右擊鼠標——另存為。
這時瀏覽器就會將這個網頁中的所有的元素都復制下來，存放到一個文件夾中。
打開Dreamweaver軟件代開剛剛下載的網頁，這時Dreamweaver中就會顯示你下載網頁的所有元素，不會出現丟失的情況。
替換網頁中的元素即可。
選擇需要進行修改的圖片或是文字直接更換即可。選擇一個元素然后在下面的屬性欄中進行更換即可。同時還可以更換圖片的大小和其他的屬性。

該如何設計網頁
一、網站結構設計
網站結構設計包含網站欄目設計和網站模塊設計以來確定網站提供服務的一種邏輯表現形式，也是網頁之間的層次關系。
1.網站欄目能起到提綱挈領額作用
2.網站欄目具有清晰導航的功能
3.網站模塊要做到順序清晰且緊密結合
二、網站主題設計
網站主題設計實際就是網站視覺呈現風格的設計。網站的主題風格要能充分吸引用戶的注意力，為用戶提供愉快的訪問體驗。
1.設計能反映網站內容的logo,并且將logo放在網站的醒目位置。
2.網站的顏色要統一，要突出網站的主調色彩。
3.相同類型的圖像要有相同的效果。
4.網站要有一句明晰的宣傳標語。
三、網站布局類型
1. 國字型布局
這種布局類型分為上邊欄、左邊欄、中間內容區、右邊欄和底部的頁腳區域，其形狀酷似一個“國”字。國字型是目前比較常用的一個網頁布局結構，它適用于信息分類繁多、需要良好組織的網站。
2. T字型布局
這種布局類型由上邊欄、左邊欄、內容區、下邊欄組成，其形狀有點像一個英文字母寫的“T”字。T字型網站目前在一些權威機構、企事業單位的公司網站出現得比較多。
3. 左右框架型布局
這類網站主要由左邊欄和內容區組成，組成比較簡潔，主要用于精彩內容的呈現，主要是很多個人站點、博客的首選。
4. 上下框架型布局
這類網站由上下邊欄組成，上邊欄用來放置logo和鏈接等信息，下邊欄用來放置網頁的內容。上下型網站經常用來進行個性化展示，在企業門戶網站的公司展示中也比較常用。
5. 標題正文型布局
這類網站的布局結構由上邊欄和內容區組成，上邊欄用于顯示文章的標題。主要用于顯示文章的標題，內容區放置文章的內容，這類布局在一些論文、學術網站的設計中比較常用。
網站設計都不會單獨使用以上列出的某一種布局結構，而是通過混合使用多種布局結構來實現自己想要的效果，這類布局通常稱為“綜合性布局” 。
四、網站頁面設計
網站頁面是網站的最終表現形式。網站頁面內容的質量度和頁面的美觀度來決定。頁面設計應該遵循的原則如下：
1.符合企業的行業屬性和企業特點。客戶打開網站能直觀感受企業所傳遞的理念和特征。
2.符合用戶的瀏覽習慣。根據網站內容的重要性進行排序，讓用戶花最短的時間能夠找到自己需要的信息。
3.符合用戶的使用習慣。將用戶經常使用的功能放在網站的醒目位置。
4.圖文搭配。
5.利于搜索引擎優化。減少圖片和動畫，多使用文字描述，以便于搜索引擎收錄，讓客戶更容易找到你。格子網絡解答。
新手學做網頁的20個技巧
新手學做網頁的20個技巧
導語：新手如何做好網頁設計?在這里我整理了給新手學做網頁的20個技巧，每一個網頁設計新手在開始一個項目之前都應該了解這些知識，在項目開展中也應該注意。下面一起來看看吧!
01：將你的想法先在紙上畫出來敢想敢做，有想法就應該畫下來
這是一幅世界各地不同年城市特色建筑的草圖這個想法看起來好像理所當然，似乎每個人開始設計之前都會在紙上畫草圖。但是據我觀察很多設計師都跳過了這一步，從沒有考慮過他們將會面臨的問題。設計就是要解決問題，但是這些問題通過漸變、陰影設置是解決不了的，只有通過調整布局和層次結構才能解決。所以在你開始設計之前，一定要先想好布局。
02.描繪一個頂層框架
描繪一個基本的框架可以幫助你解決UX方面的問題，同時規劃布局。當我接手一個項目的時候，做的第一件事就是建立一個頂級框架，這樣可以解決所有的設計問題。這個框架是指環繞在內容周圍的UI ，它可以幫助我們執行操作，更好的操縱頁面。它包括導航和組件，比如側邊欄和底部的按鈕。
如果你通過這種方式來做設計，在不看主頁的情況下，你也能清晰的知道應該怎樣布局。
03.給PSD添加網格
這是一個有978個網格的PSD文件，每條線的寬度為10PX 。畫網格做起來就像聽起來那么簡單，雖然你不畫直接開始設計完全可以，但是我相信設計出來的作品絕對沒有畫了網格好。網格的好處就是幫助你構建不同板塊的布局，起一個指導作用，幫助你制作響應式模板。
04.選擇你的字體
網頁設計中很重要的一個原則就是一個網頁中不要出現兩種以上的字體在一個項目中，尋找好看的字體也是很重要的一部分，但是我要提醒你，在同一個網頁中千萬別使用兩種以上的字體。選擇字體的原則就是要易于用戶閱讀，尤其是文字很多的頁面，文章標題的字體可以有趣一些，這樣能吸引用戶的注意。在使用字體的時候不要畏首畏尾，個頭大不是問題，只要整體看起來很和諧生動就行了。
05.選擇合適的顏色主題
使用有限的顏色和色調，減輕用戶的視覺壓力。在選擇字形的時候，你就應該想好用戶界面、背景、文字該用什么顏色。我建議你在顏色的原則方面一定要有節制，別想到哪個用哪個，最后五顏六色亂七八糟的，這也是大忌。
在這一步中，你要根據每個元素的功能選擇顏色，并且在用戶界面中，相同的元素顏色一定要一致。你可以觀察一下facebook、推特、quora、vimeo等等網站的.頁面，在不干擾功能組件正常使用的情況下，除了用戶界面，它們的插畫和平面細節沒有任何顏色限制。
06.分開布局
網頁結構越簡單，用戶使用越容易在網站中，每個模塊都要有個故事，要給用戶一個瀏覽的理由和最終的結果。而設計的作用就是強調這個故事中最重要的那部分。在現實設計中，主頁面不能將所有的信息都顯示出來，所以你必須在主頁先告訴用戶“進了這個網站你能做什么” 。
發揮你的聰明才智思考一下你能想到的極簡頁面，有最簡單的目標和必要的構件。最后你會發現，原來保持簡單這么困難。
07.重新思考
我們真的需要搜索按鈕嗎?在很多案例中，答案是否定。作為一名設計師，是我們一手決定了用戶瀏覽因特網的方式和界面，由你決定用戶進一個頁面需要多少步驟、一個網頁效率有多高。在設計完之后，一定要多測試，發現漏洞，及時修改，這樣才能做到極致。
08.挑戰自我
我鼓勵每個設計師勇于創新，挑戰自我，盡管對一個項目來說，創新并不是要求之一。挑戰包含什么?比如使用一個新格柵系統、開發一個新的組件或者不使用混合模式、特殊顏色等等，這些都是挑戰。
09.關注細節
正在制作中的游戲，細節展示這句話你應該聽過很多次也記住并實踐了，但是在最終的產品中卻看不到。細節可以是一個小互動，一個出人意料的動畫，或者是一個漂亮的漸變按鈕等。我相信如果你真的喜歡手頭的工作，那么小細節肯定會有的
10.每個組件都需要被溫柔善待
認真對待每一個組件，最終的結果一定比100分要多。這句話我聽了不下一百遍，但每一次都被深深地震驚了。在你設計每個組件的時候，你要這樣想：爺設計的組件隨便拿一個出去都可以得設計界的奧斯卡。只有這樣，整個網頁出來后的效果才能驚艷眾人。
11. 讓你的作品更加精致
為了避免模糊，在背景和元素之間設置正確的對比度。除了考慮審美問題，你還要保證作品的干凈整潔無毛邊。注意邊緣、字體渲染、漸變等問題。
12.整理你的PSD文件
在用PS做設計的時候，整理PSD文件是一項很重要的工作。除了整理項目的大小和順序，你還要保持文件的整潔，這對前端工程師的工作是很有幫助的，能加快整個項目推進的速度。
13.最好的設計，最壞的打算
在大腦中預想一下你做的東西在不同尺寸的屏幕上會是神馬樣子作為設計師，我們還有一個職責就是解決不同設備上的尺寸限制問題。在網頁設計中，這個限制可以從概念一直排到技術，子子孫孫無窮盡也。在做網頁的時候，我們不僅要在理想的尺寸中試運行，還要考慮最差的尺寸，因為萬一用戶的手機屏幕尺寸真的很小怎么辦?
14.多看你的設計直到厭倦為止
我相信如果你對設計一直都非常有激情，那么“看自己的作品直到想吐”這件事你一定經歷過。初入設計這行，每當我完成一件作品，我都覺得非常驕傲，我感覺這個作品就是我生活的一部分，是我的孩子，我將它截圖保存，在不同設備上瀏覽它，把它做我手機電腦的桌面，甚至打印出來掛在墻上…后來我真的有點反感了，我開始覺得它哪都有問題，哪都不好看，最終我重新設計了它。開始厭倦你先前的作品是成熟的表現，這意味著你從錯誤中學到了新的知識。
15.不要糾纏于概念
當你和客戶交流的時候，確保你們倆在同一頻道，千萬杜絕雞同鴨講這種情況。萬一這種情況發生了，千萬冷靜別拍案而起，你要知道你拍走的都是白花花的銀子啊~~~~如果你的顧客連你說的第一個概念都不喜歡，那么你就該反思了，這時候你要收集客戶的反饋信息，為下次交流做準備。
16.與工程師做好盆友/好基友
在一個項目中，工程師不需要從頭跟到尾，他們只需按時做好自己的事情就OK了。你以為我說的是真話嗎?呵呵，我要告訴你，這樣想的人是傻瓜。因為很多好主意都是由工程師提出來的，他們如此高貴冷艷才華橫溢，你怎么能不緊緊的抱住他們的大腿呢?!
17.把我當做你幼齡的孩子，給我講解你的方案
跟顧客講解產品的重要程度不亞于制作產品，如果你說的不合適，那么你的設計就可能被忽略，說清楚比讓別人看清楚更重要。
18.要喜歡你的每一個點子，但別太過看重
作為一個設計師，你要充分相信自己的才華，相信你的作品。但同時你也應該有心理準備，要能隨時從一個項目中抽身轉戰下一個。
19.在開發過程中追蹤你的設計
在你交完PSD文件工作就結束了?圖樣圖森破，很傻很天真。如果你真的關心自己的設計是否被前端工程師溫柔善待，那就應該多和前端聊天，盡最大的努力幫助他們，哪怕只是一個像素的問題。
20.展示尚未完成的作品
在社交工具中分享你的樣式表和未完工的組件。有時候一個項目中最好的部分因為種種原因被忽視，所以你也就忘了。一旦項目完成，就更沒有心思回頭審視了。所以，如果可能的話，多在社區和大家交流、分享，眾人拾柴火焰高，我們也會發動大家的力量幫助你，讓你得到有價值的反饋。
;
關于怎樣設計網頁和怎樣編寫網頁設計的內容就分享到這兒！更多實用知識經驗，盡在 m.apearl.cn

新手學做網頁的20個技巧 怎樣編寫網頁設計

新手學做網頁的20個技巧怎樣編寫網頁設計