第7章網(wǎng)頁設(shè)計基礎(chǔ)

第七章

網(wǎng)頁基礎(chǔ)學(xué)習(xí)目標(biāo)網(wǎng)頁的基本概念

HTML基礎(chǔ)

了解網(wǎng)頁制作的常用工具Part1網(wǎng)頁的基本概念I(lǐng)nternet通俗地講，Internet（因特網(wǎng)）就是許多功能不同的計算機通過線路連接起來組成的一個世界范圍的網(wǎng)絡(luò)。Internet提供的主要服務(wù)Internet提供的服務(wù)：WWW服務(wù)（網(wǎng)上沖浪）電子郵件服務(wù)（Email）即時通信（QQ）文件傳輸（FTP）電子商務(wù)WWWWWW是WorldWideWeb的縮寫，也可簡寫為Web，中文叫做萬維網(wǎng)。萬維網(wǎng)是虛擬的。它是無數(shù)不斷變化的、種類不同的文檔的集合，這些文檔駐留在因特網(wǎng)上的某個地方，都是用某種形式的HTML編寫的。Web服務(wù)器與瀏覽器WWW的結(jié)構(gòu)主要分為兩個部分，一為服務(wù)器端（Server；二為客戶端（Client）。這種模式稱為客戶機/服務(wù)器（Client/Server）模式。Web服務(wù)器：將網(wǎng)頁資源有機地組織到一起，供用戶通過瀏覽器下載、瀏覽。WWW是由遍布在Internet上的稱為Web服務(wù)器的計算機組成。Web客戶端：用來訪問Web服務(wù)器資源的瀏覽器，現(xiàn)在最常用瀏覽器的就是IE。瀏覽器是獲取WWW服務(wù)的基礎(chǔ)。Web服務(wù)器與瀏覽器HTTPHyperTextTransferProtocol——超文本傳輸協(xié)議瀏覽Web就是以HTTP在Internet上傳送以HTML（HypertextMarkupLanguage）——超文本標(biāo)記語言編寫的網(wǎng)頁內(nèi)容。從而進行信息交流。HTMLHTML(HypertextMarkupLanguage：超文本標(biāo)記語言)，它是一種規(guī)范，它通過標(biāo)記符（tag）來標(biāo)記要在網(wǎng)頁中顯示的各個部分。HTML用于描述超文本的顯示方式，從控制文字的顏色、大小，到標(biāo)識資料的種類為圖形文件或者聲音等。根據(jù)HTML語法所寫出來的文件稱為HTML文件。HTML文件在保存時，需保存為純文本文件，并用.html或.htm作為擴展名。網(wǎng)頁與網(wǎng)站網(wǎng)頁（Webpages）

網(wǎng)頁（html文檔）是網(wǎng)站的組成部分。它是網(wǎng)站的一個元素，每個網(wǎng)頁對應(yīng)著磁盤上的一個文件，由Web瀏覽器下載并格式化。

網(wǎng)站（Website）

在邏輯上可視為一個整體的一系列頁面的有機集合稱為網(wǎng)站（WebSite或Site）。主頁主頁（Homepage）

一個網(wǎng)站開始點的頁面稱為“主頁”（也叫“首頁”）。通常將其命名為index.html（或default.html)。

它和一般的網(wǎng)頁一樣，也是一個單獨的網(wǎng)頁文件，可以介紹各種信息，但作為主頁，它的主要功能是作為瀏覽站點其他網(wǎng)頁的出發(fā)點和其他網(wǎng)頁的匯總點。

