PhotoImpact網頁製作應用

陳丁嘉 編

一、網頁影像製作快速入門篇

1.設定個人網頁風格:配色、圖案標誌

在開始進行網頁設計前,一定要先設定好網站的主題、配色,規劃好整個網站的組織架構,想想看大概會用到幾頁網頁,網頁裡面需要放進哪些東西,必要的時候,可以先畫一些組織架構和網頁版面的草圖,千萬不要邊做邊想,以免事倍功半!

 

2.網頁圖像的範圍:標題、按鈕、水平線、影像圖片、裝飾小圖……

我們雖然可以只用PhotoImpact就做出美美的網頁,可是,總是會覺得有點兒礙手礙腳的,其實網頁圖像的製作與處理才是展現PhotoImpact功力的地方,而網頁的編排就交給FrontPage吧!

在網頁裡常會用到的圖像大概有標題、按鈕、水平線(分隔線)、影像圖片、裝飾用的小圖、項目圖示等等。這些常用的圖像大致可以分成JPG格式和GIF格式兩大類:

JPG格式:可顯示全彩16777216種的顏色,影像本身經過壓縮,所以檔案並不大。大多用於照片或顏色多而複雜的圖片。

GIF格式:只能顯示256色,檔案本身並沒有壓縮,但是可以用來製作去背景的圖片及動畫圖檔。一般多用於不規則圖形,像:裝飾圖片、小圖示,和動畫圖片。

可用的圖檔格式當然不只是這兩種,若您有興趣,不妨再參閱其他相關書籍,做進一步研究。

 

3.PhotoImpact的網頁元件設計師

PhotoImpact在處理網頁圖像方面最實用的大概就是元件設計師了!我們可以從功能表列中的[網路/元件設計師]找到它。

打開元件設計師後,可以看到有標幟、項目符號、按鈕、按鈕列、圖示、JavaScript按鈕、分隔線七大類範本。

按一下範本前面的,就可以打開範本中不同的類別。點選想要的類別後,右邊會出現該類別中包含的元件,選取所要的元件後,按[下一步]。

按照元件設計師提供的指示,經過一連串的修改,修改成自己需要的樣子後,就可以按[匯出/作為元件物件]。

處理完成的元件就會被放進PhotoImpact的工作區等待做進一步的處理或存檔後供您使用FrontPage製作網頁時插入使用。

 

二、網頁影像製作進階篇

1.設定個人網頁的風格

這個好像不需要用到PhotoImpact吧!

 

2.背景圖片製作

從功能表中的[網路/背景設計師]中,可以叫出[背景設計師]做出獨一無二的背景圖片。

首先點選[產生新的並排方塊],方塊的大小設為80×80,接下來,每個選項都給它試試看,調配出自己想要的背景圖案後,再按[確定],就做好了一張背景圖片,將它存檔起來,就可以用FrontPage叫出來用囉!

 

3.網頁標題製作

從功能表中的[網路/元件設計師]中,選取[標幟]範本,再按一下[標幟]前面的,打開內含的類別,從類別中選去喜歡的圖片,然後按[下一步]。

依序選取左下方的各個組成部分,再修改右邊的詳細內容設定,修改好後,再按[匯出/作為元件物件]。

最後就是存檔了,為了將來還可以將這個工作檔案叫出來修改,最好先將它存成PhotoImpact專用的UFO檔格式,然後再重新存一次,存成JPG或GIF格式。

 

4.水平線製作

從功能表中的[網路/元件設計師]中,選取[分隔線]範本,再按一下[分隔線]前面的,打開內含的類別,再選喜歡的圖片,然後按[下一步]。

依序選取左下方的各個組成部分,再修改右邊的詳細內容設定,修改好後,再按[匯出/作為元件物件]。

最後當然是存檔了,為了將來還可以將這個工作檔案叫出來修改,我們一樣先將它存成PhotoImpact專用的UFO檔格式,然後再重新存一次,存成JPG或GIF格式。

其他範本使用方法都很類似,就請您自己試試看囉!

 

5.JavaScript按鈕製作

我們在逛網站時,常常可以在網頁中看到有一種按鈕,當我們將滑鼠移到按鈕上,和按下按鈕,按鈕的樣子都會改變,這個就是JavaScript動態按鈕。

想做出JavaScript動態按鈕,PhotoImpact也可以做到喔!首先在PhotoImpact的功能表列中按[網路/元件設計師],進入後,選擇[JavaScript按鈕],按打開內含的類別,選擇一組喜歡的圖案,再按[下一步]。

進入按鈕的編輯設定後,在[JavaScript按鈕]中選擇[超連結]頁,在[URL]中填進按下這個按鈕要連結的網頁檔名。在[替代文字]中,填入當按鈕圖案還沒下載到訪客的電腦時,對方可以先看到的文字提示。

