Saturday, October 27, 2007

畫面分割﹣--Fireworks入門

目標:臨摩以Fireworks做一網頁及其分割與超連結的的用法。

Fireworks是為製作網頁編排而結合點陣式軟體與向量式軟體於一身的編輯器。此軟體方便對網頁編排中的圖像做分割以利傳輸,同時具有製作按鈕及動畫的功能。它與Dreamweaver及Flash是目前製作網頁的三大要角。

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

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

三、匯入圖像
圖像可以是點陣圖和∕或向量圖。在點陣式軟體如Photoshop或向量軟體如Illustrator或Freehand或CorelDraw做好圖片檔案,存成PNG檔案格式或JPEG檔。
然後在Fireworks選「檔案File」 > 「讀入Import」,匯入所需的圖像檔案。以箭頭工具做好圖像的編排。

四、使用繪圖工具
  1. 影像工具
    以箭頭工具點按影像圖二下即可進入影像編輯模式。此時作業視窗下緣的「Exit Image Edit Mode」會呈紅色實彩,點按之即可切換到向量工具模式,此時該「Exit Image Edit Mode」圖示會變成半實彩狀態。
  2. 向量工具
    如畫矩形、橢圓及具茲曲線等。
  3. 使用上三項模式時,可用到Stroke,Fill及Effect等功能來增加圖像的特效。例如:利用「實心(Fill)」及「效果(Effect)」等功能,一圓形變成一凸起的圓鈕;或一矩形變成有底紋的按鈕。
五、製作按鈕(button)
  1. 以向量工具(如圓或矩形)畫一按鈕外形。
  2. 點選上一步驟之向量圖形,選擇編輯 > 拷貝。
  3. 選擇視窗 > 圖庫,於右側的圖庫標貼右方點按新增元件。
  4. 於對話框內選「按鈕」。
  5. 在按鈕編輯器內修改,按Crtl+V,貼上前述的按鈕外形。
  6. 選擇視窗>對齊。並選用水平及垂直對齊。
  7. 選用文字工具,在按鈕框上鍵入一文字區塊,並鍵入文字。
  8. 選擇視窗>對齊。並選用水平及垂直對齊。
  9. 點選「滑過(Over)」標頭,點按視窗下方的「拷貝一般圖像」。
  10. 點選「按下」標頭,點按視窗下方的「拷貝滑過圖像」。
  11. 點選「按下後滑過」標頭,點按視窗下方的「拷貝按下圖像」。
  12. 點選「作用區域」標頭,點按視窗下方的「拷貝按下圖像」。
  13. 改變「滑過」標頭內之圖像的外框與內填色彩。
  14. 改變「Down」標頭內之圖像的外框與內填色彩。
  15. 關閉Button編輯器。
  16. 將作業區的充當按鈕參考用的矩形框刪除。
  17. 從元件庫(圖庫)將做好的按鈕,移入作業區
  18. 在屬性區鍵入超連結如http://cd.ntit.edu.tw。
六、複製按鈕
  1. 按住Alt鍵(Windows)或Option鍵(Machintosh),把前一按鈕下拉複製之。
  2. 點按個別按鈕,在屬性區更改文字及超連結。
補充
URL分絕對URL與相對URL兩種,前者是完完整整標示出如
http: //www.cd.ntit.edu.tw/news/01.html。
而相對URL表示該URL與當下使用的html之間的相對位址關係。
檔名.htm是指在同一個資料夾內。
./../file.htm是在往上二階的資料夾內的檔案。
htmldocs/file.htm是在下一階名為htmldocs的資料夾內的檔案。
七、圖片作成分割

八、圖像最佳化
Fireworks讓你的文件的各個部份最佳化。每一文件有內定的最佳化設定,但你能夠將文件中的個別區域最佳化。例如文件中只有二個區域是用JPG格式,而其餘的用GIF格式。
首先,確認要為該文件最佳化的設定,它們是為文件中未在分割物件之下的圖像而設的。
  1. 選擇編輯> Deselect棄選所有的物件。
  2. 現出Optimize面板。
  3. 確定GIF WebSnap 128是面板內之Settings彈現式選單內的選項。
    現在你將在咖啡杯上製作一個分割。
  4. 用工具列中的指位器點按咖啡杯圖像,並選擇Insert > Slice。Fireworks製作出分割物件,它與所選取的物件同樣尺寸。
  5. 從Optimize面板上之Settings彈現式選單選擇JPEG - Smaller File。
  6. 點按作業區上的2-Up活頁標籤。必要的适,選取Hand工具,並在左方拖移,如此你可以看到咖咖杯。
    Fireworks展出文件的兩種版本。左方是原始圖像,右方是最佳化的版本。當你改變原始檔時,Fireworks會即時更新最佳化的圖像。若Web物件(hotspot及slice)被展出,則選取在左方的分割將會使其他的圖像褪色,讓你聚焦在最佳化的受選分割。
  7. 在咖啡杯被選取的情況下,對Optimize面板的最佳化設定做修改,並注意這些修改能夠對右方的圖像改變到什麼情況。
  8. 存檔
