Dreamweaver-CS3教案設(shè)計_第1頁
Dreamweaver-CS3教案設(shè)計_第2頁
Dreamweaver-CS3教案設(shè)計_第3頁
Dreamweaver-CS3教案設(shè)計_第4頁
Dreamweaver-CS3教案設(shè)計_第5頁
已閱讀5頁，還剩44頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

1、網(wǎng)頁制作基礎(chǔ)教案第1章 基礎(chǔ)知識（5課時）教學(xué)目標(biāo)1掌握HTML的基本知識及作用；2掌握安裝和配置IIS的方法；3熟悉Dreamweaver CS3的工作界面；4掌握創(chuàng)建和設(shè)置Dreamweaver CS3站點的方法。教學(xué)重點1HTML語言2熟悉Dreamweaver CS3的工作界面3創(chuàng)建本地站點教學(xué)難點HTML的基本知識教學(xué)方法任務(wù)驅(qū)動法，以學(xué)生做為主，教師使用多媒體投影演示制作過程并講解關(guān)鍵環(huán)節(jié)。學(xué)生上機操作完成實例與實訓(xùn)。任務(wù)1 認(rèn)識網(wǎng)頁教學(xué)目標(biāo)：1理解掌握網(wǎng)頁的概念2HTML的概念3掌握HTML的基本知識及作用教學(xué)重點：1網(wǎng)頁的實質(zhì)2HTML的基礎(chǔ)知識教學(xué)難點：HTML標(biāo)記教學(xué)方法：

2、任務(wù)驅(qū)動法，講練結(jié)合法教具準(zhǔn)備：多媒體教學(xué)教學(xué)內(nèi)容：第1課時一、網(wǎng)頁1、網(wǎng)頁的概念：網(wǎng)頁是網(wǎng)站的基本組成元素。網(wǎng)頁文件的擴展名通常為.htm或.html。一般是由HTML語言編寫的文本文件。2、網(wǎng)頁的實質(zhì)網(wǎng)頁文檔本身是一個文本文件，這些文本能夠?qū)⑽淖旨捌渌襟w文件有機的組織在一起，在瀏覽器中合適地顯示。二、HTML1、Html的中文含義Html是Hypertext Markup Language的縮寫，其中文含義是“超文本標(biāo)記語言”。2、Html的概念它是使用特殊標(biāo)記來描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語言，可以用來實現(xiàn)WEB頁面。3、網(wǎng)頁文檔的組成一個HTML文檔通常分為文檔頭和文檔主體兩部分。三

3、、標(biāo)記1、標(biāo)記的格式在HTML中定義了許多標(biāo)記，這些標(biāo)記用來描述文檔。這些標(biāo)記使用“<”和“>”括起來。標(biāo)記通常分為開始標(biāo)記和結(jié)束標(biāo)記。其格式為：<標(biāo)記名 屬性名=屬性值>標(biāo)記內(nèi)容</標(biāo)記名>注意：若一個標(biāo)記有多個屬性，屬性和屬性之間要用空格隔開。示例：簡單的網(wǎng)頁文檔<html> <!文檔頭部><head><title>我的第一個網(wǎng)頁</title></head><!文檔主體><body bgcolor=blue text=red><h1>這是我的第一

4、個網(wǎng)頁<p>歡迎大家</body></html>第2課時2、常用標(biāo)記v <html></html> 標(biāo)記一個HTML文檔的開始和結(jié)束。Html文檔的所有內(nèi)容就書寫在這兩個標(biāo)記之間。v <head></head> 用于標(biāo)記文當(dāng)首部的開始和結(jié)束，首部通常包括網(wǎng)頁標(biāo)題、創(chuàng)作信息等內(nèi)容，在瀏覽網(wǎng)頁時不會在瀏覽器窗口內(nèi)顯示。v <title>和</title> 用于設(shè)置網(wǎng)頁的標(biāo)題。該標(biāo)記中不能包含其它標(biāo)記，且只能在標(biāo)記中出現(xiàn)一次。當(dāng)瀏覽網(wǎng)頁時，網(wǎng)頁的標(biāo)題會出現(xiàn)在瀏覽器窗口的標(biāo)題處。v <bo

5、dy>和</body> 標(biāo)記是主體標(biāo)記，該標(biāo)記包含在Html標(biāo)記內(nèi)。文檔主體包括了網(wǎng)頁顯示的內(nèi)容，如文字、鏈接、圖像、表格和其它對象。v <P>和</P> 標(biāo)記一個段落的開始和結(jié)束。v <h1>和</h1> 說明其后的文字是一級標(biāo)題。v <!-注釋內(nèi)容-> 注釋標(biāo)記。說明：（1）每個標(biāo)記在標(biāo)識名以外還可以包含一個或多個“屬性”，用于控制標(biāo)記內(nèi)容的大小、顏色、位置、邊框等。例如：<body bgcolor=blue text=red> “bgcolor=blue”就是body標(biāo)記的一個屬性，進一步說明網(wǎng)頁的

6、背景色為藍(lán)色。（2）如果一個標(biāo)記有多個屬性，中間要用空格隔開。3、<body>標(biāo)記的常用屬性屬性名作用Background用圖像設(shè)置網(wǎng)頁背景Bgcolor設(shè)置網(wǎng)頁的背景顏色Text設(shè)置網(wǎng)頁中所有文本的顏色Link設(shè)置超文本鏈接尚未訪問時文本的顏色，默認(rèn)為藍(lán)色Vlink設(shè)置超文本鏈接已經(jīng)訪問后四、網(wǎng)頁的基本元素網(wǎng)頁中包括的元素主要有文本、圖像、視頻、聲音、動畫、表格、表單等。（1）網(wǎng)站LOGOLogo的中文含義是標(biāo)志、標(biāo)識，在網(wǎng)頁設(shè)計中，Logo常作為公司或站點的標(biāo)識出現(xiàn)，起著非常重要的作用，集中體現(xiàn)了這個網(wǎng)站的文化內(nèi)涵和內(nèi)容定位。（2）網(wǎng)站Banner Banner的中文含義是橫幅

7、、標(biāo)語，通常被稱為網(wǎng)絡(luò)廣告。（3）導(dǎo)航欄導(dǎo)航欄實質(zhì)上是一組超鏈接，通過這組超鏈接可以瀏覽到整個網(wǎng)站的其他頁面。 （4）文本 文本作為人類最重要的信息載體的交流工具，是最重要的網(wǎng)頁元素之一。與圖像、動畫等其他網(wǎng)頁元素相比，文本不易在第一時間吸引瀏覽者的注意，但文本能夠更加準(zhǔn)確詳細(xì)地表達(dá)網(wǎng)頁信息內(nèi)容和含義，是對其他網(wǎng)頁元素的補充。 （5）圖像 圖像在網(wǎng)頁中起著非常重要的作用，適當(dāng)?shù)膱D像能夠為網(wǎng)頁增添生動性和活潑性，不僅豐富網(wǎng)頁內(nèi)容、提供更多更直接的信息，還能給瀏覽者視覺上的美感。 （6）動畫 動畫能夠形象生動地表現(xiàn)事物的變化發(fā)展過程，增加網(wǎng)頁的動態(tài)效果，使網(wǎng)站更加生動有趣，因此，動畫已經(jīng)成為現(xiàn)代網(wǎng)

