第7章網(wǎng)頁制作與編程基礎(chǔ)計算機(jī)課件PPT

1、第第7 7章章 網(wǎng)頁制作與編程基礎(chǔ)網(wǎng)頁制作與編程基礎(chǔ)本章學(xué)習(xí)目標(biāo)：本章學(xué)習(xí)目標(biāo)：了解常用網(wǎng)頁制作工具，基本掌握其中一種了解常用網(wǎng)頁制作工具，基本掌握其中一種掌握掌握HTMLHTML語言語言初步掌握初步掌握VBScriptVBScript或或JavaScriptJavaScript腳本語言腳本語言了解動態(tài)網(wǎng)頁技術(shù)了解動態(tài)網(wǎng)頁技術(shù)初步掌握初步掌握ASPASP與數(shù)據(jù)庫應(yīng)用與數(shù)據(jù)庫應(yīng)用27.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 隨著隨著Internet技術(shù)的不斷發(fā)展，網(wǎng)頁制作工具越來越多，技術(shù)的不斷發(fā)展，網(wǎng)頁制作工具越來越多，選擇一種好的工具非常重要，能夠起到事半功倍的效果。選擇一種好的工具非

2、常重要，能夠起到事半功倍的效果。網(wǎng)頁制作工具大體上可以分為網(wǎng)頁制作工具大體上可以分為兩類兩類：著眼于網(wǎng)頁、網(wǎng)站全：著眼于網(wǎng)頁、網(wǎng)站全局的，稱之為基本工具；著眼于網(wǎng)頁某些元素的，稱之為局的，稱之為基本工具；著眼于網(wǎng)頁某些元素的，稱之為輔助工具。輔助工具。 網(wǎng)頁制作基本工具網(wǎng)頁制作基本工具是指那些專門用來設(shè)計能在瀏覽器是指那些專門用來設(shè)計能在瀏覽器中顯示為網(wǎng)頁的中顯示為網(wǎng)頁的HTML文檔的專用工具軟件，它能整合編文檔的專用工具軟件，它能整合編排網(wǎng)頁元素，生成排網(wǎng)頁元素，生成HTML網(wǎng)頁代碼文件。比較流行的網(wǎng)頁網(wǎng)頁代碼文件。比較流行的網(wǎng)頁制作工具軟件包括制作工具軟件包括Microsoft Front

3、Page和和Macromedia Dreamweaver等。等。 網(wǎng)頁制作輔助工具網(wǎng)頁制作輔助工具是指用來創(chuàng)建或加工網(wǎng)頁上的圖形、是指用來創(chuàng)建或加工網(wǎng)頁上的圖形、圖像、動畫、聲音和視頻等網(wǎng)頁元素的工具軟件。圖像、動畫、聲音和視頻等網(wǎng)頁元素的工具軟件。37.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 2003 FrontPage FrontPage是由是由MicrosoftMicrosoft公司推出的新一代公司推出的新一代WebWeb網(wǎng)頁制網(wǎng)頁制作工具。作工具。FrontPageFr

4、ontPage使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量工作。量工作。 FrontPage FrontPage的最強(qiáng)大之處是其站點(diǎn)管理與遠(yuǎn)程發(fā)布功能。的最強(qiáng)大之處是其站點(diǎn)管理與遠(yuǎn)程發(fā)布功能。用戶只需在本地對網(wǎng)頁進(jìn)行編輯，用戶只需在本地對網(wǎng)頁進(jìn)行編輯，F(xiàn)rontPageFrontPage會跟蹤用戶編會跟蹤用戶編輯過的文件，在發(fā)布時，它會自動將修改過的網(wǎng)頁進(jìn)行發(fā)布，輯過的文件，在發(fā)布時，它會自動將修改過的網(wǎng)頁進(jìn)行發(fā)布，未編輯過的網(wǎng)頁可由用戶決定是否再次向服務(wù)器發(fā)送未編

5、輯過的網(wǎng)頁可由用戶決定是否再次向服務(wù)器發(fā)送。47.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20031 1FrontPage 2003FrontPage 2003的特色的特色 (1) (1)強(qiáng)大的網(wǎng)頁設(shè)計功能強(qiáng)大的網(wǎng)頁設(shè)計功能 可以智能地完成可以智能地完成HTMLHTML文本的編輯，并可以針對不同的瀏文本的編輯，并可以針對不同的瀏覽器對網(wǎng)頁進(jìn)行設(shè)置；可以提供對多種版本的瀏覽器的支持；覽器對網(wǎng)頁進(jìn)行設(shè)置；可以提供對多種版本的瀏覽器的支持；完善了所見即所得的網(wǎng)頁編輯操作。完善了所見即

6、所得的網(wǎng)頁編輯操作。 (2) (2)豐富的網(wǎng)頁設(shè)計模板、設(shè)計向?qū)Ш椭黝}樣式豐富的網(wǎng)頁設(shè)計模板、設(shè)計向?qū)Ш椭黝}樣式 提供了多種網(wǎng)頁設(shè)計模板、網(wǎng)頁設(shè)計向?qū)Ш椭黝}樣式。提供了多種網(wǎng)頁設(shè)計模板、網(wǎng)頁設(shè)計向?qū)Ш椭黝}樣式。使用這些模板、向?qū)Ш蜆邮?，即使是初學(xué)者也可以設(shè)計出具使用這些模板、向?qū)Ш蜆邮?，即使是初學(xué)者也可以設(shè)計出具有專業(yè)水準(zhǔn)的網(wǎng)站。有專業(yè)水準(zhǔn)的網(wǎng)站。57.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20032FrontPage 2003的新增功能的新增功能 (1)設(shè)計網(wǎng)站設(shè)計網(wǎng)站 F

7、rontPage 2003 具有經(jīng)過改進(jìn)的設(shè)計環(huán)境、新的布局和具有經(jīng)過改進(jìn)的設(shè)計環(huán)境、新的布局和設(shè)計工具、模板以及經(jīng)過改進(jìn)的主題，這一切可以幫助用戶設(shè)計工具、模板以及經(jīng)過改進(jìn)的主題，這一切可以幫助用戶實(shí)現(xiàn)網(wǎng)站創(chuàng)意，而無需任何實(shí)現(xiàn)網(wǎng)站創(chuàng)意，而無需任何HTML知識。知識。 (2)開發(fā)網(wǎng)站開發(fā)網(wǎng)站 FrontPage 2003具有改進(jìn)的創(chuàng)作環(huán)境、新的圖形功能、具有改進(jìn)的創(chuàng)作環(huán)境、新的圖形功能、強(qiáng)大的編碼工具（幫助用戶應(yīng)用并增加各種編碼語言知識）、強(qiáng)大的編碼工具（幫助用戶應(yīng)用并增加各種編碼語言知識）、以及創(chuàng)建交互式腳本的工具。此外，以及創(chuàng)建交互式腳本的工具。此外，F(xiàn)rontPage 2003可以生可以

