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

網(wǎng)站的規(guī)劃與設(shè)計第1頁/共27頁一、開發(fā)網(wǎng)站的基本過程第2頁/共27頁二、網(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)站起一個簡練響亮的名字。注意：貼近學(xué)習(xí)和生活2.網(wǎng)站運行環(huán)境的確定

網(wǎng)站環(huán)境包括網(wǎng)站服務(wù)器情況、文件磁盤存儲空間、網(wǎng)站域名管理等方面。

3.網(wǎng)頁制作工具的選擇

主要包括選擇網(wǎng)頁制作工具（Frontpage、Dreamweaver)、圖像處理工具（Photoshop、Fireworks、paintshop）、動畫制作軟件（flash、Uleadgifanimator）等。

4.網(wǎng)站開發(fā)任務(wù)的管理(1)任務(wù)分工(2)時間安排第3頁/共27頁主要軟件Dreamweaver第4頁/共27頁第5頁/共27頁主要軟件Photoshop由Adobe公司推出的專門用于圖形、圖像處理的軟件Photoshop以其強大的功能、集成度高、適用面廣和操作簡便而著稱于世。它不僅提供強大的繪圖工具，還能直接從掃描儀、數(shù)碼相機等設(shè)備采集圖像，并對它們進行修改、修復(fù)，調(diào)整圖像的色彩、亮度，改變圖像的大小，而且還可以對多幅圖像進行疊加，并增加特殊效果，使現(xiàn)實生活中很難遇見的景像十分逼真地展現(xiàn)。第6頁/共27頁Photoshop界面界面默認(rèn)打開的面板有：屬性欄、工具欄導(dǎo)航、顏色、圖層：第7頁/共27頁Photoshop入門介紹效果欣賞第8頁/共27頁第9頁/共27頁主要軟件Flash由Macromedia公司開發(fā)設(shè)計的多媒體軟件所生成的動畫(.swf)文件非常小，用在網(wǎng)頁設(shè)計上不僅可以使網(wǎng)頁更加生動，而且小巧玲瓏下載迅速，使得動畫可以在打開網(wǎng)頁很短的時間里就得以播放。并且把音樂，動畫，聲效，交互方式融合在一起，可以直接嵌入網(wǎng)頁的任一位置，非常方便。第10頁/共27頁1舞臺(Stage)2時間軸窗口

(Timeline)

3繪圖工具欄

(DrawingToolbar)

4標(biāo)準(zhǔn)工具欄

(StandardToolbar)5圖庫窗口

(LibraryWindow)6控制器面板

(Controller)FLASH工作環(huán)境第11頁/共27頁西雙版納植物園虛擬瓷都中國金魚FLASH在中國科普博

虛擬博物館建設(shè)中的應(yīng)用示例第12頁/共27頁三、網(wǎng)站的設(shè)計網(wǎng)站設(shè)計的目的：

把信息以恰當(dāng)?shù)姆绞浇M織并呈現(xiàn)在網(wǎng)上，設(shè)法吸引人們的關(guān)注，并為瀏覽者提供方便的訪問。（一）網(wǎng)站結(jié)構(gòu)的設(shè)計：設(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è)計。第13頁/共27頁“虎門銷煙啟思錄”網(wǎng)站的結(jié)構(gòu)第14頁/共27頁“虎門銷煙啟思錄”網(wǎng)站的結(jié)構(gòu)第15頁/共27頁三、網(wǎng)站的設(shè)計（二）網(wǎng)頁的版面設(shè)計1.風(fēng)格設(shè)計包括網(wǎng)頁布局的整體造型、色彩的搭配、字體圖片的樣式設(shè)置、網(wǎng)站的標(biāo)志設(shè)計等。如：嚴(yán)肅莊重、清爽溫馨、深沉厚重、生動活潑、古樸典雅。。。第16頁/共27頁簡潔大方第17頁/共27頁風(fēng)格獨特，構(gòu)圖巧妙第18頁/共27頁生動活潑第19頁/共27頁色彩豐富第20頁/共27頁濃郁的文化氣息第21頁/共27頁2.版面布局設(shè)計

標(biāo)題信息、欄目信息、內(nèi)容信息、附加信息等，要進行合理的放置，讓人看起來井井有條，主次分明。一般來說：屏幕中央最能引人注意，屏幕上方緊隨其后，屏幕左右側(cè)通常放置不太重要或固定信息，附加信息一般放在最下方。第22頁/共27頁常見網(wǎng)頁布局類型布局類型布局方式實例“國”字型上面是網(wǎng)站的標(biāo)題及橫幅廣告，接下來是網(wǎng)站的主要內(nèi)容，左右分別列一些小條，中間是主要內(nèi)容，下面是一些網(wǎng)站的信息

人民網(wǎng)拐角型上面是標(biāo)題廣告，接下來在左側(cè)是導(dǎo)航欄，右側(cè)是正文，下面是網(wǎng)站的信息。

/zuopin2007/mansu標(biāo)題正文型上面是標(biāo)題，下面是正文。

左右框型左邊是導(dǎo)航欄，右邊是正文。有時最上方會有一個小標(biāo)題。

上下框型上面是導(dǎo)航欄，下面是正文。/show/綜合框架型左右、上下兩種框架結(jié)構(gòu)的結(jié)合。

封面型（Flash型）精美的平面或動畫作為首頁。/birds第23頁/共27頁（三）網(wǎng)頁的交互設(shè)計用戶如何訪問網(wǎng)站？怎樣從一個位置到另一個位置？怎樣防止用戶在網(wǎng)站中”迷路”?

鏈接點設(shè)計要考慮人們在瀏覽網(wǎng)站時通常有哪些需求？幫助瀏覽者快捷的跳轉(zhuǎn)到所需的頁面。第24頁/共27頁任務(wù)

以小組為單位，每個小組制作一個專題網(wǎng)站。網(wǎng)站主題由各小組定。每小組選出小組長，確定好主題，作