2.1 輸入文本并編輯

文本是網頁中最基本的內容，它不僅能準確地表達網頁設計者的思想，還有信息量大、操作方便、生成的文件小等特點。因此，對于網站設計者而言，掌握網頁中文本的使用方法非常重要。但是與圖像及其他內容元素相比，文本很難激發瀏覽者的閱讀興趣，所以在制作網頁時，除了文本的內容，排版也非常重要。在文檔中靈活運用不同的字體、多種段落格式以及賞心悅目的文本效果，對于專業的網頁設計者而言，是必不可少的一項技能。

2.1.1 課堂案例——青山別墅網頁

掃碼觀看
本案例視頻

擴展閱讀

案例學習目標

設置網頁外觀、網頁標題效果等；設置允許輸入多個連續空格。

案例知識要點

使用“頁面屬性”命令設置網頁外觀、網頁標題效果；使用“首選項”命令設置允許輸入多個連續空格。

效果所在位置

云盤中的“Ch02>效果>青山別墅網頁>index.html”，效果如圖2-1所示。

圖2-1

1. 設置頁面屬性

（1）選擇“文件>打開”命令，在彈出的“打開”對話框中，選擇云盤中的“Ch02>素材>青山別墅網頁>index.html”，單擊“打開”按鈕打開文件，如圖2-2所示。

圖2-2

（2）選擇“文件>頁面屬性”命令，彈出“頁面屬性”對話框，如圖2-3所示。在該對話框左側的“分類”列表中選擇“外觀（CSS）”選項，在該對話框的右側將“大小”設為12px，“文本顏色”設為白色（#FFFFFF），“左邊距”“右邊距”“上邊距”“下邊距”均設為0px，如圖2-4所示。

圖2-3

圖2-4

（3）在左側的“分類”列表中選擇“標題/編碼”選項，在右側的“標題”文本框中輸入“青山別墅網頁”，如圖2-5所示。單擊“確定”按鈕，完成頁面屬性的修改，效果如圖2-6所示。

圖2-5

圖2-6

2. 輸入空格和文字

（1）選擇“編輯>首選項”命令，打開“首選項”對話框，在左側的“分類”列表中選擇“常規”選項，在右側的“編輯選項”選項組中選中“允許多個連續的空格”復選框，如圖2-7所示。單擊“應用”按鈕，單擊“關閉”按鈕。

圖2-7

（2）將光標置入圖2-8所示的單元格中，在光標所在的位置輸入文字“首頁”，如圖2-9所示。

圖2-8

圖2-9

（3）按2次空格鍵，輸入連續的空格，如圖2-10所示。然后在光標所在的位置輸入文字“關于我們”，如圖2-11所示。用相同的方法輸入其他文字，如圖2-12所示。

圖2-10

圖2-11

圖2-12

（4）保存文檔，按F12鍵預覽效果，如圖2-13所示。

圖2-13

2.1.2 輸入文本

使用Dreamweaver 2020編輯網頁時，在文檔編輯窗口中光標默認處于顯示狀態。要添加文本，首先應將光標移動到文檔編輯窗口中的編輯區域，然后直接輸入文本，就像在其他文本編輯器中一樣。打開一個頁面，在頁面中單擊，將光標置于其中，然后輸入文本，如圖2-14所示。

圖2-14

2.1.3 設置文本屬性

利用“屬性”面板可以方便地修改選中文本的字體、字號、樣式、對齊方式等，以獲得預期的效果。

選擇“窗口>屬性”命令，彈出“屬性”面板，在HTML和CSS的“屬性”面板中都可以設置文本的屬性，如圖2-15和圖2-16所示。

圖2-15

圖2-16

“屬性”面板中主要項的作用如下。

·“格式”下拉列表：設置所選文本的段落樣式。例如，可使某段落應用“標題1”的段落樣式。

·“ID”下拉列表：設置所選元素的ID。

·“類”下拉列表：為所選元素添加CSS樣式。

·“鏈接”下拉列表：為所選元素添加超鏈接效果。

·“目標規則”下拉列表：設置已定義的或引用的CSS樣式為文本的樣式。

·“字體”下拉列表：設置文本的字體。

·“大小”下拉列表：設置文本的字號。

·“color”按鈕：設置文本的顏色。