8、生成有效和干凈的成有效和干凈的HTML，能讓用戶更好地控制代碼。，能讓用戶更好地控制代碼。 67.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 77.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 窗口

9、欄的內(nèi)容隨著所選視圖不同而不同。為了便于用戶窗口欄的內(nèi)容隨著所選視圖不同而不同。為了便于用戶制作網(wǎng)頁和查看、修改制作網(wǎng)頁和查看、修改WebWeb站點(diǎn)的組織結(jié)構(gòu)，站點(diǎn)的組織結(jié)構(gòu)，F(xiàn)rontPage 2003FrontPage 2003提供了提供了6 6種視圖。單擊視圖菜單相應(yīng)的菜單項(xiàng)可以切換到不同種視圖。單擊視圖菜單相應(yīng)的菜單項(xiàng)可以切換到不同的視圖。各個視圖的功能分別為：的視圖。各個視圖的功能分別為： “網(wǎng)頁網(wǎng)頁”視圖：網(wǎng)頁視圖是進(jìn)行網(wǎng)頁編輯的操作界面。視圖：網(wǎng)頁視圖是進(jìn)行網(wǎng)頁編輯的操作界面。 “文件夾文件夾”視圖：用來對網(wǎng)站的目錄和文件夾進(jìn)行管理。視圖：用來對網(wǎng)站的目錄和文件夾進(jìn)行管理。 “報

10、表報表”視圖：用于查看與網(wǎng)頁制作有關(guān)的各項(xiàng)參數(shù)。視圖：用于查看與網(wǎng)頁制作有關(guān)的各項(xiàng)參數(shù)。 “遠(yuǎn)程網(wǎng)站遠(yuǎn)程網(wǎng)站”視圖：可以發(fā)布整個網(wǎng)站或個別文件，還可視圖：可以發(fā)布整個網(wǎng)站或個別文件，還可以在兩個或更多個位置之間同步文件。以在兩個或更多個位置之間同步文件。 “導(dǎo)航導(dǎo)航”視圖：用來顯示和編輯網(wǎng)頁的導(dǎo)航關(guān)系。視圖：用來顯示和編輯網(wǎng)頁的導(dǎo)航關(guān)系。 “超鏈接超鏈接”視圖：顯示某個網(wǎng)頁與其他網(wǎng)頁之間的關(guān)系。視圖：顯示某個網(wǎng)頁與其他網(wǎng)頁之間的關(guān)系。 “任務(wù)任務(wù)”視圖：用來查看網(wǎng)站和網(wǎng)頁設(shè)計的完成情況。視圖：用來查看網(wǎng)站和網(wǎng)頁設(shè)計的完成情況。87.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.2 Ad

11、obe 7.1.2 Adobe DreamweaverDreamweaver CS3 CS3 使用使用DreamweaverDreamweaver，設(shè)計師可以隨心所欲地編寫代碼、，設(shè)計師可以隨心所欲地編寫代碼、設(shè)計網(wǎng)站網(wǎng)頁以及進(jìn)行高級開發(fā)。無論是喜歡手寫設(shè)計網(wǎng)站網(wǎng)頁以及進(jìn)行高級開發(fā)。無論是喜歡手寫HTMLHTML代碼代碼還是習(xí)慣于可視化環(huán)境，還是習(xí)慣于可視化環(huán)境，DreamweaverDreamweaver都能提供方便快捷、都能提供方便快捷、功能強(qiáng)大的工具，使用功能強(qiáng)大的工具，使用DreamweaverDreamweaver將是一種全新的體驗(yàn)。將是一種全新的體驗(yàn)。在易用、創(chuàng)新、規(guī)范等優(yōu)點(diǎn)的基礎(chǔ)

12、上，在易用、創(chuàng)新、規(guī)范等優(yōu)點(diǎn)的基礎(chǔ)上，DreamweaverDreamweaver還擁有還擁有更先進(jìn)的網(wǎng)頁布局和設(shè)計環(huán)境，以及更為強(qiáng)大的代碼編輯功更先進(jìn)的網(wǎng)頁布局和設(shè)計環(huán)境，以及更為強(qiáng)大的代碼編輯功能等卓越特性。能等卓越特性。DreamweaverDreamweaver CS3 CS3的操作界面主要由以下幾個部分組成：的操作界面主要由以下幾個部分組成：標(biāo)題欄、菜單欄、插入欄、文檔工具欄、文檔窗口、屬性檢標(biāo)題欄、菜單欄、插入欄、文檔工具欄、文檔窗口、屬性檢查器以及多個面板組，如圖查器以及多個面板組，如圖7-27-2所示。所示。97.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.2 Ado

13、be 7.1.2 Adobe DreamweaverDreamweaver CS3 CS3 圖7-2 Dreamweaver CS3 的界面布局 107.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具1 1標(biāo)題欄標(biāo)題欄( (注意區(qū)別文檔的標(biāo)題和文檔的文件名稱注意區(qū)別文檔的標(biāo)題和文檔的文件名稱) )2 2菜單欄菜單欄3 3插入欄插入欄4 4文檔工具欄文檔工具欄5 5“屬性屬性”檢查器檢查器 6 6其他面板其他面板 7.1.2 Adobe 7.1.2 Adobe DreamweaverDreamweaver CS3 CS3 117.1 7.1 常用網(wǎng)頁制作工具常用網(wǎng)頁制作工具 7.1.3 7.1.3

14、 網(wǎng)頁美化工具網(wǎng)頁美化工具 1Photoshop CS3 2Fireworks CS3 3Flash CS3 為了使制作的網(wǎng)頁更為美觀，用戶在利用網(wǎng)頁制作工具為了使制作的網(wǎng)頁更為美觀，用戶在利用網(wǎng)頁制作工具制作網(wǎng)頁時，還需利用網(wǎng)頁美化工具對網(wǎng)頁進(jìn)行美化。制作網(wǎng)頁時，還需利用網(wǎng)頁美化工具對網(wǎng)頁進(jìn)行美化。 127.2 HTML7.2 HTML語言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述1 1什么是什么是HTML HTML HTML HTML英文全名是英文全名是Hyper Text Markup LanguageHyper Text Markup Language，即超，即超文

