文本與超鏈接——網(wǎng)頁設(shè)計第二講

1、1 Web編程基礎(chǔ)編程基礎(chǔ)文本與超鏈接文本與超鏈接2學習目標學習目標掌握掌握FONT標記符的用法，理解物理標記符的用法，理解物理字符樣式和邏輯字符樣式。字符樣式和邏輯字符樣式。掌握掌握P、BR、Hn、HR標記符的用法，標記符的用法，掌握設(shè)置段落對齊的方法。掌握設(shè)置段落對齊的方法。掌握有序列表、無序列表和嵌套列掌握有序列表、無序列表和嵌套列表的構(gòu)造方法。表的構(gòu)造方法。理解超鏈接的基本概念，掌握理解超鏈接的基本概念，掌握A標記標記符的用法。符的用法。掌握使用掌握使用Dreamweaver開發(fā)網(wǎng)站的基開發(fā)網(wǎng)站的基本過程。本過程。3Part 1設(shè)置字符格式設(shè)置字符格式4字符格式字符格式所謂字符格式是指

2、針對段落中的所謂字符格式是指針對段落中的部分文字（一個或一組文字，也部分文字（一個或一組文字，也可以是整個段落的文字）所設(shè)置可以是整個段落的文字）所設(shè)置的格式，通常包括字體、字號、的格式，通常包括字體、字號、文字顏色等。文字顏色等。5FONT標記符標記符FONT標記符具有標記符具有3個常用個常用的屬性：的屬性：SIZE 設(shè)置字體大小設(shè)置字體大小COLOR 設(shè)置字體顏色設(shè)置字體顏色FACE 設(shè)置字體樣式設(shè)置字體樣式6FONT標記符標記符字號屬性字號屬性 size 的值可以從的值可以從1到到7，3是默認值。該屬性值也可以用是默認值。該屬性值也可以用 + 號或號或 - 號來作為相對值指定。號來作為相

3、對值指定。SHOPPING BASKET7演示演示8FONT標記符標記符字體標記符的字體標記符的 color 屬性可用來屬性可用來控制文字的顏色，它的使用方法控制文字的顏色，它的使用方法與正文標記符與正文標記符BODY中使用的中使用的 bgcolor 屬性相同。屬性相同。9演示演示10FONT標記符標記符Face 屬性用來指定字體樣式。屬性用來指定字體樣式。在編制網(wǎng)頁時，通過在在編制網(wǎng)頁時，通過在FONT標標記符中指定記符中指定 face 屬性，用戶可以屬性，用戶可以指定一個或幾個字體名稱（用逗指定一個或幾個字體名稱（用逗號隔開）。號隔開）。11演示演示12常用物理字符樣式常用物理字符樣式物理

4、字符樣式是指標記符本身說物理字符樣式是指標記符本身說明了所修飾的效果。明了所修飾的效果。常用物理字符樣式標記符有：常用物理字符樣式標記符有： 黑體標記黑體標記 斜體標記斜體標記 下劃線標記下劃線標記等。等。13演示演示物理字符樣式效果物理字符樣式效果14常用邏輯字符樣式常用邏輯字符樣式邏輯字符樣式是指標記符本身說邏輯字符樣式是指標記符本身說明了所修飾效果的邏輯含義。例明了所修飾效果的邏輯含義。例如，如，ADDRESS標記符說明了標記符說明了“地地址址”這個含義，但并沒有說明具這個含義，但并沒有說明具體的效果。體的效果。15演示演示邏輯字符樣式效果邏輯字符樣式效果16Part 2設(shè)置段落格式設(shè)置

