網(wǎng)站的規(guī)劃與設(shè)計

1、網(wǎng)站的規(guī)劃與設(shè)計日期：2010-03-07來源：東莞中學(xué) 作者：字體：大 中 小 學(xué)習(xí)目的：了解開發(fā)網(wǎng)站的意義和作用。了解開發(fā)網(wǎng)站的基本過程。掌握網(wǎng)站規(guī)劃和設(shè)計的過程和方法。學(xué)習(xí)重難點：網(wǎng)站規(guī)劃和設(shè)計教學(xué)方式：老師講解、引導(dǎo)；學(xué)生通過欣賞作品、聆聽講解來感受和理解，并動手實踐。學(xué)習(xí)內(nèi)容：一、網(wǎng)站的應(yīng)用現(xiàn)如今，網(wǎng)站已經(jīng)廣泛應(yīng)用到社會的各行各業(yè)，滲透到各個領(lǐng)域。如政府部門借助網(wǎng)站提供政策咨詢，發(fā)布政務(wù)信息，溝通社情民意；公司企業(yè)借助網(wǎng)站樹立企業(yè)形象，推廣企業(yè)產(chǎn)品，尋找合作伙伴；各種服務(wù)機構(gòu)借助網(wǎng)站提供新聞、教育、娛樂、旅游等各項服務(wù)。那我們可以借助網(wǎng)站來做什么呢？ -宣傳班級、學(xué)校形象； -展示學(xué)

2、習(xí)成果； -開展研究性學(xué)習(xí)； -結(jié)交志趣相投的朋友； - 先讓我們一起來欣賞幾個優(yōu)秀網(wǎng)站吧： 2005年“全國中小學(xué)電腦制作活動”高中組網(wǎng)頁制作獲獎作品：京劇苑構(gòu)筑和諧家庭代溝研究石灣公仔 我校優(yōu)秀班級主頁： 2006級高二（8）班 2007級高一（8）班 2005級高二（12）班 2005級高二（19）班 2004級高二（3）班 其他優(yōu)秀網(wǎng)站欣賞：依兒酷站_優(yōu)秀網(wǎng)站欣賞精美網(wǎng)站設(shè)計欣賞 二、開發(fā)網(wǎng)站的基本過程開發(fā)網(wǎng)站的目的不同，其內(nèi)容和表現(xiàn)的形式也就不同，但基本過程是相同的。從系統(tǒng)設(shè)計的觀點來看，一般開發(fā)網(wǎng)站的基本過程經(jīng)歷五個階段：三、網(wǎng)站的規(guī)劃1、什么是網(wǎng)站的規(guī)劃 在互聯(lián)網(wǎng)中，網(wǎng)站成千上萬

