電 腦 與 資 訊 科 技 ( 工 作 紙 )<strong>Dreamweaver</strong> <strong>CS3</strong> 網 頁 編 寫 ( 九 )<strong>Dreamweaver</strong> <strong>CS3</strong> 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 加 入 背 景 音 樂 。2. 在 圖 像 上 加 入 影 像 地 圖 ( 圓 形 、 方 形 、 不 規 則 形 狀 )。3. 設 定 重 新 整 理 及 自 動 轉 頁 。( 可 以 利 用 這 技 巧 定 時 顯 示 最 新 資 訊 )工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 <strong>一</strong> 個 文 件 夾 "ex9"。2. 在 資 料 夾 "ex9" 中 放 置 老 師 給 與 的 資 料 夾 "image"、"sound" 及 網 頁 "index.htm"。3. 開 啟 <strong>Dreamweaver</strong>, 定 義 文 件 夾 "ex9 為 本 地 網 站 。4. 開 啟 "index.htm", 並 加 上 背 景 音 樂 "bg.mid"。[ 把 此 句 標 籤 放 入 之 後 ]5. 在 地 圖 上 為 下 列 每 <strong>一</strong> 間 學 校 繪 製 <strong>一</strong> 幅 不 規 則 形 狀 的 影 像 地 圖 , 對 應 的 超 連 結 會 在 新視 窗 上 顯 示 相 關 的 學 校 網 頁 :學 校 名 稱學 校 網 址佛 教 志 蓮 中 學真 鐸 學 校佛 教 孔 仙 洲 紀 念 中 學培 敦 中 學http://www.clbss.edu.hk/http://www.hksfd.edu.hk/http://www.bhscmc.edu.hk/http://www.pooitun.edu.hk/6. 選 按 [ 主 功 能 表 ] → [ 插 入 ] → [HTML] → [ 檔 頭 標 籤 ] → [ 重 新 整 理 ], 把 "index.htm"設 定 成 5 秒 後 , 會 自 動 跳 往 本 校 網 站 。7. 完 成 後 把 所 有 檔 案 貯 存 。評 分 準 則 : 加 上 背 景 音 樂製 作 影 像 地 圖建 立 正 確 超 連 結設 定 自 動 轉 頁1 分1 分1 分1 分
電 腦 與 資 訊 科 技 ( 工 作 紙 )<strong>Dreamweaver</strong> <strong>CS3</strong> 網 頁 編 寫 ( 十 )<strong>Dreamweaver</strong> <strong>CS3</strong> 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 認 識 AP 元 素 ( 圖 層 ) 的 結 構 和 功 用 。2. 能 在 網 頁 加 上 圖 層 , 並 能 加 以 修 改 和 調 整 堆 疊 次 序 。3. 認 識 「 行 為 指 令 」 原 理 : 在 某 「 物 件 」 上 進 行 某 「 行 為 」, 從 而 引 發 預 定 的 「 效 果 」。4. 在 網 頁 中 加 入 不 同 的 「 行 為 指 令 」:• 顯 示 及 隱 藏 AP 元 素• 調 換 影 像• 彈 出 訊 息 盒• 顯 示 狀 態 列 文 字• 開 啟 瀏 覽 器 視 窗 / 前 往 URL5. 認 識 Javascript 和 Java Applet。工 作 :1. 連 結 AeroDrive 硬 碟 , 複 製 文 件 夾 "ex9" 成 為 另 <strong>一</strong> 文 件 夾 "ex10"。2. 開 啟 <strong>Dreamweaver</strong>, 定 義 文 件 夾 "ex10" 為 本 地 網 站 。3. 在 資 料 夾 "ex10/image" 中 放 置 老 師 給 與 的 四 幅 學 校 相 片 及 兩 個 電 郵 圖 像 。4. 修 改 "index.htm", 取 消 之 前 建 立 的 自 動 轉 頁 效 果 , 並 刪 除 所 做 的 四 個 學 校 超 連 結 。5. 把 視 窗 標 題 由 "ex9" 改 為 "ex10"。6. 建 立 AP 元 素 , 製 造 下 列 效 果 :• 在 每 <strong>一</strong> 所 學 校 的 位 置 旁 建 立 <strong>一</strong> 個 100 × 100 像 素 的 圖 層 , 放 置 對 應 的 校 舍 相 片 。• 利 用 行 為 視 窗 增 加 行 為 : 當 單 按 某 <strong>一</strong> 影 像 地 圖 時 , 對 應 的 相 片 圖 層 便 會 顯 示 。• 利 用 行 為 視 窗 增 加 行 為 : 當 把 滑 鼠 移 離 相 片 圖 層 時 , 相 片 圖 層 便 會 隱 藏 。• 利 用 AP 元 素 視 窗 , 把 四 個 學 校 相 片 圖 層 預 設 為 隱 藏 狀 態 。7. 在 學 校 地 圖 的 下 <strong>一</strong> 行 加 入 <strong>一</strong> 個 電 郵 影 像 "email1.gif", 在 屬 性 視 窗 中 把 影 像 命 名 為"email1"。 然 後 製 造 下 列 效 果 :• 當 滑 鼠 移 至 電 郵 影 像 "email1.gif" 時 , 電 郵 影 像 會 變 成 "email2.gif"。• 當 滑 鼠 移 離 電 郵 影 像 "email2.gif" 時 , 電 郵 影 像 會 回 復 成 "email1.gif"。8. 點 選 標 籤 , 逐 <strong>一</strong> 加 入 下 列 效 果 :• 當 網 頁 載 入 時 , 螢 幕 會 出 現 <strong>一</strong> 個 訊 息 盒 , 顯 示 "You are welcome."。• 當 網 頁 載 入 時 , 狀 態 列 會 顯 示 "Well done !!" 。• 當 網 頁 被 關 閉 時 , 螢 幕 會 自 動 開 啟 另 <strong>一</strong> 個 新 視 窗 , 並 連 結 到 雅 虎 網 站"http://hk.yahoo.com/" 去 。9. 參 考 網 站 "http://www.w3schools.com/js/", 為 你 的 網 頁 加 上 兩 個 Javascript 效 果 。10. 參 考 網 站 "http://vrschool.ice.cycu.edu.tw/teacher/Tech1/Sample/sample.htm", 為 你 的網 頁 加 上 兩 個 Java Applet 效 果 。評 分 準 則 : 建 立 圖 層 及 相 片 1 分11. 完 成 後 把 所 有 檔 案 貯 存 。顯 示 隱 藏 圖 層 1 分對 調 影 像 1 分建 立 訊 息 盒 1 分建 立 狀 態 列 文 字 1 分開 啟 新 視 窗 1 分Javascript 效 果 2 分Java Applet 效 果 2 分