《網(wǎng)頁(yè)設(shè)計(jì)》PPT課件.ppt

1、第1章 網(wǎng)站設(shè)計(jì)概論,要求：,主要內(nèi)容 一、網(wǎng)站基本知識(shí) 二、網(wǎng)站設(shè)計(jì) 三、網(wǎng)站的開(kāi)發(fā)流程 四、常用網(wǎng)站開(kāi)發(fā)工具 本章習(xí)題,一、網(wǎng)站基本知識(shí),網(wǎng)站及其組成 網(wǎng)站的文件及資源 網(wǎng)站的工作機(jī)制,1、網(wǎng)站及其組成,網(wǎng)站就是由網(wǎng)頁(yè)、圖象、聲音、動(dòng)畫(huà)及數(shù)據(jù)庫(kù)等各種服務(wù)器資源構(gòu)成的集合體。 網(wǎng)站的組成部分： 硬件組成：連接到網(wǎng)絡(luò)上的計(jì)算機(jī)服務(wù)器。 在服務(wù)器上運(yùn)行的網(wǎng)絡(luò)操作系統(tǒng)、Web服務(wù)器、應(yīng)用程序服務(wù)器軟件等。 各種信息服務(wù)的文件資源，如網(wǎng)頁(yè)文件、圖象文件、聲音文件等。 對(duì)網(wǎng)站進(jìn)行管理和維護(hù)的網(wǎng)站管理人員和開(kāi)發(fā)人員等。,2、網(wǎng)站文件及資源,資源： 靜態(tài)網(wǎng)頁(yè)：最基本的網(wǎng)站提供內(nèi)容，由HTML語(yǔ)言描述，包括

2、文本、表格、圖象及其它內(nèi)容，每個(gè)用戶(hù)訪(fǎng)問(wèn)時(shí)內(nèi)容均相同。靜態(tài)網(wǎng)頁(yè)只要放在網(wǎng)站服務(wù)器的文件夾中授權(quán)用戶(hù)訪(fǎng)問(wèn)即可。 動(dòng)態(tài)網(wǎng)頁(yè)：網(wǎng)頁(yè)內(nèi)容隨不同用戶(hù)、不同的訪(fǎng)問(wèn)需求而發(fā)生變化，網(wǎng)頁(yè)中不僅包含HTML代碼，同時(shí)包含在Web服務(wù)器端執(zhí)行的腳本程序代碼。通過(guò)腳本程序代碼進(jìn)行計(jì)算。網(wǎng)頁(yè)能夠訪(fǎng)問(wèn)服務(wù)器端的數(shù)據(jù)資源。并將結(jié)果返回給用戶(hù)。,圖象文件：如圖象、動(dòng)畫(huà)，.gif、jpg、bmp、tif類(lèi)文件等，可以作為網(wǎng)頁(yè)中的插圖、網(wǎng)頁(yè)的背景圖片，極大改善了網(wǎng)頁(yè)的顯示效果。 數(shù)據(jù)庫(kù)：當(dāng)網(wǎng)站要通過(guò)動(dòng)態(tài)網(wǎng)頁(yè)提供各種 服務(wù)時(shí)，通常要利用數(shù)據(jù)庫(kù)來(lái)保存數(shù)據(jù)并提供數(shù)據(jù)服務(wù)。例如電子商務(wù)、BBS等。 其它文件：聲音、動(dòng)畫(huà)、流媒體資源等，

3、可嵌入到網(wǎng)頁(yè)或以超級(jí)鏈接方式下載到用戶(hù)端執(zhí)行。如 swf、wma、rm、avi等。,3、網(wǎng)站的工作機(jī)制,當(dāng)用戶(hù)瀏覽器通過(guò)網(wǎng)絡(luò)向網(wǎng)站發(fā)出請(qǐng)求時(shí)，網(wǎng)站的Web服務(wù)器會(huì)根據(jù)瀏覽器請(qǐng)求的頁(yè)面是靜態(tài)、動(dòng)態(tài)網(wǎng)頁(yè)而采取不同的處理機(jī)制。 靜態(tài)網(wǎng)頁(yè)的處理機(jī)制：網(wǎng)站的Web服務(wù)器只是簡(jiǎn)單地將頁(yè)面發(fā)送到請(qǐng)求的瀏覽器。 動(dòng)態(tài)網(wǎng)頁(yè)的處理機(jī)制：Web服務(wù)器將控制權(quán)轉(zhuǎn)交給應(yīng)用程序服務(wù)器，應(yīng)用程序服務(wù)器解釋執(zhí)行網(wǎng)頁(yè)中包含的服務(wù)器端腳本代碼，并根據(jù)腳本代碼的要求訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)等服務(wù)器端資源，最后將計(jì)算結(jié)果 轉(zhuǎn)變?yōu)闃?biāo)準(zhǔn)的HTML文件代碼，由Web服務(wù)器將文件發(fā)送到瀏覽器。,二、網(wǎng)站設(shè)計(jì),網(wǎng)站的定位 站點(diǎn)風(fēng)格 網(wǎng)站的CI形象 網(wǎng)站的欄

