TS jQuery @ ASCC
學習目標:
為了讓網頁設計的成品呈現動態效果及互動變化,需要JavaScript瀏覽器程式語言。
為了讓JavaScript程式更有效率撰寫與執行,需要jQuery的協助。
學習各式動態式導覽列的設計。
學習動態轉場展示圖文的設計。
學習動態捲動的效果設計。
學習運用Ajax技術互動變化局部特定資料。
PART.1
熟悉網頁的組成
PART.2
基本互動的動畫
PART.3
熟悉事件與動畫
PART.4
動態展示效果
PART.5
整頁捲動效果
PART.6
表單檢視效果
PART.7
AJAX應用效果
PART.1 必須先熟悉的網頁基本組成
1-1. 了解HTML、CSS、JavaScript、jQuery的關係
1-2. 準備編輯器
1-3. 熟悉網頁DOM框架結構
1-4. 熟悉CSS各式相關的定位樣式
1-5. 認識JavaScript語言、認識JavaScript基本物件
1-6. 熟悉jQuery的核心基礎
1-7. 熟悉jQuery強大的選取器
1-8. HTML色碼表參考網
PART.2 基本互動事件與動畫
2-1. 運用jQuery基本事件與動畫
2-2. 設計互動展現的導覽選單
2-3. 設計互動呈現的輔助說明面板
2-4. 設計互動垂直折疊式面板
PART.3 熟悉事件與自定動畫
3-1. 設計加減速及彈性變化的自定式動畫控制物件的移動
3-2. 設計自動彈出固定位置的選單面板
3-3. 設計逐一放大顯示影像, 滑鼠滑入影像時說明區塊滑出顯示
PART.4 動態投影片轉場展示效果的設計
4-1. 設計定時轉場的投影片展示
4-2. 設計上下頁導覽的互動控制
4-3. 設計圖示指引直接展示指定影像的互動控制
4-4. 設計影像轉場動畫呈現時無法點選上下頁按鈕
4-5. 設計整列滑動與旋轉木馬並存的影像轉場動畫
PART.5 瀏覽器事件與整頁捲動效果
5-1. 認識瀏覽器事件scroll()及設計隨視窗捲動再回到指定位置的區塊
5-2. 認識瀏覽器事件resize()及設計隨視窗比例縮放的影像
5-3. 設計導覽列控制視窗捲動
PART.6 鍵盤事件與表單操作
6-1. 加強了解滑鼠、鍵盤及表單事件
6-2. 學習表單欄位元素的偵測判定
6-3. 學習表單欄位提示字元的設計
6-4. 學習表單欄位檢驗的設計
PART.7 Ajax應用
7-1. 載入外部文字檔或網頁檔
7-2. 載入外部XML資料檔案呈現網頁內容
7-3. 載入外部XML資料檔案運用到表單選單欄位