第 6章 網(wǎng)頁設(shè)計與制作

第6章網(wǎng)頁設(shè)計與制作1網(wǎng)頁設(shè)計與制作WWW（WorldWideWeb）即“全球信息網(wǎng)”，是一種提供文本、圖像、動畫、聲音、視頻等多媒體形式的信息服務(wù)，它具有分布式信息存儲和超鏈接的資料檢索等特點，被應(yīng)用在生活的各個領(lǐng)域，是Internet平臺的主要服務(wù)之一。要使信息在WWW上有效地展示，就需要設(shè)計、制作網(wǎng)頁和建立網(wǎng)站。本章將講述網(wǎng)頁制作的基本概念、工具和方法，介紹HTML基礎(chǔ)，簡述網(wǎng)站設(shè)計的基本流程與用Dreamweaver軟件進(jìn)行網(wǎng)頁制作的方法。2內(nèi)容摘要6.1網(wǎng)頁制作基礎(chǔ)6.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容6.3修飾美化網(wǎng)頁6.4AdobeDreamweaverCC2017編輯環(huán)境6.5AdobeDreamweaver網(wǎng)頁制作實例3內(nèi)容摘要6.1網(wǎng)頁制作基礎(chǔ)6.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容6.3修飾美化網(wǎng)頁6.4AdobeDreamweaverCC2017編輯環(huán)境6.5AdobeDreamweaver網(wǎng)頁制作實例46.1網(wǎng)頁制作基礎(chǔ)網(wǎng)頁在網(wǎng)上瀏覽網(wǎng)站時看到的一個個頁面，是一種獨立的超文本文件，擴(kuò)展名為.htm或.html。網(wǎng)站是為網(wǎng)絡(luò)用戶提供信息的場所，是設(shè)計者表達(dá)某些主題內(nèi)容設(shè)計的多張網(wǎng)頁，利用超鏈接把相關(guān)欄目內(nèi)容的網(wǎng)頁組織起來，存放在Web服務(wù)器上。主頁是網(wǎng)站的第一頁即首頁，瀏覽者可通過主頁鏈接到網(wǎng)站其他頁。主頁是網(wǎng)站的核心，對整個網(wǎng)站內(nèi)容起到索引的作用。站點是制作網(wǎng)站時在機(jī)器上的一個物理位置，即在硬盤上保存文件的地方?！靖拍?6.1網(wǎng)頁制作基礎(chǔ)域名Internet上的一個服務(wù)器或一個網(wǎng)絡(luò)系統(tǒng)的名字域名具有唯一性，域名分為國內(nèi)域名和國際域名兩種從技術(shù)上講，域名是一個Internet中用于解決與IP地址對應(yīng)問題的一種方法。IP（InternetProtocol）地址在網(wǎng)絡(luò)上分配給每臺計算機(jī)或網(wǎng)絡(luò)設(shè)備的32位或128位的數(shù)字標(biāo)識在Internet上，每臺計算機(jī)或網(wǎng)絡(luò)設(shè)備的IP地址是唯一的HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）WWW瀏覽器和WWW服務(wù)器之間的應(yīng)用層通信協(xié)議HTTP協(xié)議保證正確傳輸超文本文檔確定傳輸文檔中的哪一部分及內(nèi)容首先顯示（如文本先于圖形）——網(wǎng)頁常用術(shù)語66.1網(wǎng)頁制作基礎(chǔ)FTP（FileTransferProtocol，文件傳輸協(xié)議）在計算機(jī)和網(wǎng)絡(luò)之間交換文件的最簡單的方法主要功能是上傳下載刪除文件，查詢文件目錄，更改文件名稱等Web服務(wù)器Web服務(wù)器是放在網(wǎng)絡(luò)中某個節(jié)點上的計算機(jī)裝有某種服務(wù)系統(tǒng)，擁有獨立的IP地址當(dāng)客戶向Web服務(wù)器發(fā)出請求時，根據(jù)請求的返回相應(yīng)的內(nèi)容至客戶端，按HTTP協(xié)議進(jìn)行交互URL（UniformResourceLocator，統(tǒng)一資源定位器）一種統(tǒng)一的格式來描述各種信息資源，包括文件、服務(wù)器的地址和目錄等，語法是：<服務(wù)類型>://<主機(jī)IP地址或域名>/<資源在主機(jī)上的路徑>超鏈接站點內(nèi)不同網(wǎng)頁之間、站點與Web之間的鏈接關(guān)系——網(wǎng)頁常用術(shù)語76.1網(wǎng)頁制作基礎(chǔ)導(dǎo)航條導(dǎo)航條相當(dāng)于網(wǎng)站的目錄表單供瀏覽者提交填寫的信息的交互網(wǎng)頁發(fā)布將制作好的網(wǎng)頁或網(wǎng)站傳到網(wǎng)絡(luò)上的過程就是發(fā)布瀏覽器是網(wǎng)頁瀏覽器的簡稱，是一種WWW服務(wù)的客戶端瀏覽程序軟件——網(wǎng)頁常用術(shù)語86.1網(wǎng)頁制作基礎(chǔ)構(gòu)成網(wǎng)頁的基本元素文字和圖片、超鏈接是構(gòu)成一個網(wǎng)頁的最基本的元素。網(wǎng)頁的種類靜態(tài)網(wǎng)頁：指在瀏覽器中網(wǎng)頁內(nèi)容、形式及所呈現(xiàn)的效果與事先設(shè)計的完全一致、固定不變，且客戶端與服務(wù)器端不能發(fā)生信息交互的網(wǎng)頁。通常僅用HTML語言編寫。靜態(tài)網(wǎng)頁的后綴名有：htm、html、shtml、xml等。動態(tài)網(wǎng)頁：

