1、文本格式,文本與超鏈接,1,學習目標,掌握FONT標記符的用法，理解物理字符樣式和邏輯字符樣式。 掌握P、BR、Hn、HR標記符的用法，掌握設置段落對齊的方法。 掌握有序列表、無序列表和嵌套列表的構(gòu)造方法。 理解超鏈接的基本概念，掌握A標記符的用法。,2/69,文本格式,文本分段 分段標記符：p 換行標記符：br 水平線標記符：hr 標題標記符：h 段落對齊 文本顯示效果 列表 超鏈,文本格式,文本分段 文本顯示效果 字體控制標記符：font 物理字符樣式 邏輯字符樣式 滾動字幕標記符：marquee 列表 超鏈,文本格式,文本分段 文本顯示效果 列表 有序列表 無序列表 超鏈 相對地址與絕對

2、地址 頁面鏈接 錨點鏈接 電子郵件鏈接,分段標記符：p,分段標記符用于將文檔劃分為段落，標記為 結(jié)束標記符可以省略，在下一個段落開始之前結(jié)束。 連續(xù)的多個等同于一個，不會產(chǎn)生多個段落。,換行標記符：br,僅一個單獨的標記符 強制換行，不分段，仍屬于同一個段落。,演示 p 和 br,第一段 第二段 請注意兩段之間的距離。 第三段 在這里使用，第五段 請注意兩段之間的距離，多個連續(xù)的分段標記符并沒有起到分段的效果。,水平線標記符：hr,只有一個單獨的標記符 在頁面中添加一個水平線，用以上下分隔文檔。 有以下屬性 size：水平線的粗細，單位是像素 widh：水平線的長度，單位是像素，可以是瀏覽器窗

3、口寬度的百分比 noshade：不以加陰影的3D線形式顯示 color：水平線的顏色,演示 hr, ,標題標記符：Hn, 標記符來標識文檔中的標題和副標題，其中 n 是1至6的數(shù)字。 表示最大的標題，表示最小的標題。 瀏覽器自動改變文字的顯示樣式 注意：并非僅僅用于文字的樣式顯示，要切實作為文檔的標題使用。,演示 Hn,此為一級標題 此為二級標題 此為三級標題 此為四級標題 此為五級標題 此為六級標題 此為正常文本,段落對齊,段落的水平對齊方式 align div和center 格式嵌套,align 屬性,align屬性用于設置段落的對齊格式，其值包括： right（右對齊） left（左對齊

4、） center（居中對齊） justif（兩端對齊） align屬性可應用于多種標記符，最典型的是應用于 p、Hn（標題標記符）、hr 等。,14/69,演示 align,第一段 默認為左對齊方式 第二段 align=center 第三段 align=right 請注意兩行之間的距離。雖然換行了，但仍然是同一個段落。 第四段 align=justify,15/69,div 標記符,div標記符用于為文檔分節(jié)，其標記為。 位于 div 標記符中的多段文本將被認為是一個節(jié)，可為它們設置一致的對齊格式。 span 標記符與div類似，僅用于具體文字的樣式（不含對齊方式）。,16/69,演示 div

5、 和 span, 第一段 第二段span標記符控制的文本 第三段 ,CENTER 標記符,如果用戶要將文檔內(nèi)容居中，還可使用 CENTER 標記符，方法為：將需居中的內(nèi)容置于和之間。 改標記符已經(jīng)過時，建議不使用。,18/69,格式嵌套,（1）如果所設置的格式是相容的，則取格式疊加的效果。 （2）如果所設置的格式是沖突的，則取最近樣式符的修飾效果。,19/69,演示 格式嵌套,20/69, 三段使用div設置居中 第一段 第二段 設置左對齊 此為正常文本字體大小設為10 ,FONT標記符,FONT標記符具有3個常用的屬性： SIZE 設置字體大小 COLOR 設置字體顏色 FACE 設置字體樣

6、式 字體標記符的 color 屬性可用來控制文字的顏色。,21/69,size屬性,字號屬性 size 的值可以從1到7，3是默認值。 可以用 + 號或 - 號來作為相對值指定。,22/69,演示 size 和color,23/69,此為正常文本 11113333 -2-2+2+2 55557777 8888 10 10 紅色,face屬性,Face 屬性用來指定字體樣式。 用戶可以指定一個或幾個字體名稱（用逗號隔開）。 盡量使用第一個字體，如果系統(tǒng)沒有該字體，嘗試下一個。 默認中文字體是“宋體”，默認英文字體是“Times New Roman”。,24/69,演示 face,face屬性,常

7、用物理字符樣式,物理字符樣式是指標記符本身說明了所修飾的效果。 常用物理字符樣式標記符有： 黑體標記 斜體標記 下劃線標記等。,26/69,演示 B、I、U,此為正常文本 加粗傾斜下劃線 加粗且傾斜下劃線,其他物理字符樣式標記符,big大字體 small小字體 sub上標 sup下標 strike刪除線,邏輯字符樣式,邏輯字符樣式是指標記符本身說明了所修飾效果的邏輯含義。 例如，ADDRESS標記符說明了“地址”這個含義，但并沒有說明具體的效果。 地址樣式,29/69,滾動字幕 marquee,marquee標記符之間的文本可以滾動 marquee標記符的屬性 width和height： 字幕

