第 5 章 加 入 圖 片.

Presentation on theme: "第 5 章 加 入 圖 片."— Presentation transcript:

1 第 5 章 加 入 圖 片

2 本章提要 使用網頁圖片的基本概念 加入圖片 調整圖片大小、搬移、複製、對齊 修改圖片屬性 圖片效果的應用 製作透明圖 自動影像目錄標籤
圖文並列

3 使用網頁圖片的基本概念 GIF 圖檔格式 JPEG 圖檔格式 PNG 圖檔格式 其他圖檔格式 縮短圖片的下載時間

4 GIF 圖檔格式 最多只能儲存 256 色 可設定透明背景 以交錯圖的形式顯示 GIF 動畫格式

5 JPEG 圖檔格式 強大的壓縮率 採用破壞性的壓縮法, 有時圖片會失真

6 PNG 圖檔格式 GIF 圖檔的優點 PNG 都有, 像是透明背景、交錯顯示、跨平台...等 支援 48 bits 的色彩
採取非失真的壓縮方式 目前有些影像軟體或瀏覽器尚未支援 Netscape 4.05 或是 IE 4.0 以後的版本才支援 PNG 格式

7 其他圖檔格式 BMP 相容於 Windows 和 OS/2 平台, 可儲存 1 bit (黑白) 到 24 bits 的 RGB 色彩階數 TIFF 可應用於不同的平台以及應用軟體 TGA 為 Truevision 視訊卡系統使用的圖檔格式

8 其他圖檔格式 RAS EPS WMF 可稍微壓縮的格式, 而且支援多達 36 bits 的影像
這是 Post Graphic 檔案格式的擴充 WMF 支援點陣、向量及 EPS 格式的資料

9 縮短圖片的下載時間 在影像處理軟體中先將所需的圖片編輯好 重新取樣 選擇適當的圖片解析度 建立縮圖 建立替代文字

10 加入圖片 從目前所在的 Web 從電腦中的檔案 從 Internet 上 從美工圖案或多媒體藝廊中插入圖片 從掃描器或數位相機 儲存檔案

11 從目前所在的 Web

12 從電腦中的檔案

13 從 Internet 上

14 從美工圖案或多媒體藝廊插入圖片 執行『插入 / 圖片 / 美工圖案』命令 替圖片新增關鍵字 利用搜尋的方式插入美工圖案
從多媒體藝廊插入美工圖案

15 從美工圖案或多媒體藝廊插入圖片

16 利用搜尋的方式插入美工圖案 在插入美工圖案工作窗格其他搜尋選項區的搜尋列示窗中選取集合, 以縮小搜尋的範圍
在結果應該是列示窗中選擇欲搜尋的媒體類型 接下來請在搜尋文字列示窗中輸入關鍵字 若不滿意搜尋的結果, 可按下修改鈕切換回搜尋區 若已搜尋到適合的美工圖案後, 請按一下或是直接拉曳縮圖到網頁中即可插入

17 替圖片新增關鍵字 在縮圖上按右鈕, 選擇編輯關鍵字命令

18 從多媒體藝廊插入美工圖案 點選插入美工圖案工作窗格下方的多媒體藝廊超連結, 開啟 Microsoft 多媒體藝廊視窗選擇適合的美工圖案

19 從掃描器或數位相機 執行『插入 / 圖片 / 從掃描器或照相機』命令

20 儲存檔案 儲存檔案 變更檔名 變更資料夾 變更存檔形式 刪除圖片

21 變更檔名 先選取檔案, 然後按下重新命名鈕, 輸入新的檔名後按下 [Enter] 鍵

22 變更資料夾 選定要變更儲存路徑的檔案, 按下變更資料夾鈕, 然後選擇要儲存的資料夾

23 變更存檔形式 對於尚未儲存的檔案, 一般都是選擇儲存檔案的形式, 或者也可以選擇不存檔, 只在網頁中保留圖檔最後存檔時的資訊
對於已經存在於網站中的檔案,存檔時還可以選擇是否要取代原來的檔案, 或是使用原來的檔案