5、段落格式17段落格式段落格式所謂段落格式是指針對所謂段落格式是指針對 HTML 文文檔中的段落所設(shè)置的格式，例如，檔中的段落所設(shè)置的格式，例如，段落的對齊方式。段落的對齊方式。18分段標記符分段標記符分段標記符用于將文檔劃分為段分段標記符用于將文檔劃分為段落，標記為落，標記為，其中結(jié)束標，其中結(jié)束標記符通?？墒÷?。記符通?？墒÷?。換行標記符用于在文檔中強制斷換行標記符用于在文檔中強制斷行，標記為一個單獨的行，標記為一個單獨的。該。該標記符與分段標記符標記符與分段標記符是有區(qū)是有區(qū)別的。別的。19演示演示P與與BR20標題樣式標題樣式在在 HTML 中，用戶可以通過中，用戶可以通過 Hn 標記符

6、來標識文檔中的標題和副標記符來標識文檔中的標題和副標題，其中標題，其中 n 是是1至至6的數(shù)字；的數(shù)字；H1表示最大的標題，表示最大的標題，H6表示最小的表示最小的標題。使用標題樣式時，必須使標題。使用標題樣式時，必須使用結(jié)束標記符。用結(jié)束標記符。21演示演示標題效果標題效果22添加水平線添加水平線添加水平線的標記符為添加水平線的標記符為HR，它包括，它包括以下屬性：以下屬性： SIZE 屬性用來改變水平線的粗細。屬性用來改變水平線的粗細。 WIDTH 屬性用來更改水平線的長度。屬性用來更改水平線的長度。 NOSHADE 屬性使水平線以實線顯示。屬性使水平線以實線顯示。 COLOR屬性可以控制

7、水平線的顏色。屬性可以控制水平線的顏色。23演示演示水平線效果水平線效果24ALIGN 屬性屬性ALIGN 屬性用于設(shè)置段落的對齊格式，屬性用于設(shè)置段落的對齊格式，其值包括：其值包括：RIGHT（右對齊）、（右對齊）、LEFT（左對齊）、（左對齊）、CENTER（居中對齊）（居中對齊）和和 JUSTIFY（兩端對齊）。（兩端對齊）。ALIGN 屬性可應(yīng)用于多種標記符，最屬性可應(yīng)用于多種標記符，最典型的是應(yīng)用于典型的是應(yīng)用于 P、Hn（標題標記（標題標記符）、符）、HR 等。等。25演示演示段落對齊段落對齊26DIV 標記符標記符DIV 標記符用于為文檔分節(jié)，以標記符用于為文檔分節(jié)，以便為文檔的

8、不同部分應(yīng)用不同的便為文檔的不同部分應(yīng)用不同的段落格式，其標記為段落格式，其標記為。位于位于 DIV 標記符中的多段文本將標記符中的多段文本將被認為是一個節(jié)，可為它們設(shè)置被認為是一個節(jié)，可為它們設(shè)置一致的對齊格式。一致的對齊格式。27CENTER 標記符標記符如果用戶要將文檔內(nèi)容如果用戶要將文檔內(nèi)容居中，還可使用居中，還可使用 CENTER 標記符，方法為：將需標記符，方法為：將需居中的內(nèi)容置于居中的內(nèi)容置于和和之之間。間。28演示演示DIV與與CENTER29格式嵌套格式嵌套（1）如果所設(shè)置的格式是相容的，）如果所設(shè)置的格式是相容的，則取格式疊加的效果。則取格式疊加的效果。（2）如果所設(shè)置的

9、格式是沖突的，）如果所設(shè)置的格式是沖突的，則取最近樣式符的修飾效果。則取最近樣式符的修飾效果。30演示演示格式嵌套格式嵌套 31Part 3設(shè)置列表格式設(shè)置列表格式32有序列表有序列表有序列表（有序列表（Ordered list）也稱數(shù)）也稱數(shù)字式列表，它是一種在表的各項字式列表，它是一種在表的各項前顯示有數(shù)字或字母的縮排列表。前顯示有數(shù)字或字母的縮排列表。33有序列表有序列表定義有序列表需要使用有序列表標定義有序列表需要使用有序列表標記符記符和列表項（和列表項（List item）標記符標記符/（結(jié)束標記符可?。ńY(jié)束標記符可省略），語法如下：略），語法如下： List item 1 List

