課程介紹
考量到目前手機,平板,電腦的多尺寸 , 網站也開始有跨平台的夢想 , 因此開始有RWD 的網頁製作手法出現 , 有的網頁設計師會以Html5搭配CSS3 , 利用其互動的手法 , 在搭配JS的應用 , 讓網頁設計可以配合使用者的螢幕 , 自動顯示其最佳的呈現畫面 , 等同一個網站同時具有電腦版,平板
教學內容
本課將教授平面設計師最愛的「視覺式排版」網頁設計程式-Adobe Muse
Adobe Muse是為了想要建立網站但不想撰寫程式碼的設計師而設計,不只可用來設計RWD網頁,亦可廣泛運用在各種領域
◎製作互動式簡報
◎製作互動式作品集
◎短期活動、廣告用網站
◎製作互動式電子教材
1.網站與網頁概念、瀏覽架構規劃
I.網頁設計專案流程說明
II.網站&網頁關聯與類型剖析
III.網頁內容分項架構說明
IV.網頁設計原則與趨勢(軟體、互動內容)
---
介紹完成度高的網站,由其內容分析網站相關架構,應用軟體、製作過程,並說明網站製作的相關流程,請學員先在紙上繪製相關草圖及分頁規劃,並依規劃準備相關素材。
2.網頁版面設計方式說明 & Adobe Muse工作流程介紹
I.網頁安全配色概念與色彩計畫
II.網頁版型設計規劃(導覽區域、內容區域、版權宣告區域)
III.按鈕元件繪製
IV.Header內容設計匯整
V.網頁背景影像製作(裁切、尺寸、去背與存檔格式)
---
AI素材繪製,PS影相素材整理,加入網站資料夾中作相關整理。
全配色的方式作相關色彩介紹,並舉相關網站作說明,最後帶學員作網頁版型設計規劃的草圖。
3.網頁(圖、文、表、影、音)匯整與使用 & 建立連結與按鈕
I.網頁影像使用(影像、動態圖、背景圖、去背圖、互動按鈕)
II.網頁文字與表格使用(行、段、對齊、樣式)
III.網頁多媒體使用(動畫、影片、音樂)
IV.上述元素使用相關相關語法說明
---
完成網站相關素材整理,說明加入網頁方式。
4.Muse 超連結、捲動效果、文字與影像使用
I.指定狀態至物件、內容與資源、捲動效果
II.運用捲動效果的設計點子幻燈片展示與 Widget
III.建立影像預視燈箱幻燈片展示
IV.建立標籤與折疊式控制項面板
V.建立縮圖幻燈片展示
VI.建立影像預視燈箱
---
搭配PS 或FW 完成相關影像,加入Muse並完成幻燈片展示效果。
5.網頁相關網頁資源引用
I.Youtube 影片上傳與引用
II.多部影片切換應用
III.將GoogleMap加入網頁中
IV.網頁加入Facebook的支援
V.運用HTML 5新標籤架構網頁
6.Edge Animate動畫製作&元件使用與轉場特效
I.元件的選取與複製
II.在時間軸上新增標籤
III.元件的時間軸控制項
IV.流暢的轉場特效 、 瞬間轉場特效 &加、減速轉場特效
V.動新增或刪除關鍵影格
---
說明元件製作與應用方式,基本動畫的製作與轉場效果的功能說明。
7.Edge Animat互動效果
I.Edge Animate 的按鈕三態實戰
II.觸發效果的說明
III.作業舞台與時間軸的觸發器和動作
IV.刪除觸發器與動作
---
介紹互動原理與相關元件效果。
優惠辦法
7/18前95折優惠
7/18前舊生或兩人同報9折