24 刪除圖片 先在圖片上按一下選定圖片, 按下 Delete 鍵即可將其刪除。

25 儲存檔案

26 調整圖片 調整圖片大小 搬移圖片位置 複製圖片 圖片的對齊 設定圖片編輯器

27 調整圖片大小 直接拉曳控點

28 利用『圖片內容』命令進行設定 調整圖片大小

29 搬移圖片位置 選取圖片後, 直接拉曳到適當的位置
在 FrontPage 中, 插入的圖片被視為一般字元, 無法擺放在頁面中的任意位置, 只能放在文字之間

30 複製圖片 利用工具列上的複製鈕、貼上鈕 按住 [Ctrl] 鍵, 拉曳圖片 利用滑鼠右鈕的『複製此處』命令

31 圖片的對齊 使用工具列上的段落對齊鈕 利用滑鼠右鈕的『圖片內容』命令

32 設定圖片編輯器 執行『工具 / 選項』命令, 開啟選項交談窗

33 設定圖片編輯器 按下新增鈕開啟新增編輯器關聯交談窗

34 修改圖片屬性 圖片內容交談窗 圖片外框 圖片與文字的間距 圖檔格式 替代圖片及替代文字

35 圖片內容交談窗

36 圖片外框 切換到外觀頁次的方式 在框線粗細欄中輸入邊框厚度 當邊框厚度為 0 時, 表示圖片不加邊框 從旁邊的上下箭頭來調整邊框的厚度

37 圖片與文字的間距

38 圖檔格式 沒有特別指定存檔格式時, FrontPage 會依據圖片的色彩將圖片存成 GIF 或 JPEG 圖檔

39 替代圖片及替代文字

40 圖片效果的應用 在圖片中加上文字 圖片的旋轉與翻轉 調整圖片的對比與亮度 剪裁圖片 灰階圖與刷淡圖片 立體效果 重新取樣

41 在圖片中加上文字 選定圖片後按下文字鈕 要在圖片加入文字前, 請將圖片轉成 GIF 圖檔格式

42 圖片的旋轉與翻轉

43 調整圖片的對比與亮度

44 剪裁圖片 選定要剪裁的圖片, 按下裁剪鈕

45 剪裁圖片

46 灰階圖與刷淡圖片 按下圖片工作列上的色彩鈕, 選擇灰階或刷淡項目

47 立體效果 利用按鈕形鈕, 可以使圖片四周產生斜角, 變成立體按鈕

48 重新取樣 重新取樣 改變預設的連線速度

49 重新取樣 按下圖片工具列的重新取樣鈕, 可以用縮小後的尺寸重新計算像素值, 減少圖檔大小, 節省傳輸時間 原圖：

50 重新取樣 重新取樣後：

51 改變預設的連線速度 FrontPage 預設是以 28.8K 的傳輸速率來計算網頁下載的時間 可在視窗右下角選取連線速率

52 改變預設的連線速度 或執行『工具 / 選項』命令, 開啟交談窗設定連線速率

53 製作透明圖 在圖片工具列按下設定透明色彩鈕, 就可以將圖片的背景設定為透明色 要轉換成 GIF 圖檔格式才能設定透明背景

54 自動影像目錄標籤 使用自動影像目錄標籤 設定自動影像目錄標籤

55 使用自動影像目錄標籤 作用就是將大圖變成小圖 瀏覽網頁時在小圖上按一下, 就能看到原圖大小的圖片

56 使用自動影像目錄標籤 使用自動影像目錄標籤 修改自動影像目錄標籤的大小

57 設定自動影像目錄標籤

58 修改自動影像目錄標籤的大小 執行『工具 / 網頁選項』命令, 開啟交談窗修改設定

59 圖片與文字的對齊方式

60 圖片與文字的對齊方式

61 圖片與文字的對齊方式

62 圖片與文字的對齊方式