8、站中不可缺少的元素之一。（7）表單 表單實質(zhì)上是一個服務(wù)器程序，用戶可以在網(wǎng)頁上的表單域中輸入文本或數(shù)據(jù)，提交表單，該表單程序在服務(wù)器上執(zhí)行，并將執(zhí)行結(jié)果反饋到相應(yīng)的頁面上，從而實現(xiàn)了用戶與網(wǎng)站之間的交互。 教學(xué)小結(jié)：主要介紹了網(wǎng)頁的概念、標(biāo)記的應(yīng)用及書寫格式還有網(wǎng)頁的基本組成元素。課堂作業(yè)：1、總結(jié)網(wǎng)頁的概念及網(wǎng)頁的實質(zhì)？2、列舉Dreamweaver CS3中常用標(biāo)記及其含義？板書設(shè)計：任務(wù)2 讓別人通過網(wǎng)絡(luò)訪問你的網(wǎng)頁教學(xué)目標(biāo)1理解和掌握網(wǎng)站的概念2掌握安裝IIS的步驟3掌握在IIS中配置站點的方法教學(xué)重點1網(wǎng)站的含義2IIS的含義及功能教學(xué)難點IIS的配置教學(xué)方法演示法，任務(wù)驅(qū)動法教具

9、準(zhǔn)備多媒體教學(xué)教學(xué)內(nèi)容一、網(wǎng)站網(wǎng)站是許多相關(guān)網(wǎng)頁有機結(jié)合而形成的一個信息服務(wù)中心。網(wǎng)站的設(shè)計者將要提供的內(nèi)容和服務(wù)制作成許多個網(wǎng)頁，并且經(jīng)過組織規(guī)劃，讓網(wǎng)頁互相鏈接，然后把相關(guān)文件存放在WEB服務(wù)器的一個文件夾中。這樣一個文件夾就是一個網(wǎng)站。二、主頁當(dāng)用戶沒有指定網(wǎng)頁文件名時，網(wǎng)站的默認(rèn)顯示的網(wǎng)頁。主頁文件名通常為index.htm、index.html、default.htm三、 IIS1、IIS的含義IIS（Internet Information Server，互聯(lián)網(wǎng)信息服務(wù)）是一種Web（網(wǎng)頁）服務(wù)組件，其中包括Web服務(wù)器、FTP服務(wù)器、NNTP服務(wù)器和SMTP服務(wù)器，分別用于網(wǎng)頁瀏

10、覽、文件傳輸、新聞服務(wù)和郵件發(fā)送等方面，它使得在網(wǎng)絡(luò)（包括互聯(lián)網(wǎng)和局域網(wǎng)）上發(fā)布信息成了一件很容易的事。2、IIS的運行環(huán)境IIS通常運行在WINDOWS的SERVER版本上，可支持大量用戶的訪問。在WINDOWS XP professional中，IIS組件主要用于開發(fā)測試，不適宜大量用戶的訪問。另外，在WINDOWS XP的家庭版中未提供IIS組件。教學(xué)小結(jié)：介紹了網(wǎng)頁中常用術(shù)語的含義及IIS的含義和站點的配置。任務(wù)3、初識Dreamweaver CS3教學(xué)目標(biāo)1掌握啟動Dreamweaver CS3的方法2認(rèn)識Dreamweaver CS3的工作界面3掌握Dreamweaver CS3界

11、面中常用部分的用途教學(xué)重點熟悉Dreamweaver CS3界面各部分的名稱及作用教學(xué)難點熟悉Dreamweaver CS3界面各部分的名稱及作用教學(xué)方法多媒體演示法、任務(wù)驅(qū)動法、掛圖法教具準(zhǔn)備教學(xué)內(nèi)容一、啟動Dreamweaver CS3的方法1、從“開始”菜單2、雙擊桌面上的快捷方式二、Dreamweaver CS3的工作界面；文檔窗口：v “文檔”窗口顯示當(dāng)前文檔。v 可以選擇設(shè)計視圖、代碼視圖、拆分代碼視圖、代碼和設(shè)計視圖之一進行網(wǎng)頁的編輯和開發(fā)。v 當(dāng)“文檔”窗口處于最大化狀態(tài)（默認(rèn)值）時，“文檔”窗口頂部會顯示選項卡，上面顯示了所有打開的文檔的文件名。v 如果尚未保存已做的更改，則

12、Dreamweaver CS3會在文件名后顯示一個星號。若要切換到某個文檔，單擊其選項卡即可。三、網(wǎng)頁開發(fā)平臺早期的網(wǎng)頁制作，網(wǎng)頁設(shè)計師要通過手工編寫HTML代碼來實現(xiàn)，開發(fā)效率非常低。網(wǎng)頁開發(fā)平臺的出現(xiàn)，使得這些復(fù)雜代碼的編寫變得十分容易。在這些網(wǎng)頁開發(fā)平臺中，只需要點點鼠標(biāo)，軟件就能幫助用戶書寫出相應(yīng)代碼，即使不懂得HTML，也能制作出漂亮的網(wǎng)頁來。Dreamweaver就是一種網(wǎng)頁開發(fā)平臺，其最新版本就是Adobe Dreamweave cs3。該軟件同時適用于初學(xué)者和專業(yè)網(wǎng)頁設(shè)計師，是一款優(yōu)秀的“所見即所得”的可視化網(wǎng)頁編輯軟件。另外，F(xiàn)rontPage也是一款常用的網(wǎng)頁開發(fā)平臺，它是

13、由微軟公司開發(fā)的，適合于初學(xué)者。四、網(wǎng)頁制作輔助工具1、圖像處理工具-PhotoshopPhotoshop軟件一直是圖像處理軟件的龍頭老大，它不僅能創(chuàng)造出不朽的計算機圖形藝術(shù)，而且為網(wǎng)頁圖像制作提供了強大的支持，現(xiàn)在已經(jīng)成為使用最為廣泛的網(wǎng)頁圖像處理軟件。2、動畫制作工具-FLASHFALSH是目前網(wǎng)絡(luò)上最為流行的矢量動畫設(shè)計制作軟件，在網(wǎng)頁動畫制作中有廣泛應(yīng)用。教學(xué)小結(jié)：介紹了Dreamweaver CS3的啟動方法，認(rèn)識并掌握了界面的組成及常用部分的含義。課外作業(yè)：嘗試使用菜單對面板組進行設(shè)置。任務(wù)4、創(chuàng)建DreamweaverCS3站點教學(xué)目標(biāo)：1理解并掌握站點的含義2掌握在Dreamw

