1、一、復(fù)習(xí)一、復(fù)習(xí)網(wǎng)站開(kāi)發(fā)的一般過(guò)程：1、基本概念2、網(wǎng)站的需求分析(目標(biāo)、對(duì)象、投入等)3、確定網(wǎng)站的主題4、確定網(wǎng)站的名稱(chēng)5、選擇網(wǎng)頁(yè)制作工具新課引入 網(wǎng)站設(shè)計(jì)是將網(wǎng)站由藍(lán)圖變?yōu)楝F(xiàn)實(shí)的第一個(gè)步驟，是搭建網(wǎng)站整體結(jié)構(gòu)的過(guò)程，它可以使接下來(lái)的工作更加有的放矢。 那我們到底如何來(lái)對(duì)網(wǎng)站進(jìn)行設(shè)計(jì)呢？網(wǎng)站實(shí)例欣賞網(wǎng)站名稱(chēng)：網(wǎng)站名稱(chēng)：網(wǎng)站主題：網(wǎng)站主題：展示、推廣中學(xué)生文學(xué)原創(chuàng)作品，提供華語(yǔ)文學(xué)愛(ài)好者交流的平臺(tái)欄目設(shè)置欄目設(shè)置網(wǎng)站名稱(chēng)：網(wǎng)站名稱(chēng)：網(wǎng)站主題：網(wǎng)站主題：一個(gè)學(xué)生研究小組對(duì)泰山石刻歷史和保護(hù)為課題主題研究成果展示。欄目設(shè)置欄目設(shè)置網(wǎng)站實(shí)例欣賞第一、欄目設(shè)置v 網(wǎng)站的制作就好比寫(xiě)一篇文章，首先要

2、擬好提綱，文章才能主題明確，層次清晰，所以，主題選好后，網(wǎng)站設(shè)計(jì)的第一步要設(shè)置欄目。v 下面以制作“機(jī)器人做學(xué)玩”網(wǎng)站為例?！皺C(jī)器人做學(xué)玩”網(wǎng)站的欄目設(shè)置欄目設(shè)置需注意：（1 1）要緊扣主題，盡可能刪除與主題無(wú)關(guān)的欄目）要緊扣主題，盡可能刪除與主題無(wú)關(guān)的欄目（2 2）盡可能將網(wǎng)站最有吸引力的內(nèi)容列在欄目上）盡可能將網(wǎng)站最有吸引力的內(nèi)容列在欄目上（3 3）盡可能方便訪(fǎng)問(wèn)者的瀏覽和查詢(xún)。如：設(shè)置）盡可能方便訪(fǎng)問(wèn)者的瀏覽和查詢(xún)。如：設(shè)置“本站指本站指南南”或或“網(wǎng)站地圖網(wǎng)站地圖”欄目可以幫助初訪(fǎng)者快速找到他們想欄目可以幫助初訪(fǎng)者快速找到他們想要的內(nèi)容要的內(nèi)容任務(wù)一：設(shè)置網(wǎng)站的欄目。要求：填寫(xiě)“任務(wù)文

3、檔.doc”中的任務(wù)一中的表格。第二、版面設(shè)計(jì)v 網(wǎng)海茫茫，能夠吸引我們眼球的只有那些有特色的網(wǎng)網(wǎng)海茫茫，能夠吸引我們眼球的只有那些有特色的網(wǎng)頁(yè)，大量的網(wǎng)頁(yè)引不起網(wǎng)民的興趣，究其原因，站點(diǎn)頁(yè)，大量的網(wǎng)頁(yè)引不起網(wǎng)民的興趣，究其原因，站點(diǎn)內(nèi)容是否豐富是其中一個(gè)方面，而網(wǎng)頁(yè)的版面設(shè)計(jì)是內(nèi)容是否豐富是其中一個(gè)方面，而網(wǎng)頁(yè)的版面設(shè)計(jì)是否精美也是重要因素之一。否精美也是重要因素之一。v 版面結(jié)構(gòu)是指將不同元素巧妙排列的方式，合理的版版面結(jié)構(gòu)是指將不同元素巧妙排列的方式，合理的版面結(jié)構(gòu)能夠使瀏覽者清楚、容易地理解作品傳達(dá)的信面結(jié)構(gòu)能夠使瀏覽者清楚、容易地理解作品傳達(dá)的信息。息。v 布局就是以最適合瀏覽的方式

