網(wǎng)頁設(shè)計與制作 教案

電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：Internet基礎(chǔ)知識、網(wǎng)頁和網(wǎng)站教學(xué)目的及要求：了解INTERNET的基礎(chǔ)知識，掌握靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別，了解網(wǎng)站的元素構(gòu)成

教學(xué)重點(diǎn)：網(wǎng)頁的類型和網(wǎng)站的元素教學(xué)難點(diǎn)：網(wǎng)站的元素一、回顧自己了解的網(wǎng)頁相關(guān)的知識，了解我們平時上網(wǎng)的網(wǎng)站內(nèi)容二、學(xué)習(xí)新課一、Internet基礎(chǔ)知識 1、什么是Internet Internet是全球信息資源的代名詞，它的信息量非常大。是一個全球互聯(lián)的廣域網(wǎng)絡(luò)。Internet建立于70年代發(fā)展起來的計算機(jī)網(wǎng)絡(luò)群之上。第一個網(wǎng)絡(luò)由美國國防部資助的Arpanet網(wǎng)絡(luò)，現(xiàn)在已經(jīng)發(fā)展為Internet網(wǎng)絡(luò)。2、URL和HTTP

1．URL在瀏覽器的地址欄里輸入的網(wǎng)站地址叫做URL(UniformResourceLocator，統(tǒng)一資源定位符)。當(dāng)我們在瀏覽器的地址框中輸入一個URL或是單擊一個超級鏈接時，URL就確定了要瀏覽的網(wǎng)頁地址。瀏覽器通過超文本傳輸協(xié)議(HTTP)，將Web服務(wù)器上站點(diǎn)的網(wǎng)頁代碼提取出來，顯示成網(wǎng)頁。URL地址的組成簡介如下：例如：。它的含義如下：（1）http://：代表超文本傳輸協(xié)議，一般默認(rèn)省略（2）www：代表主機(jī)；（3）163.com/：代表域名2．HTTPHTTP協(xié)議(HyperTextTransferProtocol，超文本傳輸協(xié)議)是用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議。它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少。它不僅保證計算機(jī)正確快速地傳輸超文本文檔，還確定傳輸文檔中的哪一部分，以及哪部分內(nèi)容首先顯示(如文本先于圖形)等。3、超文本與超媒體 超文本我們在上網(wǎng)瀏覽一個網(wǎng)站的頁面時，打開的網(wǎng)頁中的頁面不只是普通的文字，還可能包含有普通鏈接。這些頁面對應(yīng)的文件不再是普通的“文本文件”，這些包含鏈接的文件被稱為超文本文件。超文本文件要遵從一個嚴(yán)格的標(biāo)準(zhǔn)，這個標(biāo)準(zhǔn)就是超文本標(biāo)記語言(HTML)。我們所有的網(wǎng)頁都是可以用HTML來制作的。超媒體超媒體系統(tǒng)是超文本系統(tǒng)的擴(kuò)展，其不同點(diǎn)僅在于文件內(nèi)容的不同。超文本文件僅包含文本信息，而超媒體文件則包含各種媒體、多媒體或流媒體信息。4、Web瀏覽器 WorldWideWeb稱為萬維網(wǎng)，簡稱Web。它的基本結(jié)構(gòu)是采用開放式的客戶/服務(wù)器結(jié)構(gòu)（Client/Server），分成服務(wù)器端、客戶接收機(jī)及通訊協(xié)議三個部分。二、網(wǎng)頁和網(wǎng)站（一）靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)分1.網(wǎng)頁和網(wǎng)站網(wǎng)頁，是網(wǎng)站中的一“頁”，通常是HTML格式（文件擴(kuò)展名為.html或.htm或.asp或.aspx或.php或.jsp等）。網(wǎng)頁實際是一個文件，他存放在世界某個角落的的某一臺計算機(jī)中，而這臺計算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取。網(wǎng)站(英文名字為website)是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。2.靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁網(wǎng)頁包括靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁用戶基本上不能參與，只是網(wǎng)站頁面的靜態(tài)發(fā)布。靜態(tài)網(wǎng)頁是相對于動態(tài)網(wǎng)頁而言，是指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁。如圖1-1所示是一個靜態(tài)網(wǎng)頁：

圖1-1靜態(tài)網(wǎng)頁

動態(tài)網(wǎng)頁一般涉及數(shù)據(jù)庫操作，如：注冊、登錄、查詢、購物等，都需要設(shè)計強(qiáng)大的服務(wù)器端動態(tài)程序，并考慮各種可能出現(xiàn)的出錯情況，以保證網(wǎng)站的交互性和安全性。圖1-2所示是一個動態(tài)網(wǎng)頁圖1-2動態(tài)網(wǎng)頁（二）網(wǎng)頁中的常見元素要學(xué)習(xí)網(wǎng)頁設(shè)計與制作，首先要認(rèn)識網(wǎng)頁，了解網(wǎng)頁中的常見元素，只有這樣才能更加合理地組織和安排網(wǎng)頁內(nèi)容。如圖1-3所示。圖1-3網(wǎng)頁的元素圖1-3所示是網(wǎng)易網(wǎng)站的首頁，文字與圖片是構(gòu)成一個網(wǎng)頁的兩個最基本的元素。也可以簡單的理解為：文字，就是網(wǎng)頁的內(nèi)容，圖片，就是網(wǎng)頁的美觀。除此之外，網(wǎng)頁的元素還包括動畫、音樂、程序等等。下面分別介紹各個網(wǎng)頁元素及其在網(wǎng)頁中的作用。1.文本文本是最重要的信息載體與交流工具，是網(wǎng)頁發(fā)布信息所用的主要形式。一個網(wǎng)頁展現(xiàn)給用戶的主要應(yīng)該是文本信息內(nèi)容。2.圖形網(wǎng)頁上的圖形一般使用JPEG、GIF和PNG3種格式，其中使用最廣泛的是JPEG和GIF格式，這兩種格式具有跨平臺的特性，可以在不同操作系統(tǒng)支持的瀏覽器上顯示。通常圖形在網(wǎng)頁中有如下的應(yīng)用。3.超鏈接超鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根本的元素之一。4.表格表格用來控制網(wǎng)頁中信息的布局方式。許多大型的網(wǎng)站（如搜狐、網(wǎng)易、新浪、雅虎等）都是使用表格來進(jìn)行頁面布局的。5.表單(1)網(wǎng)頁區(qū)別于其他媒體的一個重要標(biāo)志就是它的交互功能。例如:注冊和留言功能(2)通常網(wǎng)頁的交互功能都是利用表單來實現(xiàn)的。表單是網(wǎng)頁中站點(diǎn)服務(wù)器處理的一組數(shù)據(jù)輸入域，當(dāng)訪問者單擊按鈕或圖形來提交表單后，數(shù)據(jù)就會傳送到服務(wù)器上。6.聲音和視頻聲音和視頻也是多媒體網(wǎng)頁的一個重要組成部分。例如：背景音樂，網(wǎng)頁上嵌入的視頻等。三、小結(jié)本節(jié)課我們學(xué)習(xí)了網(wǎng)頁和網(wǎng)站的相關(guān)基礎(chǔ)知識，要求能夠理解四、作業(yè)：在網(wǎng)上找一個網(wǎng)頁分析網(wǎng)站的類型和網(wǎng)站的元素旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：HTML簡介教學(xué)目的及要求：了解HTML的基本語法和結(jié)構(gòu)，能夠編寫基本的HTML網(wǎng)頁。

教學(xué)重點(diǎn)：HTML的語法和結(jié)構(gòu)教學(xué)難點(diǎn)：編寫HTML的基本網(wǎng)頁一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、常用網(wǎng)頁制作工具1、網(wǎng)頁制作軟件網(wǎng)頁設(shè)計師最常用到的軟件是PS（photoshop）、dreamweaver、FLASH。PS：一款專業(yè)的圖像處理軟件，通過它可以制作網(wǎng)頁的界面和按鈕等。Dreamweaver:網(wǎng)頁靜態(tài)布局設(shè)計軟件。FLASH：完成二維動畫的軟件，可以完成片頭動畫，或整個FLASH網(wǎng)站。2、HTML概念

