網(wǎng)頁設(shè)計基本流程ppt課件

企業(yè)網(wǎng)站建站過程網(wǎng)站的形象設(shè)計1.網(wǎng)站的標志2.網(wǎng)站的風格定義3.網(wǎng)站的廣告詞4.網(wǎng)站的標準色彩5.網(wǎng)站的標準字體規(guī)劃網(wǎng)站欄目,1,規(guī)劃網(wǎng)站欄目1.劃分主要欄目2.首頁超級鏈接和搜索引擎3.設(shè)定交互欄目4.設(shè)置下載和咨詢服務欄目5.方便的網(wǎng)站導航6.網(wǎng)站的目錄結(jié)構(gòu)7.網(wǎng)站的鏈接結(jié)構(gòu),2,版面設(shè)計1.版面設(shè)計的過程2.常見的版面樣式3.首頁的設(shè)計網(wǎng)頁的色彩搭配1.色彩的基本知識2.色彩搭配的原則3.色彩搭配的技巧,3,網(wǎng)頁中的圖像處理1.圖像的類型2.圖像的格式3.圖像的處理技巧網(wǎng)頁中的字體1.字體與字號2.特殊字體的處理網(wǎng)頁中的動畫與廣告1.動畫制作的工具,4,收集信息2周設(shè)計草案3天制作設(shè)計手冊網(wǎng)站結(jié)構(gòu)頁面結(jié)構(gòu)色彩版式預算報價2周制作頁面1周調(diào)試2周發(fā)布跟蹤半年,網(wǎng)站制作流程,5,具體的實用信息：主要是由文字數(shù)據(jù)和圖形圖像組成，有些網(wǎng)站還可以使用動畫聲音等多媒體技術(shù),它們通過網(wǎng)站本身的欄目設(shè)置體現(xiàn)出來。（由業(yè)務部門提供）,網(wǎng)站發(fā)布的信息,廣義的信息：包括網(wǎng)站的CI設(shè)計，網(wǎng)站主題定位和網(wǎng)民群體的定位以及網(wǎng)頁的制作策劃，形象包裝宣傳營銷等等，它主要是通過視覺語言來樹立網(wǎng)站的社會形象從而達到廣告宣傳的效果。（由管理部門提供甚至需要借助廣告策劃的眼光進行全面的CI設(shè)計才可能有一個好的方案）,6,設(shè)計網(wǎng)站的標志標志圖形的設(shè)計創(chuàng)意來自網(wǎng)站的名稱和內(nèi)容，標志可以是中文英文字母，可以是符號圖案，可以是動物或者人物等。網(wǎng)站標志設(shè)計創(chuàng)意可以從以下幾種思路開始:(1)選用公司有代表性的人物，動物,花草，可以用它們作為設(shè)計的藍本加以卡通化和藝術(shù)化。(2)網(wǎng)站有專業(yè)性的可以以本專業(yè)有代表性的物品作為標志。,7,網(wǎng)站的標準色彩企業(yè)的標準色，就是該企業(yè)在自己標志產(chǎn)品及宣傳品等方面統(tǒng)一使用的一個固定的顏色。網(wǎng)站的標準色彩只能是一種，具體應用時可以標準色為中心利用它的明度變化產(chǎn)生不同的色彩，標準色彩要廣泛運用于網(wǎng)站的標志,標題，主菜單和背景色塊,給人以整體統(tǒng)一的感覺，其它色彩只是作為對比和襯托,絕不能喧賓奪主。,8,網(wǎng)站的標準字體標準字體是指網(wǎng)站用于標志標題,主菜單的特有字體。特別字體只能用圖形圖像的形式出現(xiàn)在網(wǎng)頁中。,9,網(wǎng)站的廣告詞用簡潔精煉的句子傳達信息，網(wǎng)站設(shè)計者應努力用一句話一個詞來高度概括網(wǎng)站的性質(zhì)特點和網(wǎng)站的目標，創(chuàng)造出類似實際生活中的廣告金語來，在最短的時間內(nèi)傳達出最豐富的內(nèi)涵。標志，色彩，字體和廣告語四個方面是一個網(wǎng)站樹立CI形象的關(guān)鍵，確切地說是網(wǎng)站的表面工作，設(shè)計并完成這四項工作網(wǎng)站的整體形象就有一個基本的輪廓，有了一個統(tǒng)一的面目并且具有了一定的專業(yè)性。,10,規(guī)劃網(wǎng)站欄目,細致地劃分主要內(nèi)容欄目將主要內(nèi)容信息按一定的方法分類，并為它們設(shè)立專門的欄目?！伴_門見山”地列出主要內(nèi)容網(wǎng)頁的內(nèi)容一般分為幾個層次，網(wǎng)站的主要內(nèi)容一定要放在首頁或一二級欄目中，如果因信息內(nèi)容結(jié)構(gòu)問題不得不放在較深的位置上，一定設(shè)法將它在首頁安排超級連接，同時在其他網(wǎng)頁放置多個超級連接以便使瀏覽者很容易地找到它。,11,規(guī)劃網(wǎng)站欄目,首頁設(shè)置超級鏈接和搜索引擎設(shè)定交流的欄目交流欄目是指論壇,留言本,郵件列表等，可以讓瀏覽者有機會發(fā)表他們的意見，參與網(wǎng)站的活動。設(shè)置信息下載和咨詢服務欄目方便實用的網(wǎng)站指南,12,網(wǎng)站的目錄結(jié)構(gòu),設(shè)計目錄結(jié)構(gòu)的原則是方便網(wǎng)站的管理與維護，設(shè)計鏈接結(jié)構(gòu)的原則是方便瀏覽者的閱讀。網(wǎng)站的目錄結(jié)構(gòu)合理安排文件的目錄，不要將所有文件都存放在根目錄下。按欄目內(nèi)容建立子目錄在每個一級目錄或二級目錄下都建立獨立的Images目錄，管理素材。,13,網(wǎng)站的目錄結(jié)構(gòu),目錄的層次不要太多，一般目錄的層次不超過5層，對于網(wǎng)站的工作人員來說層次越少查找起來也就越容易，也就越便于維護管理不要使用中文目錄，網(wǎng)絡是無國界的Internet上使用最廣泛的語言是英語，如果使用中文目錄有可能對網(wǎng)址的正確顯示造成困難,尤其會給非漢語的瀏覽者帶來不便使用意義明確的目錄文件名，在給目錄取名字時應考慮取的名字，盡量反映內(nèi)容以便于記憶管理。,14,網(wǎng)站的鏈接結(jié)構(gòu),網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接關(guān)系。安排鏈接結(jié)構(gòu)的原則：1.一是要符合瀏覽者的思維習慣和瀏覽習慣。2.一是要將網(wǎng)站中最重要的信息有最多的機會與瀏覽者見面。,15,設(shè)計選項線性方法,主頁,Pageone,Pagetwo,Pagethree,16,2分層模式,主頁,主題A,主題B,主題C,子主題A2,子主題B2,子主題C1,子主題B1,子主題C2,17,3網(wǎng)絡中心模式,主頁,主題A,主題B,主題C,主題D,主題E,主題F,主題G,主題H,主題I,18,4全Web設(shè)計,19,網(wǎng)站的鏈接結(jié)構(gòu)關(guān)于鏈接結(jié)構(gòu)的設(shè)計,在實際的網(wǎng)站建設(shè)中是非常重要的問題,采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局.,20,網(wǎng)站的風格與創(chuàng)意設(shè)計網(wǎng)站的風格:指站點的整體形象給瀏覽者的綜合感受,這個整體形象包括站點的CI,標志,色彩,字體,標語,版面布局顯示方式,交互方式,文字風格等等諸多因素.,21,網(wǎng)站的風格與創(chuàng)意設(shè)計網(wǎng)站具有獨特的風格可以從以下幾方面考慮:明確網(wǎng)站的服務對象網(wǎng)站美術(shù)設(shè)計師應該明確自己的想法,明確自己要追求的藝術(shù)效果,明確了自己的行業(yè)定位之后,應考慮網(wǎng)站的個性化因素.在明確自己的網(wǎng)站印象后,努力加強這種印象,如果經(jīng)過反思發(fā)現(xiàn)其中最有特色的東西,就是最能體現(xiàn)網(wǎng)站風格的東西,并以它作為網(wǎng)站的特色加以重點,強化,制訂一套基本的規(guī)格和技術(shù)指標(類似標準化),將它們運用到所有的頁面中去.,22,網(wǎng)站的風格與創(chuàng)意設(shè)計將網(wǎng)站的標志,特有的花邊,線條,圖案出現(xiàn)在每個頁面上,應該創(chuàng)作一些網(wǎng)站特有的符號或圖標.使用標準色彩和相近的底色背景色,文字的鏈接色彩,圖片的色調(diào),頁面的底色邊框色等盡量采用與標準色彩一致或相近的色彩.突出標準字體在關(guān)鍵性的標題,菜單,圖片里使用統(tǒng)一的標準字體.用統(tǒng)一的圖片處理效果比如陰影效果的方向厚度模糊度都必須統(tǒng)一.采取上述具體措施后,雖不能完全保證網(wǎng)站的藝術(shù)效果和品位,但卻使網(wǎng)站具有統(tǒng)一性完整性.,23,版面布局與首頁的設(shè)計布局：是一個設(shè)計的概念,指的是在一個限定的面積范圍內(nèi)合理安排布置圖形，圖像和文字的位置，在把文章信息按照輕重緩急的秩序陳列出來的同時將頁面裝飾美化起來。版面標準：設(shè)定為800*600像素,24,版面布局與首頁的設(shè)計過程版面布局的過程最初的設(shè)計還是需要動筆勾畫草圖的，草圖的目的是將腦海里朦朧的想法具體化變成可視可見的輪廓。在輪廓草圖上首先將需要放置的功能模塊安排到頁面上，主要包含網(wǎng)站標志，主菜單，欄目條，廣告位，搜索器，計數(shù)器等，這時我們必須突出重點，將網(wǎng)站標志，主菜單，商品目錄，及廣告等最重要的模塊放在最顯眼最突出的位置，然后再考慮次要模塊的排放。,25,版面布局與首頁的設(shè)計在布局過程中我們遵循的原則：平衡：指畫面的圖像文字的視覺分量在左右，上下幾個方位基本相等，分布勻稱,能達到安定平穩(wěn)的效果。過于平衡的畫面難免有呆板的感覺。有時需要在局部打破平衡或?qū)ΨQ。,呼應：在不平衡的布局中的補救措施，使一種元素同時出現(xiàn)在不同的地方形成視覺上的相互聯(lián)系。,26,版面布局與首頁的設(shè)計對比:所謂對比就是利用不同的色彩，形態(tài)，線條等視覺元素相互并置對比,造成畫面的多種變化,達到豐富視覺的效果。,疏密:疏密關(guān)系本是繪畫的概念,疏是指畫面中形式元素稀少,甚至空白的部分.密是指畫面中形式元素繁多的部分,在網(wǎng)頁設(shè)計中,就是空白的處理,運用太滿太密,太平均是任何版式設(shè)計的大忌,適當?shù)氖杳艽钆淇梢允巩嬅娈a(chǎn)生節(jié)奏感,體現(xiàn)出網(wǎng)站的格調(diào)與品位圖.,27,版面布局與首頁的設(shè)計,各個字體字號的描述,及其所在頁面位置的參數(shù),有些作為標題的文字其實已作為圖形圖像對待了,這里的文字僅僅指文本的字體和由計算機程序產(chǎn)生的標題字時，應說明字體的HTML的色彩數(shù)值.各種色彩的數(shù)值的確定，除圖形圖像以外，設(shè)計方案中的標準色，底色，文字的顏色，都應該以RGB模式數(shù)值或HTML語言數(shù)值表示出來，最后必須估算一下頁面的大小，根據(jù)經(jīng)驗或參照類似的在線網(wǎng)頁，概算一下將來的網(wǎng)頁大約有多少個KB，一般每頁上的圖文KB數(shù)加起來不要超出50KB否則就會影響顯示速度。,28,版面布局與首頁的設(shè)計范例,幾種常見的版面布局樣式“同”字型結(jié)構(gòu)布局：所謂同字型結(jié)構(gòu)就是指頁面頂部為主菜單，下方左側(cè)為二級欄目條，右側(cè)為鏈接欄目條，屏幕中間顯示具體內(nèi)容的布局。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，左右對稱，主次分明，因而同字型布局的網(wǎng)頁得到非常普遍的運用，不過同字型布局的缺點：是太規(guī)矩呆板如果細節(jié)色彩上缺少變化調(diào)劑，很容易讓人感到單調(diào)乏味。,29,版面布局與首頁的設(shè)計范例,“國”字型布局國字型布局是在同字型布局基礎(chǔ)上演化而來的，在保留同字型的同時，在頁面的下方增加一橫條狀的菜單或廣告。這種布局的優(yōu)點是充分利用版面信息量大與其它頁面的鏈接多切換方便，缺點是頁面擁擠四面封閉，令人感到憋氣。,30,自由式布局自由式布局打破了同字型，國字型布局的菜單框架結(jié)構(gòu)頁面，布局像一張宣傳海報以一張精美圖片作為頁面的設(shè)計中心菜單欄目自由地擺放在頁面上常用于時尚類站點網(wǎng)頁優(yōu)點是漂亮吸引人，缺點就是顯示速度慢文字信息量少，這種布局適合于以圖像為主要內(nèi)容的站點.,版面布局與首頁的設(shè)計范例,31,左右對稱布局顧名思義采取左右分割屏幕的辦法形成的對稱布局，在左右部分內(nèi)自由安排文字圖像和鏈接，點擊左邊的鏈接時，在右邊顯示鏈接的內(nèi)容，它的優(yōu)點是既活潑自由，又可顯示較多的文字圖像。缺點是將兩部分有機的結(jié)合比較困難不適于信息數(shù)據(jù)量巨大的網(wǎng)站。,版面布局與首頁的設(shè)計范例,32,版面布局與首頁的設(shè)計形式,網(wǎng)站的首頁大致分為三種類型書籍封面式首頁有些大型網(wǎng)站往往有一個書籍封面式的，首頁上面只有一個進入的鏈接點擊之后，才進入到網(wǎng)站。這種首頁設(shè)計精美非常考究給人以雍容大度的氣派。,33,版面布局與首頁的設(shè)計形式,期刊雜志式的首頁與書籍封面式首頁相似，但在首頁上有站點全部內(nèi)容的目錄索引，圖文并茂看上去就像是期刊雜志的封面，既漂亮又使網(wǎng)站的主要內(nèi)容一目了然，是一種值得推薦的形式。,34,版面布局與首頁的設(shè)計形式,報紙式的首頁許多電子商務網(wǎng)站，搜索引擎網(wǎng)站和新聞信息網(wǎng)站更加務實，為了速度和操作的簡便，往往采用報紙式的首頁設(shè)計，將欄目索引，功能模塊，具體內(nèi)容一并顯示在首頁看上去就像一張報紙的頭版一樣。,35,版面布局與首頁的設(shè)計欄目,電子商務站點的首頁需要設(shè)置這樣一些功能模塊和欄目：網(wǎng)站名稱及標志(logo)會員注冊(enroll)產(chǎn)品目錄(manufacture)服務項目與條款(sever)關(guān)于本站announcement搜索器(search)廣告條(banner)有些網(wǎng)站還開設(shè)新聞欄目(whatsnews),信息咨詢(consult)免費電子郵箱(freeE-mail)等等，至于各個首頁選擇哪些模塊與網(wǎng)站想要實現(xiàn)的功能有關(guān)。,36,網(wǎng)頁色彩的搭配,色彩的基本知識（參照網(wǎng)頁色彩構(gòu)成概論）網(wǎng)頁色彩搭配的原則色彩的合理性，網(wǎng)頁的色彩要漂亮引人注目，同時還要照顧到人的眼睛的生理特點不要用大面積的高純度色相，它容易使人的眼睛疲勞。色彩的獨特性，要有與眾不同的色彩搭配襯托出網(wǎng)站的個性，使得大家對你的印象深刻。色彩的藝術(shù)性，色彩設(shè)計屬于藝術(shù)形式的范疇，按照內(nèi)容決定形式的原則，色彩應服務于網(wǎng)站的內(nèi)容，和網(wǎng)站的氣氛相適應。,37,對比色與網(wǎng)頁色彩的搭配,對比色的應用,原色飽和度較高的色彩搭配使用，即為對比色。各種色彩均可作為對比色使用，但應以一種顏色為主調(diào)，使它占有較大的面積，同時輔以對比色，起到點綴豐富的作用。例如以粉紅色為主的色調(diào)，配以小面積的淡藍，淡黃，淡綠，或者土黃，土灰，土藍。商業(yè)零售站點，新聞站點，常常運用對比色造成豐富充實的效果。,38,網(wǎng)頁中的插圖處理,插圖是指除系統(tǒng)產(chǎn)生的字符和色彩以外的圖形圖像，包括廣告，圖畫，照片，文字等,插圖可以起到文字說明不了的內(nèi)容，同時插圖也是網(wǎng)頁裝飾的主要手段。插圖的類型一是照片(位圖）類，二是繪畫（矢量圖）類。圖像的格式JPGGIFPNG,39,網(wǎng)頁中的插圖處理,虛實的變化圖像的虛實處理可以襯托網(wǎng)頁的風格，豐富圖像和網(wǎng)頁的樣式，對網(wǎng)頁設(shè)計很有用處。,插圖的外輪廓與網(wǎng)頁的背景色自然銜接過渡給人以十分柔和含蓄的感覺，比較自然地與網(wǎng)頁結(jié)合為一體，還有一種虛的圖像，整個色調(diào)被極大地淡化處理，作為背景色的圖案出現(xiàn)，襯托前景的文字。,40,網(wǎng)頁中的插圖處理,實的圖像有兩種樣式：一種是有規(guī)范的四邊，像未經(jīng)處理的照片類，圖像一般都帶有裁切后自然留下的邊框，是四條清晰的線條，由于圖像的色調(diào)線條與背景色形成強烈的對比，給人以堅硬實在的感覺，假如網(wǎng)頁上的圖像都是這種樣式，就顯得整齊規(guī)范，同時也顯得死板生硬，另一種是不規(guī)范外輪廓，即輪廓清晰，其圖像背景色與網(wǎng)頁背景色一致，將圖像背景色處理成透明色，許多卡通畫插圖都采用這種樣式。,41,網(wǎng)頁中的字體,文字是網(wǎng)頁的主要