14、eaver CS3中設(shè)置本地站點的步驟教學(xué)重點：設(shè)置本地站點教學(xué)難點：本地站點的設(shè)置教學(xué)內(nèi)容：一、站點1站點的含義在 Dreamweaver CS3中，術(shù)語“站點”指屬于某個 Web 站點的文檔的本地或遠(yuǎn)程存儲位置。Dreamweaver CS3站點提供了一種方法，使您可以組織和管理您所有的 Web 文檔，將您的站點上傳到 Web 服務(wù)器，跟蹤和維護您的鏈接以及管理和共享文件。應(yīng)定義一個站點以充分利用 Dreamweaver CS3的功能。2站點的類型Dreamweaver CS3站點由三個部分（或文件夾）組成，具體取決于開發(fā)環(huán)境和所開發(fā)的 Web 站點類型：（1）本地根文件夾 存儲您正在處理

15、的文件。Dreamweaver CS3將此文件夾稱為“本地站點”。此文件夾可以位于本地計算機上，也可以位于網(wǎng)絡(luò)服務(wù)器上。如果您直接在服務(wù)器上工作，每次您保存文件時 Dreamweaver CS3 都會將文件上傳到服務(wù)器。 （2）遠(yuǎn)程文件夾 存儲用于測試、生產(chǎn)和協(xié)作等用途的文件。Dreamweaver CS3在“文件”面板中將此文件夾稱為“遠(yuǎn)程站點”。遠(yuǎn)程文件夾通常位于運行 Web 服務(wù)器的計算機上。 3本地根文件夾和遠(yuǎn)程文件夾的關(guān)系本地文件夾和遠(yuǎn)程文件夾使您能夠在本地硬盤和 Web 服務(wù)器之間傳輸文件；這使您可以輕松管理 Dreamweaver CS3站點中的文件。二、創(chuàng)建本地站點的步驟1、創(chuàng)

16、建本地站點的注意事項：（1）第一步必須先在本地計算機的磁盤上建立一個文件夾。（作為本地站點的根文件夾）提示：為了方便以后管理站點上的文件，先在本地文件夾中創(chuàng)建幾個目錄：htm、img、 others，分別存放網(wǎng)頁設(shè)計中用到的資源及網(wǎng)頁文件。（2）建立本地站點，選擇主菜單中的“站點”“新建站點”命令，在彈出的新建站點對話框進行設(shè)置。2、新建站點的操作步驟：第一步：選擇菜單中的“站點”“新建站點”命令，如圖所示：在彈出的對話框中選擇“基本”選項卡，出現(xiàn)定義站點向?qū)?，如下圖所示：第二步：單擊“下一步”按鈕，詢問是否要使用服務(wù)器技術(shù)，選擇“否”選項（表示目前該站點是一個靜態(tài)站點，沒有動態(tài)頁即不使用We

17、b應(yīng)用程序：如ASP、JavaServer Page JSP）第三步：單擊“下一步”按鈕，選擇“編輯我的計算機上的本地副本，完成后再上傳到服務(wù)器（推薦）”單選項，然后指定本地機磁盤上的一個文件夾儲存站點文件（包括網(wǎng)頁文件及設(shè)計網(wǎng)頁用到的其它資源）第四步：單擊“下一步”按鈕，在彈出的對話框中設(shè)置如何連接到遠(yuǎn)程服務(wù)器，單擊下拉菜單，選擇“無”。如下圖所示：第五步：單擊“下一步”按鈕，彈出如下圖設(shè)置概要。單擊“完成”按鈕，完成設(shè)置。思考：如何使用高級模式創(chuàng)建或設(shè)置站點？教學(xué)小結(jié)：給大家介紹了使用向?qū)Ъ案呒壞Ｊ絻煞N創(chuàng)建站點的方法步驟。第2章 創(chuàng)建簡單網(wǎng)頁（6學(xué)時）教學(xué)目標(biāo)1掌握輸入空格、普通文本、特殊

18、字符、日期、列表等項目的操作方法2掌握文本的斷行3掌握設(shè)置文本的屬性及滾動文字的制作4掌握設(shè)置網(wǎng)頁的屬性5了解網(wǎng)頁圖像的格式6掌握圖像插入、編輯的方法7掌握網(wǎng)站相冊的建立教學(xué)重點 1文本段落的編輯2文本屬性的設(shè)置3網(wǎng)頁中圖像的應(yīng)用及屬性的設(shè)置教學(xué)難點 1圖像的編輯為難點2滾動文字的制作教學(xué)方法教師使用多媒體投影演示制作過程，學(xué)生上機操作完成實例與實訓(xùn)。任務(wù)1制作文本網(wǎng)頁教學(xué)目標(biāo)1掌握建立網(wǎng)站站點；2掌握制作簡單的文本網(wǎng)頁；3掌握輸入普通文本及設(shè)置文本屬性；4掌握插入水平線的方法；5掌握滾動文字的制作方法； 6掌握預(yù)覽網(wǎng)頁的方法；教學(xué)重點1文本的輸入與屬性設(shè)置2水平線的插入與應(yīng)用3滾動文字的制作

19、教學(xué)難點1水平線的應(yīng)用及屬性設(shè)置2滾動文字的應(yīng)用教學(xué)內(nèi)容一、新建網(wǎng)頁文件1、方法一：啟動了DreamweaverCS3軟件，如同啟動Word等其它應(yīng)用軟件一樣打開了一個新的空的網(wǎng)頁文檔，就可以在這個新的文檔中進行網(wǎng)頁設(shè)計編輯；或者單擊“文件”菜單中的“新建”命令，或直接按Ctrl+N鍵，打開一個新頁面，在該頁面中也可以進行網(wǎng)頁的設(shè)計編輯。網(wǎng)頁設(shè)計編輯完畢后，保存網(wǎng)頁文件：保存的位置在戰(zhàn)點根目錄下，新文件取名為“index.html” 即建立了主頁文件。2、方法二：打開站點管理窗口，在站點管理窗口右邊的本地文件夾列表框中建立新文件，新文件取名為“index.html” 按回車鍵，即建立了主頁文件

20、。雙擊“index.html”文件，進入編輯“index.html”的網(wǎng)頁文件窗口，進行主頁設(shè)計。二、 輸入普通文本1、輸入文本（1）“文件”“導(dǎo)入”（2）復(fù)制已有的文本：“復(fù)制”“粘貼”（3）直接輸入：在文檔編輯窗口中直接輸入2、輸入網(wǎng)頁中的空格· 漢字輸入狀態(tài)下輸入· “屬性”面板“格式”“預(yù)先格式化的”· Shift+Ctrl+空格· “編輯”“首選參數(shù)”“常規(guī)”“允許多個連續(xù)的空格”3、文本換行· Enter分段（隔一行）· Shift+Enter換行（不分段）4、文本的屬性設(shè)置（1）選用字體   

21、;   在“字體”下拉表框中找到字體。如果在“字體”下拉表框中，沒有找到字體?！白煮w”下拉表框中找到字體。單擊“文本”“字體”“編輯字體列表”命令。或者在“屬性”面板中選擇“字體”下拉列表中選擇“編輯字體列表選項”。       要添加字體組合，可單擊對話框中的加號按鈕，若要刪除字體組合，可單擊減號按鈕。在該對話框中的“可用字體”列表中選擇所要添加的字體。（2）設(shè)置字號字號指的是相對缺省字體而言的字體的大小。我們可以在瀏覽器中使用缺省字號，可在“屬性”在面板的“大小”下拉列表框中選擇。（3）設(shè)置顏色顏色是網(wǎng)頁外觀的