Html是英文HyperTextMarkupLanguage的縮寫，中文意思是“超文本標(biāo)志語言”，用它編寫的文件(文檔)的擴(kuò)展名是.html或.htm，它們是可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或FrontPageEditor等編輯工具來編寫Html文件。3、HTML基本結(jié)構(gòu)HTML標(biāo)記是由<和>所括住的指令，主要分為:單標(biāo)記指令、雙標(biāo)記指令(由<起始標(biāo)記>，</結(jié)束標(biāo)記>所構(gòu)成)。HTML網(wǎng)頁文件保存格式是(以.htm或.html為文件后綴保存)將HTML網(wǎng)頁文件由瀏覽器打開顯示。HTML文件基本架構(gòu)<HTML>文件開始<HEAD>標(biāo)頭區(qū)開始<TITLE>...</TITLE>標(biāo)題區(qū)</HEAD>標(biāo)頭區(qū)結(jié)束<BODY>網(wǎng)頁正文區(qū)開始網(wǎng)頁正文區(qū)內(nèi)容</BODY>網(wǎng)頁正文區(qū)結(jié)束</HTML>文件結(jié)束<HTML>網(wǎng)頁文件格式。<HEAD>標(biāo)頭區(qū):記錄文件基本資料，如作者、編寫時間。<TITLE>標(biāo)題區(qū):文件標(biāo)題須使用在標(biāo)頭區(qū)內(nèi)，可以在瀏覽器最上面看到標(biāo)題。<BODY>網(wǎng)頁正文區(qū):文件資料，即在瀏覽器上看到的網(wǎng)站內(nèi)容。注意：通常一份HTML網(wǎng)頁文件包含二個部份:<HEAD>...</HEAD>標(biāo)頭區(qū)、<BODY>...</BODY>網(wǎng)頁正文區(qū)。而<HTML>和</HTML>代表網(wǎng)頁文件格式。習(xí)慣上一個網(wǎng)站的首頁名稱通常訂為index.htm或index.html這樣只要瀏覽網(wǎng)站，瀏覽器便會自動的找出index.htm文件。4、HTML文字樣式設(shè)置的基本標(biāo)簽—<font>設(shè)置字體樣式的基本標(biāo)簽是<font></font>，被其包含的文本為樣式作用區(qū)。1.設(shè)置文字的顏色color是<font></font>標(biāo)簽的屬性之一，用于設(shè)置文字顏色。2.設(shè)置文字的尺寸size也是<font></font>標(biāo)簽的屬性，用于設(shè)置文字大小。size的值為1-7，默認(rèn)為3。我們可以size屬性值之前加上“＋”、“－”字符，來指定相對于字號初始值的增量或減量。3.設(shè)置文字的字體face也是<font></font>標(biāo)簽的屬性，用于設(shè)置文字字體（字型）。我們還可以設(shè)置其他文字效果。<i>這是斜體文字</i><em>這也是斜體文字</em>用雙標(biāo)簽<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的標(biāo)題部分。<strong></strong>被稱為特別強(qiáng)調(diào)標(biāo)簽，也是文字加粗4.給文字加下劃線用雙標(biāo)簽<u></u>可添加下劃線到被作用文字。5.其他文字效果

<hn>...</hn>標(biāo)題，設(shè)定標(biāo)題字體大小，n=1(大)~6(小)會自動跳下一行。通常用在如章節(jié)、段落等標(biāo)題上。5、HTML表格

表格是html的一項非常重要功能，利用其多種屬性能夠設(shè)計出多樣化的表格。使用表格可以使你的頁面有很多意想不到的效果，使頁面更加整齊美觀。1.<table>...</table>標(biāo)記<table>...</table>表格指令。我們可以通過下面的屬性對表格進(jìn)行控制?！lign設(shè)置對齊方式·bgcolor背景顏色·border邊框·height高度·width寬度2.<caption>...</caption>表格標(biāo)題相關(guān)屬性:·align設(shè)置對齊方式3.<tr>...</tr>標(biāo)記<tr>...</tr>表格列(</tr>可省略)相關(guān)屬性:align設(shè)置對齊方式4.<th>...</th>標(biāo)記<th>...</th>表格欄標(biāo)題(表頭)粗體字(</th>可省略)。相關(guān)屬性:·align設(shè)置里面的內(nèi)容對齊方式·colspan欄寬·rowspan欄高5.<td>...</td>標(biāo)記<td>...</td>表格欄資料(儲存格)(</td>可省略)。相關(guān)屬性:·align設(shè)置列內(nèi)容的對齊方式·bgcolor背景顏色·height高度·width寬度·colspan欄寬，就是跨幾列·rowspan欄高，就是跨幾行下面舉例說明一下：如:(加強(qiáng)型)增加背景顏色、表格標(biāo)題、欄標(biāo)題、跨欄寬、跨欄高。<tableborder=1align=centerbgcolor=#ccccff><caption>表格標(biāo)題</caption><tr><td><thcolspan=2>行標(biāo)題1<thcolspan=2>行標(biāo)題2<tr><throwspan=2>列標(biāo)題1<td>a<td>a<td>a<td>a<tr><td>b<td>b<td>b<td>b<tr><throwspan=2>列標(biāo)題2<td>c<td>c<td>c<td>c<tr><td>d<td>d<td>d<td>d</table>表格標(biāo)題行標(biāo)題1行標(biāo)題2列標(biāo)題1aaaabbbb列標(biāo)題2ccccdddd顯示效果如圖1-9所示。6、HTML列表標(biāo)記無序列表無序列表是一個項目的列表，此列項目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無序列表始于<ul>標(biāo)簽。每個列表項始于<li>。<ul><li>Coffee</li><li>Milk</li></ul>瀏覽器顯示如下：CoffeeMilk列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。有序列表同樣，有序列表也是一列項目，列表項目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于<ol>標(biāo)簽。每個列表項始于<li>標(biāo)簽。<ol><li>Coffee</li><li>Milk</li></ol>瀏覽器顯示如下：CoffeeMilk列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>瀏覽器顯示如下：CoffeeBlackhotdrinkMilkWhitecolddrink定義列表的列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。7、HTML區(qū)段標(biāo)記一個網(wǎng)站不僅要內(nèi)容豐富外，也要有美觀簡潔的版面。html所提供的區(qū)段標(biāo)記功能，如果可以好好的利用也會有相當(dāng)不錯的效果。1.<hr>水平線如:<hraling=certenwidth=90%>2.<br>換行3.<p>...</p>段落標(biāo)記，跳下一行并加一行空白。(</p>可省略)4.<center>...</center>標(biāo)記置中標(biāo)記，如:<center>置中</center>5.<nobr>...</nobr>不跳下一行6.<pre>...</pre>以文件原始格式顯示如:<pre>原始格式:文件</pre>8、HTML鏈接標(biāo)記

鏈接可說是html中最重要的功能！因為html擁有鏈接的功能，使你能接上internet、www……享受多姿多彩的網(wǎng)絡(luò)世界。1.鏈接分類外部鏈接——鏈接至網(wǎng)絡(luò)的某個url網(wǎng)址或文件，可參考考網(wǎng)絡(luò)鏈接方式。內(nèi)部鏈接——鏈接html文件的某個區(qū)段。2.網(wǎng)絡(luò)鏈接方式3.常用鏈接標(biāo)記（1）<base>標(biāo)記設(shè)定基本url位置或路徑，以后只要設(shè)定文件名稱即會自動加上位置或路徑。相關(guān)屬性:·href鏈接的url位址或文件·target指定鏈接到的url位址或文件顯示于那一個視窗(可和<frame>視窗標(biāo)記配合使用或開新的視窗)如:<basehref="http:///"><ahref="kk.htm">內(nèi)容</a><basehref="http:///"target=frame1>（2）<a>...</a>鏈接指令相關(guān)屬性:·href鏈接的url位址或文件·name名稱·target指定鏈接到的url位址或文件顯示于那一個視窗(可和<frame>視窗標(biāo)記配合使用或開新的視窗)如:（3）外部鏈接<ahref="http:///">內(nèi)容</a><ahref="http:///"target=frame1>內(nèi)容</a>內(nèi)部鏈接（相當(dāng)于錨點(diǎn)）例如：ch1.htm文件<ahref=#a>內(nèi)容</a>(欲鏈接至html文件a點(diǎn))<aname=a>肉容</a>(html文件a點(diǎn))ch2.htm文件<ahref=ch1.htm#a>內(nèi)容</a>(欲鏈接至ch1.htm文件a點(diǎn))"內(nèi)容"表示鏈接點(diǎn)，可以是文字或圖案。(即游標(biāo)移到時，會變成手指形狀的地方)<link>鏈接指令(用于head區(qū)，設(shè)定css文件)。（5）設(shè)定鏈接、未鏈接部份顏色設(shè)定鏈接、未鏈接部份顏色，用<body>...</body>標(biāo)記。相關(guān)屬性:·alink按下鏈接部份未放開時顏色·link未看過的鏈接部份顏色·vlink已看過的鏈接部份顏色如:<bodylink=#0000ffalink=#ff0000vlink=#00ff00>9、HTML設(shè)置圖片

圖片增加了網(wǎng)站版面的美觀，不過也不要放大量的圖片，從而拖慢網(wǎng)站傳輸?shù)男视嘘P(guān)設(shè)定圖片的方法共有以下幾種:設(shè)定html文件背景圖片、背景顏色<body>...</body>標(biāo)記中設(shè)置正文內(nèi)容的背景圖片，用background標(biāo)記，bgcolor設(shè)置網(wǎng)頁的背景顏色。如:<bodybackground=a.gif>...</body>或<bodybgcolor=#000000>...</body>2.設(shè)定圖片。通過<img>標(biāo)記來設(shè)置圖片的路徑3.設(shè)定地圖。通過<map>...</map>標(biāo)記來設(shè)置10、加入聲音html不僅能插入圖片，也可以載入midi音樂、wav音效喔！1.背景音樂標(biāo)記<bgsound>用來設(shè)置網(wǎng)頁的背景音樂、音效。相關(guān)屬性:·loop循環(huán),背景音樂播放次數(shù)·src文件或url位址(可為wav、midi格式)如:<bgsoundsrc=m-1.midloop=true>這個指明音樂的路徑和循環(huán)播放。2.內(nèi)嵌音樂插件<embed>...</embed>內(nèi)嵌插件。相關(guān)屬性:·height高度·width寬度(可設(shè)百分比%)·src設(shè)定內(nèi)嵌物件的url位址·loop循環(huán),背景音樂播放次數(shù)·autostart自動播放如:<embedsrc=m-1.midwidth=145height=60autostart=trueloop=true></embed>11、滾動條的實現(xiàn)這是由ie提供的滾動條。<marquee>...</marquee>文字卷動(滾動條)。三、小結(jié)本節(jié)課我們介紹了HTML的基本標(biāo)記和結(jié)構(gòu)，要求讀者掌握基本的語法結(jié)構(gòu)四、作業(yè)上機(jī)練習(xí)完成本節(jié)的例子，然后自己用HTML制作一個個人主頁的首頁或者其他網(wǎng)頁的首頁。旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：HTML5簡介教學(xué)目的及要求：了解HTML5的新增標(biāo)簽。