HTML由國際組織W3C（萬維網(wǎng)聯(lián)盟）制定和維護，目前常用的HTML的版本是4.0（幾乎所有瀏覽器都支持），HTML4.01對HTML4.0作了一些小的修正。本課程的主要內(nèi)容是以4.0為基礎(chǔ)的。如果需要了解HTML的更詳細情況，請訪問W3C的官方網(wǎng)站：，可以從該網(wǎng)站中獲得最新的HTML規(guī)范。HTML版本HTML和CSS老板本的HTML將內(nèi)容、結(jié)構(gòu)和格式化指令組合在一個文檔中，這雖然比較簡單，但是不夠強大。W3C設(shè)計了一個新系統(tǒng)，在這個系統(tǒng)中，格式化指令可以與內(nèi)容和結(jié)構(gòu)分開保存，因此可以根據(jù)需要應(yīng)用于單一段落或網(wǎng)頁，甚至整個網(wǎng)站。這個系統(tǒng)就稱為CSS（層疊樣式表）本課程主要介紹使用HTML和CSS技術(shù)來編寫網(wǎng)頁。CSS層疊樣式表CSS是CascadingStyleSheet的縮寫。譯作「層疊樣式表」。是用于控制網(wǎng)頁元素的顯示方式樣式表的宗旨就是將結(jié)構(gòu)(內(nèi)容)和格式分離CSS也是一種標(biāo)記語言，有很多屬性來源于HTML，它也需要通過瀏覽器解釋執(zhí)行。XML和XHTML從外表來看，XML與HTML很相似，它們都是由標(biāo)記、屬性和值組成的。XML是一種用來創(chuàng)建其他語言的語言。W3C用XML重寫了HTML，被稱為XHTML，它具有HTML和XML兩者的優(yōu)點。這種新語言具有HTML的所有特性，因此所有瀏覽器都能夠理解它。統(tǒng)一資源定位器（URL）URL的全文為UniformResourceLocator，譯為統(tǒng)一資源定位器URL可分為四部分：

協(xié)議://主機名/地點/文件名協(xié)議：說明數(shù)據(jù)傳輸?shù)姆绞剑ǚ?wù)類型）。常見的服務(wù)協(xié)議有：http、ftp、file、mailto等。主機名：指的是服務(wù)器的地址，可以是IP地址或域名。地點：指的是在服務(wù)器中網(wǎng)頁所在的目錄。文件名：指的是要瀏覽的網(wǎng)頁文件名。URL舉例

長沙理工大學(xué)的網(wǎng)址：http:///pub/cslg/index.htm

等價于：http:///pub/cslg/Web服務(wù)器及其工作原理

Web服務(wù)器負(fù)責(zé)對來自客戶的請求做出回答，并且負(fù)責(zé)管理信息、尋找信息和傳遞信息。常見的Web服務(wù)器軟件有：IIS（Internetinformationserver）ApacheTomcat瀏覽網(wǎng)頁的工作過程用戶通過瀏覽器發(fā)出請求；WEB服務(wù)器接到請求后選擇相應(yīng)的網(wǎng)頁發(fā)給用戶的瀏覽器；瀏覽器接收到網(wǎng)頁文件（HTML文件）后，根據(jù)HTML標(biāo)記符解釋和顯示各種內(nèi)容。網(wǎng)頁技術(shù)概況目前的網(wǎng)頁技術(shù)，大致可分為三個方面靜態(tài)網(wǎng)頁（HTML、CSS）：僅展示信息靜態(tài)網(wǎng)頁是用HTML編寫，擴展名為.htm或.html。靜態(tài)網(wǎng)頁只能單純地在網(wǎng)頁中展示文字與圖片，它是所有網(wǎng)頁的基礎(chǔ)技術(shù)。網(wǎng)頁美工（Flash、Fireworks）動態(tài)網(wǎng)頁（JavaScript/VBScript、ASP、JSP、PHP等）：可實現(xiàn)交互功能網(wǎng)頁編輯和美化工具網(wǎng)頁編輯（1）超文本標(biāo)識語言（HTML）（2）Dreamweaver（3）FrontPage網(wǎng)頁美化（1）Photoshop（2）Fireworks（3）Flash超文本標(biāo)識語言（HTML）

HTML（HypertextMarkupLanguage）是一種專門用于Web頁制作的編程語言，用來描述超文本各個部分的內(nèi)容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點。超文本標(biāo)識語言（HTML）

