《網(wǎng)頁制作基礎(chǔ)》PPT課件.ppt

1、網(wǎng)頁制作,第1章 網(wǎng)頁基礎(chǔ),第1章 網(wǎng)頁基礎(chǔ),1.1 Internet 1.2 WWW 1.3 網(wǎng)站與網(wǎng)頁 1.4 Web標(biāo)準(zhǔn),1.1 Internet,Internet，中文正式譯名為因特網(wǎng)，又叫做國際互聯(lián)網(wǎng)。 Internet以相互交流信息資源為目的，由許多小的網(wǎng)絡(luò)（局域網(wǎng)、城域網(wǎng)或廣域網(wǎng)）基于TCP/IP協(xié)議，并通過路由器互聯(lián)而成。 Internet是傳播數(shù)據(jù)的載體，是提供應(yīng)用服務(wù)的平臺。常見的Internet基本應(yīng)用服務(wù)為WWW服務(wù)、E-mail服務(wù)、FTP服務(wù)和Telnet服務(wù)等。,1.2 WWW,WWW是 World Wide Web （環(huán)球信息網(wǎng)）的縮寫，也可以簡稱為 Web，中

2、文名字為“萬維網(wǎng)”。 它起源于1989年3月，由歐洲量子物理實驗室 CERN的蒂姆伯納斯李（ Tim Berners-Lee）開發(fā)的主從結(jié)構(gòu)分布式超媒體系統(tǒng)。它為用戶提供了一個可以輕松駕馭的圖形化界面，用戶通過它可以便捷存取Internet上的信息資源。,1.2 WWW,1.2.1 WWW工作原理 1.2.2 WWW服務(wù)器 1.2.3 WWW客戶端 1.2.4 W3C,1.2.1 WWW工作原理,WWW采用客戶端/服務(wù)器（Client/Server）結(jié)構(gòu)，其作用是整理和儲存各種WWW資源，并響應(yīng)客戶端軟件的請求，將相關(guān)資源數(shù)據(jù)傳送到客戶端。,WWW服務(wù)器和客戶端之間主要采用TCP/IP協(xié)議的應(yīng)

3、用層協(xié)議Http協(xié)議進(jìn)行通訊。 WWW服務(wù)器和客戶端指的不是硬件設(shè)備，而是相關(guān)軟件。,1.2.2 WWW服務(wù)器,WWW服務(wù)器軟件主要功能是存儲、管理和提供WWW信息資源，可以同時響應(yīng)多個客戶訪問請求。WWW服務(wù)器上的每一項資源都采用URL（統(tǒng)一資源定位符）進(jìn)行標(biāo)示，常采用后臺數(shù)據(jù)庫進(jìn)行存儲管理。,URL由四部分組成，它的一般格式是: 方式:/主機名/路徑/文件名 方式：指數(shù)據(jù)的傳輸方式，通常稱為傳輸協(xié)議。 主機名：指計算機的地址，可以是IP地址，也可以是域名地址。 路徑：指信息資源在WWW服務(wù)器上的存放位置。 文件名：所請求資源的具體文件名稱。,例如： 方式：http協(xié)議 主機名： 路徑：/1

4、 文件名：a.html,常見WWW服務(wù)器軟件為IIS和Apache。 不同WWW服務(wù)器軟件提供的功能、支持和服務(wù)有所區(qū)別。,1.2.3 WWW客戶端,WWW客戶端軟件主要以Web瀏覽器為主。Web瀏覽器可向WWW服務(wù)器發(fā)送訪問請求，并對從WWW服務(wù)器發(fā)回的數(shù)據(jù)信息進(jìn)行解釋和顯示，數(shù)據(jù)信息主要是網(wǎng)頁形式。 常見的Web瀏覽器軟件有：IE、Firefox、Opera和Netcape等。 不同Web瀏覽器軟件所支持的網(wǎng)頁格式有所區(qū)別，所以WWW服務(wù)器提供網(wǎng)頁信息時，要考慮客戶端軟件的支持情況。,1.2.4 W3C,W3C是英文 World Wide Web Consortium 的縮寫，中文意思是W

5、3C理事會或萬維網(wǎng)聯(lián)盟。W3C于1994年10月在麻省理工學(xué)院計算機科學(xué)實驗室成立。創(chuàng)建者是萬維網(wǎng)的發(fā)明者Tim Berners-Lee。 W3C組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個非贏利組織，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來定制。,W3C會員（大約500名會員）包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商、內(nèi)容供應(yīng)商、團(tuán)體用戶、研究實驗室、標(biāo)準(zhǔn)制定機構(gòu)和政府部門，一起協(xié)同工作，致力在萬維網(wǎng)發(fā)展方向上達(dá)成共識。,1.3 網(wǎng)站與網(wǎng)頁,1.3.1 網(wǎng)站 1.3.2 網(wǎng)頁 1.3.3 開發(fā)工具,1.3.1 網(wǎng)站,1. 網(wǎng)站 2. 網(wǎng)站分類 3. 建設(shè)網(wǎng)站考慮因素,1. 網(wǎng)站,網(wǎng)站（Website），

6、就是指在Internet上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。 簡單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊（信息），或者利用網(wǎng)站來提供相關(guān)的網(wǎng)路服務(wù)（網(wǎng)絡(luò)服務(wù)）。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)路服務(wù)。,常見網(wǎng)站由域名（domain name 俗稱網(wǎng)址或域名）、網(wǎng)站源程序和網(wǎng)站空間三部分構(gòu)成。 域名俗稱網(wǎng)址； 網(wǎng)站源程序則放在網(wǎng)站空間里面，表現(xiàn)為網(wǎng)站前臺和網(wǎng)站后臺； 網(wǎng)站空間由專門的獨立服務(wù)器或租用的虛擬主機承擔(dān)。,2. 網(wǎng)站分類,根據(jù)網(wǎng)站所用編程語言分類：例如asp網(wǎng)站、

7、php網(wǎng)站、jsp網(wǎng)站、Asp. net網(wǎng)站等； 根據(jù)網(wǎng)站的用途分類：例如門戶網(wǎng)站（綜合網(wǎng)站）、行業(yè)網(wǎng)站、娛樂網(wǎng)站等； 根據(jù)網(wǎng)站的功能分類：例如單一網(wǎng)站（企業(yè)網(wǎng)站）、多功能網(wǎng)站（網(wǎng)絡(luò)商城）等； 根據(jù)網(wǎng)站的持有者分類：例如個人網(wǎng)站、商業(yè)網(wǎng)站，政府網(wǎng)站等；,根據(jù)網(wǎng)站的商業(yè)目的分類：營利型網(wǎng)站（行業(yè)網(wǎng)站、論壇）、非營利性型網(wǎng)站（企業(yè)網(wǎng)站、政府網(wǎng)站）； 網(wǎng)站搜索（百度，谷歌，必應(yīng)等）。,3. 建設(shè)網(wǎng)站考慮因素,（1）網(wǎng)站的客戶服務(wù)群體； （2）網(wǎng)站的內(nèi)容方向和性質(zhì)； （3）網(wǎng)站的功能描述和結(jié)構(gòu)分析； （4）網(wǎng)站的用戶體驗； （5）網(wǎng)站的盈利方式； （6）網(wǎng)站的未來發(fā)展方向。,1.3.2 網(wǎng)頁,網(wǎng)頁（W

8、eb Page）是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。通俗的說，網(wǎng)站是由網(wǎng)頁組成的，而網(wǎng)頁就是網(wǎng)站中的一“頁”內(nèi)容。 網(wǎng)頁實際是一個文件，通常是HTML格式（文件擴展名為.html、.htm、.asp、.aspx、.php或.jsp等），通過URL來識別與存取。Web瀏覽器發(fā)送訪問請求，WWW服務(wù)器處理請求后將結(jié)果以網(wǎng)頁方式傳送到客戶端，Web瀏覽器解釋網(wǎng)頁的內(nèi)容，并展示到客戶端屏幕上。,網(wǎng)頁構(gòu)成的元素主要有：文本、圖像、鏈接、表格、表單、動畫、音頻和視頻等。 文本和圖像是網(wǎng)頁中的信息主體，鏈接是網(wǎng)頁的靈魂。,1.3.3 開發(fā)工具,網(wǎng)頁初學(xué)者常用的網(wǎng)站開發(fā)工具是Adobe公司的Dre