掌握HTML5的結(jié)構(gòu)教學(xué)重點(diǎn)：新增標(biāo)簽教學(xué)難點(diǎn)：HTML5的結(jié)構(gòu)一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、HTML5的變化介紹如下：1.新的文檔結(jié)構(gòu)HTML5的DTD聲明為:<!doctypehtml><!DOCTYPEhtml>等也是正確的，因為HTML語法是不區(qū)分大小寫的。以上代碼就表明是一個HTML5文檔。2.新增的結(jié)構(gòu)標(biāo)簽結(jié)構(gòu)標(biāo)簽：(塊狀元素)有意義的div（就是后面介紹的盒子） <article> 標(biāo)記定義一篇文章 <header> 標(biāo)記定義一個頁面或一個區(qū)域的頭部 <nav> 標(biāo)記定義導(dǎo)航鏈接 <section> 標(biāo)記定義一個區(qū)域 <aside> 標(biāo)記定義頁面內(nèi)容部分的側(cè)邊欄 <hgroup> 標(biāo)記定義文件中一個區(qū)塊的相關(guān)信息 <figure> 標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題 <figcaption> 標(biāo)簽定義figure元素的標(biāo)題。 <footer> 標(biāo)記定義一個頁面或一個區(qū)域的底部 <dialog> 標(biāo)記定義一個對話框(會話框)類似微信新的結(jié)構(gòu)標(biāo)簽帶來的是網(wǎng)頁布局的改變及提升對搜索引擎的友好。3.新增的多媒體標(biāo)簽多媒體交互標(biāo)簽如下： <video>標(biāo)記定義一個視頻 <audio>標(biāo)記定義音頻內(nèi)容 <source>標(biāo)記定義媒體資源 <canvas>標(biāo)記定義圖片 <embed>標(biāo)記定義外部的可交互的內(nèi)容或插件比如flashHTML5的多媒體標(biāo)簽的出現(xiàn)意味著富媒體的發(fā)展以及支持不使用插件的情況下即可操作媒體文件，極大地提升了用戶體驗。4.新增的Web應(yīng)用標(biāo)簽5.新增的其他標(biāo)簽6.刪除的標(biāo)簽7.重新定義的HTML標(biāo)簽8.嶄新的頁面布局重點(diǎn)介紹下布局的變化。如下所示。如圖1-14是傳統(tǒng)的DIV布局。圖中的DIV是容器，ID是對元素進(jìn)行標(biāo)識。具體的知識可以參見第10章。讀者可以在學(xué)習(xí)第10章后寫出該布局的HTML代碼，CSS代碼。圖1-14DIV+CSS布局圖1-14中的是DIV嵌套DIV進(jìn)行屬性設(shè)置，然后進(jìn)行布局。圖1-15是HTML5標(biāo)簽進(jìn)行的布局圖1-15HTML5標(biāo)簽布局在圖1-15中應(yīng)用了HTML5的新標(biāo)簽，我們說明如下：<header>標(biāo)記定義主體內(nèi)容區(qū)的頭部。用<nav>標(biāo)記定義導(dǎo)航鏈接。用<section> 標(biāo)記定義一個區(qū)域，再在左側(cè)區(qū)域中再用<article>標(biāo)記定義一篇文章的區(qū)域，再在里面用<header>定義文章區(qū)域的頭部，用<footer> 標(biāo)記定義文章區(qū)域的底部。<aside> 標(biāo)記定義頁面內(nèi)容部分的側(cè)邊欄。用<footer> 標(biāo)記定義主體內(nèi)容區(qū)域的底部三、小結(jié)我們簡要介紹了HTML5的特性及結(jié)構(gòu)，重點(diǎn)在于如何應(yīng)用新標(biāo)簽完成HTML5的結(jié)構(gòu)布局四、作業(yè)嘗試練習(xí)HTML5的頁面布局代碼編寫旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：DreamweaverCC2017簡介、站點(diǎn)的規(guī)劃教學(xué)目的及要求：了解DreamweaverCC2017的操作界面；掌握站點(diǎn)的建立及規(guī)劃。

教學(xué)重點(diǎn)：站點(diǎn)的建立及規(guī)劃教學(xué)難點(diǎn)：站點(diǎn)的建立及規(guī)劃一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課下面我們先對DreamweaverCC2017進(jìn)行簡介一、DreamweaverCC2017工作界面DreamweaverCC2017工作界面，如圖2-1所示。圖2-1DreamweaverCC2017工作界面DreamweaverCC2017的工作界面主要由最上面的菜單欄，中間的文檔編輯窗口，右側(cè)面板組幾部分組成，下面對主要的部分進(jìn)行講解。二、文檔工具欄該欄中放置了“文檔”窗口視圖（如設(shè)計視圖、代碼視圖、拆分視圖）按鈕等按鈕，如圖2-2所示。圖2-2文檔工具欄上圖中的幾個按鈕的切換，要注意，可以在代碼下編寫網(wǎng)頁，也可以拆分，設(shè)計，制作的網(wǎng)頁也可以實時顯示。三、文檔窗口該窗口中顯示當(dāng)前創(chuàng)建和編輯的文檔，這是進(jìn)行網(wǎng)頁設(shè)計的主要工作窗口?？梢栽谠摯翱谥性O(shè)計網(wǎng)頁的任意內(nèi)容如文字、圖片、表格、表單、動畫等內(nèi)容。四、屬性面板的使用屬性面板用于查看和更改所選對象的各種屬性。注意：選取的對象不同，其屬性面板的參數(shù)設(shè)置項目也不同。五、站點(diǎn)的規(guī)劃與創(chuàng)建（一）站點(diǎn)的規(guī)劃在開始使用Dreamweaver之前，一般應(yīng)該先建立一個Web站點(diǎn)，才能夠進(jìn)行以后的操作。1.MacromediaDreamweaverCC2017的站點(diǎn)在MacromediaDreamweaverCC2017中提供了3類站點(diǎn)，即本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測試服務(wù)器文件夾。本地站點(diǎn)和遠(yuǎn)程站點(diǎn)使能夠在本地磁盤和Web服務(wù)器之間傳輸文件，這使可以輕松管理Dreamweaver站點(diǎn)中的文件；而測試服務(wù)器文件夾則用于動態(tài)頁面的調(diào)試。2.規(guī)劃站點(diǎn)結(jié)構(gòu)規(guī)劃站點(diǎn)結(jié)構(gòu)包括以下三方面內(nèi)容：（1）歸類站點(diǎn)內(nèi)容首先需要整理一下自己站點(diǎn)頁面的內(nèi)容，然后對其進(jìn)行分類。一般把相關(guān)的網(wǎng)頁放在同一個文件夾中。（2）項目放置的位置站點(diǎn)中除了基本的網(wǎng)頁文件外，通常還包括圖像、動畫、模板文件等許多資源，也應(yīng)該對這些內(nèi)容進(jìn)行分類，并采用有效的方式進(jìn)行存儲，這樣有利于更好的管理和使用資源。（3）本地站點(diǎn)與遠(yuǎn)程站點(diǎn)的統(tǒng)一為了便于對本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的管理，應(yīng)該將本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的結(jié)構(gòu)統(tǒng)一，即保持結(jié)構(gòu)一致。當(dāng)做好網(wǎng)站并上傳到遠(yuǎn)程站點(diǎn)時，就能清楚地知道遠(yuǎn)程站點(diǎn)的結(jié)構(gòu)，而不需要上網(wǎng)查詢。3.導(dǎo)航草圖設(shè)計經(jīng)過以上的規(guī)劃分類后，就可以根據(jù)上面的設(shè)置畫出一個導(dǎo)航草圖，比如舉例如圖2-7所示。圖2-7導(dǎo)航設(shè)計這個圖我們只是一個例子。（二）創(chuàng)建站點(diǎn)基本結(jié)構(gòu)1.站點(diǎn)的創(chuàng)建站點(diǎn)的創(chuàng)建方法有多種。創(chuàng)建站點(diǎn)的具體操作步驟如下。（1）執(zhí)行“站點(diǎn)”|“新建站點(diǎn)”命令，彈出“站點(diǎn)設(shè)置對象”對話框，在對話框中輸入“第一個站點(diǎn)”。（2）在“本地站點(diǎn)根文件夾”后面的文本框，通過瀏覽按鈕選擇“本地站點(diǎn)”，如我們可以選擇在硬盤上建立的網(wǎng)站文件夾，如“F:\DWCC2017\”，其中這個文件夾是我們在建立站點(diǎn)前，在硬盤上創(chuàng)建的。（3）單擊左側(cè)的“服務(wù)器”選項，在出現(xiàn)的對話框中單擊“+”按鈕。（4）在彈出的對話框中，服務(wù)器的名稱，保持默認(rèn)。在“連接方法”后面的下拉菜單中選擇“本地網(wǎng)絡(luò)”。（5）在“服務(wù)器文件夾”后面的文本框中，同樣選擇本地文件夾的路徑如：“F:\DWCC2017\”，然后以上選擇完成后，在“WebURL”后面的文本框中輸入:99/，選擇完成后的效果如圖2-13所示。圖2-13“服務(wù)器基本”設(shè)置注意：我們一般在“WebURL”后面的文本框中輸入http://localhost/即本地主機(jī)，也可以輸入/即本地網(wǎng)卡的網(wǎng)絡(luò)地址，這樣輸入就需要我們安裝并配置計算機(jī)本地的IIS程序（Internet信息服務(wù)），而此時在“WebURL”后面的文本框中輸入:99/，是因為我們用了一個測試軟件來替代IIS，這個替代軟件可以用來測試ASP的腳本語言的動態(tài)網(wǎng)站，對于ASP.NET,JSP,PHP動態(tài)網(wǎng)站則不適用。（6）切換到“高級”選項，在“服務(wù)器模型”后面的下拉菜單中有可以選擇的網(wǎng)站類型，我們可以選擇ASPVBScript,ASP.NETC#,也可以選擇JSP,PHPMySQL，這四種網(wǎng)站類型，要注意的是我們同一個網(wǎng)站在此處只需要選擇一種類型即可。（7）設(shè)置完成后，我們單擊“保存”，回到“站點(diǎn)設(shè)置”對話框，我們將替代IIS的測試軟件放到“F:\DWCC2017\”的根目錄下面，雙擊打開這個軟件，會出現(xiàn)網(wǎng)頁瀏覽界面如圖2-16所示。圖2-16網(wǎng)頁瀏覽界面在上機(jī)的介紹中我們用到一個免IIS的ASP測試工具，對于做動態(tài)網(wǎng)頁，可以用這個工具取代，但是只是對于ASP網(wǎng)頁，對于其他網(wǎng)頁還是需要安裝相應(yīng)的測試服務(wù)器。三、小結(jié)本節(jié)我們重點(diǎn)介紹了站點(diǎn)的規(guī)劃與創(chuàng)建，請一定要掌握，多多練習(xí)四、作業(yè)完成一個站點(diǎn)的創(chuàng)建與規(guī)劃，自己選擇一個網(wǎng)站的主題進(jìn)行網(wǎng)站的創(chuàng)建與規(guī)劃旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：站點(diǎn)的管理，建立一般網(wǎng)頁的方法教學(xué)目的及要求：了解網(wǎng)站管理的方法，掌握用DW制作一般網(wǎng)頁的方法。

