3.1 添加網頁文本

文本是網頁主頁元素之一，一般以普通文字、段落或各種項目符號等形式進行顯示。由于文本具有易于編輯、存儲空間小等優點，因此在網站制作中具有不可替代的地位。

3.1.1 添加普通文本

普通文本的添加一般可以通過直接輸入和選擇性粘貼2種方法來實現。

1. 直接輸入文本

直接輸入是創建網頁文本最常用的方法，用戶只需要在body標簽中輸入文本即可。如若用戶借助網頁制作軟件，例如Dreamweaver軟件，則需要在【設計】視圖下直接輸入文本，如下圖。

2. 粘貼外部文本

在編輯網頁內容時，對于篇幅比較長的文本，則可以直接將外部文本復制到網頁文件中。在HTML代碼中，所粘貼的文本僅僅是文字，而不包含格式。

如若用戶借助Dreamweaver軟件制作網頁，則需要借助“選擇性粘貼”功能，只粘貼文本，而不粘貼文本中的格式。

例如，在某個網頁中復制一段文本，切換到Dreamweaver文檔中，執行【編輯】|【選擇性粘貼】命令，按下Ctrl+V組合鍵，在彈出的【選擇性粘貼】對話框中，選擇所需粘貼的文本樣式，單擊【確定】按鈕即可，如下圖。

在【選擇性粘貼】對話框中，主要包括下列選項。

□ 僅文本 僅粘貼文本字符，不保留任何字體格式。

□ 帶結構的文本 粘貼包含段落、列表和表格等結構的文本。

□ 帶結構的文本以及基本格式 粘貼包含段落、列表、表格，以及粗體和斜體的文本。

□ 帶結構的文本以及全部格式 粘貼包含段落、列表、表格，以及粗體、斜體和色彩等所有樣式的文本。

□ 保留換行符 啟用該復選框，在粘貼文本時，將自動添加換行符號。

□ 清理Word段落間距 啟用該復選框，在復制Word文本后將自動清除段落間距。

□ 將智能引號轉換為直引號 啟用該復選框，在粘貼文本時將自動將智能引號轉換為直引號。

□ 粘貼首選參數 單擊該按鈕，可以在彈出的【首選項】對話框中設置粘貼首選項。

3.1.2 添加特殊字符

在制作網頁時，經常會遇到一些特殊的行業信息，例如數學、物理和化學中的一些特殊符號等。

對于這些特殊符號，HTML以&開頭，否則HTML會將特殊符號當成字符來處理。例如，當需要輸入小于號“<”時，必須使用“<”代表符號“<”。

HTML中一些常用特殊字符的表述方法，如下表所示。

雖然HTML為用戶提供了一些特殊字符的表示方法，但在使用時這些方法比較煩瑣。為了提高工作效率，用戶可以使用下列3種方法，來插入特殊字符。

1. 借助輸入法軟鍵盤

對于那些無法使用鍵盤直接輸入的特殊字符，用戶可以使用“中文輸入法”中的軟鍵盤進行輸入。例如，在“搜狗”中文輸入法界面中，右擊鼠標，在彈出的菜單中選擇【軟鍵盤】選項，如下圖，彈出特殊符號分類。

在彈出的級聯菜單中，選擇所需的類型，即可彈出相關的符號。例如，選擇【數學符號】選項，在彈出的符號窗口中選擇所需要使用的符號即可，如下圖。

2. 快速輸入空格

