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

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

3.1.1 添加普通文本

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

1. 直接輸入文本

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

2. 粘貼外部文本

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

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

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

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

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

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

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

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

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

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

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

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

3.1.2 添加特殊字符

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

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

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

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

1. 借助輸入法軟鍵盤

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

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

2. 快速輸入空格

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

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

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

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

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

3.2 設(shè)置文本格式

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

3.2.1 設(shè)置文本樣式

HTML樣式是HTML4引入的，它是一種新的首選的改變HTML元素樣式的方式。通過(guò)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)記來(lái)實(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)容。對(duì)于所有瀏覽器來(lái)說(shuō)，這意味著要把這段文字用斜體方式呈現(xiàn)給大家顯示，這個(gè)與html斜體效果相同。

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

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

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

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

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

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

4. 下畫(huà)線和刪除線

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

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

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

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

5. 鍵盤

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

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

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

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

6. 引用

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

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

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

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

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

7. 定義

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

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

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

8. 已刪除

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

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

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

9. 已插入

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

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

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

3.2.2 設(shè)置對(duì)齊方式

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

1. 居中對(duì)齊

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

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

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

2. 左對(duì)齊

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

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

3. 右對(duì)齊

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

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

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

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)常使用的樣式之一，通過(guò)使用<br>單標(biāo)記來(lái)表示強(qiáng)制換行。也就是說(shuō)，在HTML5中，只需使用<br>或<br/>一個(gè)標(biāo)記便可以完成換行操作。

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

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

2. 設(shè)置段落

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

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

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

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

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

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

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

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

4. 編排格式

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

在代碼中，可以導(dǎo)致段落斷開(kāi)的標(biāo)簽（如標(biāo)題、<p>和<address>標(biāo)簽）絕不能包含在<pre>標(biāo)簽所定義的塊里。盡管有些瀏覽器會(huì)把段落結(jié)束標(biāo)簽解釋為簡(jiǎn)單地?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)簽中，對(duì)文本進(jìn)行換行，并插入空格，以測(cè)試顯示效果。

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

3.3 設(shè)置文字列表

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

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

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

1. 無(wú)序列表

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

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

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

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

2. 有序列表

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

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

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

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

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

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

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

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

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

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

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

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

3.3.3 設(shè)置嵌套列表

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

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

3.3.4 自定義列表

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

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

3.4 使用圖像

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

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

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

1. JPEG（Joint Photographic Experts Group）

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

2. PNG（Portable Network Graphic）

PNG格式是Web圖像中最通用的格式。它是一種無(wú)損壓縮格式，但是如果沒(méi)有插件支持，有的瀏覽器可能不支持這種格式。PNG格式最多可以支持32位顏色，但是不支持動(dòng)畫(huà)圖。

3. GIF（Graphics Interchange Format）

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

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

4. BMP（Windows Bitmap）

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

5. TIFF（Tag Inage File Format）

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

6. TGA（Targa）

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

3.4.2 插入圖像

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

1. 插入本地圖像

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

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

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

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

2. 插入其他來(lái)源的圖像

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

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

3.4.3 編輯圖像

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

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

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

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

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

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

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

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

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

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

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

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

4. 對(duì)齊圖像

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

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

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

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

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

圖像熱點(diǎn)只是在一幅圖像中的某一部分區(qū)域內(nèi)包含超鏈接信息，對(duì)于圖像中其他未定義的區(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)頁(yè)

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

操作步驟

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

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

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

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

操作步驟

STEP|01 鏈接CSS文件。首先，在<title></title>標(biāo)簽之間，修改網(wǎng)頁(yè)標(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;”代碼和“注冊(cè)”文本，并設(shè)置其鏈接和標(biāo)題。

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

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

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

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)練營(yíng)

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

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

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

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

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

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

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