包括DHTML(DynamicHTML)動態(tài)網(wǎng)頁和服務(wù)器端動態(tài)網(wǎng)頁——基本概念96.1網(wǎng)頁制作基礎(chǔ)網(wǎng)頁設(shè)計相關(guān)規(guī)范：HTML5、CSS3等網(wǎng)頁設(shè)計的目標(biāo)：網(wǎng)頁設(shè)計的目的是產(chǎn)生網(wǎng)站網(wǎng)頁設(shè)計原則：網(wǎng)頁頁面的元素組合原則有五大原則——網(wǎng)頁設(shè)計統(tǒng)一指設(shè)計作品的整體性。連貫指要注意頁面的相互關(guān)系。設(shè)計中應(yīng)使各部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上相互呼應(yīng)，并注意整個頁面設(shè)計風(fēng)格的一致性，實現(xiàn)視覺上和心理上的連貫。分割是指將頁面分成若干小塊，小塊之間有視覺上的不同，這樣可以使觀者一目了然。換言之，分割是對頁面內(nèi)容的一種分類歸納。對比通過矛盾和沖突，使設(shè)計更加富有生氣。和諧是指整個頁面符合美的法則106.1網(wǎng)頁制作基礎(chǔ)HTML網(wǎng)頁文件編寫工具

目前制作網(wǎng)頁的工具很多，按其工作方式，主要分為兩種：代碼編輯工具和可視化編輯綜合工具。——常用工具

代碼編輯工具此類工具是直接編寫HTML源代碼的軟件，例如Windows系統(tǒng)中的記事本，使用時直接在代碼編輯區(qū)輸入網(wǎng)頁代碼，然后保存成網(wǎng)頁文檔在瀏覽器中打開即可。優(yōu)點采用代碼編輯工具，用戶便于控制代碼，能夠較好地實現(xiàn)HTML代碼在瀏覽器中的顯示效果，網(wǎng)頁的代碼做得較為精練。缺點只適用于對網(wǎng)頁制作語言比較熟悉的用戶。116.1網(wǎng)頁制作基礎(chǔ)HTML網(wǎng)頁文件編寫工具

目前制作網(wǎng)頁的工具很多，按其工作方式，主要分為兩種：代碼編輯工具和可視化編輯綜合工具。——常用工具

可視化編輯綜合工具用戶可以借助此類工具的各種快捷按鈕和屬性選項，以“所見即所得”的方式，在編輯的過程中看到與在瀏覽器所見的效果，系統(tǒng)會自動生成相應(yīng)的代碼；同時，用戶又可以在“代碼”編輯窗口輸入代碼編輯網(wǎng)頁。優(yōu)點采用可視化編輯綜合工具的優(yōu)點是代碼可由系統(tǒng)自動生成，用戶即便不熟悉網(wǎng)頁制作語言也可制作出較好的網(wǎng)頁。使用可視化與代碼相結(jié)合的編輯方式，以提高工作效率。缺點當(dāng)然，由系統(tǒng)自動生成的代碼難免產(chǎn)生一些冗余，因此熟悉HTML語言的用戶可以在“代碼”編輯窗口輸入代碼以減少冗余。126.1網(wǎng)頁制作基礎(chǔ)網(wǎng)站設(shè)計的基本原則

網(wǎng)站設(shè)計是多種多樣的，其設(shè)計風(fēng)格因人而異。為設(shè)計出合理、使用方便且符合規(guī)范的網(wǎng)站，需掌握以下幾個基本原則?！W(wǎng)站設(shè)計

定位性規(guī)范性精練性觀賞性文本設(shè)計網(wǎng)站之前首先要明確設(shè)計思想和風(fēng)格。兼容性網(wǎng)站的文檔較多時，要按欄目內(nèi)容或素材種類建立子目錄存放，目錄的層次不宜太多，忌用中文命名文件夾，以免某些軟件系統(tǒng)不能對中文有良好的支持而致出錯。網(wǎng)頁內(nèi)容要豐富而精練，避免空洞。瀏覽者從主頁到所需閱讀的信息，點擊一般不應(yīng)超過三次，。同一級的頁面應(yīng)該保持相同的設(shè)計風(fēng)格，如色調(diào)、字體和字號等風(fēng)格要統(tǒng)一。設(shè)計時要考慮到網(wǎng)絡(luò)環(huán)境、系統(tǒng)、屏幕分辨率、瀏覽器等環(huán)境因素的兼容影響136.1網(wǎng)頁制作基礎(chǔ)網(wǎng)站制作流程——網(wǎng)站設(shè)計

（1）需求分析（2）結(jié)構(gòu)設(shè)計（3）頁面詳細(xì)設(shè)計網(wǎng)站建設(shè)前期需要進(jìn)行需求分析（請見7.3.1），清楚網(wǎng)站的目的和網(wǎng)站的訪問對象（即上文中提到的網(wǎng)站的定位性），然后確定網(wǎng)站的主題以及風(fēng)格。即網(wǎng)站建設(shè)的整體框架設(shè)計。確定站點網(wǎng)頁之間的鏈接關(guān)系，是網(wǎng)站設(shè)計能否成功的關(guān)鍵所在。一般網(wǎng)站的組織結(jié)構(gòu)都采用樹形結(jié)構(gòu)。在制作網(wǎng)頁之前應(yīng)設(shè)計出每個網(wǎng)頁的頁面結(jié)構(gòu)，即此頁的欄目和模塊的劃分。大多數(shù)網(wǎng)站都是布局表格來布局頁面結(jié)構(gòu)的，有時也結(jié)合框架技術(shù)來完成。146.1網(wǎng)頁制作基礎(chǔ)網(wǎng)站制作流程——網(wǎng)站設(shè)計

（4）素材的制作與整理（5）詳細(xì)實現(xiàn)（6）測試站點在對網(wǎng)站有了一個詳細(xì)的設(shè)計后，還需要有豐富的內(nèi)容去充實它，因此在網(wǎng)站建設(shè)前需要收集和制作所需的素材，包括圖片、音頻、視頻以及相關(guān)文字內(nèi)容等。還要注意的是，網(wǎng)站的內(nèi)容必須合法。要建立一個網(wǎng)站，還需要選擇用哪種方法來實現(xiàn)它。目前，能夠用于設(shè)計網(wǎng)站的方法有很多，可以使用HTML語言來編輯，也可以使用網(wǎng)頁制作工具（如Dream-weaver）來設(shè)計網(wǎng)站。網(wǎng)站一般先創(chuàng)建站點，然后制作主頁，再制作其他頁面。網(wǎng)站制作以后需要在本地進(jìn)行測試，測試的目的主要是檢查網(wǎng)頁文件在不同瀏覽器中的顯示效果，以及網(wǎng)頁之間或者網(wǎng)頁和資源之間是否存在錯誤鏈接，以保證整個網(wǎng)站的正確性。156.1網(wǎng)頁制作基礎(chǔ)網(wǎng)站制作流程——網(wǎng)站設(shè)計

（7）申請域名和主頁空間（8）發(fā)布網(wǎng)站當(dāng)購買域名后，還需要有域名可以訪問到的地方，這時候就要自建或租一個虛擬主機(jī)的空間了，把域名與主機(jī)綁定，當(dāng)訪問域名時，就直接進(jìn)入放在虛擬主機(jī)空間里的網(wǎng)站了。目前阿里云、騰訊云等都提供虛擬主機(jī)的租賃服務(wù)。域名是不可再生資源，域名的申請可以放在網(wǎng)站流程的第一步。域名一般和網(wǎng)站主題或企業(yè)名稱有關(guān)，可以是全拼(如)或首字母(如)，可以加地域或數(shù)字，但一定要有意義且容易記住。16內(nèi)容摘要6.1網(wǎng)頁制作基礎(chǔ)6.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容6.3修飾美化網(wǎng)頁6.4AdobeDreamweaverCC2017編輯環(huán)境6.5AdobeDreamweaver網(wǎng)頁制作實例17HTML簡介

<html>

<head>

<title>例11.1古詩一首</title>

</head>

<body>

<h3>登鸛雀樓</h3>

<h4>——王之渙</h4>

<p>

白日依山盡，

黃河入海流。<br>

欲窮千里目，

更上一層樓。<br>

</p>

</body>

</html>HTML標(biāo)記

一個HTML文件是由許多文字及標(biāo)記組合而成。當(dāng)瀏覽器閱讀HTML時，它會解析包圍文本的所以標(biāo)記，標(biāo)記是用尖括號括起來的字母或者單詞，例如<head><h3><p>等。標(biāo)記告訴瀏覽器文本的結(jié)構(gòu)和意義，哪些文本是標(biāo)題，哪些文本是段落，哪些需要強(qiáng)調(diào)，甚至哪里需要放置圖片。因此，一個HTML文件只要經(jīng)過瀏覽器的解讀，密密麻麻的HTML代碼就能轉(zhuǎn)變?yōu)閳D文并茂的網(wǎng)頁。HTML文件瀏覽器顯示網(wǎng)頁效果18剖析標(biāo)記這里是用來開始標(biāo)題的開始標(biāo)記。標(biāo)記通常由尖括號及標(biāo)記名組成，尖括號即“<”和“>”。<h3>登鸛雀樓</h3>通常在部分內(nèi)容的周圍添加標(biāo)記。這里使用<h3></h3>標(biāo)記告訴瀏覽器“登鸛雀樓”是三級標(biāo)題。</h3>是用來結(jié)束<h3>標(biāo)題的結(jié)束標(biāo)記，它之所以是個結(jié)束標(biāo)記，因為它出現(xiàn)在內(nèi)容的后面，而且在“h3”前面有“/”，所有的結(jié)束標(biāo)記都帶有“/”。我們稱一對開始和結(jié)束標(biāo)記為匹配標(biāo)記（雙標(biāo)記）。整個語句稱為一個元素，在這里我們稱其為<h3>元素。一個元素由閉合標(biāo)記及它們之間的內(nèi)容組成。即：元素=開始標(biāo)記+內(nèi)容+結(jié)束標(biāo)記19HTML基本語法（1）

<html>

<head>

<title>例11.1古詩一首</title>

</head>

<bodytext=“#0000FF”>

<h3>登鸛雀樓</h3>

<h4>——王之渙</h4>

<p>

白日依山盡，

黃河入海流。<br>

欲窮千里目，

更上一層樓。<br>

</p>

</body>

</html>1.HTML標(biāo)記：是以“<”和“>”符號括起來的字符，構(gòu)成一個標(biāo)記。標(biāo)記不區(qū)分大小寫，如寫成<title>、<TITLE>和<Title>都可以。2.雙標(biāo)記：雙標(biāo)記是由開始標(biāo)記和結(jié)束標(biāo)記組成，例如：<h4></h4>，標(biāo)記中的“/”符號表示結(jié)束的意思。3.單標(biāo)記：只有開始標(biāo)記。20HTML基本語法（2） <html>

<head>

<title>例11.1古詩一首</title>

</head>

<bodytext=“#0000FF”>

<h3>登鸛雀樓</h3>

<h4>——王之渙</h4>

<p>

白日依山盡，

黃河入海流。<br>

欲窮千里目，

更上一層樓。 </p>

</body>

</html>4.使用標(biāo)記時一般都以成對方式出現(xiàn)，例如：“<title>網(wǎng)頁標(biāo)題</title>”。5.為進(jìn)一步擴(kuò)展標(biāo)記的用法，在開始標(biāo)記中可加入屬性。格式如下：<標(biāo)記名屬性1="屬性值1"屬性2="屬性值2"...>6.單標(biāo)記因無結(jié)束標(biāo)記，因可直接使用，例如：“在文本后面換行<br>”。21HTML基本語法（3） <html>

<head>

<title>例11.1古詩一首</title><!–

注釋：這是網(wǎng)頁的標(biāo)題-->

</head>

<bodytext=“#0000FF”>

