網頁設計的步驟是怎麼樣的

導語:現代生活已經離不開網頁了,精美的網頁設計,你會嗎?下面的是小編收集的一些關於網頁設計的步驟,供大家參考。

網頁設計的步驟是怎麼樣的

確定分辨率.和不同分辨下對應的效果.

與平面的載體的不同,決定了網頁具有比平面更靈活的表達方式.

站點的滿屏概念其實是分相對和絕對兩種,相對的,是針對當前分辨率的滿屏.而絕對滿屏幕,則是不同的顯示器不同的分辨率下都是滿屏,一般我會給出一個最小分辨率,最大到無限.相對滿屏,比如1024×768,800×600等.最好是用絕對寬度來定義,就是像素為單位.而絕對滿屏,則用百分比.

在確定分辨率之後,你的PS圖要比實際設計的圖要大.要考慮用户使用高於你設計的分辨率下,網頁以怎樣的形式表達,是居左,還是居中,還是靠在右邊.

大背景,3條輔助線及邊界處理.結構(頭部,中間,底部的大概位置.)

整體是否有背景.

左邊界線,右邊界線,和中間線.

如果是絕對寬度的'設計,那麼用户使用較高分辨率瀏覽時,內容與多出的屏幕是否有分割.

結構,究竟是上中下結構,還是左中右結構,還是其他的.每一塊,大概放什麼內容.

導航和標誌.

網站的100-1%是導航.這是一句被傳爛了的話.

你的導航是長的還是短的,是橫的還是豎的.還是弧形的.是否有下拉菜單.比重各是多少.和標誌處在什麼位置.各語言版面入口在哪裏.登陸(後台管理/用户/MAIL)在什麼位置,標誌附近是否有點睛一般的詞.

好了,我們進行下一步.

banner同導航,和過度.

導航跟banner是分開的還是在一起的.在一起的話你是否採用flash製作,如不用flash製作,你設計的背景是否適合切割成平鋪的背景,怎樣讓背景圖片體積最小.記住不要用2×2的背景做平鋪er是佔據了整個寬度,還是隻是一部分.如果是一部分,那麼空出的地方你準備放什麼東西.

  主體內容部分.

我的中間是左右機構,還是一大塊,還是左中右結構的.每一塊的分割採用什麼手法.顏色以怎麼樣的規則變化.然後將內容填充進去.

底部版權信息。

選擇合適的製作工具

儘管選擇什麼樣的工具並不會影響你設計網頁的好壞,但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網頁製作涉及的工具比較多,首先就是網頁製作工具了,目前大多數網民選用的都是所見即所得的編輯工具,這其中的優秀者當然是Dreamweaver和Frontpage了,如果是初學者,Frontpage。除此之外,還有圖片編輯工具,如Photoshop、Photoimpact等;動畫製作工具,如Flash、Cool 3d、Gif Animator等;還有網頁特效工具,如有聲有色等,網上有許多這方面的軟件,你可以根據需要靈活運用。

  製作網頁

材料有了,工具也選好了,下面就需要按照規劃一步步地把自己的想法變成現實了,這是一個複雜而細緻的過程,一定要按照先大後小、先簡單後複雜來進行製作。所謂先大後小,就是説在製作網頁時,先把大的結構設計好,然後再逐步完善小的結構設計。所謂先簡單後複雜,就是先設計出簡單的內容,然後再設計複雜的內容,以便出現問題時好修改。在製作網頁時要多靈活運用模板,這樣可以大大提高製作效率。

  上傳測試

網頁製作完畢,最後要發佈到Web服務器上,才能夠讓全世界的朋友觀看,現在上傳的工具有很多,有些網頁製作工具本身就帶有FTP功能,利用這些FTP工具,你可以很方便地把網站發佈到自己申請的主頁存放服務器上。網站上傳以後,你要在瀏覽器中打開自己的網站,逐頁逐個鏈接的進行測試,發現問題,及時修改,然後再上傳測試。全部測試完畢就可以把你的網址告訴給朋友,讓他們來瀏覽。

  維護更新

網站要注意經常維護更新內容,保持內容的新鮮,不要一做好就放在那兒不變了,只有不斷地給它補充新的內容,才能夠吸引住瀏覽者。