22、一個重要因素，要改變文本的顏色，可選中要設(shè)置的文本，單擊“文本”“顏色”命令。三、插入水平線1插入水平線（1）將光標(biāo)置于“我的簡歷”后面（2）執(zhí)行菜單“插入記錄”中的“HTML”中的“水平線”命令 2水平線的屬性面板可以通過水平線的“屬性”面板設(shè)置水平線的寬度、高度、類型、對齊方式及是否有陰影。水平線的“屬性”面板如下：四、時間日期在Dreamweaver CS3系統(tǒng)中可以插入頁面的制作日期和時間。將光標(biāo)置于要插日期和時間的位置，選擇“插入”“日期”命令，可以在頁面上插入插日期和時間，還可以設(shè)置日期和時間的格式。五、滾動文字的應(yīng)用1基本格式<marquee> . </marq

23、uee> 示例：<marquee>啦啦啦，我會移動耶！</marquee>2屬性（1）方向<direction=#> #=left, right,up,down 舉例：<marquee direction=left>啦啦啦，我從右向左移！</marquee> <marquee direction=right>啦啦啦，我從左向右移！</marquee> （2）方式<behavior=#> #=scroll, slide, alternate 舉例：<marquee behavior=scr

24、oll>啦啦啦，我一圈一圈繞著走！</marquee> <marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <marquee behavior=alternate>啦啦啦，我來回走耶！</marquee> （3）循環(huán) <loop=#> #=次數(shù)；若未指定則循環(huán)不止舉例： <marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟喲！</marquee> <marquee loop=3 width=

25、50% behavior=slide>啦啦啦，我只走 3 趟喲！</marquee> <marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟喲！</marquee> （4）速度<scrollamount=#> 舉例：<marquee scrollamount=20>啦啦啦，我走得好快喲！</marquee> （5）對齊方式(Align)<align=#> #=top, middle, bottom對齊上沿、中間、下沿舉例： <marquee

26、align=# width=400>啦啦啦，我會移動耶！</marquee>（6）</font> <font size=6>。六、預(yù)覽網(wǎng)頁1執(zhí)行“文件” 菜單下的“保存”命令，保存網(wǎng)頁2按快捷鍵F12預(yù)覽網(wǎng)頁 教學(xué)小結(jié)：介紹了簡單文本網(wǎng)頁的制作方法。課外作業(yè)：1試寫出網(wǎng)頁中空格字符的輸入方法？2試寫出使用Enter鍵與Shift+Enter鍵在網(wǎng)頁中的效果有什么不同？板書設(shè)計：任務(wù)2 插入圖像教學(xué)目標(biāo)1掌握網(wǎng)頁“頁面屬性”的設(shè)置；2掌握網(wǎng)頁中圖像的插入與屬性設(shè)置；3掌握鼠標(biāo)經(jīng)過圖像的設(shè)置；教學(xué)重點1“頁面屬性”的設(shè)置；2圖像的插入與屬性設(shè)置；教學(xué)難點圖

27、像的應(yīng)用與屬性設(shè)置教學(xué)內(nèi)容一、“頁面屬性”設(shè)置使用Dreamweaver CS3創(chuàng)建了空白網(wǎng)頁后可以對頁面進行屬性設(shè)置。執(zhí)行“修改” “頁面屬性”命令，打開“頁面屬性”對話窗口：使用“頁面屬性”對話框，可以設(shè)置頁面的整個外觀，如頁面的字體、大小、顏色、背景顏色、背景圖象，還可以設(shè)置鏈接的樣式、頁面的標(biāo)題等。雖然頁面的屬性有很多，并不是一個頁面要將所有的屬性全部都設(shè)置，用戶在使用過程中根據(jù)自己的需要進行設(shè)置。二、插入圖像1步驟：（1）光村定位；（2）執(zhí)行菜單“插入記錄”下的“圖像”命令。 2設(shè)置屬性（1）在“屬性”面板的“替代”列表中輸入替代文字；（2）在“屬性”面板的“對齊”列表框中對齊方式。

28、三、鼠標(biāo)經(jīng)過圖像步驟：（1）執(zhí)行菜單“插入記錄”中的“圖像對象”中的“鼠標(biāo)經(jīng)過圖像”命令； （2）在“原始圖像”文本框中選取圖像文件； （3）在“鼠標(biāo)經(jīng)過圖像”文本框中選取圖像文件；（4）單擊“確定”按鈕。提示：該效果只有在網(wǎng)頁預(yù)覽時才能看到。教學(xué)小結(jié)：講述了網(wǎng)頁中頁面屬性的設(shè)置、圖片的應(yīng)用及鼠標(biāo)經(jīng)過圖像的設(shè)置與應(yīng)用，這使得網(wǎng)頁效果更加美觀，突出顯示了圖文并茂的效果。課外作業(yè)：1鼠標(biāo)經(jīng)過圖像的含義是什么？2制作鼠標(biāo)經(jīng)過圖像的步驟有哪些？任務(wù)3 制作網(wǎng)站相冊教學(xué)目標(biāo)：1掌握網(wǎng)站相冊的含義；2掌握網(wǎng)站相冊的制作及應(yīng)用；教學(xué)重點：1網(wǎng)站相冊的制作及應(yīng)用教學(xué)難點：網(wǎng)站相冊的制作教學(xué)方法：示例演示法教學(xué)

29、內(nèi)容：一、 創(chuàng)建網(wǎng)站相冊步驟：（1）執(zhí)行菜單“命令”“創(chuàng)建網(wǎng)站相冊”命令；（2）根據(jù)對話框設(shè)置參數(shù)。二、美化網(wǎng)站相冊步驟：（1）設(shè)置標(biāo)題文字的大小、顏色；（2）設(shè)置標(biāo)題文字所在的表格的背景顏色。 提示：在創(chuàng)建網(wǎng)站相冊時，應(yīng)把照片事先存在一個文件夾中，然后創(chuàng)建一個文件夾在創(chuàng)建網(wǎng)頁時應(yīng)用。教學(xué)小結(jié)：介紹了網(wǎng)頁中網(wǎng)站相冊的創(chuàng)建與應(yīng)用。板書設(shè)計：課外作業(yè)：1網(wǎng)站相冊的含義？2寫出制作網(wǎng)站相冊的步驟？第3章 網(wǎng)頁布局（8學(xué)時）本章教學(xué)目標(biāo)1理解表格與層的概念及特點2掌握表格的創(chuàng)建與編輯3掌握表格與單元格的屬性設(shè)置4掌握通過表格進行網(wǎng)頁頁面布局的方法5掌握層的創(chuàng)建、編輯6掌握層屬性的設(shè)置7時間軸的基本操作

