DREAMWEAVER 8.0 網(wǎng)頁制作教案
（二）鄺翠珊
cskuang@gdut.edu.cn
39322544-826
復(fù)習(xí)：
網(wǎng)頁制作的一些常用功能：定義站點(diǎn)、數(shù)據(jù)表格的制作（學(xué)習(xí)表格的插入、合并拆分與嵌套）、利用表格布局網(wǎng)頁、頁面屬性的設(shè)置、圖片插入、文字的插入、日期的插入、插入電子郵件鏈接、flash動畫插入、插入水平線、練習(xí)
1、練習(xí)上節(jié)課的內(nèi)容：建立站點(diǎn)（包括站點(diǎn)文件）、用表格布局網(wǎng)頁、設(shè)置頁面屬性、圖片、文字、日期、電子郵件鏈接、flash動畫、水平線等的插入
一、交換圖象效果的制作：（插入→圖像對象→鼠標(biāo)經(jīng)過圖象）
鼠標(biāo)經(jīng)過圖象的效果是當(dāng)鼠標(biāo)指針經(jīng)過或者按下按鈕的時(shí)候，圖像或按鈕的形狀或顏色就會發(fā)生變化，如圖像變換，發(fā)光，或者陰影出現(xiàn)等等。是網(wǎng)頁變的生動活潑起來。
看dreamweaver學(xué)習(xí)網(wǎng)站導(dǎo)航演示：鼠標(biāo)移動到圖片上的時(shí)候，圖片變成了另外一幅，當(dāng)鼠標(biāo)移開后恢復(fù)到原來的圖象。
制作步驟：
1、光標(biāo)移動到欲插入的位置，點(diǎn)擊菜單欄【插入】【圖像對象】【鼠標(biāo)經(jīng)過圖像】打開對話框：
【圖像名稱】鼠標(biāo)經(jīng)過圖像的名稱，名稱是自定義的，只要不與同頁面另一個(gè)鼠標(biāo)經(jīng)過圖像名稱相同即可，也可以不填。
【原始圖像】頁面開始時(shí)顯示的圖像
【鼠標(biāo)經(jīng)過圖像】鼠標(biāo)經(jīng)過的時(shí)候顯示的圖像。
【替換文本】圖像無法正常顯示的時(shí)候出現(xiàn)的文本注釋，也是圖像正常顯示時(shí)鼠標(biāo)指向鏈接時(shí)的說明，也可以不填。
【前往的URL】點(diǎn)擊鼠標(biāo)后鏈接的目標(biāo)。
【預(yù)載鼠標(biāo)經(jīng)過圖像】瀏覽網(wǎng)頁時(shí)兩個(gè)圖片都同時(shí)被下載，當(dāng)鼠標(biāo)經(jīng)過時(shí)無需從網(wǎng)上下載，而是調(diào)用預(yù)先下載的圖像，減少延遲，使效果平滑流暢。
二、了解簡單的HTML：超文本標(biāo)志語言，簡要的介紹網(wǎng)頁中使用的超文本標(biāo)識語言HTML的基本概念和用途通過一個(gè)簡單的html示例（html.html）了解html的基本構(gòu)成，介紹html的基本組成部分.如果深入了解可以參考：http://004km.cn 或file:///F|/web/jingpin.htm
地球，中國，廣州
文檔相對路徑：以當(dāng)前文檔所在位置為起點(diǎn)到被連接文檔經(jīng)由的路徑。這是用于本地鏈接的最適宜的路徑。例如，dreamweaver/contents.html就是一個(gè)文檔相對路徑。當(dāng)我們要把當(dāng)前文檔與處在相同文件夾中的另一文檔鏈接，或把同一網(wǎng)站下不同文件夾中的文檔相互鏈接時(shí)，就可使用相對路徑。
根相對路徑：根相對路徑是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的路徑。一個(gè)根相對路徑以前斜杠開頭，它代表站點(diǎn)根文件夾。例如，/support/tips.html就是站點(diǎn)根文件夾下的support子文件夾中的一個(gè)文件（tips.html）的根相對路徑。根相對路徑是指定網(wǎng)站內(nèi)文檔鏈接的最好方法，因?yàn)樵谖覀円苿右粋€(gè)包含根相對鏈接的文檔時(shí)，無需對原有的鏈接進(jìn)行修改。
認(rèn)識鏈接的目標(biāo)：（鏈接網(wǎng)頁打開的方式）
1、_seft為本窗口；
2、_top為上級窗口（使用多級框架時(shí)）
3、_blank為打開新窗口；
4、_parent為父窗口（使用框架時(shí)）；
5、默認(rèn)的效果
.第1和第5種情況是相同的，_self表示“相同窗口”。點(diǎn)擊鏈接后，地址欄不變。在網(wǎng)頁中沒有做設(shè)置時(shí)，網(wǎng)頁鏈接默認(rèn)的窗口為_self。.第2和第4種情況，也是相同的。_top表示整頁窗口，_parent表示父窗口。實(shí)際使用中，它們沒有任何區(qū)別，地址欄會變化。
._blank是最常見的鏈接方式，表示超鏈接的目標(biāo)地址在新建窗口中打開。
練習(xí)
4、打開：未做超鏈接.html的文件，在此網(wǎng)頁中做超鏈接的練習(xí)，參看文件超鏈接.htm。
五、word和excel文檔的導(dǎo)入。
六、利用一個(gè)現(xiàn)有網(wǎng)頁制作其他網(wǎng)頁（相同的頁眉，導(dǎo)航，頁腳）
例如利用首頁index.html制作課程介紹這一頁
kcjs.html 步驟：
1、打開index.html文件，把頁面中相同的部分如頁眉，導(dǎo)航，頁腳等保留，不同的地方刪除或更改，再保存為kcjs.html
2、在需要更改的地方插入圖片等其他網(wǎng)頁內(nèi)容。
練習(xí)
5、打開index.htm,利用這個(gè)網(wǎng)頁制作出幾個(gè)相同的頁眉，導(dǎo)航，頁腳的網(wǎng)頁。并設(shè)置這些網(wǎng)頁導(dǎo)航的鏈接，七、行為的簡單運(yùn)用：
（一）利用行為創(chuàng)建彈出式菜單
制作“彈出式菜單”的步驟如下：
（1）在網(wǎng)頁上選擇要附加該行為的對象（導(dǎo)航欄按鈕、鏈接文本、圖片等）并打開“行為”面板。
（2）單擊加號(+)按鈕并從“動作”彈出式菜單中選擇“顯示彈出式菜單”，彈出設(shè)置對話框，如圖14-13所示。
圖14-13 設(shè)置彈出式菜單
（3）在出現(xiàn)的“顯示彈出式菜單”對話框中，使用以下標(biāo)簽來設(shè)置彈出式菜單的選項(xiàng)： ? ? 內(nèi)容：設(shè)置、更改單個(gè)菜單項(xiàng)的名稱、結(jié)構(gòu)、URL 和框架目標(biāo)。
? ? 外觀：設(shè)置菜單一般狀態(tài)和滑過狀態(tài)的外觀以及設(shè)置菜單項(xiàng)文本的字體選擇。? ? 高級：設(shè)置菜單單元格的屬性。例如，可以設(shè)置單元格的寬度和高度、單元格顏色和邊框?qū)挾?、文本縮進(jìn)以及在用戶將鼠標(biāo)指針移到觸發(fā)器上后菜單出現(xiàn)之前的延遲時(shí)間長度。
? ? 位置：設(shè)置菜單相對于觸發(fā)圖像或鏈接的放置位置。
（4）單擊“確定”，關(guān)閉對話框。
（5）檢查默認(rèn)事件是否是所需的事件。該行為的事件一般為“onMouseover”，即鼠標(biāo)滑過時(shí)顯示菜單。
（二）彈出消息框。
（三）打開瀏覽窗口
（1）選擇網(wǎng)頁中需要點(diǎn)擊的內(nèi)容，在屬性面板上的鏈接欄上填上 #，如下圖：
（2）打開「行為」面板，點(diǎn)擊（+）按鈕并從「動作」彈出式菜單中選擇「打開瀏覽器窗口」；
（3）在打開的瀏覽器窗口中點(diǎn)擊「瀏覽」選取需要鏈接的文件，或者輸入您需要顯示的URL地址。
（4）設(shè)置下列選項(xiàng)：
「窗口寬度」 指定以象素為單位的窗口寬度。
「窗口高度」 指定以象素為單位的窗口高度。
「導(dǎo)航工具欄」 是一行瀏覽器按鈕包括「前進(jìn)」，「后退」，「主頁」和「刷新」。
「地址工具欄」 是一行瀏覽器選項(xiàng)，其中包括地址域。
「狀態(tài)欄」 是瀏覽器窗口底部的區(qū)域，用于顯示信息（如剩余加載時(shí)間，和URL關(guān)聯(lián)的鏈接）。
「菜單條」 是瀏覽器窗口（Windows）或桌面（Macintosh）上菜單出現(xiàn)的區(qū)域。菜單包括如「文件」，「編輯」，「查看」，「轉(zhuǎn)到」，「幫助」等等。如果您需要來訪者可以從新窗口導(dǎo)航，那么您可以明確地設(shè)置該選項(xiàng)。如果您不設(shè)置該選項(xiàng)，來訪者在新窗口中將只能關(guān)閉或最小化窗口（Windows）或者關(guān)閉窗口或退出程序（Macintosh）。
「需要時(shí)使用滾動條」 指定如果內(nèi)容超過可見區(qū)域時(shí)滾動條自動出現(xiàn)。如果您不明確設(shè)置該選項(xiàng)，滾動條不會出現(xiàn)。如果「調(diào)整大小手柄」也被關(guān)閉，那么來訪者將沒有方便的辦法看見超過窗口原始大小的那部分內(nèi)容。（雖然他們可能可以通過使用拖動窗口邊緣的辦法使窗口滾動。）
「調(diào)整大小手柄」 指定用戶是否可以調(diào)整窗口大小，無論是通過拖動窗口的右下角還是點(diǎn)擊右上角的最大化按鈕（Windows）或大小框（Macintosh）的辦法。如果該選項(xiàng)沒有明確設(shè)置，調(diào)整大小控制將不可用，而且右下角也是不可拖動的。
「窗口名稱」 就是新窗口的名稱。如果您想使用其作為鏈接目標(biāo)或者用JavaScript控制它，那么您應(yīng)該給新窗口命名。該名稱中不能包含空格或特殊字符。
（5）點(diǎn)擊「確定」。
（6）檢查默認(rèn)事件是否是您需要的事件。
如果該事件不是您所需的，請從彈出式菜單中選擇另一個(gè)事件。如果您需要的事件沒有列出，請?jiān)凇高x擇瀏覽器」彈出式菜單中改變目標(biāo)瀏覽器。
（四）在網(wǎng)頁中添加背景音樂。（wave、mp3等格式）
練習(xí)6：制作利用行為制作彈出式菜單、打開瀏覽窗口和彈出消息框、在網(wǎng)頁中添加背景音樂的練習(xí)。
八、內(nèi)框的運(yùn)用 滾動內(nèi)框
| 代碼中紅色部分nk1.html為內(nèi)框中的網(wǎng)頁
九、創(chuàng)建網(wǎng)站相冊：如果你要處理大量圖片時(shí)，可以用這個(gè)。
練習(xí)7：
在你站點(diǎn)下建立一個(gè)放置數(shù)張圖片的文件夾,本實(shí)例是將文件夾命名為photo。創(chuàng)建網(wǎng)站相冊
網(wǎng)頁制作與設(shè)計(jì)教案
第一講 網(wǎng)頁設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計(jì).............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動態(tài)網(wǎng)頁設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環(huán)語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20
第一講 網(wǎng)頁設(shè)計(jì)概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁設(shè)計(jì)的相關(guān)術(shù)語及網(wǎng)站制作的基本流程?！窘虒W(xué)目的】
使學(xué)生對網(wǎng)站及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的興趣。【教學(xué)重點(diǎn)】
網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)難點(diǎn)】
理解網(wǎng)頁設(shè)計(jì)中的若干術(shù)語。【教學(xué)方式】
講授式、討論式、案例分析式?！窘虒W(xué)參考】
1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁工場》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點(diǎn)和結(jié)構(gòu)
Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶機(jī)/服務(wù)器）工作模式
在瀏覽器和服務(wù)器之間應(yīng)用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式
協(xié)議://主機(jī)名或IP地址：端口號/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標(biāo)志的使用。【教學(xué)方式】
討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】
1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語法
1、雙標(biāo)記
語法：
<標(biāo)記>內(nèi)容
2、單標(biāo)記 語法：<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對于前面的文字增大一級。
......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個(gè)字符的上標(biāo)。......，使文字成為前一個(gè)字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行 2.2.10 插入水平線 使用
標(biāo)記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
2、有序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
3、定義列表
- 列表?xiàng)l目1
- 條目1的說明
- 列表?xiàng)l目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁中加入文本、圖片和超級鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁的基礎(chǔ)。超級鏈接標(biāo)志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學(xué)習(xí)HTML中超級鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志?！窘虒W(xué)目的】
使學(xué)生掌握簡單表格、表單與框架的制作?！窘虒W(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性?！窘虒W(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對應(yīng)標(biāo)志及屬性的含義?！窘虒W(xué)方式】
案例分析式、項(xiàng)目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口屬性設(shè)置
2.7.4 常見的框架窗口劃分方法（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分
（3）目錄和標(biāo)題，分為左上、左下、右三部分
（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁
