第1篇第3章網(wǎng)頁(yè)中的文本

1、第第1 1篇篇 第第3 3章章 網(wǎng)頁(yè)中的文本網(wǎng)頁(yè)中的文本 3.1 文本的基本編輯文本的基本編輯3.1.1 插入文本、符號(hào)、日期插入文本、符號(hào)、日期3.1.2 添加字體添加字體3.1.3 設(shè)置文本的屬性設(shè)置文本的屬性3.1.4 建立列表建立列表3.2 超鏈接超鏈接3.2.1 路徑路徑3.2.2 建立超鏈接建立超鏈接3.3 樣式樣式3.3.1 CSS語(yǔ)法語(yǔ)法3.3.2 CSS 樣式應(yīng)用樣式應(yīng)用3.3.3 引用外部引用外部CSS文件與導(dǎo)出樣式表文件與導(dǎo)出樣式表思考題思考題3.1 文本的基本編輯文本的基本編輯 互聯(lián)網(wǎng)上大量信息的傳播以文本為互聯(lián)網(wǎng)上大量信息的傳播以文本為主。因此，對(duì)于網(wǎng)頁(yè)制作人員來(lái)說(shuō)，

2、主。因此，對(duì)于網(wǎng)頁(yè)制作人員來(lái)說(shuō)，文本的處理是最基本而重要的技巧之文本的處理是最基本而重要的技巧之一。一。 學(xué)習(xí)網(wǎng)頁(yè)制作首先應(yīng)掌握網(wǎng)頁(yè)中文學(xué)習(xí)網(wǎng)頁(yè)制作首先應(yīng)掌握網(wǎng)頁(yè)中文本的制作和編輯方法。本的制作和編輯方法。3.1.1 插入文本、符號(hào)、日期插入文本、符號(hào)、日期軟回車(chē)和硬回車(chē)軟回車(chē)和硬回車(chē)特殊字符特殊字符日期日期3.1.2 添加字體添加字體執(zhí)行菜單命令執(zhí)行菜單命令“文本文本”|“字體字體”|“編輯字體列表編輯字體列表” 3.1.3 設(shè)置文本的屬性設(shè)置文本的屬性圖圖3-4 文本的文本的“屬性屬性”面板面板【例【例3-1】設(shè)計(jì)一個(gè)只有文字的頁(yè)面。對(duì)照設(shè)計(jì)界面和代碼界面，設(shè)計(jì)一個(gè)只有文字的頁(yè)面。對(duì)照設(shè)計(jì)

3、界面和代碼界面，熟悉文本屬性的標(biāo)簽。熟悉文本屬性的標(biāo)簽。學(xué)習(xí)雙標(biāo)簽學(xué)習(xí)雙標(biāo)簽、及單標(biāo)及單標(biāo)簽簽、的使用的使用 文本的字體、字號(hào)、風(fēng)格等屬性以文本的字體、字號(hào)、風(fēng)格等屬性以CSS樣式寫(xiě)在樣式寫(xiě)在中中 自定義的自定義的CSS樣式優(yōu)先級(jí)高于網(wǎng)頁(yè)樣式樣式優(yōu)先級(jí)高于網(wǎng)頁(yè)樣式body,td,th 的優(yōu)先級(jí)的優(yōu)先級(jí) 3.1.4 建立列表建立列表 與列表有關(guān)的標(biāo)簽為與列表有關(guān)的標(biāo)簽為、等，格式、功能和樣例見(jiàn)表等，格式、功能和樣例見(jiàn)表3-2。 通過(guò)文本的通過(guò)文本的“屬性屬性”面板建立列表面板建立列表【例【例3-2】混合列表示例混合列表示例 3.2 超鏈接超鏈接 3.2.1 路徑路徑絕對(duì)路徑絕對(duì)路徑 ：是：是In

