網(wǎng)站的設(shè)計ppt課件.ppt

一、復(fù)習(xí),網(wǎng)站開發(fā)的一般過程：,1、基本概念2、網(wǎng)站的需求分析(目標(biāo)、對象、投入等)3、確定網(wǎng)站的主題4、確定網(wǎng)站的名稱5、選擇網(wǎng)頁制作工具,新課引入,網(wǎng)站設(shè)計是將網(wǎng)站由藍(lán)圖變?yōu)楝F(xiàn)實的第一個步驟，是搭建網(wǎng)站整體結(jié)構(gòu)的過程，它可以使接下來的工作更加有的放矢。那我們到底如何來對網(wǎng)站進(jìn)行設(shè)計呢？,網(wǎng)站實例欣賞,網(wǎng)站名稱：,網(wǎng)站主題：展示、推廣中學(xué)生文學(xué)原創(chuàng)作品，提供華語文學(xué)愛好者交流的平臺,欄目設(shè)置,網(wǎng)站名稱：,網(wǎng)站主題：一個學(xué)生研究小組對泰山石刻歷史和保護(hù)為課題主題研究成果展示。,欄目設(shè)置,網(wǎng)站實例欣賞,第一、欄目設(shè)置,網(wǎng)站的制作就好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰，所以，主題選好后，網(wǎng)站設(shè)計的第一步要設(shè)置欄目。下面以制作“機(jī)器人做學(xué)玩”網(wǎng)站為例。,“機(jī)器人做學(xué)玩”網(wǎng)站的欄目設(shè)置,欄目設(shè)置需注意：,（1）要緊扣主題，盡可能刪除與主題無關(guān)的欄目（2）盡可能將網(wǎng)站最有吸引力的內(nèi)容列在欄目上（3）盡可能方便訪問者的瀏覽和查詢。如：設(shè)置“本站指南”或“網(wǎng)站地圖”欄目可以幫助初訪者快速找到他們想要的內(nèi)容,任務(wù)一：設(shè)置網(wǎng)站的欄目。要求：填寫“任務(wù)文檔.doc”中的任務(wù)一中的表格。,第二、版面設(shè)計,網(wǎng)海茫茫，能夠吸引我們眼球的只有那些有特色的網(wǎng)頁，大量的網(wǎng)頁引不起網(wǎng)民的興趣，究其原因，站點(diǎn)內(nèi)容是否豐富是其中一個方面，而網(wǎng)頁的版面設(shè)計是否精美也是重要因素之一。版面結(jié)構(gòu)是指將不同元素巧妙排列的方式，合理的版面結(jié)構(gòu)能夠使瀏覽者清楚、容易地理解作品傳達(dá)的信息。布局就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。網(wǎng)頁要呈現(xiàn)的內(nèi)容很多，如何合理地放置信息，使之井井有條、主次分明是版面布局需要考慮的問題。,常見頁面布局樣式(第一種),參考示例,主菜單以及橫條網(wǎng)站標(biāo)志+廣告條,顯示內(nèi)容,主菜單,常見頁面布局樣式(第二種),主菜單,主要內(nèi)容,友情鏈接等,參考示例,常見頁面布局樣式(第三種),頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，菜單欄目自由擺放。,參考示例,怎樣設(shè)計版面？,一般來說，網(wǎng)頁版面布局可按創(chuàng)意草案、粗略布局、最后定案三個步驟來進(jìn)行。下面我們來看“機(jī)器人做學(xué)玩”網(wǎng)站的版面布局圖：,第三、樹立網(wǎng)站整體風(fēng)格,第一步：設(shè)計、制作一個網(wǎng)站的標(biāo)志（logo）,標(biāo)志可以是中文、英文字母，可以是符號、圖案，可以是動物或者人物等。標(biāo)志的設(shè)計創(chuàng)意來自你網(wǎng)站的名稱和內(nèi)容。一般來說，設(shè)計標(biāo)志有這樣幾種方法：（1）選擇與網(wǎng)站主題有關(guān)的，并具有代表性的人或物，用它們?yōu)樵O(shè)計藍(lán)本，加以卡通化和藝術(shù)化。如搜狐網(wǎng)站的狐貍尾巴（2）對于專業(yè)性的網(wǎng)站，可以是本專業(yè)有代表的物品作為標(biāo)志，比如中國銀行的銅板標(biāo)志。（3）最常用和最簡單的方式是用自己網(wǎng)站的中文或英文名稱作標(biāo)志。采用不同的字體、字母的變形與組合，可以很容易制作出自己的標(biāo)志。如：“機(jī)器人做學(xué)玩”網(wǎng)站標(biāo)志。,R是機(jī)器人“robot”第一個字母，R分割成兩部分，上面是“做”的英文單詞do的首字母D，下部分可看成“人”字，蘊(yùn)涵制作機(jī)器人的意思,LOGO欣賞,任務(wù)二：完成任務(wù)文檔中的任務(wù)二和任務(wù)三。,第二步：設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩,網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用標(biāo)準(zhǔn)色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系的色彩，這樣給人以整體統(tǒng)一的感覺。我們來瀏覽一些網(wǎng)站是如何運(yùn)用色彩樹立風(fēng)格的：,藍(lán)色調(diào)為主，加上白色和紅色，強(qiáng)調(diào)權(quán)威與真實,橙色為主，白色為輔，具有輕快、時尚的效果,第二步：設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩,紅色為主，產(chǎn)生熱情、活力的感覺、充滿歡樂氣氛,綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛,網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用標(biāo)準(zhǔn)色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系的色彩，這樣給人以整體統(tǒng)一的感覺。,第二步：設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩,網(wǎng)站色彩設(shè)計的總體原則“總體協(xié)調(diào)，局部對比”。一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則使人眼花繚亂。至于其它色彩，也可以作為點(diǎn)綴和襯托，決不能喧賓奪主。,色彩太多、跟主色調(diào)不協(xié)調(diào),黃顏色，眼睛容易疲勞、不在同一色系,第三步：設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體,設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體，指在關(guān)鍵的標(biāo)題、主菜單、圖片里使用統(tǒng)一的標(biāo)準(zhǔn)字體。一般網(wǎng)頁默認(rèn)的字體是宋體。各種字體大都具有各自不同的性格，如黑體字凝重、宋體字端莊、隸書飄逸、楷體淡雅等等。體現(xiàn)專業(yè)可以用粗仿宋體，體現(xiàn)設(shè)計精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等。,以上三個方面，標(biāo)志、色彩和字體，是一個網(wǎng)站樹立整體形象的關(guān)鍵，設(shè)計并完成這幾步，相信你的網(wǎng)站整體形象已經(jīng)有了一個很大的提高。,簡潔大方,風(fēng)格獨(dú)特，構(gòu)圖巧妙,生動活潑,色彩豐富,濃郁的文化氣息,任務(wù)三：完成任務(wù)文檔中的任務(wù)四。,第四、收集素材,“內(nèi)容為王”依然是網(wǎng)站成功的關(guān)鍵，沒有豐富的內(nèi)容就不可能讓瀏覽者覺得對自己有用，如果內(nèi)容空洞，無論頁面制作得如何精美，仍然不會有多少瀏覽者。在收集素材的過程中要注意以下三個方面：1、要注意對收集來的素材分類。2、文件名要易懂易記