商務網(wǎng)頁實例項目10課件

1、 內(nèi)容提要HTML（Hypertext Markup Language，超文本標記語言）是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺（如UNIX、Windows等）。自1990年以來，HTML就一直被用作萬維網(wǎng)的信息表示語言，用于描述網(wǎng)頁的格式設計和它與WWW上其他網(wǎng)頁的連接信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示效果。在超文本文檔中，可以加入圖片、聲音、動畫、影視等內(nèi)容，還可以很方便地從一個文件跳轉到另一個文件，實現(xiàn)與世界各地主機上文件的鏈接。通過本項目學習可以了解到HTML語言的一些基本知識，有助于加深對網(wǎng)

2、頁文件的認識，并為后面網(wǎng)頁特效的學習做好準備。1HTML語言簡介HTML（Hypertext Markup Language，超文本標記語言）是用來描述超文本文檔的標記語言。它由HTML標記和用來表示信息的文本組成。使用HTML語言描述的文件，需要通過瀏覽器顯示效果。所有的網(wǎng)頁都是以HTML格式的文件為基礎，再加上一些其他語言工具（如JavaScript、VBScript、Java等）構成的。這些文件除了一些基本的文字外還包含一些標記，這些標記均由“”符號以及一個字符串組成。而瀏覽器的功能是對這些標記進行解釋，顯示出文字、圖像、動畫并播放聲音等。HTML文件是由標記和文本組成的，標記能產(chǎn)生各種

3、效果。通過HTML可以表現(xiàn)出豐富多彩的設計風格。大到整個頁面的布局、段落的設定，小到文字的字體、字號、顏色等的設置都可以通過HTML語言來完成。此外，HTML語言還可以在網(wǎng)頁中設置列表、表格等內(nèi)容?；顒? 學習HTML的語法 通過HTML可以實現(xiàn)頁面之間的跳轉。HTML語言可以輕松地實現(xiàn)頁面之間的跳轉及超鏈接的設置等，充分體現(xiàn)其超文本的特性。通過HTML可以展現(xiàn)多媒體的效果。超文本之所以在很短的時間內(nèi)如此廣泛地受到人們的青睞，很重要的一個原因是它能支持多媒體的特性，如圖像、聲音、動畫等。運用HTML語言能夠在網(wǎng)頁中插入各種多媒體對象，使網(wǎng)頁更加絢麗多彩、生動活潑，給人留下很深的印象。HTML語

4、言功能強大，語句簡單，表現(xiàn)力強，是網(wǎng)頁設計者必須掌握的一種工具語言。2標記和標記屬性（1）標記剛剛接觸HTML文檔，遇到的最大障礙就是一些用“”括起來的句子，我們稱它為標記，標記是HTML語言中定義網(wǎng)頁內(nèi)容格式和顯示的指令。而標記的屬性用于進一步控制網(wǎng)頁內(nèi)容的顯示效果。HTML標記是HTML文檔的控制語言，用來告訴瀏覽器應該如何顯示一頁文檔。它用“”括起來，如：。 HTML標記通常是英文詞匯的全稱（如“title”）或縮略語（如“P”代表Paragraph，即段落），與一般文本有區(qū)別。標記字母大小寫皆可，即標記字母不區(qū)分大小寫。這意味著，HTML標記和屬性名稱可以是大寫、小寫或大小寫混合的。但

5、為了便于閱讀，通常采用大小寫一致的書寫方式。標記分為單標記和標記兩種，下面分別作介紹。1）單標記。單標記只需單獨使用就能完整地表達意思，這類標記的語法是：最常用的單標記是，它表示換行。2）雙標記。雙標記由“始標記”和“尾標記”兩個部分構成，必須成對使用，其中始標記告訴Web瀏覽器從此處開始執(zhí)行該標記所表示的功能，而尾標記告訴Web瀏覽器在這里結束該功能。始標記前加一個斜杠（/）即成為尾標記。這類標記的語法是：內(nèi)容。其中，“內(nèi)容”就是要被這對標記施加作用的部分。例如，如果想突出顯示某段文字，可將此段文字放在“”和“”標記中，如：第一?？墒埂暗谝弧眱蓚€字設置為粗體，達到突出顯示的效果。 （2）標記