教學(xué)重點(diǎn)：DW建立網(wǎng)頁教學(xué)難點(diǎn)：DW建立網(wǎng)頁一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課上節(jié)介紹了建立站點(diǎn)的方法，本節(jié)將學(xué)習(xí)對站點(diǎn)進(jìn)行管理和創(chuàng)建網(wǎng)頁，我們先介紹管理站點(diǎn)的方法一、管理站點(diǎn)的使用管理站點(diǎn)的使用包括以下幾點(diǎn)：利用Dreamweaver，可以輕松實現(xiàn)站點(diǎn)的設(shè)置、文件的上傳下載以及文件的更新等。本節(jié)將介紹如何對站點(diǎn)進(jìn)行管理及維護(hù)。（1）打開“管理站點(diǎn)”對話框。選擇“站點(diǎn)”丨“管理站點(diǎn)”菜單項，打開“管理站點(diǎn)”對話框，在對話框中可以看到已創(chuàng)建的所有站點(diǎn)，如圖2-17所示。圖2-17已經(jīng)有的站點(diǎn)（2）在圖2-17中有我們用標(biāo)記標(biāo)出來的幾個管理站點(diǎn)的選項，我們可以一個一個去操作。管理站點(diǎn)主要包含刪除、編輯、復(fù)制、導(dǎo)出、導(dǎo)入站點(diǎn)，我們可以根據(jù)書中的提示和軟件向?qū)б徊讲酵瓿啥?、站點(diǎn)窗口的使用使用站點(diǎn)窗口可以組織本地站點(diǎn)和遠(yuǎn)程站點(diǎn)上的文件，如創(chuàng)建新的HTML文檔，查看、打開和移動文件，創(chuàng)建文件夾、刪除項目等。同時，也可以使用站點(diǎn)窗口在本地站點(diǎn)和遠(yuǎn)程站點(diǎn)間傳遞文件，或使用站點(diǎn)地圖放置站點(diǎn)導(dǎo)航條。1、打開站點(diǎn)窗口打開站點(diǎn)窗口的具體操作如下。（1）選擇“窗口”｜“文件”菜單命令可打開“文件”面板，如圖2-22所示。圖2-22打開文件面板（2）在“文件”面板中單擊“擴(kuò)展/折疊”按鈕，可打開站點(diǎn)窗口，如圖2-22所示。2、認(rèn)識站點(diǎn)窗口默認(rèn)情況下，遠(yuǎn)程站點(diǎn)或站點(diǎn)地圖顯示在站點(diǎn)窗口的左側(cè)，而本地站點(diǎn)顯示在右側(cè)，可以通過設(shè)置站點(diǎn)參數(shù)來更改它們的顯示方式。3、站點(diǎn)工具欄使用站點(diǎn)窗口中的工具欄可以快速設(shè)置站點(diǎn)窗口的顯示狀態(tài)，也可以在本地站點(diǎn)和遠(yuǎn)程站點(diǎn)之間傳遞文件，站點(diǎn)窗口的工具欄如圖2-23所示。圖2-23站點(diǎn)工具欄站點(diǎn)窗口工具欄上各按鈕的含義如下。：連接遠(yuǎn)程服務(wù)器按鈕。：單擊“站點(diǎn)文件”按鈕可在站點(diǎn)窗口中顯示本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的文件結(jié)構(gòu)。默認(rèn)情況下顯示的是本地站點(diǎn)文件視圖。展開，可以顯示遠(yuǎn)程服務(wù)器和本地文件，如圖2-24所示。圖2-24測試服務(wù)器：單擊“同步”按鈕可以刷新本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的目錄列表。：單擊“獲取文件”按鈕可以將遠(yuǎn)程站點(diǎn)中的文件復(fù)制到本地站點(diǎn)中。：單擊“上傳文件”按鈕可以將本地站點(diǎn)中的文件上傳到遠(yuǎn)程站點(diǎn)中。4、在站點(diǎn)中添加新文件夾和文件在站點(diǎn)中添加新文件夾和文件的具體操作如下。（1）打開“文件”面板，選擇要建立新文件夾或文件的根目錄。（2）在根目錄圖標(biāo)上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件”或“新建文件夾”命令，如圖2-26所示。圖2-26建立文件或文件夾（3）Dreamweaver會自動創(chuàng)建名為“untitled.htm”的新文件或名為“untitled”的文件夾，并自動設(shè)置為可改寫狀態(tài)，如圖2-27所示。圖2-27默認(rèn)的新文件夾（4）直接輸入新的名稱即可，如liuy。5、重命名文件或文件夾要重命名文件或文件夾，只需在“文件”面板中要重命名的文件或文件夾的名稱上單擊鼠標(biāo)即可進(jìn)入可改寫狀態(tài)，重新輸入新的名稱即可。2.4.7刪除文件或文件夾要刪除文件或文件夾，首先選中它，然后按Delete鍵，在打開的確認(rèn)對話框中單擊“是”按鈕即可。三、DreamweaverCC2017中建立一般網(wǎng)頁的方法DreamweaverCC2017創(chuàng)建網(wǎng)頁的步驟如下。（1）啟動DreamweaverCC2017。選擇“開始”“程序”再選擇Macromedia，選擇MacromediaDreamweaverCC2017菜單命令，打開起始頁。（2）新建一個空白的HTML網(wǎng)頁。在主菜單中選擇“文件”｜“新建”在出現(xiàn)的“新建文檔”的對話框中，左側(cè)選擇新建文檔，中間選擇“HTML”，右側(cè)選擇HTML5，如圖2-28所示。圖2-28創(chuàng)建網(wǎng)頁（3）單擊“創(chuàng)建”，Dreamweaver即會自動創(chuàng)建一個空白的HTML網(wǎng)頁。（4）然后在工作區(qū)中輸入內(nèi)容。在工作窗口的“編輯窗口”中輸入一些簡單的句子，如“DreamweaverCC2017入門與提高”，如圖2-29所示。圖2-29工作區(qū)輸入內(nèi)容（4）瀏覽測試。在工作區(qū)中添加內(nèi)容后需要對做好的網(wǎng)頁進(jìn)行瀏覽測試。瀏覽測試的方法有3種，第1種是直接按F12鍵，這是最快捷的方法，建議大家以后盡量采用這種方法。（5）保存網(wǎng)頁。在瀏覽測試中，如果覺得比較滿意，就可以保存當(dāng)前網(wǎng)頁了。保存的方法也有多種，一種是直接按Ctrl+S鍵；另外一種方法是選擇“文件”“保存”菜單命令，在打開的“另存為”對話框中選擇該網(wǎng)頁的保存路徑，然后單擊“保存”按鈕。三、小結(jié)本節(jié)我們介紹了站點(diǎn)的管理，請讀者掌握，同時要練習(xí)用DW創(chuàng)建網(wǎng)頁四、作業(yè)上機(jī)操作旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：在網(wǎng)頁中使用文本教學(xué)目的及要求：了解在DW中使用文本的方法。教學(xué)重點(diǎn)：了解插入文本的方法教學(xué)難點(diǎn)：插入各種文本一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、插入普通文本DreamweaverCC2017允許通過以下方式在Web頁中添加文本：直接將文本輸入到頁面中、從其他文檔復(fù)制和粘貼文本或從其他應(yīng)用程序中拖放文本。若要將Word或Excel文檔的內(nèi)容添加到新的或現(xiàn)有的Web頁中，具體操作如下。（1）打開要將Word或Excel文件的內(nèi)容復(fù)制到的目標(biāo)Web頁。（2）選擇“文件”“導(dǎo)入”Word文檔或“文件”“導(dǎo)入Excel文檔”菜單命令。在打開的“打開”對話框中，選擇要添加的文件，然后單擊“打開”按鈕，Word或Excel文檔的內(nèi)容將出現(xiàn)在頁面中。二、插入特殊文本（1）將光標(biāo)定位到插入特殊字符的位置。（2）單擊“插入”|“HTML”|“字符”，然后在下面選擇自己想要插入的特殊字符即可，如圖3-4所示。圖3-4選擇“插入”｜“HTML”選項卡三、在字符之間添加空格DreamweaverCC2017的HTML代碼只允許字符之間包含一個空格，若要在文檔中添加其他空格，必須插入不換行空格，也可以設(shè)置一個在文檔中自動添加不換行空格的參數(shù)選擇。1.插入不換行空格插入不換行空格，可執(zhí)行如下操作之一。（1）在“插入”｜“HTML”下面的“不換行空格”，即可插入不換行空格。（2）將輸入法切換到全角狀態(tài)再按空格鍵。以上方法都可以插入不換行空格。2.設(shè)置添加不換行空格的參數(shù)設(shè)置添加不換行空格的參數(shù)，具體操作如下。（1）選擇“編輯”｜“首選項”菜單命令。（2）在“分類”列表的“常規(guī)”選項中選中“允許多個連續(xù)的空格”復(fù)選框，單擊“確定”按鈕保存即可。注意：經(jīng)過設(shè)置后，則可以直接按空格鍵就可以插入連續(xù)的不換行空格四、插入水平線水平線對于信息的組織很有用。在頁面上，可以使用一條或多條水平線以可視方式分隔文本和對象。1.插入水平線將光標(biāo)放到要插入水平線的位置，然后執(zhí)行“插入”｜“HTML”｜“水平線”菜單命令，便會在文檔窗口中插入一條水平線，如圖3-7所示。圖3-7插入一條水平線五、插入日期Dreamweaver提供了一個方便的日期對象，該對象使可以以任何喜歡的格式插入當(dāng)前日期（包含或不包含時間都可以），并在每次保存文件時都自動更新該日期。將當(dāng)前日期插入到文檔中的具體操作如下。（1）在“文檔”窗口中將插入點(diǎn)放在要插入日期的位置。（2）選擇“插入”｜“HTML”｜“日期”菜單命令。（3）在彈出的“插入日期”對話框中選擇星期格式、日期格式和時間格式。（4）單擊“確定”按鈕即可插入日期，最終效果如圖3-13所示。三、小結(jié)本節(jié)介紹了插入文本元素的方法，讀者上機(jī)練習(xí)四、作業(yè)上機(jī)操作旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：插入文本教學(xué)目的及要求：掌握插入文本的方法，并且能夠完成文本網(wǎng)頁的制作。

