前 言 : Firework 講 義 Fireworks 是 一 套 專 為 網 頁 圖 像 設 計 需 求 開 發 的 軟 體, 原 本 是 由 Macromedia 公 司 開 發, 現 已 被 Adobe 公 司 併 購, 目 前 最 新 的 版 本 是 Fireworks CS5, 並 且

臺 中 市 101 年 度 暑 期 教 師 資 訊 課 程 研 習 網 頁 設 計 研 習 Firework Dreamweaver CSS 研 習 講 義 講 師 : 蔡 惠 閔 小 姐 承 辦 學 校 : 中 平 國 中 承 辦 日 期 :2012.7.12~14

前 言 : Firework 講 義 Fireworks 是 一 套 專 為 網 頁 圖 像 設 計 需 求 開 發 的 軟 體, 原 本 是 由 Macromedia 公 司 開 發, 現 已 被 Adobe 公 司 併 購, 目 前 最 新 的 版 本 是 Fireworks CS5, 並 且 提 供 了 繁 體 中 文 版 Fireworks 可 協 助 您 輕 鬆 製 作 網 頁 圖 像 動 畫 製 作, 與 建 立 網 頁 上 的 互 動 效 果 同 時 支 援 點 陣 圖 與 向 量 圖, 設 計 滑 鼠 變 換 影 像 彈 出 式 選 單 等 網 頁 效 果, 裁 切 和 最 佳 化 圖 像, 以 減 少 檔 案 大 小, 以 及 自 動 產 生 JavaScript 程 式 碼, 縮 短 設 計 專 案 所 需 要 的 時 間 隨 著 iphone ipad Android 手 機 平 板 電 腦 的 推 出, 行 動 裝 置 上 的 應 用 程 式 開 發 需 求 也 快 速 增 加,Fireworks 也 可 以 應 用 於 操 作 介 面 的 設 計 喔! 點 陣 圖 與 向 量 圖 Fireworks 可 以 編 輯 點 陣 影 像 ( Bitmap ) 與 向 量 影 像 ( Vector ), 我 們 先 瞭 解 這 兩 種 數 位 影 像 的 格 式 : 點 陣 圖 是 由 像 素 ( Pixel ) 排 列 而 成, 像 素 越 多 的 點 陣 圖 可 呈 現 較 清 晰 的 影 像, 但 相 對 檔 案 的 體 積 也 較 大 點 陣 圖 的 編 輯 是 以 像 素 為 對 象, 而 不 是 影 像 中 的 線 段 或 物 件, 在 放 大 檢 視 點 陣 圖 時 會 有 明 顯 的 鋸 齒 狀, 若 點 陣 圖 的 解 析 度 不 足, 列 印 時 也 會 產 生 模 糊 或 失 真 的 情 形 一 般 數 位 相 機 所 拍 攝 的 檔 案, 或 經 由 掃 描 器 輸 入 電 腦 的 影 像 皆 屬 於 點 陣 圖,Photoshop PhotoImpact Fireworks 等 皆 為 編 輯 點 陣 圖 為 主 的 軟 體 向 量 圖 是 記 錄 線 段 或 曲 線 的 位 置 與 填 色 資 訊, 並 非 以 像 素 方 式 記 錄 影 像, 而 因 此 在 放 大 檢 視 時 不 會 出 現 鋸 齒 狀 的 效 果, 即 使 列 印 輸 出 到 大 尺 寸, 也 不 會 產 生 失 真 或 模 糊 的 情 形 向 量 圖 形 格 式 適 合 應 用 在 插 畫 繪 製 企 業 識 別 標 誌 電 腦 輔 助 設 計 等, AutoCAD Illustrator CorelDRAW 等 皆 屬 於 編 輯 向 量 圖 格 式 為 主 的 軟 體 Fireworks 可 開 啟 或 匯 入 點 陣 與 向 量 兩 種 格 式, 並 且 提 供 了 點 陣 圖 與 向 量 圖 的 編 輯 工 具, 而 儲 存 的 格 式 以 點 陣 圖 為 主 Fireworks 可 支 援 的 檔 案 類 型 包 括 : Fireworks ( *.png ) TIFF ( *.tif *.tiff ) ASCII 文 字 ( *.txt ) Photoshop PSD ( *.psd ) Targa ( *.tga ) MacPaint ( *.MAC *.PNTG ) GIF ( *.gif ) BMP ( *.bmp *.dib *.rle ) PICT ( *.PCT *.PIC *.PICT ) JPEG ( *.jpg *.jpe *.jpeg ) Adobe Illustrator ( *.ai *.art ) FlashPix 影 像 ( *.FPX ) JPEG ( *.JP2 *.JPF *.JPX ) EPS ( *.eps ) SGI 影 像 ( *.SGI ) WBMP ( *.wbmp *.wbm ) RTF 文 字 ( *.rtf ) QuickTime 影 像 ( *.QIF *.QTI *.QTIF ) 頁 1 / 20

