Dreamweaver 8 初 階
目 錄 第 一 部 分 : 新 功 能 概 述... 1 一 工 作 流 程 的 改 進... 1 1. 放 大 工 具... 1 2. 輔 助 線... 2 3. Flash 視 頻 的 支 援... 2 二 擴 展 的 CSS 支 持... 3 三 檔 傳 輸 功 能... 4 四 支 持 XML/XSLT... 4 第 二 部 分 : 實 例 講 解... 5 一 建 立 站 點... 5 二 設 計 首 頁... 6 1. 輔 助 線 的 使 用... 7 2. 背 景 設 置 的 新 功 能... 9 3. 放 大 功 能 的 使 用... 11 4.Flash 視 頻 的 支 持... 12 5. 擴 展 的 CSS 支 持... 13 6. 代 碼 折 疊 功 能... 15 7. 後 台 文 件 傳 輸... 17 8. 關 於 時 間 軸... 18
第 一 部 分 : 新 功 能 概 述 和 Macromedia Studio 8 套 件 中 其 他 軟 體 一 樣, Dreamweaver 8 也 增 加 了 許 多 讓 我 們 欣 喜 不 已 的 新 功 能, 比 如 : 更 加 先 進 的 工 作 流 程 重 新 設 計 的 CSS 工 具 改 良 後 的 後 臺 FTP 轉 換 XML 檔 的 工 具 文 檔 放 大 功 能 插 入 Flash 視 頻 和 FlashPaper 代 碼 折 疊 功 能 等 等 今 天 我 們 先 對 Dreamweaver 8 的 新 功 能 進 行 簡 單 的 介 紹 一 工 作 流 程 的 改 進 工 作 流 程 的 改 進 可 以 提 高 網 頁 設 計 師 的 工 作 效 率, 比 如 將 所 有 打 開 的 文 檔 放 置 在 一 個 面 板 中, 只 需 點 選 文 檔 標 籤 就 互 相 切 換 文 檔 另 外, 我 們 還 可 以 將 面 板 的 排 列 保 存 為 Workspace layout ( 工 作 區 佈 局 ), 以 適 應 不 同 網 頁 的 設 計 需 要 除 了 上 述 功 能 以 外,Dreamweaver 8 還 提 供 了 以 下 的 新 功 能 : 還 提 供 了 以 下 的 新 功 能 : 除 了 上 述 功 能 以 外,Dreamweaver8 1. 放 大 工 具 使 用 放 大 工 具 可 以 幫 助 我 們 更 容 易 地 對 齊 圖 像 選 擇 較 小 的 物 件 以 及 查 看 較 小 的 文 本 1
2. 輔 助 線 拖 動 頁 面 垂 直 或 水 準 方 向 的 輔 助 線 可 以 更 精 確 地 定 位 物 件 的 位 置 3. Flash 視 頻 的 支 援 現 在 我 們 可 以 直 接 在 Dreamweaver8 中 插 入 Flash 視 頻 檔 了, 就 像 類 似 VCR 一 樣 的 控 制 方 式 一 樣 控 制 Flash 視 頻 檔 2
二 擴 展 的 CSS 支 持 Dreamweaver 8 在 CSS 方 面 同 樣 也 提 供 了 更 強 的 支 援, 增 強 了 複 雜 樣 式 表 資 訊 的 顯 示 CSS 面 板 現 在 完 全 重 新 設 計 為 一 個 統 一 的 面 板, 將 Dreamweaver MX 2004 的 眾 多 CSS 面 板 集 中 到 了 一 個 位 置 我 們 還 可 以 使 用 新 增 的 視 覺 化 設 置 功 能 來 幫 助 我 們 查 看 複 雜 的 CSS 佈 局 3
在 CSS 面 板 中 新 增 加 入 了 一 個 摘 要 視 圖, 有 助 於 我 們 快 速 確 認 應 用 於 當 前 選 定 元 素 的 CSS 屬 性 三 檔 傳 輸 功 能 在 使 用 Dreamweaver 8 以 前 的 版 本 向 伺 服 器 傳 送 檔 時, 用 戶 不 能 在 Dreamweaver 中 進 行 其 他 工 作, 現 在 好 了, 新 版 的 Dreamweaver 允 許 我 們 在 傳 輸 檔 的 同 時, 可 以 進 行 其 他 工 作, 這 樣 可 以 大 大 提 高 工 作 效 率 四 支 持 XML/XSLT 新 的 XML/XSLT 創 作 功 能 簡 化 了 用 於 Web 流 覽 的 XML 檔 的 格 式 化 過 程 我 們 可 以 創 建 XSLT 檔, 並 完 全 使 用 CSS 格 式, 將 其 轉 換 成 難 於 理 解 的 XML 檔, 可 以 附 加 到 本 地 檔 中, 也 可 以 附 近 互 聯 網 的 遠 端 檔 4
第 二 部 分 : 實 例 講 解 一 建 立 站 點 1. 啟 動 Dreamweaver 8; 2. 執 行 站 點 新 建 站 點 功 能 表 命 令, 彈 出 的 對 話 方 塊 ; 3. 方 塊 中 點 選 高 級 選 項 版 ; 4. 在 本 地 資 訊 中 設 置 站 點 名 稱 和 本 地 根 檔 夾, 然 後 設 置 遠 端 資 訊 這 些 功 能 和 Dreamweaver 2004 相 比 基 本 沒 有 太 大 變 化, 只 是 其 中 多 了 一 個 維 護 同 步 資 訊 的 選 項, 當 我 們 製 作 完 成 網 頁 以 後, 會 同 步 更 新 到 伺 服 器 上, 這 樣 可 以 確 保 網 站 上 的 內 容 總 是 最 新 的 伺 服 器 的 資 訊 一 定 要 設 置 正 確, 否 則 在 後 面 登 陸 更 新 伺 服 器 的 時 候 會 出 現 錯 誤
二 設 計 首 頁 站 點 建 立 完 畢 以 後, 就 可 以 設 計 首 頁 了 1. 軟 體 的 啟 動 對 話 方 塊, 在 創 建 新 專 案 裏 多 了 XML/XSLT 兩 個 選 項 2. 將 XML 轉 換 為 HTML, 是 目 前 XSLT 最 主 要 的 功 能 選 擇 創 建 XSLT( 整 頁 ) 新 項 目 以 後, 彈 出 對 話 方 塊 3. 方 塊 詢 問 如 何 定 位 XML 源, 可 以 選 擇 附 加 我 的 電 腦 或 局 域 網 上 的 本 地 檔 或 附 加 互 聯 網 上 的 遠 端 檔 關 於 XML, 大 家 可 能 都 比 較 熟 悉 了, 而 XSLT 則 是 XML 家 族 的 另 一 種 語 言, 它 類 似 HTML 中 的 CSS, 但 是 比 CSS 功 能 要 強 大 的 多 它 更 偏 向 是 一 種 程 式 語 言, 但 沒 有 常 見 程 式 語 言 複 雜, 甚 至 比 js 等 腳 本 語 言 還 簡 單 6
在 Dreamweaver8 中 還 提 供 了 一 個 新 的 創 建 範 例 集 Starter Pages, 我 們 可 以 從 中 選 擇 自 己 需 要 設 計 的 風 格 類 型 1. 輔 助 線 的 使 用 1. 我 們 選 擇 基 本 頁 的 HTML 文 檔 2. 點 選 創 建 按 鈕, 進 入 空 白 文 檔 的 編 輯 頁 面 首 先 你 會 發 現 在 文 檔 周 圍 默 認 有 尺 規 出 現, 在 Dreamweaver 2004 中 雖 然 也 有 尺 規 功 能, 但 是 在 使 用 的 過 程 中 實 際 用 途 並 不 大, 現 在 結 合 Dreamweaver8 新 提 供 的 輔 助 線 ( 圖 中 綠 線 所 示 ) 可 以 更 方 便 地 確 定 網 頁 元 素 的 位 置 或 大 小 了 3. 執 行 查 看 / 輔 助 線 功 能 表 命 令, 你 會 看 到 如 圖 所 示 的 輔 助 線 控 制 功 能 表 7
4. 確 定 已 經 勾 選 了 顯 示 輔 助 線 選 項 ; 5. 然 後 在 文 檔 的 尺 規 上 縱 向 或 橫 向 拖 動 滑 鼠 就 會 顯 示 出 默 認 的 綠 色 輔 助 線 當 然 還 可 以 選 擇 功 能 表 中 的 640 480, 默 認 等 選 項, 以 生 成 適 合 相 應 頁 面 大 小 的 輔 助 線 6. 將 滑 鼠 指 標 移 動 到 輔 助 線 分 割 的 方 格 中, 然 後 按 Ctrl 鍵, 可 以 顯 示 此 方 格 的 高 度 和 寬 度 7. 執 行 查 看 輔 助 線 功 能 表 命 令, 開 啟 方 塊 8. 方 塊 中 : 鎖 定 輔 助 線, 點 選 鎖 定 輔 助 線 選 中 靠 齊 輔 助 線 選 項, 在 網 頁 中 插 入 元 素 時, 會 自 動 貼 近 輔 助 線 選 中 輔 助 線 靠 近 元 素, 則 拖 動 輔 助 線 時 會 自 動 貼 近 網 頁 中 的 元 素 要 刪 除 一 條 輔 助 線, 可 以 拖 動 它 到 網 頁 的 頂 部 或 左 側 就 會 自 動 消 失 ; 而 要 刪 除 所 有 輔 助 線, 可 以 執 行 查 看 輔 助 線 清 除 輔 助 線 功 能 表 命 令 8
2. 背 景 設 置 的 新 功 能 1. 執 行 修 改 頁 面 屬 性 ( 快 捷 鍵 Ctrl+J) 功 能 表 命 令, 彈 出 頁 面 屬 性 對 話 方 塊 ; 2. 方 塊 中, 點 選 背 景 圖 像 後 的 流 覽 按 鈕, 找 到 一 幅 圖 片 作 為 網 頁 的 背 景, 然 後 來 看 看 四 種 不 同 選 項 所 帶 來 的 不 同 背 景 圖 像 3. 在 外 觀 分 類 中 會 發 現 背 景 圖 像 的 下 方 多 了 一 個 Repeat 選 項, 可 以 選 擇 no-repeat repeat repeat-x repeat-y 首 先 選 擇 no-repeat 選 項, 它 的 含 義 是 背 景 圖 片 不 重 複 顯 示, 只 顯 示 圖 像 的 原 始 大 小, 而 且 只 顯 示 一 次 如 果 選 中 repeat 選 項, 則 會 在 x 和 y 方 向 重 複 顯 示 背 景 圖 像, 就 和 以 前 的 老 版 本 中 一 樣 9
如 果 選 中 repeat-x 選 項, 則 會 在 x 軸 方 向 重 複 顯 示 背 景 圖 像 如 果 選 中 repeat-y 選 項, 則 會 在 y 軸 方 向 重 複 顯 示 背 景 圖 像 設 置 標 題 文 字, 然 後 選 擇 一 種 合 適 的 圖 片 作 為 背 景 圖 像 10
3. 放 大 功 能 的 使 用 1. 插 入 一 個 符 合 要 求 的 表 格, 然 後 分 別 在 單 格 中 插 入 在 圖 像 處 理 軟 體 處 理 好 的 相 應 圖 像 2. 在 下 方 的 工 具 欄 上 有 三 個 按 鈕, 分 別 為 箭 頭 選 擇 工 具 抓 手 移 動 工 具 和 縮 放 工 具 使 用 縮 放 工 具 可 以 讓 我 們 更 方 便 地 對 齊 圖 像 選 擇 較 小 的 對 像 以 及 查 看 較 小 的 文 本 3. 也 可 以 直 接 在 縮 放 工 具 後 面 的 選 框 中 選 擇 合 適 的 放 大 或 縮 小 比 例, 另 外 還 可 以 選 擇 複 合 所 選 符 合 全 部 符 合 寬 度 11
4.Flash 視 頻 的 支 持 在 Dreamweaver8 中 提 供 了 對 Flash 視 頻 的 支 援, 我 們 可 以 直 接 插 入 Flash 視 頻 檔 繼 續 在 剛 才 的 檔 中 操 作 1. 執 行 插 入 媒 體 Flash Video 功 能 表 命 令, 彈 出 Insert Flash Video 對 話 方 塊 2. 在 Video Type 中 可 以 選 擇 Progressive Download Video ( 下 載 視 頻 ) 或 者 Streaming Video ( 流 媒 體 格 式 視 頻 ) 兩 種 選 項 如 選 第 一 個 選 項, 可 以 直 接 在 URL 位 址 欄 裏 輸 入 視 頻 檔 的 位 址 ; 如 選 擇 了 流 媒 體 格 式 的 視 頻 檔, 則 需 要 輸 入 Server URL 位 址, 以 rtmp:// 格 式 開 頭, 並 且 在 Sream name 中 輸 入 流 媒 體 的 檔 案 名 3. 在 Skin 選 項 中 選 擇 播 放 器 的 外 觀 形 狀 ; 4. 在 Width 中 輸 入 寬 度 大 小 ; 5. 在 Height 中 輸 入 高 度 大 小 ; 6. 選 中 Constrain 選 項, 則 會 鎖 定 寬 度 和 高 度 的 比 例 ; 7. 選 中 Auto play 選 項, 打 開 網 頁 時 會 直 接 播 放 視 頻 檔 ; 8. 選 中 Auto rewind 選 項 則 允 許 重 複 播 放 視 頻 9. 在 網 頁 中 插 入 Flash 視 頻 後, 仍 能 繼 續 修 改 視 頻 檔 的 屬 性, 只 需 點 選 該 檔, 就 會 在 屬 性 面 板 中 出 現 相 應 的 選 項 12
5. 擴 展 的 CSS 支 持 統 一 面 板 新 的 CSS 面 板 完 全 設 計 成 了 一 個 統 一 的 面 板, 我 們 在 此 面 板 中 可 以 快 速 確 認 樣 式 編 輯 樣 式 查 看 應 用 於 頁 面 元 素 的 樣 式 1. 點 選 添 加 屬 性, 可 以 直 接 輸 入 樣 式 屬 性, 比 如 我 輸 入 Color, 然 後 在 後 面 的 顏 色 選 擇 器 中 選 擇 一 種 顏 色 就 可 以 了 2. 當 然 其 他 CSS 屬 性 也 可 以 直 接 在 這 裏 輸 入, 這 比 起 以 前 要 反 復 修 改 網 頁 代 碼 真 是 方 便 了 不 少 3. 點 選 CSS 面 板 中 的 Current 按 鈕, 可 以 顯 示 當 前 所 選 中 內 容 的 CSS 摘 要, 而 與 所 選 內 容 無 關 的 CSS 會 以 刪 除 線 的 形 式 出 現 這 個 功 能 對 我 們 快 速 確 認 應 用 於 當 前 選 定 元 素 的 CSS 屬 性 十 分 有 幫 助, 在 列 表 中 可 以 方 便 地 查 看 哪 種 樣 式 中 的 哪 種 屬 性 被 應 用 到 當 前 選 中 的 元 素 新 的 CSS 控 制 面 板 可 以 使 我 們 從 複 雜 的 多 種 CSS 樣 式 中 解 脫 出 來, 從 而 輕 鬆 完 成 一 個 網 頁 的 內 容 格 式 化 13
視 覺 化 助 理 1. 執 行 查 看 視 覺 化 助 理 功 能 表 命 令, 會 發 現 多 了 CSS Layout Backgrounds CSS Layout Box Model CSS Layout Outlines 三 個 選 項, 分 別 為 背 景 模 式 框 模 式 和 外 形 輪 廓 模 式 顯 示 CSS 樣 式 效 果 樣 式 呈 現 工 具 欄 使 用 這 個 新 功 能 我 們 可 以 為 不 同 的 媒 體 類 型 進 行 設 計, 比 如 螢 幕 手 持 設 備 列 印 輸 出 設 備 電 視 設 備 投 影 設 備 等 等 當 我 們 將 外 部 樣 式 表 附 加 到 文 檔 中 時 可 以 指 定 樣 式 表 的 類 型, 下 面 是 建 立 好 的 三 個 樣 式 表 檔, 分 別 應 用 於 螢 幕 列 印 設 備 和 電 視, 並 已 被 鏈 結 到 網 頁 中 <link href="css/level1_arial.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/level2_arial.css" rel="stylesheet" type="text/css" media="print" /> <link href="css/level3_arial.css" rel="stylesheet" type="text/css" media="tv" /> 1. 在 工 具 欄 上 點 選 滑 鼠 右 鍵, 選 中 樣 式 呈 現 選 項, 就 會 在 工 具 欄 下 方 出 現 樣 式 呈 現 的 各 個 按 鈕 每 一 個 按 鈕 都 有 自 己 不 同 的 用 途, 從 左 到 右 依 次 為 螢 幕 列 印 手 持 設 備 投 影 設 備 TTY TV 和 打 開 / 關 閉 CSS 2. 點 選 不 同 的 按 鈕, 可 以 啟 動 相 應 的 媒 體 類 型, 與 之 相 關 的 CSS 檔 就 被 載 入 14
6. 代 碼 折 疊 功 能 我 們 再 來 看 看 新 的 代 碼 折 疊 功 能, 如 果 你 經 常 編 寫 HTML 代 碼, 你 可 能 對 足 足 幾 頁 的 代 碼 不 會 陌 生, 讓 你 去 找 代 碼 中 的 某 一 行, 翻 來 覆 去 地 拖 動 捲 軸, 這 的 確 是 一 項 煩 人 的 工 作 在 Dreamweaver 8 中 已 經 解 決 了 這 個 問 題, 我 們 只 需 通 過 編 輯 器 左 邊 的 加 號 和 減 號 就 可 以 輕 易 找 到 並 控 制 相 關 的 代 碼 了 1. 打 開 我 們 製 作 的 主 頁, 點 選 Code 按 鈕, 切 換 到 代 碼 視 圖 中 在 代 碼 視 圖 中 拖 動 滑 鼠 選 中 一 段 代 碼, 代 碼 的 左 側 會 出 現 兩 個 減 號 把 這 段 代 碼 包 含 到 一 起 15
2. 點 選 折 疊 整 個 標 籤 按 鈕, 會 將 此 段 代 碼 折 疊 到 一 起,( 按 住 Alt 鍵 的 同 時 點 選 此 按 鈕, 可 以 折 疊 外 部 標 籤 ) 3. 如 果 選 中 代 碼 的 同 時, 點 選 折 疊 所 選 按 鈕, 也 可 以 將 代 碼 折 疊, 我 們 用 到 這 個 按 鈕 的 時 候 比 較 多 ( 按 住 Alt 鍵 的 同 時 點 選 此 按 鈕, 可 以 折 疊 外 部 所 選 ) 4. 在 折 疊 代 碼 以 後, 如 果 想 要 展 開 被 折 疊 的 代 碼, 可 以 點 選 展 開 全 部 按 鈕, 這 樣 就 會 將 所 有 折 疊 到 一 起 的 代 碼 展 開 關 於 代 碼 的 折 疊 和 展 開, 還 有 一 個 更 簡 便 的 方 法, 就 是 在 選 中 代 碼 以 後, 直 接 點 選 代 碼 段 前 的 減 號 就 可 以 折 疊 代 碼, 點 選 加 號 則 可 以 展 開 代 碼, 怎 麼 樣, 這 個 功 能 對 經 常 寫 代 碼 的 朋 友 來 說 是 不 是 很 得 心 應 手 啊! 16
7. 後 台 文 件 傳 輸 在 以 前 版 本 的 Dreamweaver 中, 相 信 使 用 它 的 Ftp 傳 輸 工 具 的 人 並 不 多, 因 為 它 實 在 是 太 浪 費 時 間 了 如 果 你 要 上 傳 檔 到 伺 服 器 中, 就 只 能 眼 巴 巴 地 看 著 它 上 傳 檔, 你 卻 不 能 使 用 Dreamweaver 來 設 計 其 他 檔, 所 以, 很 多 朋 友 都 選 擇 了 使 用 其 他 專 業 的 Ftp 上 傳 工 具 來 更 新 自 己 的 網 站 1. 點 選 右 側 的 展 開 以 顯 示 本 地 和 遠 端 站 點 按 鈕, 切 換 到 站 點 視 圖 中 在 窗 口 的 左 側 是 遠 端 站 點 檔, 也 就 是 網 站 伺 服 器 的 檔, 右 側 就 是 本 地 站 點 檔 了 2. 選 擇 要 上 傳 的 檔, 然 後 點 選 右 鍵, 選 擇 上 傳, 此 時 系 統 會 提 示 是 否 上 傳 相 關 檔 3. 如 果 你 在 網 頁 修 改 過 程 中 改 動 了 與 本 網 頁 有 關 的 內 容, 並 且 需 要 同 時 更 新 的 話, 可 以 點 選 是 按 鈕,Dreamweaver 8 會 自 動 搜 尋 與 上 傳 檔 相 關 的 一 切 內 容, 比 如 圖 片 flash 其 他 網 頁 等 等, 然 後 上 傳 到 遠 端 站 點 中 在 上 傳 檔 的 同 時, 你 完 全 可 以 不 去 理 會 後 臺 檔 的 上 傳, 繼 續 在 Dreamweaver 中 做 其 他 工 作, 這 樣 可 以 節 約 很 多 時 間 17
4. 另 外, 在 製 作 好 了 一 個 網 頁 的 時 候, 可 以 選 擇 直 接 保 存 到 遠 端 伺 服 器, 只 需 要 執 行 檔 案 保 存 到 遠 端 伺 服 器 功 能 表 命 令 即 可, 前 提 是 你 必 須 正 確 設 置 了 網 址 的 Ftp 資 訊 5. 系 統 會 彈 出 保 存 檔 對 話 方 塊 系 統 會 彈 出 保 存 檔 對 話 框 6. 點 選 保 存 按 鈕, 將 檔 直 接 保 存 到 伺 服 器 的 相 應 目 錄 中 就 完 成 了 檔 的 上 傳 8. 關 於 時 間 軸 1. 新 建 一 個 網 頁 檔, 繪 製 一 個 層, 然 後 在 層 中 插 入 一 幅 圖 片, 並 在 層 上 點 選 滑 鼠 右 鍵, 選 擇 添 加 到 時 間 軸 選 項 2. 如 果 你 的 系 統 沒 有 打 開 時 間 軸 面 板, 可 以 執 行 視 窗 時 間 軸 功 能 表 命 令, 打 開 時 間 軸 面 板 18
將 層 添 加 到 時 間 軸 以 後, 會 自 動 在 層 中 顯 示 一 段 藍 色 的 矩 形 塊 拖 動 矩 形 塊 前 後 的 兩 個 白 色 圓 點, 可 以 改 變 時 間 軸 的 長 度, 也 可 以 直 接 在 圖 38 中 所 示 的 紅 色 框 中 輸 入 幀 的 數 值,Fps 為 幀 頻 速 率 3. 選 中 圖 層, 然 後 執 行 修 改 時 間 軸 錄 製 層 路 徑 功 能 表 命 令, 系 統 會 自 動 記 錄 下 我 們 拖 動 層 時 的 運 動 軌 跡 好 了, 現 在 選 中 時 間 軸 中 的 後 面 一 個 關 鍵 幀, 在 頁 面 中 拖 動 層, 系 統 會 記 錄 下 層 的 運 動 軌 跡, 並 在 時 間 軸 中 適 時 添 加 關 鍵 幀 4. 如 果 選 中 自 動 播 放 和 迴 圈 選 項, 在 打 開 網 頁 時 會 自 動 播 放 時 間 軸 動 畫 5. 保 存 檔, 然 後 按 下 F12 鍵 預 覽 一 下 效 果 吧! 19