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

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 一 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 網 頁 檔 是 一 個 超 文 本 檔 案 , 也 可 當 成 是 一 個 程 式 。 而 瀏 覽 網 頁 即 是 觀 看 執 行 這 個 程式 時 所 產 生 的 效 果 。2. 網 頁 必 須 上 載 網 頁 伺 服 器 才 能 讓 全 世 界 的 人 透 過 互 聯 網 觀 看 。3. 若 網 頁 中 包 含 圖 片 、 聲 音 、 動 畫 時 , 這 些 附 屬 的 多 媒 體 檔 案 也 必 須 同 時 上 載 在 網 頁伺 服 器 , 否 則 瀏 覽 器 在 執 行 時 會 把 它 們 忽 略 。4. 上 載 檔 案 及 資 料 夾 , 可 使 用 FTP(File Transfer Protocol) 程 式 或 以 網 頁 登 入 的 模 式進 行 。5. 放 在 互 聯 網 上 的 資 料 夾 及 檔 案 , 應 盡 量 以 小 楷 英 文 命 名 , 而 且 不 宜 超 過 8 個 字 母 。否 則 某 些 伺 服 器 會 自 動 為 你 改 名 , 以 致 部 份 檔 案 不 能 開 啟 。6. 網 站 應 使 用 資 料 夾 分 類 地 貯 存 檔 案 , 而 且 資 料 夾 及 檔 案 應 以 有 意 義 的 名 稱 命 名 。7. 網 站 首 頁 應 該 以 index.htm 或 index.html 命 名 , 當 瀏 覽 者 鍵 入 網 址 時 , 瀏 覽 器 便 會自 動 搜 尋 這 頁 作 為 顯 示 的 第 一 頁 。 否 則 瀏 覽 者 便 必 須 確 實 地 知 道 某 檔 案 的 位 置 及 名稱 才 能 開 啟 檔 案 。8. Aero Drive 戶 口 中 public_html 資 料 夾 的 作 用 , 其 實 等 同 於 一 個 網 頁 伺 服 器 。 例 如091a01 的 同 學 , 他 的 網 址 便 是 aero2.bhscmc.edu.hk/~091a01。工 作 :1. 學 生 可 嘗 試 把 老 師 提 供 的 網 頁 index.htm 及 相 關 資 料 夾 上 載 到 自 己 的 Aero Drive 戶口 中 的 public_html 資 料 夾 內 網 頁 伺 服 器 。2. 學 生 亦 可 嘗 試 把 老 師 提 供 的 網 頁 index.htm 及 相 關 資 料 夾 上 載 到 其 他 網 頁 伺 服 器 。3. 學 生 可 嘗 試 把 資 料 夾 image 刪 除 並 觀 看 效 果 有 什 麼 不 同 。4. 學 生 可 嘗 試 把 上 載 的 網 頁 index.htm 改 為 其 他 名 稱 並 觀 看 效 果 有 什 麼 不 同 。

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 二 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 規 劃 網 站 的 架 構 圖 、 檔 案 位 置 及 檔 案 名 稱 , 並 預 先 在 硬 碟 中 建 立 相 對 的 資 料 夾 。2. 認 識 Dreanweaver CS3 的 網 頁 編 輯 視 窗 、 檔 案 面 板 、 工 具 列 和 屬 性 視 窗 。3. 每 次 利 用 Dreanweaver 編 寫 網 頁 , 都 必 須 定 義 「 本 地 資 訊 」, 否 則 完 成 的 作 品 將 來上 載 伺 服 器 後 , 網 頁 的 連 結 或 會 出 錯 。4. 按 所 製 作 網 頁 的 瀏 覽 對 象 而 設 定 瀏 覽 器 版 本 。5. 設 定 頁 面 屬 性 。6. 加 入 視 窗 標 題 。7. 新 增 文 字 : 鍵 入 、 複 製 和 貼 上 。8. 在 不 使 用 CSS 樣 式 表 的 情 況 下 格 式 化 文 字 ( 先 在 「 編 好 設 定 」 中 剔 除 CSS 選 項 )。9. 設 定 段 落 格 式 ( 置 中 、 靠 右 )。10. 設 定 分 段 (Enter) 及 斷 行 (Shift + Enter)。11. 插 入 及 修 改 水 平 線 。12. 插 入 常 用 特 殊 符 號 。13. 開 啟 瀏 覽 器 預 覽 網 頁 效 果 ( 可 按 快 捷 鍵 F12)。工 作 :1. 連 結 你 自 己 的 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex2"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex2" 為 本 地 網 站 。3. 在 本 地 網 站 新 增 網 頁 "index.htm", 並 把 它 設 為 首 頁 。4. 將 首 頁 的 底 色 設 定 為 "#FFCCCC"。5. 加 上 視 窗 標 題 "Ex2 (08-09)"。6. 在 第 一 行 加 入 校 名 及 斷 行 , 並 設 定 為 紅 色 , 大 小 為 7。7. 在 第 二 行 加 入 日 期 及 註 冊 商 標 符 號 ®, 並 設 定 為 藍 色 斜 體 , 大 小 為 6。8. 在 第 二 行 尾 部 分 段 , 然 後 把 第 一 及 第 二 行 的 內 容 置 中 。9. 在 第 三 行 加 入 一 條 水 平 線 , 設 定 水 平 線 高 度 為 6 像 素 、 寬 度 為 700 像 素 , 而 顏 色 則為 紅 色 。10. 進 入 本 校 網 站 , 把 「 本 月 消 息 」 中 的 三 個 消 息 複 製 , 然 後 貼 上 網 頁 "index.htm"。11. 完 成 後 把 檔 案 貯 存 。評 分 準 則 : 網 頁 底 色視 窗 標 題加 入 校 名 及 斷 行加 入 日 期 及 符 號段 落 置 中文 字 格 式水 平 線 格 式複 製 網 頁 文 字1 分1 分1 分1 分1 分1 分2 分1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 三 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 加 入 背 景 圖 片 。2. 插 入 圖 片 、 修 改 其 屬 性 及 加 上 註 解 ( 當 滑 鼠 移 在 圖 片 上 或 圖 片 下 載 不 到 時 顯 示 )。3. 直 接 在 Dreamweaver 中 為 圖 片 製 作 縮 圖 。4. 在 圖 片 上 加 入 超 連 結 , 連 往 另 一 個 網 頁 。5. 建 立 和 變 更 編 號 清 單 或 項 目 清 單 。6. 認 識 「 交 織 圖 」 或 「 低 解 析 圖 」 的 功 用 : 以 便 慢 速 瀏 覽 者 能 盡 早 看 到 圖 片 大 概 。工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex3"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex3" 為 本 地 網 站 。3. 在 本 地 網 站 的 根 目 錄 新 增 一 個 文 件 夾 "image", 把 老 師 的 檔 案 "bg.gif"、"tree.jpg"、"flower.jpg" 和 "butterfly.jpg" 放 在 "image" 內 。4. 在 本 地 網 站 的 根 目 錄 新 增 一 個 文 件 夾 "webpage", 在 "webpage" 內 新 增 三 個 網 頁 :"tree.htm"、"flower.htm" 和 "butterfly.htm"。5. 在 本 地 網 站 的 根 目 錄 新 增 一 個 網 頁 "index.htm"。6. 利 用 「 檔 案 總 管 」 複 製 "tree.jpg", 並 把 新 檔 案 命 名 為 "tree_s.jpg"。7. 開 啟 "tree.htm", 在 網 頁 中 插 入 圖 像 "tree.jpg", 並 加 上 註 解 "This is a tree."。8. 把 圖 像 裁 剪 成 400 × 300 的 解 像 度 , 並 在 圖 像 上 加 上 超 連 結 連 結 往 "index.htm", 然後 關 閉 "tree.htm"。9. 把 flower 和 butterfly 替 代 tree, 以 重 覆 步 驟 6 至 8。10. 開 啟 網 頁 "index.htm", 以 "bg.gif" 作 為 背 景 。11. 在 "index.htm" 中 分 別 插 入 "tree_s.jpg"、" flower_s.jpg" 及 " butterfly_s.jpg"。12. 利 用 屬 性 視 窗 中 的 「 重 新 取 樣 」 按 鈕 , 把 上 述 三 幅 圖 片 變 成 40 × 30 解 像 度 。13. 在 三 幅 縮 圖 上 分 別 加 入 超 連 結 連 結 往 "tree.htm"、"flower.htm" 和 "butterfly.htm "。14. 為 這 三 幅 縮 圖 套 用 編 號 清 單 。index.htmflower.htmtree.htm評 分 準 則 : 建 立 正 確 網 站 結 構 1 分複 製 圖 像 1 分加 入 網 頁 背 景 1 分插 入 圖 像 1 分加 入 註 解 1 分製 作 縮 圖 1 分製 作 超 連 結 2 分套 用 編 號 清 單 1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 四 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 利 用 無 框 表 格 為 網 頁 進 行 排 版 。2. 認 識 三 種 表 格 模 式 : 標 準 模 式 、 展開 表 格 模 式 及 版 面 模 式 。3. 能 建 立 簡 單 表 格 及 修 改 表 格 的 基 本屬 性 。4. 能 在 表 格 或 貯 存 格 內 建 立 背 景 影 像或 背 景 色 彩 。5. 懂 得 合 併 及 分 割 儲 存 格 。6. 懂 得 插 入 及 刪 除 欄 和 列 。工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex4"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex4" 為 本 地 網 站 。3. 在 本 地 網 站 的 根 目 錄 新 增 一 個 文 件 夾 "image", 把 老 師 的 檔 案 "grass.jpg" 及 "logo.gif"放 在 "image" 內 。4. 在 本 地 網 站 的 根 目 錄 新 增 一 個 網 頁 "index.htm"。5. 在 網 頁 內 建 立 下 列 巢 狀 式 表 格 :時間表Day 1 Day 2 Day 39:00-10:00Chinese English ChineseMs Chan 201 Mr Wong 201 Ms Chan 20110:00-10:30 RECESS10:30-11:30Mathematics Art PEMr Lee 201 Ms Liu 204 Mr Chu Hall6. 設 定 外 層 表 格 的 邊 框 為 0 點 , 表 格 背 景 為 "grass.jpg"。7. 設 定 內 層 表 格 的 背 景 顏 色 為 淺 黃 , 邊 框 為 藍 色 。8. 設 定 內 層 表 格 第 一 欄 的 欄 寬 為 100 像 素 、 老 師 名 欄 寬為 80 像 素 、 課 室 名 欄 寬 為 70 像 素 。9. 設 定 內 層 表 格 邊 框 為 3 點 、 間 距 為 1 點 、 內 距 為 2 點 。10. 完 成 後 把 檔 案 貯 存 。評 分 準 則 : 建 立 巢 狀 表 格 1 分正 確 表 格 結 構 2 分插 入 校 名 圖 像 1 分加 入 草 地 背 景 1 分淺 黃 背 景 + 藍 色 邊 框 1 分內 層 表 格 欄 寬 1 分邊 框 、 間 距 及 內 距 1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 五 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 認 識 各 類 超 連 結 : 外 部 URL、 內 部 檔 案 、 電 郵 連 結 、 錨 點 及 無 目 的 地 連 結 。2. 能 懂 得 建 立 上 述 所 有 連 結 。3. 能 控 制 網 頁 內 容 是 否 顯 示 在 不 同 視 窗 或 位 置 上 。4. 能 利 用 圖 像 編 輯 軟 件 簡 單 地 製 作 透 明 背 景 圖 像 。工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex5"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex5 為 本 地 網 站 。3. 把 老 師 的 檔 案 "index.htm" 及 文 件 夾 "image" 放 在 本 地 網 站 的 根 目 錄 內 。4. 開 啟 "index.htm", 加 入 視 窗 標 題 "Dictionary"。5. 為 上 層 表 格 加 入 背 景 色 彩 "#FFCC33"。6. 為 下 層 表 格 ( 包 含 文 字 ) 加 入 背 景 影 像 "bg.gif"。7. 在 上 層 表 格 的 各 個 空 格 內 依 次 從 左 至 右 插 入 圖 像 "a.gif" 至 "d.gif"。8. 在 下 層 表 格 適 當 位 置 加 上 錨 點 標 籤 , 並 在 圖 像 "a.gif" 至 "d.gif" 中 加 入 連 結 以 接 達 上述 錨 點 標 籤 。( 例 如 , 當 瀏 覽 者 按 B 字 圖 像 時 , 網 頁 便 會 跳 至 b 字 開 始 的 第 一 行 。)9. 在 book 圖 像 上 加 上 超 連 結 , 以 開 啟 一 個 新 視 窗 , 並 顯 示 facebook 網 站"http://www.facebook.com"。10. 在 電 郵 圖 像 上 加 入 電 郵 超 連 結 "mailto:primenumberhk@yahoo.com.hk"。11. 製 作 透 明 背 景 的 book.gif。評 分 準 則 : 表 格 背 景 色 彩 1 分表 格 背 景 影 像 1 分插 入 圖 像 1 分建 立 錨 點 1 分建 立 錨 點 連 結 1 分建 立 外 部 網 站 連 結 1 分開 啟 新 視 窗 1 分建 立 電 郵 連 結 1 分製 作 透 明 背 景 1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 六 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 認 識 使 用 CSS(Cascading Style Sheet) 樣 式 表 來 設 定 文 字 格 式 的 好 處 : 版 面 格 式 較 傳 統 HTML 標 籤 格 式 更 豐 富 和 美 觀 統 一 整 個 網 站 的 網 頁 格 式 只 需 修 改 樣 式 表 , 整 個 網 站 的 網 頁 便 會 自 動 更 新2. CSS 樣 式 表 分 為 內 部 樣 式 表 和 外 部 樣 式 表 : 內 部 樣 式 表 是 將 CSS 語 法 直 接 寫 在 置 於 網 頁 內 的 標 籤中 , 僅 供 該 網 頁 使 用 。外 部 樣 式 表 是 將 CSS 語 法 寫 在 一 個 樣 式 檔 ( 以 css 為 副 檔 名 的 文 字 檔 ) 中 。 這樣 , 任 何 網 站 中 的 網 頁 也 可 以 連 結 的 形 式 來 引 用 此 樣 式 表 。外 部 樣 式 表應 用 的 網 頁3. 建 立 外 部 CSS 樣 式 表 : 在 CSS 樣 式 面 板 中 按 滑 鼠 右 鍵 來 新 增 樣 式 表 。 選 取 「 類 別 」( 即 是 自 訂 的 樣 式 ), 並 鍵 入 樣 式 的 名 稱 。