4、ternet上資源的完整地址。上資源的完整地址。 包括包括3部分：協(xié)議種類(lèi)、放有所須文件的計(jì)算機(jī)地址（計(jì)部分：協(xié)議種類(lèi)、放有所須文件的計(jì)算機(jī)地址（計(jì)算機(jī)域名）、具體文件的路徑及文件名。算機(jī)域名）、具體文件的路徑及文件名。協(xié)議協(xié)議:/計(jì)算機(jī)域名計(jì)算機(jī)域名/文件路徑及文件名文件路徑及文件名 創(chuàng)建對(duì)站點(diǎn)以外的鏈接必須用絕對(duì)路徑。創(chuàng)建對(duì)站點(diǎn)以外的鏈接必須用絕對(duì)路徑。 根相對(duì)路徑根相對(duì)路徑 ：從站點(diǎn)根文件夾到文檔所經(jīng)過(guò)的路程，：從站點(diǎn)根文件夾到文檔所經(jīng)過(guò)的路程，以斜杠以斜杠/開(kāi)始，如開(kāi)始，如/html/*.htm。 瀏覽器不能像服務(wù)器那樣識(shí)別站點(diǎn)根目錄，故與根目錄瀏覽器不能像服務(wù)器那樣識(shí)別站點(diǎn)根目錄，故

5、與根目錄相對(duì)的路徑必須放在遠(yuǎn)程服務(wù)器上才能瀏覽相對(duì)的路徑必須放在遠(yuǎn)程服務(wù)器上才能瀏覽 。文檔相對(duì)路徑文檔相對(duì)路徑 ：相對(duì)當(dāng)前文檔的路徑：相對(duì)當(dāng)前文檔的路徑 。3.2.2 建立超鏈接建立超鏈接建立超鏈接由錨點(diǎn)（建立超鏈接由錨點(diǎn)（anchor）標(biāo)簽）標(biāo)簽定義：定義： 熱點(diǎn)熱點(diǎn) 屬性屬性href指定超鏈接的目標(biāo)網(wǎng)頁(yè)地址，包括路徑和文件名指定超鏈接的目標(biāo)網(wǎng)頁(yè)地址，包括路徑和文件名 屬性屬性target指定超鏈接文件被打開(kāi)的目標(biāo)窗口，有如下指定超鏈接文件被打開(kāi)的目標(biāo)窗口，有如下4個(gè)選項(xiàng)：個(gè)選項(xiàng)： _blank：將鏈接的文件載入到新的無(wú)標(biāo)題瀏覽器窗口中。：將鏈接的文件載入到新的無(wú)標(biāo)題瀏覽器窗口中。 _pa

6、rent：將鏈接的文件載入到父框架，若該框架非嵌入式框架，則鏈接到：將鏈接的文件載入到父框架，若該框架非嵌入式框架，則鏈接到整個(gè)瀏覽器窗口。整個(gè)瀏覽器窗口。 _self（默認(rèn)值）：將鏈接的文件載入到自身框架或自身窗口中。（默認(rèn)值）：將鏈接的文件載入到自身框架或自身窗口中。 _top：將鏈接的文件載入到整個(gè)瀏覽器窗口中，并刪除所有框架。：將鏈接的文件載入到整個(gè)瀏覽器窗口中，并刪除所有框架。在在Dreamweaver中提供了中提供了6種常用的鏈接：外部文檔鏈接、書(shū)種常用的鏈接：外部文檔鏈接、書(shū)簽鏈接、簽鏈接、E-mail鏈接、無(wú)址鏈接、腳本鏈接和指向下載文件的鏈接、無(wú)址鏈接、腳本鏈接和指向下載文件

7、的鏈接。鏈接。 3.2.2 建立超鏈接建立超鏈接1外部文檔鏈接外部文檔鏈接指鏈接到本文檔之外的文檔，包括站內(nèi)和站外的網(wǎng)頁(yè)。指鏈接到本文檔之外的文檔，包括站內(nèi)和站外的網(wǎng)頁(yè)。 在熱字在熱字“屬性屬性”面板的面板的“鏈接鏈接”框中填入超鏈接的外部文檔地址框中填入超鏈接的外部文檔地址（屬性（屬性href的值的值)； 在在“目標(biāo)目標(biāo)”下拉列表框中設(shè)置超鏈接的目標(biāo)窗口下拉列表框中設(shè)置超鏈接的目標(biāo)窗口(屬性屬性target的值的值)。 2書(shū)簽鏈接書(shū)簽鏈接 熱點(diǎn)熱點(diǎn) 建立書(shū)簽：建立書(shū)簽：“插入插入”面板的面板的“命名錨記命名錨記” 按鈕按鈕 鏈接書(shū)簽：鏈接書(shū)簽： # 書(shū)簽名。書(shū)簽名。3無(wú)址鏈接無(wú)址鏈接返回頁(yè)面

8、頂端，形成手形光標(biāo)返回頁(yè)面頂端，形成手形光標(biāo) 熱點(diǎn)熱點(diǎn) 不返回頁(yè)面頂端，形成手形光標(biāo)不返回頁(yè)面頂端，形成手形光標(biāo) 熱點(diǎn)熱點(diǎn) 3.2.2 建立超鏈接建立超鏈接4E-mail鏈接（電子郵件鏈接）鏈接（電子郵件鏈接） 熱點(diǎn)熱點(diǎn) “插入插入”面板中的面板中的“電子郵件鏈接電子郵件鏈接” 按鈕按鈕5腳本鏈接腳本鏈接 在選中熱字的在選中熱字的link框中直接寫(xiě)入腳本?？蛑兄苯訉?xiě)入腳本。 例：例：JavaScript:alert(確定刪除嗎確定刪除嗎)6指向下載文件的鏈接指向下載文件的鏈接 鏈接的目標(biāo)文件不是鏈接的目標(biāo)文件不是HTML文件，則作為下載文件，格式：文件，則作為下載文件，格式： 熱點(diǎn)熱點(diǎn) 【例【

9、例3-3】試制作外部文檔鏈接、外部文檔書(shū)簽鏈接、本文檔書(shū)試制作外部文檔鏈接、外部文檔書(shū)簽鏈接、本文檔書(shū)簽鏈接、簽鏈接、E-mail鏈接、無(wú)址鏈接和腳本鏈接。鏈接、無(wú)址鏈接和腳本鏈接。 3.3 樣式樣式 樣式是一組可以控制文本塊、段落或整篇文檔外觀的格式樣式是一組可以控制文本塊、段落或整篇文檔外觀的格式屬性。使用外部樣式文件可以一次控制若干篇文檔的格式屬性。使用外部樣式文件可以一次控制若干篇文檔的格式 。 CSS（Cascading Style Sheets）即級(jí)聯(lián)樣式表或?qū)盈B樣）即級(jí)聯(lián)樣式表或?qū)盈B樣式表通過(guò)樣式名或式表通過(guò)樣式名或HTML標(biāo)簽表示，可以控制絕大多數(shù)的傳標(biāo)簽表示，可以控制絕大多數(shù)

10、的傳統(tǒng)文本格式，如字體、字號(hào)和對(duì)齊方式等，還可以指定位置、統(tǒng)文本格式，如字體、字號(hào)和對(duì)齊方式等，還可以指定位置、鼠標(biāo)指針形狀和其他特殊效果。鼠標(biāo)指針形狀和其他特殊效果。 為了防止某些瀏覽器不識(shí)別某些為了防止某些瀏覽器不識(shí)別某些 CSS樣式，可以用注釋樣式，可以用注釋標(biāo)簽標(biāo)簽將將CSS樣式括起來(lái)。樣式括起來(lái)。 3.3.1 CSS語(yǔ)法語(yǔ)法 CSS 樣式表位于樣式表位于XHTML代碼中的代碼中的head標(biāo)簽內(nèi)，標(biāo)簽內(nèi)，由由3部分構(gòu)成：選擇符（部分構(gòu)成：選擇符（selector）、屬性）、屬性（properties）和屬性值（）和屬性值（value）：）： Selector properties1:

11、value1 ; /*第第1個(gè)屬性名及屬性值個(gè)屬性名及屬性值*/properties2 : value 2; /*第第2個(gè)屬性名及屬性值個(gè)屬性名及屬性值*/3.3.1 CSS語(yǔ)法語(yǔ)法規(guī)則規(guī)則 ：（1）標(biāo)簽選擇符和選擇符組：把相同屬性和值的標(biāo)簽組合起來(lái)書(shū)）標(biāo)簽選擇符和選擇符組：把相同屬性和值的標(biāo)簽組合起來(lái)書(shū)寫(xiě)，用逗號(hào)隔開(kāi)。寫(xiě)，用逗號(hào)隔開(kāi)。 如：如：p, tablefont-size:10pt （2）類(lèi)選擇符：可用于任意標(biāo)簽的自定義樣式，標(biāo)簽名與自定義）類(lèi)選擇符：可用于任意標(biāo)簽的自定義樣式，標(biāo)簽名與自定義樣式名用西文點(diǎn)分隔。樣式名用西文點(diǎn)分隔。 如：如：p.lefttext-align: left

