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

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

3、可嵌入到網頁或以超級鏈接方式下載到用戶端執(zhí)行。如 swf、wma、rm、avi等。,3、網站的工作機制,當用戶瀏覽器通過網絡向網站發(fā)出請求時，網站的Web服務器會根據瀏覽器請求的頁面是靜態(tài)、動態(tài)網頁而采取不同的處理機制。 靜態(tài)網頁的處理機制：網站的Web服務器只是簡單地將頁面發(fā)送到請求的瀏覽器。 動態(tài)網頁的處理機制：Web服務器將控制權轉交給應用程序服務器，應用程序服務器解釋執(zhí)行網頁中包含的服務器端腳本代碼，并根據腳本代碼的要求訪問數據庫等服務器端資源，最后將計算結果 轉變?yōu)闃藴实腍TML文件代碼，由Web服務器將文件發(fā)送到瀏覽器。,二、網站設計,網站的定位 站點風格 網站的CI形象 網站的欄

4、目和版塊 網站目錄和鏈接結構,1、網站的定位,一個網站要有明確的目標定位，只有定位準確、目標鮮明，才可能作出切實可行的計劃，按部就班地進行設計。 網站的目標定位可體現在三個方面： 題材和內容：應緊扣主題，并突出個性和特色。定位要準確，內容要精，不能過于寬泛，更不能包羅萬象，漫無邊際。 網站域名 網站名稱：申請好記的域名和命名一個別致的網站名稱對網站的形象和宣傳推廣有很大影響。如：搜狐、新浪、網易、263等。,2、網站的風格,風格指的是站點的整體形象給瀏覽者的綜合感受，包括版面布局、瀏覽方式、交互性和文字等諸多因素。 網站風格要體現自己的特色，獨樹一幟。 通過網站的某一點，如文字、色彩、技術等，

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

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

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

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

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

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

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