<h3>登鸛雀樓</h3>

<h4>——王之渙</h4>

<p>

白日依山盡，

黃河入海流。<br>

欲窮千里目，

更上一層樓。<br>

</p>

</body>

</html>8.標(biāo)記與標(biāo)記可以嵌套使用。7.HTML語言和其他語言一樣也有注釋標(biāo)記，注釋方法是，在注釋的前后加上“<!--”和“-->”標(biāo)記。htmlheadbodytitleh3h4pbrbr標(biāo)記嵌套關(guān)系圖22HTML文檔結(jié)構(gòu) <html>

<head>

<title>網(wǎng)頁標(biāo)題</title>

</head>

<body>

網(wǎng)頁內(nèi)容 </body>

</html>文檔頭部文檔主體標(biāo)簽中的文字用來表示網(wǎng)頁的標(biāo)題，顯示在瀏覽器的標(biāo)題欄上。在瀏覽器顯示的網(wǎng)頁內(nèi)容文檔的開始與結(jié)束23常用標(biāo)簽1.文本結(jié)構(gòu)標(biāo)簽2.文字格式標(biāo)簽3.圖像標(biāo)簽4.鏈接標(biāo)簽24文本結(jié)構(gòu)標(biāo)記1.<h1></h1>……<h6></h6>2.<p></p>3.<br>4.<blockquote></blockquote>25<h1></h1>……<h6></h6>標(biāo)記<h1>一級標(biāo)題</h1><h2>二級標(biāo)題</h2><h3>三級標(biāo)題</h3><h4>四級標(biāo)題</h4><h5>五級標(biāo)題</h5><h6>六級標(biāo)題</h6>普通文字顯示效果標(biāo)題文字與普通文字有什么區(qū)別？標(biāo)簽里的數(shù)字越大，所顯示的文字越小。26<p></p>與<br>標(biāo)記<h3>登鸛雀樓</h3>——王之渙<p>白日依山盡，黃河入海流。<br>欲窮千里目，更上一層樓。</p>文本分段在此換行27<blockquote></blockquote>標(biāo)記<blockquote>

塊引文標(biāo)簽間的文字在瀏覽器上顯示的結(jié)果：引文左右兩邊被縮進(jìn)顯示。</blockquote>引文左右兩邊被縮進(jìn)顯示。28文本結(jié)構(gòu)標(biāo)記應(yīng)用示例1<body><h1align="center">網(wǎng)頁標(biāo)題</h1><h2align="center">網(wǎng)頁副標(biāo)題</h2><h3align="left">欄目標(biāo)題1</h3><palign="left">正文1</p><h3align="right">欄目標(biāo)題2</h3><h4align="right">子欄目標(biāo)題1</h4><palign="right">正文2，<br>換行顯示。</p><blockquote>

塊引文標(biāo)簽間的文字在瀏覽器上顯示的結(jié)果：引文左右兩邊被縮進(jìn)顯示。

</blockquote></body><hn>、<p>、<blockquote>都是塊元素。它們獨立顯示，文本前后有空行。<br>不屬于塊元素，文本前后無空行。29<ol></ol>與<li></li>有序列表標(biāo)記<body><ol><li>列表項目1</li><li>列表項目2</li><li>列表項目3</li></ol><ol

type="a"

start="3"><li>列表項目1</li><li>列表項目2</li><li>列表項目3</li></ol></body>ol、li

兩個元素結(jié)合使用就構(gòu)成了有序列表。以小寫字母排序從第3個字母開始排序30有序列表的type屬性值屬性示例說明type=”1”以數(shù)字排序，如：1，2，3，…等。type=”a”以小寫英文字母排序，如：a，b，c，…等。type=”A”以大寫英文字母排序，如：A，B，C，…等。type=”i”以小寫羅馬字母排序，如：i，ii，iii，…等。type=”I”以小寫羅馬字母排序，如：I，II，III，…等。格式：<oltype=“屬性值”start=“數(shù)字”>31<ul></ul><li></li>無序列表標(biāo)記<body><ul><li>列表項目1</li><li>列表項目2</li><li>列表項目3</li></ul><ultype="circle"><li>列表項目1</li><li>列表項目2</li><li>列表項目3</li></ul></body>ul、li

兩個元素結(jié)合使用就構(gòu)成了無序列表。以○為項目符缺省type以●為項目符32無序列表的type屬性值屬性示例說明type=”disc”以●符號標(biāo)識列表項。type=”circle”以○符號標(biāo)識列表項。type=”square”以■符號標(biāo)識列表項。格式：<ultype=“屬性值>華南理工大學(xué)計算機(jī)教學(xué)團(tuán)隊33文本結(jié)構(gòu)標(biāo)記應(yīng)用示例2<body><h3>網(wǎng)頁制作“三劍客”</h3><ol><li>Dreamweaver</li><li>Flash</li><li>Fireworks</li></ol><h3>網(wǎng)頁制作“三劍客”</h3><ul><li>Dreamweaver</li><li>Flash</li><li>Fireworks</li></ul></body>瀏覽器把<hn>、<ol>、<p>、<blockquote>標(biāo)簽中的文本作為獨立的一段文字顯示，與其它文本有一行間隔。<br>標(biāo)簽則沒有此間隔。34文字格式標(biāo)記1.<b></b>與<i></i>2.與3.<cite></cite>4.<em></em>與<strong></strong>35<b></b>與<i></i>標(biāo)記<p>文字正常顯示</p><p><b>文字加粗顯示</b></p><p><i>文字斜體顯示</i></p>把文字以“斜體”樣式顯示。把文字以“黑體”（加粗）樣式顯示。36與標(biāo)記<p>a^b=N</p><p>log_aN=b</p>把文字以“上標(biāo)”（加粗）格式顯示。把文字以“下標(biāo)”格式顯示。37<cite></cite>標(biāo)記<p>毛主席教導(dǎo)我們：<cite>“好好學(xué)習(xí)，天天向上?！?lt;/cite></p>Cite與blockquote用法上有什么區(qū)別？Cite元素主要用于引用某人的話，引文以斜體顯示。38<em></em>與<strong></strong>標(biāo)記<em>學(xué)</em>以致<strong>用</strong>。我重要！em與strong元素主要用于信息的語氣上強(qiáng)調(diào)重要性。我更重要！！39文字格式標(biāo)記應(yīng)用示例<body><p>毛主席教導(dǎo)我們：

