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

1、第第1 1篇篇 第第3 3章章 網(wǎng)頁中的文本網(wǎng)頁中的文本 3.1 文本的基本編輯文本的基本編輯3.1.1 插入文本、符號、日期插入文本、符號、日期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語法語法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)上大量信息的傳播以文本為主。因此，對于網(wǎng)頁制作人員來說，

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

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

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

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

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

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

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

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

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

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

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

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

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

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