中等專業學校2022-2023-2教案編號：備課組別計算機課程名稱網頁設計與制作所在年級二年級主備教師授課教師授課系部授課班級授課日期課題模塊四4.1jQueryMobile教學目標1.創建jQueryMobile頁面2.學會jQueryMobile列表視圖的插入方法及屬性設置3.學會jQueryMobile滑塊的插入方法及屬性設置重點了解jQueryMobile列表視圖的插入方法及屬性設置難點學會jQueryMobile滑塊的插入方法及屬性設置教法講練法、演示法、任務驅動法教學設備多媒體機房教學環節教學活動內容及組織過程個案補充教學內容教學內容教學內容【復習導入】引導學生回顧上節課學習內容【教學過程及內容】預備知識：①jQuery概念jQuery是DreamweaverCC制作手機瀏覽界面的主力插件。在DreamweaverCC中有兩個基于jQuery的子項目，分別是jQueryMobile和jQueryUI。其中jQueryMobile主要用于主題的設計、網頁的設計以及網頁中的換頁實踐等功能的設計，并為所有的主流移動操作平臺提供了高度統一的接口。而jQueryUI主要用做制作用戶界面，如拖放、對話框、標簽等功能的實現。②jQueryMobile的列表視圖jQueryMobile中的列表是標準的HTML列表，可以設定有序列表和無序列表。執行“插入-jQueryMobile-列表視圖”命令，彈出“列表視圖”對話框，如圖所示。列表類型：可以選擇有序列表和無序列表。項目：表示序列中添加幾個列表項。①凹入：表示項目四周自動增加外邊距，樣式為圓角等。②文本說明：添加一些對列表內容的說明性文字，使其更加豐富，顯示在左側。③文本氣泡：氣泡數字是用來顯示列表項相關的數字，有計數功能如郵箱的郵件的個數。④側邊：主要內容的附屬信息部分，顯示在右上角。⑤拆分按鈕：在jQueryMobile的列表中,當選項內容需要做出兩種不同操作時,會用到該選項,其作用是對鏈接按鈕進行分割。實現分割的方法是在<1i>元素中再增加一個<a>元素。分割后jQueryMobile會自動設置第二個鏈接為藍色箭頭圖標,圖標的鏈接文字將在用戶將鼠標懸停在圖標上時顯示。拆分按鈕圖標:當“拆分按鈕”被選擇后,“拆分按鈕圖標”才可選用,其作用是加按鈕的可視性。2.任務安排：我的家鄉——建立jQueryMobile頁面①任務描述：通過使用jQueryMobile技術建立一個jQueryMobile頁面，學會jQueryMobile元素的插入方法及屬性設置。②操作提示：Ⅰ.新建文件jq.html，在狀態欄中頁面大小處選擇移動端頁面大小“iphone7plus”Ⅱ.創建jQueryMobile頁面。選擇“插入-jQueryMobile-頁面”命令插入jQueryMobile頁面Ⅲ.在彈出的“jQueryMobile”對話框，選擇連接類型和CSS類型，本任務以Dreamweaver自帶庫源為例，單擊確定后，系統彈出“頁面”對話框Ⅳ.“jQueryMobile”的安裝?？梢詮摹癹QueryMobile文件”對話框中更新jQueryMobile庫，也可以從CDN中載入jQueryMobile。Ⅴ.單擊jQueryMobile內容欄，單擊“插入-jQueryMobile-列表視圖”命令，對列表選項進行編輯，分別輸入文本：“地域文化、地方美食、過去未來和濃情親人”。Ⅵ.修改底部。單擊jQueryMobile底部，單擊“插入-jQueryMobile-滑塊”命令，并編輯滑塊元素。【課堂小結】教師引導學生小結本課所學內容?！咀鳂I布置】總結本課所學操作實用技巧。板書設計模塊四4.1jQueryMobile我的家鄉——建立jQueryMobile頁面1.