《網(wǎng)頁(yè)中的文字》課件

1、在Dreamweaver中插入文本 2.5實(shí)踐與練習(xí)：使用項(xiàng)目列表和編號(hào)列表 2.3實(shí)踐與練習(xí)：一封家書(shū)2.2理解與文字相關(guān)的HTML標(biāo)簽 2.1第3講 網(wǎng)頁(yè)中的文字實(shí)踐與練習(xí)：輸入帶有下標(biāo)的公式 2.4小結(jié) 在Dreamweaver中插入文本 2.5實(shí)踐與練習(xí)：使用項(xiàng) 網(wǎng)頁(yè)中最基本也最常用的是文字。因此在這一章，開(kāi)始講解如何在網(wǎng)頁(yè)中使用文字以及設(shè)置文字的方法。本章將介紹使用HTML對(duì)文本進(jìn)行設(shè)置的方法。 網(wǎng)頁(yè)中最基本也最常用的是文字。因此在這一2.1 理解與文字相關(guān)的HTML標(biāo)簽2.1.1 換行標(biāo)簽 2.1 理解與文字相關(guān)的HTML標(biāo)簽2.1.1 換行標(biāo)簽換行示例登鸛雀樓 白日依山盡， 黃河

2、入海流。 欲窮千里目， 更上一層樓。 2.1.32 段落標(biāo)簽 為了使文字段落排列得整齊，在文字段落之間，我們常用“”和“”來(lái)做標(biāo)簽。 注意：其中“”標(biāo)簽是可以省略的，因?yàn)橄乱粋€(gè)“”標(biāo)簽的開(kāi)始就意味著上一個(gè)“”標(biāo)簽的結(jié)束。2.1.32 段落標(biāo)簽 為了使文字段落排列 “”標(biāo)簽還有一個(gè)屬性“ALING”，它用來(lái)指明字符顯示時(shí)的對(duì)齊方式，一般值有“CENTER”、“LEFT”、“RIGHT”3種。 . “”標(biāo)簽還有一個(gè)屬性“ALING”圖2-3 例2-3顯示效果圖2-3 例2-3顯示效果段落標(biāo)簽浣溪沙 一曲新詞酒一杯，去年天氣舊亭臺(tái)，夕陽(yáng)西下幾時(shí)回。 無(wú)可奈何花落去，似曾相識(shí)燕歸來(lái)。小園香徑幾徘徊。

3、2.1.3字體設(shè)置標(biāo)簽設(shè)置字體標(biāo)簽設(shè)置字體大小.“SIZE”屬性的有效值范圍為17，其中默認(rèn)值為3。我們可以在“SIZE”屬性值之前加上“”、“”字符，來(lái)指定相對(duì)于字號(hào)初始值的增量或減量。 2.1.3字體設(shè)置標(biāo)簽設(shè)置字體標(biāo)簽/fon圖2-5 設(shè)置文字大小圖2-5 設(shè)置文字大小文字的字體與樣式 HTML提供了定義字體的功能，使用“”標(biāo)簽的“face”屬性來(lái)完成這個(gè)工作?！癴ace”的屬性值可以是本機(jī)上的任一字體類(lèi)型，但要注意的是，只有對(duì)方的計(jì)算機(jī)中裝有相同的字體才可以在對(duì)方的瀏覽器中出現(xiàn)你預(yù)先設(shè)計(jì)的風(fēng)格。.文字的字體與樣式 HTML提供了定義字體的 文字的顏色 文字顏色設(shè)置格式如下： 現(xiàn)在通過(guò)例

4、2-8來(lái)看看文字顏色設(shè)置的效果。 文字的顏色 文字顏色設(shè)置格式如下：圖2-8 設(shè)置文字顏色圖2-8 設(shè)置文字顏色 例如在HTML語(yǔ)言規(guī)范中，可以通過(guò)兩種方式指定顏色：（1）一種方式是以定義好的顏色名稱(chēng)表示，具體的顏色名稱(chēng)針對(duì)不同的瀏覽器也有所不同；（2）另一種方式通過(guò)一個(gè)以“#”開(kāi)頭的6位十六進(jìn)制數(shù)值表示一種顏色，6位數(shù)字分為3組，每組兩位，依次表示紅、綠、藍(lán)3種顏色的強(qiáng)度。 例如在HTML語(yǔ)言規(guī)范中，可以通過(guò)兩種方顏 色 名 稱(chēng)十六進(jìn)制數(shù)顏 色 名 稱(chēng)十六進(jìn)制數(shù)顏 色 名 稱(chēng)十六進(jìn)制數(shù)Black#000000White#FFFFFFPurple#800080Green#008000Yello

