社區教育培訓網站：社區網頁製作與網站管理課程10jj\03\03-14
[回首頁]、[本編目錄]、[上一編]、[下一編]
第十四週、數位照片的整理、網頁影像實作
課程教師：鄭錦德
一、網頁插圖編輯
1. 網頁圖檔的格式
網頁中常見的圖檔格式有：
- JPG：網路上通用的壓縮格式，專門用來壓縮相片、繪畫、人物風景寫生等比較寫實的點矩陣影像。
- GIF：網路上通用的壓縮格式，專門用來壓縮圖案類的點矩陣影像，顏色最多只有256色。此格式亦可製作簡單的動畫形式。
- PNG：網路上新發展出的壓縮格式，類似JPG，但壓縮的方法比較進步。
2. 網站的檔案系統中圖檔放在何處？
圖1、網頁中的圖檔與網頁放在同一個資料夾中
為了圖檔的管理方便起見，網頁中的要插入的圖檔，建議和網頁放在同一個資料夾中。
3. 網頁中的插圖當做一個文字
網頁中的一張插圖
，事實上是當做段落(Paragraph)中的一個文字來處理，只是看起來像是一個較大的文字罷了。既然網頁中的插圖
是當做文字處理，其編輯與排版的行為模式，和文字是完全一樣的：
情況1
插圖可以放在段落之中
的任何一個位置，而且放幾個插圖都行，
嘛！
情況2
如同一個單獨的文字一樣可以成為一個段落一樣，一張插圖當然也可以單獨成為一個段落，如同下面這個段落所示：
上面是往左對齊的情況，也可以對中：
對右當然也沒問題：
情況3
網頁中的插圖也可以放在標題與條列與表格之中，或任何其他的網頁結構之中。以下是放在條列中的示範：
我愛蘋果
以下是放在表格中的示範：
蘋果 鳳梨 蓮霧 情況4
複製在隨處貼上當然是更沒問題啦，請看：
4. FrontPage中插入圖片與編輯
插入圖片
在網頁中先利用滑鼠點選要插入圖片的位置，再利用FrontPage中的「插入→圖片→從檔案」的命令在網頁中插入圖片。利用命令列上「從檔案插入圖片」的小圖示也可以直接快速的達成這項命令。
圖片屬性編輯
插入圖片後，以滑鼠右鍵點選圖片，並選擇「圖片內容」命令，可以對圖片的屬性做非常仔細的編輯。
利用插圖製作連結
如同文字可以製作連結，網頁中的圖片也是可以製作連結的，例如利用這張圖片
，製作成可以連至「青草湖社區大學第五季選課手冊」的連結，大家不妨用滑鼠點點看：
網頁中的插圖製作成連結後，會出現與文字連結顏色相同的邊框，以提醒讀者這張圖片是做成連結的。在有些「拼圖」製作連結的情況，插圖連結的邊框可能會影響到整體的設計，這時我們可以編輯插圖的屬性(利用「圖片內容→外觀→框線粗細」，並將框線粗細設定為0)，將邊框隱藏(還是有連結)，如下圖所示，請大家用滑鼠點點看：
5. 網頁插圖練習
- 練習1：原始檔案recommend-raw.html，完成檔案recommend.html。
- 練習2：原始檔案preface-raw.html，完成檔案preface.html
- 練習3：原始檔案storage-raw.html，完成檔案storage.html
二、網頁背景顏色設定
網頁是可以設定背景顏色的。我們之前已經提過，電腦的顏色是由R、G、B三原色組成，電腦上不同的顏色都有不同的RGB值。在網頁中，指定背景的顏色，即指定背景顏色的RGB值。
在FrontPage中，利用「檔案→內容→背景→色彩」的命令來指定網頁背景顏色。在此FrontPage提供幾組非常傻瓜的顏色，如果想進一步找尋更多顏色的選擇，可以利用「其他色彩→自訂」叫出Windows的調色盤，在調色盤中利用滑鼠點選可以慢慢的找出自己想要的顏色。利用滑鼠在調色盤中點選時，請大家注意RGB值的變化。
值得注意的是，很多情況下，網頁不能只單單指定背景顏色而不考慮文字顏色的搭配。如設定顏色較深的背景，網頁中的文字就需設定成反白顏色的效果，文字才能閱讀。如以黑色為背景，文字就不能設定成黑色，需要設定成較淡的顏色。所以網頁中的顏色設定，要將背景、文字的顏色「成套」的來設計，包括：
- 背景顏色
- 文字顏色
- 超連結的顏色
- 瀏覽過的超連結的顏色
- 使用中的超連結的顏色
請看《烘焙姬網路文化雜誌》各期封面的背景、文字顏色的設定。
三、網頁背景圖
網頁也可以設定一張背景圖，好像網頁是印在一張有花紋、材質、質感的紙張上一樣。網頁的背景圖，是利用「貼馬賽克瓷磚」的方法，將一張小小的、花紋連續的圖片，重複的在畫面上鋪設而成，如本頁的背景圖。
如同前面所介紹，網頁中的背景圖片的圖檔，建議也放在跟該網頁相同的資料夾中，以利管理。在FrontPage中，利用「檔案→內容→背景→背景圖片」的命令來指定網頁的背景圖片。
讀者瀏覽網頁時，背景圖也是需要花時間下載的，所以背景圖在「檔案尺寸」與「檔案大小(File Size)」上是越小越好。另外，由於背景圖的的花紋、材質其實是會干擾文字的可閱讀性的，建議背景圖的花紋、材質是越素越好。如果沒有絕對的必要，可以考慮不要設定背景圖。
四、本週進度指定作業
- 《看圖例學HTML》，第五章、第六章，65-99頁
- 《我的第一本彩色書Photoshop 5》，第一課、第二課
- 《青草湖社區大學「電腦生活與網際網路介紹」教材》，第二章、數位影像簡介--大家來用數位相機
mailto:jdz@mail.bamboo.hc.edu.tw/