10、 item 2 34有序列表有序列表OL 標記符最常用的屬性標記符最常用的屬性type，用，用來設(shè)置數(shù)字序列樣式。取值為：來設(shè)置數(shù)字序列樣式。取值為：1、A、a、I、i。35演示演示有序列表有序列表page3236演示演示有序列表的嵌套有序列表的嵌套37無序列表無序列表無序列表（無序列表（Unordered list）也稱）也稱強調(diào)式列表，它是一種在表的各強調(diào)式列表，它是一種在表的各項前顯示有特殊項目符號的縮排項前顯示有特殊項目符號的縮排列表。列表。38無序列表無序列表定義無序列表需要使用無序列表標定義無序列表需要使用無序列表標記符記符和列表項（和列表項（List item）標記符標記符（結(jié)束

11、標記符可?。ńY(jié)束標記符可省略），語法如下：略），語法如下： List item 1 List item 2 39無序列表無序列表UL 標記符最常用的屬性標記符最常用的屬性type，用，用來設(shè)置項目符號樣式。取值為：來設(shè)置項目符號樣式。取值為：disc、circle、square。注意：在注意：在 IE 中，中，type 屬性的取值屬性的取值是區(qū)分大小寫的。是區(qū)分大小寫的。40演示演示無序列表無序列表41演示演示混合嵌套列表混合嵌套列表42Part 3使用超鏈接使用超鏈接43超鏈接基礎(chǔ)超鏈接基礎(chǔ) URL（Universal Resources Locator）用于定位）用于定位Web上的文檔上的

12、文檔信息。信息。 一個一個 URL 包括包括 3 部分：協(xié)議、部分：協(xié)議、計算機地址、文件路徑。計算機地址、文件路徑。協(xié)議：協(xié)議：/計算機計算機/文件路徑文件路徑44超鏈接基礎(chǔ)超鏈接基礎(chǔ)絕對絕對URL絕對絕對URL是指資源的完整地址，是指資源的完整地址，包括包括URL的所有的所有3個部分，即：個部分，即：協(xié)議：協(xié)議：/計算機計算機/文檔名文檔名45超鏈接基礎(chǔ)超鏈接基礎(chǔ)相對相對URL相對相對URL是指是指Internet上資源相對上資源相對于于當前頁面當前頁面的地址，它包含從當?shù)牡刂?，它包含從當前頁面指向目標頁面位置的路徑。前頁面指向目標頁面位置的路徑。使用相對使用相對URL的好處：易于維護的好

13、處：易于維護46超鏈接基礎(chǔ)超鏈接基礎(chǔ)相對相對URL使用相對使用相對URL時，經(jīng)常使用兩個時，經(jīng)常使用兩個與與DOS類似的符號：類似的符號：句點（句點（.）表示當前目錄）表示當前目錄雙重句點（雙重句點（.）表示當前目錄的上）表示當前目錄的上一級目錄一級目錄47超鏈接基礎(chǔ)超鏈接基礎(chǔ)相對相對URL48不同類型的超鏈接不同類型的超鏈接根據(jù)超鏈接的目標文件不同，分為：根據(jù)超鏈接的目標文件不同，分為： 網(wǎng)頁之間的超鏈接網(wǎng)頁之間的超鏈接 頁面內(nèi)的超鏈接頁面內(nèi)的超鏈接 文件下載超鏈接文件下載超鏈接 Email超鏈接超鏈接 空超鏈接空超鏈接49不同類型的超鏈接不同類型的超鏈接根據(jù)超鏈接源對象的不同，分為：根據(jù)超