操 作 介 面 Fireworks 的 操 作 介 面 與 Photoshop 非 常 相 似, 若 您 已 經 熟 悉 Photoshop 軟 體, 對 於 Fireworks 的 操 作 應 該 在 很 快 就 能 上 手 工 作 列 介 紹 頁 2 / 20

Fireworks 動 畫 製 作 Fireworks 可 以 製 作 GIF 動 畫, 或 將 儲 存 的 PNG 檔 案 匯 入 Flash 製 作 互 動 式 SWF 動 畫 1. 點 選 功 能 表 [ 編 輯 > 插 入 > 新 增 元 件 ] 開 啟 轉 換 成 元 件 對 話 框 2. 輸 入 新 動 畫 元 件 的 名 稱, 選 取 動 畫 並 按 下 確 定 按 鈕 3. 使 用 繪 圖 工 具 或 文 字 工 具 建 立 物 件,, 繪 製 完 成 後 從 元 件 編 輯 切 換 到 整 體 頁 面 編 輯 4. 提 示 : 您 可 以 繪 製 向 量 圖 形 或 是 使 用 點 陣 圖 建 立 動 畫 元 件 5. Fireworks 會 將 建 立 的 動 畫 元 件 放 在 文 件 庫, 並 將 動 畫 元 件 的 副 本 放 在 頁 面 上 6. 使 用 屬 性 檢 視 窗 的 狀 態 滑 動 軸 可 在 此 元 件 增 加 新 狀 態 7. 點 選 功 能 表 [ 修 改 > 動 畫 > 動 畫 選 取 範 圍 ] 可 製 作 移 動 縮 放 旋 轉, 與 不 透 明 度 變 化 的 效 果 補 間 動 畫 使 用 Fireworks 製 作 動 畫 時, 補 間 動 畫 可 以 混 合 兩 個 相 同 元 件 的 實 體, 並 插 入 屬 性 建 立 中 間 實 體 使 用 補 間 動 畫 可 以 製 作 複 雜 的 物 件 移 動 例 如, 您 可 以 產 生 物 件 沿 著 路 徑 移 動 的 補 間 動 畫, 或 是 在 動 畫 狀 態 中 更 改 即 時 濾 鏡 的 效 果 頁 3 / 20

實 體 補 間 動 畫 1. 選 取 相 同 圖 像 元 件 的 兩 個 實 體, 請 注 意 不 要 選 取 不 同 元 件 的 實 體 使 用 多 個 影 像 檔 案 製 作 動 畫 Fireworks 可 以 使 用 影 像 檔 案 建 立 動 畫, 這 是 一 個 相 當 實 用 的 功 能 點 選 功 能 表 [ 檔 案 > 開 啟 舊 檔 ], 並 選 取 多 個 檔 案 選 取 以 動 畫 開 啟 並 按 下 確 定 Fireworks 會 依 您 選 取 的 順 序, 將 影 像 檔 案 放 在 不 同 的 狀 態 中 匯 出 GIF 動 畫 1. 在 最 佳 化 面 板 選 取 GIF 動 畫 檔 案 格 式 2. 點 選 功 能 表 [ 檔 案 > 匯 出 ] 開 啟 對 話 框, 設 定 儲 存 路 徑 與 檔 案 名 稱 3. 按 下 儲 存 檔 案 按 鈕 設 計 網 頁 版 面 頁 面 設 計 實 作 版 面 輸 出 需 搭 配 Dreamweaver 課 程 製 作 完 成 網 頁 頁 面 頁 4 / 20

DREAMWEAVER 講 義 前 言 DreamWeaver 是 目 前 世 界 上 受 到 相 當 推 崇 的 專 業 級 網 頁 排 版 的 軟 體 在 網 頁 設 計 的 領 域 中, 有 幾 個 較 知 名 的 軟 體, 例 如 : FrontPage Fusions DreamWeaver... 等, 各 有 其 喜 愛 者, 但 它 們 所 展 現 的 能 力 各 不 相 同 操 作 介 面 標 籤 選 取 器 編 輯 網 頁 時 經 常 需 要 修 改 特 定 的 HTML 標 籤, 或 刪 除 指 定 的 標 籤, 使 用 一 般 的 編 輯 方 式, 有 時 不 一 定 會 選 到 正 確 的 標 籤, 除 了 編 輯 原 碼 以 外, 使 用 標 籤 選 取 器 可 以 增 加 編 輯 的 效 率, 並 且 能 快 速 的 修 改 CSS 樣 式 的 套 用 範 圍 頁 5 / 20