·“粗體”按鈕、“斜體”按鈕：設置文本的格式。

·“左對齊”按鈕、“居中對齊”按鈕、“右對齊”按鈕、“兩端對齊”按鈕：設置段落在網頁中的對齊方式。

·“無序列表”按鈕、“編號列表”按鈕：設置段落的項目符號或編號樣式。

·“刪除內縮區塊”按鈕、“內縮區塊”按鈕：設置段落文本向右或向左縮進一定的距離。

2.1.4 輸入連續的空格

在默認狀態下，Dreamweaver 2020只允許用戶輸入一個空格，要輸入多個連續空格，則需要進行設置或通過特定操作才能實現。

1. 設置“首選項”對話框

選擇“編輯>首選項”命令，或按Ctrl+U組合鍵，彈出“首選項”對話框，如圖2-17所示。

圖2-17

在“首選項”對話框左側的“分類”列表中選擇“常規”選項，在右側的“編輯選項”選項組中選中“允許多個連續的空格”復選框，單擊“應用”按鈕，單擊“關閉”按鈕。此時，用戶可連續按空格鍵在文檔編輯窗口內輸入多個連續空格。

2. 直接插入多個連續空格

在Dreamweaver 2020中插入多個連續空格，有以下3種方法。

（1）單擊“插入”面板的“HTML”選項卡中的“不換行空格”按鈕。

（2）選擇“插入>HTML>不換行空格”命令，或按Ctrl+Shift+Space組合鍵。

（3）將輸入法轉換到中文的全角狀態下。

2.1.5 設置是否顯示不可見元素

在網頁的“設計”視圖中，有一些元素僅用來標志位置，在瀏覽器中是不可見的。例如，腳本圖標用來標志文檔正文中的JavaScript或VBScript代碼的位置，換行符圖標用來標志每個換行符<br>的位置等。在設計網頁時，為了快速找到這些不可見元素的位置，常常需要改變這些元素在“設計”視圖中的可見性。

顯示或隱藏某些不可見元素的具體操作步驟如下。

（1）選擇“編輯>首選項”命令，彈出“首選項”對話框。

（2）在“首選項”對話框左側的“分類”列表中選擇“不可見元素”選項，根據需要選中或取消選中右側的多個復選框，以實現不可見元素的顯示或隱藏，如圖2-18所示。單擊“應用”按鈕，單擊“關閉”按鈕。

圖2-18

常用的不可見元素是換行符、腳本、命名錨記、AP元素的錨點和表單隱藏區域，一般將它們設為可見。

細心的讀者會發現，雖然在“首選項”對話框中設置了某些不可見元素為顯示狀態，但在網頁的“設計”視圖中卻看不見這些不可見元素。為了解決這個問題，還必須選擇“查看>設計視圖選項>可視化助理>不可見元素”命令，效果如圖2-19所示。

圖2-19

2.1.6 設置頁邊距

通常文本與紙的四周需要留有一定的距離，這個距離叫頁邊距。網頁設計也是如此，在默認狀態下文檔的上、下、左、右頁邊距不為0。

修改網頁頁邊距的具體操作步驟如下。

（1）選擇“文件>頁面屬性”命令，彈出“頁面屬性”對話框，如圖2-20所示。

圖2-20

提示

如果在“頁面屬性”對話框中的“分類”列表中選擇“外觀（HTML）”選項，“頁面屬性”對話框右側顯示的內容將發生改變，如圖2-21所示。

圖2-21

（2）根據需要在“頁面屬性”對話框的“左邊距”“上邊距”“邊距寬度”“邊距高度”文本框中輸入相應的數值即可。這些文本框的作用如下。

·“左邊距”文本框：指定網頁在瀏覽器中的左、右頁邊距。

·“上邊距”文本框：指定網頁在瀏覽器中的上、下頁邊距。

·“邊距寬度”文本框：指定網頁在瀏覽器中的左、右頁邊距。

·“邊距高度”文本框：指定網頁在瀏覽器中的上、下頁邊距。

2.1.7 設置網頁標題

網頁標題可以提示瀏覽者正在查看的網頁的內容，并可在瀏覽器的歷史記錄和書簽列表中用于標志頁面。注意，網頁的文件名是通過“保存文件”命令保存的網頁文件名稱，而網頁的標題是瀏覽者在瀏覽網頁時瀏覽器標題欄中顯示的信息。

