版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、一 網(wǎng)頁、網(wǎng)站的概念二 Web標(biāo)準(zhǔn)三 網(wǎng)站的規(guī)劃與設(shè)計(jì)四 網(wǎng)站開發(fā)工作流程五 網(wǎng)站策劃書撰寫要點(diǎn)六 常用網(wǎng)頁制作軟件七 實(shí)訓(xùn),,第1章 網(wǎng)頁設(shè)計(jì)制作概述,1.1.1 網(wǎng)頁、網(wǎng)站和主頁 網(wǎng)頁(Web Page)是存放在Web服務(wù)器上供客戶端用戶瀏覽的文件,可以在Internet上傳輸。網(wǎng)頁是按照網(wǎng)頁文檔規(guī)范編寫的一個(gè)或多個(gè)文件,這種格式的文件由超文本標(biāo)記語言創(chuàng)建,能將文字、圖片、聲音等各種多媒體
2、文件組合在一起,這些文件被保存在特定計(jì)算機(jī)的特定目錄中。幾乎所有的網(wǎng)頁都包含鏈接,可以方便地跳轉(zhuǎn)到其他相關(guān)網(wǎng)頁或是相關(guān)網(wǎng)站。 網(wǎng)站由一組相關(guān)的HTML文件和其他文件組成,這些文件存儲(chǔ)在Web服務(wù)器上。當(dāng)用戶訪問一個(gè)Web站點(diǎn)時(shí),該站點(diǎn)中有一個(gè)頁面總是被首先打開,該頁面稱為首頁或主頁(一般為index.html或default.html)。,,1.1 網(wǎng)頁、網(wǎng)站的概念,1.1.2 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁按照Web服務(wù)器的
3、響應(yīng)方式的不同,可以將Web頁分為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。 靜態(tài)網(wǎng)頁指客戶端的瀏覽器發(fā)送URL請求給WWW服務(wù)器,服務(wù)器查找需要的超文本文件,不加處理直接下載到客戶端,運(yùn)行在客戶端的頁面是已經(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)頁和動(dòng)態(tài)網(wǎng)頁按照Web服務(wù)器的響應(yīng)方式的不同,可以將Web頁分為靜態(tài)網(wǎng)頁和
4、動(dòng)態(tài)網(wǎng)頁。 靜態(tài)網(wǎng)頁指客戶端的瀏覽器發(fā)送URL請求給Web服務(wù)器,服務(wù)器查找需要的超文本文件,不加處理直接下載到客戶端,運(yùn)行在客戶端的頁面是已經(jīng)事先做好并存放在服務(wù)器中的網(wǎng)頁。,,1.1 網(wǎng)頁、網(wǎng)站的概念,1.1.2 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁是指必須經(jīng)過應(yīng)用程序服務(wù)器處理后才能交給Web服務(wù)器送到客戶端進(jìn)行顯示的網(wǎng)頁文件。這類網(wǎng)頁根據(jù)所采用的應(yīng)用程序服務(wù)器不一樣,其文件名的擴(kuò)展名也不一樣??梢允?hph,jsp,asp等等。
5、動(dòng)態(tài)網(wǎng)頁技術(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)功能的代碼往往采用腳本語言形式直接嵌入到網(wǎng)頁中。服務(wù)器發(fā)送給瀏覽者后,網(wǎng)頁在客戶端瀏覽器上直接響應(yīng)用戶的動(dòng)作。常見的客戶端動(dò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)不是某一個(gè)標(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è)備時(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) 文件下載與頁面顯示速度更快; 內(nèi)容能被更多的用戶所訪問(包括失明、弱視、色盲等殘障人士);內(nèi)容能被更廣泛的設(shè)備所訪問(包括屏幕閱讀機(jī)、手持設(shè)備、搜素機(jī)器人等);用戶能夠根據(jù)樣式選擇定制自己的表現(xiàn)界面;所有頁面都能提供適于打
8、印的版本。,,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ù);帶寬要求降低(代碼更簡潔),成本降低;更容易被搜尋引擎搜索到;改版方便;提供打印版本不需要復(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è)原則:? 最大限度地
9、滿足用戶需要;? 最有效地進(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)頁制作軟件定義站點(diǎn)及數(shù)據(jù)源。3)規(guī)劃頁
10、面設(shè)計(jì)和布局:包括用繪畫工具創(chuàng)建頁面和界面模型,以及使用Dreamweaver、FrontPage布置頁面。4)創(chuàng)建內(nèi)容資源:包括使用Fireworks、Photoshop和Flash創(chuàng)建圖像、視頻等。5)組合、測試和部署站點(diǎn):包括使用Dreamweaver設(shè)置文本格式、編譯資源,測試代碼將站點(diǎn)發(fā)布到服務(wù)器上。6)維護(hù)站點(diǎn):包括使用Dreamweaver保持內(nèi)容的更新。,,1.4 網(wǎng)站開發(fā)工作流程,補(bǔ)充案例:暨南大學(xué)網(wǎng)站結(jié)構(gòu),,
11、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)頁設(shè)計(jì)6.網(wǎng)站維護(hù)7.網(wǎng)站測試8.網(wǎng)站發(fā)布與推廣9.網(wǎng)站設(shè)計(jì)日程表10.費(fèi)用明細(xì),,1.5 網(wǎng)站策劃書撰寫要點(diǎn),,1.6 常用網(wǎng)頁制作軟件,1.6.1 網(wǎng)頁制作工具 網(wǎng)頁
12、制作工具分為“可視化”和“非可視化”兩大類?!翱梢暬本W(wǎng)頁編輯器的優(yōu)點(diǎn)是直觀、使用方便、容易學(xué)習(xí),在其中制作網(wǎng)頁與在Word中編輯相似,缺點(diǎn)是難以精確達(dá)到與瀏覽器完全一致的顯示效果。 “非可視化”的網(wǎng)頁編輯器,因?yàn)槭怯肏TML代碼來設(shè)計(jì)的,所以控制精確,但是,工作效率太低。1.Dreamweaver2.FrontPage3.Adobe GoLive4.HomeSite5.Visual Studio 2005/2008,,1.6
13、 常用網(wǎng)頁制作軟件,1.6.2 網(wǎng)頁圖形圖像處理工具 使用網(wǎng)頁圖形圖像處理工具可以設(shè)計(jì)、處理適合網(wǎng)頁的圖形圖像。1.Fireworks2.Photoshop3.CorelDRAW,,1.6 常用網(wǎng)頁制作軟件,1.6.3 網(wǎng)頁動(dòng)畫制作與特效工具 隨著網(wǎng)絡(luò)速度的提高,越來越多的網(wǎng)頁中使用了動(dòng)畫效果,這些動(dòng)態(tài)顯示的畫面不僅吸引了瀏覽者的注意力,而且也給原本較呆板的畫面增添了不少生機(jī)。1.Flash
14、2.Ulead GIF Animator,,1.6 常用網(wǎng)頁制作軟件,1.6.4 網(wǎng)頁上傳工具 制作好的網(wǎng)頁要上傳到提供主頁空間的服務(wù)器后,才能讓瀏覽者訪問。上傳工具選擇合適與否將影響對(duì)網(wǎng)站更新維護(hù)的效率。1.CuteFTP2.FlashFXP3.LeapFTP4.其他上傳工具(1)UploadNow!上傳工具(2)WS-FTP上傳工具Dreamweaver軟件自身也具有上傳網(wǎng)頁的功能。,,1.6
15、常用網(wǎng)頁制作軟件,1.6.5 網(wǎng)頁設(shè)計(jì)工具的發(fā)展動(dòng)向 2005年4月18日,全球知名的應(yīng)用軟件公司Adobe以34億美元的價(jià)格收購了Macromedia公司,這次收購代表著多媒體產(chǎn)業(yè)領(lǐng)域的融合。隨著Adobe公司對(duì)Macromedia公司進(jìn)行全新的整合,勢必推出更加強(qiáng)大的圖形網(wǎng)頁應(yīng)用軟件,為圖形處理與網(wǎng)頁制作開創(chuàng)出新的空間。目前網(wǎng)頁制作中的HTML代碼與圖片都是單獨(dú)制作的,需要美工人員與網(wǎng)頁制作人員共同完成,但是,隨著
16、兩家公司的合并,極有可能推出新的軟件,實(shí)現(xiàn)圖片與網(wǎng)頁的一體化操作,提高網(wǎng)頁制作的效率。 另外,F(xiàn)ireworks和ImageReady在未來的地位,也很有可能被已經(jīng)強(qiáng)勢的Photoshop和Flash取代。,實(shí)訓(xùn)一:規(guī)劃“愛家美食”網(wǎng)站【實(shí)訓(xùn)綜述】規(guī)劃“愛家美食”網(wǎng)站的結(jié)構(gòu)?!緦?shí)訓(xùn)展示】網(wǎng)站的導(dǎo)航條,讀者可在此基礎(chǔ)上畫出網(wǎng)站的欄目結(jié)構(gòu)圖。,,1.7 實(shí)訓(xùn),1.簡述網(wǎng)頁、網(wǎng)站和主頁的異同。2.Web標(biāo)準(zhǔn)主要由哪3部分
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 眾賞文庫僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 網(wǎng)頁制作概述
- 《網(wǎng)頁設(shè)計(jì)與制作》第一章網(wǎng)頁制作基礎(chǔ)
- [學(xué)習(xí)]網(wǎng)頁設(shè)計(jì)與制作教程
- 《網(wǎng)頁設(shè)計(jì)與制作》第一章網(wǎng)頁制作基礎(chǔ) (1)
- [學(xué)習(xí)]網(wǎng)頁設(shè)計(jì)與制作第12章flash基礎(chǔ)
- 項(xiàng)目1 網(wǎng)頁制作基礎(chǔ)知識(shí)答案【網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程】
- 網(wǎng)頁設(shè)計(jì)制作規(guī)范
- [學(xué)習(xí)]網(wǎng)頁美工_網(wǎng)頁布局設(shè)計(jì)
- 網(wǎng)頁制作基礎(chǔ)試題
- 《網(wǎng)頁設(shè)計(jì)與制作》教案
- 網(wǎng)頁設(shè)計(jì)與制作(b)
- 網(wǎng)頁設(shè)計(jì)畢業(yè)論文--網(wǎng)頁設(shè)計(jì)制作與論壇的開發(fā)
- 《簡單網(wǎng)頁制作》教學(xué)設(shè)計(jì)
- 網(wǎng)頁制作與設(shè)計(jì)教案
- 網(wǎng)頁制作和網(wǎng)站設(shè)計(jì)
- 論文-網(wǎng)頁設(shè)計(jì)及制作
- 網(wǎng)頁設(shè)計(jì)與制作畢業(yè)設(shè)計(jì)
- 網(wǎng)頁制作畢業(yè)設(shè)計(jì)論文
- 美食網(wǎng)頁設(shè)計(jì)與制作
- 網(wǎng)頁制作畢業(yè)設(shè)計(jì)論文
評(píng)論
0/150
提交評(píng)論