15、本標(biāo)記語言，是一種用來制作超文本文檔的簡單標(biāo)記語文本標(biāo)記語言，是一種用來制作超文本文檔的簡單標(biāo)記語言。言。 用用HTMLHTML編寫的超文本文檔稱為編寫的超文本文檔稱為HTMLHTML文檔，它能獨(dú)立于文檔，它能獨(dú)立于各種操作系統(tǒng)（如各種操作系統(tǒng)（如UNIXUNIX、WindowsWindows等）。它主要是在原來文等）。它主要是在原來文本文件的基礎(chǔ)上，增加一系列的標(biāo)識符來描述格式，形成本文件的基礎(chǔ)上，增加一系列的標(biāo)識符來描述格式，形成網(wǎng)絡(luò)文件。當(dāng)用戶使用瀏覽器下載時，就把這些標(biāo)識符解網(wǎng)絡(luò)文件。當(dāng)用戶使用瀏覽器下載時，就把這些標(biāo)識符解釋成應(yīng)有的含義，并按照一定的格式將這些被標(biāo)識的文件釋成應(yīng)有的含

16、義，并按照一定的格式將這些被標(biāo)識的文件顯示在屏幕上，而顯示在屏幕上，而HTMLHTML的標(biāo)識符號并不顯示在屏幕上。的標(biāo)識符號并不顯示在屏幕上。 137.2 HTML7.2 HTML語言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述2 2HTMLHTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) (1)HTML (1)HTML文檔的基本結(jié)構(gòu)文檔的基本結(jié)構(gòu) 下面是一個最基本的超文本文檔的源代碼下面是一個最基本的超文本文檔的源代碼My first page 我的第一個網(wǎng)頁我的第一個網(wǎng)頁 HTML文件由標(biāo)記和被標(biāo)記的內(nèi)容組成。每個標(biāo)記都有文件由標(biāo)記和被標(biāo)記的內(nèi)容組成。每個標(biāo)記都有“”圍住，以表示這是圍住，以

17、表示這是HTML代碼而非普通文本，標(biāo)記能產(chǎn)生所需的各種效代碼而非普通文本，標(biāo)記能產(chǎn)生所需的各種效果。就像一個排版程序，它將網(wǎng)頁的內(nèi)容排成理想的效果。這些標(biāo)記名果。就像一個排版程序，它將網(wǎng)頁的內(nèi)容排成理想的效果。這些標(biāo)記名稱大都為相應(yīng)的英文單詞首字母或縮寫，很好記憶。各種標(biāo)記差別很大，稱大都為相應(yīng)的英文單詞首字母或縮寫，很好記憶。各種標(biāo)記差別很大，但總的表示形式卻大同小異。但總的表示形式卻大同小異。147.2 HTML7.2 HTML語言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述2 2HTMLHTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) (2)HTML (2)HTML的標(biāo)記的標(biāo)記 單標(biāo)簽單標(biāo)

18、簽 某些標(biāo)記稱為某些標(biāo)記稱為“單標(biāo)簽單標(biāo)簽”，它只需單獨(dú)使用就能完整地表達(dá)意思。，它只需單獨(dú)使用就能完整地表達(dá)意思。 這類標(biāo)記的這類標(biāo)記的語法是：語法是： 最常用的單標(biāo)簽是最常用的單標(biāo)簽是, , 它表示換行。它表示換行。 雙標(biāo)簽雙標(biāo)簽 另一類標(biāo)記稱為另一類標(biāo)記稱為“雙標(biāo)簽雙標(biāo)簽”，它由，它由“始標(biāo)簽始標(biāo)簽”和和“尾標(biāo)簽尾標(biāo)簽”兩部分構(gòu)兩部分構(gòu)成，必須成對使用，其中始標(biāo)簽告訴成，必須成對使用，其中始標(biāo)簽告訴WebWeb瀏覽器從此處開始執(zhí)行該標(biāo)瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，而尾標(biāo)簽告訴記所表示的功能，而尾標(biāo)簽告訴WebWeb瀏覽器在這里結(jié)束該功能。始標(biāo)瀏覽器在這里結(jié)束該功能。始標(biāo)簽前加一

19、個斜杠（簽前加一個斜杠（/ /）即成為尾標(biāo)記。）即成為尾標(biāo)記。 這類標(biāo)記的這類標(biāo)記的語法是：語法是： 受標(biāo)記影響的內(nèi)容受標(biāo)記影響的內(nèi)容/ 例如你想對某段文字的加粗顯示，就將此段文字放在例如你想對某段文字的加粗顯示，就將此段文字放在 標(biāo)記中標(biāo)記中, , 如：如：你要加粗的字你要加粗的字 157.2 HTML7.2 HTML語言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述2 2HTMLHTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) (2)HTML (2)HTML的標(biāo)記的標(biāo)記 標(biāo)簽屬性標(biāo)簽屬性 許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性，標(biāo)記要通過屬性許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性，

20、標(biāo)記要通過屬性來制作出各種效果。來制作出各種效果。 其語法是：其語法是： 受影響內(nèi)容受影響內(nèi)容/ 需要注意的是，并不是所有的標(biāo)記都有屬性；根據(jù)需要可以用該標(biāo)記需要注意的是，并不是所有的標(biāo)記都有屬性；根據(jù)需要可以用該標(biāo)記的所有屬性，也可以只用需要的幾個屬性。在使用時，屬性之間沒有順序。的所有屬性，也可以只用需要的幾個屬性。在使用時，屬性之間沒有順序。 167.2 HTML7.2 HTML語言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述2 2HTMLHTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) (3)HTML (3)HTML的幾個部分的幾個部分 HTML HTML文件以文件以開頭，以開頭，以結(jié)尾

21、。瀏覽器解釋網(wǎng)頁代碼的起結(jié)尾。瀏覽器解釋網(wǎng)頁代碼的起始標(biāo)志。始標(biāo)志。HTMLHTML文件包括頭部（文件包括頭部（headhead）和正文（）和正文（bodybody）。）。 1)head1)head頭部信息頭部信息 ：表示這是網(wǎng)頁的題頭部分，用來說明文件命名和：表示這是網(wǎng)頁的題頭部分，用來說明文件命名和與文件本身的相關(guān)信息。通常這部分標(biāo)記來聲明此網(wǎng)頁的默認(rèn)語言編碼、與文件本身的相關(guān)信息。通常這部分標(biāo)記來聲明此網(wǎng)頁的默認(rèn)語言編碼、關(guān)鍵字、使用軟件等，個別的標(biāo)記產(chǎn)生頁面動作，第關(guān)鍵字、使用軟件等，個別的標(biāo)記產(chǎn)生頁面動作，第4 4行聲明超文本頭行聲明超文本頭部分結(jié)束。在簡單的網(wǎng)頁中這部分不重要，而較

