中文版DreamweaverCC基礎(chǔ)培訓(xùn)教程-教學(xué)教案

《中文版DreamweaverCC基礎(chǔ)培訓(xùn)教程》配套教學(xué)教案課時(shí)內(nèi)容網(wǎng)頁(yè)的基本操作授課時(shí)間45分鐘課時(shí)1教學(xué)目標(biāo)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)。制作網(wǎng)站的基本流程。上機(jī)實(shí)訓(xùn)——賞析特色網(wǎng)站。教學(xué)重點(diǎn)網(wǎng)頁(yè)制作的核心語言。如何正確搭配網(wǎng)頁(yè)的色彩。教學(xué)難點(diǎn)如何正確搭配網(wǎng)頁(yè)的色彩。教學(xué)設(shè)計(jì)教學(xué)思路：（1）先介紹一些主流網(wǎng)站的網(wǎng)頁(yè)，讓學(xué)生著重賞析網(wǎng)頁(yè)的布局和色彩搭配；（2）接著介紹常見的網(wǎng)站類型、網(wǎng)站的基本結(jié)構(gòu)等知識(shí)點(diǎn)，著重講解網(wǎng)頁(yè)制作的核心語言；（3）最后講解制作網(wǎng)站的基本流程。教學(xué)手段：講解常見的網(wǎng)站類型、網(wǎng)頁(yè)的大致分類、制作網(wǎng)頁(yè)使用的語言，以及制作網(wǎng)頁(yè)應(yīng)該遵循的原則；講解制作網(wǎng)站的一般流程，并帶領(lǐng)學(xué)生一起賞析一些特色網(wǎng)站。教學(xué)資料及要求：除教材中講解的知識(shí)，可以要求學(xué)生在上網(wǎng)的時(shí)候多多觀察每個(gè)網(wǎng)頁(yè)的布局、配色等。教學(xué)內(nèi)容知識(shí)回顧：下面將講解網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)，以及制作網(wǎng)站的基本流程。討論問題：1、什么是網(wǎng)站？什么是網(wǎng)頁(yè)？網(wǎng)站和網(wǎng)頁(yè)之間的關(guān)系是什么？2、說一說有名的網(wǎng)站有些什么？3、你知道網(wǎng)頁(yè)的分類嗎？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。1.1網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.1.1網(wǎng)站與網(wǎng)頁(yè)的關(guān)系1.1.2常見的網(wǎng)站類型1.1.3網(wǎng)頁(yè)的分類1.1.4網(wǎng)站的基本結(jié)構(gòu)1.1.5網(wǎng)頁(yè)的構(gòu)成要素1.1.6網(wǎng)頁(yè)制作的核心語言1.1.7屏幕分辨率和網(wǎng)頁(yè)編輯器1.1.8網(wǎng)頁(yè)色彩搭配1.1.9網(wǎng)頁(yè)制作遵循的原則1.2制作網(wǎng)站的基本流程1.2.1網(wǎng)站分析與策劃1.2.2網(wǎng)頁(yè)效果圖設(shè)計(jì)1.2.3創(chuàng)建并編輯網(wǎng)頁(yè)文檔1.2.4優(yōu)化與加工網(wǎng)頁(yè)文檔1.2.5測(cè)試并發(fā)布HTML文檔1.2.6網(wǎng)站的更新與維護(hù)1.3上機(jī)實(shí)訓(xùn)——賞析特色網(wǎng)站1.3.1實(shí)訓(xùn)要求1.3.2實(shí)訓(xùn)分析1.3.3操作思路1.4課后練習(xí)1.練習(xí)1——規(guī)劃個(gè)人網(wǎng)站2.練習(xí)2——規(guī)劃燈飾照明網(wǎng)站小結(jié)了解網(wǎng)站與網(wǎng)頁(yè)的關(guān)系。了解網(wǎng)站類型與基本結(jié)構(gòu)。掌握網(wǎng)頁(yè)的基本構(gòu)成要。掌握網(wǎng)站制作的基本流程。思考及作業(yè)課后練習(xí)：練習(xí)1本練習(xí)要求對(duì)個(gè)人網(wǎng)站進(jìn)行規(guī)劃。該網(wǎng)站主要用于展示用戶的個(gè)人攝影作品、個(gè)人信息和最新動(dòng)態(tài)，并且會(huì)和大家分享一些攝影作品的拍攝技巧。要求制作的網(wǎng)頁(yè)能體現(xiàn)該網(wǎng)站的主要功能，界面設(shè)計(jì)要符合網(wǎng)站特色。要完成本練習(xí)需要先搜集相關(guān)的圖像和文字等資料，然后制作草圖并確認(rèn)。練習(xí)2本練習(xí)要求對(duì)一個(gè)燈飾照明電商網(wǎng)站進(jìn)行規(guī)劃。該網(wǎng)站主要用于展示企業(yè)的產(chǎn)品、企業(yè)的相關(guān)信息和最新動(dòng)態(tài)。要求制作的網(wǎng)頁(yè)能體現(xiàn)該網(wǎng)站的主要功能，界面設(shè)計(jì)要符合網(wǎng)站特色。要完成本練習(xí)需要先搜集相關(guān)的圖像和文字等資料，然后規(guī)劃站點(diǎn)結(jié)構(gòu)。