14、鏈接源對象的不同，分為：文本超鏈接文本超鏈接圖像超鏈接（包括圖像映射）圖像超鏈接（包括圖像映射）對象超鏈接（例如對象超鏈接（例如Flash、Java小小程序）程序）50不同類型的超鏈接不同類型的超鏈接根據(jù)超鏈接實現(xiàn)方式的不同，分根據(jù)超鏈接實現(xiàn)方式的不同，分為：為：HTML超鏈接超鏈接JavaScript超鏈接超鏈接對象超鏈接對象超鏈接51創(chuàng)建超鏈接創(chuàng)建超鏈接 A 標記符用于創(chuàng)建超鏈接（結(jié)束標標記符用于創(chuàng)建超鏈接（結(jié)束標記符不能省略），記符不能省略），href 屬性用于指定屬性用于指定超鏈接的目標文件。超鏈接的目標文件。內(nèi)部網(wǎng)頁超鏈接：內(nèi)部網(wǎng)頁超鏈接：link 外部網(wǎng)頁超鏈接：外部網(wǎng)頁超鏈接：l

15、ink52演示演示超鏈接效果超鏈接效果53創(chuàng)建超鏈接創(chuàng)建超鏈接錨點鏈接錨點鏈接 使用頁面內(nèi)的超鏈接，首先需使用頁面內(nèi)的超鏈接，首先需要定義錨點，然后在超鏈接中指要定義錨點，然后在超鏈接中指向該錨點。向該錨點。 定義錨點應(yīng)使用定義錨點應(yīng)使用 指向錨點的超鏈接為：指向錨點的超鏈接為：link54創(chuàng)建超鏈接創(chuàng)建超鏈接錨點鏈接錨點鏈接指向其他頁面內(nèi)錨點的超鏈接：指向其他頁面內(nèi)錨點的超鏈接：linkblank link55演示演示錨點超鏈接效果錨點超鏈接效果56問題問題在剛才的示例里，如果有另外一在剛才的示例里，如果有另外一個同目錄的網(wǎng)頁文件個同目錄的網(wǎng)頁文件 page2.htm，在該網(wǎng)頁中想訪問示例頁

16、面中的在該網(wǎng)頁中想訪問示例頁面中的“巫師巫師”所在位置，應(yīng)如何設(shè)置所在位置，應(yīng)如何設(shè)置超鏈接？超鏈接？57創(chuàng)建超鏈接創(chuàng)建超鏈接文件下載文件下載 當超鏈接目標為瀏覽器不能識當超鏈接目標為瀏覽器不能識別的文件格式時，那么就自動生別的文件格式時，那么就自動生成了文件下載鏈接。成了文件下載鏈接。下載下載58演示演示文件下載效果文件下載效果59創(chuàng)建超鏈接創(chuàng)建超鏈接Email鏈接鏈接Email控制命令：控制命令： ?subject= 設(shè)置信件主題設(shè)置信件主題 ?cc= 設(shè)置抄送人設(shè)置抄送人 ?bcc= 設(shè)置密件抄送人設(shè)置密件抄送人 & 組合多個控制命令組合多個控制命令60演示演示Email鏈接效果鏈接效果61超鏈接的顯示效果超鏈接的顯示效果超鏈接顏色超鏈接顏色 在在BODY標記符中使用標記符中使用LINK 屬性設(shè)置未屬性設(shè)置未被訪問的鏈接的顏色；被訪問的鏈接的顏色；VLINK 設(shè)置已被設(shè)置已被訪問過的鏈接的顏色；訪問過的鏈接的顏色；ALINK 設(shè)置活動設(shè)置活動鏈接（即當前選定的鏈接）的顏色。鏈接（即當前選定的鏈接）的顏色。下劃線效果下劃線效果動態(tài)效果（懸停效果、鼠標指針形動態(tài)效果（懸停效果、鼠標指針形狀、鼠標指針跟隨效果）狀、鼠標指針跟隨效果）62演示演示超鏈接顯示效果超鏈接顯示效果63Part 5使用使用Dreamweaver開發(fā)網(wǎng)站開發(fā)網(wǎng)站64Dreamweaver的工作界面的工