30、教學(xué)重點1表格和層的布局2表格和單元格屬性的設(shè)置3時間軸的應(yīng)用教學(xué)難點表格的嵌套，時間軸的使用教學(xué)方法教師使用多媒體投影演示制作過程，學(xué)生上機操作完成實例與實訓(xùn)。任務(wù)1 制作“班級課程表”網(wǎng)頁教學(xué)目標(biāo)：1掌握創(chuàng)建表格的方法；2掌握表格和單元格屬性設(shè)置的方法；3掌握表格的編輯；4掌握嵌套表格的應(yīng)用；教學(xué)重點：1表格和單元格的屬性設(shè)置；2掌握嵌套表格的應(yīng)用；教學(xué)難點：表格和單元格的應(yīng)用及屬性設(shè)置教學(xué)方法：任務(wù)驅(qū)動法，示例講解法，講練法教具準(zhǔn)備：多媒體教學(xué)環(huán)境教學(xué)內(nèi)容：第1課時一、表格1表格（1）表格的含義表格是用于在網(wǎng)頁上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的強有力的工具。表格由一行或多行組成；

31、每行又由一個或多個單元格組成。（2）表格的兩種模式Dreamweaver CS3提供了兩種查看和操作表格的方式：“標(biāo)準(zhǔn)”模式（在該模式下，表格顯示為行和列的網(wǎng)格）和“布局” 模式（允許您在將表格用作基礎(chǔ)結(jié)構(gòu)的同時在頁面上繪制方框、調(diào)整方框的大小以及移動方框）。（3）表格的標(biāo)記在HTML語言中，表格標(biāo)簽用<table></table>表示，表格元素標(biāo)簽位于<table>和</table>之間。行標(biāo)簽為<tr></tr>，單元格標(biāo)簽為<td></td>。2布局網(wǎng)頁布局是根據(jù)網(wǎng)站主題和所需的欄目，對網(wǎng)頁上

32、的內(nèi)容進行精確定位。可使用表格、層和框架布局。一般以800×600像素和1024×768像素下全屏顯示時的網(wǎng)頁寬度來確定網(wǎng)頁的大小。一般來說，除去瀏覽器的邊框，800×600像素下全屏顯示時的網(wǎng)頁寬度是778或776像素；1024×768像素下全屏顯示時的網(wǎng)頁寬度為1002或1000像素。用戶也可以根據(jù)設(shè)計效果指定所需的寬度。網(wǎng)頁高度一般不受限制，可以向下適當(dāng)延展。3嵌套表格在使用表格對網(wǎng)頁進行布局時，嵌套表格使用得十分廣泛。嵌套表格是指在表格的單元格中再插入表格來放置網(wǎng)頁元素。一般而言，一個網(wǎng)頁中嵌套表格的層次不能超過3層。層次越多，文件越大，因此，應(yīng)

33、盡量采用較少的嵌套層次來進行網(wǎng)頁布局。第2課時二、表格基本操作1.表格的創(chuàng)建：選擇菜單“插入記錄”“表格”命令，或在插入工具欄中單擊“常用”“表格”按鈕。 2表格元素的選擇：（1）表格的選擇方法一：鼠標(biāo)指向表格右框線或下框線，當(dāng)指針變成雙向箭頭時單擊鼠標(biāo)左鍵。方法二：將光標(biāo)置于表格中任意位置，在狀態(tài)欄單擊前面的<table>標(biāo)簽。（2）行的選擇² 單行的選擇：用鼠標(biāo)指向要選擇行的左邊線，當(dāng)指針變成黑色箭頭時單擊鼠標(biāo)左鍵。² 連續(xù)多行的選擇：選擇一行后，拖動鼠標(biāo)選擇多行。² 不連續(xù)多行的選擇：按住Ctrl鍵，分別選擇各行。（3）列的選擇² 單列

34、的選擇：用鼠標(biāo)指向要選擇列的上邊線，當(dāng)指針變成黑色箭頭時單擊鼠標(biāo)左鍵。² 連續(xù)多列的選擇：選擇一列后，拖動鼠標(biāo)選擇多列。² 不連續(xù)多列的選擇：按住Ctrl鍵，分別選擇各列。（4）單元格的選擇² 單個單元格的選擇：按住Ctrl鍵，用鼠標(biāo)左鍵單擊單元格。² 連續(xù)單元格的選擇：按下鼠標(biāo)左鍵在表格中拖動，選擇鼠標(biāo)指針劃過的矩形區(qū)域中的單元格。² 不連續(xù)單元格的選擇：按住Ctrl鍵，用鼠標(biāo)左鍵依次單擊各單元格。3改變表格大小方法一：首先選擇表格（選定的表格帶有粗黑的外邊框，在下邊中點、右邊中點和右下角分別顯示控制柄），用鼠標(biāo)拖動控制柄調(diào)整表格大小。方法二

35、：選擇表格，在表格屬性面板中輸入表格高度和寬度的數(shù)值。4行高和列寬的調(diào)整（1）列寬的調(diào)整：方法一：拖動要更改的列的右邊線。（相鄰列的寬度也 更改了，表格的總寬度不變。）按下Shift鍵后再拖動可以保持其他列寬不受影響。方法二：選擇列，在屬性面板中指定寬度。（2）行高的調(diào)整：方法一：拖動要更改的行的下邊線。（相鄰行的高度也更改了，表格的總高度改變。）按下Shift鍵后再拖動可以保持其他行高不受影響。方法二：選擇行，在屬性面板中指定高度。注意：當(dāng)選定了表格或表格中有插入點時， Dreamweaver CS3會顯示表格寬度和每個表格列的列寬。寬度旁邊是表格標(biāo)題菜單與列標(biāo)題菜單的箭頭。如果沒有看到表格

36、的寬度或列的寬度，則說明沒有指定該表格或列的寬度。如果出現(xiàn)兩個數(shù)，則說明“設(shè)計” 視圖中顯示的可視寬度與 HTML 代碼中指定的寬度不一致。當(dāng)拖動表格的右下角來調(diào)整表格的大小，或者添加到單元格中的內(nèi)容比該單元格的設(shè)置寬度大時，會出現(xiàn)這種情況。例如，如果將某列的寬度設(shè)置為 200 像素，而添加的內(nèi)容將寬度延長為 250 像素，則該列將顯示兩個數(shù)：200 （屬性中指定的寬度）和 (250) （帶括號，表示該列呈現(xiàn)在屏幕上的可視寬度）。5行、列的添加與刪除（1）行或列的插入：用鼠標(biāo)指向某單元格單擊右鍵，在彈出菜單中執(zhí)行“表格”“插入行”或“表格”“插入列”命令，可在當(dāng)前光標(biāo)所在行或列位置插入一行或一