課時(shí)內(nèi)容DreamweaverCC的基本操作授課時(shí)間135分鐘課時(shí)3教學(xué)目標(biāo)認(rèn)識(shí)DreamweaverCC工作界面。創(chuàng)建與管理站點(diǎn)。網(wǎng)頁(yè)文檔的基本操作。設(shè)置頁(yè)面屬性。上機(jī)實(shí)訓(xùn)——?jiǎng)?chuàng)建“花火植物”站點(diǎn)。教學(xué)重點(diǎn)如何創(chuàng)建與管理站點(diǎn)？如何管理站點(diǎn)中的文件和文件夾？如何設(shè)置頁(yè)面屬性？教學(xué)難點(diǎn)如何設(shè)置頁(yè)面屬性？教學(xué)設(shè)計(jì)教學(xué)思路：（1）通過自定義工作界面的小例子引出對(duì)DreamweaverCC工作界面的介紹，可以多講解一些關(guān)于“屬性”面板和幾個(gè)不同視圖方面的知識(shí)；（2）通過創(chuàng)建和編輯“寶萊燈飾”網(wǎng)站的例子講解創(chuàng)建與管理站點(diǎn)，以及管理站點(diǎn)中的文件和文件夾的知識(shí)；（3）通過創(chuàng)建并保存網(wǎng)頁(yè)的小例子來講解新建和保存網(wǎng)頁(yè)文檔，以及打開和關(guān)閉網(wǎng)頁(yè)文檔的知識(shí)；（4）通過設(shè)置“djqsm.html”網(wǎng)頁(yè)屬性的例子來講解設(shè)置頁(yè)面屬性的知識(shí)（5）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來創(chuàng)建“花火植物”站點(diǎn)，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法；教學(xué)資料及要求：學(xué)生可以使用教材中的方法，在不同的PPT里進(jìn)行實(shí)踐，熟練其操作方法。教學(xué)內(nèi)容知識(shí)回顧：在前面講解了網(wǎng)頁(yè)的基本操作，以及制作網(wǎng)站的基本流程，下面對(duì)DreamweaverCC的工作界面、創(chuàng)建與管理站點(diǎn)、網(wǎng)頁(yè)文檔的基本操作，以及設(shè)置頁(yè)面屬性等知識(shí)進(jìn)行講解。討論問題：1、如何高效地管理站點(diǎn)呢？2、如何設(shè)置頁(yè)面屬性？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。2.1認(rèn)識(shí)DreamweaverCC工作界面2.1.1課堂案例——自定義工作界面2.1.2文檔窗口2.1.3面板組2.1.4“屬性”面板2.1.5工作區(qū)布局2.1.6視圖模式2.1.7環(huán)境設(shè)置2.2創(chuàng)建與管理站點(diǎn)2.2.1課堂案例——?jiǎng)?chuàng)建并編輯“寶萊燈飾”網(wǎng)站2.2.2創(chuàng)建本地站點(diǎn)2.2.3管理站點(diǎn)2.2.4管理站點(diǎn)中的文件和文件夾2.3網(wǎng)頁(yè)文檔的基本操作2.3.1課堂案例——?jiǎng)?chuàng)建并保存zhuce.html網(wǎng)頁(yè)2.3.2新建網(wǎng)頁(yè)2.3.3保存文檔2.3.4打開與關(guān)閉文檔2.4設(shè)置頁(yè)面屬性2.4.1課堂案例——設(shè)置“djqsm.html”網(wǎng)頁(yè)屬性2.4.2設(shè)置“外觀（CSS）”屬性2.4.3設(shè)置“外觀（HTML）”屬性2.4.4設(shè)置“鏈接（CSS）”屬性2.4.5設(shè)置標(biāo)題2.4.6設(shè)置標(biāo)題/編碼2.4.7跟蹤圖像2.5上機(jī)實(shí)訓(xùn)——?jiǎng)?chuàng)建“花火植物”站點(diǎn)2.5.1實(shí)訓(xùn)要求2.5.2實(shí)訓(xùn)分析2.5.3操作思路2.6課后練習(xí)1.練習(xí)1——自定義“我的工作區(qū)”2.練習(xí)2——?jiǎng)?chuàng)建并規(guī)劃“珠寶”網(wǎng)站小結(jié)如何創(chuàng)建與管理站點(diǎn)？如何管理站點(diǎn)中的文件和文件夾？如何設(shè)置頁(yè)面屬性？思考及作業(yè)練一練：練習(xí)1——自定義“我的工作區(qū)”根據(jù)工作使用習(xí)慣的不同，用戶可自定義DreamweaverCC的工作區(qū)，使其更加符合設(shè)計(jì)者的操作習(xí)慣。本練習(xí)將自定義一個(gè)工作區(qū)，然后將其保存。練習(xí)2——?jiǎng)?chuàng)建并規(guī)劃“珠寶”網(wǎng)站某珠寶公司需要制作一個(gè)電子商務(wù)網(wǎng)站，需要先對(duì)站點(diǎn)進(jìn)行規(guī)劃，首先是網(wǎng)站首頁(yè)，然后按不同內(nèi)容分成多個(gè)頁(yè)面，最后在DreamweaverCC中創(chuàng)建站點(diǎn)、文件和相關(guān)文件夾。課時(shí)內(nèi)容制作基礎(chǔ)的文本網(wǎng)頁(yè)授課時(shí)間90分鐘課時(shí)2教學(xué)目標(biāo)插入文本對(duì)象。設(shè)置網(wǎng)頁(yè)頭部?jī)?nèi)容。上機(jī)實(shí)訓(xùn)——制作企業(yè)簡(jiǎn)介網(wǎng)頁(yè)教學(xué)重點(diǎn)如何輸入文本并設(shè)置文本屬性？怎樣插入日期和特殊符號(hào)？怎樣插入列表？教學(xué)難點(diǎn)如何輸入文本并設(shè)置文本屬性？教學(xué)設(shè)計(jì)教學(xué)思路：（1）通過制作“花火簡(jiǎn)介”網(wǎng)頁(yè)的案例來講解輸入文本、設(shè)置文本屬性，以及插入各種特殊對(duì)象的方法；（2）通過設(shè)置“Index.html”文件頭的案例來介紹設(shè)置網(wǎng)頁(yè)頭部?jī)?nèi)容的知識(shí)；（3）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來制作企業(yè)簡(jiǎn)介網(wǎng)頁(yè)，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法。教學(xué)資料及要求：除教材中的實(shí)例外，學(xué)員還需通過其他途徑了解更多的制作文本網(wǎng)頁(yè)的方法。教學(xué)內(nèi)容知識(shí)回顧：前面講解了DreamweaverCC的基本操作，包括認(rèn)識(shí)DreamweaverCC的工作界面、創(chuàng)建與管理站點(diǎn)，以及設(shè)置網(wǎng)頁(yè)屬性等知識(shí)，下面將對(duì)在網(wǎng)頁(yè)中插入文本對(duì)象、設(shè)置網(wǎng)頁(yè)頭部?jī)?nèi)容等知識(shí)進(jìn)行講解。討論問題：1、為什么要在網(wǎng)頁(yè)中插入水平線？2、能夠在網(wǎng)頁(yè)中插入哪些類型的列表？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。3.1插入文本對(duì)象3.1.1課堂案例——制作“花火簡(jiǎn)介”網(wǎng)頁(yè)3.1.2輸入文本3.1.3設(shè)置文本屬性3.1.4插入特殊符號(hào)3.1.5插入日期3.1.6插入水平線3.1.7插入列表3.2設(shè)置網(wǎng)頁(yè)頭部?jī)?nèi)容3.2.1課堂案例——設(shè)置“Index.html”文件頭3.2.2Meta3.2.3關(guān)鍵字3.2.4說明3.2.5視口3.3上機(jī)實(shí)訓(xùn)——制作企業(yè)簡(jiǎn)介網(wǎng)頁(yè)3.3.1實(shí)訓(xùn)要求3.3.2實(shí)訓(xùn)分析3.3.3操作思路3.4課后練習(xí)1.練習(xí)1——制作學(xué)校簡(jiǎn)介網(wǎng)頁(yè)2.練習(xí)2——制作代金券說明網(wǎng)頁(yè)小結(jié)掌握文本的基本操作。掌握特殊文本對(duì)象的插入方法。掌握項(xiàng)目符號(hào)和編號(hào)列表的插入方法。掌握網(wǎng)頁(yè)頭部?jī)?nèi)容的設(shè)置方法。思考及作業(yè)練一練：練習(xí)1——制作學(xué)校簡(jiǎn)介網(wǎng)頁(yè)打開“xxjj.html”網(wǎng)頁(yè)文件，在其中輸入文本并設(shè)置文本格式和段落格式、然后添加水平線。練習(xí)2——制作代金券說明網(wǎng)頁(yè)新建“djqsm.html”網(wǎng)頁(yè)文件，在其中設(shè)置網(wǎng)頁(yè)說明和關(guān)鍵字，然后在網(wǎng)頁(yè)中添加文本，并設(shè)置文本格式和段落格式，添加其他網(wǎng)頁(yè)元素。課時(shí)內(nèi)容制作豐富的圖像網(wǎng)頁(yè)授課時(shí)間90分鐘課時(shí)2教學(xué)目標(biāo)插入與設(shè)置圖像。插入并設(shè)置多媒體元素。上機(jī)實(shí)訓(xùn)——美化“幫助中心”網(wǎng)頁(yè)。教學(xué)重點(diǎn)如何插入圖像并設(shè)置其屬性？如何插入鼠標(biāo)經(jīng)過圖像？怎樣插入多媒體元素？教學(xué)難點(diǎn)如何插入圖像并設(shè)置其屬性？如何插入鼠標(biāo)經(jīng)過圖像？教學(xué)設(shè)計(jì)教學(xué)思路：（1）通過制作“植物分類”網(wǎng)頁(yè)的案例來講解在網(wǎng)頁(yè)中插入圖片并為其設(shè)置屬性的方法，并引申出插入鼠標(biāo)經(jīng)過圖片、插入FireworksHTML的方法；（2）通過制作“花火團(tuán)購(gòu)”網(wǎng)頁(yè)的案例來介紹插入并設(shè)置多媒體元素的方法；（3）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來美化“幫助中心”網(wǎng)頁(yè)，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法。教學(xué)資料及要求：除教材中的實(shí)例外，學(xué)員還需通過其他途徑了解更多的制作圖像網(wǎng)頁(yè)的方法。教學(xué)內(nèi)容知識(shí)回顧：在前面對(duì)在網(wǎng)頁(yè)中插入文本對(duì)象，以及設(shè)置網(wǎng)頁(yè)頭部?jī)?nèi)容等內(nèi)容進(jìn)行講解，下面講解制作豐富的圖像網(wǎng)頁(yè)的方法，包括插入與設(shè)置圖像，以及插入并設(shè)置多媒體元素等知識(shí)點(diǎn)。討論問題：1、你覺得美觀的網(wǎng)頁(yè)應(yīng)該包含些什么元素？2、你知道的圖像格式有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。4.1插入與設(shè)置圖像4.1.1課堂案例——制作“植物分類”網(wǎng)頁(yè)4.1.2網(wǎng)頁(yè)中常用的圖像格式4.1.3插入圖像4.1.4設(shè)置圖像屬性4.1.5插入鼠標(biāo)經(jīng)過圖像4.1.6插入FireworksHTML4.2插入并設(shè)置多媒體元素4.2.1課堂案例——制作“花火團(tuán)購(gòu)”網(wǎng)頁(yè)4.2.2使用EdgeAnimate動(dòng)畫4.2.3使用HTML5Video文件4.2.4使用HTML5Audio音頻文件4.2.5使用FlashSWF動(dòng)畫文件4.2.6使用FlashVideo視頻文件4.2.7使用插件4.3上機(jī)實(shí)訓(xùn)——美化“幫助中心”網(wǎng)頁(yè)4.3.1實(shí)訓(xùn)要求4.3.2實(shí)訓(xùn)分析4.3.3操作思路4.4課后練習(xí)1.練習(xí)1——制作“訂餐”網(wǎng)頁(yè)2.練習(xí)2——制作“家居”網(wǎng)頁(yè)小結(jié)掌握插入各種圖像的方法。掌握設(shè)置圖像屬性的方法。掌握Flash動(dòng)畫和背景音樂的添加方法。掌握其他多媒體對(duì)象的插入和設(shè)置方法。思考及作業(yè)練一練：練習(xí)1——制作“訂餐”網(wǎng)頁(yè)本練習(xí)要求制作一個(gè)“訂餐”網(wǎng)頁(yè)的部分頁(yè)面，主要包括操作：在網(wǎng)頁(yè)中插入圖像設(shè)置圖像的屬性和輸入文本。練習(xí)2——制作“家居”網(wǎng)頁(yè)本練習(xí)要求在“家居”網(wǎng)頁(yè)中插入SWF動(dòng)畫和背景音樂，最后再插入圖像并輸入文字，使制作的網(wǎng)頁(yè)效果更加美觀。