12、 /*定義段落居左定義段落居左*/（3）ID選擇符：只對(duì)某特定元素定義的單獨(dú)的樣式。選擇符：只對(duì)某特定元素定義的單獨(dú)的樣式。 如：如：# righttext-align: right /*只對(duì)只對(duì)id=right的段落起作用的段落起作用*/（4）包含選擇符：定義具有包含關(guān)系的元素樣式。若標(biāo)簽）包含選擇符：定義具有包含關(guān)系的元素樣式。若標(biāo)簽1內(nèi)包含內(nèi)包含標(biāo)簽標(biāo)簽2，包含選擇符只對(duì)標(biāo)簽，包含選擇符只對(duì)標(biāo)簽1內(nèi)的標(biāo)簽內(nèi)的標(biāo)簽2有效，對(duì)單獨(dú)的標(biāo)簽有效，對(duì)單獨(dú)的標(biāo)簽1或標(biāo)簽或標(biāo)簽2無(wú)效。無(wú)效。 如：如：Table afont-size:16px /*只對(duì)表格內(nèi)的鏈接起作用只對(duì)表格內(nèi)的鏈接起作用*/ 樣式

13、表具有層疊性，也稱(chēng)為繼承性，即內(nèi)層標(biāo)簽的樣式繼承外樣式表具有層疊性，也稱(chēng)為繼承性，即內(nèi)層標(biāo)簽的樣式繼承外層標(biāo)簽的樣式。層標(biāo)簽的樣式。 3.3.2 CSS 樣式應(yīng)用樣式應(yīng)用先創(chuàng)建先創(chuàng)建CSS樣式，再對(duì)選定文本應(yīng)用樣式，再對(duì)選定文本應(yīng)用CSS樣式。樣式。對(duì)選定文本用了某對(duì)選定文本用了某CSS樣式后，若又改變了該樣樣式后，若又改變了該樣式的格式，則修改之前用了該樣式的文本自動(dòng)更式的格式，則修改之前用了該樣式的文本自動(dòng)更新格式。圖新格式。圖3-15 “CSS樣式樣式”面板面板CSS樣式創(chuàng)建之后，只對(duì)本網(wǎng)頁(yè)有效。以往創(chuàng)建樣式創(chuàng)建之后，只對(duì)本網(wǎng)頁(yè)有效。以往創(chuàng)建的的CSS樣式不存在于新開(kāi)文件的樣式不存在于新