22、復(fù)雜的網(wǎng)頁中，比如：部分結(jié)束。在簡單的網(wǎng)頁中這部分不重要，而較復(fù)雜的網(wǎng)頁中，比如：用用CSSCSS樣式表、樣式表、JavaScriptJavaScript語言等，這部分會相當(dāng)重要。語言等，這部分會相當(dāng)重要。 ：網(wǎng)頁的標(biāo)題。標(biāo)題概括了網(wǎng)頁的內(nèi)容，能迅速：網(wǎng)頁的標(biāo)題。標(biāo)題概括了網(wǎng)頁的內(nèi)容，能迅速了解網(wǎng)頁的大意。在文件頭部定義的標(biāo)題內(nèi)容不在瀏覽器窗口中顯示，了解網(wǎng)頁的大意。在文件頭部定義的標(biāo)題內(nèi)容不在瀏覽器窗口中顯示，而是在瀏覽器的標(biāo)題欄中顯示。盡管頭部定義的信息很多，但能在瀏覽而是在瀏覽器的標(biāo)題欄中顯示。盡管頭部定義的信息很多，但能在瀏覽器標(biāo)題欄中顯示的信息只有標(biāo)題。器標(biāo)題欄中顯示的信息只有標(biāo)題。

23、 在網(wǎng)頁的頭部代碼中，還有另外一種文頭標(biāo)記在網(wǎng)頁的頭部代碼中，還有另外一種文頭標(biāo)記metameta標(biāo)記標(biāo)記，基本語，基本語法是：法是：meta http-equiv=。177.2 HTML7.2 HTML語言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述2 2HTMLHTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) (3)HTML (3)HTML的幾個部分的幾個部分 2 2）bodybody文檔主體部分文檔主體部分 ：是網(wǎng)頁的正文部分。：是網(wǎng)頁的正文部分。HTMLHTML文件主體標(biāo)記的格式文件主體標(biāo)記的格式為：為：body 。作為網(wǎng)。作為網(wǎng)頁的主體部分，有很多的內(nèi)置屬性，這些屬性用于設(shè)定網(wǎng)頁的總體

24、風(fēng)頁的主體部分，有很多的內(nèi)置屬性，這些屬性用于設(shè)定網(wǎng)頁的總體風(fēng)格。例如，定義頁面的背景圖像、背景顏色、文字顏色以及超文本鏈格。例如，定義頁面的背景圖像、背景顏色、文字顏色以及超文本鏈接顏色等，主要屬性如表接顏色等，主要屬性如表7-17-1所示。所示。 HTML HTML代碼在書寫時不嚴(yán)格區(qū)分大小寫，也并不要求在書寫時縮代碼在書寫時不嚴(yán)格區(qū)分大小寫，也并不要求在書寫時縮進(jìn)，但為了程序的易讀性，建議網(wǎng)頁設(shè)計者使標(biāo)記的首尾對齊，內(nèi)進(jìn)，但為了程序的易讀性，建議網(wǎng)頁設(shè)計者使標(biāo)記的首尾對齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格。部的內(nèi)容向右縮進(jìn)幾格。 187.2 HTML7.2 HTML語言語言 7.2.1 HTML7

25、.2.1 HTML語言概述語言概述2 2HTMLHTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) (3)HTML (3)HTML的幾個部分的幾個部分 2 2）bodybody文檔主體部分文檔主體部分 表表7-1 BODY7-1 BODY標(biāo)記屬性值標(biāo)記屬性值 197.2 HTML7.2 HTML語言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述3 3一個簡單的一個簡單的HTMLHTML實(shí)例實(shí)例一個簡單的一個簡單的HTMLHTML示例示例歡迎光臨我的主頁歡迎光臨我的主頁這是我第一次做主頁，無論怎么樣，我這是我第一次做主頁，無論怎么樣，我都會努力做好！都會努力做好！207.2 HTML7.2 HTML語

26、言語言 7.2.1 HTML7.2.1 HTML語言概述語言概述4 4HTMLHTML的特點(diǎn)的特點(diǎn)HTMLHTML是獨(dú)立于平臺的，它兼容多平臺。是獨(dú)立于平臺的，它兼容多平臺。HTMLHTML文件中含有大量的特定標(biāo)記文件中含有大量的特定標(biāo)記(tags)(tags)，該標(biāo)記用于，該標(biāo)記用于解釋如何顯示指定的內(nèi)容。解釋如何顯示指定的內(nèi)容。HTMLHTML文件中包含超文本內(nèi)容，如多媒體信息、文件中包含超文本內(nèi)容，如多媒體信息、E-mailE-mail地址、數(shù)據(jù)庫查詢結(jié)果等。地址、數(shù)據(jù)庫查詢結(jié)果等。HTMLHTML文件是一個有特定標(biāo)記的、可識別的文件是一個有特定標(biāo)記的、可識別的ASCIIASCII文本文

27、文本文件，通常文件擴(kuò)展名為件，通常文件擴(kuò)展名為.html.html或或. .htmhtm。編寫一個編寫一個HTMLHTML文件不需要特殊的軟件，只要有一個字文件不需要特殊的軟件，只要有一個字符編輯器就可以完成。符編輯器就可以完成。217.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格1字符的格式化字符的格式化 (1)(1)標(biāo)題文字標(biāo)記標(biāo)題文字標(biāo)記 標(biāo)題文字的標(biāo)題文字的格式為：格式為： 標(biāo)題文字標(biāo)題文字/ 屬性屬性align用來設(shè)置標(biāo)題在頁面中的對齊方式：用來設(shè)置標(biāo)題在頁面中的對齊方式：left（左（左對齊）對齊）right（右對齊）（右對齊）ce

28、nter（居中對齊）（居中對齊） 屬性屬性n用來指定標(biāo)題文字的大小。用來指定標(biāo)題文字的大小。N可以取可以取16的整數(shù)的整數(shù)值，取值，取1時文字最大，時文字最大，6時文字最小時文字最小 與用與用定義的網(wǎng)頁標(biāo)題不同，標(biāo)題格式定義的網(wǎng)頁標(biāo)題不同，標(biāo)題格式顯示在瀏覽器窗口中，而不顯示在瀏覽器的標(biāo)題欄中。顯示在瀏覽器窗口中，而不顯示在瀏覽器的標(biāo)題欄中。227.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格1字符的格式化字符的格式化 (1)(1)標(biāo)題文字標(biāo)記標(biāo)題文字標(biāo)記 設(shè)置標(biāo)題 第1級標(biāo)題(h1) 第2級標(biāo)題(h2) 第3級標(biāo)題(h3) 第4級標(biāo)題(h4)

