3.1 添加網(wǎng)頁文本

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

3.1.1 添加普通文本

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

1. 直接輸入文本

直接輸入是創(chuàng)建網(wǎng)頁文本最常用的方法，用戶只需要在body標(biāo)簽中輸入文本即可。如若用戶借助網(wǎng)頁制作軟件，例如Dreamweaver軟件，則需要在【設(shè)計(jì)】視圖下直接輸入文本，如下圖。

2. 粘貼外部文本

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

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

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

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

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

□ 帶結(jié)構(gòu)的文本 粘貼包含段落、列表和表格等結(jié)構(gòu)的文本。

□ 帶結(jié)構(gòu)的文本以及基本格式 粘貼包含段落、列表、表格，以及粗體和斜體的文本。

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

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

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

□ 將智能引號轉(zhuǎn)換為直引號 啟用該復(fù)選框，在粘貼文本時(shí)將自動將智能引號轉(zhuǎn)換為直引號。

□ 粘貼首選參數(shù) 單擊該按鈕，可以在彈出的【首選項(xiàng)】對話框中設(shè)置粘貼首選項(xiàng)。

3.1.2 添加特殊字符

在制作網(wǎng)頁時(shí)，經(jīng)常會遇到一些特殊的行業(yè)信息，例如數(shù)學(xué)、物理和化學(xué)中的一些特殊符號等。

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

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

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

1. 借助輸入法軟鍵盤

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

在彈出的級聯(lián)菜單中，選擇所需的類型，即可彈出相關(guān)的符號。例如，選擇【數(shù)學(xué)符號】選項(xiàng)，在彈出的符號窗口中選擇所需要使用的符號即可，如下圖。

2. 快速輸入空格

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

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

3. 借助網(wǎng)頁設(shè)計(jì)軟件

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

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

3.2 設(shè)置文本格式

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

3.2.1 設(shè)置文本樣式

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

1. 加粗顯示（加強(qiáng)）

加粗顯示（加強(qiáng)）通常以粗體顯示、強(qiáng)調(diào)方式顯示或加強(qiáng)調(diào)方式顯示。在HTML中，可以使用<b>標(biāo)記和<strong>標(biāo)記來實(shí)現(xiàn)加粗加強(qiáng)文本顯示。下列示例代碼中，顯示了上述兩種標(biāo)記的具體使用方法和效果。

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

2. 斜體（強(qiáng)調(diào)）

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

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

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

3. 上標(biāo)和下標(biāo)文本

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

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

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

4. 下畫線和刪除線

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

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

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

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

5. 鍵盤

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

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

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

<kbd>標(biāo)簽經(jīng)常用于計(jì)算機(jī)相關(guān)的文檔和手冊中，瀏覽器通常用等寬字體來顯示該標(biāo)簽中包含的文本。

6. 引用

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

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

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

用<cite>標(biāo)簽把指向其他文檔的引用分離出來，尤其是分離那些傳統(tǒng)媒體中的文檔。如果引用的這些文檔有聯(lián)機(jī)版本，還應(yīng)該把引用包括在一個(gè)<a>標(biāo)簽中，從而把一個(gè)超鏈接指向該聯(lián)機(jī)版本。

<cite>標(biāo)簽還可以從文檔中自動摘錄參考書目，并可以使瀏覽器能夠以各種實(shí)用的方式來向用戶表達(dá)文檔的內(nèi)容。

7. 定義

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

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

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

8. 已刪除

<del>標(biāo)簽是成對出現(xiàn)的，以<del>開始，</del>結(jié)束。<del>標(biāo)簽通常應(yīng)連同<ins>標(biāo)簽一同使用，表示被刪除與被插入的文本。

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

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

9. 已插入

<ins>標(biāo)簽也是成對出現(xiàn)的，以<ins>開始，</ins>結(jié)束。<ins>標(biāo)簽通常應(yīng)連同<del>標(biāo)簽一同使用，表示被插入與被刪除的文本。使用<ins>標(biāo)簽定義的文本通常帶有下畫線。

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

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

3.2.2 設(shè)置對齊方式

