熱門: 手機教學 | 文書法寶 | 影片剪輯 | 廣告DM設計 | 電腦新手 | 動手做網站  線上學習人數:

Fireworks CS5教學 網頁版型設計課程 線上看

觀賞人次:11036人次評分:0分

範例檔案下載

此檔案為壓縮檔,請會員下載後,在電腦中進行解壓縮即可;裡頭完整包含講師在課程中使用到的圖片、檔案、以及完成作品...等等,供會員操作練習。

應用程式下載

Fireworks CS5 繁體中文版應用程式下載,可試用30天。此檔案為壓縮檔,請會員下載後,在電腦中進行解壓縮並且執行安裝。

講師介紹

講師:王老師

王老師擁有17年的教學經驗,教學經驗豐富,上課生動活潑,目前大約教授16000名以上的學生,有多張ACA國際認證,目前任職於企業資訊顧問一職。

  • 課程介紹(展開/收起)

章節目錄(點取標題)

第01章Fireworks CS5的操作環境介紹教學43分36秒

01-01第一次啟動Fireworks CS5的操作 04分00秒

01-02如何使用說明與檔案格式的支援以及範本的開啟(新功能!) 08分31秒

01-03常用的幾種檢視操作與快速鍵介紹 06分03秒

01-04工具的種類介紹,點陣圖及向量圖的判斷及操作 08分37秒

01-05如何在各種環境與手機裝置中預覽我們的設計 07分19秒

01-06開啟Photoshop的PSD檔時所用到的動畫技巧 07分28秒

01-07補充圖片在複製貼上的技巧! 01分44秒

第02章『最佳化』與動畫的製作教學32分05秒

02-01「最佳化」決定輸出的格式與品質 07分08秒

02-02如何將圖片的單色背景快速的去除,成為去背影像? 07分27秒

02-03動畫文字的製作,步驟一:文字工具的使用 04分41秒

02-04動畫文字的製作,步驟二:動畫元素「狀態」的再製與時間的調整 03分23秒

02-05動畫文字的製作,步驟三:動畫檔案匯出與網頁背景色的關係 04分29秒

02-06人物Q版動畫效果的快速製作範例 04分57秒

第03章製作『特效按鈕』教學45分18秒

03-01使用Dreamweaver CS5建立一個專為Fireworks測試的網站 02分34秒

03-02使用向量圖物件繪製一個圓角矩形 03分55秒

03-03建立文字後,將「樣式」套用到幾何物件上 07分42秒

03-04新功能!文字外框筆畫的顏色加入操作與濾鏡中的「陰影」效果加入操作 05分08秒

03-05再製一個按鈕後用「狀態至檔案」的形式匯出到資料夾內 05分17秒

03-06如何將按鈕圖示製作成「滑鼠變換影像」按鈕? 04分39秒

03-07使用「增加簡易變換影像行為」製作滑鼠變換影像效果 05分15秒

03-08如何將製作完成的「增加簡易變換影像行為」按鈕插入到Dreamweaver網頁中? 07分38秒

03-09按鈕網址加入的幾種方式介紹 03分10秒

第04章『導覽列按鈕元件』的製作範例教學24分29秒

04-01導覽列按鈕元件的製作,步驟一:建立按鈕元件 05分03秒

04-02導覽列按鈕元件的製作,步驟二:製作四種按鈕狀態 05分10秒

04-03導覽列按鈕元件的製作,步驟三:裝飾我們的按鈕 04分31秒

04-04導覽列按鈕元件的製作,步驟四:再製成多個按鈕 04分34秒

04-05導覽列按鈕元件的製作,步驟五:將按鈕文字快速改變的技巧 02分48秒

04-06導覽列按鈕元件的製作,步驟六:將按鈕匯出到網站中,並開啟它 02分23秒

第05章遮色片的建立與「批次處理」的操作1小時04分00秒

05-01遮色片效果的第一種建立方式介紹 03分38秒

05-02將向量路徑變成遮色片的操作方式介紹 06分39秒

05-03製作任意圖形具有邊框線的遮色片、「貼入範圍內」的應用 04分39秒

05-04新功能!「合併路徑」物件的幾種操作方式,與遮色片的快速調整方式 05分30秒

05-05製作一個具有圓角與陰影效果的照片 04分20秒

05-06如何用正確的方式,將圖片輸出成漂亮的去背格式。PNG與GIF的差異介紹 07分12秒

05-07將常用的動作製作成我們的「命令」!自動指令的建立 03分54秒

05-08再製作一個加上雙框效果的命令 07分03秒

05-09「命令」的刪除方式 03分14秒

05-10如何將大量的圖片自動的加上外框線與陰影?「批次處理」的操作、步驟一 04分57秒