課時(shí)內(nèi)容為網(wǎng)頁(yè)添加超鏈接授課時(shí)間90分鐘課時(shí)2教學(xué)目標(biāo)認(rèn)識(shí)超鏈接。創(chuàng)建超鏈接。管理超鏈接。上機(jī)實(shí)訓(xùn)——設(shè)計(jì)“詳情頁(yè)”網(wǎng)頁(yè)的跳轉(zhuǎn)。教學(xué)重點(diǎn)怎樣創(chuàng)建文本和圖像超鏈接？如何管理超鏈接？教學(xué)難點(diǎn)怎樣創(chuàng)建文本和圖像超鏈接？教學(xué)設(shè)計(jì)教學(xué)思路：（1）首先為學(xué)生介紹什么是超鏈接，以及超鏈接的類型和路徑；（2）通過為植物網(wǎng)站設(shè)計(jì)跳轉(zhuǎn)的案例來介紹如何創(chuàng)建超鏈接；（3）然后講解檢查超鏈接、更改超鏈接，以及自動(dòng)更新超鏈接的知識(shí)；（4）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來設(shè)計(jì)“詳情頁(yè)”網(wǎng)頁(yè)的跳轉(zhuǎn)，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法。教學(xué)資料及要求：除教材中的實(shí)例外，學(xué)員還需通過其他途徑了解更多的制作文本網(wǎng)頁(yè)的方法。教學(xué)內(nèi)容知識(shí)回顧：前面講解了制作文本網(wǎng)頁(yè)和圖像網(wǎng)頁(yè)的方法，下面將介紹在網(wǎng)頁(yè)中添加超鏈接的方法。討論問題：1、超鏈接的類型有哪些？2、可以為網(wǎng)頁(yè)中的什么元素添加超鏈接？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。5.1認(rèn)識(shí)超鏈接5.1.1超鏈接的定義5.1.2超鏈接的類型5.1.3鏈接路徑5.2創(chuàng)建超鏈接5.2.1課堂案例——為植物網(wǎng)站設(shè)計(jì)跳轉(zhuǎn)5.2.2創(chuàng)建文本超鏈接5.2.3創(chuàng)建圖像超鏈接和熱點(diǎn)鏈接5.2.4創(chuàng)建電子郵件超鏈接5.2.5創(chuàng)建錨點(diǎn)超鏈接5.2.6創(chuàng)建其他超鏈接5.3管理超鏈接5.3.1檢查超鏈接5.3.2在站點(diǎn)范圍內(nèi)更改超鏈接5.3.3自動(dòng)更新超鏈接5.4上機(jī)實(shí)訓(xùn)——設(shè)計(jì)“詳情頁(yè)”網(wǎng)頁(yè)的跳轉(zhuǎn)5.4.1實(shí)訓(xùn)要求5.4.2實(shí)訓(xùn)分析5.4.3操作思路5.5課后練習(xí)1.練習(xí)1——為“企業(yè)新聞”網(wǎng)頁(yè)創(chuàng)建超鏈接2.練習(xí)2——為“幫助”網(wǎng)頁(yè)創(chuàng)建超鏈接小結(jié)了解超鏈接的定義和路徑。了解超鏈接的類型。掌握創(chuàng)建不同類型的超鏈接的方法。掌握管理超鏈接的方法。思考及作業(yè)練一練：練習(xí)1——為“企業(yè)新聞”網(wǎng)頁(yè)創(chuàng)建超鏈接本練習(xí)要求在“企業(yè)新聞”網(wǎng)頁(yè)中創(chuàng)建文本、圖像熱點(diǎn)、電子郵件和空鏈接，并對(duì)超鏈接屬性進(jìn)行設(shè)置。練習(xí)2——為“幫助”網(wǎng)頁(yè)創(chuàng)建超鏈接本練習(xí)要求為“幫助”網(wǎng)頁(yè)創(chuàng)建超鏈接，主要包括文本超鏈接、電子郵件超鏈接、空鏈接、錨點(diǎn)鏈接的創(chuàng)建。