教學(xué)重點(diǎn)：文本網(wǎng)頁的制作教學(xué)難點(diǎn)：文本網(wǎng)頁制作一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課在插入或者輸入文本后，我們需要對文本進(jìn)行格式設(shè)置，如設(shè)置字號，字體，顏色，對齊等，則需要格式化文本。一、格式化文本Dreamweaver中的文本格式設(shè)置與使用標(biāo)準(zhǔn)字處理程序類似?？梢詾槲谋緣K設(shè)置默認(rèn)格式化樣式（段落、標(biāo)題1、標(biāo)題2等），更改所選文本的字體、大小、顏色和對齊方式，或者應(yīng)用文本樣式（如粗體、斜體、等寬字體和下劃線等）。下面對制作中最常用的“文本”屬性面板法進(jìn)行介紹?！拔谋尽睂傩悦姘迦鐖D3-14所示。圖3-14文本屬性面板“文本”屬性面板中各選項含義及設(shè)置方法如下。1．格式設(shè)置所選文本（一般是標(biāo)題文本）的段落樣式?！岸温洹笔菓?yīng)用<p>標(biāo)簽的默認(rèn)格式，“標(biāo)題1”添加<H1>標(biāo)簽，各具體選項如圖3-15所示，設(shè)置該選項可以將所選的文本設(shè)置成各種標(biāo)題。標(biāo)題號越小，字體越大。圖3-15格式選項要設(shè)置字體的“格式”屬性，只需在“格式”下拉列表中選擇相應(yīng)的選項即可，如選擇各種標(biāo)題的效果如圖3-16所示。圖3-16各種格式效果2．CSS樣式顯示當(dāng)前應(yīng)用于所選文本的類樣式。如果沒有對選定內(nèi)容應(yīng)用過任何樣式，則樣式菜單中顯示“無”；如果已對選定內(nèi)容應(yīng)用了多個樣式，則彈出式菜單為空。選擇“CSS樣式”將打開“樣式”對話框。利用“CSS樣式”對話框可以創(chuàng)建新樣式、刪除或編輯現(xiàn)有樣式、附加外部樣式表。關(guān)于樣式可以參見后面CSS樣式章節(jié)。3．粗體根據(jù)在“首選參數(shù)”對話框的“常規(guī)”選項中設(shè)置的樣式參數(shù)選擇，將<b>或<strong>標(biāo)簽應(yīng)用于選定的文本，即對所選文本加粗。單擊按鈕即可設(shè)置“加粗”設(shè)置，再次單擊按鈕可取消“加粗”設(shè)置。4．斜體根據(jù)在“首選參數(shù)”對話框的“常規(guī)”選項中設(shè)置的樣式參數(shù)選擇，將<i>或<em>標(biāo)簽應(yīng)用于選定的文本，即對所選文本進(jìn)行傾斜設(shè)置。選中按鈕即可將所選的文本應(yīng)用“傾斜”。再次單擊按鈕可取消“傾斜”設(shè)置。5．字體在“字體”下拉列表框中可以對所選的文本進(jìn)行字體設(shè)置，默認(rèn)情況下中文字體是“宋體”。要設(shè)置文本的“字體”，只需單擊“字體”下拉列表，然后在列表中選擇一種字體即可，如圖3-17所示。圖3-17字體列表字體列表中每一選項中包括多種字體，各種字體之間用“，”將其分隔，其含義是瀏覽者的瀏覽器中如果沒有這種字體，則用“，”后面的字體進(jìn)行顯示，以此類推。6.大小在“大小”下拉列表中選擇相應(yīng)的選項，在后面的“單位”下拉列表中選擇相應(yīng)的度量單位即可設(shè)置所選文本的字體大小，如圖3-21所示。7.顏色通過單擊按鈕，在彈出的顏色調(diào)色板中可以設(shè)置所選文本的字體顏色，或直接在按鈕后的文本框中輸入顏色的英文名或“#00ff00”形式的顏色代碼，也可以設(shè)置文本的顏色。“#00ff00”形式的顏色代碼是RGB顏色，必須以“?！弊址_頭。8.對齊方式下面對文本段落進(jìn)行對齊設(shè)置。在DreamweaverCC2017的“文本”屬性面板中提供了左對齊、居中對齊、右對齊和兩端對齊4種對齊方式，其設(shè)置方法如下。（1）選中要進(jìn)行對齊設(shè)置的文本。（2）單擊“文本”屬性面板中相應(yīng)的對齊方式按鈕，如圖3-22所示。（3）再次單擊相應(yīng)按鈕可以取消對齊方式的設(shè)置。（4）比如：我們在設(shè)置“網(wǎng)頁入門與提高”文本對齊方式如圖3-23所示圖3-22設(shè)置文本對齊方式圖3-23文本對齊示例注意：進(jìn)行文本對齊設(shè)置時，只能對整個文本塊設(shè)置對齊方式，而不能只對段落中的部分文本進(jìn)行設(shè)置。9.鏈接除了上述的字體格式化外，還可以對所選的文本建立超級鏈接，具體操作如下。（1）選中要建立鏈接的文本。（2）單擊“文本”屬性面板“鏈接”文本框后的按鈕，在打開的“選擇新文件”對話框中選擇要鏈接的文件即可，然后單擊“確定”按鈕。（3）單擊“確定”按鈕返回到Dreamweaver編輯窗口，新建鏈接地址出現(xiàn)在“鏈接”后的文本框中，同時，編輯窗口中的文本顯示為藍(lán)色，且加上了下劃線，如圖3-25所示。圖3-25設(shè)置鏈接后的文本（4）按F12鍵在IE瀏覽器中瀏覽，當(dāng)鼠標(biāo)移動到該鏈接上面時，會變成手形，單擊它則可以在當(dāng)前窗口中打開該文本所鏈接的頁面。二、創(chuàng)建列表這點(diǎn)與我們前面介紹的HTML列表標(biāo)記類似，實現(xiàn)的效果是一樣的。在文檔窗口中，可以用現(xiàn)有文本或新文本創(chuàng)建有序列表（編號列表）、無序列表（項目列表）及定義列表。列表可以嵌套，嵌套列表是包含在其他列表中的列表。1.有序列表有序列表又稱為編號列表，創(chuàng)建有序列表的具體操作如下。（1）在Dreamweaver文檔中，將插入點(diǎn)放在要添加有序列表的位置。（2）單擊屬性面板中的“編號列表”按鈕；（3）我們也可以輸入列表項文本，然后按Enter鍵，下一個數(shù)字前導(dǎo)字符自動出現(xiàn)在新行的前面。2.無序列表無序列表又稱為項目列表，創(chuàng)建無序列表的具體操作如下。（1）在Dreamweaver文檔中，將插入點(diǎn)放在要添加無序列表的位置。（2）單擊屬性面板中的“項目列表”按鈕；指定列表項的項目符號前導(dǎo)字符出現(xiàn)在文檔窗口中。（3）我們也可以輸入列表項文本，然后按Enter鍵，下一個項目前導(dǎo)字符自動出現(xiàn)在新行的前面。3.創(chuàng)建嵌套列表4.列表屬性設(shè)置使用“列表屬性”對話框可以設(shè)置整個列表或個別列表項的外觀，如設(shè)置編號樣式、重置計數(shù)、設(shè)置個別列表項或整個列表的項目符號樣式選項。三、實例：制作列表網(wǎng)頁本例首先要在網(wǎng)頁文檔中插入圖像和輸入文本，然后為文本設(shè)置下劃線，最后綜合使用項目列表與編號列表來進(jìn)行制作，效果如圖3-37所示。圖3-37列表網(wǎng)頁（1）新建一個網(wǎng)頁文件，然后執(zhí)行“插入”｜“Image”菜單命令，打開“選擇圖像源文件”對話框，在對話框中選擇本例的素材圖像，如圖3-38所示。圖3-38選擇圖象（2）完成后單擊按鈕，在網(wǎng)頁中插入一幅圖像，如圖3-39所示。圖3-39插入的圖片（3）將光標(biāo)放置于圖像之后，按Enter鍵換行，然后在文檔中輸入文本。我們先輸入完文本，然后進(jìn)行格式設(shè)置。如圖3-40所示。圖3-40輸入文本（4）下面我們進(jìn)行格式的設(shè)置，每個問題的提問設(shè)置字體為粉紅色，字號為16號字，粗體。首先我們用鼠標(biāo)選擇文字，然后在屬性面板中設(shè)置字體的大小，如圖3-41所示。圖3-41設(shè)置字體大小（5）然后設(shè)置粗體，并設(shè)置字體顏色為粉紅色（#C1256E），如圖3-42所示。圖3-42設(shè)置字體和顏色（6）設(shè)置字體顏色后，再選擇字體設(shè)置樣式為下劃線，如圖3-43所示。圖3-43設(shè)置下劃線（7）設(shè)置下劃線后，我們再設(shè)置該文字的項目列表，如圖3-44所示。圖3-44設(shè)置項目列表（8）設(shè)置后的效果如圖3-45所示。圖3-45設(shè)置效果（9）我們再設(shè)置第一個問題的答案部分的格式，首先將文字選取，然后在屬性面板選擇“內(nèi)縮區(qū)塊”按鈕，如圖3-46所示。圖3-46選擇內(nèi)縮區(qū)塊（10）接下來我們設(shè)置第二個提問，方法同上面的介紹，設(shè)置的格式也一樣。設(shè)置效果如圖3-47所示。圖3-47設(shè)置效果（11）然后我們設(shè)置下面的文字顯示效果，我們選擇文字，然后選擇屬性面板中的“編號列表”，如圖3-48所示。圖3-48選擇編號列表（12）完成效果如圖3-49所示。圖3-49完成效果（13）我們繼續(xù)設(shè)置后面的問答，設(shè)置過程我們不再多述，最后的顯示效果如圖3-50所示。圖3-50網(wǎng)頁顯示效果三、小結(jié)本節(jié)我們介紹了文本格式化和列表標(biāo)記，要求讀者能夠掌握，同時，能制作出文本網(wǎng)頁四、作業(yè)上機(jī)完成文本網(wǎng)頁旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：在網(wǎng)頁中使用圖像教學(xué)目的及要求：了解圖像的格式，掌握插入圖片的方法，能夠設(shè)置圖片的屬性，能夠設(shè)置圖片的鏈接，能夠插入圖片，或背景圖片。教學(xué)重點(diǎn)：插入圖片或背景圖片教學(xué)難點(diǎn)：插入圖片或背景圖片一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、圖像的格式及來源1、圖象的格式由于受網(wǎng)絡(luò)速度等方面的影響，因此在網(wǎng)頁的制作中圖像的格式有一定的要求，一般用于網(wǎng)頁的圖像要求是GIF、JPEG或PNG3種格式中的一種。2、圖像的來源圖像的來源有多種方式，可以自己利用圖像處理軟件（如Photoshop、CorelDRAW、Fireworks等軟件）制作，也可以到網(wǎng)上下載或購買一些網(wǎng)頁素材光盤，進(jìn)行加工后用在自己的網(wǎng)頁中。二、插入圖像圖像既可插入到網(wǎng)頁中作為網(wǎng)頁的內(nèi)容，也可作為網(wǎng)頁背景。1、插入圖象作為網(wǎng)頁內(nèi)容在DreamweaverCC2017中插入圖像的方法主要有直接插入圖象。 直接插入圖像的具體操作如下。（1）將光標(biāo)定位到要插入圖像的位置（文本、層或表格中）。（2）執(zhí)行如下操作之一：選擇“插入”｜“Image”菜單命令，打開“選擇圖像源文件”對話框，如圖4-1所示；按“Ctrl+Alt+I”鍵打開“選擇圖像源文件”對話框。（3）選擇圖像后，單擊“確定”按鈕，若所選擇的圖像文件不在定義的本地站點(diǎn)中，系統(tǒng)會打開如圖4-2所示的詢問對話框，詢問是否保存到本地站點(diǎn)目錄下。（4）在提示對話框中單擊“是”按鈕，打開“復(fù)制文件為”對話框，在該對話框中選擇保存路徑，并在“文件名”文本框中更改圖像的名稱即可保存在站點(diǎn)文件夾中。（5）如果圖象文件本來就在站點(diǎn)文件夾中，則直接單擊“確定”即可將將所選的圖像插入到網(wǎng)頁中指定的位置，如圖4-3所示。圖4-3插入的圖象2、設(shè)置圖片的屬性插入圖像后可根據(jù)網(wǎng)頁頁面的需要在“屬性”面板中編輯圖像的屬性，具體操作如下。（1）選取要編輯的圖像，展開“圖像”屬性面板，如圖4-4所示。其左上角顯示了選取圖像的縮略圖，“SRC”文本框中顯示了插入圖像的源位置。圖4-4圖象屬性面板（2）在圖4-4中的“ID”文本框中可設(shè)置圖像的標(biāo)簽名稱，以便在使用Dreamweaver行為（例如“交換圖像”）或腳本語言（例如JavaScript或VBScript）時可以引用該圖像。（3）在圖4-4中的“寬”和“高”數(shù)值框中輸入數(shù)值可以修改圖像的大小。（4）在圖4-4中的“Src”文本框中可修改圖像的路徑，也可單擊其右側(cè)的“瀏覽文件”按鈕，在打開的“選擇圖像源文件”對話框中選擇新的圖像文件。（5）單擊“編輯”欄中的“裁剪”按鈕可以修剪圖像的大小，從所選圖像中刪除不需要的區(qū)域。（6）單擊“編輯”中的按鈕可調(diào)整圖片的明暗度。（7）單擊“編輯”欄中的“銳化”按鈕可對圖片進(jìn)行銳化處理。3、給插入圖像加入鏈接除了對文本進(jìn)行鏈接設(shè)置外，也可以為圖像加入鏈接，具體操作如下。（1）選中要建立鏈接的圖像。（2）單擊“圖像”屬性面板，通過后面的瀏覽按鈕可以選擇鏈接文件。（3）按F12鍵在IE瀏覽器中瀏覽，當(dāng)鼠標(biāo)移動到該鏈接上面時，會變成手形，單擊該鏈接則可以在當(dāng)前窗口中打開該文本所鏈接的頁面。三、插入圖象背景我們除了將圖象插入作為網(wǎng)頁的內(nèi)容外，還可以將插入的圖象作為背景。插入圖象背景的方法如下：（1）將光標(biāo)定位在網(wǎng)頁中，然后打開“屬性面板”，在“屬性面板”中選擇“頁面屬性”按鈕，如圖4-14所示。圖4-14選擇頁面屬性按鈕在“頁面屬性”面板中，選擇“外觀CSS”，“背景圖象”后面的“瀏覽”按鈕，選擇需要作為該網(wǎng)頁的背景圖象，如圖4-15所示。該圖中的“背景圖象”后面的文本框是我們已經(jīng)選擇了圖象的顯示結(jié)果。圖4-15設(shè)置背景選擇圖像文件后，單擊“確定”按鈕，背景圖象出現(xiàn)在背景文本欄內(nèi)，如前面的圖4-15所示。以下代碼介紹的方法是設(shè)置某一個區(qū)域如表格的背景圖像，而不是整個網(wǎng)頁背景圖像，要引起重視。注意：選擇背景圖像，可以設(shè)置整個網(wǎng)頁的背景圖像，通過“頁面屬性”設(shè)置，也可以設(shè)置某個表格的背景圖像。設(shè)置表格的背景圖象，不能通過“頁面屬性”來設(shè)置，我們可以通過源代碼來進(jìn)行設(shè)置。如圖4-16所示。圖4-16設(shè)置背景圖象三、小結(jié)本節(jié)課重點(diǎn)介紹了圖片的插入方法和屬性設(shè)置方法，要求能夠掌握四、作業(yè)上機(jī)操作圖片的插入的三種情形旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：在網(wǎng)頁中使用圖像教學(xué)目的及要求：掌握鼠標(biāo)經(jīng)過圖像的制作方法，掌握插入FLASH的方法，能夠控制FLASH的播放。