在網(wǎng)頁編輯文檔中，用戶也可以像設(shè)置Word文檔中的文本一樣，可以對文本進(jìn)行對齊方式設(shè)置。

1. 居中對齊

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

例如，下面的代碼實(shí)現(xiàn)了對文本的居中對齊。

使用瀏覽器預(yù)覽上述代碼，效果如下圖所示，實(shí)現(xiàn)了“居中對齊”效果。

2. 左對齊

在設(shè)計(jì)網(wǎng)頁時(shí)，默認(rèn)的文本排列方式為左對齊方式。如若需要在編輯狀態(tài)設(shè)計(jì)文本為左對齊方式，需要在<p>標(biāo)簽中添加align屬性，并設(shè)置參數(shù)為left。例如，下面的代碼實(shí)現(xiàn)了對文本的左對齊。

使用瀏覽器預(yù)覽上述代碼，效果如下圖所示，實(shí)現(xiàn)了“左對齊”效果。

3. 右對齊

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

例如，下面的代碼實(shí)現(xiàn)了對文本的“左對齊”。

使用瀏覽器預(yù)覽上述代碼，效果如下圖所示，實(shí)現(xiàn)了“右對齊”效果。

3.2.3 設(shè)置段落樣式

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

1. 設(shè)置換行

換行是HTML5中經(jīng)常使用的樣式之一，通過使用<br>單標(biāo)記來表示強(qiáng)制換行。也就是說，在HTML5中，只需使用<br>或<br/>一個(gè)標(biāo)記便可以完成換行操作。

下面的示例代碼中，展示使用<br>但標(biāo)記強(qiáng)制換行的使用方法和效果。

使用瀏覽器預(yù)覽上述代碼，效果如下圖所示，實(shí)現(xiàn)了“左對齊”效果。

2. 設(shè)置段落

在HTML中，可以使用<P></P>段落標(biāo)記來設(shè)置段落樣式。<P></P>段落標(biāo)記之間的內(nèi)容會自動形成一個(gè)段落。

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

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

3. 設(shè)置標(biāo)題

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

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

下面的代碼實(shí)現(xiàn)了不同級別標(biāo)題的顯示效果。

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

4. 編排格式

<pre>標(biāo)簽可定義預(yù)格式化的文本，被包圍在<pre>標(biāo)簽中的文本通常會保留空格和換行符，而文本也會呈現(xiàn)為等寬字體，<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來表示計(jì)算機(jī)的源代碼。

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

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

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

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

3.3 設(shè)置文字列表

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

3.3.1 設(shè)置單個(gè)列表

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

1. 無序列表

無序列表相當(dāng)于Word中的項(xiàng)目符號，不存在排序，只在文本的開頭處顯示相應(yīng)的符號。

在HTML5中，無序列表使用<ul></ul>標(biāo)記進(jìn)行表示，并使用<li></li>標(biāo)記表示無序列表中的各項(xiàng)。

下面的代碼實(shí)現(xiàn)了無序列表的使用方法和顯示效果。

在瀏覽器中預(yù)覽，效果如下圖所示。讀者會發(fā)現(xiàn)，在無序列表項(xiàng)中，可以嵌套一個(gè)列表。如代碼中的“系統(tǒng)分析”列表項(xiàng)和“網(wǎng)頁草圖”列表項(xiàng)中都有下級列表，因此在這對<li></li>標(biāo)記間，又增加了一對<ul></ul>標(biāo)記。

2. 有序列表

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

在HMTL5中，有序列表使用<ol></ol>標(biāo)記來表示，并使用<li></li>標(biāo)記表示有序列表中的各項(xiàng)。

下面的代碼實(shí)現(xiàn)了無序列表的使用方法和顯示效果。

在瀏覽器中預(yù)覽，效果如下圖所示。

3.3.2 設(shè)置多個(gè)列表

多個(gè)不同類型的類別包括不同類型的無序列表和不同類型的有序列表兩部分內(nèi)容，無序列表使用<ul>標(biāo)記進(jìn)行表示，而有序列表則使用<ol>標(biāo)記進(jìn)行表示。