5、w#FFFF00Teal#008080Silver#C0C0C0Maroon#800000Fuchsia#FF00FFLime#00FF00Navy#000080Aqua#00FFFFGray#808080Red#FF0000Olive#808000Blue#0000FF表2-1 顏色名稱(chēng)及其對(duì)應(yīng)的十六進(jìn)制數(shù)表 顏 色 名 稱(chēng)十六進(jìn)制數(shù)顏 色 名 稱(chēng)十六進(jìn)制數(shù)顏 色 名 （1）“”和“”：粗體。（2）“”和“”：斜體。（3）“”和“”：加下劃線。（4）“”和“”:大型字體。（5）“”和“”:小型字體。其他字體設(shè)置標(biāo)簽（1）“”和“”：粗體。其他字體設(shè)置標(biāo)簽圖2-7 設(shè)置文字樣式圖2-7 設(shè)置文

6、字樣式2.1.4 位置控制 通過(guò)“ALIGN”屬性可以選擇文字或圖片的對(duì)齊方式，“LEFT”表示向左對(duì)齊，“RIGHT”表示向右對(duì)齊，“CENTER”表示居中?；菊Z(yǔ)法如下： . 2.1.4 位置控制 通過(guò)“ALIGN”屬圖2-9 設(shè)置文字位置圖2-9 設(shè)置文字位置位置控制你好! 你好! 你好! 2.1.6 無(wú)序號(hào)列表標(biāo)簽 無(wú)序號(hào)列表使用的一對(duì)標(biāo)簽是“”和“”，每一個(gè)列表項(xiàng)前使用“”。其結(jié)構(gòu)如下所示： 第一項(xiàng) 第二項(xiàng) 第三項(xiàng) 2.1.6 無(wú)序號(hào)列表標(biāo)簽 無(wú)序號(hào)列表使圖2-10 不帶有序號(hào)的列表圖2-10 不帶有序號(hào)的列表 第一項(xiàng) 第二項(xiàng) 第三項(xiàng) 例如例2-10所示的代碼?！纠?-10】 無(wú)序號(hào)

7、列表示例 無(wú)序列表 這是一個(gè)無(wú)序列表： 圖2-10 不帶有序號(hào)的列表 國(guó)際Internet提供的服務(wù)有： WWW服務(wù) 文件傳輸服務(wù)電子郵件服務(wù) 遠(yuǎn)程登錄服務(wù) 其他服務(wù) 【例2-10】 無(wú)序號(hào)列表示例2.1.7 序號(hào)列表（有序列表標(biāo)簽） 序號(hào)列表和無(wú)序號(hào)列表的使用方法基本相同，它使用標(biāo)簽“”和“”，每一個(gè)列表項(xiàng)前使用“”。每個(gè)項(xiàng)目都有前后順序之分，多數(shù)用數(shù)字表示。其結(jié)構(gòu)如下所示：2.1.7 序號(hào)列表（有序列表標(biāo)簽） 序號(hào) 第一項(xiàng) 第二項(xiàng) 第三項(xiàng) 例如例2-11所示的代碼圖2-11 帶有序號(hào)的列表圖2-11 帶有序號(hào)的列表【例2-11】 序號(hào)列表示例 有序列表 這是一個(gè)有序列表： 國(guó)際Intern