6、屬性許多單標記和雙標記的始標記內(nèi)可以包含一些屬性，其語法是：各屬性之間用空格隔開，并且屬性之間無先后次序，屬性也可以省略（即取默認值）。例如：單標記表示在文檔當前位置畫一條水平線（horizontal line），一般是從窗口中當前行的最左端一直畫到最右端。包含屬性的標記為：其中，size屬性定義線的粗細，屬性值取整數(shù)，默認值為1；align屬性表示對齊方式，可取left（左對齊，默認值），center（居中），right（右對齊）；width屬性定義線的長度，可取相對值（由一對 號括起來的百分數(shù)，表示相對于充滿整個窗口的百分比），也可取絕對值（用整數(shù)表示的屏幕像素點的個數(shù)，如width=30

7、0），默認值是“100%”。 3HTML基本標記HTML基本標記是任何HTML文檔里都必不可少的標記，下面舉一個最簡單的例子來說明這幾個基本標記。例10-1這段語句中出現(xiàn)了4個標記：，。（1）html標記所有的HTML文件都以標記開頭，以標記作為結尾，網(wǎng)頁中顯示的所有內(nèi)容及其HTML標記都必須包含在和之間。 （2）head標記一個HTML文件分為兩段：文檔頭和文檔體。head標記用于定義文檔頭，標明當前文檔的有關信息，比如網(wǎng)頁的標題、搜索引擎使用的關鍵字等。寫在和之間的文本將出現(xiàn)在瀏覽器窗口中，作為文檔的起始部分，這個文本是網(wǎng)頁的說明，應當盡量簡短。（3）title標記在head標記之間出現(xiàn)最

8、多的就是title標記。該標記向讀者提示網(wǎng)頁的內(nèi)容，即網(wǎng)頁的標題，這個標題將顯示在瀏覽器窗口的標題欄中，由于標題欄長度有限，網(wǎng)頁標題應當短小精悍，其長度最好控制在50個字符以內(nèi)。title標記中不能包含其他標記，一個網(wǎng)頁也只能有一個標題，所以在一個HTML文件中，title標記只能出現(xiàn)一次。（4）body標記HTML文件的主體部分 文檔體（網(wǎng)頁的主要內(nèi)容），寫在和之間，文檔體的設計是網(wǎng)頁制作的重點之一。 這4個標記都是雙標記，使用時要注意它們的始、尾標記的匹配。這個網(wǎng)頁的顯示效果如圖10-1所示。4HTML文本設置標記HTML標記中有一些可用于文本的設置，如文本標題設置，換行，段落等，利用這些

9、標記可以對文本進行一般的設置，下面分別介紹。 （1）標題通常，文章都有標題、副標題、章和節(jié)等結構，HTML中也提供了相應的標題標記，其中n為標題的等級，HTML總共提供6個等級的標題，n越小，標題字號就越大，以下列出所有等級的標題。 第一級標題 第二級標題 第三級標題 第四級標題 第五級標題 第六級標題請看下面的例子。例10-2 本例在瀏覽器中的顯示效果如圖10-2所示。 （2）換行在編寫HTML文件時，不必考慮太細致的設置，也不必理會段落過長的部分會被瀏覽器切掉。因為，在HTML語言規(guī)范里，每當瀏覽器窗口被縮小時，瀏覽器會自動將右邊的文字轉折至下一行。但是，編寫者要想自己換行，應在需要換行的

