網(wǎng)頁(yè)設(shè)計(jì)定稿.ppt

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

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

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

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

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

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

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

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