29、（居左） 第5級標(biāo)題(h5)（居右） 第6級標(biāo)題(h6)（居中） 237.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格1 1字符的格式化字符的格式化 (2)(2)字符格式標(biāo)記字符格式標(biāo)記 格式為：格式為：font size= 被設(shè)置的文字被設(shè)置的文字標(biāo)記可設(shè)定文字的字號（大?。⒆煮w和顏色。標(biāo)記可設(shè)定文字的字號（大?。?、字體和顏色。sizesize用來設(shè)置文字的大小。數(shù)字的取值范圍從用來設(shè)置文字的大小。數(shù)字的取值范圍從1 17 7，sizesize取取1 1時最小，取時最小，取7 7時最大。時最大。FaceFace用來設(shè)置字體。用來設(shè)置字體。C

30、olorColor用來設(shè)置文字顏色。用來設(shè)置文字顏色。247.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格1 1字符的格式化字符的格式化 (2)(2)字符格式標(biāo)記字符格式標(biāo)記 1) 1)和和 標(biāo)記都可以設(shè)置文字的大小，二者的區(qū)標(biāo)記都可以設(shè)置文字的大小，二者的區(qū)別見下表別見下表( (當(dāng)當(dāng)中的中的sizesize取取7 7時，文字比時，文字比要大要大) )。 2) 2)設(shè)置字體：設(shè)置字體：在網(wǎng)頁設(shè)計中要盡量用常見的字體。在網(wǎng)頁設(shè)計中要盡量用常見的字體。必要必要的罕見字體可以轉(zhuǎn)化為文字圖像。的罕見字體可以轉(zhuǎn)化為文字圖像。257.2 HTML7.2 H

31、TML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格1 1字符的格式化字符的格式化 (2)(2)字符格式標(biāo)記字符格式標(biāo)記 3) 3)設(shè)置文字的顏色：設(shè)置文字的顏色：標(biāo)記中的標(biāo)記中的texttext屬性，屬性，設(shè)定整個網(wǎng)頁文字的顏色設(shè)定整個網(wǎng)頁文字的顏色 標(biāo)記中的標(biāo)記中的colorcolor屬性，屬性，設(shè)定網(wǎng)頁、段落、短語、詞或設(shè)定網(wǎng)頁、段落、短語、詞或字的顏色。字的顏色。 與與的優(yōu)先級，的優(yōu)先級，標(biāo)記優(yōu)先。標(biāo)記優(yōu)先。<body>與<font>標(biāo)記同時對文字顏色進(jìn)行定義今天天氣真好黑色藍(lán)色粉紅色267.2 HTML7.2

32、 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格1 1字符的格式化字符的格式化 (2)(2)字符格式標(biāo)記字符格式標(biāo)記 3) 3)設(shè)置文字的顏色：設(shè)置文字的顏色： 顏色可以用相應(yīng)英文單詞或以顏色可以用相應(yīng)英文單詞或以“#”#”引導(dǎo)的一個十六進(jìn)制數(shù)代碼來引導(dǎo)的一個十六進(jìn)制數(shù)代碼來表示。上例中同時使用了表示。上例中同時使用了bodybody的的texttext屬性和屬性和fontfont的的colorcolor屬性來對文字屬性來對文字的顏色進(jìn)行設(shè)置，但最后在網(wǎng)頁中的文字顏色應(yīng)該是離文字本身最近的的顏色進(jìn)行設(shè)置，但最后在網(wǎng)頁中的文字顏色應(yīng)該是離文字本身最近的標(biāo)記屬性所定義的

33、。另外，在標(biāo)記屬性所定義的。另外，在titletitle中涉及網(wǎng)頁中的特殊替換字符，其中涉及網(wǎng)頁中的特殊替換字符，其字符所表示的的含義如下表所示。字符所表示的的含義如下表所示。 277.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格1 1字符的格式化字符的格式化 (2)(2)字符格式標(biāo)記字符格式標(biāo)記 4) 4)設(shè)置字型：設(shè)置字型： 字型就是文字的風(fēng)格，如加粗、斜體、帶下劃線、上標(biāo)、下標(biāo)等。字型就是文字的風(fēng)格，如加粗、斜體、帶下劃線、上標(biāo)、下標(biāo)等。字型的控制標(biāo)記見下表所示：字型的控制標(biāo)記見下表所示：287.2 HTML7.2 HTML語言語言 7.

34、2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格2 2段落格式化段落格式化 (1) (1)強(qiáng)行換行標(biāo)記強(qiáng)行換行標(biāo)記 格式為：文字格式為：文字 實(shí)例實(shí)例1 1：不使用：不使用 無換行示例無換行示例登鸛雀樓登鸛雀樓白日依山盡，白日依山盡，黃河入海流。黃河入海流。欲窮千里目，欲窮千里目，更上一層樓。更上一層樓。297.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格2 2段落格式化段落格式化 (1) (1)強(qiáng)行換行標(biāo)記強(qiáng)行換行標(biāo)記 實(shí)例實(shí)例2：使用：使用后的效果后的效果換行示例換行示例登鸛雀樓登鸛雀樓白日依山盡，白日依山盡，黃河入海流。黃河入海流。欲

35、窮千欲窮千里目，里目，更上一層樓。更上一層樓。307.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格2 2段落格式化段落格式化 (2) (2) 段落標(biāo)記段落標(biāo)記 格式為：格式為：文字文字 實(shí)例實(shí)例1 1：居中對齊：居中對齊CENTERCENTER段落標(biāo)簽段落標(biāo)簽浣溪沙浣溪沙一曲新詞酒一杯，去年天氣舊亭一曲新詞酒一杯，去年天氣舊亭臺，夕陽西下幾時回。臺，夕陽西下幾時回。無可奈何花落去，無可奈何花落去，似曾相識燕歸來。小園香徑幾徘徊。似曾相識燕歸來。小園香徑幾徘徊。317.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格

36、文檔的格式與風(fēng)格2 2段落格式化段落格式化 (2) (2)段落標(biāo)記段落標(biāo)記 實(shí)例實(shí)例2 2：參見右圖：參見右圖段落標(biāo)簽段落標(biāo)簽登鸛雀樓登鸛雀樓白日依山盡，白日依山盡， 黃河黃河入海流。入海流。 欲窮千里目，欲窮千里目， 更上更上一層樓。一層樓。327.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格2 2段落格式化段落格式化 (2) (2)段落標(biāo)記段落標(biāo)記 文件段落的開始由文件段落的開始由來標(biāo)記，段落的結(jié)束由來標(biāo)記，段落的結(jié)束由來標(biāo)記。來標(biāo)記。標(biāo)記不但能使后面的文字換到下一行，還可以使兩段之標(biāo)記不但能使后面的文字換到下一行，還可以使兩段之間多一空行