屬 性 面 板 屬 性 面 板 可 讓 您 檢 視 與 設 定 選 取 物 件 的 屬 性, 例 如 選 取 文 字 時 可 以 設 定 字 體 大 小, 與 文 顏 色, 而 選 取 影 像 時, 可 檢 視 檔 案 的 路 徑 影 像 的 寬 度 高 度, 以 及 對 齊 的 方 式 屬 性 面 板 的 內 容 會 隨 著 選 取 的 物 件 而 顯 示 不 同 的 屬 性, 讓 使 用 者 以 直 覺 的 方 式 進 行 編 輯 網 站 設 計 的 流 程 網 站 設 計 的 流 程 大 致 可 分 為 以 下 的 三 個 階 段 : 第 1 階 段. 網 站 專 案 規 劃 當 您 開 始 著 手 設 計 網 站 時, 為 了 確 認 網 站 的 風 格, 可 先 設 計 網 頁 版 面 的 樣 稿, 因 為 客 戶 對 於 網 站 結 構 或 版 面 設 計 可 能 已 有 初 步 的 構 想, 一 般 以 書 面 的 方 式 與 客 戶 確 認, 以 避 免 日 後 可 能 發 生 的 爭 議 若 是 剛 接 觸 網 頁 設 計 的 話, 建 議 多 參 考 知 名 網 站 的 設 計, 並 且 多 嘗 試 不 同 的 設 計, 提 升 作 品 的 水 準 頁 6 / 20

第 2 階 段. 網 頁 設 計 確 認 網 站 設 計 的 方 向 後, 您 可 以 開 始 依 照 樣 稿 製 作 實 際 的 網 頁, 由 於 訪 客 使 用 的 作 業 系 統 瀏 覽 器, 與 螢 幕 解 析 度 設 定 的 差 別, 網 頁 在 不 同 的 環 境 也 會 呈 現 不 同 的 外 觀, 請 確 認 網 頁 在 不 同 的 環 境 下 都 能 正 常 顯 示 利 用 Google Analytics 或 是 Yahoo! 站 長 工 具, 可 以 瞭 解 訪 客 如 何 使 用 您 的 網 站, 包 括 每 天 的 訪 客 人 數 瀏 覽 的 網 頁 數 量 停 留 網 站 的 時 間 等, 而 申 請 這 些 服 務 是 完 全 免 費 的 第 3 階 段. 網 站 的 發 佈 與 維 護 製 作 完 成 的 網 頁 檔 案, 必 須 將 檔 案 上 傳 到 網 站 伺 服 器, 訪 客 才 能 正 常 瀏 覽 可 選 擇 免 費 的 網 頁 空 間 租 用 虛 主 機, 或 是 自 行 架 設 網 站 伺 服 器 每 個 選 項 都 有 優 缺 點 檔 案 的 命 名 原 則 網 站 的 相 關 檔 案 不 能 只 放 在 自 已 的 電 腦 上, 而 必 須 上 傳 到 網 站 伺 服 器, 訪 客 才 能 正 常 瀏 覽 網 站 的 內 容 因 此 務 必 遵 守 下 列 幾 個 檔 案 與 資 料 夾 的 命 名 原 則 : 1. 檔 案 名 稱 與 資 料 夾 名 稱 避 免 使 用 中 文 有 些 網 站 伺 服 器 也 不 支 援 中 文 檔 名, 若 您 不 確 定 的 話, 請 使 用 英 文 或 數 字 來 命 名 2. 檔 案 名 稱 與 資 料 夾 名 稱 不 可 包 含 空 白 檔 案 名 稱 或 資 料 夾 名 稱 若 有 空 白, 可 能 在 瀏 覽 時 出 現 錯 誤 的 情 形, 可 使 用 底 線 ( _ ) 代 替 空 白 3. 注 意 英 文 大 小 寫 的 區 別 許 多 網 站 伺 服 器 採 用 UNIX 作 業 系 統, 英 文 大 小 寫 被 視 為 不 同 的 檔 案, 例 如 連 結 到 abc.htm 網 頁, 實 際 的 檔 案 若 是 ABC.HTM 就 會 發 生 找 不 到 的 情 形 微 軟 Windows 作 業 系 統 檔 名 的 大 寫 小 寫 都 視 為 相 同, 因 此 初 學 者 在 設 計 網 頁 時, 請 特 別 注 意 這 樣 的 問 題 網 站 的 專 案 設 定 建 立 網 站 資 料 夾 網 站 通 常 包 含 了 各 種 類 型 的 檔 案, 包 括 網 頁 圖 片 動 畫 樣 式 表 程 式 資 料 庫 等 我 們 先 建 立 一 個 網 站 資 料 夾, 以 便 於 存 放 管 理 網 站 的 檔 案 您 可 以 自 行 選 擇 資 料 夾 存 放 的 位 置 與 名 稱, 只 要 符 合 檔 案 的 命 名 原 則 即 可 頁 7 / 20

