[學(xué)習(xí)]網(wǎng)頁設(shè)計的基礎(chǔ)-網(wǎng)頁設(shè)計制作概述

1、一 網(wǎng)頁、網(wǎng)站的概念二 Web標(biāo)準(zhǔn)三 網(wǎng)站的規(guī)劃與設(shè)計四 網(wǎng)站開發(fā)工作流程五 網(wǎng)站策劃書撰寫要點六 常用網(wǎng)頁制作軟件七 實訓(xùn),,第1章 網(wǎng)頁設(shè)計制作概述,1.1.1 網(wǎng)頁、網(wǎng)站和主頁 網(wǎng)頁（Web Page）是存放在Web服務(wù)器上供客戶端用戶瀏覽的文件，可以在Internet上傳輸。網(wǎng)頁是按照網(wǎng)頁文檔規(guī)范編寫的一個或多個文件，這種格式的文件由超文本標(biāo)記語言創(chuàng)建，能將文字、圖片、聲音等各種多媒體

2、文件組合在一起，這些文件被保存在特定計算機的特定目錄中。幾乎所有的網(wǎng)頁都包含鏈接，可以方便地跳轉(zhuǎn)到其他相關(guān)網(wǎng)頁或是相關(guān)網(wǎng)站。 網(wǎng)站由一組相關(guān)的HTML文件和其他文件組成，這些文件存儲在Web服務(wù)器上。當(dāng)用戶訪問一個Web站點時，該站點中有一個頁面總是被首先打開，該頁面稱為首頁或主頁（一般為index.html或default.html）。,,1.1 網(wǎng)頁、網(wǎng)站的概念,1.1.2 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁按照Web服務(wù)器的

3、響應(yīng)方式的不同，可以將Web頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。 靜態(tài)網(wǎng)頁指客戶端的瀏覽器發(fā)送URL請求給WWW服務(wù)器，服務(wù)器查找需要的超文本文件，不加處理直接下載到客戶端，運行在客戶端的頁面是已經(jīng)事先做好并存放在服務(wù)器中的網(wǎng)頁。其頁面的內(nèi)容使用的僅僅是標(biāo)準(zhǔn)的HTML代碼，靜態(tài)網(wǎng)頁通常由純粹的HTML/CSS語言編寫。,,1.1 網(wǎng)頁、網(wǎng)站的概念,1.1.2 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁按照Web服務(wù)器的響應(yīng)方式的不同，可以將Web頁分為靜態(tài)網(wǎng)頁和

4、動態(tài)網(wǎng)頁。 靜態(tài)網(wǎng)頁指客戶端的瀏覽器發(fā)送URL請求給Web服務(wù)器，服務(wù)器查找需要的超文本文件，不加處理直接下載到客戶端，運行在客戶端的頁面是已經(jīng)事先做好并存放在服務(wù)器中的網(wǎng)頁。,,1.1 網(wǎng)頁、網(wǎng)站的概念,1.1.2 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁是指必須經(jīng)過應(yīng)用程序服務(wù)器處理后才能交給Web服務(wù)器送到客戶端進行顯示的網(wǎng)頁文件。這類網(wǎng)頁根據(jù)所采用的應(yīng)用程序服務(wù)器不一樣，其文件名的擴展名也不一樣?？梢允?hph，jsp，asp等等。

5、動態(tài)網(wǎng)頁技術(shù)根據(jù)程序運行的區(qū)域不同，分為客戶端動態(tài)技術(shù)與服務(wù)器端動態(tài)技術(shù)。 客戶端動態(tài)技術(shù)不需要與服務(wù)器進行交互，實現(xiàn)動態(tài)功能的代碼往往采用腳本語言形式直接嵌入到網(wǎng)頁中。服務(wù)器發(fā)送給瀏覽者后，網(wǎng)頁在客戶端瀏覽器上直接響應(yīng)用戶的動作。常見的客戶端動態(tài)技術(shù)包括JavaScript、ActiveX和Flash等。,,1.1 網(wǎng)頁、網(wǎng)站的概念,1.2.1 Web標(biāo)準(zhǔn)的概念WEB標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁

6、主要由三部分組成： 結(jié)構(gòu)（Structure）結(jié)構(gòu)標(biāo)準(zhǔn)語言有： XML、XHTML表現(xiàn)（Presentation）表現(xiàn)標(biāo)準(zhǔn)語言有：CSS行為（Behavior）行為標(biāo)準(zhǔn)語言有：DOM、ECMAScript,,1.2 Web標(biāo)準(zhǔn),1.2.2 建立Web標(biāo)準(zhǔn)的目的 簡單地說，建立Web標(biāo)準(zhǔn)的目的是： 提供最大利益給最多的網(wǎng)站用戶； 確保任何網(wǎng)站文檔都能夠長期有效； 簡化代碼，降低建設(shè)成本； 讓網(wǎng)

7、站更容易使用，能適應(yīng)更多不同用戶和更多網(wǎng)絡(luò)設(shè)備； 當(dāng)瀏覽器版本更新或者出現(xiàn)新的網(wǎng)絡(luò)交互設(shè)備時，確保所有應(yīng)用能夠繼續(xù)正確執(zhí)行。,,1.2 Web標(biāo)準(zhǔn),1.2.3 采用Web標(biāo)準(zhǔn)的優(yōu)點 1．客戶端的優(yōu)點 文件下載與頁面顯示速度更快； 內(nèi)容能被更多的用戶所訪問（包括失明、弱視、色盲等殘障人士）；內(nèi)容能被更廣泛的設(shè)備所訪問（包括屏幕閱讀機、手持設(shè)備、搜素機器人等）；用戶能夠根據(jù)樣式選擇定制自己的表現(xiàn)界面；所有頁面都能提供適于打

8、印的版本。,,1.2 Web標(biāo)準(zhǔn),1.2.3 采用Web標(biāo)準(zhǔn)的優(yōu)點2．服務(wù)器端的優(yōu)點更少的代碼和組件，容易維護；帶寬要求降低（代碼更簡潔），成本降低；更容易被搜尋引擎搜索到；改版方便；提供打印版本不需要復(fù)制內(nèi)容。,,1.2 Web標(biāo)準(zhǔn),在建設(shè)網(wǎng)站之前，需要對網(wǎng)站進行一系列的分析和設(shè)計，然后根據(jù)分析的結(jié)果提出合理的建設(shè)方案，這就是網(wǎng)站的規(guī)劃與設(shè)計。 網(wǎng)站的規(guī)劃與設(shè)計一般應(yīng)遵循以下三個原則：? 最大限度地

9、滿足用戶需要；? 最有效地進行資源利用；? 使用方便，界面友好，運行高效； 常規(guī)的規(guī)劃與設(shè)計方法一般有以下三種：自頂向下、自底向上、不斷增補的設(shè)計方法。,,1.3 網(wǎng)站的規(guī)劃與設(shè)計,典型的Web開發(fā)工作流程包括以下幾個階段。1）規(guī)劃站點：包括確立站點的策略或目標(biāo)、確定所面向的用戶以及站點的數(shù)據(jù)需求。2）設(shè)置開發(fā)環(huán)境：包括選擇Web應(yīng)用程序服務(wù)器、利用Dreamweaver網(wǎng)頁制作軟件定義站點及數(shù)據(jù)源。3）規(guī)劃頁

10、面設(shè)計和布局：包括用繪畫工具創(chuàng)建頁面和界面模型，以及使用Dreamweaver、FrontPage布置頁面。4）創(chuàng)建內(nèi)容資源：包括使用Fireworks、Photoshop和Flash創(chuàng)建圖像、視頻等。5）組合、測試和部署站點：包括使用Dreamweaver設(shè)置文本格式、編譯資源，測試代碼將站點發(fā)布到服務(wù)器上。6）維護站點：包括使用Dreamweaver保持內(nèi)容的更新。,,1.4 網(wǎng)站開發(fā)工作流程,補充案例：暨南大學(xué)網(wǎng)站結(jié)構(gòu),,