10、地方加上標記。例10-3這里，標記用于換行。本例的顯示效果如圖10-3所示。 （3）段落標記為了排列得整齊、清晰，在文字段落之間常用來做標記。文件段落的開始由來標記，段落的結束由來標記，是可以省略的，因為下一個的開始就意味著上一個的結束。例10-4本例的顯示效果如圖10-4所示。 HTML最大的特點在于其擁有超級鏈接功能，使用超級鏈接可以輕松地從一個頁面跳轉到其他頁面或文件，這樣就可以把WWW上豐富的資源有機地聯(lián)系起來。1超級鏈接的格式一個超級鏈接的基本格式如下：鏈接文字說明：1）標記表示一個鏈接的開始，表示鏈接的結束。2）屬性“HREF”定義了這個鏈接所指的地方。3）通過單擊“鏈接文字”可以

11、到達指定的文件。例如：新浪網(wǎng)即可給“新浪網(wǎng)”三個字加上連到新浪主頁的鏈接?；顒? 學習HTML超鏈接的使用 2超級鏈接的種類鏈接分為本地鏈接、URL鏈接和目錄鏈接。不論使用哪種鏈接，資源地址是最重要的，一旦路徑上出現(xiàn)差錯，該資源就無法從用戶端取得。（1）本地鏈接對同一臺機器上的不同文件進行的鏈接稱為本地鏈接，它使用Windows系統(tǒng)中文件路徑的表示方法，可以采用絕對路徑或者相對路徑來指示一個文件。下面以圖10-5所示的站點結構為例，說明本地鏈接的路徑表示。 1）絕對路徑。絕對路徑是鏈接目標在本地磁盤的完整路徑。例10-5假設站點根目錄下的index.html文檔的代碼如下：這里，“E:maom

12、aologin.html”就是鏈接到login.html頁面的絕對地址，它是login.html文件在本地磁盤中的絕對路徑。2）相對路徑。當鏈接源與鏈接目標在同一文件夾中時，描述相對路徑只需要指明鏈接目標的文件名即可，例如在index.html中創(chuàng)建指向login.html的鏈接，可使用相對路徑：“l(fā)ogin.html”。 當鏈接目標在鏈接源下一級目錄中時，可直接指明目錄名稱和文檔名稱，例如在index.html中創(chuàng)建指向pro001.html的鏈接，可使用相對路徑：“detail /pro001.html”。當鏈接目標在鏈接源上一級目錄中時，可用“”符號來表示當前文件的目錄，使用多個“”可以

13、表示更高的父級目錄，例如在pro001.html中創(chuàng)建指向index.html的鏈接，可使用相對路徑：“/index.html”。例10-6假設站點根目錄下的index.html文檔的代碼如下： 在這里，由于index.html和login.html位于同一文件夾下，所以login.html相對于index.html的路徑為“l(fā)ogin.html”。一般情況下是不用絕對路徑的，因為資源常常是放在網(wǎng)上供其他人瀏覽的，若寫成絕對路徑，當把整個目錄中的所有文件移植到服務器上時，帶有E:目錄的資源地址的文件用戶將無法訪問到。所以最好寫成相對路徑，避免了重新修改文件資源路徑的麻煩。（2）URL鏈接如果鏈

14、接的文件在其他服務器上，就要弄清所指向的文件是采用哪一種URL地址。URL（Uniform Resource Location，統(tǒng)一資源定位器）可以以多種通信協(xié)議與外界溝通來存取信息。URL鏈接的格式是：協(xié)議名：/主機.域名/路徑/文件名。表10-1中是常用的幾種網(wǎng)絡通信協(xié)議。 例如，可以這樣來表達一個URL地址：/index.html/telnet:/在HTML文件中鏈接其他主機上的文件的代碼格式如下：（3）書簽鏈接有時，一個網(wǎng)頁的內(nèi)容較多，需要不斷地滾動才能看到下面的信息，這容易讓人產(chǎn)生視覺疲勞，這時候可以使用書簽鏈接，在網(wǎng)頁相應的位置添加書簽名稱標記后，瀏覽者只需單擊鏈接源，就能方便快捷

