網(wǎng)頁(yè)設(shè)計(jì)制作概述.ppt

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