4、目和版塊 網(wǎng)站目錄和鏈接結(jié)構(gòu),1、網(wǎng)站的定位,一個(gè)網(wǎng)站要有明確的目標(biāo)定位，只有定位準(zhǔn)確、目標(biāo)鮮明，才可能作出切實(shí)可行的計(jì)劃，按部就班地進(jìn)行設(shè)計(jì)。 網(wǎng)站的目標(biāo)定位可體現(xiàn)在三個(gè)方面： 題材和內(nèi)容：應(yīng)緊扣主題，并突出個(gè)性和特色。定位要準(zhǔn)確，內(nèi)容要精，不能過(guò)于寬泛，更不能包羅萬(wàn)象，漫無(wú)邊際。 網(wǎng)站域名 網(wǎng)站名稱(chēng)：申請(qǐng)好記的域名和命名一個(gè)別致的網(wǎng)站名稱(chēng)對(duì)網(wǎng)站的形象和宣傳推廣有很大影響。如：搜狐、新浪、網(wǎng)易、263等。,2、網(wǎng)站的風(fēng)格,風(fēng)格指的是站點(diǎn)的整體形象給瀏覽者的綜合感受，包括版面布局、瀏覽方式、交互性和文字等諸多因素。 網(wǎng)站風(fēng)格要體現(xiàn)自己的特色，獨(dú)樹(shù)一幟。 通過(guò)網(wǎng)站的某一點(diǎn)，如文字、色彩、技術(shù)等，

5、能讓瀏覽者明確分辨出此部分就是網(wǎng)站所獨(dú)有的。 注意： 風(fēng)格建立在有價(jià)值的內(nèi)容之上。網(wǎng)站有風(fēng)格而無(wú)內(nèi)容，是不行的，必須保證內(nèi)容的質(zhì)量和價(jià)值性； 清楚自己希望戰(zhàn)點(diǎn)留給瀏覽者的印象。,3、網(wǎng)站的CI形象,CI(corporate identity)：通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象。包括：標(biāo)志、色彩、字體和標(biāo)語(yǔ)。 網(wǎng)站的CI形象設(shè)計(jì)包括： 設(shè)計(jì)網(wǎng)站的標(biāo)志(logo)：logo是一個(gè)網(wǎng)站的特色和內(nèi)涵的集中體現(xiàn)，必須設(shè)計(jì)并制作網(wǎng)站的標(biāo)志。標(biāo)志的設(shè)計(jì)、創(chuàng)意來(lái)自該網(wǎng)站的名稱(chēng)和內(nèi)容，讓瀏覽者一看到標(biāo)志就聯(lián)想到這個(gè)網(wǎng)站。 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩： 不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪(fǎng)問(wèn)者的情緒。 標(biāo)準(zhǔn)色彩是指能體現(xiàn)

6、網(wǎng)站形象和延伸內(nèi)涵的色彩，主要用于標(biāo)志、標(biāo)題、主菜單和主色塊。 適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色：藍(lán)色、黃/橙色、黑/灰/白等,設(shè)計(jì)網(wǎng)站標(biāo)準(zhǔn)字體：是指用于標(biāo)志、標(biāo)題和主菜單的特有字體。 設(shè)計(jì)網(wǎng)站宣傳標(biāo)語(yǔ)：最好用一句話(huà)甚至是一個(gè)詞來(lái)高度概括,4、網(wǎng)站的欄目和版塊,制作網(wǎng)頁(yè)前，一定要先規(guī)劃好網(wǎng)站，確定合理的欄目和版塊。欄目實(shí)質(zhì)上是一個(gè)突出顯示網(wǎng)站主題的大綱索引。 設(shè)計(jì)網(wǎng)站的欄目時(shí)應(yīng)考慮以下內(nèi)容： 緊扣網(wǎng)站的主題 一般做法是將網(wǎng)站主題按一定的方法分類(lèi)并將其作為網(wǎng)站的主欄目，且主題欄目個(gè)數(shù)在總數(shù)上要占絕對(duì)優(yōu)勢(shì)。 設(shè)計(jì)一個(gè)最近更新或網(wǎng)站指南欄目 若主頁(yè)未安排版面放置最新更新內(nèi)容信息，需設(shè)置一個(gè)“最新更新”欄目，若主頁(yè)層