教學(xué)重點(diǎn)：鼠標(biāo)圖像的制作方法、FLASH的播放控制教學(xué)難點(diǎn)：同上一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、鼠標(biāo)經(jīng)過圖像設(shè)置插入鼠標(biāo)經(jīng)過圖像的具體操作如下。（1）在“文檔”窗口中，將插入點(diǎn)放置在要顯示鼠標(biāo)經(jīng)過圖像的位置。（2）選擇“插入”｜“HTML”|“鼠標(biāo)經(jīng)過圖像”菜單命令，如圖4-17所示。執(zhí)行以上操作后將打開“插入鼠標(biāo)經(jīng)過圖像”對話框，在該對話框中完成各項參數(shù)的設(shè)置操作，如圖4-18所示。（4）設(shè)置完成后，單擊“確定”按鈕關(guān)閉“插入鼠標(biāo)經(jīng)過圖像”對話框。（5）按F12鍵在IE瀏覽器中預(yù)覽。當(dāng)鼠標(biāo)指針移過原始圖像時將顯示鼠標(biāo)經(jīng)過圖像，具體實例見后面的介紹。注意：這個功能，可以實現(xiàn)導(dǎo)航條的動態(tài)變化，詳細(xì)內(nèi)容可以見我們書中的介紹，上機(jī)操作時也需要練習(xí)二、插入Flash對象Flash是Macromedia公司推出的動畫制作軟件，可以制作出文件較小且效果精彩的功畫。目前FlasH動畫是網(wǎng)上最為流行的動畫格式，被大量應(yīng)用到網(wǎng)頁設(shè)計中。本節(jié)就介紹在頁面中插入插入Flash對象的方法。1、插入Flash動畫將光標(biāo)置于要插入Flash的位置，執(zhí)行“插入”丨“HTML” |“FlashSWF”命令，通過這個命令即可插入FLASH。在DreamweaverCC2017中可以很方便地插入Flash動畫。單擊選中插入的Flash,打開Flash屬性面板，如圖4-31所示，在屬性面板中可以設(shè)置插入Flash的屬性。圖4-31面板屬性2、插入Flash視頻插入方法如下：（1）將光標(biāo)置于要插入視頻的位置，執(zhí)行“插入記錄”丨“HTML” “FlashVideo”命令。（2）彈出“插入FLV”對話框，在對話框中的URL文本框中選擇視頻文件的路徑,并設(shè)置好寬度和高度。3、控制Flash播放在網(wǎng)上欣賞Flash動畫時，對Flash動畫進(jìn)行播放控制(如轉(zhuǎn)到第幾幀)是有必要的。本例將介紹如何對Flash動畫進(jìn)行控制。（1）插入一個FLASH動畫。（2）插入按鈕。通過“插入”｜“表單”｜“按鈕”命令，在Flash動畫的下方插入兩個按鈕，將兩個按鈕的“值”設(shè)置為“播放”和“停止”，如圖4-41、4-42所示。(3)添加行為。選中“播放”按鈕，通過“窗口”｜“行為”，打開“行為”面板，如圖4-43所示。圖4-43控制ShockwaveFlash參數(shù)(7)在“行為”面板中單擊“+”按鈕，在彈出的下拉菜單中在左側(cè)選擇“onClick”選項，在右側(cè)欄中輸入“MM_controlShockwave('flash','','Play')”，如圖4-44所示。圖4-44選擇事件(8)添加行為。選中“停止”按鈕，在“行為”面板中單擊“+“按鈕，在彈出的下拉菜單中選擇在彈出的下拉菜單中在左側(cè)選擇“onClick”選項，在右側(cè)欄中輸入“MM_controlShockwave('flash','','StopPlay')。(10)在IE中瀏覽效果。設(shè)置完成后保存頁面，在IE中瀏覽效果，單擊頁面中的“播放”和“停止”按鈕可以控制Flash的播放或停止，如圖4-45所示。圖4-45頁面最終效果三、鼠標(biāo)經(jīng)過圖像的上機(jī)練習(xí)就是導(dǎo)航條的制作見教材三、小結(jié)本節(jié)我們學(xué)習(xí)了鼠標(biāo)經(jīng)過圖像的插入，也介紹了FLASH的插入，要求掌握四、作業(yè)上機(jī)操作旁批欄：工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：在網(wǎng)頁中使用表格教學(xué)目的及要求：掌握表格的插入方法，掌握表格的操作

