一 網頁、網站的概念 二 Web標準 三 網站的規劃與設計 四 網站開發工作流程 五 網站策劃書撰寫要點 六 常用網頁制作軟件 七 實訓,第1章 網頁設計制作概述,1.1.1 網頁、網站和主頁 網頁（Web Page）是存放在Web服務器上供客戶端用戶瀏覽的文件，可以在Internet上傳輸。網頁是按照網頁文檔規范編寫的一個或多個文件，這種格式的文件由超文本標記語言創建，能將文字、圖片、聲音等各種多媒體文件組合在一起，這些文件被保存在特定計算機的特定目錄中。幾乎所有的網頁都包含鏈接，可以方便地跳轉到其他相關網頁或是相關網站。 網站由一組相關的HTML文件和其他文件組成，這些文件存儲在Web服務器上。當用戶訪問一個Web站點時，該站點中有一個頁面總是被首先打開，該頁面稱為首頁或主頁（一般為index.html或default.html）。,1.1 網頁、網站的概念,1.1.2 靜態網頁和動態網頁 按照Web服務器的響應方式的不同，可以將Web頁分為靜態網頁和動態網頁。 靜態網頁指客戶端的瀏覽器發送URL請求給WWW服務器，服務器查找需要的超文本文件，不加處理直接下載到客戶端，運行在客戶端的頁面是已經事先做好并存放在服務器中的網頁。其頁面的內容使用的僅僅是標準的HTML代碼，靜態網頁通常由純粹的HTML/CSS語言編寫。,1.1 網頁、網站的概念,1.1.2 靜態網頁和動態網頁 按照Web服務器的響應方式的不同，可以將Web頁分為靜態網頁和動態網頁。 靜態網頁指客戶端的瀏覽器發送URL請求給Web服務器，服務器查找需要的超文本文件，不加處理直接下載到客戶端，運行在客戶端的頁面是已經事先做好并存放在服務器中的網頁。,1.1 網頁、網站的概念,1.1.2 靜態網頁和動態網頁 動態網頁是指必須經過應用程序服務器處理后才能交給Web服務器送到客戶端進行顯示的網頁文件。這類網頁根據所采用的應用程序服務器不一樣，其文件名的擴展名也不一樣。可以是 hph，jsp，asp等等。 動態網頁技術根據程序運行的區域不同，分為客戶端動態技術與服務器端動態技術。 客戶端動態技術不需要與服務器進行交互，實現動態功能的代碼往往采用腳本語言形式直接嵌入到網頁中。服務器發送給瀏覽者后，網頁在客戶端瀏覽器上直接響應用戶的動作。常見的客戶端動態技術包括JavaScript、ActiveX和Flash等。,1.1 網頁、網站的概念,1.2.1 Web標準的概念 WEB標準不是某一個標準，而是一系列標準的集合。 網頁主要由三部分組成： 結構（Structure） 結構標準語言有： XML、XHTML 表現（Presentation） 表現標準語言有：CSS 行為（Behavior） 行為標準語言有：DOM、ECMAScript,1.2 Web標準,1.2.2 建立Web標準的目的 簡單地說，建立Web標準的目的是： 提供最大利益給最多的網站用戶； 確保任何網站文檔都能夠長期有效； 簡化代碼，降低建設成本； 讓網站更容易使用，能適應更多不同用戶和更多網絡設備； 當瀏覽器版本更新或者出現新的網絡交互設備時，確保所有應用能夠繼續正確執行。,1.2 Web標準,1.2.3 采用Web標準的優點 1客戶端的優點 文件下載與頁面顯示速度更快； 內容能被更多的用戶所訪問（包括失明、弱視、色盲等殘障人士）； 內容能被更廣泛的設備所訪問（包括屏幕閱讀機、手持設備、搜素機器人等）； 用戶能夠根據樣式選擇定制自己的表現界面； 所有頁面都能提供適于打印的版本。,1.2 Web標準,1.2.3 采用Web標準的優點 2服務器端的優點 更少的代碼和組件，容易維護； 帶寬要求降低（代碼更簡潔），成本降低； 更容易被搜尋引擎搜索到； 改版方便； 提供打印版本不需要復制內容。,1.2 Web標準,在建設網站之前，需要對網站進行一系列的分析和設計，然后根據分析的結果提出合理的建設方案，這就是網站的規劃與設計。 網站的規劃與設計一般應遵循以下三個原則： 最大限度地滿足用戶需要； 最有效地進行資源利用； 使用方便，界面友好，運行高效； 常規的規劃與設計方法一般有以下三種：自頂向下、自底向上、不斷增補的設計方法。,1.3 網站的規劃與設計,典型的Web開發工作流程包括以下幾個階段。 1）規劃站點：包括確立站點的策略或目標、確定所面向的用戶以及站點的數據需求。 2）設置開發環境：包括選擇Web應用程序服務器、利用Dreamweaver網頁制作軟件定義站點及數據源。 3）規劃頁面設計和布局：包括用繪畫工具創建頁面和界面模型，以及使用Dreamweaver、FrontPage布置頁面。 4）創建內容資源：包括使用Fireworks、Photoshop和Flash創建圖像、視頻等。 5）組合、測試和部署站點：包括使用Dreamweaver設置文本格式、編譯資源，測試代碼將站點發布到服務器上。 6）維護站點：包括使用Dreamweaver保持內容的更新。,1.4 網站開發工作流程,補充案例：暨南大學網站結構,1.4 網站開發工作流程,網站策劃書應該盡可能地涵蓋網站規劃中的各個方面，寫作要科學、認真、實事求是。以最常見的企業網站為例，介紹網站策劃書的撰寫要點。 1前期調研分析 2網站的功能定位 3網站技術解決方案 4網站內容規劃 5網頁設計 6網站維護 7網站測試 8網站發布與推廣 9網站設計日程表 10費用明細,1.5 網站策劃書撰寫要點,1.6 常用網頁制作軟件,1.6.1 網頁制作工具 網頁制作工具分為“可視化”和“非可視化”兩大類。“可視化”網頁編輯器的優點是直觀、使用方便、容易學習，在其中制作網頁與在Word中編輯相似，缺點是難以精確達到與瀏覽器完全一致的顯示效果。 “非可視化”的網頁編輯器，因為是用HTML代碼來設計的，所以控制精確，但是，工作效率太低。 1Dreamweaver 2FrontPage 3Adobe GoLive 4HomeSite 5Visual Studio 2005/2008,1.6 常用網頁制作軟件,1.6.2 網頁圖形圖像處理工具 使用網頁圖形圖像處理工具可以設計、處理適合網頁的圖形圖像。 1Fireworks 2Photoshop 3CorelDRAW,1.6 常用網頁制作軟件,1.6.3 網頁動畫制作與特效工具 隨著網絡速度的提高，越來越多的網頁中使用了動畫效果，這些動態顯示的畫面不僅吸引了瀏覽者的注意力，而且也給原本較呆板的畫面增添了不少生機。 1Flash 2Ulead GIF Animator,1.6 常用網頁制作軟件,1.6.4 網頁上傳工具 制作好的網頁要上傳到提供主頁空間的服務器后，才能讓瀏覽者訪問。上傳工具選擇合適與否將影響對網站更新維護的效率。 1CuteFTP 2FlashFXP 3LeapFTP 4其他上傳工具 （1）UploadNow!上傳工具 （2）WS-FTP上傳工具 Dreamweaver軟件自身也具有上傳網頁的功能。,1.6 常用網頁制作軟件,1.6.5 網頁設計工具的發展動向 2005年4月18日，全球知名的應用軟件公司Adobe以34億美元的價格收購了Macromedia公司，這次收購代表著多媒體產業領域的融合。隨著Adobe公司對Macromedia公司進行全新的整合，勢必推出更加強大的圖形網頁應用軟件，為圖形處理與網頁制作開創出新的空間。目前網頁制作中的HTML代碼與圖片都是單獨制作的，需要美工人員與網頁制作人員共同完成，但是，隨著兩家公司的合并，極有可能推出新的軟件，實現圖片與網頁的一體化操作，提高網頁制作的效率。 另外，Fireworks和ImageReady在未來的地位，也很有可能被已經強勢的Photoshop和Flash取代。,實訓一：規劃