本範例將透過「國家公園網站的建置」， 讓同學熟悉 Dreamweaver 技巧。
【好用的快速鍵】
Ctrl + C : 複製 Ctrl + V : 貼上 Ctrl + + : 放大 Ctrl + - : 縮小
Alt + Tab : 在二個工作視窗切換(一個是 Dreamweaver，另一個是 阿旺師磨書坊)
步驟：
1. 定義網站
網站/ 新增網站
網站名稱 : 國家公園
2. 框架式網頁的建立
打開 main.htm
插入/HTML /頁框 / 上及左巢狀
檔案/另存新頁框組 ，檔名 : index.html (可直接覆蓋原來的 index.html)
標題輸入 :國家公園介紹網
3. 頁框屬性的設定
視窗/頁框
選上頁框，頁框名稱 : title, 原始檔案 : homepage/title.htm 。請用瀏覽檔案的方式，不用手動輸入檔名。
選左頁框，頁框名稱 : menu, 原始檔案 : homepage/menu.htm
選右頁框，頁框名稱 : main, (下面步驟不用做 ) 原始檔案 : homepage/main.htm
4. 頁框組屬性的設定
選 頁框面板 ，在最外圍的頁框組單按， 列 : 119 ，單位:像素，調整上頁框的高度
選 頁框面板 ，在下面頁框組單按， 欄 : 150 ，單位:像素，調整左頁框的寬度
5. 插入表格
選左頁框，插入/表格 ，列 :7，欄 :1，寬度 :100，百分比
邊框粗細 : 0
頁首: 無
6. 變換影像效果的設定
移到表格第 1 列 ，插入 /影像物件/滑鼠變換影像
原始影像 : images /1101.jpg
滑鼠變換影像 : images /1101A.jpg
按下時，前往的 URL : park/aa.htm
選取插入的影像(即 陽明山國家公園) , 目標 : main
移到表格第幾列
|
原始影像
|
滑鼠變換影像
|
按下時，前往的 URL
|
目標
|
3
|
images/1102.jpg
|
images/1102A.jpg
|
park/bb.htm
|
Main
|
5
|
images/1103.jpg
|
images/1103A.jpg
|
park/cc.htm
|
Main
|
7
|
images/1104.jpg
|
images/1104A.jpg
|
park/dd.htm
|
Main
|
7. 網頁背景及音樂的設定
網頁背景圖片的設定方式:
移至 右頁框的第1行，屬性面板 /頁面屬性
外觀(CSS)，背景影像 : images/back.jpg
加入背景音樂的方式 :
按 程式碼 鈕
<body> 的下一列
輸入 <bgsound src= 可直接使用 「瀏覽」 的方式，找到音樂檔。
完整語法: <bgsound src="../music/1101.mid">
8. 加入跑馬燈
按 程式碼 鈕 加入下列文字
<marquee>
歡迎光臨國家公園介紹網，本網站有詳細的國家公園介紹哦！
</marquee>
9. 建立影像地圖
在右頁框的網頁內，選 「國家公園分佈圖」此張圖片，屬性面板 : 多邊形連結區域工具，
先選好 「陽明山國家公園」的區域，完成後按 Esc。
屬性面板
「陽明山國家公園」此區域 ，連結 : park/aa.htm，目標 :main
「雪霸國家公園」此區域 ，連結 : park/bb.htm，目標 :main
「太魯閣國家公園」 此區域，連結 : park/cc.htm，目標 :main
「墾丁國家公園」 此區域，連結 : park/dd.htm，目標 :main
11.上頁框網頁中「小鹿」的圖片要超連結到首頁，即 index.html，目標 : _top
12.檔案 /全部儲存。如果沒全部做完，記得要先 「全部儲存」
13.預覽 : iexplore，預覽做出來的網頁有無問題
14. 對資料夾，按右鍵，選 7-zip / 加入 "ex2-3a.zip"上傳到自己的Google雲端硬碟作備份,
以後還可以下載，作修改。
15.全部都正確後，將 ex2-3a.zip 重新命名為： 座號姓名.zip (如1號王小明.zip) , 再上傳到老師的Classroom。
範例資料下載