補充:
在Fireworks將圖像最佳化涉及三項工作

* 選擇最好的格式(format):各種格式有不同的壓縮色彩方式,為特定類型的圖像選擇合適的格式可以大幅降低圖像檔的大小。
* 設定專屬格式選項:每一網頁檔案格式具有特定的選項以控制圖像的壓縮。例如,對GIF圖檔使用遞色(dither)就可以把較少色彩的圖像做點補償。對JPEG圖檔採用平順(smooth)方式即可讓圖像輕微模糊,如此將使該圖像在壓縮時減低檔案的大小。
* 調整圖像的色彩:把圖像的色彩設限在色盤內所指定的一群色彩,然後把色盤內未用到的色彩刪掉。色盤內的色彩越少表示該圖像用較少的色彩,這會使該圖像的檔案變得更小。減少色彩數量會降低圖像的品質,因此必須試試不同的色盤以找出圖像品質與圖檔大小間的最佳平衡。

在作業區內將圖像最佳化的方法有三種:
* 在Optimize面板(Window > Optimize)內有許多讓圖像最佳化的關鍵控制。
* 現用色盤呈現Color Table面板。
* Preview視窗會表現出轉存的圖像的樣子。

選擇預先設好的最佳化

九、輸出圖像、HTML 及JavaScript


當你轉存(export)你的文件時, Fireworks為所有的分割轉存為個別的檔案。它也同時產生在瀏覽器所需的所有的HTML及JavaScript碼。Fireworks輕易將將這些圖像、Fireworks的轉存到你以Dreamweaver來製作和管理的網站上。
  1. 選擇File > Export。轉存文件會製作一個HTML檔也為每一分割製作一圖像檔。為了易於之後移除這些檔,將它們轉存到新的資料夾。
  2. 選擇儲存位置,點按New Folder鈕,並為該資料夾取名,要確定該新資料夾的名稱出現在對話框的上方。
  3. 接受內定base name(基底名稱)之設定,Fireworks以該名稱來做HTML檔的名稱,並以該名稱為基底來為因分割所產生的GIF及JPEG檔命名。
    你能夠點按Setup鈕來修改Fireworks為檔案命名的方式,以及設定轉存HTML的其他特性。
  4. 從Slicing的彈現式選單內選擇Use Slice Objects,這會確保所有的按鈕、behavior及最佳化於瀏覽器內展現時會正常運作。
  5. 從Style彈現式選單內選擇Dreamweaver 3,這會產生在Dreamweaver 3使用該檔時的最適佳化HTML碼。
  6. 確定Location彈現式選單被設在Same Directory(同一目錄)。此一選項讓你指定所儲存的HTML檔與轉存的圖像之關係。你也能夠將所有的HTML拷貝到Clipboard(剪貼板)並將之直接貼到Dreameweaver檔內。點按Save (Windows) or Export (Macintosh)將該檔轉存。該HTML檔現在能夠在瀏覽器內來觀看或者在Dreamweaver內做進一步的修改。
  7. 若你想一睹為快,可在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並關閉該檔。
十、存檔
在Fireworks完成的作品必須加以存檔,以利之後修改或再利用,它的檔案格式是png。
  1. 選擇File > Save As,取好檔名並選擇檔案的儲放位置,儲存之。

Friday, October 26, 2007

夜三A隨堂作業

今天的作業有三項,其結果可到下列的網址觀看設三A班及設三1的work04範例。

一、按鈕式首頁
  1. 在你的www資料夾內新增一資料夾,取名為「fw-button」。
  2. 以繪圖軟體規畫出期中作業的首頁,大小為760x420(或大於420),它能顯呈現你的風格,可以包括圖像、按鈕及文字。
  3. 以jpg或gif格式取英文檔名存放在「fw-button」資料夾內。