37、。由于一段的結(jié)束意味著新一段的開始，所以使間多一空行。由于一段的結(jié)束意味著新一段的開始，所以使用用也可省略結(jié)束標(biāo)記。也可省略結(jié)束標(biāo)記。 一個強(qiáng)制換段標(biāo)記一個強(qiáng)制換段標(biāo)記可以看作是兩個強(qiáng)制換行標(biāo)記可以看作是兩個強(qiáng)制換行標(biāo)記 。 其中屬性其中屬性alignalign用來設(shè)置段落的對齊方式，可以為用來設(shè)置段落的對齊方式，可以為leftleft、centercenter或或rightright，分別表示居左、居中、居右。默認(rèn)時默認(rèn)，分別表示居左、居中、居右。默認(rèn)時默認(rèn)為為leftleft。 格式為：格式為：文字文字 337.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格

38、文檔的格式與風(fēng)格2 2段落格式化段落格式化 ( (3) )分區(qū)顯示標(biāo)記分區(qū)顯示標(biāo)記 格式格式:文本或圖象文本或圖象 文本塊、一段文字或標(biāo)題在網(wǎng)頁上的布局都有文本塊、一段文字或標(biāo)題在網(wǎng)頁上的布局都有3 3種方式：左對齊、種方式：左對齊、居中和右對齊。在標(biāo)記中使用居中和右對齊。在標(biāo)記中使用alignalign屬性，其屬性取值分別為：屬性，其屬性取值分別為：leftleft、centercenter、rightright?？梢栽O(shè)置布局的標(biāo)記有：。可以設(shè)置布局的標(biāo)記有：、 、。當(dāng)在許多段落中設(shè)置對齊方式。當(dāng)在許多段落中設(shè)置對齊方式時，常使用時，常使用標(biāo)記。標(biāo)記。 347.2 HTML7.2 HTML語

39、言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格2 2段落格式化段落格式化 ( (3) )分區(qū)顯示標(biāo)記分區(qū)顯示標(biāo)記 實(shí)例實(shí)例1 1，參照右圖，參照右圖 分區(qū)顯示標(biāo)記的應(yīng)用分區(qū)顯示標(biāo)記的應(yīng)用 居中居中centercenter 居居中中 centercenter 居左居左leftleft 居左居左 leftleft 居右居右rightright 居右居右 rightright 357.2 HTML7.2 HTML語言語言 7.2.2 7.2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格2 2段落格式化段落格式化 ( (4) )水平線水平線 格式為：格式為：hr align= align a

40、lign設(shè)定橫線放置的位置，其屬性取值為：設(shè)定橫線放置的位置，其屬性取值為：leftleft、centercenter、rightright。 Size Size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為2 2。 Width Width設(shè)定線段長度，可以是絕對值或相對值。所謂絕對值，是指線設(shè)定線段長度，可以是絕對值或相對值。所謂絕對值，是指線段的長度是固定的，不隨窗口尺寸的改變而改變。所謂相對值，是指長段的長度是固定的，不隨窗口尺寸的改變而改變。所謂相對值，是指長度相對于窗口的寬度而定，窗口的寬度改變時，線段的長度也隨之增減，度相對于窗口的寬度而定，窗口的寬度改變時，

41、線段的長度也隨之增減，默認(rèn)值為默認(rèn)值為100%100%，即始終填滿當(dāng)前窗口。，即始終填滿當(dāng)前窗口。 NoshadeNoshade設(shè)定線條為無陰影，若默認(rèn)則有陰影或立體效果。設(shè)定線條為無陰影，若默認(rèn)則有陰影或立體效果。 Color Color設(shè)定線條顏色，默認(rèn)為黑色?？梢圆捎妙伾拿Q。顏色可以設(shè)定線條顏色，默認(rèn)為黑色?？梢圆捎妙伾拿Q。顏色可以用相應(yīng)英文單詞或以用相應(yīng)英文單詞或以“#”#”引導(dǎo)的一個十六進(jìn)制代碼來表示。引導(dǎo)的一個十六進(jìn)制代碼來表示。367.2 HTML7.2 HTML語言語言 7.2.3 7.2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接1 1加入圖像、視頻、動畫加入圖像、

42、視頻、動畫(1)(1)插入圖形插入圖形 格式為格式為： 例：例： =10 align=middle 設(shè)置網(wǎng)頁的背景圖像、背景顏色可參照設(shè)置網(wǎng)頁的背景圖像、背景顏色可參照BODYBODY標(biāo)記的相關(guān)屬性。標(biāo)記的相關(guān)屬性。377.2 HTML7.2 HTML語言語言 7.2.3 7.2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接1 1加入圖像、視頻、動畫加入圖像、視頻、動畫(2)(2)插入背景音樂插入背景音樂 1) 1)音頻標(biāo)記音頻標(biāo)記 能在網(wǎng)頁中加入背景聲音，能在網(wǎng)頁中加入背景聲音，格式為格式為： srcsrc=your.midyour.mid ：設(shè)定：設(shè)定 midimidi 檔案及路徑，可以是

43、相對或絕對。檔案及路徑，可以是相對或絕對。 autostartautostart=true=true ：是否在音樂檔下載完之后就自動播放。：是否在音樂檔下載完之后就自動播放。truetrue 是，是，falsefalse 否否 （默認(rèn)值（默認(rèn)值) )。 loop=infiniteloop=infinite ：是否自動反復(fù)播放。：是否自動反復(fù)播放。LOOP=2LOOP=2 表示重復(fù)兩次，表示重復(fù)兩次，InfiniteInfinite 表示重復(fù)多次。表示重復(fù)多次。 要加入的背景聲音文件的格式為要加入的背景聲音文件的格式為.wav.wav、.mid.mid、.ram.ram等，播放次數(shù)為等，播放次數(shù)

44、為-1-1時，聲音將一直播放直到關(guān)閉網(wǎng)頁。時，聲音將一直播放直到關(guān)閉網(wǎng)頁。387.2 HTML7.2 HTML語言語言 7.2.3 7.2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接1 1加入圖像、視頻、動畫加入圖像、視頻、動畫(2)(2)插入背景音樂插入背景音樂 2)2)使用使用EMBEDEMBED標(biāo)簽嵌入音樂文件標(biāo)簽嵌入音樂文件 使用使用BGSOUNDBGSOUND標(biāo)簽嵌入背景音樂時，當(dāng)最小化窗口時標(biāo)簽嵌入背景音樂時，當(dāng)最小化窗口時BGSOUNDBGSOUND就會暫停，就會暫停，為了保證背景音樂的連貫性，建議使用為了保證背景音樂的連貫性，建議使用HIDDENHIDDEN了的了的EMBED