更改網頁標題的具體操作步驟如下。

（1）選擇“文件>頁面屬性”命令，彈出“頁面屬性”對話框。

（2）在對話框左側的“分類”列表中選擇“標題/編碼”選項，在右側的“標題”文本框中輸入網頁標題，如圖2-22所示。單擊“確定”按鈕，完成設置。也可在“屬性”面板的“文檔標題”文本框中直接輸入網頁標題。

圖2-22

2.1.8 設置網頁的默認格式

用戶在制作新網頁時，系統提供的頁面都有一些默認的屬性，如網頁的標題、頁邊距、文字編碼、文字顏色和超鏈接的顏色等。若需要修改網頁的默認格式，可選擇“文件>頁面屬性”命令，彈出“頁面屬性”對話框，如圖2-23所示，在其中進行設置。“頁面屬性”對話框中選項卡的作用如下。

圖2-23

·“外觀（CSS）”/“外觀（HTML）”選項卡：設置網頁背景顏色、背景圖像，網頁文字的字體、字號、顏色和頁邊距。

·“鏈接（CSS）”選項卡：設置鏈接文字的格式。

·“標題（CSS）”選項卡：為標題1至標題6標題標簽指定字體、字號和顏色。

·“標題/編碼”選項卡：設置網頁的標題和網頁的文字編碼。一般情況下，將網頁的文字編碼設定為簡體中文GB2312編碼。

·“跟蹤圖像”選項卡：一般在復制網頁時，若想使原網頁的圖像作為復制網頁的參考圖像，可使用跟蹤圖像的方式實現。跟蹤圖像僅作為復制網頁的設計參考圖像，在瀏覽器中并不顯示出來。

2.1.9 課堂案例——機電設備網頁

掃碼觀看
本案例視頻

擴展閱讀

案例學習目標

使用“屬性”面板，改變網頁中的元素，使網頁變得更加美觀。

案例知識要點

使用“屬性”面板，設置文字的字號、顏色及字體；使用“CSS設計器”面板，設置文字的字體、字號、顏色及行距。

效果所在位置

云盤中的“Ch02>效果>機電設備網頁>index. html”，效果如圖2-24所示。

圖2-24

1. 添加字體

（1）選擇“文件>打開”命令，在彈出的“打開”對話框中，選擇云盤“Ch02>素材>機電設備網頁>index.html”，單擊“打開”按鈕打開文件，如圖2-25所示。

圖2-25

（2）在“屬性”面板中，單擊“字體”下拉列表框，在彈出的下拉列表中選擇“管理字體”選項，如圖2-26所示，彈出“管理字體”對話框。打開“自定義字體堆棧”選項卡，在“可用字體”列表中選擇需要的字體，如圖2-27所示，單擊按鈕，將其添加到“字體列表”和“選擇的字體”列表中，如圖2-28所示。

圖2-26

圖2-27

圖2-28

（3）單擊“字體列表”左側的按鈕，在“字體列表”中添加一個字體組；在“可用字體”列表中選擇需要的字體，如圖2-29所示，單擊按鈕，將其添加到“字體列表”和“選擇的字體”列表中，如圖2-30所示。單擊“完成”按鈕關閉對話框。

圖2-29

圖2-30

2. 改變文字樣式

（1）選擇“窗口>CSS設計器”命令，彈出“CSS設計器”面板，如圖2-31所示。在“源”選項組中選擇“<style>”選項，如圖2-32所示；單擊“選擇器”選項組中的“添加選擇器”按鈕，在“選擇器”選項組的文本框中輸入“.text”，按Enter鍵確認，效果如圖2-33所示。

圖2-31

圖2-32

圖2-33

（2）選中圖2-34所示的文字，在“屬性”面板“目標規則”下拉列表中選擇“.text”選項，應用該樣式。在“字體”下拉列表中選擇“方正蘭亭粗黑簡體”選項，將“大小”設為34；單擊“color”按鈕，在彈出的顏色面板中單擊需要的顏色，如圖2-35所示。在空白處單擊以關閉顏色面板，此時的“屬性”面板如圖2-36所示，效果如圖2-37所示。

圖2-34

圖2-35

圖2-36

圖2-37