課時(shí)內(nèi)容網(wǎng)頁(yè)布局設(shè)計(jì)授課時(shí)間180分鐘課時(shí)4教學(xué)目標(biāo)使用表格布局網(wǎng)頁(yè)。創(chuàng)建CSS樣式表。DIV+CSS美化網(wǎng)頁(yè)。上機(jī)實(shí)訓(xùn)——制作“產(chǎn)品展示”網(wǎng)頁(yè)。教學(xué)重點(diǎn)如何插入和編輯表格？如何創(chuàng)建CSS樣式表？怎樣使用CSS+DIV進(jìn)行布局？教學(xué)難點(diǎn)怎樣使用CSS+DIV進(jìn)行布局？教學(xué)設(shè)計(jì)教學(xué)思路：（1）通過制作“上新活動(dòng)”網(wǎng)頁(yè)的案例來講解使用表格布局網(wǎng)頁(yè)的方法；（2）通過制作“style.css”樣式表的案例來講解創(chuàng)建CSS樣式表的方法；（3）通過制作花火植物家居館首頁(yè)來介紹使用DIV+CSS美化網(wǎng)頁(yè)的方法；（4）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來制作產(chǎn)品展示網(wǎng)頁(yè)，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法。教學(xué)資料及要求：除教材中的實(shí)例外，學(xué)員還需通過其他途徑了解更多的制作文本網(wǎng)頁(yè)的方法。教學(xué)內(nèi)容知識(shí)回顧：前面介紹了為網(wǎng)頁(yè)添加超鏈接的知識(shí)，下面將對(duì)網(wǎng)頁(yè)布局設(shè)計(jì)進(jìn)行介紹。討論問題：1、在網(wǎng)頁(yè)中利用表格布局有什么好處？2、在網(wǎng)頁(yè)中利用CSS樣式表布局有什么好處？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。6.1使用表格布局網(wǎng)頁(yè)6.1.1課堂案例——制作“上新活動(dòng)”網(wǎng)頁(yè)6.1.2插入表格6.1.3選擇表格和單元格6.1.4調(diào)整表格或單元格的大小6.1.5增加和刪除表格的行或列6.1.6合并與拆分單元格6.1.7設(shè)置表格和單元格的屬性6.1.8表格的高級(jí)操作6.2創(chuàng)建CSS樣式表6.2.1課堂案例——制作“style.css”樣式表6.2.2CSS概述6.2.3CSS樣式表的基本語法6.2.4CSS樣式表的類型6.2.5認(rèn)識(shí)CSS設(shè)計(jì)器6.2.6創(chuàng)建樣式表6.2.7使用豐富的CSS樣式6.2.8CSS過渡效果的應(yīng)用6.3DIV+CSS美化網(wǎng)頁(yè)6.3.1課堂案例——制作花火植物家居館首頁(yè)6.3.2認(rèn)識(shí)DIV標(biāo)簽6.3.3認(rèn)識(shí)DIV+CSS布局模式6.3.4插入DIV元素6.3.5HTML5結(jié)構(gòu)元素6.3.6使用jQueryUI6.4上機(jī)實(shí)訓(xùn)——制作“產(chǎn)品展示”網(wǎng)頁(yè)6.4.1實(shí)訓(xùn)要求6.4.2實(shí)訓(xùn)分析6.4.3操作思路6.4課后練習(xí)1.練習(xí)1——制作“蓉錦大學(xué)教務(wù)處”網(wǎng)頁(yè)2.練習(xí)2——制作“花店”網(wǎng)頁(yè)小結(jié)掌握在網(wǎng)頁(yè)中插入和編輯表格的方法.掌握在網(wǎng)頁(yè)中創(chuàng)建CSS樣式的方法.掌握使用CSS+DIV進(jìn)行布局的操作方法。思考及作業(yè)練一練：練習(xí)1——制作“蓉錦大學(xué)教務(wù)處”網(wǎng)頁(yè)本練習(xí)要求使用DIV+CSS來布局“蓉錦大學(xué)教務(wù)處”網(wǎng)頁(yè)，制作時(shí)先創(chuàng)建DIV，然后進(jìn)行編輯，最后通過CSS樣式來統(tǒng)一控制頁(yè)面風(fēng)格。通過本練習(xí)的學(xué)習(xí)，可以掌握DIV+CSS布局頁(yè)面的方法。練習(xí)2——制作“花店”網(wǎng)頁(yè)本練習(xí)要求制作“flowes.html”網(wǎng)頁(yè)，該網(wǎng)頁(yè)是一個(gè)鮮花網(wǎng)頁(yè)，主要用于展示店鋪的鮮花產(chǎn)品。本練習(xí)將采用DIV+CSS來完成布局。