15、地移到相應的書簽位置。比如一個篇幅較長的商品介紹網(wǎng)頁，當瀏覽者閱讀完畢后，希望能快速地回到文章開頭，這時可以先在文章開頭放置一個書簽名稱標記，在文章尾部添加一個鏈接指向書簽名稱標記，瀏覽時單擊此鏈接就能迅速回到網(wǎng)頁開頭。 制作書簽鏈接方法是：首先把某位置設置為鏈接位置，格式是：。再調(diào)用此鏈接部分的文件，定義鏈接的格式：鏈接文字。例10-7這里，在頁面的開頭設置目錄名稱標記 ，作為鏈接的目標位置，而在頁面底端則添加指向頁面開頭書簽名稱的鏈接回到開頭，瀏覽者單擊該鏈接就能回到頁面開頭的位置了。在網(wǎng)頁中，表格是一種很常見的對象，使用表格可以使表達的內(nèi)容簡潔明了。下面學習如何使用HTML語言實現(xiàn)表格的

16、制作。1表格的基本結構用HTML語言制作表格的基本結構是： 定義表格 定義標題 定義表行 定義表頭 定義表元（表格的具體數(shù)據(jù)）例10-8 創(chuàng)建一個簡單的表格，代碼如下?；顒? 學習HTML表格的使用 顯示效果如圖10-6所示。2表格的標題表格標題的位置，可由align屬性來設置，可位于表格上方或表格下方。下面為表格標題位置設置格式。設置標題位于表格上方：標題文字內(nèi)容 設置標題位于表格下方：標題文字內(nèi)容 3表格尺寸設置一般情況下，表格的總長度和總寬度是根據(jù)各行和各列的總和自動調(diào)整的，如果要直接固定表格的大小，可以使用代碼：width和height屬性分別指定表格固定的寬度和長度，n1和n2可以用

17、像素來表示，也可以用百分比（與整個屏幕相比的大小比例）來表示。例如創(chuàng)建一個長為200像素，寬為100像素的表格，其HTML代碼為：創(chuàng)建一個長為屏幕的20%，寬為屏幕的10%的表格，其HTML代碼為： 4表格內(nèi)文字的對齊/布局表格中數(shù)據(jù)的對齊方式有兩種，分別是水平對齊和垂直對齊。水平對齊是以align屬性來設置，而垂直對齊則由valign屬性來設置。其中，水平對齊的位置可分為三種：居左（left）、居右（right）和居中（center）；而垂直對齊的位置有四種：上齊（top）、居中（middle）、下齊（bottom）和基線（baseline）。例10-9 表格內(nèi)容水平對齊樣式，代碼如下。 顯

18、示效果如圖10-7所示。例10-10 表格內(nèi)容垂直對齊樣式，代碼如下。 顯示效果如圖10-8所示。網(wǎng)頁中的多媒體通常有圖像、聲音、動畫、視頻等，在網(wǎng)頁中加入多媒體，可使網(wǎng)頁元素更加豐富，更加美觀，使網(wǎng)頁更具吸引力。1插入圖像的格式、標記及屬性一個純文本的網(wǎng)頁往往缺乏吸引力，適當插入一些圖像能增強網(wǎng)頁的表現(xiàn)力。HTML中插入圖像的標記是，其格式為：src屬性指明了所要鏈接的圖像文件地址，這個圖像文件可以是本地機器上的圖像，也可以是位于遠端主機上的圖像。地址的表示方法可以參考URL地址的表示方法。例如：img還有兩個屬性是height和width，分別表示圖像的高和寬。通過設置這兩個屬性的值可以改變圖像的大小。如果沒有設置，圖像將按原大小顯示?；顒? 學習HTML多媒體的使用 2插入聲音的格式、標記及屬性HTML除了可以插入圖像之外，還可以播放音樂。用瀏覽器可以播放的音樂格式有MIDI格式、WAV格式、MP3格式等。（1）點播音樂將音樂做成一個鏈接，只需用鼠標在上面單擊，就可以聽到動人的音樂了，其實這樣做的方法很簡單，格式如下：樂曲名例如，播放一段MIDI音樂：MIDI音樂播放一段MP3格