1、網(wǎng)站的規(guī)劃與設(shè)計,欣賞優(yōu)秀作品,一、欣賞優(yōu)秀作品： 1、虎門銷煙啟示錄 2、觀鳥 /zt/birds 3、2003年“全國電腦制作活動”優(yōu)秀作品中的網(wǎng)頁作品 二、思考以下問題： 1、這些網(wǎng)站是怎樣圍繞主題展現(xiàn)內(nèi)容的？ 2、這些網(wǎng)站提供了哪些欄目及功能？ 3、網(wǎng)站的鏈接有哪些特色，是否便捷？ 4、網(wǎng)站主頁的布局、色彩運用有哪些特點？,一、開發(fā)網(wǎng)站的基本過程,二、網(wǎng)站的規(guī)劃,1、網(wǎng)站主題的確定網(wǎng)站的規(guī)劃從選擇網(wǎng)站的主題開始。網(wǎng)站的選題，就是要根據(jù)網(wǎng)站的開發(fā)目標(biāo)和訪問網(wǎng)站的用戶群，確定網(wǎng)站的主題，并給網(wǎng)站起一個簡練響亮的名字。然后圍繞這個主題搜集素材和相

2、關(guān)資料，并把它們通過網(wǎng)頁的形式呈現(xiàn)出來。 2、網(wǎng)站運行環(huán)境的確定網(wǎng)站環(huán)境包括網(wǎng)站服務(wù)器、文件磁盤存儲空間、網(wǎng)站域名解析等方面。 3、網(wǎng)頁制作工具的選擇主要包括網(wǎng)頁制作工具、圖像處理工具、動畫制作軟件的選擇等。 4、網(wǎng)站開發(fā)任務(wù)的管理 (1)任務(wù)分工 (2)時間安排,三、網(wǎng)站的設(shè)計,（一）網(wǎng)站結(jié)構(gòu)的設(shè)計 制作網(wǎng)站前要設(shè)計好網(wǎng)站的欄目。網(wǎng)站的欄目可以有多層，以能夠恰當(dāng)?shù)伢w現(xiàn)網(wǎng)站主題為好。此外，每個欄目本身應(yīng)有一個大致的內(nèi)容描述，以表達(dá)該欄目的設(shè)計思路，充實整個網(wǎng)站的總體結(jié)構(gòu)設(shè)計。,“虎門銷煙啟思錄”網(wǎng)站的結(jié)構(gòu),“虎門銷煙啟思錄”網(wǎng)站的結(jié)構(gòu),三、網(wǎng)站的設(shè)計,（二）網(wǎng)頁的版面設(shè)計 1、風(fēng)格設(shè)計 包括網(wǎng)

3、頁布局的整體造型、色彩的搭配、字體圖片的樣式設(shè)置、網(wǎng)站的標(biāo)志設(shè)計等 2、版面布局設(shè)計標(biāo)題信息、欄目信息、內(nèi)容信息、附加信息等，要進(jìn)行合理的放置，讓人看起來井井有條，主次分明。,常見網(wǎng)頁布局類型,（三）網(wǎng)頁的交互設(shè)計,任務(wù),本學(xué)期以小組為單位，每個小組制作一個專題網(wǎng)站。網(wǎng)站主題由各小組定。每小組選出小組長，確定好主題，作好網(wǎng)站的規(guī)劃。 1、填寫好網(wǎng)站規(guī)劃表 2、給自己組的主題網(wǎng)站設(shè)計欄目、結(jié)構(gòu)和作版面設(shè)計 參考下面閱讀材料，給主題網(wǎng)站作好結(jié)構(gòu)設(shè)計、版面設(shè)計。,1、個人網(wǎng)站的規(guī)劃與設(shè)計,一、個人網(wǎng)站與個人主頁主頁就像一份報紙的頭版，通常用來作為一個站點的目錄或索引。網(wǎng)站的內(nèi)容都會在主頁上面有超級鏈