45、EMBED標(biāo)簽。標(biāo)簽。embed =true loop=true hidden=true srcsrc=your.midyour.mid ：設(shè)定：設(shè)定midimidi檔案及路徑，可以是相對或絕對檔案及路徑，可以是相對或絕對autostartautostart=true=true：是否在音樂檔下載完之后就自動播放。：是否在音樂檔下載完之后就自動播放。truetrue是，是，falsefalse否否( (默認(rèn)值默認(rèn)值) )loop=trueloop=true：是否自動反復(fù)播放。：是否自動反復(fù)播放。LOOP=2 LOOP=2 表示重復(fù)兩次，表示重復(fù)兩次，truetrue是，是， falsefalse

46、否否hidden=truehidden=true：是否完全隱藏控制畫面，：是否完全隱藏控制畫面，truetrue為是，為是，nono為否為否( (默認(rèn)默認(rèn)值值) )397.2 HTML7.2 HTML語言語言 7.2.3 7.2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接1 1加入圖像、視頻、動畫加入圖像、視頻、動畫(3)(3)插入視頻插入視頻 1) 1)用用 標(biāo)記的標(biāo)記的dynsrcdynsrc屬性可以向網(wǎng)頁中加入屬性可以向網(wǎng)頁中加入. .aviavi視頻剪輯文件。視頻剪輯文件。格式為格式為： BorderBorder：邊框大小。：邊框大小。SrcSrc：在瀏覽器尚未完全讀入：在瀏覽器尚未

47、完全讀入AVIAVI文件時，先在文件時，先在AVIAVI播放區(qū)域顯示的圖像。播放區(qū)域顯示的圖像。DynsrcDynsrc：指定播放視頻文件的路徑和文件名。：指定播放視頻文件的路徑和文件名。LoopLoop：指定播放循環(huán)的次數(shù)。當(dāng)為：指定播放循環(huán)的次數(shù)。當(dāng)為-1-1時，則反復(fù)播放。時，則反復(fù)播放。LoopdelayLoopdelay：兩次播放的時間間隔。：兩次播放的時間間隔。StartStart：指定何時開始播放。：指定何時開始播放。FileopenFileopen是文件打開時，是文件打開時，mouseovermouseover是鼠標(biāo)是鼠標(biāo)移到視頻文件上時。移到視頻文件上時。2)2)插入插入fl

48、ashflash用用標(biāo)記，其格式為標(biāo)記，其格式為embed 文件文件407.2 HTML7.2 HTML語言語言 7.2.3 7.2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接2 2加入超級鏈接加入超級鏈接 超鏈接（超鏈接（HyperlinkHyperlink）可以看作是一個熱點(diǎn)，它可以從當(dāng)前）可以看作是一個熱點(diǎn)，它可以從當(dāng)前WebWeb頁定義的頁定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁的某個位置、位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁的某個位置、InternetInternet或本地硬盤或局域或本地硬盤或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體

49、文件。 當(dāng)當(dāng)WebWeb頁包含超鏈接時，頁包含超鏈接時，WebWeb頁中的外觀形式為彩色且?guī)聞澗€的文字或頁中的外觀形式為彩色且?guī)聞澗€的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接的顯圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接的顯示文本或圖片時，將變成手形。超文本鏈接使用錨點(diǎn)標(biāo)記示文本或圖片時，將變成手形。超文本鏈接使用錨點(diǎn)標(biāo)記來定義。來定義。標(biāo)標(biāo)記的記的格式為格式為：a 熱點(diǎn)熱點(diǎn)417.2 HTML7.2 HTML語言語言 7.2.3 7.2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接2 2加入超級鏈接加入超級鏈接 (1)(1)屬性屬性href

50、href為超文本引用，它的值為一個為超文本引用，它的值為一個URLURL，是目標(biāo)資源的有效地址。，是目標(biāo)資源的有效地址。在書寫在書寫URLURL時要注意，如果資源放在自己的服務(wù)器上，可以寫相對路徑。否時要注意，如果資源放在自己的服務(wù)器上，可以寫相對路徑。否則，應(yīng)寫絕對路徑則，應(yīng)寫絕對路徑. . (2) (2)屬性屬性namename指定當(dāng)前文檔內(nèi)的一個字符串作為鏈接時可以使用有效的指定當(dāng)前文檔內(nèi)的一個字符串作為鏈接時可以使用有效的目標(biāo)資源的地址。目標(biāo)資源的地址。( (注意：注意：HrefHref不能與不能與namename同時使用。同時使用。) ) (3)Target=”_blank” (3)

51、Target=”_blank”或或Target=”new”Target=”new”，將鏈接打開的空白頁面或在，將鏈接打開的空白頁面或在新的瀏覽器窗口中打開。新的瀏覽器窗口中打開。 Target=”_parent” Target=”_parent”，將鏈接的頁面內(nèi)容，顯示在直接父框架窗口中。，將鏈接的頁面內(nèi)容，顯示在直接父框架窗口中。 Target=”_self” Target=”_self”，將鏈接的頁面內(nèi)容，顯示在當(dāng)前窗口中（默認(rèn)值）。，將鏈接的頁面內(nèi)容，顯示在當(dāng)前窗口中（默認(rèn)值）。 Target=”_top” Target=”_top”，將框架中鏈接的頁面內(nèi)容，顯示在沒有框架的窗口，將框架

52、中鏈接的頁面內(nèi)容，顯示在沒有框架的窗口中。中。 Target=” Target=”框架名稱框架名稱”，只運(yùn)用于框架中，若被設(shè)定則鏈接結(jié)果將顯示，只運(yùn)用于框架中，若被設(shè)定則鏈接結(jié)果將顯示于該于該“框架名稱框架名稱”指定的框架窗口中，框架窗口名稱是事先由框架標(biāo)記所命指定的框架窗口中，框架窗口名稱是事先由框架標(biāo)記所命名的，可以理解為程序設(shè)計中的變量名稱。名的，可以理解為程序設(shè)計中的變量名稱。427.2 HTML7.2 HTML語言語言 7.2.3 7.2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接2 2加入超級鏈接加入超級鏈接 (4)(4)創(chuàng)建指向其他頁面的鏈接，就是在當(dāng)前頁面與其他相關(guān)頁面間建立

