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