網(wǎng)頁設計定稿.ppt

1、網(wǎng)站設計步驟,網(wǎng)站的設計與建設是需要一系列步驟來完成的，能否遵循網(wǎng)站的設計步驟直接影響一個網(wǎng)站質量，也直接影響網(wǎng)站發(fā)布后是否能成功運行。,1總體概述 2 網(wǎng)站的規(guī)劃與設計 3 站點建設 4 站點發(fā)布和網(wǎng)站的管理與維護 習 題,網(wǎng)站設計步驟,圖22 “淡藍的天空”個人網(wǎng)站,下面我們就以建立一個名為“淡藍的天空”的個人網(wǎng)站為例來進行欄目規(guī)劃。如圖22所示。,實例21 “淡藍的天空”個人網(wǎng)站的欄目規(guī)劃（策劃）,一、要求與目的 掌握網(wǎng)站的定位 掌握欄目規(guī)劃 掌握邏輯結構設計,二、規(guī)劃分析過程 1網(wǎng)站定位： 1） 網(wǎng)站的訪問對象指的是這個網(wǎng)站主要面向哪些社會群體?是企業(yè)、消費者、社會大眾、兄弟部門還是所

2、有志趣相投的朋友?比如你是一個非常喜歡poping 舞隊的人，那么你可能就非常希望通過你的網(wǎng)站來結交更多同樣喜歡poping 舞隊的朋友。,通過上述案例假設，從中可對網(wǎng)站做出定位：極具個性化的個人網(wǎng)站，根據(jù)個人興趣愛好，分享資源，以期通過網(wǎng)絡平臺結識更多的同好者。 網(wǎng)站訪問群體定位：所有志趣相投的朋友，共同交流和資源共享。 為了表達一種心境，凸現(xiàn)自己的個性，將要建立的網(wǎng)站取名為“淡藍的天空”。,2網(wǎng)站欄目劃分 對網(wǎng)站及其訪問群體做了定位后，接著需要做的是確定網(wǎng)站所必需的欄目，依案例假設，確定欄目及其名稱如下： 1)平凡的陌生人：此欄目主要是為了在網(wǎng)絡上展現(xiàn)自己，)讓別人了解自己。 2)感動你的

3、心靈：此欄目主要是把自己平時收集的文摘、網(wǎng)絡文學、雜文、幽默等共享出來，)與有共同)興趣的朋友一同)來欣賞，)以期望在心靈深處有所觸動。,3)請聆聽：此欄目主要是把自己喜歡的音樂呈現(xiàn)給同)好者或瀏覽者，)來共同)欣賞這美妙的樂曲。 4)那笨拙的腳?。捍藱谀恐饕翘峁┦占木W(wǎng)絡資源，)起名)“那笨拙的腳印”主要是為了體現(xiàn)設計者在網(wǎng)絡和相關技術上的欠缺，)同時也隱含設計者此方面雖然“腳印笨拙”，)但仍孜孜不)倦的追求的心境，)也包含謙遜的成分在內。,5)同心結：此欄目主要是給有著共同)興趣的朋友提供相互鏈接的平臺，)以達到能和同)類的網(wǎng)站進行相互推薦，)建立良好的合作關系的目的。 6)晚安：此欄目

4、主要是留言本，)提供瀏覽者與瀏覽者、瀏覽者與作者間共同)交流的地方，)起名)“晚安”主要是考慮到同)好者多位全職，)晚上上網(wǎng)較多，)同時也體現(xiàn)設計者不)拘一格的設計思想，)表達個性，)問候朋友。,在所有欄目中，“感動你的心靈”和“那笨拙的腳印”是重要的欄目，其中“感動你的心靈”需要對它進行更細的劃分，根據(jù)自己興趣和所收集的相關文章，本欄目又被劃分為：“文摘”、“網(wǎng)文”、“雜文”、“幽默”、“測驗”、“專欄”等子欄目。,3. 網(wǎng)站邏輯結構設計 由于本網(wǎng)站屬于個人網(wǎng)站。一般情況下欄目不是太多，結構不是太復雜，層次不是太多，為了能使相關內容劃分的很清楚，便于理解和瀏覽，本網(wǎng)站采用層次型邏輯結構。如圖