課時(shí)內(nèi)容使用模板與庫(kù)文件授課時(shí)間90分鐘課時(shí)2教學(xué)目標(biāo)創(chuàng)建并編輯模板。創(chuàng)建并使用庫(kù)。上機(jī)實(shí)訓(xùn)——制作“婚紗詳情頁(yè)”網(wǎng)頁(yè)模板。教學(xué)重點(diǎn)如何創(chuàng)建并編輯模板？如何創(chuàng)建并使用庫(kù)文件？教學(xué)難點(diǎn)如何創(chuàng)建并編輯模板？如何創(chuàng)建并使用庫(kù)文件？教學(xué)設(shè)計(jì)教學(xué)思路：（1）通過制作“宅家優(yōu)購(gòu)”網(wǎng)頁(yè)的案例來講解創(chuàng)建并編輯模板的方法；（2）通過制作“新品體驗(yàn)”網(wǎng)頁(yè)的案例來介紹創(chuàng)建并使用庫(kù)的知識(shí)；（3）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來制作“婚紗詳情頁(yè)”網(wǎng)頁(yè)模板，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法。教學(xué)資料及要求：除教材中的實(shí)例外，學(xué)員還需通過其他途徑了解更多的制作文本網(wǎng)頁(yè)的方法。教學(xué)內(nèi)容知識(shí)回顧：前面對(duì)網(wǎng)頁(yè)布局設(shè)計(jì)進(jìn)行了講解，下面講解在網(wǎng)頁(yè)中使用模板與庫(kù)文件的知識(shí)。討論問題：1、模板有什么作用？2、庫(kù)是什么？它有什么作用？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。7.1創(chuàng)建并編輯模板7.1.1課堂案例——制作“宅家優(yōu)購(gòu)”網(wǎng)頁(yè)7.1.2模板的概述7.1.3創(chuàng)建模板7.1.4編輯模板7.1.5應(yīng)用模板7.2創(chuàng)建并使用庫(kù)7.2.1課堂案例——制作“新品體驗(yàn)”網(wǎng)頁(yè)7.2.2認(rèn)識(shí)庫(kù)7.2.3創(chuàng)建庫(kù)項(xiàng)目7.2.4庫(kù)項(xiàng)目的其他操作7.2.5設(shè)置庫(kù)屬性7.3上機(jī)實(shí)訓(xùn)——制作“婚紗詳情頁(yè)”網(wǎng)頁(yè)模板7.3.1實(shí)訓(xùn)要求7.3.2實(shí)訓(xùn)分析7.3.3操作思路7.4課后練習(xí)1.練習(xí)1——制作“精品推廣”網(wǎng)頁(yè)2.練習(xí)2——制作“合作交流”模板網(wǎng)頁(yè)小結(jié)掌握創(chuàng)建并編輯模板的方法。掌握創(chuàng)建并使用庫(kù)文件的方法。思考及作業(yè)練一練：練習(xí)1——制作“精品推廣”網(wǎng)頁(yè)本練習(xí)要求為“服裝網(wǎng)”制作一個(gè)精品推廣頁(yè)面，該網(wǎng)頁(yè)主要由導(dǎo)航和推廣內(nèi)容組成，要求使用Dreamweaver的庫(kù)功能來實(shí)現(xiàn)快速制作。練習(xí)2——制作“合作交流”模板網(wǎng)頁(yè)本練習(xí)要求通過模板來快速制作合作交流頁(yè)面。制作時(shí)可先創(chuàng)建模板，在其中創(chuàng)建可編輯區(qū)域，然后通過創(chuàng)建的模板來新建“hzjl.html”網(wǎng)頁(yè)，并在網(wǎng)頁(yè)中添加內(nèi)容。

