Saturday, January 02, 2010

Firewroks之四--分割

目標
明白切割的用途,並理解讓網站資料「以少御多」的要領。

步驟

實例

一、前置作業
  1. 下載work4.zip
  2. 解壓縮後會有個資料夾work4,內有資料夾images及img。
二、為index.html更名備用
  1. 用Fireworks開啟index.png。
  2. 檔案」>「匯出精靈」,取名index.html。
  3. 進入電腦的images資料夾,複製index_r2_c1.jpg,貼入,將新複製檔更名為left.jpg。
  4. 同上,將index_r2_c8.jpg複製及貼入,更名為right.jpg。
  5. 同上,將index_r3_c2.jpg複製及貼入,更名為main.jpg。
  6. 在Dreamweaver開啟index.html。
  7. 點按作業區左側的切割圖index_r2_c1.jpg,在屬性欄內之原始檔欄位內之index_r2_c1.jpg改為left.jpg;
  8. 點按作業區右側的切割圖index_r2_c8.jpg,在屬性欄內之原始檔欄位內之index_r2_c8.jpg改為right.jpg;
  9. 點按作業區右側的切割圖index_r3_c2.jpg,在屬性欄內之原始檔欄位內之index_r3_c2.jpg改為main.jpg。
  10. 檔案 > 另存新檔,檔名為index1.html,路徑與index.html同。(這是重點)
三、在Fireworks另建新檔並做分割
  1. 開啟index.png。
  2. 匯入一圖片,例如書本。
  3. 從工具列選用「分割工具」,在作業區加入一個分割,修正其大小及位置,使與上一步驟的圖片相同。
  4. 儲存為book.bng。
  5. 匯出精靈,檔名為index.html。
    這會蓋過之前做個的index_r2_c1.jpg;index_r2_c7.jpg及index_r3_c2.jpg的圖像。
四、修改index.html中的圖像,並另存新檔
  1. 把名為books.jpg、love.jpg、flower.jpg、moon.jpg、fish.jpg的圖像檔置入images資料夾內。
  2. 在Dreamweaver開啟index.html,另存新檔為02_book.html。
  3. 選擇書本的圖像,在屬性編輯區將該圖像所對應的index_rx_cx.jpg更名為books.jpg。
  4. 儲存檔案。
  5. 另存新檔為03_love.html,選擇書本的圖像,在屬性編輯區將該圖像所對應的books.jpg更名為love.jpg。
  6. 儲存檔案。
  7. 另存新檔為04_flower.html,選擇情侶的圖像,在屬性編輯區將該圖像所對應的love.jpg更名為flower.jpg。
  8. 儲存檔案。
  9. 另存新檔為05_moon.html,選擇花朵的圖像,在屬性編輯區將該圖像所對應的flower.jpg更名為moon.jpg。
  10. 儲存檔案。
  11. 另存新檔為06_fish.html,選擇月亮的圖像,在屬性編輯區將該圖像所對應的moon.jpg更名為fish.jpg。
  12. 儲存檔案。
  13. 檔案>於瀏覽器中預覽>IE。
五、回復最早先的index.html
  1. 開啟index1.html。
  2. 另存新檔index.html,蓋過。
討論
本練習中,我們讓每個html檔共用許多的indx_rx_cx.jpg,可減少瀏覽者耗時下載之苦。

Firewroks之三--匯出

目標
將做好的Fireworks作品匯出以利Dreamweaver編輯

步驟
當你匯出你的文件時, Fireworks為所有的分割轉存為個別的檔案。它也同時產生在瀏覽器所需的所有的HTML及JavaScript碼。Fireworks輕易將這些圖像轉存到你以Dreamweaver製作和管理的網站上。

一、匯出成html
(方法一)
  1. 從主選單選擇「檔案」 > 「匯出」。轉存文件會製作一個HTML檔也為每一分割製作一圖像檔。為了易於之後移除這些檔,將它們轉存到新的資料夾。
  2. 選擇儲存位置,點按「新檔案夾」鈕,並為該資料夾取名,要確定該新資料夾的名稱出現在對話框的上方。「」
  3. 接受內定base name(基底名稱)之設定,Fireworks以該名稱來做HTML檔的名稱,並以該名稱為基底來為因分割所產生的GIF及JPEG檔命名。
  4. 你能夠點按Setup鈕來修改Fireworks為檔案命名的方式,以及設定轉存HTML的其他特性。
    從Slicing的彈現式選單內選擇Use Slice Objects,這會確保所有的按鈕、behavior及最佳化於瀏覽器內展現時會正常運作。
  5. 從Style彈現式選單內選擇Dreamweaver 3,這會產生在Dreamweaver 3使用該檔時的最適佳化HTML碼。
  6. 確定Location彈現式選單被設在Same Directory(同一目錄)。此一選項讓你指定所儲存的HTML檔與轉存的圖像之關係。你也能夠將所有的HTML拷貝到Clipboard(剪貼板)並將之直接貼到Dreameweaver檔內。
  7. 點按Save (Windows) or Export (Macintosh)將該檔轉存。該HTML檔現在能夠在瀏覽器內來觀看或者在Dreamweaver內做進一步的修改。
    若你想一睹為快,可在Web瀏覽器內預看該HTML。
  8. 開啟一個網頁瀏覽器,選擇File > Open > Page in Navigator (Netscape Navigator)或File > Open (Microsoft Internet Explorer),並選擇你所轉存的HTML檔。
  9. 你也能夠直接從Firewroks選擇File > Preview in Browser,並選定瀏覽器直接來看。若未見瀏覽器,則選Set Browser加入Primary(第一)及 Second (第二 )個瀏覽器的名單內。
  10. 試完該轉存的HTML檔,回到Fireworks並關閉該檔。
(方法二) 匯出精靈
  1. 從主選單選擇「檔案」 > 「滙出精靈」。
  2. 點按「繼續」。
  3. 圓點圈選「Dreamweaver」。
  4. 點按「繼續」。
  5. 點按「結束」。
  6. 點按「繼續」。
  7. 點按「匯出」。
  8. 設定檔名,如index.html。
  9. 鉤選「包含不含分割的區塊
  10. 鉤選「將影像放入子資料夾
  11. 點按「匯出」。
二、在Dreaweaver讀取及編輯html
  1. 啟動Dreaweaver
  2. 開啟html檔。