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

1、第1章 網(wǎng)站設(shè)計(jì)概論,要求：,主要內(nèi)容 一、網(wǎng)站基本知識(shí) 二、網(wǎng)站設(shè)計(jì) 三、網(wǎng)站的開發(fā)流程 四、常用網(wǎng)站開發(fā)工具 本章習(xí)題,一、網(wǎng)站基本知識(shí),網(wǎng)站及其組成 網(wǎng)站的文件及資源 網(wǎng)站的工作機(jī)制,1、網(wǎng)站及其組成,網(wǎng)站就是由網(wǎng)頁、圖象、聲音、動(dòng)畫及數(shù)據(jù)庫等各種服務(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)頁文件、圖象文件、聲音文件等。 對網(wǎng)站進(jìn)行管理和維護(hù)的網(wǎng)站管理人員和開發(fā)人員等。,2、網(wǎng)站文件及資源,資源： 靜態(tài)網(wǎng)頁：最基本的網(wǎng)站提供內(nèi)容，由HTML語言描述，包括

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

3、可嵌入到網(wǎng)頁或以超級鏈接方式下載到用戶端執(zhí)行。如 swf、wma、rm、avi等。,3、網(wǎng)站的工作機(jī)制,當(dāng)用戶瀏覽器通過網(wǎng)絡(luò)向網(wǎng)站發(fā)出請求時(shí)，網(wǎng)站的Web服務(wù)器會(huì)根據(jù)瀏覽器請求的頁面是靜態(tài)、動(dòng)態(tài)網(wǎng)頁而采取不同的處理機(jī)制。 靜態(tài)網(wǎng)頁的處理機(jī)制：網(wǎng)站的Web服務(wù)器只是簡單地將頁面發(fā)送到請求的瀏覽器。 動(dòng)態(tài)網(wǎng)頁的處理機(jī)制：Web服務(wù)器將控制權(quán)轉(zhuǎn)交給應(yīng)用程序服務(wù)器，應(yīng)用程序服務(wù)器解釋執(zhí)行網(wǎng)頁中包含的服務(wù)器端腳本代碼，并根據(jù)腳本代碼的要求訪問數(shù)據(jù)庫等服務(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)容要精，不能過于寬泛，更不能包羅萬象，漫無邊際。 網(wǎng)站域名 網(wǎng)站名稱：申請好記的域名和命名一個(gè)別致的網(wǎng)站名稱對網(wǎng)站的形象和宣傳推廣有很大影響。如：搜狐、新浪、網(wǎng)易、263等。,2、網(wǎng)站的風(fēng)格,風(fēng)格指的是站點(diǎn)的整體形象給瀏覽者的綜合感受，包括版面布局、瀏覽方式、交互性和文字等諸多因素。 網(wǎng)站風(fēng)格要體現(xiàn)自己的特色，獨(dú)樹一幟。 通過網(wǎng)站的某一點(diǎn)，如文字、色彩、技術(shù)等，

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

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

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

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

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

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

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