4、接，以便用戶點擊訪問。主頁在一個網(wǎng)站的處于中心地位，所以常常用主頁代稱網(wǎng)站。比如：個人網(wǎng)站也經(jīng)常被稱為“個人主頁”。 二、個人網(wǎng)站的規(guī)劃與設(shè)計1.明確你建網(wǎng)站的目的是為了宣傳自己；還是介紹自己的愛好；還是為了傳播某項技術(shù)或?qū)I(yè)知識；還是建立一種公益性服務(wù)；還是為一種思想、觀念、事業(yè)做宣傳；還是使自己走向世界，與更多的人交流。2.建站前的調(diào)查根據(jù)自己的目的，調(diào)查下相關(guān)的個人網(wǎng)站，看別人的網(wǎng)站申請了什么樣的網(wǎng)站空間、采用了什么建站技術(shù)、設(shè)置那些欄目、提供了那些功能。3.網(wǎng)站的定位如今互聯(lián)網(wǎng)上的個人網(wǎng)站如雨后春筍般蓬勃發(fā)展，絢麗多彩的主頁比比皆是。每個人都有發(fā)揮個人才能，揮灑自己個性的網(wǎng)上伊甸園。但

5、透過華麗外表，不難看出個中的一些問題所在。（1） 內(nèi)容定位（2） 技術(shù)定位問題（3） 廣告定位問題4.網(wǎng)站的表現(xiàn)形式基本上與企業(yè)網(wǎng)站的表現(xiàn)形式一樣，但要時刻注意緊扣自己建立的目的主題。,1、個人網(wǎng)站的規(guī)劃與設(shè)計,三、個人網(wǎng)站的欄目設(shè)置欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細(xì)考慮，合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面：1.一定記住要緊扣你的主題！一般的做法是：將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。記?。褐黝}欄目個數(shù)在總欄目中要占絕對優(yōu)勢，這樣的網(wǎng)站顯的專業(yè)，主題突出，容易給人留下深刻印象。 2.設(shè)一個最近更新或網(wǎng)站指南欄目這

6、樣做是為了照顧常來的訪客，讓你的主頁更有人性化。3.設(shè)定一個可以雙向交流的欄目不需要很多，但一定要有。比如論壇，留言本，郵件列表等4.設(shè)一個下載或常見問題回答欄目網(wǎng)絡(luò)的特點是信息共享。在你自己的主頁上設(shè)置一個資料下載欄目，會得到大家的喜歡。另外，如果您的站點經(jīng)常收到網(wǎng)友關(guān)于某方面的問題來信，你最好設(shè)立一個常見問題回答的欄目，既方便了網(wǎng)友，也可以節(jié)約自己更多時間用以學(xué)習(xí)。至于其他的輔助內(nèi)容，如關(guān)于本站，版權(quán)信息等可以不放在主欄目里，以免沖淡主題?？偨Y(jié)以上幾點，我們得出劃分欄目需要注意的是：盡可能刪除與主題無關(guān)的欄目盡可能將網(wǎng)站最有價值的內(nèi)容列在欄目上盡可能方便訪問者的瀏覽和查詢,2、網(wǎng)站規(guī)劃書的

7、寫作規(guī)范,網(wǎng)站規(guī)劃書出應(yīng)該盡可能涵蓋網(wǎng)站規(guī)劃中的各個方面。網(wǎng)站規(guī)劃書包含的內(nèi)容如下： 一、建設(shè)網(wǎng)站前的市場分析 二、建設(shè)網(wǎng)站目的及功能定位 三、網(wǎng)站技術(shù)解決方案 四、網(wǎng)站內(nèi)容規(guī)劃 五、網(wǎng)頁設(shè)計 六、網(wǎng)站維護(hù) 七、網(wǎng)站測試 八、網(wǎng)站發(fā)布與推廣 九、網(wǎng)站建設(shè)日程表：各項規(guī)劃任務(wù)的開始完成時間，負(fù)責(zé)人等。 十、費用明細(xì) 以上為網(wǎng)站規(guī)劃書中應(yīng)該體現(xiàn)的主要內(nèi)容，根據(jù)不同的需求和建站目的，內(nèi)容也會在增加或減少。在建設(shè)網(wǎng)站之初一定要進(jìn)行細(xì)致的規(guī)劃，才能達(dá)到預(yù)期建站目的。,3、網(wǎng)站設(shè)計必知的65條原則（略）,通過搜索引擎自己搜索一下,4、網(wǎng)頁色彩的選擇,不同的顏色會給人們不同的心理感受，設(shè)計網(wǎng)頁時，要結(jié)合主題