<cite>“好好學(xué)習(xí)，天天向上?！?lt;/cite></p><p><b>對數(shù)的概念</b></p><p>下列式子：</p><p><i>a^b=N和

log_aN=b</i></p><p>

表示a、b、N這三個數(shù)之間的關(guān)系。

</p><p><em>學(xué)</em>以致<strong>用</strong>。

</p><p>

設(shè)N=100，求log₁₀N。

</p></body>40圖像標(biāo)記

<img>

在網(wǎng)頁中加入圖片可以減少文字的敘述，使網(wǎng)頁更直觀有趣。在HTML文件中加入圖片很簡單，只要在想放置圖片的地方使用<img

src=“圖片文件名”>標(biāo)記，瀏覽器就會自動在對應(yīng)的位置加入圖片。41<img>的相關(guān)屬性屬性示例說明src=”p1.jpg”鏈接圖片文件的位置。width=”300”設(shè)置圖片的寬度。hight=”200”設(shè)置圖片的高度。border=”3”設(shè)置圖片的邊框大小。align=”top”設(shè)置圖片與文字之間的對齊方式。alt=”這是一幅地圖”設(shè)置圖片提示信息。格式：<img

src=“圖片”…其它屬性…>42圖像標(biāo)記應(yīng)用示例<body><h3>水果圖片</h3><img

src="p1.jpg"width="504“height="390"border="3"align="right“alt=“這是一幅圖片”>圖片在文本的右邊</body>當(dāng)鼠標(biāo)在圖片上方時，出現(xiàn)提示信息。圖片在瀏覽器的右邊。利用屬性可以控制圖片的位置、大小…等。43超鏈接標(biāo)記<a>超鏈接是網(wǎng)頁中最基本又實用的功能之一，只要利用鼠標(biāo)點擊一下有鏈接的地方（文字、圖片…等），即可以鏈接到另一個頁面（或者同一個頁面中的其它地方）。

在HTML文件中創(chuàng)建超鏈接的標(biāo)記為<a>標(biāo)記。44<a>超鏈接標(biāo)記<a

href="page2.htm">跳轉(zhuǎn)到另一個頁面</a><a>元素用來創(chuàng)建一個到其它頁面的鏈接。<a>元素中的內(nèi)容會作為鏈接的標(biāo)題。瀏覽器將在標(biāo)題下添加下劃線，表明可以點擊它。Href屬性用來指定鏈接的目的地。在此鏈接中，瀏覽器會顯示“跳轉(zhuǎn)到另一個頁面”鏈接，點擊將跳轉(zhuǎn)到“page2.htm”頁面。超鏈接標(biāo)記格式45鏈接標(biāo)記應(yīng)用示例<body><h3>鏈接標(biāo)記應(yīng)用示例</h3><p><ahref="page2.htm">跳轉(zhuǎn)到另一個頁面</a></p><p><ahref="/">華南理工大學(xué)</a></p><p><ahref="mailto:user1002@163.com">電子郵箱</a></p><p><ahref="49/">FTP服務(wù)器</a></p><p><ahref="網(wǎng)頁制作素材.rar">下載文件</a></p><p><ahref="page2.htm"target="_blank">以新的窗口打開另一個頁面</a></p></body>46表格標(biāo)記1.<table></table>2.<tr></tr>3.<td></td>4.<th></th>47<table>表格屬性屬性示例說明border=”1”設(shè)置表格邊框的寬度，若不設(shè)此值或為“0”，則表格線不可見。width=”300”設(shè)置表格的寬度。height=”200”設(shè)置表格的高度。align=”center”設(shè)置表格的對齊方式，居左、居中、居右。bgcolor=”#88bbff”設(shè)置圖片與文字之間的對齊方式。格式：<tableborder=“1”…其它屬性…>48<tr></tr><th></th>

<td></td>標(biāo)記

<tableborder="1"

width="300">

<tr>

<th>表頭第1列</th><th>表頭第2列</th>

</tr><tr>

<td>第2行第1列</td><td>第2行第2列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td></tr></table>49表格應(yīng)用示例<tableborder="1">

<caption>電話簿</caption><tr><thwidth="50%"colspan="2">一班</th><thwidth="50%"colspan="2">二班</th></tr><tr><tdwidth="20%">張平</td><tdwidth="30%">lt;/td><tdwidth="20%">李四海</td><tdwidth="30%">33843936</td></tr><tr><tdwidth="20%">王小山</td><tdwidth="30%">lt;/td><tdwidth="20%">何新</td><tdwidth="30%">lt;/td></tr></table>表格標(biāo)題表示此單元格寬度占整個表格寬度的比例。此單元格跨2列50表格布局示例（1）<body><h3>表格布局</h3><tablewidth="400"><caption>中國名山</caption><tr><tdcolspan="2">中國十大名山最新排行榜終于誕生了。這里面既有五岳之林的泰山，也有宗教名山峨眉山，而黃山以其突出的審美價值躍居前列。</td></tr><tr>

<td><img

src="黃山.jpg"width="200"></td>

<td><img

src="泰山.jpg"width="200"></td></tr><tr>

<tdalign="center">黃山</td>

<tdalign="center">泰山</td></tr></table></body>設(shè)定表格寬度兩圖片和文字并列排放。文本信息跨2列51表格布局示例（2）<tablewidth="400"><tr><tdcolspan="2"align="center"><h3>中國名山</h3></td></tr><tr><tdalign="center">上帝的盆景</td><tdalign="center">華夏的圖騰</td></tr><tr><td><img