9、amweaver軟件和微軟公司的FrontPage軟件。它們都是“所見即所得”（WYSIWYG）的編輯工具，也提供了網(wǎng)頁代碼編輯方式。 其他的還有一些輔助軟件：圖形處理軟件PhotoShop、Fireworks，動畫處理軟件Flash等。,1.4 Web標(biāo)準(zhǔn),20世紀(jì)60年代末，IBM公司的一些專家提出并制定了GML（generalized markup language），即通用標(biāo)記語言。在以后的八年時間里，又在GML的基礎(chǔ)上建立了SGML（standard generalized markup language），即標(biāo)準(zhǔn)通用標(biāo)記語言，而且被國際標(biāo)準(zhǔn)化組織ISO于1986年批準(zhǔn)采用。 現(xiàn)在網(wǎng)

10、站開發(fā)常用的HTML（超文本標(biāo)記語言），就是基于SGML的一個應(yīng)用。,Web標(biāo)準(zhǔn)中的大部分由W3C組織起草并發(fā)布，另一部分是由其他組織所制定。 Web標(biāo)準(zhǔn)中對頁面內(nèi)容的組織需要“結(jié)構(gòu)標(biāo)準(zhǔn)語言”來完成；頁面的樣式由“表現(xiàn)標(biāo)準(zhǔn)語言”來控制；對頁面內(nèi)容的交互性操作由“行為標(biāo)準(zhǔn)語言”來控制。,1.4 Web標(biāo)準(zhǔn),1.4.1 結(jié)構(gòu)標(biāo)準(zhǔn)語言 1.4.2 表現(xiàn)標(biāo)準(zhǔn)語言 1.4.3 行為標(biāo)準(zhǔn)語言,1.4.1 結(jié)構(gòu)標(biāo)準(zhǔn)語言,結(jié)構(gòu)標(biāo)準(zhǔn)語言主要用于描述頁面中的信息內(nèi)容，并對內(nèi)容進(jìn)行整理和規(guī)劃，在Web標(biāo)準(zhǔn)技術(shù)中用于組織結(jié)構(gòu)的語言主要包括HTML、XML、XHTML等。,1. HTML,HTML（hypertext

11、markup language）即超文本標(biāo)記語言，是利用SGML定義的一種標(biāo)記語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。 HTML是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。,瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯的標(biāo)記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會有不完全相同的解

12、釋，因而可能會有不同的顯示效果。,HTML之所以稱為超文本標(biāo)記語言，是因為文本中包含了所謂“超級鏈接”點。所謂超級鏈接，就是一種URL指針，通過激活（點擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。 由此可見，網(wǎng)頁的本質(zhì)就是HTML，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、CGI、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，HTML是Web編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。,2. XML,XML（the extensible markup language）即可擴展標(biāo)記語言，是SGML的一個子集，也是一種可以定義其他語言的語言。XML最

13、初設(shè)計的目的是彌補HTML的不足，以強大的擴展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，現(xiàn)在逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。,3. XHTML,XHTML （the extensible hypertext markup language）即可擴展超文本標(biāo)記語言，是在HTML的基礎(chǔ)上結(jié)合了部分XML的強大功能，而創(chuàng)建的一種標(biāo)記語言。XHTML是一種過渡技術(shù)，最終目的是利用XML來取代HTML。 XHTML和HTML的區(qū)別并不大，不能像XML那樣來自定義標(biāo)簽，XHTML的標(biāo)簽也是規(guī)定好的。,1.4.2 表現(xiàn)標(biāo)準(zhǔn)語言,表現(xiàn)標(biāo)準(zhǔn)語言用于對頁面內(nèi)的顯示信息進(jìn)行樣式定義，包括字號、顏色、字體和背景等，也就是對頁面信息的顯示樣式進(jìn)行修飾。 常見表現(xiàn)標(biāo)準(zhǔn)語言是CSS（cascading style sheets，層疊樣式表），把CSS表現(xiàn)技術(shù)和描述結(jié)構(gòu)信息的XHTML相結(jié)合，可以實現(xiàn)表現(xiàn)與內(nèi)容的分離。這樣，整個站點從設(shè)計到維護(hù)都會變得更加容易。,1.4.3 行為標(biāo)準(zhǔn)語言,行為標(biāo)準(zhǔn)語言，在網(wǎng)頁中主要對網(wǎng)頁信息的結(jié)構(gòu)和顯示進(jìn)行邏輯控制，用于編寫用戶可以進(jìn)行交互操作的文檔。,1. DOM（文檔結(jié)構(gòu)模型）,根據(jù)W3C規(guī)范，DOM（document object model，文檔對象模型）是一種能夠使