11、1.4 網(wǎng)站開發(fā)工作流程,網(wǎng)站策劃書應(yīng)該盡可能地涵蓋網(wǎng)站規(guī)劃中的各個方面，寫作要科學(xué)、認(rèn)真、實事求是。以最常見的企業(yè)網(wǎng)站為例，介紹網(wǎng)站策劃書的撰寫要點。1．前期調(diào)研分析2．網(wǎng)站的功能定位3．網(wǎng)站技術(shù)解決方案4．網(wǎng)站內(nèi)容規(guī)劃5．網(wǎng)頁設(shè)計6．網(wǎng)站維護7．網(wǎng)站測試8．網(wǎng)站發(fā)布與推廣9．網(wǎng)站設(shè)計日程表10．費用明細(xì),,1.5 網(wǎng)站策劃書撰寫要點,,1.6 常用網(wǎng)頁制作軟件,1.6.1 網(wǎng)頁制作工具 網(wǎng)頁

12、制作工具分為“可視化”和“非可視化”兩大類?！翱梢暬本W(wǎng)頁編輯器的優(yōu)點是直觀、使用方便、容易學(xué)習(xí)，在其中制作網(wǎng)頁與在Word中編輯相似，缺點是難以精確達到與瀏覽器完全一致的顯示效果。 “非可視化”的網(wǎng)頁編輯器，因為是用HTML代碼來設(shè)計的，所以控制精確，但是，工作效率太低。1．Dreamweaver2．FrontPage3．Adobe GoLive4．HomeSite5．Visual Studio 2005/2008,,1.6

13、 常用網(wǎng)頁制作軟件,1.6.2 網(wǎng)頁圖形圖像處理工具 使用網(wǎng)頁圖形圖像處理工具可以設(shè)計、處理適合網(wǎng)頁的圖形圖像。1．Fireworks2．Photoshop3．CorelDRAW,,1.6 常用網(wǎng)頁制作軟件,1.6.3 網(wǎng)頁動畫制作與特效工具 隨著網(wǎng)絡(luò)速度的提高，越來越多的網(wǎng)頁中使用了動畫效果，這些動態(tài)顯示的畫面不僅吸引了瀏覽者的注意力，而且也給原本較呆板的畫面增添了不少生機。1．Flash

14、2．Ulead GIF Animator,,1.6 常用網(wǎng)頁制作軟件,1.6.4 網(wǎng)頁上傳工具 制作好的網(wǎng)頁要上傳到提供主頁空間的服務(wù)器后，才能讓瀏覽者訪問。上傳工具選擇合適與否將影響對網(wǎng)站更新維護的效率。1．CuteFTP2．FlashFXP3．LeapFTP4．其他上傳工具（1）UploadNow!上傳工具（2）WS-FTP上傳工具Dreamweaver軟件自身也具有上傳網(wǎng)頁的功能。,,1.6

15、常用網(wǎng)頁制作軟件,1.6.5 網(wǎng)頁設(shè)計工具的發(fā)展動向 2005年4月18日，全球知名的應(yīng)用軟件公司Adobe以34億美元的價格收購了Macromedia公司，這次收購代表著多媒體產(chǎn)業(yè)領(lǐng)域的融合。隨著Adobe公司對Macromedia公司進行全新的整合，勢必推出更加強大的圖形網(wǎng)頁應(yīng)用軟件，為圖形處理與網(wǎng)頁制作開創(chuàng)出新的空間。目前網(wǎng)頁制作中的HTML代碼與圖片都是單獨制作的，需要美工人員與網(wǎng)頁制作人員共同完成，但是，隨著

16、兩家公司的合并，極有可能推出新的軟件，實現(xiàn)圖片與網(wǎng)頁的一體化操作，提高網(wǎng)頁制作的效率。 另外，F(xiàn)ireworks和ImageReady在未來的地位，也很有可能被已經(jīng)強勢的Photoshop和Flash取代。,實訓(xùn)一：規(guī)劃“愛家美食”網(wǎng)站【實訓(xùn)綜述】規(guī)劃“愛家美食”網(wǎng)站的結(jié)構(gòu)。【實訓(xùn)展示】網(wǎng)站的導(dǎo)航條，讀者可在此基礎(chǔ)上畫出網(wǎng)站的欄目結(jié)構(gòu)圖。,,1.7 實訓(xùn),1．簡述網(wǎng)頁、網(wǎng)站和主頁的異同。2．Web標(biāo)準(zhǔn)主要由哪3部分