37、列。將光標(biāo)定位在末行的最后一個單元格中，按“Tab”鍵可在表格的最下邊添加一行。（2）行或列的刪除：用鼠標(biāo)指向某單元格單擊右鍵，在彈出菜單中執(zhí)行“表格”“刪除行”或“表格”“刪除列”命令，可在刪除當(dāng)前光標(biāo)所在行或列。6刪除表格方法：選中表格，按Delete鍵，或者執(zhí)行“編輯”“清除”命令。第3課時三、 設(shè)置表格屬性 ² 在設(shè)置表格屬性前，首先要插入表格并選擇表格。² 將光標(biāo)定位在插入的表格中，此時表格的上方或下方出現(xiàn)帶有標(biāo)注的綠線，單擊綠線區(qū)域即可選取光標(biāo)所在的表格。如果沒有綠線，則可以通過在表格左下方的標(biāo)簽欄上單擊<table>標(biāo)簽來選取表格。² 選

38、取表格后，【屬性】面板如下圖所示。四、 設(shè)置單元格屬性按住鼠標(biāo)左鍵拖動選取需要的單元格后，其【屬性】面板如下圖所示。教學(xué)小結(jié)：介紹了網(wǎng)頁布局中常用的布局方式-表格和創(chuàng)建、編輯、屬性設(shè)置及在網(wǎng)頁中的應(yīng)用。課堂作業(yè)：在網(wǎng)頁布局中表格有什么作用？板書設(shè)計：任務(wù)2 AP元素的應(yīng)用教學(xué)目標(biāo)：1AP元素的概念；2在網(wǎng)頁中插入AP元素；3AP元素屬性的設(shè)置；教學(xué)重點：1網(wǎng)頁中AP元素的應(yīng)用；2AP元素的屬性設(shè)置；教學(xué)難點：網(wǎng)頁中AP元素的應(yīng)用教學(xué)方法：任務(wù)驅(qū)動法、實例演練法教具準(zhǔn)備：多媒體教學(xué)環(huán)境教學(xué)內(nèi)容：一、AP元素的概念1 AP元素的概念它是分配有絕對位置的HTML頁面元素，就是div標(biāo)簽或其他任何標(biāo)簽

39、，但通常是絕對定位的div標(biāo)簽。在以前的版本中，通常稱為“層”。AP元素可以包含文本、圖像或其他任何可放置到HTML文檔正文中的內(nèi)容?？梢詫⑺ㄎ辉陧撁嫔系娜魏挝恢茫瑢撁嫔系脑剡M行重疊和復(fù)雜的布局。2 AP元素的面板二、層的基本操作層也是進行網(wǎng)頁布局的一種工具。由于層具有浮動性，可以在窗口中隨意拖動，因此它的定位相對于表格更為靈活。例如，要在網(wǎng)頁左右側(cè)空白處或浮于網(wǎng)頁上方添加一些廣告、宣傳畫等，就可以通過層來完成。1創(chuàng)建層 選擇插入工具欄上“布局”選項， 單擊“布局”面板上的“繪制AP Div”按鈕，移動鼠標(biāo)到文檔區(qū)域，鼠標(biāo)指針變成十字形，在網(wǎng)頁中看拖動鼠標(biāo)，繪出藍(lán)色矩形區(qū)域。 2層的選擇

40、 （）單擊層的邊框。 （）單擊層的選擇柄（位于層的左上方）。3層的刪除 選擇層后按<delete>鍵。三、層屬性的設(shè)置 單擊層邊框選中層，其【屬性】面板如下圖所示。 如果要使多個層對齊、大小一致等，則按住【Shift】鍵選中這些層，然后在【屬性】面板中設(shè)置對應(yīng)的參數(shù)。1可見性Default：默認(rèn)Inherit：繼承Visible：可見Hidden：隱藏2溢出Visible：AP元素將向右向下擴大以顯示AP元素內(nèi)的全部內(nèi)容。Hidden：只顯示AP元素尺寸以內(nèi)的內(nèi)容。Scroll：不改變AP元素的大小，但增加滾動條，不管AP元素是否能夠顯示全部的內(nèi)容都會顯示滾動條。Auto：只有在A

41、P元素不能顯示全部內(nèi)容的時候才出現(xiàn)滾動條。3Z軸 其數(shù)值代表在垂直平面的方向上AP元素的序號，序號大的AP元素顯示在上面。四、表格與層的相互轉(zhuǎn)換 在DreamweaverCS3中，表格與層之間可以相互轉(zhuǎn)換。有些低版本的瀏覽器不支持層功能，為了使網(wǎng)頁的訪問面擴大，可以將網(wǎng)頁中的層轉(zhuǎn)換為表格。 選擇【修改】【轉(zhuǎn)換】【AP DIV轉(zhuǎn)換為表格】命令，可將層轉(zhuǎn)換為表格。 選擇【修改】【轉(zhuǎn)換】【表格轉(zhuǎn)換為AP DIV】命令，可將表格轉(zhuǎn)換為層。教學(xué)小結(jié)：介紹了另外一種網(wǎng)頁布局的方法-AP元素，講述了AP元素的創(chuàng)建、編輯及屬性設(shè)置方法。教學(xué)作業(yè)：說出AP元素在網(wǎng)頁布局中的作用及它與表格之間的區(qū)別？板書設(shè)計：教

42、學(xué)反思：AP元素這種網(wǎng)頁布局的方法比較靈活，可以彌補表格布局的缺陷，它們可以相互配合地運用使得網(wǎng)頁的效果更好。第4章 超級鏈接本章教學(xué)目標(biāo)：1掌握超鏈接基礎(chǔ)知識以及超鏈接的創(chuàng)建、設(shè)置、更改方法；2能運用超鏈接知識，創(chuàng)建文本鏈接、錨點鏈接、電子郵件鏈接、圖像映射；3掌握鏈接基礎(chǔ)知識；4掌握鏈接的創(chuàng)建、設(shè)置與更改；5掌握錨點鏈接、電子郵件鏈接、圖像映射等創(chuàng)建和設(shè)置方法；6了解鏈接檢查與測試；本章教學(xué)重點：文本鏈接和圖片鏈接的創(chuàng)建方法本章教學(xué)難點：創(chuàng)建映射圖像鏈接的方法教學(xué)方法：講授、多媒體演示及觀看聲像資料等任務(wù)1 為“我的作品”添加超文本鏈接教學(xué)目標(biāo)：1理解掌握超級鏈接的含義及精髓；2掌握超鏈接

43、的分類；3掌握超級鏈接的鏈接目標(biāo)；教學(xué)重點：1超鏈接的分類；2超級鏈接的鏈接目標(biāo)；教學(xué)難點：超級鏈接的創(chuàng)建方法；教學(xué)方法：示例講述法，任務(wù)驅(qū)動法教學(xué)內(nèi)容：一、超級鏈接的分類在“屬性”面板中的“鏈接”文本框中直接輸入要鏈接地址“.htm ”，如果鏈接文件位于本地站點目錄中，也可以點擊“瀏覽文件”按鈕在硬盤上查找文件。 1鏈接目標(biāo)：_blank：將被鏈接文檔顯示在一個新的未命名的框架或窗口內(nèi)，在內(nèi)部鏈接或外部鏈接中的主要分類頁面時多用于此方式。 _parent：將被鏈接文檔顯示在包含鏈接的框架的上一級框架或者窗口內(nèi)。多應(yīng)用在框架結(jié)構(gòu)的網(wǎng)頁中。 _seft：將被鏈接文檔顯示在和鏈接所在的同一框架或窗