HTML文檔由三種基本組件組成：文本內(nèi)容，包括頁面上出現(xiàn)的標(biāo)題和段落；對更復(fù)雜的內(nèi)容的偶爾引用，比如鏈接、圖像和Flash動畫，等等；以及標(biāo)記，也就是描述內(nèi)容和引用應(yīng)該如何顯示的指令。重要的是，這些組件都是由文本組成的。這個基本特性意味著網(wǎng)頁可以保存為純文本格式，可以使用任何文本編輯器進行網(wǎng)頁編輯，可以在任何平臺上用任何瀏覽器查看。Dreamweaver

Dreamweaver是由Macromedia公司推出的一款在網(wǎng)頁制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的HTML源代碼就可以生成跨平臺、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時也容易被業(yè)余網(wǎng)友們所掌握。

Dreamweaver支持動態(tài)HTML，是一種可以滿足多層次需求、功能強大的可視化專業(yè)級網(wǎng)頁設(shè)計及制作工具。FrontPageFrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁制作工具。FrontPage使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量工作。FrontPage界面與Word、PowerPoint等軟件的界面極為相似，為使用者帶來了極大的方便，Microsoft公司將FrontPage封裝入Office之中，成為Office家族的一員，使之功能更為強大。PhotoshopPhotoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機上最好的通用平面美術(shù)設(shè)計軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面制作工具。FireworksFireworks是由Macromedia公司開發(fā)的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因為Fireworks是第一套專門為制作網(wǎng)頁圖形而設(shè)計的軟件，同時也是專業(yè)的網(wǎng)頁圖形設(shè)計及制作的解決方案。作為一個圖像處理軟件，F(xiàn)ireworks能夠自由地導(dǎo)入多種格式的圖像進行處理。Fireworks還能夠自動切割圖像、生成光標(biāo)動態(tài)感應(yīng)的JavaScript程序等等，而且Fireworks具有強大的動畫功能和一個相當(dāng)完美的網(wǎng)絡(luò)圖像生成器。FlashFlash是美國Macromedia公司開發(fā)的矢量圖形編輯和動畫創(chuàng)作的專業(yè)軟件，它是一種交互式動畫設(shè)計工具，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。已成為交互式矢量動畫的標(biāo)準(zhǔn)。Flash廣泛應(yīng)用于網(wǎng)頁動畫制作、教學(xué)動畫演示、網(wǎng)上購物、在線游戲等的制作中。學(xué)習(xí)HTML的重要性學(xué)習(xí)網(wǎng)頁制作除了學(xué)習(xí)Frontpage或者Dreamweaver

等工具，還要學(xué)習(xí)HTML語言，因為一些精細的工作還是需要手工編寫部分代碼。了解HTML基礎(chǔ)知識對學(xué)習(xí)Frontpage或者是Dreamweaver有一定的幫助，也會為下一步學(xué)習(xí)ASP/PHP等動態(tài)腳本語言打下基礎(chǔ)。Part2HTML基礎(chǔ)如果在瀏覽器中任意打開一個網(wǎng)頁，然后在窗口中空白位置單擊鼠標(biāo)右鍵，選擇“查看源文件”命令（或者選擇“查看”菜單中的“源文件”命令），則系統(tǒng)會啟動“記事本”，其中包含一些文本信息。HTML文檔中華人民共和國教育部網(wǎng)站中華人民共和國教育部網(wǎng)站

首頁源程序這些文本其實就是網(wǎng)頁的本質(zhì)——HTML源代碼。HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）是表示網(wǎng)頁的一種規(guī)范（或者說是一種標(biāo)準(zhǔn)），它通過標(biāo)記符定義了網(wǎng)頁內(nèi)容的顯示。例如，用<table>標(biāo)記符可以在網(wǎng)頁上定義一個表格。網(wǎng)頁的本質(zhì)中華人民共和國教育部

教育管理信息中心網(wǎng)頁中華人民共和國教育部

教育管理信息中心網(wǎng)頁源程序