8、滾動區(qū)域的寬和高 align：與周圍對象的對齊方式 behavior：滾動方式 bgcolor：背景色 direction：滾動方向（水平） hspace和vspace：左右與上下的間隙 loop：滾動重復的次數(shù)，-1表示無限重復 scrollamount：滾動速度，步進的像素值 scrolldelay：兩次文本重畫之間的毫秒延時數(shù),演示 marquee,此為正常文本 正常滾動文字 往返滾動文字，步進200像素，間隔1秒,有序列表,有序列表（Ordered list）也稱數(shù)字式列表，它是一種在表的各項前顯示有數(shù)字或字母的縮排列表。 定義有序列表需要使用有序列表標記符和列表項（List item

9、）標記符（結(jié)束標記符可省略），語法如下： List item 1 List item 2 ,32/69,有序列表,OL 標記符最常用的屬性type，用來設置數(shù)字序列樣式。取值為： 1：阿拉伯數(shù)字 A：大寫字母 a：小寫字母 I：大寫羅馬數(shù)字 i：小寫羅馬數(shù)字,33/69,演示 有序列表, 列表內(nèi)容第一句 列表內(nèi)容第二句 列表內(nèi)容第三句 列表內(nèi)容第四句 列表內(nèi)容第五句 ,有序列表嵌套, 列表內(nèi)容第一句 列表內(nèi)容第二句 列表內(nèi)容第三句 嵌套列表內(nèi)容1 嵌套列表內(nèi)容2 嵌套列表內(nèi)容3 嵌套列表內(nèi)容4 嵌套列表內(nèi)容5 列表內(nèi)容第四句 列表內(nèi)容第五句 ,無序列表,無序列表（Unordered list）

10、也稱強調(diào)式列表，它是一種在表的各項前顯示有特殊項目符號的縮排列表。 定義無序列表需要使用無序列表標記符和列表項標記符，語法如下： List item 1 List item 2 ,36/69,無序列表,UL 標記符最常用的屬性type，用來設置項目符號樣式。取值為： disc：實心圓 circle：空心圓 square：矩形,37/69,演示 無序列表, 列表內(nèi)容第一句 列表內(nèi)容第二句 列表內(nèi)容第三句 嵌套列表內(nèi)容1 嵌套列表內(nèi)容2 嵌套列表內(nèi)容3 嵌套列表內(nèi)容4 嵌套列表內(nèi)容5 列表內(nèi)容第四句 ,超鏈接基礎,URL（Universal Resources Locator）用于定位Web上的文

11、檔信息。 一個 URL 包括 3 部分：協(xié)議、計算機地址、文件路徑。 協(xié)議：/計算機/文件路徑,39/69,超鏈接基礎絕對URL,絕對URL是指資源的完整地址，包括URL的所有3個部分，即： 協(xié)議：/計算機/文檔名,40/69,超鏈接基礎相對URL,相對URL是指Internet上資源相對于當前頁面的地址，它包含從當前頁面指向目標頁面位置的路徑。 使用相對URL的好處：易于維護,41/69,超鏈接基礎相對URL,使用相對URL時，經(jīng)常使用兩個與DOS類似的符號： 句點（.）表示當前目錄 雙重句點（.）表示當前目錄的上一級目錄,42/69,超鏈接基礎相對URL,43/69,不同類型的超鏈接,根據(jù)

12、超鏈接的目標文件不同，分為： 網(wǎng)頁之間的超鏈接 頁面內(nèi)的超鏈接 文件下載超鏈接 Email超鏈接 空超鏈接,44/69,不同類型的超鏈接,根據(jù)超鏈接源對象的不同，分為： 文本超鏈接 圖像超鏈接（包括圖像映射） 對象超鏈接（例如Flash、Java小程序）,45/69,不同類型的超鏈接,根據(jù)超鏈接實現(xiàn)方式的不同，分為： HTML超鏈接 JavaScript超鏈接 對象超鏈接,46/69,創(chuàng)建超鏈接,A 標記符用于創(chuàng)建超鏈接（結(jié)束標記符不能省略），href 屬性用于指定超鏈接的目標文件。 內(nèi)部網(wǎng)頁超鏈接： 鏈接 外部網(wǎng)頁超鏈接： 鏈接,47/69,創(chuàng)建超鏈接錨點鏈接,使用頁面內(nèi)的超鏈接，首先需要定

13、義錨點，然后在超鏈接中指向該錨點。 定義錨點應使用 指向錨點的超鏈接為：link,48/69,創(chuàng)建超鏈接錨點鏈接,指向其他頁面內(nèi)錨點的超鏈接：link blank link,49/69,演示錨點超鏈接效果,50/69,問題,在剛才的示例里，如果有另外一個同目錄的網(wǎng)頁文件 page2.htm，在該網(wǎng)頁中想訪問示例頁面中的“巫師”所在位置，應如何設置超鏈接？,51/69,創(chuàng)建超鏈接文件下載,當超鏈接目標為瀏覽器不能識別的文件格式時，那么就自動生成了文件下載鏈接。 下載,52/69,演示文件下載效果,53/69,創(chuàng)建超鏈接Email鏈接,Email 控制命令： ?subject= 設置信件主題 ?cc= 設置抄送人 ?bcc= 設置密件抄送人 & 組合多個控制命令,54/69,演示Email鏈接效果,55/69,超鏈接的顯示效果,超鏈接顏色 在BODY標記符中使用LINK 屬性設置未被訪問的鏈接的顏色；VLINK 設置已被訪問過的鏈接的顏色；ALINK 設置活動鏈接（即當前選定的鏈接）的顏色。 下劃線效果 動態(tài)效果（懸停效果、鼠標指針形狀、鼠標指針跟隨效果）,56/69,演示超鏈接顯示效果,57/69,Part 5,使用Dreamweaver開發(fā)網(wǎng)站,58,Dream