PDF檔講義

網 路 際 網 路 應 用
網 頁 中 的 圖 像 與 聲 音
P.C. Lin

動 動 腦
• 一 般 常 用 的 圖 檔 有 哪 幾 種 ?
• 要 如 何 將 圖 檔 和 網 頁 結 合 ?
• 要 如 何 將 圖 檔 與 網 頁 之 超 鏈 結 合 成 「 影 像
地 圖 」。
• 一 般 常 見 的 聲 音 檔 有 哪 幾 種 ?
• 要 如 何 將 聲 音 檔 與 網 頁 結 合 ?
• 你 看 過 youtube 嗎 ? 知 道 影 片 是 如 何 與 網 頁
結 合 的 嗎 ?

學 習 目 標
學 習 如 何 在 網 頁 中 加 入 背 景 圖
學 習 如 何 在 網 頁 中 加 入 圖 檔
學 習 如 何 建 立 一 個 影 像 地 圖
學 習 如 何 為 網 頁 加 上 聲 音

圖 檔

圖 形
• 點 陣 型 圖 形 : 由 像 素 ( pixel ) 組 合 而 成 , 所 以 在 使
用 放 大 鏡 工 具 將 圖 檔 放 大 數 倍 後 , 明 顯 的 發 現 圖
形 變 成 馬 賽 克 一 樣 , 其 圖 形 就 是 由 這 一 格 一 格 的
小 方 塊 ( 像 素 ) 組 合 而 成 的 。 優 點 是 容 易 呈 現 出
圖 像 豐 富 細 膩 的 質 感 與 細 緻 的 色 彩 變 化 ; 缺 點 是
圖 形 的 篇 幅 愈 大 , 需 要 愈 多 的 像 素 組 成 圖 形 , 檔
案 的 大 小 也 就 隨 之 增 大
• 向 量 型 圖 形 : 圖 形 使 用 運 算 式 來 描 述 組 成 影 像 的
目 標 位 置 和 特 性 ( 如 外 觀 形 狀 、 弧 度 、 線 條 和 色
彩 … 等 )。 適 合 幾 何 圖 形 、 卡 通 人 物 、 統 計 圖
表 … 等 類 型 的 圖 形 。 優 點 是 圖 形 可 以 輕 易 地 被 放
大 、 縮 小 、 旋 轉 而 絲 毫 不 影 響 到 原 有 的 畫 質 與 檔
案 大 小 ; 缺 點 是 圖 形 靠 數 學 運 算 式 成 形 所 以 無 法
表 現 出 圖 像 裡 豐 富 細 膩 的 質 感 與 色 彩 變 化 。

點 陣 圖 檔 的 格 式
• 小 畫 家 bmp 格 式 是 種 未 經 壓 縮 的 影 像 檔 格 式 。
• 瀏 覽 器 支 援 的 圖 檔 格 式 :
– JPEG 格 式 :Join Photographic Experts group 格 式 ,
使 用 犠 牲 圖 形 像 點 , 而 不 減 少 色 彩 的 方 式 壓 縮 , 適
用 於 各 類 照 片 。 優 點 : 色 彩 豐 富 、 畫 質 優 美 。 缺 點 :
不 適 合 文 字 等 圖 形 運 用 、 檔 案 過 大 。
– GIF 格 式 :Graphics Interchange Format 格 式 採 用 犠
牲 圖 形 色 彩 數 目 , 但 不 減 少 圖 形 像 點 的 方 式 壓 縮 ,
常 用 於 小 圖 示 或 動 態 圖 片 。 優 點 : 可 製 成 動 畫 、 透
明 圖 。 缺 點 : 色 彩 數 少 、 容 易 失 真 。
– PNG 格 式 : Portable Network Graphics 是 一 種 非 失
真 性 壓 縮 點 陣 圖 圖 形 文 件 格 式 。