另 存 樣 式 表 於 本 地 網 站 中 。 在 「 規 則 定 義 」 對 話 盒 中 , 設 定 各 分 類 的 屬 性 。Dreamweaver CS3 網 頁 編 寫 樣 式 建 立 好 後 ,CSS 樣 式 面 板 中 便 會 多 了 一 個 樣 式 檔 和 裝 載 著 的 樣 式 名 稱 。4. 「 選 取 器 類 型 」 還 有 其 他 兩 種 選 擇 : 「 標 籤 」 代 表 更 改 內 置 文 字 標 籤 的 樣 式 。 「 進 階 」 代 表 更 改 文 字 超 連 結 的 樣 式 。5. 利 用 CSS 樣 式 表 來 設 定 下 列 項 目 的 屬 性 : 背 景 圖 片 項 目 清 單 與 編 號 清 單 表 格6. 選 用 CSS 樣 式 表 。工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex6"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex6 為 本 地 網 站 。3. 把 老 師 的 檔 案 "index.htm"、"p1.htm" 及 文 件 夾 "image" 放 在 本 地 網 站 的 根 目 錄 內 。4. 開 啟 "index.htm", 新 增 樣 式 表 "ex6_style.css", 並 加 入 以 下 自 訂 樣 式 : 文 字 樣 式 "main_content":60 像 素 、 藍 色 、 粗 體 未 按 的 超 連 結 樣 式 :60 像 素 、 藍 色 、 無 底 線 按 過 的 超 連 結 樣 式 :72 像 素 、 黑 色 、 無 底 線 表 格 樣 式 : 雙 線 紅 色 外 框 , 淺 黃 色 背 景 以 "bg.gif" 作 背 景 , 並 設 定 為 重 覆 和 固 定5. 套 用 上 述 樣 式 表 至 所 有 網 頁 。6. 完 成 後 把 所 有 檔 案 貯 存 。評 分 準 則 : 建 立 樣 式 表"main_content" 樣 式未 按 超 連 結 樣 式按 過 超 連 結 樣 式表 格 樣 式背 景 樣 式套 用 樣 式 表1 分1 分1 分1 分1 分1 分1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 七 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 加 入 Flash 文 字 和 Flash 按 鈕 和 修 改 其 相 關 屬 性 。2. 加 入 Flash 影 片 和 修 改 其 相 關 屬 性 。3. 利 用 Flash 影 像 檢 視 器 來 製 作 投 影 片 播 放 效 果 。4. 利 用 外 掛 程 式 加 入 音 效 和 其 他 格 式 的 影 片 。工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex7"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex7" 為 本 地 網 站 。3. 把 老 師 的 文 件 夾 "image"、"flash" 及 "sound" 放 在 本 地 網 站 的 根 目 錄 內 。4. 在 根 目 錄 新 增 網 頁 "index.htm"。 開 啟 "index.htm", 在 第 一 行 加 入 Flash 文 字 :Exercise7。 設 定 Flash 文 字 的 大 小 為 100 點 , 顏 色 為 藍 色 轉 紅 色 。5. 在 第 二 行 插 入 一 個 背 景 是 黃 色 的 表 格 : 一 列 三 欄 。 從 左 至 右 分 別 在 方 格 內 放 置 三 個Flash 按 鈕 , 並 標 籤 為 :"Movie"、"Slide" 及 "Sound"。 按 鈕 式 樣 隨 你 所 定 , 按 鈕 背 景也 是 黃 色 , 大 小 則 為 160×40。 然 後 暫 時 關 閉 首 頁 。6. 新 增 "movie.htm", 加 入 Flash 影 片 "bee.swf", 把 影 片 大 小 設 定 為 400×400, 然 後 關閉 "movie.htm"。7. 新 增 "slide.htm", 加 入 Flash 影 像 檢 視 器 並 命 名 為 "show.swf", 把 影 像 檢 視 器 大 小 設定 為 400×300。 利 用 右 側 「Flash 元 素 」 視 窗 中 的 「imageURLs」 加 入 "p01.jpg"、"p02.jpg" 和"p03.jpg" 這 三 張 影 片 , 在 加 入 下 列 設 定 後 關 閉 " slide.htm"。 利 用 「imageCaptions」 為 上 述 照 片 分 別 加 入 文 字 說 明 :"HK Cultural Centre"、"New World Centre" 和 "HK Space Museum"。 利 用 「captionSize」 把 照 片 說 明 的 大 小 設 定 為 18 像 素 。 利 用 「slideDelay」 設 定 每 張 照 片 的 播 放 時 間 為 2 秒 。 利 用 「slideAutoPlay」 設 定 為 自 動 播 放 。 利 用 「slideLoop」 設 定 為 循 環 播 放 。8. 新 增 "sound.htm", 利 用 「 插 入 」→「 媒 體 」→「Plug-in」 加 入 一 個 音 效 播 放 面 板 來播 放 "s01.mp3", 把 面 板 大 小 設 定 為 400×45。 利 用 右 側 「 一 般 」 視 窗 中 的 「autostart」把 面 板 改 成 不 自 動 播 放 , 然 後 關 閉 "sound.htm"。9. 開 啟 "index.htm", 把 之 前 建 立 的 按 鈕 從 左 至 右 分 別 加 上 連 結 至 網 頁 " movie.htm"、"slide.htm" 和 " sound.htm"。10. 完 成 後 把 所 有 檔 案 貯 存 。評 分 準 則 : 建 立 Flash 文 字建 立 Flash 按 鈕建 立 Flash 影 片建 立 影 像 檢 視 器建 立 音 效 面 板建 立 按 鈕 連 結2 分2 分2 分3 分2 分1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 八 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 認 識 頁 框 的 功 用 。2. 認 識 頁 框 架 與 頁 框 網 頁 的 關 係 , 並 能 準 確 數 出 一 個 頁 框 網 頁 所 附 屬 的 網 頁 總 數 。3. 能 建 立 一 個 頁 框 架 , 並 正 確 載 入 起 始 網 頁 。4. 能 控 制 網 頁 內 容 顯 示 在 某 個 頁 框 上 。工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex8"。2. 在 文 件 夾 "ex8" 中 放 置 老 師 給 與 的 文 件 夾 "webpage" 及 "image"。3. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex8" 為 本 地 網 站 。4. 開 啟 放 置 主 要 內 容 的 "main.htm", 然 後 建 立 下 列 頁 框 架 結 構 :main.htm5. 在 位 置 (1) 內 載 入 導 覽 列 網 頁 "menu.htm"。6. 在 位 置 (2) 內 載 入 標 題 網 頁 "title.htm"。7. 把 整 個 頁 框 架 貯 存 為 "index.htm", 並 存 放 於 本 地 網 站 的 根 目 錄 中 。8. 利 用 圖 片 A1,A2,B1,…,E2 等 五 對 圖 片 在 網 頁 "menu.htm" 內 自 製 一 個 包 含 有 五 個 互換 圖 片 按 鈕 的 導 覽 列 :• 當 按 A 字 按 鈕 後 , 網 頁 "A.htm" 會 覆 蓋 在 右 下 角 的 位 置 上 。• 當 按 B 字 按 鈕 後 , 網 頁 "B.htm" 會 覆 蓋 在 位 置 (1) 上 。• 當 按 C 字 按 鈕 後 , 網 頁 "C.htm" 會 覆 蓋 在 位 置 (2) 上 。• 當 按 D 字 按 鈕 後 , 網 頁 "D.htm" 會 覆 蓋 在 整 個 原 有 視 窗 上 。• 當 按 E 字 按 鈕 後 , 網 頁 "E.htm" 會 覆 蓋 在 一 個 新 的 視 窗 上 。9. 完 成 後 把 所 有 檔 案 貯 存 。評 分 準 則 : 建 立 頁 框 架載 入 起 始 網 頁導 覽 列顯 示 在 正 確 位 置2 分1 分3 分2 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 九 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 加 入 背 景 音 樂 。2. 在 圖 像 上 加 入 影 像 地 圖 ( 圓 形 、 方 形 、 不 規 則 形 狀 )。3. 設 定 重 新 整 理 及 自 動 轉 頁 。( 可 以 利 用 這 技 巧 定 時 顯 示 最 新 資 訊 )工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex9"。2. 在 資 料 夾 "ex9" 中 放 置 老 師 給 與 的 資 料 夾 "image"、"sound" 及 網 頁 "index.htm"。3. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex9 為 本 地 網 站 。4. 開 啟 "index.htm", 並 加 上 背 景 音 樂 "bg.mid"。[ 把 此 句 標 籤 放 入 之 後 ]5. 在 地 圖 上 為 下 列 每 一 間 學 校 繪 製 一 幅 不 規 則 形 狀 的 影 像 地 圖 , 對 應 的 超 連 結 會 在 新視 窗 上 顯 示 相 關 的 學 校 網 頁 :學 校 名 稱學 校 網 址佛 教 志 蓮 中 學真 鐸 學 校佛 教 孔 仙 洲 紀 念 中 學培 敦 中 學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 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )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 分

