【正文】 第三章 網(wǎng)頁的編輯與控制 利用 Dreamweaver 8 編輯網(wǎng)頁文本 圖 31 是一個簡單的網(wǎng)頁示例，下面結(jié)合該網(wǎng)頁介紹網(wǎng)頁文本的處理方法。 圖 31 網(wǎng)頁示例 在網(wǎng)頁中添加和處理文本 1．輸入文字 首先啟動 Dreamweaver 8，打開一個網(wǎng)頁。 將光標(biāo)放在頁面編輯區(qū)內(nèi)，按照頁面的要求輸入文字，為了使網(wǎng)頁布局合理，將十二星座放在一個 1 行 4 列的表格中（表格處理的方法參見本書第 4 章）。如圖 32 所示。 如果有現(xiàn)成的 .doc 或 .txt 文件，可另存為 .htm 文件，再利用 Dreamweaver 8 打開即可。也可以用復(fù)制粘貼的方法把其他需要的內(nèi)容復(fù)制過來。 在復(fù)制文本時常常用到以下幾種操作。 （ 1）換行 ① 自動換行：再輸入文字時，若是一行的長度超過了 Dreamweaver 8 窗口的顯示范圍，文字將自動換到下一行。自動換行的好處在于不管瀏覽器的大小。網(wǎng)頁文字都見按照窗口大小自動換行，避免超出頁面之外而要通過移動滾動條瀏覽情況。 ② 利用 Ctrl+Shift 鍵換行再輸入文字后按鍵，文字成段，且上下段空一行。 ③ 利用 Shift+Enter 鍵換行：如果需要將文字手動換行，中間又不能出現(xiàn)空行，可以按 Shift+Enter 鍵。 圖 32 輸入文本的頁面 （ 2）輸入空格 Dreamweaver 8 中，在文本開始處按空格鍵是不會輸入空格的，在文字之間按空格鍵可以輸入半個空格。如果要在網(wǎng)頁中輸入空格，可以采用以下 3 種方法。 ① 按住 Ctrl+Shift 鍵，按一次空格鍵，鍵入半個空格。 ② 將輸入法有半角切換到全角狀態(tài)（如圖 33 所示），按一次空格鍵，鍵入一個空格。 圖 33 半角狀態(tài)與全角狀態(tài)的切換 ③ 將編輯窗口切換到代碼視圖，再要輸入空格的地方輸入 amp。nbsp；輸入一組代碼amp。nbsp，產(chǎn)生半個空 格。 （ 3）插入特殊的字符 有時為了內(nèi)容的需要，要在 Dreamweaver 8 網(wǎng)頁中插入一些鍵盤上沒有的特殊字符。在中，這些字符不僅可以通過“插入”菜單下的“特殊字符”命令來插入，還可以通過插入“字符”面板直接插入。 單擊插入“字符”面板上所要插入的特殊字符的按鈕，即可插入字符。如果插入“字符”面板中找不到的字符，還可以單擊面板右邊的按鈕 ，彈出“插入其它字符”對話框，圖34 所示，在其中有更多的字符可供選擇。 圖 34 “插入其他字符”對話框 （ 4）加入注釋文字 在網(wǎng)頁中加入適當(dāng)?shù)淖⑨屛淖?，可以為?后修改，管理網(wǎng)頁提供方便。由于注釋只有在編輯網(wǎng)頁時或查看源代碼時才能看到，所以不必?fù)?dān)心注釋文字會破壞版面。 將光標(biāo)移到想要插入注釋的地方，然后單擊插入面板上“常用” 選項(xiàng)中的注釋按鈕 ，或“插入”→“文本對象”→“注釋”命令，彈出對話框，如圖 35 所示。在對話框加入批注內(nèi)容，單擊“確定”按鈕即可。 圖 35 “注釋”對話框 這時如果主窗口工作區(qū)處于顯示設(shè)計視圖，則在插入注釋看到一個小標(biāo)志。單擊這個小標(biāo)志，就會發(fā)現(xiàn)“屬性”面板上立即出現(xiàn)了注釋編輯框?？梢栽谧⑨尵庉嬁蛑行薷呐?nèi)容。通過“查看”→“代碼”， 將工作區(qū)狀態(tài)轉(zhuǎn)到顯示代碼視圖，就可可以清楚看到批注。當(dāng)然可以選擇“查看” →“代碼和設(shè)計”命令將兩者聯(lián)系起來看。 （ 5）插入水平線 在頁面中插入水平線的方法如下。 首先確定插入水平線的位置，然后單擊面板上“ HTML”選項(xiàng)中的按鈕 ，或選擇“ 插入”→“ HTML” →“水平線”菜單命令，則可在面板中插入一條水平線。 選中水平線，打開圖 36 的水平線屬性面板，可以設(shè)置水平線的屬性。 圖 36 水平線屬性面板 在水平線屬性面板上，“寬”和“高”用來設(shè)置水平線的寬度和高度（有像素和百分比兩種單位）；用來設(shè)置水平 線的對齊方式；“陰影”選項(xiàng)用于設(shè)置水平線的顯示方式，勾選擇該項(xiàng)表示有陰影，否則無陰影。 （ 6）插入日期和時間 在網(wǎng)頁中插入日期和時間如下。 （一般位于頁面底部）。 “常用”選項(xiàng)卡的按鈕 ，或“插入”→“日期”菜單命令，打開“插入日期”對話框，如圖 37 所示。 圖 37 “插入日期”對話框 “插入日期”對話框中選擇“日期和時間”的格式，如果要自動更新，則勾選“存儲時自動更新”選項(xiàng)。 “確定”按鈕，完成日期和時間的插入。 日期和時間的格式和普通字符 的格式一樣進(jìn)行設(shè)置，即選中包含日期和時間在內(nèi)的文字，在文本屬性中設(shè)置。 按照以上方法插入日期和時間，如圖 38 所示。 圖 38 2．編輯文本 （ 1）設(shè)置標(biāo)題文字 ①選中的一行的“星座傳說”，打開屬性面板，屬性面板上各項(xiàng)的含義如下如圖 39 所示。 39 文本的屬性面板 ②在“格式”下拉表框中選中標(biāo)題文字，這里選中“標(biāo)題 2”。 ③單擊按鈕是文字變粗，但按鈕使文字居中。 （ 2）添加和刪除中文字體 在 Dreamweaver 8 中，默認(rèn)狀態(tài)可供選擇的字體很少，要要使用某些中文字體可以事先將計算機(jī)里的中文字 體添加到 Dreamweaver 8 的字體列表中。具體步驟如下。 ①在主窗口的菜單欄中選擇“文本”→“字體”→“編輯字體列表”命令，彈出如圖310 所示的“編輯字體列表”對話框。 圖 310 “編輯字體列表”對話框 ②從對話框的“可用字體”框中，選擇需要的字體，然后單擊 按鈕，這種字體就會添加到“字體”列表框中選擇所需的字體，然后單擊按鈕，這種字體就會添加到“字體列表”中。 ③單擊“確定”按鈕，就可以將這種字體添加到字體列表中了。 需要說明的是，如果需要添加多種字體，一定要重復(fù)不斷① ③的步驟，千萬不能 圖省事。在“可選字體”框中不斷選擇字體，通過單擊 按鈕，不斷添加到“字體”列表框中，最后打擊“確定”鍵 , 這樣只有第一種子字體是有效的，后面的字體不起作用。 也可以先單擊左上角 按鈕，在選擇字體，然后單擊 按鈕，這種方法更有效且更快捷。 在添加字體對話框中， 按鈕用來添加字體， 按鈕是用來將在“字體列表”中選定字體刪除。 (3)設(shè)置字體的顏色 選擇文本，在屬性面板中的字體顏色對話框中輸入顏色設(shè)置的十六種顏色代碼，或單擊文本顏色按鈕 ，打開顏色編輯面板，如圖 311 所示。用吸取需要的顏色即可。 圖 311 通過屬性面板改變文本顏色 如果想在更大范圍選擇顏色，可執(zhí)行“文本”→“顏色”命令，打開顏色對話框來選擇顏色，如圖 312 所示。 圖 312 顏色對話框 （ 4）添加項(xiàng)目符號和項(xiàng)目編號 選擇表格的十二星座，單擊項(xiàng)目列表按鈕 ，則在文字前添加了小圓點(diǎn)項(xiàng)目符號。如果單擊編輯列表按鈕 ，則在選擇的段落前添加了項(xiàng)目編號。 在編輯文本時，除了常用上述操作外，還經(jīng)常用到“編輯”→ “查找 /替換”文本的內(nèi)容，方法如下。 在 Dreamweaver 8 編輯窗口，選擇“編輯”→“查找 /替換”命令，打開“查找 /替換”對 話框 ，如圖 313 所示。 圖 313 “查找 /替換”對話框 在“查找在”欄中，可以通過單擊其右側(cè) 的來選擇 Dreamweaver 8 提供的 4 種不同的查找和替換范圍：當(dāng)前文檔，整個當(dāng)前本地站點(diǎn)，站點(diǎn)中選擇文件和文件夾。在“查找范圍”欄中，可以單擊其右側(cè)的 來選擇 Dreamweaver 8 提供的 4 種不同的查找和替換方式 :源代碼，文本，文本（高級）來指定標(biāo)簽。完成相關(guān)設(shè)置以后，單擊“查找全部”或“替換全部”按鈕，可以完成查找或替換。利用這些功能可以輕松完成在各種復(fù)雜條件下的查找和替換。 在網(wǎng)頁 中添加圖像 確定網(wǎng)頁中圖像的位置，選擇“插入”→“圖像”菜單命令，打開圖 314 所示的“選擇圖像源文件”對話框，選擇要插入的圖像，單擊“確認(rèn)”按鈕 。有關(guān)網(wǎng)頁圖像的處理，詳見本書。 圖 314 “選擇圖像源”對話框 根 據(jù)要求編 輯整網(wǎng)頁文 本，使頁 面如圖 33 所示，保 存網(wǎng)頁，文 件名為，預(yù)覽網(wǎng)頁，觀察顯示效果。 HTML 概述 什么是 HTML HTML是一種專門用于 Web頁制作的編程語言 ,用來描述超文本各個部分的內(nèi)容 ,告訴瀏覽器如何顯示文本 ,怎樣生成與別的 文本或圖像的鏈接點(diǎn)。 一名網(wǎng)頁設(shè)計高手，就必需掌握 HTML。 HTML 是網(wǎng)絡(luò)的通用語言，它允許設(shè)計者建立文本與圖像相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何人瀏覽，無論使用的是什么類型的電腦或?yàn)g覽器。用 HTML 編者按寫的文件將保存成 .htm 或 .html 文件 ,瀏覽器通過解釋執(zhí)行HTML 編碼。 一個 HTML 文件中飲食了所有將顯示在網(wǎng)頁上的文字信息 ,其中也包括對瀏覽器的一些指示 ,如某些文字應(yīng)放置在何處 ,文字的顯示模式等。如果還有一些圖片、動畫、聲音或是任何其他形式的資源， HTML 文件也會告訴瀏覽器到何處去查找這些資源 ，以及這些資源將放置在網(wǎng)頁的什么位置， HTML 文件通過標(biāo)記符來實(shí)現(xiàn)這一功能。 HTML 作為一種網(wǎng)頁編輯語言，易學(xué)易懂，能制作出精美的網(wǎng)頁效果，其他的專用網(wǎng)頁編輯器（如 FrontPage、 Dreamweaver 8）都是以 HTML 為基礎(chǔ)的。 圖 31 所示網(wǎng)頁的 HTML 代碼如下： html xmlns= head meta equiv=ContentType content=text/html。 charset=gb2312 / title無標(biāo)題文檔 /title style type=text/css ! .STYLE2 { fontsize: 16px。 fontweight: bold。 color: 000000。 } .STYLE3 {fontfamily: Arial, Helvetica, sansserif} .STYLE4 {fontsize: 16px} /style /head body pimg src=image/ width=165 height=139 / span class=STYLE2星座傳說 /span img src=image/ width=168 height=140 //p p 早在公元２世紀(jì)，古希臘天文學(xué)家就把當(dāng)?shù)啬軌蛴^察到的南天星空劃分 br / 為４８個星座，并用豐富的想象力把這些星座的形狀與希臘神話聯(lián)系起來。 br / 當(dāng)時的天文學(xué)家將星座中的主要亮星用假想的線條連接起來，形成希臘神話 br / 的人物、動物或器 物的形象，然后再用他們的名字命名相應(yīng)星座的名稱。這 br / 就是星座的由來。 /p table width=427 border=0 tr td width=86 align=centerdiv align=center p白羊座 /p /div/td td width=92 align=centerdiv align=center p巨蟹座 /p /div/td td width=103 align=centerdiv align=center p天秤座 /p