4、將圖片和文字排放在頁(yè)布局就是以最適合瀏覽的方式將圖片和文字排放在頁(yè)面的不同位置。網(wǎng)頁(yè)要呈現(xiàn)的內(nèi)容很多，如何合理地面的不同位置。網(wǎng)頁(yè)要呈現(xiàn)的內(nèi)容很多，如何合理地放置信息，使之井井有條、主次分明是版面布局需要放置信息，使之井井有條、主次分明是版面布局需要考慮的問(wèn)題?？紤]的問(wèn)題。常見(jiàn)頁(yè)面布局樣式(第一種)參考示例參考示例主菜單以及橫條網(wǎng)站標(biāo)志主菜單以及橫條網(wǎng)站標(biāo)志+廣告條廣告條顯顯示示內(nèi)內(nèi)容容主主菜菜單單常見(jiàn)頁(yè)面布局樣式(第二種)主菜單廣告條主要內(nèi)容友情鏈接等參考示例參考示例常見(jiàn)頁(yè)面布局樣式(第三種)頁(yè)面布局像一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心，菜單欄目自由擺放。參考示例參考示例怎樣設(shè)計(jì)

5、版面？ 一般來(lái)說(shuō)，網(wǎng)頁(yè)版面布局可按一般來(lái)說(shuō)，網(wǎng)頁(yè)版面布局可按創(chuàng)意草案、粗略布局、最后定案創(chuàng)意草案、粗略布局、最后定案三個(gè)步驟來(lái)進(jìn)行。三個(gè)步驟來(lái)進(jìn)行。 下面我們來(lái)看下面我們來(lái)看“機(jī)器人做學(xué)玩機(jī)器人做學(xué)玩”網(wǎng)站的版面布局圖：網(wǎng)站的版面布局圖：第三、樹(shù)立網(wǎng)站整體風(fēng)格網(wǎng)網(wǎng)站站風(fēng)風(fēng)格格粗獷豪放粗獷豪放清新秀麗清新秀麗溫文爾雅溫文爾雅執(zhí)著熱情執(zhí)著熱情第一步：設(shè)計(jì)、制作一個(gè)網(wǎng)站的標(biāo)志（logo） 標(biāo)志可以是中文、英文字母，可以是符號(hào)、圖案，可以是動(dòng)物或者人物等。標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自你網(wǎng)站的名稱(chēng)和內(nèi)容。一般來(lái)說(shuō)，設(shè)計(jì)標(biāo)志有這樣幾種方法： （1 1）選擇與網(wǎng)站主題有關(guān)的，并具有代表性的人或物，用它們?yōu)樵O(shè)）選擇與網(wǎng)

6、站主題有關(guān)的，并具有代表性的人或物，用它們?yōu)樵O(shè)計(jì)藍(lán)本，加以卡通化和藝術(shù)化。如搜狐網(wǎng)站的狐貍尾巴計(jì)藍(lán)本，加以卡通化和藝術(shù)化。如搜狐網(wǎng)站的狐貍尾巴 （2 2）對(duì)于專(zhuān)業(yè)性的網(wǎng)站，可以是本專(zhuān)業(yè)有代表的物品作為標(biāo)志，比）對(duì)于專(zhuān)業(yè)性的網(wǎng)站，可以是本專(zhuān)業(yè)有代表的物品作為標(biāo)志，比如中國(guó)銀行的銅板標(biāo)志。如中國(guó)銀行的銅板標(biāo)志。（3 3）最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的中文或英文名稱(chēng)作標(biāo)志。）最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的中文或英文名稱(chēng)作標(biāo)志。采用不同的字體、字母的變形與組合，可以很容易制作出自己的標(biāo)采用不同的字體、字母的變形與組合，可以很容易制作出自己的標(biāo)志。如：志。如：“機(jī)器人做學(xué)玩機(jī)器人做學(xué)玩”網(wǎng)站標(biāo)志

7、。網(wǎng)站標(biāo)志。R是機(jī)器人“robot”第一個(gè)字母，R分割成兩部分，上面是“做”的英文單詞do的首字母D，下部分可看成“人”字，蘊(yùn)涵制作機(jī)器人的意思LOGO欣賞任務(wù)二： 完成任務(wù)文檔中的任務(wù)二和任務(wù)三。第二步：設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩 網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用標(biāo)準(zhǔn)網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用標(biāo)準(zhǔn)色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系的色彩，色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系的色彩，這樣給人以這樣給人以整體統(tǒng)一整體統(tǒng)一的感覺(jué)。的感覺(jué)。 我們來(lái)瀏覽一些網(wǎng)站是如何運(yùn)用色彩樹(shù)立風(fēng)格的：藍(lán)色調(diào)為主，加上白色和藍(lán)色調(diào)為主