53、超創(chuàng)建指向其他頁面的鏈接，就是在當(dāng)前頁面與其他相關(guān)頁面間建立超鏈接。無論目標(biāo)文件與當(dāng)前文件的目錄關(guān)系如何，其格式為：鏈接。無論目標(biāo)文件與當(dāng)前文件的目錄關(guān)系如何，其格式為：a .html” (5) (5)創(chuàng)建指向本頁中的鏈接時，需要定義兩個標(biāo)記：一個為超級鏈接標(biāo)記，創(chuàng)建指向本頁中的鏈接時，需要定義兩個標(biāo)記：一個為超級鏈接標(biāo)記，另一個為書簽標(biāo)記。格式為：另一個為書簽標(biāo)記。格式為：a 。書簽為該超級鏈。書簽為該超級鏈接的目標(biāo)，定義格式為：接的目標(biāo)，定義格式為：a name=。同理，如果要創(chuàng)建指向。同理，如果要創(chuàng)建指向其他頁面中的書簽，定義的格式為：其他頁面中的書簽，定義的格式為：a 。 (6) (6

54、)在網(wǎng)頁中，超級鏈接還可以指向下載文件和電子郵件。他們的格式分在網(wǎng)頁中，超級鏈接還可以指向下載文件和電子郵件。他們的格式分別為：別為：a ；a (7) (7)圖像也可以做為鏈接指針。格式為：圖像也可以做為鏈接指針。格式為：a ，可以看出，用，可以看出，用 取代了鏈接指針中取代了鏈接指針中texttext的位的位置。置。 是圖像元素，它表明顯示是圖像元素，它表明顯示urlurl代表的圖像文件。代表的圖像文件。437.2 HTML7.2 HTML語言語言 7.2.4 7.2.4 表格編輯表格編輯1 1表格的基本形式表格的基本形式 表格對于格式化信息有著強(qiáng)大的功能，它能控制各種信息的位置，使表格對于

55、格式化信息有著強(qiáng)大的功能，它能控制各種信息的位置，使得頁面結(jié)構(gòu)協(xié)調(diào)一致，用其他標(biāo)記不容易做到的文本對齊，只要把文本塊得頁面結(jié)構(gòu)協(xié)調(diào)一致，用其他標(biāo)記不容易做到的文本對齊，只要把文本塊放到表格中就行了。任何表格都有放到表格中就行了。任何表格都有三個基本要素：表行、表頭和表項(xiàng)三個基本要素：表行、表頭和表項(xiàng)，每，每個要素都有自己的標(biāo)簽個要素都有自己的標(biāo)簽 一個表由一個表由開始，開始，結(jié)束，表的內(nèi)容由結(jié)束，表的內(nèi)容由 ， 和和定義，其中：定義，其中： 說明表的一個行，表有多少行就有多少個說明表的一個行，表有多少行就有多少個 ，即定義表行；，即定義表行； 說明表的列數(shù)和相應(yīng)欄目的名稱，有多少個欄目就有多少

56、個說明表的列數(shù)和相應(yīng)欄目的名稱，有多少個欄目就有多少個 ，即定義表頭；，即定義表頭； 則填充由則填充由 和和 組成的表格，即定義表項(xiàng)。組成的表格，即定義表項(xiàng)。是否用表格線分開為部分內(nèi)容用是否用表格線分開為部分內(nèi)容用borderborder屬性說明。屬性說明。447.2 HTML7.2 HTML語言語言 7.2.4 7.2.4 表格編輯表格編輯1 1表格的基本形式表格的基本形式 實(shí)例實(shí)例1 1：一個有表格線和一個元：一個有表格線和一個元組的組成的表格，參照右圖。組的組成的表格，參照右圖。the simplest html the simplest html filefile 食品食品/ 飲料飲料

57、/ 水果水果/ 面包面包可樂可樂西瓜西瓜 457.2 HTML7.2 HTML語言語言 7.2.4 7.2.4 表格編輯表格編輯2表格的修飾形式表格的修飾形式 (1) (1)有通欄的表有通欄的表 有橫向通欄的表用有橫向通欄的表用 =#屬性說明，屬性說明，colspancolspan表示橫向欄距，表示橫向欄距，# #代表通欄占據(jù)的網(wǎng)格數(shù)，它是一個小于表的橫向網(wǎng)格數(shù)的整數(shù)。代表通欄占據(jù)的網(wǎng)格數(shù)，它是一個小于表的橫向網(wǎng)格數(shù)的整數(shù)。 實(shí)例實(shí)例2 2：下面是一個有表格線和有橫向通欄的表格。：下面是一個有表格線和有橫向通欄的表格。the simplest html filethe simplest htm

58、l file =2食品食品/ 飲料飲料/ 水果水果/ 面包面包牛奶牛奶可樂可樂西瓜西瓜467.2 HTML7.2 HTML語言語言 7.2.4 7.2.4 表格編輯表格編輯2表格的修飾形式表格的修飾形式 (1) (1)有通欄的表有通欄的表 有縱向通欄的表用有縱向通欄的表用rowspan=#屬性說明。屬性說明。rowspan表示縱向欄距，表示縱向欄距，#表示表示通欄占據(jù)的網(wǎng)格數(shù)，小于縱向網(wǎng)絡(luò)數(shù)。需要說明的是有縱向通欄的表，每通欄占據(jù)的網(wǎng)格數(shù)，小于縱向網(wǎng)絡(luò)數(shù)。需要說明的是有縱向通欄的表，每一行必須用一行必須用明確給出一橫向欄目結(jié)束明確給出一橫向欄目結(jié)束,這和表格的基本形式是不同的。這和表格的基本形

59、式是不同的。 實(shí)例實(shí)例3：下面是一個有表格線和有縱向通欄的表格。：下面是一個有表格線和有縱向通欄的表格。the simplest html the simplest html filefile =3早餐早餐/ 食品食品/面包面包/ 飲料飲料/可樂可樂/ 水果水果/西瓜西瓜/ 477.2 HTML7.2 HTML語言語言 7.2.4 7.2.4 表格編輯表格編輯2表格的修飾形式表格的修飾形式 (2) (2)表的大小，邊框?qū)挾龋砀耖g距表的大小，邊框?qū)挾?，表格間距表的大小用表的大小用width=#width=#和和height=#height=#屬性說明。前者為表寬，后者為表高，屬性說明。前者為表

60、寬，后者為表高，# #是是以象素為單位整數(shù)。以象素為單位整數(shù)。表格間距即劃分表格的線的粗細(xì)用標(biāo)記表格間距即劃分表格的線的粗細(xì)用標(biāo)記ellspacingellspacing=#=#表示，表示，# #的單位是象的單位是象素。素。 (3) (3)表中文本的輸出表中文本的輸出 文本與表框的距離用文本與表框的距離用cellpaddingcellpadding=#=#說明。說明。# #的單位是象素。的單位是象素。 表格的寬度大于其中的文本寬度時，文本在其中的輸出位置與用表格的寬度大于其中的文本寬度時，文本在其中的輸出位置與用align=#align=#說明。說明。# #是是 leftleft，centercenter和和rightri