建立Div区块制作网页相簿.PPT

製作相片展示版面與行為面板、超連結的應用 第 10 堂課 本堂課重點 10-1 製作 Flash 影像檢視器 10-2 建立 Div 區塊製作網頁相簿 10-3 行為面板的應用 10-4 建立下載檔案的超連結 10-1 製作 Flash 影像檢視器 相信你一定看過不停切換播放的相片幻燈片, 不用動手操作就能一張張地瀏覽相片。在旅遊攝影範例網站中, 我們也規劃了一個放置幻燈片的位置, 且固定出現在網頁右下方, 用來播放團友所拍攝的精彩作品, 這部份我們將利用Dreamweaver 的影像檢視器來完成。 製作 Flash 影像檢視器 製作 Flash 影像檢視器 用 Flash 影像檢視器來展示相片最大的好處就是不佔空間, 即使有多張想要展示的相片, 也只會佔用約一張相片的位置 (還包含控制面板等空間), 當你想要展示多張照片, 又擔心版面空間不夠充裕時, 就可以製作成 Flash 影像檢視器,讓相片在網頁中輪番播放。 製作 Flash 影像檢視器 準備展示的相片 插入影像檢視器 「Flash 元素」面板相關屬性設定 準備展示的相片 在 Dreamweaver 製作的影像檢視器, 是將多張相片及控制器包裝成一個 .swf檔, 並以屬性控制是否顯示面板、開/關自動播放功能…等, 所以在製作前, 最好先備妥要展示的相片, 方便之後的設定步驟。 網站上要展示的相片, 是由參加旅遊的團友所拍攝, 通常原始的相片尺寸會太大, 加上每個人拍攝的檔案格式、尺寸可能不同, 這都得事先處理才行。 準備展示的相片 雖然將相片放入 Flash 影像檢視器後, 會依影像檢視器的播放範圍自動縮放相片大小,不過當相片尺寸太大時, 可能會讓相片顯示的速度稍受影響, 因此先縮小、固定相片尺寸, 可以避免播放不順暢的情況發生。 準備展示的相片 選好相片後, 請到影像處理軟體調整相片的尺寸。根據放置 Flash 影像檢視器的區塊大小 (寬約 250 像素), 將相片尺寸縮小至寬 220 像素 (左右兩邊預留空白), 高則設定為 165 像素。 請將相片儲存在同一個資料夾。由於稍後製作的 Flash 影像檢視器將會建立一個 .swf 檔案, 所以我們在範例網站內建立一個 flash 資料夾, 專門用來儲存處理好的相片及稍後要建立的 .swf 動畫檔案。 準備展示的相片 插入影像檢視器 Flash 影像檢視器是一個獨立的面板, 通常我們會先製作網頁中其它的內容, 並預留影像檢視器的位置, 這裡為節省您製作網頁其它內容的時間, 已大致將網頁內容規劃完成, 你可以開啟 Ch10 資料夾下的 ex10-01.html, 再跟著以下的說明進行操作。 將插入點移至要放置影像檢視器的置, 此例規劃的位置是在網頁右側說明文字的上方, 請將插入點移至如圖的位置： 插入影像檢視器 插入影像檢視器 接著執行『插入/媒體/影像檢視器』命令, 此時會開啟儲存 Flash 元素交談窗,因為稍後會建立一個 .swf 檔, 所以要先設定 .swf 檔的儲存位置。還記得在準備相片時, 建立了一個 flash 資料夾嗎？將 .swf 檔也一併存在這個資料夾吧！ 插入影像檢視器 插入影像檢視器 回到網頁編輯畫面, 就會看到插入點位置出現了一個灰色的影像檢視器範圍, 但這個範圍預設會超過網頁邊界, 所以請先選取影像檢視器, 再由下方的屬性面板如下圖設定尺寸,讓它可以剛好放入預先安排的位置上： 插入影像檢視器 插入影像檢視器 接下來要設定播放的相片。請再次選取影像檢視器, 然後在 Flash 元素面板中按一下 imageURLs 屬性右 側的欄位, 就會出現 一個 圖示, 再按一 下圖示： 插入影像檢視器 按下 圖示後會開啟如下的交談窗, 讓我們設定要播放的相片。 插入影像檢視器 請如圖建立 5 個項目, 分別指定成準備好的相片, 再按下確定鈕。 插入影像檢視器 回到編輯畫面, 還有 2 個屬性需要特別設定。預設的影像檢視器會關閉自動播放功能, 請將Flash 元素面板中的 slideAutoPlay 欄位設定 為是, 表示啟動自動播放 功能；再將 slideLoop 欄位設定為是, 表示啟動 循環播放功能： 插入影像檢視器 整個 Flash 影像檢視器的基本設定步驟都完成了, 請儲存網 頁後按下 F12 鍵預覽看看 效果。 「Flash 元素」面板相關屬性設定 預覽之後, 你可能對於相片的切換效果、播放時間、背景顏色等細節不太滿意,這些都可以再回到 Flash 元素面板來加以設定。以下我們就針對常用的選項為您做說明： 「Flash 元素」面板相關屬性設定 「Flash 元素」面板相關屬性