超文本是相對普通文本而言的，與普通文本按順序定位不同，超文本最典型的特點就是文本中包含指向其他位置的鏈接，通過這些鏈接使文檔組織成了網(wǎng)狀結(jié)構(gòu)，如下圖所示（這實際上也是WWW信息組織的基本原理）。說明圖超文本示意圖我們可以把常規(guī)意義上的書本理解為普通文本，而把由超鏈接組織起來的電子文檔理解為超文本。超文本示意圖在HTML文檔中，通過使用標(biāo)記符可以告訴瀏覽器如何顯示網(wǎng)頁，即確定內(nèi)容的顯示格式。瀏覽器按順序讀取HTML文件，然后根據(jù)內(nèi)容周圍的HTML標(biāo)記符解釋和顯示各種內(nèi)容。例如，如果為某段內(nèi)容添加<H1></H1>標(biāo)記符，則瀏覽器會以比一般文字大的粗體字顯示該段內(nèi)容，如下圖所示。ＨＴＭＬ標(biāo)記符圖瀏覽器解釋HTML標(biāo)記符示意標(biāo)記符與瀏覽器HTML標(biāo)簽概述HTML并不是一種程序，它是一種控制網(wǎng)頁中資料顯示的標(biāo)記語言元素：當(dāng)用一組HTML標(biāo)簽將一段文字包含在中間時，這段文字與包含文字的HTML標(biāo)簽被稱之為一個元素。一個HTML文件由一系列元素組成。元素是HTML文件的重要組成部分，如title（文檔標(biāo)題）、img（圖像）、table（表格）等等。HTML標(biāo)簽概述在HTML中，所有的標(biāo)記符都用尖括號括起來。例如，<html>、<a>。<a

href="">W3School</a><a>元素最重要的屬性是href屬性，它指定鏈接的目標(biāo)。HTML標(biāo)記符是不區(qū)分大小寫的。<html>、<Html>和<HTML>沒有區(qū)別。HTML標(biāo)簽概述絕大多數(shù)標(biāo)記符都是成對出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符。某些標(biāo)記符，例如<BR>，只要求單一標(biāo)記符號（也可為<BR/>)。開始標(biāo)記符與結(jié)束標(biāo)記符的區(qū)別在于：結(jié)束標(biāo)記符多一個斜杠“/”（不是反斜杠“\”！）HTML標(biāo)簽的屬性屬性是用來描述對象特征的特性。例如，一個人的身高、體重就是人這個對象的屬性。在HTML中，所有的屬性都放置在開始標(biāo)記符的尖括號里，多個屬性之間用空格分開，通常也不區(qū)分大小寫。HTML標(biāo)簽的屬性例如，可以用字體標(biāo)記符和字號屬性指定文字的大小。<FONTsize=4color=red>

本行為4號字，顏色為紅色。</FONT>Web頁的基本結(jié)構(gòu)在HTML語法中，一個元素可以包含另一元素，因此，整個HTML文件就像是一個大元素，包含了許多小元素。

在HTML文件中，最外層的元素是<html>標(biāo)簽，它包含兩個主要的子元素，這兩個子元素是由<head>標(biāo)簽與<body>標(biāo)簽建立.<head>標(biāo)簽所建立的元素的內(nèi)容為文件標(biāo)題<body>標(biāo)簽所建立的元素內(nèi)容為文件主體。HTML文檔結(jié)構(gòu)下面我們開始編寫一個HTML文檔。<html><head><title>第一個HTML示例</title></head><body>HTML的基本結(jié)構(gòu)。

</body></html>在瀏覽器上的顯示結(jié)果從上述代碼中我們可以看出HTML文檔的基本結(jié)構(gòu)如下圖所示：網(wǎng)頁文件命名*.htm或*.html無空格無特殊符號（例如&符號），只可以有下劃線“_”，只可以為英文、數(shù)字區(qū)分大小寫（為避免出錯，最好全用小寫）首頁文件名默認(rèn)為：index.htm或index.htmlHEAD標(biāo)簽首部標(biāo)記<HEAD>和</HEAD>位于Web頁的開頭其中不包括Web頁的任何實際內(nèi)容，而是提供一些與Web頁有關(guān)的特定信息。HEAD標(biāo)簽首部標(biāo)記也可包含其它元素。例如，樣式表（CSS）定義位于<STYLE>和</STYLE>之間；

腳本定義位于<SCRIPT></SCRIPT>之間;