1. 多個(gè)無序列表

在HTML中，可以通過使用多個(gè)<ul>標(biāo)記，來創(chuàng)建多個(gè)無序列表。下面的代碼實(shí)現(xiàn)了多個(gè)無序列表的使用方法和顯示效果。

在瀏覽器中預(yù)覽，效果如下圖所示。

2. 多個(gè)有序列表

在HTML中，可以通過使用多個(gè)<ol>標(biāo)簽，來創(chuàng)建多個(gè)有序列表。下面的代碼實(shí)現(xiàn)了多個(gè)有序列表的使用方法和顯示效果。

在瀏覽器中預(yù)覽，效果如下圖所示。

3.3.3 設(shè)置嵌套列表

嵌套列表是在一個(gè)列表中嵌入一個(gè)或多個(gè)列表，以形成上下級關(guān)系。在HTML5中，可以使用<ul>標(biāo)簽制作嵌套列表。下面的代碼實(shí)現(xiàn)了嵌套列表的使用方法和顯示效果。

在瀏覽器中預(yù)覽，效果如下圖所示。

3.3.4 自定義列表

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

在瀏覽器中預(yù)覽，效果如下圖所示。

3.4 使用圖像

圖像是網(wǎng)頁中重要的多媒體元素之一，可以彌補(bǔ)純文本的單調(diào)性，增加網(wǎng)頁的多彩性。但是，過多的圖像會導(dǎo)致網(wǎng)頁的打開速度變慢，因此在設(shè)計(jì)網(wǎng)頁時(shí)還需要考慮圖像的數(shù)目、大小和圖形格式等因素。

3.4.1 網(wǎng)頁圖像格式

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

1. JPEG（Joint Photographic Experts Group）

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

2. PNG（Portable Network Graphic）

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

3. GIF（Graphics Interchange Format）

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

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

4. BMP（Windows Bitmap）

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

5. TIFF（Tag Inage File Format）

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

6. TGA（Targa）

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

3.4.2 插入圖像

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

1. 插入本地圖像

在HTML5中插入本地圖像，需要使用img標(biāo)記，以及img標(biāo)記中的src屬性。通過上表，發(fā)現(xiàn)src屬性用于設(shè)置圖片文件的路徑，是img標(biāo)記中必須存在的屬性。

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

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

在瀏覽器中預(yù)覽，效果如下圖所示。

2. 插入其他來源的圖像

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

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

3.4.3 編輯圖像

為網(wǎng)頁插入圖像之后，還需要根據(jù)網(wǎng)頁的設(shè)計(jì)需求，對圖像進(jìn)行一系列的更改和調(diào)整，以使圖像適應(yīng)網(wǎng)頁的整體布局。

1. 調(diào)整圖像大小

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

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

在瀏覽器中預(yù)覽，效果如下圖所示。

2. 設(shè)置提示文字

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

下列代碼顯示了在網(wǎng)頁中設(shè)置圖像提示文本的方法。

3. 設(shè)置網(wǎng)頁背景

在HTML5插入圖像之后，還可以將圖像設(shè)置為網(wǎng)頁的背景。當(dāng)將圖像設(shè)置為網(wǎng)頁背景時(shí)，如若圖像比頁面小，則系統(tǒng)會自動重復(fù)圖片。

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

在瀏覽器中預(yù)覽，效果如下圖所示。

4. 對齊圖像

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

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

在瀏覽器中預(yù)覽，效果如下圖所示。

5. 創(chuàng)建圖像熱點(diǎn)

圖像地圖指被分為多個(gè)區(qū)域（熱點(diǎn)）的圖像，而圖像熱點(diǎn)隸屬于圖像地圖，可以實(shí)現(xiàn)“一圖多鏈”的超鏈接特效。

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

在HTML中，繪制圖像熱點(diǎn)的示例代碼，如下所示。

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

3.5 練習(xí)：制作數(shù)學(xué)試題網(wǎng)頁