文 字 與 影 像 編 輯 1. 設 定 文 字 屬 性 2. 設 定 段 落 屬 性 3. 清 單 屬 性 設 定 4. 插 入 影 像 5. 插 入 滑 鼠 變 換 影 像 當 滑 鼠 游 標 移 到 影 像 時, 變 換 為 另 一 個 影 像 的 效 果, 稱 為 滑 鼠 變 換 影 像 剛 出 現 於 網 路 上 時 算 是 很 炫 的 效 果, 必 須 透 過 JAVA VBScript JavaScript 程 式 製 作, 不 過 現 在 已 經 可 以 在 許 多 網 站 看 到 滑 鼠 變 換 效 果 影 像 名 稱 只 能 使 用 英 文 或 數 字, 不 可 以 使 用 中 文 或 空 白 您 必 須 事 先 準 備 2 個 影 像 檔 案, 原 始 影 像 與 滑 鼠 游 標 移 入 時 變 換 的 影 像 6. 影 像 預 留 位 置 製 作 網 頁 超 連 結 超 連 結 是 指 點 選 網 頁 的 文 字 或 圖 片 時, 瀏 灠 器 連 結 到 指 定 的 網 頁 電 子 信 箱, 或 者 其 他 網 路 資 源 的 功 能 訪 客 可 以 快 速 取 得 需 要 的 資 訊 與 各 種 資 源, 超 連 結 已 經 徹 底 改 變 傳 統 的 閱 讀 方 式 網 頁 的 超 連 結 包 括 以 下 類 型 : 文 字 連 結 : 網 頁 內 容 的 文 字 超 連 結 影 像 連 結 : 影 像 或 影 像 地 圖 的 超 連 結 按 鈕 連 結 : 使 用 表 單 按 鈕 的 超 連 結, 通 常 配 合 [ 行 為 ] 指 令 製 作 超 連 結 的 功 能 1. 相 對 路 徑 2. 絕 對 路 徑 3. 電 子 郵 件 連 結 4. 命 名 錨 點 頁 8 / 20

網 頁 表 格 的 運 用 表 格 工 具 只 是 用 來 設 計 網 頁 上 的 表 格 嗎? 表 格 是 編 排 網 頁 版 面 的 重 要 工 具 之 一, 而 另 一 種 則 是 CSS 樣 式 表 若 您 需 要 設 計 專 業 的 網 頁, 熟 悉 表 格 工 具 是 相 當 重 要 的 插 入 表 格 點 選 功 能 表 [ 插 入 > 表 格 ] 或 是 常 用 物 件 面 板 的 表 格 工 具 開 啟 插 入 表 格 的 對 話 框 按 下 確 定 後, 網 頁 上 就 會 插 入 表 格 表 格 設 定 項 目 提 示 : 建 議 您 不 要 使 用 滑 鼠 拖 曳 的 方 式 調 整 儲 存 格 的 寬 度 與 高 度, 有 時 會 造 成 編 輯 上 的 困 擾, 請 在 屬 性 面 版 輸 入 像 素 或 百 分 比 來 設 定 儲 存 格 的 寬 度 與 高 度, 這 一 點 很 重 要 喔! 列 : 水 平 排 列 的 儲 存 格 數 目 欄 : 垂 直 排 列 的 儲 存 格 數 目 表 格 寬 度 : 設 定 表 格 的 寬 度, 可 以 使 用 像 素 與 百 分 比 為 單 位 邊 框 粗 細 : 設 定 表 格 外 框 的 寬 度, 若 設 定 為 0 則 不 顯 示 外 框 儲 存 格 內 距 : 設 定 儲 存 格 邊 框 與 儲 存 格 內 文 字 或 圖 片 的 距 離 儲 存 格 間 距 : 設 定 儲 存 格 與 儲 存 格 的 間 格 距 離 頁 9 / 20