（3）在“CSS設計器”面板中，單擊“選擇器”選項組中的“添加選擇器”按鈕，在“選擇器”選項組的文本框中輸入“.text1”，按Enter鍵確認，效果如圖2-38所示；在“屬性”選項組中單擊“文本”按鈕，顯示文本屬性，將“color”設為白色（#FFFFFF），“font-family”設為“方正蘭亭黑簡體”，“font-size”設為12px，“line-height”設為20px，如圖2-39所示。

圖2-38

圖2-39

（4）選中圖2-40所示的文字，在“屬性”面板“類”下拉列表中選擇“.text1”選項，應用該樣式，效果如圖2-41所示。

圖2-40

圖2-41

（5）保存文檔，按F12鍵預覽效果，如圖2-42所示。

圖2-42

2.1.10 改變文本的大小

Dreamweaver 2020提供了2種改變文本大小的方法：一種是設置文本的默認大小，另一種是設置選中文本的大小。

1. 設置文本的默認大小

（1）選擇“文件>頁面屬性”命令，彈出“頁面屬性”對話框。

（2）在“頁面屬性”對話框左側的“分類”列表中選擇“外觀（CSS）”選項，在右側的“大小”下拉列表中根據需要選擇文本的大小，如圖2-43所示。單擊“確定”按鈕完成設置。

圖2-43

2. 設置選中文本的大小

在Dreamweaver 2020中，可以通過“屬性”面板設置選中文本的大小，步驟如下。

（1）在文檔編輯窗口中選中文本。

（2）在“屬性”面板中的“大小”下拉列表中選擇相應的值，如圖2-44所示。

圖2-44

2.1.11 改變文本的顏色

豐富的視覺顏色可以吸引網頁瀏覽者的注意力。網頁中的文本不僅可以顯示為黑色，還可以顯示為其他顏色，最多可達16 777 216種顏色。顏色的種類與用戶顯示器的分辨率和顏色值有關，一般建議在216種網頁顏色中選擇文字的顏色。

在Dreamweaver 2020中提供了2種改變文本顏色的方法，如下所示。

1. 設置文本的默認顏色

（1）選擇“文件>頁面屬性”命令，彈出“頁面屬性”對話框。

（2）在左側的“分類”列表中選擇“外觀（CSS）”選項，單擊右側的“文本顏色”按鈕，從彈出的面板中選擇具體的文本顏色，如圖2-45所示。單擊“確定”按鈕完成設置。

圖2-45

2. 設置選中文本的顏色

（1）在文檔編輯窗口中選中文本。

（2）單擊“屬性”面板中的“color”按鈕，在彈出的面板中選擇相應的顏色，如圖2-46所示。

圖2-46

2.1.12 改變文本的字體

Dreamweaver 2020提供了2種改變文本字體的方法：一種是設置文本的默認字體，另一種是設置選中文本的字體。

1. 設置文本的默認字體

（1）選擇“文件>頁面屬性”命令，彈出“頁面屬性”對話框。

（2）在左側的“分類”列表中選擇“外觀（CSS）”選項，在右側單擊“頁面字體”下拉列表框，彈出其下拉列表，如果下拉列表中有合適的字體組合，可直接選擇該字體組合，如圖2-47所示；否則，需選擇“管理字體”選項，在彈出的“管理字體”對話框中打開“自定義字體堆棧”選項卡，從中自定義字體組合，方法如下。

圖2-47

單擊按鈕，在“可用字體”列表中選擇需要的字體，然后單擊按鈕，將其添加到“字體列表”和“選擇的字體”中，如圖2-48和圖2-49所示。在“可用字體”列表中再選中另一種字體，再次單擊按鈕，在“字體列表”中建立字體組合。單擊“確定”按鈕完成設置。

圖2-48

圖2-49

在“頁面屬性”對話框的“頁面字體”下拉列表中選擇剛建立的字體組合作為文本的默認字體。

2. 設置選中文本的字體

為了將選中的不同文字設定為不同的字體，Dreamweaver 2020提供了2種方法，如下所示。

（1）通過“字體”下拉列表設置選中文本的字體，步驟如下。

① 在文檔編輯窗口中選中文本。

② 在“屬性”面板的“字體”下拉列表中選擇相應的字體，如圖2-50所示。