14、開(kāi)文件的CSS樣式列表樣式列表中，新網(wǎng)頁(yè)須重新附加中，新網(wǎng)頁(yè)須重新附加CSS文件。文件。3.3.3 使用使用CSS 樣式樣式在新建在新建CSS樣式窗口中，需要設(shè)置樣式窗口中，需要設(shè)置3個(gè)參數(shù)：個(gè)參數(shù)：選擇器類(lèi)型選擇器類(lèi)型樣式名稱(chēng)樣式名稱(chēng)樣式定義的范圍樣式定義的范圍 3.3.3 使用使用CSS 樣式樣式1“類(lèi)類(lèi)”選擇器選擇器【例【例3-4】在文字上應(yīng)用樣式。在文字上應(yīng)用樣式?！纠纠?-5】為圖片設(shè)置具有透明效果（為圖片設(shè)置具有透明效果（Alpha濾鏡）、風(fēng)濾鏡）、風(fēng)吹效果（吹效果（Blur濾鏡）、黑白效果（濾鏡）、黑白效果（Gray濾鏡）、反相濾鏡）、反相效果（效果（Invert濾鏡）的樣式。

15、濾鏡）的樣式。2“標(biāo)簽標(biāo)簽”選擇器選擇器3“高級(jí)高級(jí)”選擇器選擇器【例【例3-6】試取消鼠標(biāo)指向超鏈接文本時(shí)超鏈接文本上試取消鼠標(biāo)指向超鏈接文本時(shí)超鏈接文本上的下劃線，并改變鼠標(biāo)指向時(shí)的手形光標(biāo)。的下劃線，并改變鼠標(biāo)指向時(shí)的手形光標(biāo)。3.3.4 引用外部引用外部CSS文件與導(dǎo)出樣式表文件與導(dǎo)出樣式表1引用外部引用外部CSS文件文件“鏈接鏈接”是通過(guò)指針指向外部是通過(guò)指針指向外部CSS文件，文件，“導(dǎo)入導(dǎo)入”相當(dāng)于存在內(nèi)部樣式表中，相當(dāng)于存在內(nèi)部樣式表中，這個(gè)區(qū)別可以從它們?cè)诖a中的位置看到。這個(gè)區(qū)別可以從它們?cè)诖a中的位置看到。 /* 鏈接的鏈接的CSS文件文件 */【例【例3-7】在系統(tǒng)中查找在系統(tǒng)中查找help.css，并引入自己的網(wǎng)頁(yè)。，并引入自己的網(wǎng)頁(yè)。 3.3.4 引用外部引用外部CSS文件與導(dǎo)出樣式表文件與導(dǎo)出樣式表