Dreamweaver CS3 網 頁 編 寫電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 十 一 )姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 建 立 可 轉 換 圖 像 的 導 覽 列 。2. 建 立 spry 下 拉 式 選 單 列 。3. 開 啟 css 樣 式 表 , 並 參 考 「 自 訂 這 個 Widget」 或 下 表 來 修 改 選 單 列 屬 性 。修 改 項 目 相 關 CSS 標 籤 名 稱 相 關 屬 性 名 稱主 選 單 顯 示 範 圍 的 寬 度 ul.MenuBarHorizontal width主 選 單 內 每 一 方 格 的 寬 度 ul.MenuBarHorizontal li width子 選 單 顯 示 範 圍 的 寬 度 ul.MenuBarHorizontal ul width子 選 單 內 每 一 方 格 的 寬 度 ul.MenuBarHorizontal ul li width主 選 單 邊 框 寬 度 ul.MenuBarHorizontal li border子 選 單 邊 框 寬 度 ul.MenuBarHorizontal ul li border主 選 單 內 容 靠 攏 方 向 ul.MenuBarHorizontal li text-align子 選 單 內 容 靠 攏 方 向 ul.MenuBarHorizontal ul li text-align選 單 的 字 體 款 式 ( 細 明 體 ) ul.MenuBarHorizontal a font-family選 單 的 字 體 大 小 ul.MenuBarHorizontal a font-size選 單 的 字 體 式 樣 ( 粗 、 斜 ) ul.MenuBarHorizontal a font-style選 單 的 字 體 顏 色 ul.MenuBarHorizontal a color選 單 的 方 格 背 景 顏 色 ul.MenuBarHorizontal a background-color揀 選 中 之 方 格 的 字 體 款 式 ul.MenuBarHorizontal a:hover font-family揀 選 中 之 方 格 的 字 體 大 小 ul.MenuBarHorizontal a:hover font-size揀 選 中 之 方 格 的 字 體 式 樣 ul.MenuBarHorizontal a:hover font-style揀 選 中 之 方 格 的 字 體 顏 色 ul.MenuBarHorizontal a:hover color揀 選 中 之 方 格 的 方 格 背 景 顏 色 ul.MenuBarHorizontal a:hover background-color( 附 註 : 若 子 選 單 的 某 項 屬 性 未 被 設 定 的 話 , 則 會 以 主 選 單 的 同 一 項 屬 性 來 顯 示 。)工 作 :1. 連 結 你 自 己 的 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex11"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex11" 為 本 地 網 站 。3. 在 資 料 夾 "ex11/image" 中 放 置 老 師 給 與 的 圖 像 。4. 在 本 地 網 站 根 目 錄 位 置 新 增 網 頁 "index.htm"。5. 建 立 一 個 有 三 個 按 鈕 的 水 平 導 覽 列 , 起 始 圖 像 是 黑 白 的 , 當 被 揀 選 時 則 呈 現 彩 色 。6. 把 導 覽 列 的 第 一 個 按 鈕 連 結 至 本 校 網 站 。

