課程介紹

Photoshop 12 hrs 
HTML 5 + CSS3 + JQuery 36 hrs
全方位設計 一學就會 (初階中階)

本課程重點將引導同學如何訂定網站架構與風格,並配合Photoshop設計出不同風格的版型,另外完整的動線與設計精緻的網站導覽也會是課程的另一個重點,而檔案量的絕妙控制將使您的網站下載速度超快,在眾多檔案量控制不佳的網站中脫穎而出。最後的響應式網頁語法課程則是能將所有網頁元素做最靈活的變化。

課程內容

視覺企劃部分 概論 + Photoshop 12hrs
Lesson01 : 企劃要點 (電腦版網站與響應式網站的差別)、接案流程與實例經驗分享、如何利用圖檔檔案格式加速網頁下載速度
Lesson02 : 電腦版版型網站版型實作1—西點烘焙網站
Lesson03 : 手機板網站實作2_西點烘焙網站
Lesson04 : 行銷網頁 EDM 製作 廣告看板及動圖製作


HTML 5 + CSS3 + JQuery 36hrs
搭配軟體 : Dreamweaver
Lesson 01 :
HTML 5:網站建置的概念、HTML5語法初介紹、如何定義網站、頁面設定、文字與圖片設定、相對路徑與絕對路徑的介紹、各類超連結綜合應用(超連結對象與分類、文字與圖片的超連結設定、檔案下載連結)

Lesson 02 :
HTML 5:各類超連結綜合應用(錨點連結、電子郵件連結、滑鼠變換影像按鈕、導覽列按鈕、影像地圖超連結) 

Lesson 03 :
HTML 5:表格應用、表格的使用時機、表格各項屬性設定(列、欄、寬、高、………) 、表格應用技巧:巢串表格、Excel 資料如何快速變成Dreamweaver 中的文件、表狀資料排序 

Lesson 04 :
HTML 5 + CSS3應用:何謂CSS及其重要性與優點、CSS 樣式的種類(內部樣式表、外部樣式表、行內樣式表)、CSS 樣式浮動面板與語法的搭配、樣式的匯出與匯入、各類樣式的編輯(文字、背景、區塊、方框、邊框、清單、定位、擴充) 

Lesson 05 :
HTML 5 + CSS3應用:設定網頁第二組超連結配色、設定不隨捲軸移動的背景底圖、設定水平線樣式、設計網頁捲軸顏色、iframe應用、頁框網頁實作、利用頁框製作不間斷的背景音樂、指定超連結的網頁在iframe中顯示 

