Firewroks之二--按鈕

目標
在Fireworks製作按鈕。

步驟
一、做按鈕外形

1. 以向量工具（如圓或矩形）畫一按鈕外形。
2. 按Ctrl +X，剪掉按鈕外形。
   
3. 從主選單選擇「編輯」>「插入」> 「新增按鈕」。
   此時會出現按鈕對話框。
4. 按Ctrl +V。
   將按鈕外形貼入。
   
5. 從主選單選擇「視窗」 > 「對齊」。
6. 在對齊視窗內點按「畫布」，再按「水平置中對齊」，續按「垂直置中對齊」。
7. 在按鈕編輯器內修改按鈕外形的屬性。

二、疊上文字

1. 從工具列選取「文字」工具，在按鈕外形內鍵入文字如Home。用游標選取文字，選用視窗下方的「置中對齊」。
2. 從主選單選擇「視窗 > 「對齊」。
3. 在對齊視窗內點按「畫布」，點按「水平置中對齊」，續按「垂直置中對齊」。
4. 點按「滑過」標頭，點按視窗下方的「拷貝一般圖像」
   如此，會將「一般」標籤內的圖像拷貝到「滑過」關鍵影格內。
5. 點按視窗下方的功能，改變「滑過」標頭內之圖像的外框與內填色彩。
6. 點選「按下」標頭，點按視窗下方的「拷貝滑過圖像」。
   如此，會將「滑過」標籤內的圖像拷貝到「按下」標籤內。
7. 點按視窗下方的功能，改變「按下」標頭內之圖像的外框與內填色彩。
8. 點按「按下後滑過」標頭，點按視窗下方的「拷貝按下圖像」。
   如此，會將按下」標籤內的圖像拷貝到「按下後滑過」標籤內。
9. 點選「作用區域」標頭，點按視窗右下的「完成」。
10. 指定URL：點選「Active Area」標頭，點按視窗下方的「Link Wizard...」，在「Link Wizard...」視窗內點選「Link」標頭，在「URL」內鍵入指定的位址如http://cd.ntit.edu.tw。
11. 關閉Button編輯器。

三、複製按鈕

1. 將作區內的按鈕移到定位，按住「Alt」鍵（Windows）或Option鍵（Machintosh），把按鈕拉移以複製之。
2. 重復上述步驟數次，迄完成所需之按鈕數。
   
3. 點按新複製的按鈕，在作業區下方的屬性欄在之「文字」欄位內更新該按鈕文字如Home改為News。
4. 點按「連結」標頭，更改URL。
5. 為其他按鈕重復上3.及4的動作。

四、修改按鈕

1. 直接點按第一個繪製的按鈕兩下。
2. 修改它的向量外形。
3. 修改它的文字。
   

五、存檔

1. 「檔案」 > 「另存新檔」，取名英字如index，其檔案格式內定為png。
   此png檔可以讀取修改。

補充
URL分絕對URL與相對URL兩種：

• 絕對URL是完整標示出如http://www.cd.ntit.edu.tw/news/01.html。
• 相對URL表示該URL與當下使用的html之間的相對位址關係。
  檔名.htm是指在同一個資料夾內。
  
  • ./../file.htm是在往上二階的資料夾內的檔案。
  • htmldocs/file.htm是在下一階名為htmldocs的資料夾內的檔案。

Fireworks之一--概述

目標
認識Fireworks 的對網頁編排中的圖像處理。

前置作業
在你的www資料夾內新增work4資料夾。你在本練習的內容要放置在該資料夾內。

步驟
一、預想圖
網頁的版面及內容（可以徒手畫概念圖，或直接在畫圖軟體內完成。）

二、開啟新檔，設頁大小。
對於800x600大小的螢幕，扣除瀏覽器的外框及圖示，真正可以置放內容的空間為760x420。

三、匯入圖像
圖像可以是點陣圖和∕或向量圖。在點陣式軟體如Photoshop或向量軟體如Illustrator或Freehand或CorelDraw做好圖片檔案，存成PNG格式或JPG檔。

四、使用繪圖工具
(一) 影像工具

1. 從主選單選擇「檔案」 > 「匯入」，匯入所需的圖像檔案。
2. 以工具列中的「指標工具」做好圖像的編排。
3. 以工具列中的「指標工具」點按影像圖二下即可進入影像編輯模式。
   此時作業視窗下方緣的「結束點陣圖模式」會呈紅色實彩，點按之即可切換到向量工具模式，此時該「結束點陣圖模式」圖示會變成灰色狀。

(二)向量工具

1. 如畫矩形、橢圓及具茲曲線等。
2. 使用上三項工具模式時，可在作業視窗下方用「筆畫」，「填色」及「特效」等功能來增加圖像的特效。例如：利用「填色」及「特效」等功能，一圓形變成一凸起的圓鈕；或一矩形變成有底紋的按鈕。

下一進度
製作按鈕

新舊網站設計語法的差異

目標
比較用table及div設計上的差異

實例觀察
進入下列兩個網站之後，從瀏覽器上的檢視>原始碼 (Firefox:頁面原始碼)，你可以看在memocom網站看到<table>....</table>的語法而在Apple網站看到<div>....</div>的語法。

• 用table語法的網站 Memocom
• 用div語法的網站 Apple

小結
隨著網路軟硬體的進步，編輯網站所用的語法亦隨之進化，其中之一是早期廣為使用的table語法逐漸被div所取代。原因是div的彈性大，且結合CSS，使網站的管理更有效率。

目標
為你在學校的網站新增內容

學習內容

• 網站地圖 Sitemap
• 增設網站內容
• 使用者友善
  

步驟

1. 在www資料夾內新增work1；work2；work3三個資料夾。
2. 將第一次做的index.html複製到work1資料夾內。
3. 將第二次做的內容直接移入work2。
4. 將下列的作業取名為index.html，存入work3資料夾內，其內容包括 (可連結)
   
   • 待修改網站的超連結。
   • 網站地圖 (sitemap)。
     
   • 擷取待修改網站的首頁
   • 新設計頁首的草圖1、2及3 (草圖可在繪圖軟體內製作)

問題

1. 如何在瀏覽器看到work1、work2及work3內的作品？

補充
螢幕擷取圖像的方法可用以下方法之一：

• 按PrintScreen鍵→到Photoshop去剪栽。
• 到http://www.cnet.com去下載ScreenPrint V3，安裝後可以擷取圖。