接下來就可以修改按鈕在[正常]、[滑鼠停駐]、[滑鼠按下]三種狀態下顯示的標題、色彩、材質等,將它們修改成我們想要的樣子。

[預覽]頁中,我們可先看修改後的效果,如果不滿意,再回去修改。

最後,我們要將這個動態按鈕匯出,按[匯出/至HTML]將這個動態按鈕打包成一個完整的HTML文件,然後我們就可以將它剪貼到FrontPage中了。

動態按鈕列:如果想要做一整排的動態按鈕列,方法也很類似。首先在功能表列中按[檔案/開新檔案],[底色]選擇[web背景],再按一下旁邊的方塊,選擇一個漂亮的背景。[影像大小]選擇[使用者自訂],大小設為150×500像素,然後按[確定]

先用元件設計師做好一個動態按鈕,再將它拖進我們剛才做好的背景圖中。在按鈕上按滑鼠右鍵,選[再製],看要幾個按鈕,就按幾下[再製]。

選擇工作區左邊工具箱中的[挑選工具],將按鈕大概排列一下。然後按住鍵盤上的[Ctrl]不放,選取所有按鈕。按工作區上方屬性工具列中的[水平置中]鈕,讓按鈕全部水平置中對齊。

再按滑鼠右鍵,選擇[對齊/物件等距],在設定中,[方向]選「垂直」,[距離]選「相等(將物件固定在兩端)」,最後再按[確定],所有的按鈕就會很有規矩的排排站了。

在按鈕之外按一下滑鼠左鍵,取消所有物件的選取。在第二個按鈕上按滑鼠右鍵,選[編輯元件],就可以回到元件設計師中修改按鈕了。將所有的按鈕修改好後,先按[檔案/另存新檔]將整個動態工具列存成UFO物件檔,將來還可以繼續修改,然後再按功能表列中的[檔案/儲存web/存成HTML],將整個動態按鈕列存成一個完整的HTML文件。

怎樣在FrontPage中加進PhotoImpact做的動態按鈕列 <範例>

方法1FrontPage的HTML模式下,將按鈕相關的HTML碼複製到要放動態按鈕的位置就可以了。要放進去的HTML碼大致可以分成兩個部分:

<head></head>之間的JavaScript程式碼:我們必須將PhotoImpact做出來的動態按鈕列的HTML文件中的<SCRIPT LANGUAGE=JavaScript TYPE=text/javascript>到</SCRIPT>之間所有的程式碼通通複製到FrontPage網頁的<head>和</head>之間。而且在網頁中出現幾個動態按鈕,在這一段程式碼的最後部分,就會有幾行相對應的AddImageToImageList("rollover……

<body></body>之間:在動態按鈕列的HTML文件中的<body></body>之間,可以找到代表按鈕的相關HTML碼,這些也必須通通複製到FrontPage目標網頁的HTML內文當中。

方法2利用網頁分割處理動態按鈕列:如果您覺得上面那個方法太麻煩了,您也可以利用FrontPage的網頁分割功能,將整個動態按鈕列檔案當作左邊分割頁的目標檔案。

 

6.影像圖片處理與最佳化

網頁圖檔必須要考量的兩大因素,一是圖形品質,一是檔案大小。檔案太大,不僅增加硬碟儲存的容量,也會延長網頁訪客下載的時間。下載的時間越久,就代表網頁訪客在電腦前枯等的時間越久,有時候訪客等不下去了,就乾脆到別的網站去逛了,相信這也是你我共同的網路經驗吧!

一般人可以接受的時間延遲大約是30-40秒,如果超過這個時間,很多人就等不下去了,所以,照這樣推算,一個網頁連圖片加文字最好不要超過100K。在用FrontPage編輯網頁時,可以在畫面右下角看到網頁下載的大約時間,如果要花超過30-40秒,就代表您的網頁也要減肥囉!

影像最佳程式:圖片檔案的大小可以透過PhotoImpact的影像最佳化程式進行減肥。我們可以從PhotoImpact的功能表中的[網路/影像最佳化程式]進入影像最佳化程式。下面介紹常用的JPG和GIF格式選項設定:

JPG選項設定:在畫面中左方是壓縮前的圖片,右方是壓縮後的圖片,畫面下方的[JPEG選項]中的[品質]是我們最常用來控制影像品質和檔案大小的設定,一般而言,我們都將品質設定75左右。而[模式]則選擇「漸進式」,讓訪客在等待圖片傳輸時,可以先看到大致的樣子。

GIF選項設定:和JPG很像,其中[色彩]可以設定使用的色彩數,色彩數越少,檔案越小,但是圖片的失真也越嚴重。[透明度]可用來設定去背景的透明色。[交錯型的功用則是和JPG的漸進式相似。

修改圖片尺寸大小:圖片本身尺寸的大小也直接影響檔案的大小。所以網頁圖檔盡量不要太大,以800×600dpi的螢幕解析度而言,400×300dpi的圖片就已經夠大了。想調整圖片尺寸大小,可以從功能表中的[格式/尺寸]調整,在新影像的設定選項中,勾選「使用者自訂」,將[單位]設為「像素」,勾選「等比例」以免調整後的圖片變形,最後按[確定]即可完成圖片大小的調整。

 

7.影像地圖製作

我們在一張網頁的圖片中按下不同的位置,就可以連結到不同的目標網頁,這個就是網頁地圖。PhotoImpact也有提供網頁地圖的製作方法。

首先我們先用[檔案/開啟舊檔]打開一張圖片當作底稿,在這一張圖片中,使用工作區左方工具箱的[標準選取工具],選取準備用來當作連結的部分,然後利用在功能表中的[選取區/轉成物件],將選取區轉成物件,重複這個動作,將所有準備要當連結的部分通通轉成物件。

在功能表中按[網路/影像地圖],就可以進入影像地圖的設定畫面了。在設定畫面上方可以看到整張影像地圖,左下方會依序列出所有可供連結的物件,點選想要做連結的物件後,在右下方的超連結設定中,[URL]輸入要連結的網頁檔名,[目標框架]選擇「_blank」讓目標網頁開啟在新的網頁中,[替代文字]中可輸入當圖片還沒下載到訪客的電腦時,對方可以先看到的文字提示,[狀態列]中可輸入想顯示在瀏覽器狀態列中的文字訊息。

依序設定好各個部分的連結後,按[確定]即可完成影像地圖的設定。這時候PhotoImpact會好心的跳出一個對話方塊,提醒我們影像地圖的輸出順序,將它按[確定]關閉後,我們就可以按[檔案/儲存web/存成HTML]將影像地圖輸出成一個完整的HTML文件了。

其實偷偷告訴您喔!用FrontPage製作影像地圖,比用PhotoImpact簡單多了。只要用FrontPage打開用來做影像地圖的底稿,再用圖片工具列中的矩形、圓形、多邊形工具圈出要連結的部分,每圈出一個部分,FrontPage就會請您設定圈選區要連結的網頁及相關設定,最後按[確定],再將網頁存檔,就完成了影像地圖的製作。

 

三、網頁分割(Frame)

1.分割的目的

網頁分割(Frame)在現在的網站已經變成「人人必備」,甚至有點兒「浮濫」的技巧了。這個技巧用的好的話,可以讓訪客在瀏覽網頁時覺得很方便,可是過度分割卻會使畫面被切的破碎凌亂,也會讓訪客無所適從。

網頁分割的特色,是可以讓訪客從不同的分割畫面中同時看到幾個不同的HTML文件,而且每個畫面也可以彼此呼應,彼此分工,如:一個秀出索引,一個秀出主要圖文,一個秀出網站標題等等。

 

2.分割的類型

網頁分割有哪些類型呢?其實說穿了,就是你想怎麼切就怎麼切,大不了就是功力好的人切起來很漂亮,功力弱的人切起來就沒那麼順眼了。以下是一些常見的分割的樣子:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.分割實例操作

PhotoImpact做網頁分割簡直就是自找麻煩!勸您還是改用功能強大的FrontPage吧!

四、會動的圖片

我們在網路上看到的動畫圖片,大部分都是GIF格式的動畫,它的原理就像卡通動畫一樣,把好幾張連續的靜態影像疊在一起,然後再連續播放,就會讓人覺得它在動了。

1.用PhotoImpact做動畫圖片

PhotoImpact的百寶箱中的圖庫,有一個[動畫圖庫],裡面包含了影像動畫、光線動畫、文字動畫三個部分。

首先我們先叫出一個圖片當作底稿,再從光線圖庫中選擇一個特效,將這個特效拖到底稿中,這時候就會出現相關的設定對話方塊,修改好各樣的設定後,按下[確定],選擇[儲存動畫檔與建立新的物件],即可開始進行存檔動作。

2.用GIF Animator做動畫圖片

先用PhotoImpact做好幾張連續的圖片並存檔,開啟GIF Animator,並用[新增影像]將這些連續圖片加進GIF Animator的工作區。選擇[預覽]頁,就可以看到動畫的效果了。

為了幫這個動畫檔案減肥,我們必須用[最佳化]頁中的設定來進行減肥計畫。如果您懶得去設定相關條件,可以直接按[立即最佳化],由GIF Animator程式為您操刀,保證效果一流!

經過瘦身之後,我們可以再切換到[預覽]頁,看看動畫檔案瘦身後的成果,如果滿意,就可以按[檔案/另存新檔]將精心製作的動畫檔案儲存起來囉!