HTML內置了快速輸入空格功能，用戶只需將輸入法切換成“中文輸入法”，并將輸入法的狀態調整為“全角”(Shift+空格）狀態，然后按下鍵盤上的空格鍵，即可快速輸入空格了。

但需要注意的是：在HTML中，如果文字與文字之間的空格超過1個，那么從第2個空格開始，HTML會忽略這些空格。

3. 借助網頁設計軟件

除了上述2種快速輸入特殊字符的方法之外，用戶還可以借助Dreamweaver軟件來實現快速輸入。

在Dreamweaver中，執行【插入】|【HTML】|【字符】|【其他字符】命令，在彈出的【插入其他字符】對話框中，選擇所需插入的符號，單擊【確定】按鈕即可，如下圖。

3.2 設置文本格式

對于網頁中的文本，可以通過設置其格式來增加頁面的美觀性和層次感。例如，設置文本樣式、設置對齊方式和段落樣式等。

3.2.1 設置文本樣式

HTML樣式是HTML4引入的，它是一種新的首選的改變HTML元素樣式的方式。通過HTML樣式，可以設置一些特殊的文本，例如加粗顯示、斜體文本、上標和下標文本等。

1. 加粗顯示（加強）

加粗顯示（加強）通常以粗體顯示、強調方式顯示或加強調方式顯示。在HTML中，可以使用<b>標記和<strong>標記來實現加粗加強文本顯示。下列示例代碼中，顯示了上述兩種標記的具體使用方法和效果。

將上述代碼在瀏覽器中預覽，其效果如下圖所示。

2. 斜體（強調）

在HTML中，可以使用<em>和<i>標記設置文本的強調內容。對于所有瀏覽器來說，這意味著要把這段文字用斜體方式呈現給大家顯示，這個與html斜體效果相同。

下列示例代碼中，顯示了上述兩種標記的具體使用方法和效果。

將上述代碼在瀏覽器中預覽，其效果如下圖所示。

3. 上標和下標文本

HTML與Word一樣，也可以設置上標和下標文本。在HTML5中，用戶可以使用<sup>和<sub>標記，來設置上標和下標文本。

下列示例代碼中，顯示了上述兩種標記的具體使用方法和效果。

將上述代碼在瀏覽器中預覽，其效果如下圖所示。

4. 下畫線和刪除線

<u></u>下畫線標簽告訴瀏覽器把其加<u>標簽的文本加下畫線樣式呈現給用戶。對于所有瀏覽器來說，這意味著要把這段文字加下畫線樣式來顯示。

而<s></s>標簽為刪除線標簽，告訴瀏覽器把其加<s>標簽的文本文字加刪除畫線樣式（文字中間一道橫線）呈現給用戶。

例如，下面的代碼示例，充分展示了下畫線和刪除線文本的顯示方式。

將上述代碼在瀏覽器中預覽，其效果如下圖所示。

5. 鍵盤

<kbd>標簽定義鍵盤文本。說到技術概念上的特殊樣式時，就要提到<kbd>標簽，它用來表示文本是從鍵盤上鍵入的。

例如，下面的代碼示例，充分展示了鍵盤文本的顯示方式。

將上述代碼在瀏覽器中預覽，其效果如下圖所示。

<kbd>標簽經常用于計算機相關的文檔和手冊中，瀏覽器通常用等寬字體來顯示該標簽中包含的文本。

6. 引用

<cite>標簽通常表示它所包含的文本對某個參考文獻的引用，例如書籍或者雜志的標題。按照慣例，引用的文本將以斜體顯示。

例如，下面的代碼示例，充分展示了引用文本的顯示方式：

通過上述代碼，用戶可以在瀏覽器中看到標簽中所顯示的效果。

用<cite>標簽把指向其他文檔的引用分離出來，尤其是分離那些傳統媒體中的文檔。如果引用的這些文檔有聯機版本，還應該把引用包括在一個<a>標簽中，從而把一個超鏈接指向該聯機版本。

<cite>標簽還可以從文檔中自動摘錄參考書目，并可以使瀏覽器能夠以各種實用的方式來向用戶表達文檔的內容。

7. 定義

<dfn>標簽可標記那些對特殊術語或短語的定義，目前流行的瀏覽器通常用斜體來顯示<dfn>標簽中的文本。

例如，下面的代碼示例，充分展示了定義文本的顯示方式。

通過上述代碼，用戶可以在瀏覽器中看到標簽中所顯示的效果，如下圖。

8. 已刪除

<del>標簽是成對出現的，以<del>開始，</del>結束。<del>標簽通常應連同<ins>標簽一同使用，表示被刪除與被插入的文本。

例如，下面的代碼示例，充分展示了已刪除文本的顯示方式。

通過上述代碼，用戶可以在瀏覽器中看到標簽中所顯示的效果，如下圖。

9. 已插入

<ins>標簽也是成對出現的，以<ins>開始，</ins>結束。<ins>標簽通常應連同<del>標簽一同使用，表示被插入與被刪除的文本。使用<ins>標簽定義的文本通常帶有下畫線。

例如，下面的代碼示例，充分展示了已插入文本的顯示方式。

通過上述代碼，用戶可以在瀏覽器中看到標簽中所顯示的效果，如下圖。

3.2.2 設置對齊方式

在網頁編輯文檔中，用戶也可以像設置Word文檔中的文本一樣，可以對文本進行對齊方式設置。

1. 居中對齊

“居中對齊”可以調整文字的水平間距，使段落的文字沿水平方向向中間集中對齊，它可以使文章兩側文字整齊地向中間集中，使整個段落都整齊地在頁面中間顯示。如若需要在編輯狀態設計文本為“居中對齊”方式，需要在<p>標簽中添加align屬性，并設置參數為center。

例如，下面的代碼實現了對文本的居中對齊。

使用瀏覽器預覽上述代碼，效果如下圖所示，實現了“居中對齊”效果。

2. 左對齊

在設計網頁時，默認的文本排列方式為左對齊方式。如若需要在編輯狀態設計文本為左對齊方式，需要在<p>標簽中添加align屬性，并設置參數為left。例如，下面的代碼實現了對文本的左對齊。

使用瀏覽器預覽上述代碼，效果如下圖所示，實現了“左對齊”效果。

3. 右對齊

“右對齊”是使段落或者文章中的文字沿水平方向向右對齊的一種對齊方式，它可以使文章右側文字具有整齊的邊緣。如若需要在編輯狀態設計文本為“左對齊”方式，需要在<p>標簽中添加align屬性，并設置參數為right。

例如，下面的代碼實現了對文本的“左對齊”。

使用瀏覽器預覽上述代碼，效果如下圖所示，實現了“右對齊”效果。

3.2.3 設置段落樣式

段落樣式包括換行、段落和標題等樣式，而標題樣式又包括“標題1”、“標題2”、“標題3”…“標題6”等樣式，既可以應用于文本段落，又可以應用于標題。

1. 設置換行

換行是HTML5中經常使用的樣式之一，通過使用<br>單標記來表示強制換行。也就是說，在HTML5中，只需使用<br>或<br/>一個標記便可以完成換行操作。

下面的示例代碼中，展示使用<br>但標記強制換行的使用方法和效果。

使用瀏覽器預覽上述代碼，效果如下圖所示，實現了“左對齊”效果。

2. 設置段落

在HTML中，可以使用<P></P>段落標記來設置段落樣式。<P></P>段落標記之間的內容會自動形成一個段落。

下列示例代碼中，顯示了段落標記的具體使用方法和效果。

使用瀏覽器預覽上述代碼，效果如下圖所示。

3. 設置標題

標題是文章的眉目。各類文章的標題，樣式繁多，但無論是何種形式，總要以全部或不同的側面體現作者的寫作意圖、文章的主旨。標題一般分為總標題、副標題、分標題等幾種。

在HTML中，各種級別的標題由<h1>到<h6>元素來定義，<h1>到<h6>標題標記中的字母h是英文headline（標題行）的簡稱。其中<h1>代表1級標題，級別最高，文字也最大，其他標題元素依次遞減，<h6>的級別最低。

下面的代碼實現了不同級別標題的顯示效果。

使用瀏覽器預覽上述代碼，效果如下圖所示。

4. 編排格式

<pre>標簽可定義預格式化的文本，被包圍在<pre>標簽中的文本通常會保留空格和換行符，而文本也會呈現為等寬字體，<pre>標簽的一個常見應用就是用來表示計算機的源代碼。

在代碼中，可以導致段落斷開的標簽（如標題、<p>和<address>標簽）絕不能包含在<pre>標簽所定義的塊里。盡管有些瀏覽器會把段落結束標簽解釋為簡單地換行，但是這種行為在所有瀏覽器上并不都是一樣的。

<pre>標簽中允許的文本可以包括物理樣式和基于內容的樣式變化，還有鏈接、圖像和水平分隔線。當把其他標簽（比如<a>標簽）放到<pre>標簽塊中時，就像放在HTML/XHTML文檔的其他部分中一樣即可。

例如，下面的代碼在正文第一行插入了<pre>標簽，然后在<pre>標簽中，對文本進行換行，并插入空格，以測試顯示效果。

使用瀏覽器預覽上述代碼，效果如下圖所示。

3.3 設置文字列表

列表是網頁中常見的一種文本排列方式，包括項目列表和項目編號兩種樣式。通過設置文檔列表，不僅可以美化頁面，還可以凸顯出文本的層次性。

3.3.1 設置單個列表

相同類型的列表相當于Word中的項目符號和自動編號，分為無序列表和有序列表兩種類型。

1. 無序列表

無序列表相當于Word中的項目符號，不存在排序，只在文本的開頭處顯示相應的符號。

在HTML5中，無序列表使用<ul></ul>標記進行表示，并使用<li></li>標記表示無序列表中的各項。

下面的代碼實現了無序列表的使用方法和顯示效果。

在瀏覽器中預覽，效果如下圖所示。讀者會發現，在無序列表項中，可以嵌套一個列表。如代碼中的“系統分析”列表項和“網頁草圖”列表項中都有下級列表，因此在這對<li></li>標記間，又增加了一對<ul></ul>標記。

2. 有序列表

有序列表相當于Word中的自動編號，存在編號排序，可在文本的開頭處顯示編號。

在HMTL5中，有序列表使用<ol></ol>標記來表示，并使用<li></li>標記表示有序列表中的各項。

下面的代碼實現了無序列表的使用方法和顯示效果。

在瀏覽器中預覽，效果如下圖所示。

3.3.2 設置多個列表

多個不同類型的類別包括不同類型的無序列表和不同類型的有序列表兩部分內容，無序列表使用<ul>標記進行表示，而有序列表則使用<ol>標記進行表示。

1. 多個無序列表

在HTML中，可以通過使用多個<ul>標記，來創建多個無序列表。下面的代碼實現了多個無序列表的使用方法和顯示效果。

在瀏覽器中預覽，效果如下圖所示。

2. 多個有序列表

在HTML中，可以通過使用多個<ol>標簽，來創建多個有序列表。下面的代碼實現了多個有序列表的使用方法和顯示效果。

在瀏覽器中預覽，效果如下圖所示。

3.3.3 設置嵌套列表

嵌套列表是在一個列表中嵌入一個或多個列表，以形成上下級關系。在HTML5中，可以使用<ul>標簽制作嵌套列表。下面的代碼實現了嵌套列表的使用方法和顯示效果。

在瀏覽器中預覽，效果如下圖所示。

3.3.4 自定義列表

在HTML5中，除了可以設置無序、有序和嵌套列表之外，還可以使用<dl>標簽設置自定義列表。下面的代碼實現了自定義列表的使用方法和顯示效果。

在瀏覽器中預覽，效果如下圖所示。

3.4 使用圖像

圖像是網頁中重要的多媒體元素之一，可以彌補純文本的單調性，增加網頁的多彩性。但是，過多的圖像會導致網頁的打開速度變慢，因此在設計網頁時還需要考慮圖像的數目、大小和圖形格式等因素。

3.4.1 網頁圖像格式

網頁對圖像格式并沒有太嚴格的限制，但由于GIF和JPEG格式的圖片文件較小，并且許多瀏覽器完全支持，因此它們是網頁制作中最為常用的文件格式。一般情況下，網頁中的圖像格式包括下列最常見的6種。

1. JPEG（Joint Photographic Experts Group）

JPEG是Web上僅次于GIF的常用圖像格式。JPEG是一種壓縮得非常緊湊的格式，專門用于不含大色塊的圖像。JPEG格式的圖像有一定的失真度，但是在正常的損失下，肉眼分辨不出JPEG和GIF圖像的差別。而JPEG文件只有GIF文件的1/4大小。JPEG對圖標之類的含大色塊的圖像支持度不大，不支持透明圖和動態圖。

2. PNG（Portable Network Graphic）

PNG格式是Web圖像中最通用的格式。它是一種無損壓縮格式，但是如果沒有插件支持，有的瀏覽器可能不支持這種格式。PNG格式最多可以支持32位顏色，但是不支持動畫圖。

3. GIF（Graphics Interchange Format）

GIF是Web上最常用的圖像格式，它可以用來存儲各種圖像文件。特別適用于存儲線條、圖標和計算機生成的圖像、卡通和其他有大色塊的圖像。

GIF格式的文件容量非常小，形成的是一種壓縮的8位圖像文件，所以最多只支持256種不同的顏色。Gif支持動態圖、透明圖和交織圖。

4. BMP（Windows Bitmap）

BMP格式使用的是索引色彩，它的圖像具有極其豐富的色彩，可以使用16M色彩渲染圖像。此格式一般在多媒體演示和視頻輸出等情況下使用。

5. TIFF（Tag Inage File Format）

TIFF格式是對色彩通道圖像來說最有用的格式，支持24個通道，能存儲多于4個通道。TIFF格式的結果要比其他格式更大、更復雜，它非常適合于印刷和輸出。

6. TGA（Targa）

TGA格式與TIFF格式相同，都可以用來處理高質量的色彩通道圖形。另外，PDD、PSD格式也是存儲包含通道的RGB圖像的最常見的文件格式。

3.4.2 插入圖像

在HTML中，可以使用<img>標記來插入圖像，而<img>標記的屬性及描述如下表所示。

1. 插入本地圖像

在HTML5中插入本地圖像，需要使用img標記，以及img標記中的src屬性。通過上表，發現src屬性用于設置圖片文件的路徑，是img標記中必須存在的屬性。

插入本地圖像的語法格式，如下所示：

下列代碼顯示了在網頁中插入本地圖像的方法。

在瀏覽器中預覽，效果如下圖所示。

2. 插入其他來源的圖像

在HTML5中，除了可以插入本地圖像之外，還可以插入一些其他來源的圖像，例如其他文件夾或服務器中的圖片。

下列代碼顯示了在網頁中插入文件中圖像的方法。

3.4.3 編輯圖像

為網頁插入圖像之后，還需要根據網頁的設計需求，對圖像進行一系列的更改和調整，以使圖像適應網頁的整體布局。

1. 調整圖像大小

原始圖像添加到網頁后，會由于尺寸過大或過小而影響整體布局，此時用戶需要設置圖片的大小，通過更改圖像，使其符合整體布局。

在HTML文檔中，可以使用width（寬度）和height（高度）屬性來設置圖像的大小。下列代碼顯示了調整圖像大小的方法。

在瀏覽器中預覽，效果如下圖所示。

2. 設置提示文字

在網頁中插入圖像之后，為了便于說明和檢索圖片，還需要為圖片設置提示文字。設置提示文字之后，用戶只需在瀏覽器中將鼠標移至圖像上方，便會顯示提示性文本。

下列代碼顯示了在網頁中設置圖像提示文本的方法。

3. 設置網頁背景

在HTML5插入圖像之后，還可以將圖像設置為網頁的背景。當將圖像設置為網頁背景時，如若圖像比頁面小，則系統會自動重復圖片。

下列代碼顯示了將圖像設置為背景的方法。

在瀏覽器中預覽，效果如下圖所示。

4. 對齊圖像

當用戶在網頁中插入多張圖像時，為了使網頁更具有美觀性，還需要設置圖像的對齊方式，包括居中對齊、底部對齊、頂部對齊等。

下列代碼顯示了設置圖像對齊方式的一些常用方法。

在瀏覽器中預覽，效果如下圖所示。

5. 創建圖像熱點

圖像地圖指被分為多個區域（熱點）的圖像，而圖像熱點隸屬于圖像地圖，可以實現“一圖多鏈”的超鏈接特效。

圖像熱點只是在一幅圖像中的某一部分區域內包含超鏈接信息，對于圖像中其他未定義的區域不存在任何影響，一般用于導航欄制作和地圖多點鏈接等。

在HTML中，繪制圖像熱點的示例代碼，如下所示。

在上述代碼中，首先插入圖像“3.jpg”，然后在圖像上的“334,87,38”處繪制名為“Map”的圓形熱點區域，并設置區域的鏈接地址、目標和替換名稱。在瀏覽器中預覽，效果如下圖所示。

3.5 練習：制作數學試題網頁

隨著互聯網的逐漸普及，越來越多的人通過網絡來查找自己需要的信息。一些為廣大學生提供學習和考試資料的網站也應運而生，如下圖，本例將通過插入特殊符號等功能來制作一個數學試題網頁。

操作步驟

STEP|01 設置背景樣式。首先，在<title></title>標記中間修改網頁標題。然后，輸入設置背景樣式和對齊方式的<style>代碼。

STEP|02 制作標題。在<body>和</body>之間，輸入數學試卷的標題名稱，并將標題樣式設置為二級標題。

STEP|03 制作表格。在</h2>后面輸入插入表格代碼，將表格邊框設置為1px，單元格邊距和間距分別設置為0px，并將表格的對齊方式設置為“居中對齊”。

STEP|04 將光標定位在表格中的第2行中，插入一個7行1列的表格，并將單元格邊距和間距分別設置為1px和5px。

STEP|05 在新插入的表格中，逐行輸入試卷內容，設置文本的字體格式，并設置每行的高度和背景色。

STEP|06 將光標放置在第1個表格中的第4行中，插入1個4行2列的嵌套表格，并將單元格邊距和單元格間距分別設置為5px和1px。

STEP|07 然后，在嵌套表格中，輸入相應的數學試題，并設置其字體格式和單元格的背景顏色。

STEP|08 將方便放置在第1個表格中的第1行中，輸入文本內容，設置文本的字體格式，同時設置行高和單元格的背景顏色。用同樣的方法，制作剩余的單元格。

3.6 練習：制作導航條

導航條在頁面中起到了至關重要的作用，它可以引導用戶訪問網站中各個頁面的內容。導航條按照種類可以分為文字導航和圖片導航，而傳統的文字導航與CSS樣式代碼的結合可以呈現出與圖片相同的視覺效果。在本練習中，將詳細介紹制作導航條的操作方法和實用技巧（參見下圖）。

操作步驟

STEP|01 鏈接CSS文件。首先，在<title></title>標簽之間，修改網頁標題。然后，在</title>標簽下方輸入鏈接CSS文件的代碼。

STEP|02 制作首導航欄。在<body></body>標簽中間插入Div層，將id設置為“header”，將類設置為“mainLayout”。

STEP|03 緊接著，在該Div標簽中插入一個名為“logo”的Div層，在“logo”層后，插入一個名為“banner”的Div層，再在該層中插入一個名為“topNavigator”的Div層。

STEP|04 在“topNavigator”層中輸入“登錄”文本，并設置該文本的鏈接方式和鏈接標題。然后，在</a>標簽后面添加“&nbsp;|&nbsp;”代碼和“注冊”文本，并設置其鏈接和標題。

STEP|05 使用同樣的方法，分別添加其他文本，并設置其鏈接和標題屬性。

STEP|06 制作搜索區域。在“topNavigator”層后面添加一個名為“searchBox”的Div層，并在該層中插入一個表單，并設置其屬性。

STEP|07 然后，在表單中分別插入一個域集、標簽、文本、選擇和“提交”按鈕，并設置各對象的屬性。

STEP|08 “searchBox”Div層后面，插入一個名為“topSpacing”的Div標簽，并在標簽之間輸入“&nbsp;”代碼。

STEP|09 制作導航內容。在</div>和</body>標簽之間，插入一個名為“navigator”的Div標簽。在該Div中插入一個“mainNavigator”Div層，輸入文本并設置其屬性。

STEP|10 在該Div層后面，插入一個“searchTag”的Div層，在層內輸入相應文本，并設置文本的鏈接和標題屬性。

3.7 新手訓練營

提示：本練習中，將運用CSS樣式在網頁中使用Web字體。首先，在<head>標簽內輸入CSS樣式。然后，在<body>標簽內插入Div層，設置段落標記并輸入文本。具體代碼如下所示。

使用瀏覽器進行預覽，其效果如下圖所示。

提示：本練習中，將運用CSS樣式來制作一個大學生辯論賽網頁。首先，在<head>標簽內輸入設置Div層的CSS樣式，其代碼如下所示。

然后，在<body>標簽內插入Div層和表格，并設置其內容。使用瀏覽器進行預覽，其最終效果如下圖所示。

提示：本練習中，將通過在<head>標簽內插入CSS樣式的方法，來設置網頁的圖片背景樣式。具體代碼如下所示。

使用瀏覽器進行預覽，其效果如下圖所示。

提示：本練習中，將運用CSS樣式、插入表格、插入圖像設置文本格式等功能，制作一個景點介紹網頁。最終效果如下圖所示。