二、修改文字式首頁
  1. 回到www資料夾內,開啟index.html檔,新增「作業四」,超連結到fw-button資料夾內你在上述步驟3.的jpg檔或gif檔。
  2. 儲存檔案。
  3. 上傳。
三、到http://namentit.blogspot.com去看你自己的作品。

Friday, October 19, 2007

期中作業之檔案命名--夜三A

今天的進度如下
  1. 在Dreamweaver完作你期中作業的資料夾命名及檔案命名。
  2. 完成前一篇部落格內容說明之第五項。
  3. 在本篇右下的Commnets內做連結到你的網站。方法是鍵入類似以下包括前後兩個小括弧的文字串
    <a href="http://web2.ntit.edu.tw/~sxxxxxsxx">○○的作業一 </a>
    注意:上列中的綠色字必須是你的網站之絶對網址;楬色是你要呈現的文字,它與綠色不同,但若你要讓人家看到的是這個絕對網址,則可相同。
作業範例

Thursday, October 18, 2007

檔案命名

當你已想好主題與組織架構圖,你須依該架構圖完成以下二件工作
  • 檔案的分門別類及檔案命名
  • Sitemap
一、檔案的分門別類及檔案命名
就你的期中作業而言,你要做以下的工作
  1. 先在www檔案夾內新增一個檔案夾,且取名自訂,例如afashow(諧音:阿花秀,好好為自己取個易記易拼的英文名,有點難,但不太難)
  2. 在afashow裡頭,你可以依序做出以下的檔案及資料夾結構
    第一層是個檔案,名為index.html;
    第二層中的每項分類取個資料夾名稱,名稱有流水號較佳,例如,攝影是你的第一類,所以你將資料夾取名為01_photo。散文是你的第二類,你為該資料夾取名為02_novel;依此類推到其他的類別。
    第三層是從第二層生出來,換言之,它要放在第二層的資料夾內,例如,在01_photo資料
    夾內,你打算存放三類影像,其第一類為靜物,所以,依取名的原則,你可以取名為01_stilllife。
    第四層是你存放在第三層內的內容,它可能是資料夾,也可能是檔案,為方便計,且以檔案為主,在這層內,你放了五張靜物件品,第一張是茶杯。因為它是檔案,所以取名為01_cup.html;餘之檔案類推。此外,你可能需要管理這些圖像檔,它們是你已經做好(或者即完成)的jpg檔,它們共有五張,因此,你另做一資料夾,取名為images,再將這些jpg檔放入。

上述說明中,特別要注意的是名為index.html的檔案,該檔名在html語法扮中演很特別也很重要的角色,從瀏覽器進入網站時,當未指名要找哪一個檔案時,瀏覽器最先讀取的是index.html。所以,你在瀏覽器瀏覽自己放在學校的伺服器的個人網站時,以下二種輸入法會得到相同的結果:
http://web2.ntit.edu.tw/~sxxxxxxxx/;
http://web2.ntit.edu.tw/~sxxxxxxxx/index.html
依據這樣的特性,一個網站可能會有很多個index.html,它們分別存在不同的資料夾內。

二、建立Sitemap
sitemap其實組織架構圖的簡易結構,其呈現的方式很多樣,你可以到google去搜尋,並自已建立,將它以檔名sitemap.html存檔第一階層的位置內。

三、決定作品的版式
你已譜出自己的網站主題並建好網站的資料夾名及檔案名。現在,你要做的重要事情是:你要如何呈現你的內容,你呈現內容的方式,就像你的穿著或一本書的版面設計,要注意款式、色彩,當然,你應該重視的是你這個網站要給誰看,想完成什麼目的。

四、從仿效做起
瀏覽與你要設計的網站有關的網站,找出你最愛的二個,螢幕擷取之,並到Photoshop去處理成網路用的格式。將它們存入你的www資料夾內。

五、同上週一樣,開新檔案,做一個檔案名為work03.html,內有上一步驟的二個圖像,外加你的檔案命名擷取圖。在你的index.html檔內,加入「作業三」,超連結到work03.html。記得將index.html存檔,之後,將近端電腦整個www資料夾上傳。

Friday, October 12, 2007

期中作業結構圖及留言--夜三A