8、et提供的服務(wù)有： WWW服務(wù) 文件傳輸服務(wù) 電子郵件服務(wù)遠(yuǎn)程登錄服務(wù) 其他服務(wù) 【例2-11】 序號(hào)列表示例2.1.8 水平線標(biāo)簽2.1.8 水平線標(biāo)簽2.2 在Dreamweaver中插入文本 Dreamweaver是“所見(jiàn)即所得”的網(wǎng)頁(yè)編輯器，插入文本非常方便。在頁(yè)面中插入文字的方法有三種。第一種是直接輸入，在文檔窗口中，將光標(biāo)定位到要輸入文本的地方，直接輸入文本即可。 注意：換行和分段第二種是粘貼法：先在其它文字編輯工具中復(fù)制要輸入的文本，然后在文檔窗口的插入點(diǎn)單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【粘貼】命令。第三種是導(dǎo)入已有的Word文檔。 選擇主菜單【文件】|【導(dǎo)入】|【W(wǎng)ord文

9、檔】命令。2.2 在Dreamweaver中插入文本 Dreamweaver提供了兩種方法對(duì)文本進(jìn)行格式化，一種是使用文本的屬性標(biāo)簽，另一種是使用樣式表。文本格式化 Dreamweaver提供了兩種方法對(duì)文圖2-13 “屬性”面板圖2-13 “屬性”面板1用“格式”下拉框設(shè)置文字大小2用“大小”下拉框設(shè)置文字大小3設(shè)置段落的對(duì)齊方式4設(shè)置文字的加粗、傾斜和顏色屬性5設(shè)置文字的字體列表注意：鼠標(biāo)指針和文本光標(biāo)的區(qū)別1用“格式”下拉框設(shè)置文字大小水平線的使用有助于協(xié)調(diào)安排頁(yè)面信息。在頁(yè)面設(shè)計(jì)時(shí)使用水平線可以非常直觀地將頁(yè)面中不同的內(nèi)容進(jìn)行分隔，使得頁(yè)面內(nèi)容更加分明、簡(jiǎn)潔。在要插入水平線的位置單擊鼠

10、標(biāo)。選擇主菜單【插入】|【HTML】|【水平線】命令，即可插入一條水平線。選中水平線對(duì)象，可以在屬性面板中對(duì)水平線的名稱(chēng)、寬高、對(duì)齊方式以及有無(wú)陰影等進(jìn)行設(shè)置。另外，也可以在插入工具欄中選擇“HTML”類(lèi)別，用按鈕插入水平線。補(bǔ)充內(nèi)容1：插入水平線水平線的使用有助于協(xié)調(diào)安排頁(yè)面信息。在頁(yè)面設(shè)計(jì)時(shí)使用水平線可補(bǔ)充內(nèi)容2：插入特殊字符在輸入文字的時(shí)候，有些特殊的字符在鍵盤(pán)中找不到，可以通過(guò)Dreamweaver中輸入特殊字符的功能進(jìn)行輸入，在插入工具欄中選擇“文本”類(lèi)別，選擇字符按鈕可以插入相應(yīng)特殊字符。其中，“換行符”實(shí)質(zhì)上是插入一個(gè)標(biāo)簽，也可以用Shift+Enter組合鍵輸入?！安粨Q行空格”用于在文檔中插入一個(gè)不會(huì)中斷兩端內(nèi)容聯(lián)系的空格(也可以用Ctrl+Shift+Space組合鍵輸入)。如果要插入更多的字符，可以選擇“其它字符”，顯示所示的對(duì)話框，選擇需要的字符單擊“確定”按鈕即可。補(bǔ)充內(nèi)容2：插入特殊字符在輸入文字的時(shí)候，有些特殊的字符在鍵補(bǔ)充內(nèi)容3：輸入多個(gè)空格如何在輸入文本時(shí)輸入多個(gè)空格，需要做的設(shè)置：選擇編輯菜單/首選參數(shù)，勾選允許多個(gè)連續(xù)的空格選項(xiàng)。補(bǔ)充內(nèi)容3：輸入多個(gè)空格如何在輸入文本時(shí)輸入多個(gè)空格，需要做2.3 實(shí)踐與練習(xí)：輸入帶有下標(biāo)的公式 本練習(xí)通過(guò)制作一個(gè)帶有下標(biāo)的化學(xué)公式，掌握“”標(biāo)簽的使用方法。本例最終效果如圖2-45所示。2.3 實(shí)踐與練習(xí)：輸入帶