Transcript photoimpact-5 - www2.chihlee.edu.tw

快速製作網頁
著作權所有 © 旗標出版股份有限公司
本章提要
18-1 建立網頁
18-2 製作網頁背景
18-3 加入 HTML 文字物件
18-4 儲存網頁
18-5 製作影像地圖
18-6 製作網頁相簿
2
以 PhotoImpact 製作的網頁
3
18-1 建立網頁
開新網頁
Web 內容
4
開新網頁
請執行『檔案/開新檔案/開新網頁』命令, 開
啟開新網頁交談窗。
5
開新網頁
版面設定區：設定標題及編碼方式。
6
開新網頁
頁面大小區：可在此區設定網頁大小。
7
開新網頁
建立背景區：勾選建立背景可選擇背景為色
彩或是影像。
8
選擇背景材質
開啟 Web 背景影像交談窗後, 可以從預設
材質中, 選擇自己喜愛的材質當背景, 或是使
用背景設計師自行對內建材質做編修, 也可
以用現成圖片來當背景。
9
Web 內容
完成開新網頁設定後, 接著我們要宣告網頁
的標題、作者、關鍵字...等相關資訊。請按
下開新網頁交談窗中的細節鈕, 開啟 Web 內
容交談窗。
10
Web 內容
11
Web 內容
標題：顯示在瀏覽器標題列左上角之標題文
字。
作者：不填寫此欄位不影響網頁各項功能,
只是做為辨識用的資訊。
關鍵字：輸入與網頁內容相關的文字, 這樣
其他人才能藉由搜尋引擎找到該網頁 (關鍵
字與關鍵字間, 請以逗號做分隔)。
12
Web 內容
描述：敘述網頁的內容, 同樣是辨識用的資
訊, 通常都只是作者記錄給自己看的訊息, 以
方便日後修改。
「我的最愛」圖示：選擇一個具有代表性的
圖示, 當其他瀏覽者將
你的網頁加入到我的最
愛時, 可在我的最愛中
看到此代表性的圖示
(此功能只適用於
Internet Explorer)。
13
Web 內容
編碼：讓瀏覽器能夠顯示網頁的正確語系,
若您製作的網頁是中文, 那麼就要選擇繁體
中文 (Big5), 否則網頁中可能會出現亂碼。
14
18-2 製作網頁背景
百寶箱中的網頁背景
背景設計師
個人化背景 DIY
15
百寶箱中的網頁背景
執行『工作區/面板/百寶箱』命令, 可以由填
充圖庫中取得背景材質來使用。
16
百寶箱中的網頁背景
這樣就完成材質取得了, 接下來你只要將這
張圖片儲存起來, 就能夠直接應用到網頁中
做背景, 瀏覽器會自動將這個背景方塊並排,
填滿整個網頁, 而且並排交接處不會有接縫,
使用內建材質就是有這樣的好處。
17
華麗眩目的材質混合
填充圖庫中的材質混合項目, 裡面的材質也
很適合拿來做為網頁背景, 不過材質混合項
目內的縮圖無法直接拉曳出來成為圖片, 您
必須先按下開新影像鈕建立出一張新圖片
(尺寸不用太大, 約 160 × 120 像素或 320 ×
200 像素即可), 再將材質拉曳入新圖片中。
18
華麗眩目的材質混合
19
華麗眩目的材質混合
20
淡化背景
在選擇背景的同時, 必須注意到網頁背景圖
片最好不要太花俏, 以免造成頁面文字閱讀
的困難, 若堅持背景要用複雜圖片, 那麼就將
整張基底影像轉成物件 (取消勾選保留基底
影像), 然後調整物件的透明度, 把圖片淡化
到可以突顯網頁內容的程度即可。
21
淡化背景
22
背景設計師
針對內建的背景材質, 若仍有需要改變的地
方, 可使用 PhotoImpact 所提供的背景設計
師直接修改內建的圖片。請執行『網路/背
景設計師』命令來開啟：
23
背景設計師
24
背景設計師
A.產生影像方式：選擇產生新的並排方塊, 會
建立一個獨立的圖檔。套用至影像項目, 是
對開啟的圖片做更改, 所以必須在有開啟圖
片的情況下, 才可勾選此項。
B.方格大小：設定圖片尺寸大小。
C.模式：選擇圖片類型。
D.背景類型：改變圖片類型的花紋。
E.調色盤：調整圖片顏色。
F.屬性：調整各項屬性值。
25
個人化背景 DIY
在使用自己準備的圖片製作背景時, 必須注
意到, 除非圖片經過準確的安排製作, 否則接
縫問題是難以避免的。
26
個人化背景 DIY
1. 請先執行『檔案/開啟舊檔』命令, 開啟自
己準備的照片 (練習檔 18-01.jpg), 並使用
工具面板內的標準選取工具在圖片中拉曳
出一個選取區。
27
個人化背景 DIY
2. 執行『網路/建立無接縫並排影像』命令,
於交談窗中調整影像合併參數。
28
個人化背景 DIY
3. 按下預覽鈕, 可預覽調整參數後的圖片合併
情形, 預覽中按下滑鼠左鈕可停止預覽, 按
下確定鈕後儲存就可以拿來做為背景了。
29
影像位移
有時候您可能覺得網頁背景的並排效果太過
死板, 這時可以利用影像位移功能, 將影像中
的物件變更位置, 使背景看起來更為自然。
30
影像位移
1. 請開啟一個新的網頁, 選擇練習檔 1802.jpg 做為背景, 並按下確定鈕。
31
影像位移
2. 執行『網路/影像位移』命令開啟影像位移
交談窗, 在預覽視窗中, 拉曳圖片到左上角
的位置後, 按下確定鈕完成位移。
32
影像位移
33
影像位移
3. 最後執行『檔案/儲存 Web/存成 HTML』
命令, 儲存完畢後開啟存檔的網頁。
34
18-3 加入 HTML 文字物件
在 PhotoImpact 中, 為網頁加入文字的方式
有兩種；一種是使用文字工具 , 它可以將文
字儲存成圖片再放置到網頁上, 所以並不是
純文字。另外一種則是待會兒將要提到的
HTML 文字物件, 其所輸入的文字, 在儲存為
網頁後, 仍會維持純文字型態而非圖片。
請開啟一個新網頁, 並執行『網路/HTML 文
字物件』命令, 開啟 HTML 文字輸入方塊交
談窗：
35
加入 HTML 文字物件
36
加入 HTML 文字物件
37
設定超連結
超連結是一種連結的技巧, 各個文件之間透
過已定義好的關鍵字就可以互相連結。只要
在 HTML 文字輸入方塊交談窗的文字欄位
中, 選取要設定為超連結的文字, 然後按下
鈕, 就可以開啟超連結交談窗來設定。
38
設定超連結
39
設定超連結
40
18-4 儲存網頁
 設定好網頁的內容, 只是完成排版工作而已,
若要能直接成為在網路上瀏覽的格式, 還必
須儲存成網頁格式, 才能夠放置在網路上供
人瀏覽。
1. 當網頁版面編輯完成後, 只能說是圖片格式,
請執行『檔案/儲存 Web/存成 HTML』命
令, 儲存為適合網路上瀏覽的 HTML 網頁
格式。
41
儲存網頁
42
儲存網頁
2. 儲存完成後, 在你所存放的資料夾中, 會自
動產生一個名為 images 的資料夾, 所有的
圖片都會放在裡面, 另外一個就是你自己命
名的 HTML 檔。
43
儲存網頁
3. 雙按所儲存的
HTML 網頁格式檔,
會開啟瀏覽器來瀏
覽網頁, 可以檢查
頁面是否還需要修
改。
44
儲存時發生錯誤？
當您執行『檔案/儲存Web/存成 HTML』命
令來儲存網頁時, 若是出現錯誤訊息, 表示影
像中有些物件的位置重疊了, 或者是影像切
割沒做好…, 所以 PhotoImpact 沒辦法做轉
換, 您可以試著調整物件的位置再進行處理。
45