數位媒體設計學程-WEB 3.0 網站規劃與設計

課程名稱： WEB 3.0網站規劃與設計時數：54 授課時間:每次 3小時地點： C305

講師： 李芸茹聯絡資訊： 0922-970150；yunjuli@gmail.com；Skype : yunjuli ；Facebook:

素材提供： 講師自備(多種素材)或Adobe官方訓練書籍或國外作品教學工具 Adobe Dreamweaver CS5.5

Adobe Photoshop CS 5.5

Adobe Exchange

Social Media Platforms

(Google、Facebook、Twitter、Slideshare 、YouTube) 暫定Facebook Application Development :

(http://developers.facebook.com/docs/plugins/)

課程目標 大部份的學生學習網頁設計，都是透過電腦書本觀看軟體操作，可是目前市面上的書幾乎沒有提到該怎麼整合資源以及將行動載具 (HTML 5技術)

和WEB3.0社群平台與工具導入網站製作。本課程將教導學生透過 Dreamweaver網頁排版技巧，Photoshop的UI視覺設計，Catalyst製作出近似 Flash的互動媒體，加上 Facebook application

development 的多種即時互動功能資源應用，讓不會寫程式的同學能在短時間內能獨立完成一個Web3.0為導向的網站。

100年度 校園行事曆http://info.tcu.edu.tw/hot_news/attch/1000510019/100學年行事曆_公告版_[1.pdf

第 1 週： 自訂工作區與相關基本知識

大項名稱 細節名稱自訂工作區 Dreamweaver 工作區導覽

檢視模式應用用途個人偏好與工具列設定屬性面板設定多種模式

HTML 5 HTML5 基本介紹與書籍推薦和相關資源CSS 3 CSS 3 基本介紹與相關應用分組與主題 小組分組(主題)/聯絡方式 Facebook/提供配合的老師聯絡資訊 (第 2週完

成)

建立版面 練習網頁設計架構圖與線框草圖 (第二次確認)與案主需求文件設計

(課堂與家庭作業 此文件會不斷的修正)

Facebook 各小組申請 Facebook粉絲團或數位助理申請一個測試用的 FB粉絲團

第 2 週： 定義網站與建立版面和文字清單與表格

大項名稱 細節名稱分組與主題再次確認

小組名單/組員聯絡資訊採 Facebook

主題資料收集 確認製作題目或與老師討論主體(內容需以學校教學為主)

定義網站 定義第一個Dreamweaver 網站儲存頁面與修改網頁標題更改內容標題與插入和修改內容文字圖片插入選擇與修改 CSS樣式調整文字字形/尺寸/色彩使用即時預覽與多重面板預覽

建立版面 網頁設計架構圖與線框草圖 (第二次確認)

插入Div元素修改頁面寬度與色彩修改頁尾部分

CSS運用 使用 CSS樣式面板建立互動式選單修改超連結行為

運用影像 在網頁中插入影像以 CSS類別來調整影像位置使用插入面板使用Adobe Bridge 來插入影像插入不相容的檔案類型以拖曳方式插入影像以屬性面板最佳化影像

第 3 週： 製作導覽系統與互動效果和應用 Google 互動功能

大項名稱 細節名稱導覽系統 超連結的基本知識

建立內部超連結/影像超連結/電子郵件超連結以頁面中的特定元素為連結目標插入 Spry選單列將 Spry選單以圖庫項目形式插入網頁中

互動效果 認識Dreamweaver 行為控制應用Dreamweaver 行為控制建立與應用 Spry折疊以及列表式程式

Flash影片 在網頁中插入 Flash動畫在網頁中插入YouTube影片

問卷系統 註冊Google帳號建立Google即時問卷系統插入Google即時問卷系統於網頁透過Google後台重新編輯問卷與觀看結果

行事曆 建立私有與公有Google行事曆將Google行事曆 置入專案網站

FB粉絲團 再次確認 FB粉絲團申請人數進度(最慢第 3周完成)

第 4 週： Facebook Application Development 置入網站

大項名稱 細節名稱Login Facebook Application Development Social Plugins

FB程式 整合教學網站與個人 Blog

整合校園師生教與學環境置入系所網站 產生社會化建立與應用 FB Like Button

建立與應用 FB Send Button

建立與應用 FB Comments

建立與應用 FB Activity Feed

建立與應用 FB Recommendation

建立與應用 FB Like Box

建立與應用 FB Facepile

建立與應用 FB Live Stream

網站主題 再次確認各組別 製作的主題與配合的老師

第 5 週： 網站草圖建置與資料收集事項

大項名稱 細節名稱網站草圖 主體網站選定再次確認

各組人員分工名單建立 寄給老師(由組長統一收集)

網站顏色與風格討論與選定文件收集注意事項(架構/顏色/圖片/文字/歸檔/寬度/程式功能/時程)

Photoshop

介面Photoshop 介面介紹與各項工具列應用

Photoshop 網站橫幅設計與製作、網站按鈕製作(方與圓角)

UI

Photoshop

image

建置網站素材圖片 (長方、圓角、翻頁、倒影、2方角、邊框圖)

Photoshop

color

實作影像素材調色與亮度、黑白風景色

第 6 週： 複習與實作 2-6 周 網站建置技術

大項名稱 細節名稱重新再次講解 2-6周 學員較不熟悉之技巧重新講解與實作第 3周 Spry組件建立互動式網頁重新講解與實作第 4周 Facebook Application 導入網站重新講解與實作第 5周 Photoshop 網站草圖 UI建置

第 7 週： 第一次實作網站草圖與小組問題解惑

大項名稱 細節名稱第一次實作網站小組問題解惑與實作各組報告網站架設進度

社群平台 註冊 Slideshare 簡報分享社群平台插入演講或課程簡報於網站插入多重頁面簡報widget(直與橫式) 每個學員都要實際操作到會

第 8 週： 擴充網站互動式功能&導入第 2 次網站草圖

大項名稱 細節名稱登入Adobe Exchange 網站 (採用Gmail) 建立Adobe會員應用商業指令於網站

JQuery JQuery 互動式指令 3-5個應用並導入網站測試(每個學員都要實際操作到會)

第二次實作與擴充網站互動內容

第 9 週： 期中考暫停授課 (11/07-11/11)

大項名稱 細節名稱期中考停課

第 10 週：擴充網站互動式功能&導入第 3 次網站草圖

大項名稱 細節名稱JQuery JQuery 互動式指令 3-5個應用並導入網站測試

(每個學員都要實際操作到會)

測試第 1-2次, 互動式 JQuery於網站樣式第三次實作與擴充網站互動內容各組報告網站架設進度與小組問題解惑

第 11 週：擴充網站互動式功能&導入第 4 次網站草圖

大項名稱 細節名稱JQuery JQuery 互動式指令 3-5個應用並導入網站測試

(每個學員都要實際操作到會)

測試第 1-3次, 互動式 JQuery於網站樣式第四次實作與擴充網站互動內容各組報告網站架設進度與小組問題解惑

第 12 週： 小組人員獨立規劃主題網站訓練邏輯

大項名稱 細節名稱草圖 網站UI草圖建置文案 個人練習(非小組)網頁設計架構圖與線框草圖

(第三次確認)與案主需求文件收集進度(課堂與家庭作業 此文件會不斷的修正)

個人操作與建立網站UI與 Banner與素材圖片個人練習 JQuery互動指令 3-5個導入網站個人練習 FB Social Plugin互動指令 3-5個導入網站每個學員需註冊Dropbox 雲端平台 將個人或小組網站備份

第 12 週： 小組人員獨立規劃主題網站訓練邏輯

大項名稱 細節名稱草圖 網站UI草圖建置文案 個人練習(非小組)網頁設計架構圖與線框草圖

(第四次確認)與案主需求文件收集進度(課堂與家庭作業 此文件會不斷的修正)

個人操作與建立網站UI與 Banner與素材圖片個人練習 JQuery互動指令 3-5個導入網站

個人練習 FB Social Plugin互動指令 3-5個導入網站上傳到網站 測試實作的網站(第二次)&網站備份觀念

第 14 週： 網站實作範例解析

大項名稱 細節名稱慈濟志業體 以佛教慈濟慈善事業基金會 網站當作練習對象之一 (暫定)

導入校園系所網站建立或志業體網站建置網站架構解析與素材整理歸納佛教慈濟慈善事業基金會 相關子網站設計解說(色彩/排版/文字)

主題分配 主題練習：慈濟志業、慈濟專題、慈濟人物、新聞快報、映象新聞慈濟全球社區網、FB再次練習：Facebook 社群外掛元件至少 3個

第 15 週： 小組團體建置主題網站進度與測試 (final-1/3)

大項名稱 細節名稱小組團體進度報告(每組 5-10分鐘)

報告內容: 整體進度/遭遇困難/學了那些/應用到甚麼網站UI與 Banner與素材圖片 再次修改時間小組展示 JQuery互動指令 3-5個導入網站個人上機 FB Social Plugin互動指令 3-5個導入網站上傳到網站 測試實作的網站(第一次) 將作品用螢幕擷取

第 16 週： 小組團體建置主題網站進度與測試 (final-2/3)

大項名稱 細節名稱小組團體進度報告(每組 5-10分鐘)

報告內容: 整體進度/遭遇困難/學了那些/應用到甚麼網站UI與 Banner與素材圖片 再次修改時間小組展示 JQuery互動指令 3-5個導入網站個人上機 FB Social Plugin互動指令 3-5個導入網站上傳到網站 測試實作的網站(第二次) 將作品用螢幕擷取

第 16 週： 小組團體建置主題網站進度與測試 (final-3/3)

大項名稱 細節名稱網站UI與 Banner與素材圖片 再次修改時間上傳到教資中心-數位教學組網站 (數位媒體設計學程-WEB 3.0網站規劃

與設計 學員作品展示)-暫定測試實作的網站(第三次) 將作品用壓縮檔寄給老師或放在網路磁碟機

第 18 週：期末考暫停授課 (01/09-01/13)

大項名稱 細節名稱期末考暫停授課

補充資料：JQuery 應用技術圖