7. 根 據 下 表 建 立 一 個 雙 層 的 選 單 列 :Dreamweaver CS3 網 頁 編 寫主 選 項 : 中 一 級 中 二 級 中 三 級 中 四 級 中 五 級子 選 項 : 1A 2A 3A 4A 5A1B 2B 3B 4B 5B1C 2C 3C1D 2D 3D8. 以 下 列 標 準 來 修 改 選 單 列 屬 性 :• 主 選 單 的 顯 示 範 圍 為 520 像 素• 主 選 單 方 格 的 寬 度 為 100 像 素• 子 選 單 的 顯 示 範 圍 為 62 像 素• 子 選 單 方 格 的 寬 度 為 60 像 素• 選 單 外 緣 為 2 像 素 的 紅 色 邊• 選 單 的 背 景 顏 色 為 天 藍 色 , 而 文 字 則 為 黑 色 。• 揀 選 中 之 方 格 的 背 景 顏 色 為 深 綠 色 , 而 文 字 則 為 白 色 。• 選 單 的 字 體 大 小 為 20 像 素• 選 單 的 字 體 式 樣 為 斜 體9. 完 成 後 把 所 有 檔 案 貯 存 。評 分 準 則 : 建 立 導 覽 列 2 分建 立 導 覽 按 鈕 連 結 1 分建 立 選 單 列 2 分顯 示 範 圍 寬 度 1 分主 選 單 方 格 寬 度 1 分子 選 單 方 格 寬 度 1 分子 選 單 的 出 現 範 圍 1 分選 單 外 緣 1 分未 選 背 景 文 字 顏 色 1 分揀 選 背 景 文 字 顏 色 1 分字 體 大 小 1 分字 體 式 樣 1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 十 二 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 建 立 spry 標 籤 面 板 , 並 能 修 改 標 籤 面 板 的 屬 性 :常 用 屬 性 :相 關 項 目TabbedPanels整 個 面 板TabbedPanelsTab標 籤TabbedPanelsTabHover 滑 鼠 在 上 的 標 籤TabbedPanelsTabSelected 被 揀 選 的 標 籤TabbedPanelsContent面 板 內 容( 附 註 : 可 依 據 類 似 選 單 列 的 形 式 , 新 增 或 修 改 上 述 各 項 屬 性 。)2. 建 立 spry 可 收 合 面 板 , 並 能 修 改 標 籤 面 板 的 屬 性 :常 用 屬 性 :CollapsiblePanelCollapsiblePanelTabCollapsiblePanelContent相 關 項 目整 個 面 板 及 其 內 容標 籤底 板 內 容3. 建 立 spry 折 疊 式 面 板 , 並 能 修 改 標 籤 面 板 的 屬 性 :常 用 屬 性 :AccordionAccordionPanelAccordionPanelTabAccordionPanelContent相 關 項 目整 個 面 板 的 出 現 範 圍整 個 面 板面 板 標 籤面 板 內 容4. spry 物 件 ( 例 如 下 拉 式 選 單 列 ) 不 適 宜 與 頁 框 共 用 。工 作 :1. 連 結 你 自 己 的 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex12"。2. 開 啟 Dreamweaver, 定 義 文 件 夾 "ex12" 為 本 地 網 站 。3. 在 本 地 網 站 新 增 網 頁 "index.htm"。4. 建 立 一 個 標 籤 面 板 以 介 紹 兩 種 不 同 的 東 西 ( 例 如 生 果 / 卡 通 人 物 / 電 影 )。5. 修 改 標 籤 面 板 的 屬 性 :• 整 個 面 板 的 寬 度 為 500 像 素• 標 籤 為 淺 綠 底 黑 字 , 被 揀 選 的 標 籤 則 為 粉 紅 底 藍 字 黃 邊• 面 板 為 黑 底 白 字 白 邊6. 建 立 一 個 折 疊 式 面 板 / 可 收 合 面 板 ( 兩 者 選 一 ), 內 容 同 上 , 並 修 改 它 的 屬 性 :• 整 個 面 板 的 寬 度 為 400 像 素• 面 板 標 籤 為 淺 綠 底 黑 字評 分 準 則 : 建 立 標 籤 面 板 1 分• 內 容 為 藍 底 紅 字標 籤 面 板 寬 度 1 分標 籤 及 面 板 顏 色 2 分7. 完 成 後 把 所 有 檔 案 貯 存 。建 立 其 他 面 板 1 分面 板 寬 度 1 分內 容 顏 色 1 分

