電腦與資訊科技(工作紙) Dreamweaver CS3 網頁編寫(一) 姓名_ 班別 ...

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 十 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 認 識 AP 元 素 ( 圖 層 ) 的 結 構 和 功 用 。2. 能 在 網 頁 加 上 圖 層 , 並 能 加 以 修 改 和 調 整 堆 疊 次 序 。3. 認 識 「 行 為 指 令 」 原 理 : 在 某 「 物 件 」 上 進 行 某 「 行 為 」, 從 而 引 發 預 定 的 「 效 果 」。4. 在 網 頁 中 加 入 不 同 的 「 行 為 指 令 」:• 顯 示 及 隱 藏 AP 元 素• 調 換 影 像• 彈 出 訊 息 盒• 顯 示 狀 態 列 文 字• 開 啟 瀏 覽 器 視 窗 / 前 往 URL5. 認 識 Javascript 和 Java Applet。工 作 :1. 連 結 AeroDrive 硬 碟 , 複 製 文 件 夾 "ex9" 成 為 另 一 文 件 夾 "ex10"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex10" 為 本 地 網 站 。3. 在 資 料 夾 "ex10/image" 中 放 置 老 師 給 與 的 四 幅 學 校 相 片 及 兩 個 電 郵 圖 像 。4. 修 改 "index.htm", 取 消 之 前 建 立 的 自 動 轉 頁 效 果 , 並 刪 除 所 做 的 四 個 學 校 超 連 結 。5. 把 視 窗 標 題 由 "ex9" 改 為 "ex10"。6. 建 立 AP 元 素 , 製 造 下 列 效 果 :• 在 每 一 所 學 校 的 位 置 旁 建 立 一 個 100 × 100 像 素 的 圖 層 , 放 置 對 應 的 校 舍 相 片 。• 利 用 行 為 視 窗 增 加 行 為 : 當 單 按 某 一 影 像 地 圖 時 , 對 應 的 相 片 圖 層 便 會 顯 示 。• 利 用 行 為 視 窗 增 加 行 為 : 當 把 滑 鼠 移 離 相 片 圖 層 時 , 相 片 圖 層 便 會 隱 藏 。• 利 用 AP 元 素 視 窗 , 把 四 個 學 校 相 片 圖 層 預 設 為 隱 藏 狀 態 。7. 在 學 校 地 圖 的 下 一 行 加 入 一 個 電 郵 影 像 "email1.gif", 在 屬 性 視 窗 中 把 影 像 命 名 為"email1"。 然 後 製 造 下 列 效 果 :• 當 滑 鼠 移 至 電 郵 影 像 "email1.gif" 時 , 電 郵 影 像 會 變 成 "email2.gif"。• 當 滑 鼠 移 離 電 郵 影 像 "email2.gif" 時 , 電 郵 影 像 會 回 復 成 "email1.gif"。8. 點 選 標 籤 , 逐 一 加 入 下 列 效 果 :• 當 網 頁 載 入 時 , 螢 幕 會 出 現 一 個 訊 息 盒 , 顯 示 "You are welcome."。• 當 網 頁 載 入 時 , 狀 態 列 會 顯 示 "Well done !!" 。• 當 網 頁 被 關 閉 時 , 螢 幕 會 自 動 開 啟 另 一 個 新 視 窗 , 並 連 結 到 雅 虎 網 站"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 分