3、，瀏覽者常常是走馬觀花，一帶而過，只有精彩、內(nèi)容極其豐富的網(wǎng)站，能吸引住瀏覽者。這種結(jié)果首先要歸功于網(wǎng)站的規(guī)劃和設(shè)計者。獨具匠心的網(wǎng)站規(guī)劃設(shè)計就象一幢宏偉的建筑前期的規(guī)劃設(shè)計一樣，要進行認真、科學(xué)總體規(guī)劃，之后才可以“破土動工”。網(wǎng)站規(guī)劃主要有兩大部分： (1規(guī)劃涉及的內(nèi)容，包括每一步的目標(biāo)、內(nèi)容；每一步的人力安排；每一步生成的文檔。 (2網(wǎng)站的要素，包括網(wǎng)站的內(nèi)容、網(wǎng)站的功能和網(wǎng)站的表現(xiàn)形式。2、網(wǎng)站規(guī)劃設(shè)計的基本原則 (1 明確建設(shè)網(wǎng)站的目的 建立網(wǎng)站之前，要有明確的目的，即所要建立的網(wǎng)站的作用是什么，服務(wù)的對象是那些群體，要為瀏覽者提供怎樣的服務(wù)。有只有找準(zhǔn)了網(wǎng)站的定位，才可能建成一個成

4、功的網(wǎng)站。 (2 進行可行性分析 可行性分析就是分析是否有能力有財力建設(shè)和維護這個網(wǎng)站；分析網(wǎng)站建立以后是否有一定的經(jīng)濟效益或社會效益；分析網(wǎng)站建設(shè)需要花費多少時間、精力、人力，性價比是否合算。 (3網(wǎng)站的內(nèi)容設(shè)計 建設(shè)網(wǎng)站就是要為用戶服務(wù)的，根據(jù)網(wǎng)站建設(shè)的目的，分析瀏覽者的需求，確定網(wǎng)站的內(nèi)容。比如一個電子商務(wù)網(wǎng)站，就要根據(jù)消費者的需求、購買力、購買習(xí)慣等要素設(shè)計網(wǎng)站每個網(wǎng)頁的功能，以滿足客戶的需要。 (4網(wǎng)站的表現(xiàn)形式設(shè)計 有了好的內(nèi)容，還要有好的表現(xiàn)形式，這就是網(wǎng)站本身的設(shè)計比如設(shè)計網(wǎng)站的CI標(biāo)志、網(wǎng)站的文字排版、平面設(shè)計、三維立體設(shè)計、靜態(tài)無聲圖文、動態(tài)有聲影像等。3、網(wǎng)站主題的確定網(wǎng)

5、站的選題，就是要根據(jù)網(wǎng)站的開發(fā)目標(biāo)和訪問網(wǎng)站的用戶群，確立網(wǎng)站的主題，并給網(wǎng)站起一個簡練響亮的名字，一個好的網(wǎng)站名稱可以給一個網(wǎng)站起到畫龍點睛的作用。 網(wǎng)站名稱的確定需要切題，一個好的網(wǎng)站名稱可以樸實的或者是想象力豐富的、容易引起聯(lián)想的，要避免使用過于生僻難懂的詞匯。一個別具一格、瑯瑯上口的網(wǎng)站名稱能令人印象深刻，不但能讓用戶了角網(wǎng)站的主題內(nèi)容，而且還能吸引更多的瀏覽者。4、網(wǎng)站運行環(huán)境的確定我校的校園網(wǎng)提供了高帶寬、平穩(wěn)的網(wǎng)站運行環(huán)境，為同學(xué)們提供存放網(wǎng)站的磁盤空間。同學(xué)們可以“信息技術(shù)教學(xué)網(wǎng)”的“個人空間”處申請個人空間，做好網(wǎng)站后再用FTP軟件將網(wǎng)站上傳到個人空間處，然后再申請開通外部鏈

6、接，管理員審批之后，大家就可以欣賞到你的網(wǎng)站了。5、網(wǎng)頁制作工具的選擇制作網(wǎng)站的軟件有很多，常見易學(xué)的制作軟件有Frontpage和Dreamweaver。當(dāng)然要讓網(wǎng)頁有好的視覺效果，還必須要有圖像處理軟件來對圖片進行處理，如Photoshop、Fireworks；如果還需要動畫效果，還需要運用動畫制作軟件，如Flash、Gif動畫制作軟件等。6、網(wǎng)站開發(fā)任務(wù)的管理要讓網(wǎng)站順利、高效地完成開發(fā)和設(shè)計，還必須要有詳細的任務(wù)分工和時間安排。要協(xié)作完成任務(wù)時，各小組成員除相互協(xié)作之外還要有明確的任務(wù)分工，做到“專司其責(zé)，各盡其能，分工協(xié)作，顧全大局”。在網(wǎng)站規(guī)劃中，還應(yīng)對需要完成工作的時間進行安排，

7、然后嚴(yán)格按照來開展工作。四、網(wǎng)站設(shè)計網(wǎng)站設(shè)計的目的在于把需要表達的信息以恰當(dāng)?shù)姆绞浇M織并呈現(xiàn)在網(wǎng)上，設(shè)法吸引人們的關(guān)注，并為瀏覽者提供方便的訪問。網(wǎng)站設(shè)計一般包括網(wǎng)站欄目結(jié)構(gòu)設(shè)計、網(wǎng)頁版面設(shè)計、網(wǎng)頁的鏈接設(shè)計（導(dǎo)航設(shè)計）等。 請同學(xué)們再看看本課開頭提供的幾個優(yōu)秀網(wǎng)站，并思考以下幾個問題： （1）這些網(wǎng)站是怎樣圍繞主題展現(xiàn)內(nèi)容的？ （2）這些網(wǎng)站提供了哪些欄目及功能？ （3）網(wǎng)站的鏈接有哪些特色，是否便捷？ （4）網(wǎng)站主頁的布局、色彩運用在哪些特點？1、網(wǎng)站的結(jié)構(gòu)設(shè)計經(jīng)驗告訴我們，建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設(shè)計好框架圖紙，才能

8、使樓房結(jié)構(gòu)合理。制作網(wǎng)站前要設(shè)計好網(wǎng)站的欄目，網(wǎng)站的欄目可以有多層，但并不是層數(shù)越多越好，以能夠恰當(dāng)?shù)伢w現(xiàn)網(wǎng)站主題為好。此外，每個欄目應(yīng)有一個大致的內(nèi)容描述，以表達該欄目的設(shè)計思路。 下面是“2005級高二（12）班”網(wǎng)站的結(jié)構(gòu)圖： 2、網(wǎng)頁的版面設(shè)計網(wǎng)頁的版面效果在吸引訪問者瀏覽網(wǎng)頁中起了重要的作用，網(wǎng)頁的版面設(shè)計主要是進行網(wǎng)頁的風(fēng)格設(shè)計和版面布局設(shè)計，一個色彩搭配合理、版面布局清新的網(wǎng)站會讓訪問者留戀往還。 (1風(fēng)格設(shè)計 風(fēng)格是指網(wǎng)站的整體形象給瀏覽者的綜合感受。有的嚴(yán)肅計策，有的清爽溫馨，有的深沉厚重，有的生動活潑，有的古樸典雅，有的豪邁奔放。風(fēng)格設(shè)計與主題是密不可分的，是為突出主題服務(wù)

9、的。 一種風(fēng)格的形成需要從多方面著手設(shè)計，包括網(wǎng)頁布局的整體造型、色彩的搭配、字體圖片的樣式設(shè)置、網(wǎng)站的標(biāo)志設(shè)計等，同一個網(wǎng)站的各網(wǎng)頁之間應(yīng)保持風(fēng)格一致。 (2版面布局設(shè)計 網(wǎng)頁要呈現(xiàn)的內(nèi)容很多，概括起來可分為標(biāo)題信息、欄目信息、內(nèi)容信息、附加信息等，需要進行合理的放置，讓人看起來井井有條，主次分明。 一個網(wǎng)頁的版面通常以屏幕中央最能引人注意，屏幕上方緊隨其后，屏幕的左右側(cè)通常放置不太重要或固定信息，附加信息（如版權(quán)信息）一般放在最下方。 版面布局的整體造型和色彩搭配的靈活運用也會影響人們的注意力，產(chǎn)生不同的視覺效果。版面布局沒有絕對統(tǒng)一的方法，應(yīng)視需要而定，有創(chuàng)意的布局會給人以耳目一新的感覺

10、。3、網(wǎng)頁的交互設(shè)計網(wǎng)站它不是一個“被動”的媒體，和電視、電臺等媒體不一樣的是網(wǎng)頁是需要我們用鼠標(biāo)去點擊的。 瀏覽者點擊連接，網(wǎng)頁顯示出需要的內(nèi)容然后在傳遞給瀏覽者。這就是網(wǎng)頁的交互性。 網(wǎng)頁中的交互通常是通過鏈接來實現(xiàn)，鏈接點的設(shè)計就是要考慮人們在瀏覽網(wǎng)站是通常有哪些需求，并幫助他們快捷地跳轉(zhuǎn)到所需的頁面，實現(xiàn)輕松自如的瀏覽。以下是某網(wǎng)站的“網(wǎng)頁交互設(shè)計”表：（點擊查看放大圖）五、任務(wù)布置網(wǎng)站建設(shè)總?cè)蝿?wù)： 請每個同學(xué)（或同桌兩個合作，合作成員不能超過兩個）設(shè)計制作一份網(wǎng)頁作品。 1、要求：（1）主題自定；（2）總共要有10個頁面或以上。（3）網(wǎng)頁中的內(nèi)容要緊密結(jié)合作者的學(xué)習(xí)、生活實際或社會實踐。 （4）在水平分辨率為1024（或以上）像素的電腦屏幕上瀏覽時，頁面保持整齊，不允許出現(xiàn)橫向的滾動條。2、評比指標(biāo)： 本節(jié)課任務(wù)：請每個網(wǎng)站的作者利用Word建立一份“網(wǎng)站規(guī)劃設(shè)計書”，內(nèi)容包括：（1）網(wǎng)站的主題；（2）網(wǎng)站里包括什么欄目（一級