課時(shí)內(nèi)容使用表單和行為授課時(shí)間90分鐘課時(shí)2教學(xué)目標(biāo)使用表單。應(yīng)用JavaScript行為。上機(jī)實(shí)訓(xùn)——制作“用戶注冊(cè)”網(wǎng)頁(yè)。教學(xué)重點(diǎn)使用表單的方法是什么？怎樣在網(wǎng)頁(yè)中應(yīng)用JavaScript行為？教學(xué)難點(diǎn)使用表單的方法是什么？怎樣在網(wǎng)頁(yè)中應(yīng)用JavaScript行為？教學(xué)設(shè)計(jì)教學(xué)思路：（1）通過制作“植物網(wǎng)登錄”網(wǎng)頁(yè)的案例來講解使用表單的方法，其中包括介紹表單的概念、插入并設(shè)置表單屬性、插入表單元素等知識(shí)點(diǎn)；（2）通過完善“植物網(wǎng)注冊(cè)”網(wǎng)頁(yè)的效果來講解應(yīng)用JavaScript行為的知識(shí)；（3）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來制作“用戶注冊(cè)”網(wǎng)頁(yè)，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法。教學(xué)資料及要求：除教材中的實(shí)例外，學(xué)員還需通過其他途徑了解更多的制作文本網(wǎng)頁(yè)的方法。教學(xué)內(nèi)容知識(shí)回顧：前面講解了在網(wǎng)頁(yè)中使用模板與庫(kù)文件，下面將介紹使用表單和JavaScript行為的知識(shí)。討論問題：1、表單的常見作用是什么？2、常用的事件包括些什么？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。8.1使用表單8.1.1課堂案例——制作“植物網(wǎng)登錄”網(wǎng)頁(yè)8.1.2表單的概述8.1.3創(chuàng)建表單并設(shè)置屬性8.1.4插入表單元素8.1.5使用jQueryUI的表單部分8.2應(yīng)用JavaScript行為8.2.1課堂案例——完善“植物網(wǎng)注冊(cè)”效果8.2.2認(rèn)識(shí)行為8.2.3彈出窗口信息8.2.4打開瀏覽器窗口8.2.5調(diào)用JavaScript行為8.2.6轉(zhuǎn)到URL行為8.2.7顯示文本行為8.2.8圖像與多媒體的行為8.2.9用行為控制表單8.2.10使用行為添加jQueryt效果8.3上機(jī)實(shí)訓(xùn)——制作“用戶注冊(cè)”網(wǎng)頁(yè)8.3.1實(shí)訓(xùn)要求8.3.2實(shí)訓(xùn)分析8.3.3操作思路8.4課后練習(xí)1.練習(xí)1——制作“小兒郎注冊(cè)網(wǎng)頁(yè)”2.練習(xí)2——制作“宅粉注冊(cè)”網(wǎng)頁(yè)小結(jié)掌握使用表單的方法。掌握在網(wǎng)頁(yè)中應(yīng)用JavaScript行為的方法。思考及作業(yè)練一練：練習(xí)1——制作“小兒郎注冊(cè)網(wǎng)頁(yè)”本練習(xí)要求為“小兒郎”培訓(xùn)班制作一個(gè)用戶注冊(cè)網(wǎng)頁(yè)，該網(wǎng)頁(yè)主要由用戶注冊(cè)頁(yè)面和使用協(xié)議頁(yè)面組成，要求使用Dreamweaver的表單和行為功能來實(shí)現(xiàn)。練習(xí)2——制作“宅粉注冊(cè)”網(wǎng)頁(yè)本練習(xí)要求為宅家商城網(wǎng)站制作一個(gè)用戶注冊(cè)頁(yè)面，要求該頁(yè)面能夠?yàn)榫W(wǎng)站收集用戶的相關(guān)基本信息、實(shí)現(xiàn)用戶與網(wǎng)站的交互。