頁 首 : 設 定 標 題 儲 存 格, 標 題 儲 存 格 內 的 文 字 會 以 粗 體 顯 示 表 格 屬 性 的 設 定 點 選 表 格 的 框 線 選 取 表 格, 屬 性 面 板 會 顯 示 表 格 的 屬 性, 設 定 項 目 與 插 入 表 格 時 的 項 目 大 致 相 同 清 除 欄 寬 度 : 清 除 原 本 設 定 的 欄 寬 度 清 除 列 高 度 : 清 除 原 本 設 定 的 列 高 度 將 表 格 寬 度 轉 換 為 像 素 將 表 格 高 度 轉 換 為 像 素 將 表 格 寬 度 轉 換 為 百 分 比 將 表 格 高 度 轉 換 為 百 分 比 背 景 顏 色 : 設 定 表 格 的 背 景 顏 色 背 景 影 像 : 設 定 表 格 的 背 景 影 像 邊 框 顏 色 : 設 定 表 格 的 邊 框 顏 色 儲 存 格 屬 性 設 定 頁 面 屬 性 的 設 定 將 文 字 輸 入 點 移 至 儲 存 格 內, 即 可 設 定 儲 存 格 的 屬 性, 您 也 可 以 一 次 選 取 多 個 儲 存 格, 並 在 屬 性 面 板 進 行 設 定 水 平 : 設 定 儲 存 格 內 容 的 水 平 排 列 方 式 垂 直 : 設 定 儲 存 格 內 容 的 垂 直 排 列 方 式 寬 度 : 設 定 儲 存 格 的 寬 度 高 度 : 設 定 儲 存 格 的 寬 度 不 換 行 : 設 定 儲 存 格 內 的 文 字 不 換 行 表 頭 : 勾 選 後 儲 存 格 內 的 文 字 將 以 粗 體 顯 示 背 景 顏 色 : 設 定 儲 存 格 的 背 景 顏 色 背 景 影 像 : 設 定 儲 存 格 的 背 景 影 像 邊 框 顏 色 : 設 定 儲 存 格 的 邊 框 顏 色 頁 10 / 20

頁 面 屬 性 的 設 定 頁 面 屬 性 的 設 定 包 括 網 頁 背 景 預 設 文 字 與 連 結 的 顏 色 邊 界 寬 度 與 高 度 網 頁 標 題 頁 面 編 碼 方 式 等, 點 選 功 能 表 [ 修 改 > 頁 面 屬 性 ] 開 啟 設 定 的 對 話 框 : 設 定 網 頁 背 景 點 選 頁 面 屬 性 對 話 框 的 背 景 顏 色, 即 可 選 擇 網 頁 的 背 景 顏 色, 若 想 使 用 圖 片 當 作 網 頁 背 景, 請 點 選 背 景 影 像 右 側 的 瀏 覽, 即 可 選 擇 您 想 使 用 的 圖 片 網 頁 連 結 設 定 網 頁 連 結 設 定 的 功 能 是 利 用 CSS 樣 式 表, 修 改 網 頁 上 所 有 的 文 字 超 連 結 樣 式 頁 11 / 20

網 頁 標 題 設 定 此 項 目 很 容 易 與 下 面 的 標 題 編 碼 方 式 混 淆, 實 際 上 定 設 定 <h1>... <h6> 標 題 字 的 外 觀 網 頁 編 碼 方 式 設 定 設 定 網 頁 的 編 輯 方 式, 目 前 製 作 網 頁 的 趨 勢 是 使 用 Unicode ( UTF-8 ) 編 碼, 在 網 頁 上 可 以 同 時 顯 示 繁 體 中 文 簡 體 中 文 日 文 等 多 國 語 言 CSS 串 接 樣 式 表 CSS ( Cascading Style Sheets ) 稱 為 串 接 樣 式 表 或 是 階 層 式 樣 式 表 主 要 的 用 途 是 控 制 網 頁 內 容 的 外 觀, 提 供 傳 統 HTML 無 法 達 成 的 方 式 來 設 定 文 字 格 式 及 定 位, 對 網 頁 內 容 外 觀 能 提 供 完 整 的 控 制 能 力, 例 如 可 以 用 像 素 為 單 位 設 定 字 體 大 小, 以 及 設 定 字 元 間 距 行 距 段 落 間 距 縮 排 定 位 等, 可 讓 網 頁 的 版 面 編 排 更 精 確 CSS 帶 給 網 頁 設 計 者 的 另 一 項 優 點 是 容 易 管 理, 由 於 傳 統 HTML 設 計 網 頁 是 在 網 頁 中 設 定 樣 式, 若 是 網 站 包 含 數 量 很 多 的 網 頁 時, 編 輯 樣 式 可 能 需 要 不 多 時 間 而 CSS 規 則 允 許 將 樣 式 儲 存 在 一 個 外 部 的 樣 式 表 檔 案, 只 要 以 讓 所 有 的 網 頁 連 結 到 外 部 樣 式 表, 當 您 更 新 樣 式 時, 連 結 到 此 樣 式 表 的 網 頁 內 容 就 會 同 時 更 新, 可 以 大 幅 縮 短 網 頁 維 護 的 時 間 CSS 規 則 依 存 放 的 位 置 不 同, 可 分 為 內 部 樣 式 表 與 外 部 樣 式 表, 請 參 考 以 下 說 明 : 頁 12 / 20