8、，加上白色和紅色，強(qiáng)調(diào)權(quán)威與真實(shí)紅色，強(qiáng)調(diào)權(quán)威與真實(shí)橙色為主，白色為輔，具有橙色為主，白色為輔，具有輕快、時(shí)尚的效果輕快、時(shí)尚的效果第二步：設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩紅色為主，產(chǎn)生熱情、活力的紅色為主，產(chǎn)生熱情、活力的感覺(jué)、充滿(mǎn)歡樂(lè)氣氛感覺(jué)、充滿(mǎn)歡樂(lè)氣氛綠色為主，白色為輔，產(chǎn)生舒適綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛、優(yōu)雅、適于閱讀的氣氛 網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊文字的鏈接色彩盡量使用標(biāo)準(zhǔn)色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系標(biāo)準(zhǔn)色彩；圖片的主色彩、背景色、邊框等盡量使用標(biāo)準(zhǔn)色彩同色系的色彩，這樣給人以的色彩

9、，這樣給人以整體統(tǒng)一整體統(tǒng)一的感覺(jué)。的感覺(jué)。第二步：設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩 網(wǎng)站色彩設(shè)計(jì)的總體原則網(wǎng)站色彩設(shè)計(jì)的總體原則“總體協(xié)調(diào)，局部對(duì)比總體協(xié)調(diào)，局部對(duì)比”。一個(gè)。一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩網(wǎng)站的標(biāo)準(zhǔn)色彩不超過(guò)不超過(guò)3 3種種，太多則使人眼花繚亂。至于其它色彩，也，太多則使人眼花繚亂。至于其它色彩，也可以作為可以作為點(diǎn)綴和襯托點(diǎn)綴和襯托，決不能喧賓奪主。，決不能喧賓奪主。色彩太多、跟主色調(diào)不協(xié)調(diào)黃顏色，眼睛容易疲勞、不在同一色系第三步：設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體，指在關(guān)鍵的標(biāo)題、主菜單、圖片里，指在關(guān)鍵的標(biāo)題、主菜單、圖片里使用使用統(tǒng)一統(tǒng)一的標(biāo)準(zhǔn)字體。的標(biāo)準(zhǔn)字體。 一般網(wǎng)

10、頁(yè)默認(rèn)的字體是宋體。各種字體大都具有各自不同一般網(wǎng)頁(yè)默認(rèn)的字體是宋體。各種字體大都具有各自不同的性格，如的性格，如黑體字凝重、宋體字端莊、隸書(shū)飄逸、楷體淡雅黑體字凝重、宋體字端莊、隸書(shū)飄逸、楷體淡雅等等等。體現(xiàn)專(zhuān)業(yè)可以用粗仿宋體，體現(xiàn)設(shè)計(jì)精美可以用廣告體，等。體現(xiàn)專(zhuān)業(yè)可以用粗仿宋體，體現(xiàn)設(shè)計(jì)精美可以用廣告體，體現(xiàn)親切隨意可以用手寫(xiě)體等。體現(xiàn)親切隨意可以用手寫(xiě)體等。p以上三個(gè)方面，標(biāo)志、色彩和字體，是一個(gè)網(wǎng)站樹(shù)立整體形象的關(guān)鍵，設(shè)計(jì)并完成這幾步，相信你的網(wǎng)站整體形象已經(jīng)有了一個(gè)很大的提高。簡(jiǎn)潔大方簡(jiǎn)潔大方風(fēng)格風(fēng)格獨(dú)特獨(dú)特，構(gòu)圖巧妙構(gòu)圖巧妙生動(dòng)活潑生動(dòng)活潑色彩色彩豐富豐富濃郁的文化氣息濃郁的文化氣息任務(wù)三：完成任務(wù)文檔中的任務(wù)四。第四、收集素材v “內(nèi)容為王內(nèi)容為王”依然是網(wǎng)站成功的關(guān)鍵，沒(méi)有豐富的內(nèi)容就不可依然是網(wǎng)站成功的關(guān)鍵，沒(méi)有豐富的內(nèi)容就不可能讓瀏覽者覺(jué)得對(duì)自己有用，如果內(nèi)容空洞，無(wú)論頁(yè)面制作得能讓瀏覽者覺(jué)得對(duì)自己有用，如果內(nèi)容空洞，無(wú)論頁(yè)面制作得如何精美，仍然不會(huì)有多少瀏覽者。如何精美，仍然不會(huì)有多少瀏覽者。v 在收集素材的過(guò)程中要注意以下三個(gè)方面：在收集素材的過(guò)程中要注意以下三個(gè)方面：1 1、要注意對(duì)收集來(lái)的素材分類(lèi)。、要注意對(duì)收集來(lái)的素材分類(lèi)。2 2、文件名要易懂易記；、文件名要易懂易記；3 3、要注意