教學(xué)重點(diǎn)：表格的操作教學(xué)難點(diǎn)：表格的操作，單元格的操作一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、表格的作用在網(wǎng)頁設(shè)計中，頁面布局是一個重要的部分。DreamweaverCC2017可以用表格來布局網(wǎng)頁。二、插入表格插入表格的具體操作如下。（1）我們新建一個網(wǎng)頁，然后進(jìn)行表格的插入操作。（2）執(zhí)行下列操作之一打開“表格”對話框，如圖5-1所示。選擇“插入”｜“Table”菜單命令；按Ctrl+Alt+T鍵。圖5-1表格插入在“表格”對話框中可對各項參數(shù)進(jìn)行設(shè)置。可以注意幾個重要的參數(shù)如：行數(shù)、列數(shù)、表格寬度、邊框粗細(xì)、單元格間距。完成設(shè)置后的“表格”對話框如圖5-1所示。單擊“確定”按鈕完成表格的創(chuàng)建，效果如圖5-2所示。圖5-2完成的表格三、在表格中添加內(nèi)容向表格中添加內(nèi)容的方法很簡單，只需將光標(biāo)定位到要輸入內(nèi)容的單元格，再輸入文本或在“插入欄”的“常用”選項卡中單擊“文本”按鈕即可，我們也可以從其他文檔導(dǎo)入表格。我們也可以在表格中插入圖片，我們還可以設(shè)置表格的背景圖像。四、嵌套表格嵌套表格是表格布局中一個十分重要的環(huán)節(jié)。嵌套表格是指在一個表格的單元格中再插入一個表格。嵌套表格的具體操作如下。（1）將光標(biāo)定位到要插入表格的單元格中。（2）在“插入欄”的“常用”選項卡中單擊按鈕，打開“插入表格”對話框。（3）根據(jù)實際需要分別在行數(shù)、列數(shù)、寬度和邊框等項中指定嵌套表格的屬性。（4）設(shè)置完成后單擊“確定”按鈕即可。（5）如圖5-7是“2行1列”的表格，然后再在第1行中嵌套一個“2行1列”的表格。圖5-7嵌套表格一、表格基本操作表格創(chuàng)建完成后，我們可以對表格進(jìn)行基本操作1、選定操作表格的選取是編輯表格的前提，要在表格中進(jìn)行任何操作都離不開選取表格。（1）整個表格的選擇●將鼠標(biāo)光標(biāo)定位到表格中，然后單擊鼠標(biāo)右鍵，選擇“表格”｜“選擇表格”命令，如圖所示，執(zhí)行后，即可選擇該行所在的整個表格，如圖5-9所示。。圖5-9選取表格(2)整行或整列的選擇將鼠標(biāo)移到要選取行的左側(cè)，當(dāng)所選行的邊框線變?yōu)榧t色時單擊鼠標(biāo)左鍵即可。行的選取有外層表格的行和嵌套表格的行的選取。圖5-10所示為外層表格行的選取，圖5-11所示為嵌套表格行的選取。圖5-10外層表格行的選取圖5-11嵌套表格行的選取2、單元格操作(1)單元格的選取單元格的選取分為單個單元格的選取和單元格區(qū)域的選取兩種情況。單個單元格的選取方法很簡單，只需將光標(biāo)定位到要選取的單元格中即可。(2)單元格的合并及拆分單元格的合并與拆分是網(wǎng)頁設(shè)計中經(jīng)常用到的。合并單元格的具體操作如下。選取要合并的單元格區(qū)域。單擊“屬性”面板左下角的按鈕，合并后的效果如圖5-13所示。圖5-13合并單元格拆分單元格時，可以將單元格拆分成幾行，也可將單元格拆分成幾列，其拆分方法相同。3、插入或刪除行或列用表格設(shè)計網(wǎng)頁時行列的插入是最常用的，下面學(xué)習(xí)如何在表格中插入行或列。（1）插入單行或單列以及刪除單行或單列（2）添加多行或多列三、小結(jié)本節(jié)我們介紹了表格的基本操作，要求上機(jī)練習(xí)四、作業(yè)完成表格的創(chuàng)建，表格的合并，拆分等操作旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：在網(wǎng)頁中使用表格教學(xué)目的及要求：掌握在網(wǎng)頁中使用表格布局的方法。

