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

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

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

目前制作網(wǎng)頁的工具很多，按其工作方式，主要分為兩種：代碼編輯工具和可視化編輯綜合工具?！Ｓ霉ぞ?/p>

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

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

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

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

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

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

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

（7）申請域名和主頁空間（8）發(fā)布網(wǎng)站當購買域名后，還需要有域名可以訪問到的地方，這時候就要自建或租一個虛擬主機的空間了，把域名與主機綁定，當訪問域名時，就直接進入放在虛擬主機空間里的網(wǎng)站了。目前阿里云、騰訊云等都提供虛擬主機的租賃服務。域名是不可再生資源，域名的申請可以放在網(wǎng)站流程的第一步。域名一般和網(wǎng)站主題或企業(yè)名稱有關，可以是全拼(如)或首字母(如)，可以加地域或數(shù)字，但一定要有意義且容易記住。16內容摘要6.1網(wǎng)頁制作基礎6.2網(wǎng)頁的結構與內容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標記

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

<html>

<head>

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

</head>

<bodytext=“#0000FF”>

<h3>登鸛雀樓</h3>

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

<p>

白日依山盡，

黃河入海流。<br>

欲窮千里目，

更上一層樓。<br>

</p>

</body>

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

<head>

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

</head>

<bodytext=“#0000FF”>

<h3>登鸛雀樓</h3>

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

<p>

白日依山盡，

黃河入海流。<br>

欲窮千里目，

更上一層樓。 </p>

</body>

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

<head>

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

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

</head>

<bodytext=“#0000FF”>

<h3>登鸛雀樓</h3>

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

<p>

白日依山盡，

黃河入海流。<br>

欲窮千里目，

更上一層樓。<br>

</p>

</body>

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

<head>

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

</head>

<body>

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

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

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

塊引文標簽間的文字在瀏覽器上顯示的結果：引文左右兩邊被縮進顯示。

</blockquote></body><hn>、<p>、<blockquote>都是塊元素。它們獨立顯示，文本前后有空行。<br>不屬于塊元素，文本前后無空行。29<ol></ol>與<li></li>有序列表標記<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

兩個元素結合使用就構成了有序列表。以小寫字母排序從第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>無序列表標記<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

兩個元素結合使用就構成了無序列表。以○為項目符缺省type以●為項目符32無序列表的type屬性值屬性示例說明type=”disc”以●符號標識列表項。type=”circle”以○符號標識列表項。type=”square”以■符號標識列表項。格式：<ultype=“屬性值>華南理工大學計算機教學團隊33文本結構標記應用示例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>標簽中的文本作為獨立的一段文字顯示，與其它文本有一行間隔。<br>標簽則沒有此間隔。34文字格式標記1.<b></b>與<i></i>2.與3.<cite></cite>4.<em></em>與<strong></strong>35<b></b>與<i></i>標記<p>文字正常顯示</p><p><b>文字加粗顯示</b></p><p><i>文字斜體顯示</i></p>把文字以“斜體”樣式顯示。把文字以“黑體”（加粗）樣式顯示。36與標記<p>a^b=N</p><p>log_aN=b</p>把文字以“上標”（加粗）格式顯示。把文字以“下標”格式顯示。37<cite></cite>標記<p>毛主席教導我們：<cite>“好好學習，天天向上?！?lt;/cite></p>Cite與blockquote用法上有什么區(qū)別？Cite元素主要用于引用某人的話，引文以斜體顯示。38<em></em>與<strong></strong>標記<em>學</em>以致<strong>用</strong>。我重要！em與strong元素主要用于信息的語氣上強調重要性。我更重要??！39文字格式標記應用示例<body><p>毛主席教導我們：

<cite>“好好學習，天天向上?！?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ù)之間的關系。

</p><p><em>學</em>以致<strong>用</strong>。

</p><p>

設N=100，求log₁₀N。

</p></body>40圖像標記

<img>

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

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

src=“圖片”…其它屬性…>42圖像標記應用示例<body><h3>水果圖片</h3><img

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

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

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