內 部 樣 式 表 又 稱 為 內 嵌 樣 式 表, 內 部 樣 式 表 是 將 CSS 規 則 直 接 寫 在 HTML 網 頁 <head> 檔 頭 區 段 的 <style> </style> 標 籤, 語 法 範 例 : <style type="text/css"> <!-- body { background-color: #000; } --> </style> 外 部 樣 式 表 外 部 樣 式 表 是 將 樣 式 儲 存 在 獨 立 的 外 部 檔 案, 並 非 直 接 儲 存 在 HTML 網 頁 外 部 樣 式 表 是 獨 立 的 文 字 檔, 網 頁 使 用 head 區 段 的 <link> 標 籤 或 是 @import 規 則 連 結 到 外 部 樣 式 表 連 結 語 法 <link rel="stylesheet" href="style.css" type="text/css" / > 外 部 樣 式 表 可 包 含 多 個 樣 式, 並 可 以 讓 一 到 多 個 網 頁 連 結, 使 用 Dreamweaver 初 次 定 義 外 部 樣 式 表 時, 請 選 擇 定 義 在 : 新 增 樣 式 表 檔, 稍 後 定 義 其 他 樣 式 時, 即 可 在 下 拉 選 單 選 擇 已 儲 存 的 外 部 樣 式 表 頁 13 / 20

您 可 以 套 用 多 個 樣 式 到 同 一 個 元 素 或 網 頁 例 如, 您 可 以 建 立 一 個 CSS 規 則 以 套 用 顏 色, 然 後 建 立 另 一 個 規 則 以 套 用 邊 界, 最 後 將 這 兩 個 規 則 套 用 到 網 頁 上 相 同 的 文 字 而 定 義 的 樣 式 會 重 疊 於 網 頁 的 元 素 下, 最 後 建 立 您 要 的 設 計 您 可 以 在 Dreamweaver 中 定 義 下 列 規 則 類 型 : 自 訂 CSS 規 則 也 稱 為 類 別 樣 式, 可 以 讓 您 將 樣 式 屬 性 套 用 到 任 何 文 字 範 圍 或 區 塊 所 有 類 別 樣 式 的 開 頭 都 是 句 點 (.) 例 如, 您 可 以 建 立 一 個 類 別 樣 式 叫 做.red, 將 規 則 的 color 屬 性 設 定 為 red, 再 將 樣 式 套 用 至 已 設 定 樣 式 之 段 落 文 字 的 一 部 分 HTML 標 籤 規 則 會 重 新 定 義 特 定 標 籤 ( 例 如 p 或 h1) 的 格 式 當 您 建 立 或 變 更 h1 標 籤 的 CSS 規 則 時, 所 有 以 h1 標 籤 格 式 化 的 文 字 都 會 立 即 更 新 CSS 選 取 器 規 則 ( 進 階 樣 式 ) 會 為 特 定 元 素 組 合 或 其 他 CSS 允 許 的 選 取 器 形 式 重 新 定 義 格 式 ( 例 如 每 當 h2 標 題 出 現 在 表 格 儲 存 格 內 時, 便 會 套 用 選 取 器 td h2) 進 階 樣 式 也 會 重 新 定 義 包 含 特 定 id 屬 性 之 標 籤 的 格 式 ( 例 如, 由 #mystyle 定 義 的 樣 式 會 套 用 至 內 含 id="mystyle" 屬 性 - 值 配 對 的 所 有 標 籤 ) 建 立 新 的 樣 式 表 首 先, 您 會 建 立 一 個 外 部 樣 式 表, 內 含 會 定 義 段 落 文 字 樣 式 的 CSS 規 則 當 您 在 外 部 樣 式 表 中 建 立 樣 式 時, 便 可 以 從 中 央 位 置 控 制 多 個 網 頁 的 外 觀, 而 不 必 在 每 個 個 別 網 頁 上 設 定 樣 式 行 內 樣 式 是 使 用 整 份 HTML 文 件 內 的 特 定 標 籤 實 體 加 以 定 義 例 如,<p style="font-size:9px"> 只 會 為 以 內 含 行 內 樣 式 之 標 籤 設 定 格 式 的 段 落 定 義 字 體 大 小 Dreamweaver 會 呈 現 大 部 分 您 套 用 的 樣 式 屬 性 並 在 文 件 視 窗 中 顯 示 它 們 您 也 可 以 在 瀏 覽 器 視 窗 中 預 覽 文 件, 查 看 樣 式 套 用 的 情 況 附 加 樣 式 表 當 您 將 樣 式 表 附 加 至 網 頁 時, 樣 式 表 中 所 定 義 的 規 則 會 套 用 至 頁 面 上 對 應 的 元 素 例 如, 將 cafe_townsend.css 樣 式 表 附 加 至 index.html 頁 面 時, 所 有 的 段 落 文 字 (HTML 程 式 碼 中 以 <p> 標 籤 設 定 格 式 的 文 字 ) 都 是 根 據 您 定 義 的 CSS 規 則 設 定 格 式 的 頁 14 / 20

背 景 背 景 顏 色 ( Background-color) : 設 定 元 素 的 背 景 顏 色 背 景 影 像 ( Background-image ) : 設 定 元 素 的 背 景 影 像 重 複 ( Background-repeat ) : 設 定 背 景 影 像 的 重 複 顯 示 方 式 附 件 ( Background-attachment ) : 設 定 背 景 影 像 隨 內 容 捲 動 或 是 固 定 位 置 區 塊 單 字 間 距 ( Word-spacing ) : 設 定 文 字 元 素 的 單 字 間 距 字 母 間 距 ( Letter-spacing ) : 設 定 文 字 元 素 的 字 元 間 距 垂 直 對 齊 ( Vertical-align ) : 設 定 文 字 元 素 的 垂 直 對 齊 文 字 對 齊 ( Text-align ) : 設 定 文 字 元 素 的 對 齊 方 式 文 字 縮 排 ( Text-indent ) : 設 定 文 字 元 素 的 第 一 行 縮 排 空 白 ( white-space ) : 設 定 元 素 內 的 空 白 處 理 方 式 顯 示 ( Display ) : 設 定 是 否 顯 示 元 素, 若 選 擇 none 則 隱 藏 該 元 素 頁 15 / 20

方 框 寬 ( Width ) 高 ( Height ) : 設 定 元 素 的 寬 度 與 高 度 浮 動 ( Float ) : 清 除 ( Clear ) : 欄 位 間 隔 ( Padding ) : 邊 界 ( Mergin ) : 清 單 用 於 設 定 項 目 類 型 項 目 符 號 影 像 與 位 置 類 型 ( List-style-type ) : 設 定 項 目 符 號 的 外 觀 項 目 符 號 影 像 ( List-style-image ) : 設 定 項 目 符 號 的 自 訂 影 像 位 置 ( List-style-Position ) : 設 定 項 目 符 號 的 換 行 與 縮 排 頁 16 / 20

CSS 樣 式 講 義 CSS 的 全 名 為 Cascading Style Sheets, 是 一 種 樣 式 表 (Stylesheet) 語 言 它 的 目 的 是 為 了 對 像 XHTML 及 HTML 之 類 的 標 記 語 言 (markup language) 提 供 一 個 顯 示 層 有 了 CSS, 我 們 就 可 以 將 資 料 層 及 顯 示 層 分 開 :HTML 文 件 就 只 包 括 資 料, 而 CSS 則 是 告 訴 瀏 覽 器 這 些 資 料 應 該 要 如 何 顯 現 出 來 現 在 由 於 個 人 部 落 格 的 興 起,CSS 已 成 為 了 一 個 眾 人 須 知 的 電 腦 語 言 無 論 您 是 自 己 設 站 寫 部 落 格, 或 是 您 是 利 用 BSP ( 如 無 名 天 空 Pixnet Xuite Blogger 及 Wordpress 等 ), 甚 至 您 已 經 從 網 路 上 CSS 無 名 樣 式 分 享 的 網 站 找 到 了 您 想 要 的 CSS 樣 式, 您 都 很 有 可 能 需 要 修 改 一 下 CSS, 這 樣 子 才 能 夠 讓 您 的 部 落 格 有 自 己 的 特 色 這 個 CSS 語 法 教 學, 正 是 學 習 基 礎 CSS 最 佳 的 地 方 這 個 CSS 語 法 教 學 分 為 以 下 三 個 部 分 : 基 礎 概 念 : 討 論 CSS 的 基 礎 概 念, 包 括 語 法 套 用 方 式 串 連 的 概 念 繼 承 Class 與 ID 選 擇 器 以 及 div 與 span 選 擇 器 屬 性 : 討 論 常 用 到 的 CSS 屬 性 CSS 樣 式 : 列 出 所 有 在 這 個 教 學 中 有 提 到 的 CSS 屬 性 宣 告 CSS 樣 式 的 語 法 如 下 : 選 擇 器 { 屬 性 : 設 定 值 ;... } 在 一 個 選 擇 器 (Selector) 中, 可 以 設 定 的 屬 性 數 目 沒 有 限 制 選 擇 器 主 要 有 三 種 : 型 類 (Type) 選 擇 器 Class 選 擇 器 和 ID 選 擇 器 型 類 選 擇 器 是 (X)HTML 標 籤, 如 <body> 和 <h1> Class 和 ID 選 擇 器 是 使 用 者 自 訂 的 選 擇 器 樣 式 是 以 屬 性 : 設 定 值 的 方 式 來 制 定 舉 例 來 說, 若 我 們 要 設 定 一 個 元 素 內 的 文 字 是 黃 色 的, 那 就 用 以 下 的 屬 性 : 設 定 值 : color:yellow; 在 以 上 的 宣 告 內,color 是 屬 性, 而 yellow 是 設 定 值 CSS 套 用 方 式 行 內 套 用 (Inline) 嵌 入 套 用 (Embed) 頁 17 / 20

外 部 連 接 套 用 (External Link) 匯 入 套 用 (Import) 盒 子 模 式 盒 子 模 式 (box model) 是 在 CSS 中 一 個 很 重 要 的 觀 念 它 是 用 來 描 述 一 個 元 素 是 如 何 組 成 的 以 下 是 盒 子 模 式 的 式 樣 : 在 盒 子 模 式 中, 內 容 (content) 是 最 內 層 的 部 分, 接 下 來 依 序 為 留 白 (padding) 邊 框 (border) 以 及 邊 界 (margin) 邊 界 是 用 來 設 定 各 個 元 素 之 間 的 距 離 1. 邊 界 margin-top ( 上 邊 界 ) margin-right ( 右 邊 界 ) margin-bottom ( 下 邊 界 ) margin-left ( 左 邊 界 ) 2. 邊 框 border-style border-width border-color border-top-, border-left-, border-bottom-, border-rightborder 3. 留 白 我 們 從 盒 子 模 式 那 一 頁 看 到, 留 白 (padding) 是 在 內 容 外, 邊 框 內 的 部 分 一 個 盒 子 有 四 個 邊, 所 以 我 們 可 以 對 這 四 個 邊 的 留 白 逐 一 設 定 : padding-top ( 上 ) padding-right ( 右 ) padding-bottom ( 下 ) padding-left ( 左 ) 頁 18 / 20

4. 連 接 a:link: 設 定 當 連 接 過 去 的 網 頁 尚 未 被 看 過 時, 該 連 接 的 樣 式 a:visited: 設 定 當 連 接 過 去 的 網 頁 已 經 看 過 時, 該 連 接 的 樣 式 a:hover: 設 定 當 滑 鼠 蓋 在 連 接 上 面 時, 該 連 接 的 樣 式 a:active: 設 定 當 連 接 被 點 擊 時, 該 連 接 的 樣 式 5. 清 單 list-style-type list-style-position list-style-image list-style ist-style-type list-style-type 屬 性 是 用 來 設 定 在 清 單 中, 每 一 條 之 前 的 記 號 要 用 什 麼 最 常 見 的 list-style-type 設 定 值 為 : none ( 沒 有 ) disc ( 全 黑 圓 圈 ) circle ( 空 心 圓 圈 ) square ( 正 方 形 ) CSS 參 考 網 站 http://www.w3school.com.cn/css/css_reference.asp http://blog.beyes.tw/category/css3 http://css.beyes.tw/ Juery 參 考 網 站 http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/ http://abgne.tw/ 頁 19 / 20