7、次較多，又無(wú)站內(nèi)搜索引擎，則應(yīng)設(shè)置一個(gè)“站點(diǎn)指南”欄目 設(shè)定一個(gè)可以雙向交流的欄目 設(shè)定論壇、留言簿或郵件列表等，讓瀏覽者留下信息或建議等。 版塊的概念比欄目大，每一個(gè)版塊都有自己的欄目。設(shè)置版塊時(shí)，注意各版塊要相對(duì)獨(dú)立，相互關(guān)聯(lián)，且版塊的內(nèi)容要圍繞站點(diǎn)的主題。,5、網(wǎng)站的目錄和鏈接結(jié)構(gòu),網(wǎng)站目錄是指建立網(wǎng)站時(shí)創(chuàng)建的目錄，站點(diǎn)上的所有網(wǎng)頁(yè)及相關(guān)資源都分門(mén)別類(lèi)、有序地存放在目錄中。 目錄結(jié)構(gòu)好壞對(duì)瀏覽者沒(méi)有太大影響，但對(duì)站點(diǎn)本身的上傳維護(hù)，內(nèi)容擴(kuò)充和移植有重要影響。,建議： 不要將所有文件都存放在根目錄下，會(huì)造成文件管理混亂，上傳速度慢等。應(yīng)盡量減少根目錄下的文件數(shù)； 按欄目?jī)?nèi)容建立子目錄： 子

8、目錄的建立應(yīng)基于主菜單欄目；需要經(jīng)常更新的欄目，可建立獨(dú)立的子目錄，相關(guān)性強(qiáng)，不需經(jīng)常更新的欄目，可合并放在一個(gè)統(tǒng)一的子目錄下。 所有程序文件應(yīng)放在特定目錄下 所有需要下載的文件最好放在一個(gè)目錄下 在每個(gè)主目錄下都建立 images 目錄 目錄的層次不要太深，一般不超過(guò)三層；,三、網(wǎng)站的開(kāi)發(fā)流程,網(wǎng)站的開(kāi)發(fā)人員（由一個(gè)集體來(lái)完成） 主導(dǎo)網(wǎng)站開(kāi)發(fā)的單位和客戶(hù) 項(xiàng)目負(fù)責(zé)人 美術(shù)動(dòng)畫(huà)設(shè)計(jì)人員 程序設(shè)計(jì)師 維護(hù)人員 網(wǎng)站開(kāi)發(fā)的流程 定義站點(diǎn) 建立網(wǎng)站結(jié)構(gòu) 設(shè)計(jì)和制作主頁(yè) 其它頁(yè)面制作 測(cè)試頁(yè)面 發(fā)布和維護(hù),1、定義站點(diǎn),明確建立網(wǎng)站的目的，確定網(wǎng)站提供的內(nèi)容，及搜集網(wǎng)站資料。 建立網(wǎng)站目的很多，如銷(xiāo)售

9、產(chǎn)品、樹(shù)立形象、提供信息或游戲娛樂(lè)等。目的一定要明確，否則會(huì)影響到以后的設(shè)計(jì)。 確定建立網(wǎng)站的目的：需要參與網(wǎng)站設(shè)計(jì)的各單位及成員一起構(gòu)思，討論，取得共識(shí)后確保開(kāi)發(fā)過(guò)程不會(huì)發(fā)生爭(zhēng)議，能夠有效地進(jìn)行網(wǎng)站建設(shè)。,確定網(wǎng)站內(nèi)容：網(wǎng)站內(nèi)容必須按照網(wǎng)站目的來(lái)選擇且不能有內(nèi)容越多越好的思想。應(yīng)該有所側(cè)重，與網(wǎng)站主題有關(guān)的內(nèi)容選擇相對(duì)多一點(diǎn)。 進(jìn)行資料的搜集：主要指文本、圖片、動(dòng)畫(huà)及背景音樂(lè)等。設(shè)計(jì)企業(yè)網(wǎng)站時(shí)，一般由客戶(hù)提供大部分資料，然后對(duì)資料進(jìn)行整理和篩選。,2、建立網(wǎng)站結(jié)構(gòu),規(guī)劃出網(wǎng)站的外觀及工作方式； 第一步就是建立網(wǎng)站結(jié)構(gòu)流程圖，圖中應(yīng)包括網(wǎng)站的所有關(guān)鍵頁(yè)面及與其它網(wǎng)頁(yè)的關(guān)系，技術(shù)要點(diǎn)和主要的鏈接