電 腦 與 資 訊 科 技 ( 工 作 紙 )Dreamweaver CS3 網 頁 編 寫 ( 十 三 )Dreamweaver CS3 網 頁 編 寫姓 名 ______________________ 班 別 ________( )學 習 重 點 :1. 認 識 表 單 的 作 用 。2. 能 建 立 不 同 的 表 單 物 件 , 包 括 (1) 按 鈕 、(2) 文 字 框 、(3) 文 字 區 、(4) 選 項 按 鈕 、(5) 核取 方 塊 及 (6) 選 單 。3. 能 透 過 修 改 表 單 標 籤 中 的 ACTION 來 控 制 送 出 表 單 後 接 著 會 執 行 的 事 情 。4. 能 透 過 修 改 表 單 標 籤 中 的 METHOD 來 控 制 傳 送 數 據 時 所 採 用 的 方 法 。工 作 :1. 連 結 AeroDrive 硬 碟 , 在 文 件 夾 "public_html" 中 建 立 一 個 文 件 夾 "ex13"。2. 定 義 文 件 夾 "ex13" 為 本 地 網 站 。3. 在 根 目 錄 新 增 網 頁 "index.htm" 及 "1.htm"。4. 開 啟 "index.htm", 製 作 一 份 帳 戶 登 記 表 單 , 內 容 必 須 包 括 :• 一 個 30 字 長 度 的 文 字 框 ( 變 數 NAME) 來 收 集 登 記 人 姓 名 。• 一 個 30 字 長 度 的 文 字 框 ( 變 數 LOGIN) 來 登 記 帳 戶 名 稱 。• 一 個 8 字 長 度 的 密 碼 文 字 框 ( 變 數 PASS1) 要 求 瀏 覽 者 輸 入 密 碼 。• 一 個 8 字 長 度 的 密 碼 文 字 框 ( 變 數 PASS2) 要 求 瀏 覽 者 再 次 輸 入 密 碼 。• 一 個 多 行 的 文 字 區 ( 變 數 ADDRESS) 來 收 集 登 記 人 地 址 , 地 址 的 初 始 值 為 「 請 輸入 詳 細 地 址 」。• 一 個 選 項 按 鈕 ( 變 數 DISTRICT) 來 收 集 登 記 人 的 居 住 區 域 , 選 擇 範 圍 需 包 括 香港 、 九 龍 及 新 界 。• 一 個 選 擇 列 表 ( 變 數 SEX) 來 收 集 登 記 人 的 性 別 , 選 擇 範 圍 需 包 括 空 白 、 男 及 女 。• 三 個 核 取 方 塊 來 收 集 登 記 人 的 服 務 要 求 , 當 中 包 括 :(1) 視 像 會 議 ( 變 數 SERVICE1)(2) 寬 頻 電 視 ( 變 數 SERVICE2)(3) 寬 頻 上 網 ( 變 數 SERVICE3)5. 表 單 的 末 端 需 包 含 有 兩 個 按 鈕 , 分 別 為 「 重 設 資 料 」 及 「 送 出 資 料 」。 資 料 應 以 GET的 形 式 送 出 至 檔 案 "1.htm"。6. 完 成 後 把 所 有 檔 案 貯 存 。評 分 準 則 : 文 字 框密 碼 文 字 框文 字 區選 擇 列 表選 項 按 鈕核 取 方 塊按 鈕資 料 送 出 方 式1 分1 分1 分1 分1 分1 分1 分1 分