5、23所示。,圖2-3 層次型邏輯結構,將網(wǎng)站所有欄目及其子欄目連在一起，本網(wǎng)站的邏輯目錄結構如圖24所示,圖2-4 “淡藍的天空”網(wǎng)站層次型目錄結構圖,網(wǎng)頁的設計基本知識 掌握網(wǎng)站的色彩搭配 掌握網(wǎng)站的版面布局設計 掌握網(wǎng)站的導航設計,三、本實例知識點 1、網(wǎng)站的風格設計 網(wǎng)站的風格設計是抽象的。風格的體現(xiàn)主要依靠色彩和外形。,1) 色彩搭配 網(wǎng)站的色彩是最影響網(wǎng)站整體風格的因素，也是站點美工設計中最令人頭疼的問題。許多網(wǎng)頁設計者都缺乏色彩搭配的基本知識，所以在制作網(wǎng)頁之前往往有一個很好的想法，但是卻不知如何搭配網(wǎng)頁的顏色來表達預想的效果。因此，在介紹色彩搭配之前，先來看看色彩的基本知識。,

6、色彩的基本知識 在物理學中，顏色是因為光的折射而產(chǎn)生的。顏色不同，光的波長也就不同。紅、綠、藍是自然界的三原色，它們不同程度的組合可以形成各種顏色。所以在網(wǎng)頁中，也就用它們的不同顏色值來表示各種顏色。 在傳統(tǒng)的色彩理論中，顏色一般分為彩色和非彩色(或稱為灰色)兩大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的顏色。,太陽光是彩色的，按顏色的色調通常將其劃分為七種顏色：紅、橙、黃、綠、青、藍、紫。如果將這七種顏色按這個順序漸變?yōu)橐粭l色帶的話，越靠近紅色，給人的感覺越溫暖，越靠近藍色和紫色，給人的感覺越寒冷。所以紅、橙、黃的組合又稱為暖色調，青、藍、紫的組合又稱為冷色調。 除了冷暖的差

7、別外，不同的單個顏色也會給人帶來不同的感覺.,紅色綠色橙色黃色 藍色 白色黑色 灰色,網(wǎng)站的色彩搭配 網(wǎng)站的色彩搭配通常分為兩個步驟，那么第一步就是為整個網(wǎng)站選取一種主色調，然后再為主色調搭配多種適合的顏色。主色調指的是整個網(wǎng)站給人印象最深的顏色，或者說除白色之外用得最多的顏色。 正如前面所述，不同的顏色給人的感受是不一樣的，所以主色調選取的一個最基本的原則就是保證所選的顏色與網(wǎng)站的主題或者形象相符，進一步地，能夠通過這種顏色加深用戶對網(wǎng)站的印象。,比如藍色是一種讓人感覺非常專業(yè)的顏色，所以許多高科技公司都喜歡使用藍色作為公司網(wǎng)站的顏色。最典型的當數(shù)微軟公司(圖218，)，藍色極大地加強了人們

8、對他們產(chǎn)品的信任感。又比如使用紅色的北京市政府網(wǎng)站(WWW)，是通過紅色來向人們傳達北京作為中國首都大氣和熱情的氣質。IBM公司主頁（WWW）就采用了黑色和藍色為主色調，如圖219所示。,圖2-18 微軟公司主頁,圖2-19 IBM公司主頁,選取背景色 大多數(shù)的網(wǎng)站都會選取白色作為背景色。白色使得狹小的屏幕空間顯得很大，再多的信息在白色的背景下，其排放也可以顯得很整齊，其頁面也可以顯得非常干凈和整潔。,2) 版面布局 首頁布局： 首頁雖然采用圖214的圖片作為整個網(wǎng)頁的界面，但在布局上基本屬于圖215所示的布局方式。,圖2-23網(wǎng)站版面布局的變化,圖2-24左右型框架和上下型框架,圖2-25復合型框架,圖2-14 “淡藍的天空”首頁圖形界面,圖2-15 “淡藍的天空”首頁版面布局,圖2-16 “感動你的心靈”欄目圖,“感動你的心靈”欄目主要是文摘、網(wǎng)文、雜文、專欄等，界面利用圖形設計成一本打開的書如圖216所示，但在版面布局上采用如圖217所示的布局方式。,圖2-17 “感動你的心靈”版面布局圖（布局上的統(tǒng)一）,網(wǎng)頁設計重點區(qū)域 網(wǎng)頁設計中的視覺流程分布,圖2-27新浪網(wǎng)導航條,許多網(wǎng)站的建設者都是從事計算機和網(wǎng)絡技