src="黃山.jpg"width="200"></td><td><img

src="泰山.jpg"width="200"></td></tr><tr><td>黃山可以說無峰不石，無石不松，無松不奇，并以奇松、怪石、云海、溫泉四絕著稱于世。</td><td>泰山也是佛、道兩教興盛之地，是歷代帝王朝拜之山。建廟塑像，刻石題字，留下了眾多文物古跡。</td></tr></table>小標(biāo)題、圖片和文字并列排放。標(biāo)題跨2列小標(biāo)題居中限定圖片大小526.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容——HTML5新增的主體結(jié)構(gòu)article元素nav元素

該元素專門用于定義頁面上的“導(dǎo)航條”，包括上方的“主導(dǎo)航條”、側(cè)邊的“邊欄導(dǎo)航”、頁面內(nèi)部的“頁面導(dǎo)航”、頁面下方的“底部導(dǎo)航”等。例如：canvasHTML5新結(jié)構(gòu)元素video

和audio本地離線存儲特殊內(nèi)容元素新的表單控件536.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容——HTML5新增的主體結(jié)構(gòu)aside元素該元素專門用于定義當(dāng)前頁面或當(dāng)前文章的附屬信息。例如：新增的非主體結(jié)構(gòu)header

該元素主要為<article.../>定義元素的“頭部”信息。hgroup

該元素主要用于組織<h1>...<h6>的標(biāo)題元素footer

主要用于為<artcle.../>元素定義腳注部分Address

通常位于文檔的末尾，用來在文檔中呈現(xiàn)聯(lián)系信息figure

該元素用于表示一塊“圖片區(qū)域”，該元素內(nèi)部包含一個或多個<img.../>canvasHTML5新結(jié)構(gòu)元素video

和audio本地離線存儲特殊內(nèi)容元素新的表單控件546.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容——HTML5新增的非主體結(jié)構(gòu)

例如，將如下代碼插入<body></body>內(nèi)，在瀏覽器中打開該文件，效果如圖所示。55內(nèi)容摘要6.1網(wǎng)頁制作基礎(chǔ)6.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容6.3修飾美化網(wǎng)頁6.4AdobeDreamweaverCC2017編輯環(huán)境6.5AdobeDreamweaver網(wǎng)頁制作實例566.3修飾美化網(wǎng)頁自CSS（CascadingStyleSheet，意為“層疊樣式表”）以來，網(wǎng)頁設(shè)計方式發(fā)生了很大的變化，過去網(wǎng)頁外觀的變化通過元素標(biāo)簽的屬性來設(shè)定，現(xiàn)在已由CSS所取代。隨著CSS的不斷發(fā)展，樣式表的功能也更加充實、完善，設(shè)計者使用CSS實現(xiàn)修飾美化網(wǎng)頁變得更加容易。網(wǎng)頁能否給人留好印象，除思想內(nèi)容外，還需美麗的視覺感受。頁面視覺悅目、信息有條理、呈現(xiàn)動態(tài)顯示效果，則能提高用戶對網(wǎng)頁的閱讀興趣及瀏覽效率。頁面的視覺美感，除了要有好的創(chuàng)意和美術(shù)設(shè)計外，還需使用代碼技術(shù)來實現(xiàn)其設(shè)計思想。57樣式表概述CSS是英文CascadingStyleSheet的縮寫，意為“層疊樣式表”。它能提供許多HTML無法支持的屬性，例如網(wǎng)頁的文字、圖片、表格等，都可以使用CSS來美化，它與HTML標(biāo)記嵌套在一起，能使網(wǎng)頁產(chǎn)生不同的顯示效果。美化網(wǎng)頁1精簡代碼2維護(hù)方便3使用CSS的優(yōu)點：58樣式表的基本格式樣式表格式基本格式：選擇符{屬性:屬性值}多屬性格式：選擇符{屬性1:屬性值1;屬性2:屬性值2;}應(yīng)用示例：p{font-style:italic;color:red}