10、也應(yīng)在其中。 建立結(jié)構(gòu)時(shí)，可先繪制網(wǎng)站結(jié)構(gòu)的草圖，將所希望的網(wǎng)頁(yè)內(nèi)容全部加入進(jìn)去，然后與其它開(kāi)發(fā)人員一起研究討論， 最后確定網(wǎng)站結(jié)構(gòu)圖 注意事項(xiàng)：網(wǎng)頁(yè)的瀏覽線(xiàn)路是否流暢，是否能夠引導(dǎo)瀏覽者正確地瀏覽等,3、設(shè)計(jì)和制作主頁(yè),對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，主頁(yè)是至關(guān)重要。 主頁(yè)制作要先繪制一張草圖，圖中應(yīng)包括網(wǎng)站標(biāo)志、廣告條、菜單欄、友情鏈接等基本部件，且根據(jù)部件重要性合理布置。 主頁(yè)內(nèi)容一般是比較概括性文字，只是起一個(gè)引導(dǎo)性作用，文字不應(yīng)太多。 制作主頁(yè)時(shí)不要使用太多或容量太大的圖片和動(dòng)畫(huà)。太大將影響傳輸速度。,4、其它頁(yè)面制作：,其它頁(yè)面沒(méi)有主頁(yè)復(fù)雜，但方法相同。需要注意的問(wèn)題： 和主頁(yè)保持相同的風(fēng)格 要

11、有返回主頁(yè)的鏈接 目錄結(jié)構(gòu)不要超過(guò)三層,5、測(cè)試頁(yè)面,主要包括網(wǎng)頁(yè)的測(cè)試及網(wǎng)站的驗(yàn)證與調(diào)試； 測(cè)試網(wǎng)頁(yè)： 兼容性測(cè)試：檢查瀏覽器版本的兼容性 鏈接測(cè)試：檢查鏈接是否有效和正確 實(shí)地測(cè)試：將網(wǎng)頁(yè)上傳到Web服務(wù)器，測(cè)試鏈接，下載速度等。,網(wǎng)站的驗(yàn)證與測(cè)試： 盡最大努力找出網(wǎng)站的所有錯(cuò)誤。 注意網(wǎng)站的可瀏覽性，在不同瀏覽器中瀏覽的效果有所差異。最好在幾個(gè)不同的瀏覽器及不同版本中瀏覽測(cè)試。,6、發(fā)布和維護(hù),網(wǎng)站在服務(wù)器上發(fā)布-上傳網(wǎng)站 常用軟件： CuteFTP Flash FXP Leap FTP WS_FTP等 發(fā)布網(wǎng)站以后，還需要對(duì)網(wǎng)站做定期維護(hù)，如內(nèi)容更新和版面擴(kuò)展等。,四、常用網(wǎng)站開(kāi)發(fā)工具,FrontPage：Microsoft公司，最新版本2003 優(yōu)點(diǎn)：易學(xué)易用，圖形化界面，和Word相似 缺點(diǎn)：生成代碼過(guò)大 主要功能： 允許客戶(hù)使用圖片庫(kù)組件 類(lèi)似PowerPoint的圖形工具 通過(guò)瀏覽器遠(yuǎn)程管理一個(gè)SharePoint團(tuán)隊(duì)站點(diǎn) 使用分析報(bào)告追蹤訪(fǎng)客如何訪(fǎng)問(wèn)并使用網(wǎng)站 增強(qiáng)的發(fā)布功能 改進(jìn)的查找和替換 使用數(shù)據(jù)庫(kù)向?qū)?，用?hù)可在網(wǎng)頁(yè)上顯示數(shù)據(jù)庫(kù)內(nèi)容。,Dreamweaver MX: Macromedia 特點(diǎn)： 最佳的制作效率 網(wǎng)站管理 控制能力：提供代碼視圖、設(shè)計(jì)視圖與代碼/設(shè)計(jì)視圖切