網 路 支 援 圖 檔 的 比 較
• PNG 格 式 與 JPEG 及 GIF 格 式 相 比 較 , 可 以 說 是 比 較 優
秀 的 :
– 其 壓 縮 影 像 不 失 真
– 可 儲 存 48 位 元 的 彩 色 影 像 ( 比 JPEG 的 24 位 元 高 )
– 像 素 (pixel) 色 彩 也 可 有 256 種 不 同 的 透 明 度 選 擇 , 可
讓 圖 像 在 任 何 背 景 上 看 不 到 縫 隙 ( 改 善 了 GIF 格 式 的 像
素 色 彩 只 能 有 透 明 或 不 透 明 兩 種 選 擇 , 及 GIF 檔 描 邊
不 佳 的 問 題 )
– PNG 格 式 跨 平 台 的 影 像 亮 度 控 制 , 可 讓 影 像 在 不 同
的 作 業 系 統 (Windows, Mac, Linux …) 上 顯 示 出 相 同
的 效 果 , 所 以 PNG 格 式 格 外 適 合 在 網 路 環 境 流 通 。
• 缺 點 : (1) 不 能 儲 存 多 張 影 像 資 訊 , 所 以 不 能 像 GIF 一 樣
作 為 動 畫 檔 的 儲 存 格 式 (2) 因 為 PNG 使 用 的 是 非 破 壞 性
的 壓 縮 , 所 以 PNG 檔 通 常 比 JPEG 檔 大 。

在 網 頁 中 加 入 背 景
• 首 先 , 要 先 擁 有 圖 檔 ( 請 注 意 版 權 )
• 在 網 頁 中 加 入 背 景 圖 的 方 法 :
– HEAD 中 以 STYLE 元 素 加 入 背 景
BODY {background-image : url( 圖 檔 的 URL) }
– BODY 元 素 的 STYLE 屬 性 加 入 背 景

加 入 背 景 圖 的 範 例

在 網 頁 中 加 入 圖 片
• 首 先 , 要 先 擁 有 圖 檔 ( 請 注 意 版 權 )
• 在 網 頁 中 加 入 圖 片 的 方 法 :
– 在 要 加 入 圖 片 處 使 用 IMG 元 素
– 使 用 OBJECT 元 素

IMG 元 素 加 入 圖 檔 的 範 例

OBJECT 元 素 加 入 圖 檔 的 範 例

圖 檔 與 網 頁 實 作 練 習

準 備 jpg 或 gif 格 式 圖 檔

準 備 製 作 網 頁 的 子 目 錄

打 開 記 事 本 編 輯 HTML 檔
以 STYLE 元 素 加 入 backgroundimage
設 定 背 景 圖 ; 加 入 color 設 定
文 字 顏 色 。

儲 存 網 頁

打 開 瀏 覽 器 , 開 啟 舊 檔

選 擇 目 錄 及 網 頁

使 用 瀏 覽 器 觀 看 網 頁

打 開 FTP 軟 體

連 線 上 csuftp.csu.edu.tw 主 機
將 網 頁 與 圖 檔 上 傳 至 public_html 目 錄 中

將 網 頁 及 圖 檔 上 傳 至 public_html 目 錄

以 瀏 覽 器 觀 看 csuweb 主 機 上 的 網 頁

影 像 地 圖

利 用 小 畫 家 完 成 一 個 map2.gif 圖 檔

影 像 地 圖 相 關 元 素 與 HTML 語 法
…
配 合

圖 檔 map2.gif,
注 意 : 在 繪 圖
時 , 必 需 要 將
您 想 設 立 連 結
的 座 標 記 錄 下
來 .

目 標 URL 會
出 現 在 底 下
的 狀 態 列

聲 音 與 網 頁

聲 音 檔
• 聲 音 檔 與 影 音 檔 是 不 同 與 網 頁 的 另 一 個
檔 案 , 是 以 外 掛 的 方 式 嵌 入 網 頁 中 。
• 網 路 上 的 聲 音 與 影 音 檔 案 格 式 眾 多 :
– 使 用 定 位 錨 A 元 素 的 HREF 屬 性 來 連 結 該 檔
案 播 放 。( 您 的 電 腦 需 有 支 援 播 放 的 軟 體 )
– 使 用 EMBED 標 籤 來 嵌 入 聲 音 檔 。(IE 有 支 援
檔 案 格 式 mid 或 au)
– 使 用 BGSOUND 標 籤 來 嵌 入 背 景 音 樂 。

以 超 連 結 定 位 錨 加 入 聲 音
電 腦 必 需 要 有 播 放 的 軟 體

加 入 音 樂 的 範 例

以 EMBED 加 入 聲 音
可 以 加 入 播 放 器 或 直 接 設 定 為 背 景

EMBED 標 籤
AUTOSTART 是 否 自 動 播 放 ,
HEIGHT 與 WIDTH 播 放 器 的 高 和 寛
度 , LOOP 是 否 要 重 覆 播 放 。

加 入 音 樂 的 範 例

將 長 和 寬 定 義 為 0 ;
將 自 動 播 放 和 重 複 播
放 定 義 為 真 , 就 成 了
背 景 音 樂 !

用 BGSOUND
來 定 義 背 景 音
樂 !