44、口內(nèi)，這是默認(rèn)的鏈接打開方式，通常沒有指定時就會被采用。 _top：將被鏈接文檔顯示在整個瀏覽器窗口并取消所有框架，同樣多應(yīng)用在框架結(jié)構(gòu)的網(wǎng)頁中。 2鏈接的類型 一個網(wǎng)站是由多個頁面組成的，而這些頁面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系。超級鏈接由兩部分組成：鏈接載體（如：文本、圖像、圖像熱區(qū)、動畫等 ）和鏈接目標(biāo)（如：頁面、圖像、聲音、程序、其他網(wǎng)站、Email甚至是頁面中的某個位置 錨點。） 鏈接的類型 * 內(nèi)部鏈接：同一網(wǎng)站文檔之間的鏈接。* 外部鏈接：不同網(wǎng)站文檔之間的鏈接。* 錨點鏈接：同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接。* E-mail鏈接：發(fā)送電子郵件的鏈接。3鏈接路徑 （1）絕對

45、路徑，為文件提供完全的路徑，包括適用的協(xié)議，例如http、ftp，rtsp等。 如： （2）相對路徑，相對路徑最適合網(wǎng)站的內(nèi)部鏈接。如果鏈接到同一目錄下，則只需要輸入要鏈接文件的名稱。要鏈接到下一級目錄中的文件，只需要輸入目錄名。然后輸入“/”，再輸入文件名。如鏈接到上一級目錄中的文件，則先輸入“./”再輸入目錄名，文件名。 （3）根路徑：是指從站點根文件夾到被鏈接文檔經(jīng)由的路徑，以前斜杠開頭。例如： /pag/ grzl.html就是站點根文件夾下的pag子文件夾中的一個文件（grzl.html ）的根路徑。 二、超級鏈接的創(chuàng)建1外部鏈接 （1）直接輸入地址 選中要加超鏈接元素，在屬性面板中

46、，“鏈接”文本框直接輸入外部絕對地址，如下圖所示。（2）使用超級鏈接對話框選中要加超鏈接元素,單擊常用快捷欄中的“超級鏈接”按鈕。如圖所示。彈出“超級鏈接”對話框， 2內(nèi)部鏈接 在文檔窗口選中文字，單擊屬性面板“鏈接”后的 按鈕，彈出“選擇文件”對話框，選擇要鏈接到的網(wǎng)頁文件，即可鏈接到這個網(wǎng)頁。 我們也可以拖動“鏈接”后的 按鈕到站點面板上的相應(yīng)網(wǎng)頁文件，則鏈接將指向這個網(wǎng)頁文件。3Email鏈接 單擊常用快捷欄中的“電子郵件鏈接”按鈕。彈出“電子郵件鏈接”對話框，在對話框的文本框那輸入要鏈接的文本，然后在E-mail文本框內(nèi)輸入郵箱地址即可。也可以直接在“屬性”對話框中直接輸入mailto

47、:E-mail 。4錨點鏈接（1）定義所謂錨點鏈接，是指在同一個頁面中的不同位置的鏈接。（2）錨點鏈接的作用作用是當(dāng)頁面內(nèi)容較長時，為了瀏覽更加方便，可以在頁面的某個分項內(nèi)容的標(biāo)題上設(shè)置錨點，然后在頁面上設(shè)置錨點的鏈接，這樣用戶就可以通過鏈接快速地直接跳轉(zhuǎn)到指定頁面中。5創(chuàng)建其他超鏈接：（1）空鏈接有時候我們需要一種超鏈接的樣式效果，但不需要其鏈接跳轉(zhuǎn)到任何其他頁面或站點。此時，空鏈接無疑是非常適合的?？真溄又赶虻谋绘溄游募俏募旧?，操作方法是在“屬性”面板“鏈接”文本框中直接輸入“#”即可。（2）下拉菜單鏈接多個超鏈接使用一個下拉的菜單包括，單擊顯示菜單選擇其中的鏈接文本即可打開對應(yīng)的超鏈

48、接，多應(yīng)用在超鏈接較多、超鏈接分類的頁面中。（3）框架網(wǎng)頁鏈接主要應(yīng)用在框架結(jié)構(gòu)的網(wǎng)頁中，在效果方面的顯示是這樣的：一個頁面，在某塊區(qū)域為頁面的鏈接導(dǎo)航，某塊區(qū)域為內(nèi)容的顯示，單擊不同的超鏈接，該區(qū)域顯示不同的信息內(nèi)容。教學(xué)小結(jié)：超級鏈接是網(wǎng)頁的靈魂，它能使網(wǎng)頁成為一個有機的整體。本任務(wù)主要介紹了超級鏈接的分類、創(chuàng)建、地址的應(yīng)用。課外作業(yè)：1超級鏈接可以分為哪幾類？2舉例說明幾種地址的應(yīng)用？3什么是錨點鏈接？如何創(chuàng)建錨點鏈接？板書設(shè)計：任務(wù)2 圖像地圖的創(chuàng)建教學(xué)目標(biāo)：1掌握圖像地圖的含義；2掌握熱點區(qū)域的創(chuàng)建及繪制；3掌握圖像地圖的創(chuàng)建；教學(xué)重點：1熱點區(qū)域的創(chuàng)建及應(yīng)用；2圖像地圖的創(chuàng)建；教學(xué)

49、難點：圖像地圖的創(chuàng)建教學(xué)方法：教學(xué)內(nèi)容：一、圖像地圖映射概念所謂圖像映射，就是將一幅圖像分成若干區(qū)域，并且每個區(qū)域都有自己的鏈接。圖像映射可用于地圖，導(dǎo)航等應(yīng)用中。二、熱點區(qū)域的應(yīng)用1繪制熱點區(qū)域從插入欄中選擇“繪制矩形熱點”選項，單擊要映像的區(qū)域的一角，然后沿對角線拖動鼠標(biāo)繪制出一個矩形，釋放鼠標(biāo)，則會顯示出指定區(qū)域。最后在“屬性”面板中設(shè)置鏈接、目標(biāo)和替換文本框。 2修改熱點區(qū)域每個熱點區(qū)域邊框上都有控點，可用來改變熱點的大小及形狀。移動修改各控點之前，應(yīng)先選中“屬性”面板中的指針熱點工具。矩形圖形有四個控點，位于圖形的四個角上。拖曳任意一個控點可以改變圖形大小及形狀。提示：（1）拖動時按