隨著互聯(lián)網(wǎng)的逐漸普及，越來越多的人通過網(wǎng)絡(luò)來查找自己需要的信息。一些為廣大學(xué)生提供學(xué)習(xí)和考試資料的網(wǎng)站也應(yīng)運(yùn)而生，如下圖，本例將通過插入特殊符號等功能來制作一個(gè)數(shù)學(xué)試題網(wǎng)頁。

操作步驟

STEP|01 設(shè)置背景樣式。首先，在<title></title>標(biāo)記中間修改網(wǎng)頁標(biāo)題。然后，輸入設(shè)置背景樣式和對齊方式的<style>代碼。

STEP|02 制作標(biāo)題。在<body>和</body>之間，輸入數(shù)學(xué)試卷的標(biāo)題名稱，并將標(biāo)題樣式設(shè)置為二級標(biāo)題。

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

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

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

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

STEP|07 然后，在嵌套表格中，輸入相應(yīng)的數(shù)學(xué)試題，并設(shè)置其字體格式和單元格的背景顏色。

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

3.6 練習(xí)：制作導(dǎo)航條

導(dǎo)航條在頁面中起到了至關(guān)重要的作用，它可以引導(dǎo)用戶訪問網(wǎng)站中各個(gè)頁面的內(nèi)容。導(dǎo)航條按照種類可以分為文字導(dǎo)航和圖片導(dǎo)航，而傳統(tǒng)的文字導(dǎo)航與CSS樣式代碼的結(jié)合可以呈現(xiàn)出與圖片相同的視覺效果。在本練習(xí)中，將詳細(xì)介紹制作導(dǎo)航條的操作方法和實(shí)用技巧（參見下圖）。

操作步驟

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

STEP|02 制作首導(dǎo)航欄。在<body></body>標(biāo)簽中間插入Div層，將id設(shè)置為“header”，將類設(shè)置為“mainLayout”。

STEP|03 緊接著，在該Div標(biāo)簽中插入一個(gè)名為“l(fā)ogo”的Div層，在“l(fā)ogo”層后，插入一個(gè)名為“banner”的Div層，再在該層中插入一個(gè)名為“topNavigator”的Div層。

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

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

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

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

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

STEP|09 制作導(dǎo)航內(nèi)容。在</div>和</body>標(biāo)簽之間，插入一個(gè)名為“navigator”的Div標(biāo)簽。在該Div中插入一個(gè)“mainNavigator”Div層，輸入文本并設(shè)置其屬性。

STEP|10 在該Div層后面，插入一個(gè)“searchTag”的Div層，在層內(nèi)輸入相應(yīng)文本，并設(shè)置文本的鏈接和標(biāo)題屬性。

3.7 新手訓(xùn)練營

提示：本練習(xí)中，將運(yùn)用CSS樣式在網(wǎng)頁中使用Web字體。首先，在<head>標(biāo)簽內(nèi)輸入CSS樣式。然后，在<body>標(biāo)簽內(nèi)插入Div層，設(shè)置段落標(biāo)記并輸入文本。具體代碼如下所示。

使用瀏覽器進(jìn)行預(yù)覽，其效果如下圖所示。

提示：本練習(xí)中，將運(yùn)用CSS樣式來制作一個(gè)大學(xué)生辯論賽網(wǎng)頁。首先，在<head>標(biāo)簽內(nèi)輸入設(shè)置Div層的CSS樣式，其代碼如下所示。

然后，在<body>標(biāo)簽內(nèi)插入Div層和表格，并設(shè)置其內(nèi)容。使用瀏覽器進(jìn)行預(yù)覽，其最終效果如下圖所示。

提示：本練習(xí)中，將通過在<head>標(biāo)簽內(nèi)插入CSS樣式的方法，來設(shè)置網(wǎng)頁的圖片背景樣式。具體代碼如下所示。

使用瀏覽器進(jìn)行預(yù)覽，其效果如下圖所示。

提示：本練習(xí)中，將運(yùn)用CSS樣式、插入表格、插入圖像設(shè)置文本格式等功能，制作一個(gè)景點(diǎn)介紹網(wǎng)頁。最終效果如下圖所示。