屬性與屬性之間使用分號“;”間隔。59樣式表的創(chuàng)建與引用1.樣式表創(chuàng)建方式2.樣式表引用方式3.CSS常用屬性60樣式表創(chuàng)建方式1（標(biāo)記選擇符）格式：標(biāo)記名稱{屬性:屬性值}應(yīng)用示例：h3{color:red;}p{font-family:幼圓;color:#0000ff}定義三級標(biāo)題為紅色。定義段落為幼圓字體、藍(lán)色字。（1）定義標(biāo)記選擇符61樣式表創(chuàng)建方式1（標(biāo)記選擇符實例）<html><head><title>標(biāo)記選擇符樣式表的創(chuàng)建與引用例示</title><!--下面是創(chuàng)建樣式表--><styletype="text/css">

h3{color:red;}

p{font-family:幼圓;color:#0000ff}</style></head><body><!--下面是引用樣式表-->

<h3>這是紅色的標(biāo)題</h3>

<p>這是第一段文本，字體為幼圓，顏色為藍(lán)色。</p>

<p>這是第二段文本，和第一段文本一樣都是使用相同的樣式表。</p></body></html>使用<style>定義樣式表h3、p為標(biāo)記選擇符<h3>、<p>以樣式表定義的屬性顯示62樣式表創(chuàng)建方式2（類選擇符）格式：.類名稱{屬性:屬性值}應(yīng)用示例：.text{font-family:幼圓;}.color{color:#0000ff}p.text{font-family:幼圓;}p.color{color:#0000ff}自定義名稱前面加“.”。“.”前面加p表示此樣式只用于段落。（2）定義類選擇符63樣式表創(chuàng)建方式2（類選擇符實例）<html><head><title>類選擇符樣式表的創(chuàng)建與引用例示</title><!--下面是創(chuàng)建樣式表--><styletype="text/css">

p.text{font-family:幼圓}

p.color{color:#0000ff}</style></head><body><!--下面是引用樣式表--><pclass="text">第一段文本字體為幼圓</p><pclass="color">第二段文本顏色為藍(lán)色</p></body></html>使用<style>定義樣式表p.text、p.color為類記選擇符在<p>標(biāo)記中使用樣式表定義的屬性顯示64樣式表創(chuàng)建方式3（ID選擇符）格式：#ID名稱{屬性:屬性值}應(yīng)用示例：#p1{text-indent:3em;color:#00ff00}#p2{text-indent:6em;color:#0000ff}自定義名稱前面加“#”。（3）定義ID選擇符65樣式表創(chuàng)建方式3（

ID選擇符實例）<html><head><title>ID選擇符樣式表的創(chuàng)建與引用例示</title><!--下面是創(chuàng)建樣式表--><styletype="text/css">#p1{width:600px;height:100;background:#bbff88}#p2{width:600px;height:150;background:#88bbff}</style></head><body><!--下面是引用樣式表--><pid="p1">這是第一段文本</p><pid="p2">這是第二段文本</p></body></html>定義區(qū)域范圍定義區(qū)域底色66樣式表引用方式1（嵌入式）

嵌入式是把樣式表嵌入文檔頭部內(nèi)。前面所舉之例都是把樣式表嵌入在文檔頭部的 <head></head>標(biāo)記之間的，例如：（1）嵌入式<head>

<styletype=“text/css”>

h3{color:red;}

.text{font-family:幼圓;color:#0000ff}

</style></head>67樣式表引用方式1（嵌入式實例）<html>

<head><title>樣式表的創(chuàng)建與引用1（嵌入式）</title><!--下面是創(chuàng)建樣式表--><styletype="text/css">

h3{color:red;}

.text{font-family:幼圓;color:#0000ff}</style>

</head><body><!--下面是引用樣式表-->

<h3>這是紅色的標(biāo)題</h3>

<pclass="text">這是第一段文本，字體為幼圓，顏色為藍(lán)色。</p><p>這是第二段文本，沒有引用樣式表。</p></body></html>樣式表嵌入到<head>中引用h3標(biāo)記選擇符引用.text類選擇符沒有引用樣式表68樣式表引用方式2（內(nèi)聯(lián)式）

內(nèi)聯(lián)式是把樣式表直接寫在HTML標(biāo)記內(nèi)。（2）內(nèi)聯(lián)式<h3style="color:red">例如：說明：

例中h3是HTML標(biāo)記，style=""，是定義內(nèi)聯(lián)式樣式表的格式，樣式寫在引號""內(nèi)。69樣式表引用方式（內(nèi)聯(lián)式實例）<html><head><title>樣式表的創(chuàng)建與引用2（內(nèi)聯(lián)式）</title></head><body>

<p

style="font-family:幼圓;color:#0000ff">

這是第一段文本，字體為幼圓，顏色為藍(lán)色。

</p><p>

這是第二段文本，沒有引用樣式表。

</p></body></html>樣式表定義在標(biāo)記中。執(zhí)行此標(biāo)記時，引用定義的樣式顯示。此標(biāo)記沒有引用樣式表。70樣式表引用方式3（外部式）

外部式是把樣式表作為外部文件保存，后綴名為.css。CSS作為一個外部文件引入的方式有兩種，一種是做鏈接，另一種是導(dǎo)入。兩種外部引用方式的語句都是放在文件頭<head></head>標(biāo)記中。（3）外部式<linkrel=styleheet

href=“文件名.css”type=“text/css“>鏈接方式：<styletype="text/css">

@importurl(文件名.css)</style>導(dǎo)入方式：71樣式表引用方式3（外部式）整個運(yùn)用過程如下：1）首先定義樣式表。如：h1{color:red;font-family:黑體}p{text-indent:3em;color:#0000ff}2）命名以.css為后綴名的文件保存。如：teststyle.css3）引用：<head>

<linkrel=StyleSheet

href=“teststyle.css”></head>或者是<head>

<styletype=“text/css”>

@importurl(teststyle.css);

</style></head>72樣式表引用方式3（外部鏈接式）<html><head><title>外部鏈接式引用示例</title>

<linkrel=StyleSheet

href="teststyle.css"></head><body>

<h1>這標(biāo)題用黑體紅字顯示</h1>

<p>文本段落首行縮進(jìn)3em，藍(lán)色字體。</p>

<p>這是外部鏈接式的引用例子。</p></body></html>鏈接外部樣式表。執(zhí)行這3個標(biāo)記時，引用外部樣式顯示。h1{color:red;font-family:黑體}p{text-indent:3em;color:#0000ff}樣式表保存在teststyle.css文件中。73樣式表引用方式3（外部導(dǎo)入式）<html><head><title>外部導(dǎo)入式引用示例</title><styletype="text/css">@importurl(teststyle.css);</style></head><body>

<h1>這標(biāo)題用黑體紅字顯示</h1>

<p>文本段落首行縮進(jìn)3em，藍(lán)色字體。</p>

<p>這是外部導(dǎo)入式的引用例子。</p></body></html>導(dǎo)入外部樣式表。執(zhí)行這3個標(biāo)記時，引用外部樣式顯示。h1{color:red;font-family:黑體}p{text-indent:3em;color:#0000ff}樣式表保存在teststyle.css文件中。74CSS常用屬性1.字體屬性2.文本屬性3.顏色與背景屬性75字體屬性表屬性名屬性值功能應(yīng)用示例font-family字體名稱設(shè)置字體p{font-family:幼圓}font-styleNormal、italic、oblique設(shè)置字體樣式p{font-style:italic}font-sizept、px、in、cm、mm等設(shè)置字號大小p{font-size:25pt}font-weightNormal、bold、bolder、lighter、100～900等設(shè)置字體粗細(xì)p{font-weight:bold}font-variantNormal、small-caps設(shè)置字體變形p{font-variant:small-caps}76<head><title>字體相關(guān)屬性應(yīng)用示例</title><styletype="text/css">

p.s{font-size:20pt}/*字號為20pt*/

.fv{font-variant:small-caps}/*小型大寫字母*/

.ff{font-family:幼圓}/*幼圓字體*/

.fs{font-style:italic}/*斜體字*/

.fw{font-weight:bold}/*粗體字*/</style></head><body><h3>使用默認(rèn)字體的顯示效果</h3><p>html是英文HyperTextMarkupLanguage的縮寫。

</p><hrwidth=600><h3>加入字體樣式的顯示效果</h3><pclass=s><spanclass=fv>html</span>是

<spanclass=ff>英文</span><spanclass=fs>HyperTextMarkupLanguage</span>的

<spanclass=fw>縮寫</span>。

</p></body字體屬性的應(yīng)用77文本屬性表屬性名屬性值功能應(yīng)用示例text-alignleft、center、right、justify設(shè)置文字水平對齊p{text-align:center}vertical-aligntop、middle、bottom、super、sub設(shè)置文字垂直對齊td{vertical-align:middle}word-spacingnormal、長度單位設(shè)置單詞間距p{word-spacing:8pt}letter-spacingnormal、長度單位設(shè)置字母間距p{letter-spacing:4pt}text-indent長度單位、百分比設(shè)置首行縮進(jìn)p{text-indent:30pt}text-transformuppercase、lowercase、capitalze、none設(shè)置文字大小寫p{text-transform:uppercase}78<head><title>文本屬性應(yīng)用示例</title><styletype="text/css">

.hh{letter-spacing:18pt}/*字符間隔距離*/

.tt{font-size:16pt;/*文本字號大小*/text-align:left;/*文本向左對齊*/text-indent:30pt;/*文本首行縮進(jìn)*/word-spacing:8pt}/*單詞間隔距離*/</style></head><body><h3>使用默認(rèn)文本的顯示效果：</h3><h2>上帝的盆景</h2><p>HTML是英文HyperTextMarkupLanguage的縮寫。

</p><hrwidth=600><h3>加入文本樣式的顯示效果：</h3><h2class="hh">上帝的盆景</h2><pclass="tt">HTML是英文HyperTextMarkupLanguage的縮寫。

</p></body>文本屬性的應(yīng)用79顏色與背景屬性表屬性名屬性值功能應(yīng)用示例color顏色值設(shè)置文本顏色p{color:#00ff00}background-color顏色值設(shè)置背景顏色p{background-color:#0088ff}background-image圖像文件設(shè)置背景圖像p{background-image:back.jpg}80<head><title>例11.19顏色與背景屬性應(yīng)用示例</title><styletype="text/css">

body{background-color:#ddffee}/*設(shè)置背景色*/

table{background-image:url(黃山.jpg);/*設(shè)置背景圖*/

color:#000000;/*設(shè)置文本色*/

font-size:16}/*設(shè)置字號大小*/</style></head><body>

<tablealign="center"width="330"height="200"><tr><tdalign="center">上帝的盆景</td></tr><tr><tdvalign="bottom"><p>

黃山可以說無峰不石，無石不松，無松不奇，并以奇松、怪石、云海、溫泉四絕著稱于世。

</p></td></tr>

</table></body>顏色與背景屬性的應(yīng)用81內(nèi)容摘要6.1網(wǎng)頁制作基礎(chǔ)6.2網(wǎng)頁的結(jié)構(gòu)與內(nèi)容6.3修飾美化網(wǎng)頁6.4AdobeDreamweaverCC2017編輯環(huán)境6.5AdobeDreamweaver網(wǎng)頁制作實例826.4AdobeDreamweaverCC2017編輯環(huán)境——工作區(qū)A.

應(yīng)用程序欄

B.

文檔工具欄

C.

“文檔”窗口

D.

工作區(qū)切換器

E.

面板

F.

“代碼”視圖

G.

狀態(tài)欄

H.

標(biāo)簽選擇器

I.

“實時”視圖

J.

工具欄836.4AdobeDreamweaverCC2017編輯環(huán)境——文檔工具欄使用“文檔”工具欄包含的按鈕，可以在文檔的不同視圖之間快速切換。工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點間傳輸文檔有關(guān)的常用命令和選項。如圖6.7所示。以下選項將顯示在“文檔”工具欄中：“代碼”視圖僅在“文檔”窗口中顯示“代碼”視圖?！安鸱帧币晥D在“代碼”視圖和“實時/設(shè)計”視圖之間拆分“文檔”窗口。流體網(wǎng)格文檔無“設(shè)計”視圖選項可用。“實時”視圖是一個交互式預(yù)覽，可準(zhǔn)確地實時呈現(xiàn)HTML5項目和更新，以便在用戶做出更改時顯示用戶的更改?！霸O(shè)計”視圖顯示文檔的表現(xiàn)形式，以說明用戶如何在Web瀏覽器中查看文檔。846.4AdobeDreamweaverCC2017編輯環(huán)境——工具欄工具欄垂直顯示在“文檔”窗口的左側(cè)，在所有視圖中可見。工具欄上的按鈕是特定于視圖的，并且僅在適用于用戶所使用的視圖時顯示。例如，如果用戶正在使用“實時”視圖，則特定于“代碼”視圖的選項（例如“格式化源代碼”）將不可見。

856.4AdobeDreamweaverCC2017編輯環(huán)境——狀態(tài)欄文檔”窗口底部的狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其他信息。A.標(biāo)簽選擇器B.“輸出”面板C.代碼顏色D.插入和覆蓋切換E.行和列編號圖6.9狀態(tài)欄866.4AdobeDreamweaverCC2017編輯環(huán)境——屬性檢查器使用屬性檢查器（【窗口】→【屬性】），可以檢查和編輯當(dāng)前選定頁面元素（如文本和插入對象）的最常用屬性，如圖6.10所示。若要訪問特定屬性檢查器的幫助，請單擊屬性檢查