圖2-50

（2）通過“字體”命令設置選中文本的字體，步驟如下。

① 在文檔編輯窗口中選中文本。

② 單擊鼠標右鍵，在彈出的快捷菜單中選擇“字體”命令，在子菜單中選擇相應的字體，如圖2-51所示。

圖2-51

2.1.13 改變文本的對齊方式

文本的對齊方式是指文字相對于文檔編輯窗口或瀏覽器窗口在水平方向上的對齊方式。設置對齊方式的按鈕有以下4種。

·“左對齊”按鈕：使文本在瀏覽器窗口中左對齊。

·“居中對齊”按鈕：使文本在瀏覽器窗口中居中對齊。

·“右對齊”按鈕：使文本在瀏覽器窗口中右對齊。

·“兩端對齊”按鈕：使文本在瀏覽器窗口中兩端對齊。

通過對齊按鈕改變文本的對齊方式，步驟如下。

（1）將插入點定位在文本中，或者選擇某一段落。

（2）在“屬性”面板中單擊相應的對齊按鈕，如圖2-52所示。

圖2-52

對段落文本的對齊操作，實際上是對<p></p>標簽的align屬性的設置。align屬性值有3種，其中left表示左對齊，center表示居中對齊，right表示右對齊。例如，下面的3條語句分別設置段落左對齊、居中對齊和右對齊，效果如圖2-53所示。

圖2-53

<p align="left">左對齊</p>
<p align="center">居中對齊</p>
<p align="right">右對齊</p>

2.1.14 設置文本樣式

文本樣式是指文本的外觀及顯示方式，如加粗文本、傾斜文本和加下畫線等。

1. 通過“樣式”命令設置文本樣式

（1）在文檔編輯窗口中選中文本。

（2）選擇“編輯>文本”命令，在彈出的子菜單中選擇相應的命令，如圖2-54所示。

圖2-54

選擇需要的命令后，即可為選中的文本設置相應的文本樣式，被選中的命令左側會有選中標記。

2. 通過“屬性”面板設置文本樣式

（1）在文檔編輯窗口中選中文本。

（2）單擊“屬性”面板中的“粗體”按鈕和“斜體”按鈕可快速設置文本樣式，如圖2-55所示。如果要取消粗體或斜體樣式，再次單擊相應的按鈕即可。

圖2-55

3. 使用組合鍵快速設置文本樣式

還有一種快速設置文本樣式的方法是使用組合鍵。按Ctrl+B組合鍵，可以將選中的文本加粗；按Ctrl+I組合鍵，可以將選中的文本傾斜顯示。

2.1.15 設置段落格式

網頁中的段落是指描述同一主題的并且格式統一的一段文字。在文檔編輯窗口中，輸入一段文字后按Enter鍵，這段文字就會作為一個段落顯示在<P></P>標簽中。

1. 應用段落格式

（1）通過“格式”下拉列表應用段落格式，步驟如下。

① 將插入點定位在段落中，或者選擇段落中的文本。

② 在“屬性”面板的“格式”下拉列表中選擇相應的格式，如圖2-56所示。

圖2-56

（2）通過“段落格式”命令應用段落格式，步驟如下。

① 將插入點定位在段落中，或者選擇段落中的文本。

② 選擇“編輯>段落格式”命令，彈出其子菜單，選擇相應的段落格式，如圖2-57所示。

圖2-57

2. 指定預格式

預格式標簽是<pre></pre>。預格式化是指用戶預先對<pre></pre>之間的文字進行格式化，以便它們在瀏覽器中按真正的格式顯示。例如，用戶在段落中插入多個空格，但瀏覽器卻按一個空格處理；為這段文字指定預格式后，瀏覽器就會按用戶的輸入內容顯示多個空格。

（1）通過“格式”下拉列表指定預格式，步驟如下。

① 將插入點定位在段落中，或者選擇段落中的文本。

② 在“屬性”面板的“格式”下拉列表中選擇“預先格式化的”選項，如圖2-58所示。

圖2-58

（2）通過“段落格式”命令指定預格式，步驟如下。

① 將插入點定位在段落中，或者選擇段落中的文本。

② 選擇“編輯>段落格式”命令，彈出其子菜單，選擇“已編排格式”命令，如圖2-59所示。

圖2-59