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

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

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

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

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

5、站的選題，就是要根據(jù)網(wǎng)站的開發(fā)目標和訪問網(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)境，為同學們提供存放網(wǎng)站的磁盤空間。同學們可以“信息技術教學網(wǎng)”的“個人空間”處申請個人空間，做好網(wǎng)站后再用FTP軟件將網(wǎng)站上傳到個人空間處，然后再申請開通外部鏈

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

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

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

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

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