50、住Shift鍵，將保持矩形為正方形。 （2）橢圓形熱點也有四個控點，拖曳任意一個控點都可以縮小或放大圓形的直徑。教學(xué)小結(jié)：介紹了圖像地圖的創(chuàng)建及應(yīng)用，了解了這一類網(wǎng)頁的應(yīng)用及編輯。課外作業(yè)：1圖像地圖的含義？2熱點區(qū)域有哪幾類？如何應(yīng)用？第4章內(nèi)容小結(jié)一、超級鏈接1概念：是指站點內(nèi)不同網(wǎng)頁之間、站點與Web之間的鏈接關(guān)系，它可以使站點內(nèi)的網(wǎng)頁成為有機的整體，還能夠使不同站點之間建立聯(lián)系。超級鏈接由兩部分組成：鏈接載體和鏈接目標(biāo)。·超鏈接元素：文本、圖像、圖像熱區(qū)、動畫等·鏈接目標(biāo)：可以是任意網(wǎng)絡(luò)資源。例如：頁面、圖像、聲音、程序、其他網(wǎng)站、Email甚至是頁面中的某個位置

51、- 錨點。2超鏈接的類型：內(nèi)部鏈接：同一網(wǎng)站文檔之間的鏈接。外部鏈接：不同網(wǎng)站文檔之間的鏈接。錨點鏈接：同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接。E-mail鏈接：發(fā)送電子郵件的鏈接。3超鏈接路徑（1）絕對路徑，為文件提供完全的路徑，包括適用的協(xié)議，例如http、ftp，rtsp等。 （2）相對路徑，相對路徑最適合網(wǎng)站的內(nèi)部鏈接。如果鏈接到同一目錄下，則只需要輸入要鏈接文件的名稱。要鏈接到下一級目錄中的文件，只需要輸入目錄名。然后輸入“/”，再輸入文件名。如鏈接到上一級目錄中的文件，則先輸入“./”再輸入目錄名，文件名。（3）根路徑：是指從站點根文件夾到被鏈接文檔經(jīng)由的路徑，以前斜杠開頭。二、超級鏈

52、接的創(chuàng)建1創(chuàng)建外部鏈接的方法：（1）直接輸入地址：選中要加超鏈接元素，在屬性面板中，“鏈接”文本框直接輸入外部絕對地址。 （2）使用超級鏈接對話框：選中要加超鏈接元素,單擊常用快捷欄中的“超級鏈接”按鈕。輸入“文本”、“鏈接”、“目標(biāo)”、“標(biāo)題”等信息。2創(chuàng)建內(nèi)部鏈接的方法：在文檔窗口選中文字，單擊屬性面板“鏈接”后的按鈕，彈出“選擇文件”對話框，選擇要鏈接到的網(wǎng)頁文件，即可鏈接到這個網(wǎng)頁。我們也可以拖動“鏈接”后的按鈕到站點面板上的相應(yīng)網(wǎng)頁文件，則鏈接將指向這個網(wǎng)頁文件。此外，我們還可以直接將相對地址輸入到“鏈接”文本框里來鏈接一個頁面。3創(chuàng)建E-mail鏈接：單擊常用快捷欄中的“電子郵件鏈

53、接”按鈕，彈出“電子郵件鏈接”對話框，在對話框的文本框那輸入要鏈接的文本，然后在E-mail文本框內(nèi)輸入郵箱地址。三、圖像地圖的應(yīng)用1圖像地圖映射概念就是將一幅圖像分成若干區(qū)域，并且每個區(qū)域都有自己的鏈接。圖像映射可用于地圖，導(dǎo)航等應(yīng)用中。2使用繪圖工具：從插入欄中選擇“繪制矩形熱點”選項，單擊要映像的區(qū)域的一角，然后沿對角線拖動鼠標(biāo)繪制出一個矩形，釋放鼠標(biāo)，則會顯示出指定區(qū)域。最后在“屬性”面板中設(shè)置鏈接、目標(biāo)和替換文本框。按照以上步驟，在插入欄中選擇“繪制橢圓熱點”或“繪制多邊形熱點”選項，可以使用橢圓熱點工具或多邊形熱點工具繪制熱點區(qū)域。3修改熱點區(qū)域：每個熱點區(qū)域邊框上都有控點，可用來

54、改變熱點的大小及形狀。移動修改各控點之前，應(yīng)先選中“屬性”面板中的指針熱點工具。矩形圖形有四個控點，位于圖形的四個角上。拖曳任意一個控點可以改變圖形大小及形狀。拖動時按住Shift鍵，將保持矩形為正方形。橢圓形熱點也有四個控點，拖曳任意一個控點都可以縮小或放大圓形的直徑。例如，如果拖住圓形頂部的控點向上移動，圓形將往上擴展。每一個多邊形熱點的角上都有一個控點，單擊某個控點將其拖至新的位置，多邊形的形狀也會隨之變化。第5章 框 架（4學(xué)時）本章學(xué)習(xí)目標(biāo)：1了解使用框架的優(yōu)缺點；2掌握框架網(wǎng)頁在創(chuàng)建、選擇、設(shè)置、存儲方面的特點；3掌握框架和框架集的創(chuàng)建；4掌握框架結(jié)構(gòu)網(wǎng)頁的制作；5掌握嵌入式框架的

55、使用；教學(xué)重點：1框架結(jié)構(gòu)網(wǎng)頁的制作；2框架與框架集的創(chuàng)建；教學(xué)難點：嵌入式框架教學(xué)方法：教師使用多媒體投影演示制作過程，學(xué)生上機操作完成實例與實訓(xùn)任務(wù)1 創(chuàng)建框架網(wǎng)頁教學(xué)目標(biāo)：1理解掌握框架的作用及創(chuàng)建；2理解掌握框架及框架集屬性的設(shè)置；3掌握框架下超級鏈接的創(chuàng)建；教學(xué)重點：1框架的創(chuàng)建及屬性設(shè)置；2框架及框架集的設(shè)置及關(guān)系；教學(xué)難點：框架與框架集的應(yīng)用及超級鏈接的創(chuàng)建；教學(xué)方法：示例演示法，任務(wù)驅(qū)動法教具準(zhǔn)備：多媒體教學(xué)環(huán)境教學(xué)內(nèi)容：一、框架和框架集1框架的概念框架是瀏覽器窗口中的一個區(qū)域，用于顯示獨立的HTML文檔。兩個或兩個以上的框架組合成一個見面?？蚣芙?jīng)常用于導(dǎo)航，一個框架顯示包含導(dǎo)

56、航欄目的文檔，另一個框架顯示含有內(nèi)容的文檔。2框架集的概念在網(wǎng)頁上定義的一個區(qū)域就是單個框架，而框架集則記錄了同一個網(wǎng)頁中多個框架的布局、超鏈接和屬性信息。利用框架可以把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以添加任意網(wǎng)頁元素，也可分別顯示不同的網(wǎng)頁。 注意：框架集也是HTML文件，但它本身并不包含要顯示的HTML內(nèi)容，它只是向瀏覽器提供應(yīng)如何顯示一組框架及在這些框架中應(yīng)顯示哪些文檔。3框架與框架集的關(guān)系框架集與框架之間的關(guān)系其實就是包含與被包含的關(guān)系，框架集相當(dāng)于一個容器，框架則是放在容器中的東西，框架集記錄了框架的位置，以及框架中包含的網(wǎng)頁的鏈接地址。二、創(chuàng)建框架DreamweaverCS3中給出了框架的預(yù)定

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論