教學(xué)重點(diǎn)：網(wǎng)頁的表格布局教學(xué)難點(diǎn)：網(wǎng)頁的表格布局一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、表格屬性設(shè)置為了使表格更具特色，需要在“表格”屬性面板中對表格線的顏色、表格或單元格的背景、邊框等進(jìn)行設(shè)置。1、表格屬性的設(shè)置設(shè)置表格屬性的具體操作如下。重點(diǎn)是設(shè)置行、列、寬、align幾個參數(shù)。2、單元格屬性設(shè)置重點(diǎn)是設(shè)置水平、垂直、寬、高、鏈接、背景顏色等參數(shù)。圖5-20單元格屬性面板二、表格高級操作除了對表格進(jìn)行以上基本操作外，還可以對表格整列內(nèi)容進(jìn)行位置移動、對表格內(nèi)容排序、導(dǎo)入/導(dǎo)出表格數(shù)據(jù)等高級操作，下面具體講解。表格布局網(wǎng)頁練習(xí)用表格布局網(wǎng)頁和細(xì)線表格的制作三、小結(jié)本節(jié)我們學(xué)習(xí)了表格的網(wǎng)布布局和細(xì)線表格的制作，要求能夠上機(jī)操作四、作業(yè)上機(jī)操作表格布局和細(xì)線表格的制作旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：文本圖像鏈接教學(xué)目的及要求：了解網(wǎng)頁鏈接的類型，能夠制作網(wǎng)頁中的文本圖像的鏈接。

教學(xué)重點(diǎn)：文本圖像的鏈接教學(xué)難點(diǎn)：文本圖像的鏈接一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課網(wǎng)頁中的內(nèi)容必須有鏈接，才能實現(xiàn)頁面的跳轉(zhuǎn)，如果沒有鏈接，則整個網(wǎng)站就只能有一個頁面。一、文本鏈接文本鏈接的實現(xiàn)步驟如下:（1）新建一個網(wǎng)頁文件。本處可以用DreamweaverCC2017打開源文件中的第6章第1節(jié)中的文本鏈接的模板文件。（2）如打開“l(fā)eft5”中的“index.html”。（3）我們對導(dǎo)航區(qū)域中的文本設(shè)置鏈接,設(shè)置文本鏈接可以選擇要設(shè)置鏈接的文本,然后按照以下兩種方法設(shè)置鏈接:一是在屬性窗口的鏈接欄內(nèi),直接輸入文本的鏈接網(wǎng)頁文件路徑和文件名;二是通過鏈接欄后面的瀏覽圖標(biāo),瀏覽選擇文本的鏈接目標(biāo)。圖6-2屬性窗口（4）設(shè)置好鏈接后,可以按F12瀏覽,單擊鏈接的文本將會轉(zhuǎn)到目標(biāo)頁面。注意:在設(shè)置文本鏈接時,如果文本的鏈接是指向其他網(wǎng)站,則可以直接在屬性欄內(nèi)的鏈接中輸入目標(biāo)網(wǎng)站的網(wǎng)址,如在網(wǎng)頁中有一個指向網(wǎng)頁的鏈接,則可以直接在屬性的鏈接欄內(nèi)輸入/,如圖6-3所示。圖6-3設(shè)置文本的網(wǎng)站鏈接二、圖像超級鏈接1、創(chuàng)建圖象鏈接設(shè)置圖象鏈接同樣可以實現(xiàn)文本一樣的效果,同時還可以起到美化頁面的作用。（1）選擇圖片，在圖片的屬性對話框中的鏈接內(nèi)選擇鏈接文件或者輸入鏈接文件即可。圖6-4設(shè)置圖片鏈接參數(shù)(2)瀏覽頁面效果。設(shè)置完畢后，在IE中瀏覽，單擊已經(jīng)設(shè)置了鏈接的圖片按鈕時，將會出現(xiàn)目標(biāo)網(wǎng)頁。2、創(chuàng)建熱點(diǎn)區(qū)域在一張圖片上，選擇一些區(qū)域，可以設(shè)置這些區(qū)域的鏈接，這就是熱點(diǎn)區(qū)域，設(shè)置方法如下：（1）用鼠標(biāo)單擊整個圖片，然后出現(xiàn)圖片屬性框，如圖6-10所示。圖6-10圖片屬性（2）在圖片屬性面板中的左下角有幾個圖標(biāo)就是設(shè)置熱點(diǎn)區(qū)域的按鈕，其中有矩形熱點(diǎn)工具、圓形熱點(diǎn)工具、多邊形熱點(diǎn)工具，此處我們選擇矩形熱點(diǎn)工具，如選擇“重慶”，如圖6-11所示。圖6-11選擇重慶的熱點(diǎn)區(qū)域（3）選擇熱點(diǎn)區(qū)域后，圖片的屬性面板如圖6-12所示。圖6-12圖片的屬性面板（4）在鏈接欄內(nèi)輸入鏈接的網(wǎng)頁文件或其他鏈接目標(biāo)，也可以通過鏈接后的瀏覽圖標(biāo)瀏覽選擇鏈接目標(biāo)。注意：如果知道鏈接目標(biāo)的名稱和路徑，可以直接輸入，此時鏈接文件此時可以是不存在的，后面再建立即可，如果是瀏覽選擇的方法來創(chuàng)建鏈接目標(biāo)，則鏈接文件必須是已經(jīng)存在的。（5）依次設(shè)置其他熱點(diǎn)區(qū)域，并為各個熱點(diǎn)區(qū)域設(shè)置好鏈接。（6）按F12在IE中瀏覽，單擊各個熱點(diǎn)，即可打開其鏈接文件。三、小結(jié)本節(jié)我們介紹了文本和圖片的鏈接，要求能夠上機(jī)操作四、作業(yè)上機(jī)操作旁批欄：電子工程職業(yè)學(xué)院授課方案（教案）課程：網(wǎng)站設(shè)計開發(fā) 教師：班級：XXX班 編寫時間：X年X月課題：其他鏈接教學(xué)目的及要求：掌握網(wǎng)頁中其他鏈接的設(shè)置方法教學(xué)重點(diǎn)：其他鏈接設(shè)置教學(xué)難點(diǎn)：其他鏈接設(shè)置如MP3下載，錨點(diǎn)、小圖瀏覽一、回顧上節(jié)內(nèi)容二、學(xué)習(xí)新課一、MP3下載超級鏈接經(jīng)常上網(wǎng)的人，免不了在網(wǎng)上下載音樂、游戲或者軟件工具等。本例將介紹制作MP3下載頁面的過程。(1)新建頁面。在“文件”面板中站點(diǎn)目錄下新建文件，并將新建的文件打開。(2)設(shè)置頁面屬性。(3)插入表格。(5)在表格中插入圖片。圖6-15表格中插入圖片(6)嵌套表格。設(shè)置后的效果如圖6-18所示。圖6-18插入嵌套表格后的表格(7)輸入文本。(8)設(shè)置下載超級鏈接。注意:要想MP3被下載,只有設(shè)置的歌曲路徑是非網(wǎng)頁文件時,才能實現(xiàn)下載,如果是網(wǎng)頁文件（.html）,則只會打開網(wǎng)頁,而不能下載。當(dāng)打開此類mp3下載時,會打開一個對話框,提示用戶是保存文件,還是打開文件.（9）按F12瀏覽,并單擊下載鏈接,會彈出下載對話框，如果安裝了音樂播放器，則會直接播放。二、錨點(diǎn)鏈接錨點(diǎn)鏈接是一般是指鏈接到同一個網(wǎng)頁的不同位置,一般適合于頁面較長的網(wǎng)頁和左右框架式網(wǎng)頁。錨點(diǎn)鏈接的設(shè)計步驟及方法如下:（1）打開源文件錨點(diǎn)鏈接index.html。（2）在網(wǎng)頁的主體內(nèi)容部分,在中國地圖上設(shè)置各個熱點(diǎn)區(qū)域。（3）單擊圖片,出現(xiàn)圖片屬性面板。（4）單擊圓形圖片熱區(qū)域工具按鈕,在中國地圖的每個小圓球上用鼠標(biāo)拖動設(shè)置熱點(diǎn)區(qū)域,如圖6-26所示,熱點(diǎn)區(qū)域設(shè)置后,圖片屬性面板的鏈接欄內(nèi)有一個“#