課時(shí)內(nèi)容制作移動(dòng)端網(wǎng)頁(yè)授課時(shí)間90分鐘課時(shí)2教學(xué)目標(biāo)使用jQueryMobile。使用PhoneGapBuild打包移動(dòng)應(yīng)用。上機(jī)實(shí)訓(xùn)——制作移動(dòng)端頁(yè)面。教學(xué)重點(diǎn)怎么使用jQueryMobile？怎么使用PhoneGapBuild打包移動(dòng)應(yīng)用？教學(xué)難點(diǎn)怎么使用jQueryMobile？教學(xué)設(shè)計(jì)教學(xué)思路：（1）通過制作沒事APP主頁(yè)的案例來講解使用jQueryMobile制作移動(dòng)端網(wǎng)頁(yè)的方法；（2）介紹PhoneGapBuild，并講解利用PhoneGapBuild打包移動(dòng)應(yīng)用程序的方法；（3）最后將本章所講的知識(shí)點(diǎn)串聯(lián)起來制作移動(dòng)端頁(yè)面，達(dá)到學(xué)以致用的目的。教學(xué)手段：通過理論帶案例步驟的方式，讓學(xué)生加深理論知識(shí)理解的同時(shí)，掌握其操作方法。教學(xué)資料及要求：除教材中的實(shí)例外，學(xué)員還需通過其他途徑了解更多的制作文本網(wǎng)頁(yè)的方法。教學(xué)內(nèi)容知識(shí)回顧：前面介紹了利用DreamweaverCC制作電腦端網(wǎng)頁(yè)的知識(shí)，下面將介紹制作移動(dòng)端網(wǎng)頁(yè)的知識(shí)。討論問題：1、怎么創(chuàng)建jQueryMobile頁(yè)面？2、怎么使用jQueryMobile組件？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。9.1使用jQueryMobile9.1.1課堂案例——制作美食App主頁(yè)9.1.2認(rèn)識(shí)jQueryMobile9.1.3創(chuàng)建jQueryMobile頁(yè)面9.1.4使用jQueryMobile組件9.2使用PhoneGapBuild打包移動(dòng)應(yīng)用9.2.1認(rèn)識(shí)PhoneGapBuild9.2.2注冊(cè)PhoneGapBuild9.2.3打包移動(dòng)應(yīng)用程序9.3上機(jī)實(shí)訓(xùn)——制作移動(dòng)端頁(yè)面9.3.1