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

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