05-11如何將大量的圖片自動的加上外框線與陰影?「批次處理」的操作、步驟二:完成批次套用 05分33秒

05-12如何將照片加上紋路效果?『混合模式』的介紹 03分39秒

05-13如何用遮色片效果製作「窗格照片」? 03分42秒

第06章製作「增加調換影像效果」範例教學51分48秒

06-01批次處理檔案大小與圖檔的匯入,準備製作影像變換效果 08分58秒

06-02將全部的圖片加上分割區域 04分13秒

06-03將大圖加上雙框線與陰影 05分57秒

06-04將小圖示統一色彩化與製作簡易滑鼠效果 03分44秒

06-05分割區覆蓋的區域不同也會產生不同的效果 04分12秒

06-06匯入大張圖片放入各狀態與分割區位置的技巧 05分02秒

06-07製作「增加調換影像效果」!注意!不要點錯位置唷! 08分34秒

06-08用「行為」面板調整製作好的動作! 02分23秒

06-09將成果輸出到DreamWeaver網站內 04分40秒

06-10將Fireworks所製作的網頁插入到指定頁面中 04分05秒

第07章Fireworks CS5與Dreamweaver CS5的整合範例操作教學1小時23分44秒

07-01準備繪製網頁版型 07分30秒

07-02開始依照垂直與水平方向繪製線條與物件 08分56秒

07-03細部調整與平均分散的技巧 08分25秒

07-04製作網頁按鈕 09分49秒

07-05加上網頁標題 09分44秒

07-06使用「字元對應表」繪製特殊符號圖形 06分26秒

07-07開始分割我們的版型。記住!將來要在網頁編輯的區域,就要分割! 11分11秒

07-08將版型匯出成網頁並匯到我們的網站中,用Dreamweaver CS5開啟 03分01秒

07-09最後再用CSS與DIV來排列版型最後的位置、步驟一 06分52秒

07-10最後再用CSS與DIV來排列版型最後的位置、步驟二 05分35秒

07-11最後再用CSS與DIV來排列版型最後的位置、步驟三 06分15秒

第08章範例:公佈欄版型製作45分45秒

08-01範例製作「公佈欄」版型、步驟一:版面物件繪製 05分51秒

08-02範例製作「公佈欄」版型、步驟二:再將文字與圖片插入 06分27秒

08-03範例製作「公佈欄」版型、步驟三:將上下區域切割上漸層色 06分33秒

08-04範例製作「公佈欄」版型、步驟四:開始切割上下區域 06分27秒

08-05範例製作「公佈欄」版型、步驟五:調整切割區域的方式與注意事項 03分23秒

08-06範例製作「公佈欄」版型、步驟六:檔案的儲存與匯出的操作說明 04分16秒

08-07範例製作「公佈欄」版型、步驟七:將版型插入到網頁中,並調整背景圖片位置 06分35秒

08-08範例製作「公佈欄」版型、步驟八:開始使用CSS調整文字位置與大小 02分40秒

08-09範例製作「公佈欄」版型、步驟九:完成「公佈欄」的版型製作 03分33秒

第09章範例:產品導覽照片的製作1小時09分30秒

09-01產品導覽照片的範例製作、步驟一:使用批次處理功能將照片一次全部縮小 05分44秒

09-02產品導覽照片的範例製作、步驟二:再將所有的大圖片尺寸一次修改完成 03分33秒

09-03產品導覽照片的範例製作、步驟三:將小照片依序匯入後排列位置 05分04秒

09-04產品導覽照片的範例製作、步驟四:繪製圓角矩形,準備製作遮色片 06分17秒

09-05產品導覽照片的範例製作、步驟五:製作小型圖示的分割區 03分38秒

09-06產品導覽照片的範例製作、步驟六:將小圖示製作「增加簡易變換影像的行為」 05分08秒

09-07產品導覽照片的範例製作、步驟七:再加上「內光暈」效果在小圖上 03分40秒

09-08產品導覽照片的範例製作、步驟八:依序將大尺寸圖片匯入到新的「狀態」中 05分29秒

09-09產品導覽照片的範例製作、步驟九:再加上第二種效果「增加調換影像的行為」,讓大照片顯示出來 05分40秒

09-10產品導覽照片的範例製作、步驟十:在照片中加上註解文字 04分08秒

09-11產品導覽照片的範例製作、步驟十一:如何改變版面的尺寸,與文字不能顯示的問題解決 06分00秒

09-12產品導覽照片的範例製作、步驟十二:將成品匯出到指定資料夾中 03分23秒

09-13產品導覽照片的範例製作、步驟十三:將檔案匯入到網頁中 02分26秒

09-14產品導覽照片的範例製作、步驟十四:如何運用Dreamweaver的「行為」指令製作出更好的效果? 09分27秒