Lesson 06 :
HTML 5 + CSS3應用:版型綜合練習一~Div + CSS 網頁版型規劃(如何製定網頁尺寸、認識DIV、實作 DIV + CSS 完成版型規劃:巢串 DIV 的概念)、AP 元素與 AP DIV(何謂 AP 元素與 AP DIV、AP DIV 的使用時機、AP DIV 各項屬性設定(尺寸、背景色、顯示與隱藏、堆疊順序…)、AP DIV 與 DIV 綜合應用(版型部分)

Lesson 07 :
HTML 5 + CSS3應用:Dreamweaver:版型綜合練習二~快速製作下拉選單(與Fireworks的小整合) 、AP DIV 各項屬性設定(尺寸、背景色、顯示與隱藏、堆疊順序…)、AP DIV 與 DIV 綜合應用(版型部分) 

Lesson 08 :
HTML 5 + CSS3應用 + JQuery 套用:Dreamweaver:網頁相簿與範本功能、內建功能快速製作網頁相簿、利用範本統一管理網站、範本的製作、範本的套用、範本的管理、整合影音多媒體元件(插入視訊檔、插入音訊檔) 

Lesson 09 : 
HTML 5 + CSS3應用 + JQuery 套用:Dreamweaver:行為語法、片段、擴充元件(Extension)、JavaScript 與行為語法之間、好用的Extension、Spry 特效應用(Spry 介面工具集 widget、使用Spry 選單列

Lesson 10 : 
HTML 5 + CSS3應用 + JQuery 套用:Dreamweaver:使用Spry 標籤面板、使用Spry 折疊式、使用Spry 可收合面板、使用 Spry 效果)、網站上傳與維護管理、如何申請網域名稱與虛擬主機、伺服器型態、網站上傳與搜尋引擎登錄

Lesson 11 : 
HTML 5 + CSS3應用 + JavaScript:響應式網頁語法撰寫 (一)
新式的手機網頁的設計概念、設計時該遵守那些原則、流動的版面、靜態的版面、流動版面加上靜態版面

Lesson 12 : 
HTML 5 + CSS3應用 + JavaScript:響應式網頁語法撰寫 (二)
CSS3的媒體詢問、Viewport 的設定、依照畫面寬度決定段落編排、精緻化內容區塊、響應式網頁的行動版與電腦版的切換

講師介紹

張曼娜老師

曾任:
漢騰科技/視覺設計師
傳宇互動媒體/網路事業專案經理 
GoodIdeas/設計總監

現職:
‧易禧AIC及ACC多媒體科技/多媒體講師(民國86年10月迄今 ) 
‧文化大學教育推廣部 第二專長多媒體電腦教育講師(民國87年迄今 ) 
‧實踐大學教育推廣部 多媒體設計類課程專業講師 (民國 100 年8月迄今

著作 :
‧Photoshop 5 與網頁設計 博碩文化出版社 1999
‧網頁三劍客( Flash、Dreamweaver、Fireworks )整合 亞邁多媒體出版 2000
‧Photoshop 6 縱橫新視界 亞邁多媒體出版 2001
‧Dreamweaver 4 網頁奇兵 亞邁多媒體出版 2001
‧Fireworks 4 魔幻網頁 亞邁多媒體出版 2001
‧文化大學 Go2School 虛擬大學 ( 遠距教學網站 ) Dreamweaver 及 Photoshop 教案設計 2000
‧Photoshop 絕對出色影像處理與視覺設計表現 ( 與碁峰出版社合作,範例書 ) 2011 8/8初版 三刷
‧Photoshop 絕對出色影像處理與視覺設計表現 ( 與碁峰出版社合作,範例書 ) 2012 10/5再版

網站及影音動畫相關作品: 
中華電信Higo商品街、淡水地政官網、新第來亨建築官網、東光船務官網、卡農文化事業官網、雀巢Babyfamily官網、荃發留學移民網、白蘭氏健康贏家俱樂部行銷網、愛樂芬幼兒美語學校官網、漢網科技官網、愛群科技官網、MOXA官網、中衛發展局官網、經濟部標準檢驗局官網、兒童福利聯盟”十在關心”系列、怡富證券摩根富林明行銷網頁、小哈波電腦美語永福分校網站、艾兒法室內設計網站、艾兒法網站形象廣告影片後製作、瑪雅空間設計公司網站規劃設計、台灣綠色裝修聯盟網站設計、文化大學教育推廣部內網Banner製作、法鼓山梁皇寶燦網頁動畫元件設計製作、Compass ( 德國五金展 ) 展場Demo光碟製作設計(含錄影剪接)、梅莉朵健康屋展場視覺動畫設計指導、夢朵身心靈發展協會展場視覺規劃與動畫設計、禮讚國際有限公司網頁影音剪輯動畫設計指導、柏松企業網站企劃與影音動畫視覺指導………

適合對象

1.上班族欲培養第二專者 
2.美術科系欲進修職場技術者 
3.有心成為SOHO族,自行接案者 
4.對動態色彩與畫面有著無限想像空間者 
5.美感欠缺,欲了解如何配色及版面編排者 
6.對數位內容設計整合有興趣者

報名資格

具備Windows基本功能者(本課程為基礎課程)

講師作品

說明

※為維護課程品質及尊重智慧財產權,上課中請勿錄音錄影,亦不提供錄音或錄影補課。
※課程進行中,為一人一台電腦,教室電腦中也有課程相關軟體,以利上課使用。
※請攜帶行動硬碟或隨身碟(16G以上),以利課程進行中的資料存取。
※學員若有需要相關軟體請自行購買或尋找,本單位與教師皆不提供任何軟體給予學員。
※關於本課程的內容諮詢、品質回饋可連絡ITCTC資訊科技認證訓練中心,LINE ID:@oju3641x
 (服務時間:週一~週五10:30-12:00、13:30~19:00)。