8、的需要選擇不同的色彩。 紅色：是一種激奮的色彩，能使人產(chǎn)生喜慶、熱情、活力的感覺。 綠色：介于冷暖兩種色彩的中間，顯得和睦、寧靜、健康、安全，它和金黃、淡白搭配，可以營造優(yōu)雅舒適的氣氛。橙色：也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨、時尚的效果。 藍(lán)色：是最具涼爽、清新、專業(yè)的色彩，它和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。 白色：讓人產(chǎn)生潔白、明快、純真、清潔的感覺。 黑色：使人產(chǎn)生深沉、神秘、寂靜、悲哀、壓抑的感覺。 灰色：讓人聯(lián)想到中庸、平凡、溫和、謙讓、中立和高雅的感覺。 每種色彩在飽和度、透明度上略微變化就會產(chǎn)生不同的感覺。以綠色為例，黃綠色有青春、旺盛的視覺意境，而藍(lán)綠色則

9、顯得幽靜、陰深。,網(wǎng)頁色彩搭配的原理,1.色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。 2.色彩的獨特性。要有與眾不同的色彩，使得大家對你的印象強(qiáng)烈。 3.色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點的柔性。 4.色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。 在網(wǎng)頁配色中，不要將所有的顏色都用到，盡量控制在三種色彩以內(nèi)，背景色和前景文字的對比盡量要大，以便讓文字看起來更清晰。,5、確定網(wǎng)站的欄目和版塊,前面說的是欄目，我們再看看版塊設(shè)置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子

10、：網(wǎng)易的站點分新聞，體育，財經(jīng)，娛樂，教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人站點內(nèi)容少，只有主欄目(主菜單)就夠了，不需要設(shè)置版塊。 如果你覺得的確有必要設(shè)置版塊的，應(yīng)該注意 1.各版塊要有相對獨立性。 2.各版塊要有相互關(guān)聯(lián)。 3.版塊的內(nèi)容要圍繞站點主題。,6、確定網(wǎng)站的目錄結(jié)構(gòu),網(wǎng)站的目錄是指建立網(wǎng)站時創(chuàng)建的目錄。例如：在用frontpage98建立網(wǎng)站時都默認(rèn)建立了根目錄和images子目錄。目錄的結(jié)構(gòu)是一個容易忽略的問題，目錄結(jié)構(gòu)的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的上傳維護(hù)，內(nèi)容未來的擴(kuò)充和移植有著重要的影響。 下面是建立目錄結(jié)構(gòu)的一些建議：

11、不要將所有文件都存放在根目錄下。 按欄目內(nèi)容建立子目錄。 在每個主目錄下都建立獨立的images目錄。 目錄的層次不要太深：建議不要超過3層。維護(hù)管理方便。 其它需要注意的還有： 1.不要使用中文目錄；網(wǎng)絡(luò)無國界，使用中文目錄可能對網(wǎng)址的正確顯示造成困難。 2.不要使用過長的目錄；盡管服務(wù)器支持長文件名，但是太長的目錄名不便于記憶。 3.盡量使用意義明確的目錄； 隨著網(wǎng)頁技術(shù)的不斷發(fā)展，利用數(shù)據(jù)庫或者其他后臺程序自動生成網(wǎng)頁越來越普遍，網(wǎng)站的目錄結(jié)構(gòu)也必將飛躍到一個新的結(jié)構(gòu)層次。,7、文件夾文件名命名規(guī)范,文件夾命名一般采用英文，長度一般不超過20個字符，命名采用小寫字母。除特殊情況才使用中文

12、拼音，一些常見的文件夾命名如：images(存放圖形文件)，flash（存放Flash文件），style(存放CSS文件)，scripts（存放Javascript腳本），inc(存放include文件)，link（存放友情鏈接）,media(存放多媒體文件)等。 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負(fù)載量等等操作 。 1、圖片的命名原則名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)例如廣告、標(biāo)志、菜單、按鈕等等。 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner 標(biāo)志性的圖片取名為： logo 在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button 在頁面上某一個位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶?menu 裝飾用的照片我們?nèi)∶?pic 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶?title 下面是幾個范例： banner_sohu.gif 、banner_sina.gif、 me