<td></td>標記

<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表格應用示例<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>表格標題表示此單元格寬度占整個表格寬度的比例。此單元格跨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>設定表格寬度兩圖片和文字并列排放。文本信息跨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>小標題、圖片和文字并列排放。標題跨2列小標題居中限定圖片大小526.2網(wǎng)頁的結構與內容——HTML5新增的主體結構article元素nav元素

該元素專門用于定義頁面上的“導航條”，包括上方的“主導航條”、側邊的“邊欄導航”、頁面內部的“頁面導航”、頁面下方的“底部導航”等。例如：canvasHTML5新結構元素video

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

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

該元素主要用于組織<h1>...<h6>的標題元素footer

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

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

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

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

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

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

h3{color:red;}

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

<h3>這是紅色的標題</h3>

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

<p>這是第二段文本，和第一段文本一樣都是使用相同的樣式表。</p></body></html>使用<style>定義樣式表h3、p為標記選擇符<h3>、<p>以樣式表定義的屬性顯示62樣式表創(chuàng)建方式2（類選擇符）格式：.類名稱{屬性:屬性值}應用示例：.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">第二段文本顏色為藍色</p></body></html>使用<style>定義樣式表p.text、p.color為類記選擇符在<p>標記中使用樣式表定義的屬性顯示64樣式表創(chuàng)建方式3（ID選擇符）格式：#ID名稱{屬性:屬性值}應用示例：#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（嵌入式）

嵌入式是把樣式表嵌入文檔頭部內。前面所舉之例都是把樣式表嵌入在文檔頭部的 <head></head>標記之間的，例如：（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>這是紅色的標題</h3>

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

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

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

<p

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

這是第一段文本，字體為幼圓，顏色為藍色。

</p><p>

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

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

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

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

@importurl(文件名.css)</style>導入方式：71樣式表引用方式3（外部式）整個運用過程如下：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>這標題用黑體紅字顯示</h1>

<p>文本段落首行縮進3em，藍色字體。</p>

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

<h1>這標題用黑體紅字顯示</h1>

<p>文本段落首行縮進3em，藍色字體。</p>

<p>這是外部導入式的引用例子。</p></body></html>導入外部樣式表。執(zhí)行這3個標記時，引用外部樣式顯示。h1{color:red;font-family:黑體}p{text-indent:3em;color:#0000ff}樣式表保存在teststyle.css文件中。74CSS常用屬性1.字體屬性2.文本屬性3.顏色與背景屬性75字體屬性表屬性名屬性值功能應用示例font-family字體名稱設置字體p{font-family:幼圓}font-styleNormal、italic、oblique設置字體樣式p{font-style:italic}font-sizept、px、in、cm、mm等設置字號大小p{font-size:25pt}font-weightNormal、bold、bolder、lighter、100～900等設置字體粗細p{font-weight:bold}font-variantNormal、small-caps設置字體變形p{font-variant:small-caps}76<head><title>字體相關屬性應用示例</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>使用默認字體的顯示效果</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字體屬性的應用77文本屬性表屬性名屬性值功能應用示例text-alignleft、center、right、justify設置文字水平對齊p{text-align:center}vertical-aligntop、middle、bottom、super、sub設置文字垂直對齊td{vertical-align:middle}word-spacingnormal、長度單位設置單詞間距p{word-spacing:8pt}letter-spacingnormal、長度單位設置字母間距p{letter-spacing:4pt}text-indent長度單位、百分比設置首行縮進p{text-indent:30pt}text-transformuppercase、lowercase、capitalze、none設置文字大小寫p{text-transform:uppercase}78<head><title>文本屬性應用示例</title><styletype="text/css">

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

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

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

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

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

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

color:#000000;/*設置文本色*/

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

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

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

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

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

應用程序欄

B.

文檔工具欄

C.

“文檔”窗口

D.

工作區(qū)切換器

E.

面板

F.

“代碼”視圖

G.

狀態(tài)欄

H.

標簽選擇器

I.

“實時”視圖

J.

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

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