今天的作業有二項:
  1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫,你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html,存入你的www資料夾。
    重新編輯你的index.html,加入「作業二」,將「作業二」超連結到work02.html,將index.html存檔。
    將www資料夾上傳。到瀏覽器瀏覽。
  2. 在留言板內做一個超連結時以連結到你的網站,做法是鍵入類似以下含前後兩個小括弧的文字串
    <a href="http://webntit.blogspot.com">○○的作業二 </a>
    注意
    :上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx,楬色是你要呈現的文字,它與綠色不同,除非你要告訴人家該超連結網址。

Thursday, October 11, 2007

期中作業及留言超連結-日3A

今天的作業有二項:
  1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫,你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html,存入你的www資料夾。
    重新編輯你的index.html,加入「作業二」,將「作業二」超連結到work02.html,將index.html存檔。
    將www資料夾上傳。到瀏覽器瀏覽。
  2. 在留言板內做一個超連結時,以連結到你的網站,方法是鍵入類似以下包括前後兩個小括弧的文字串
    <a href="http://webntit.blogspot.com">○○的作業二 </a>
    注意
    :上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx,楬色是你要呈現的文字,它與綠色不同,除非你要告訴人家該超連結網址。

網站結構之命名

當網站結構完成之後,必須為該結構取名,第一個檔案是indext.html。
之後的檔案,須分門別類放在檔案夾內。
  • 檔案夾的命名及檔案的命名必須是英數字,不要有空格,除-或_之外,不要用其他符號。
  • 圖檔的格式一定要RGB模式。
  • 圖檔在Photoshop處理成檔案量較小者。
一些網站在命名上有值得學習的地方,例如魔瓶設計公司,它在大檔案夾的命名是加入數字,有利管理者知道資料要放在那一個檔案夾。另外,它也附上Sitemap以利瀏覽者容易看到整個網站的架構。

Friday, October 05, 2007

網站結構圖

網站是存放資料與人分享的地方,它可以包含許多資訊,為方便管理者及使用者使用,所以有必要加以分類,分類的方法一般如下圖,這樣的結構,第一層是瀏覽者到網站看到的index.html檔,係一網頁,但單一網頁無法包容許多內容,所以會有進一層的分類的必要。例如,你的網站主題是要展現你的作業,所以,你將作業分成三類,如攝影、插畫及文學創作。在攝影類之下,你可能細分成人物類、貝殼類及建築類。在人物類內,你呈現12幅作品.....每一件作品佔用一個html檔。
分類的階層依你的主題及內容而定,簡單者,到第二、三層或更多,但原則是不要讓瀏覽者不知身在何處。

你可到google搜尋,選「圖片」,鍵入「website structure」,按google搜尋,看看別人如何建構網站的架構圖。

觀摩下列網站
並思考以下幾個問題:
  1. 點按同一網站不同選項時,瀏覽器上的網址有什麼變化?
  2. 兩個網站的 URL之最後一個副檔名不同,代表什麼意義?
  3. 點按Sitemap,看它呈現什麼?

留言超連結法--夜3A

在留言板內做一個超連結,以連結到你的網站,方法是鍵入類似以下包括前後兩個小括弧的文字串
<a href="http://webntit.blogspot.com">○○的作業一 </a>
注意:上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~s...........,楬色是你要呈現的文字,它與綠色不同,但若你要讓人家看到的是這個網址,則可相同。

期中作業之結構圖--日三1

今天的作業有二項:
  1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫,你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html,存入你的www資料夾。
    重新編輯你的index.html,加入「作業二」,將「作業二」超連結到work02.html,將index.html存檔。
    將www資料夾上傳。到瀏覽器瀏覽。
  2. 在留言板內做一個超連結時,以連結到你的網站,方法是鍵入類似以下包括前後兩個小括弧的文字串
    <a href="http://webntit.blogspot.com">○○的作業二 </a>
    注意
    :上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx,楬色是你要呈現的文字,它與綠色不同,除非你要告訴人家該超連結網址。

Thursday, October 04, 2007

留言之超連結法日3A

今天的作業有二項:
  1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫,你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html,存入你的www資料夾。
    重新編輯你的index.html,加入「作業二」,將「作業二」超連結到work02.html,將index.html存檔。
    將www資料夾上傳。到瀏覽器瀏覽。
  2. 在留言板內做一個超連結時,以連結到你的網站,方法是鍵入類似以下包括前後兩個小括弧的文字串
    <a href="http://webntit.blogspot.com">○○的作業二 </a>
    注意
    :上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx,楬色是你要呈現的文字,它與綠色不同,除非你要告訴人家該超連結網址。