實(shí)戰(zhàn)開發(fā)—制作電商網(wǎng)站首頁面教學(xué)設(shè)計(jì)

1、學(xué)習(xí)好資料歡迎下載傳智播客 HTML5+CSS3 網(wǎng)站設(shè)計(jì)基礎(chǔ)教程教學(xué)設(shè)計(jì)課程名稱：HTML5+CSS3 網(wǎng)站設(shè)計(jì)基礎(chǔ)教程授課年級(jí)：2016 年級(jí)授課學(xué)期：2016 學(xué)年第一學(xué)期教師姓名：某某老師學(xué)習(xí)好資料歡迎下載課題名稱內(nèi)容分析教學(xué)目標(biāo)重點(diǎn)及措施難點(diǎn)及措施教學(xué)方式教學(xué)過程201年月日第 10 章 實(shí)戰(zhàn)開發(fā)制作電商網(wǎng)站首頁計(jì)劃6 課時(shí)面課時(shí)在深入學(xué)習(xí)了前面 9 章的知識(shí)后，相信讀者已經(jīng)熟練掌握了HTML相關(guān)標(biāo)記、CSS樣式屬性、 布局和排版以及一些簡單的CSS3動(dòng)畫特效技巧。 為了及時(shí)有效地鞏固所學(xué)的知識(shí)，本章將運(yùn)用前9 章所學(xué)的基礎(chǔ)知識(shí)開發(fā)一個(gè)網(wǎng)站項(xiàng)目 電商網(wǎng)站首頁面。掌握站點(diǎn)的建立，能夠建

2、立規(guī)范的站點(diǎn)。完成首頁面的制作，并能夠?qū)崿F(xiàn)簡單的CSS3動(dòng)畫效果。教學(xué)重點(diǎn)：建立站點(diǎn)、站點(diǎn)初始化設(shè)置、效果圖分析、頁面布局、定義公共樣式、首頁面詳細(xì)制作。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)難點(diǎn)：建立站點(diǎn)、站點(diǎn)初始化設(shè)置、頁面布局。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。第一、二課時(shí)（準(zhǔn)備工作，講解建立站點(diǎn)、站點(diǎn)初始化設(shè)置、效果圖分析、頁面布局、定義公共樣式）說明：將 10.1 節(jié)作為兩個(gè)課時(shí)進(jìn)行講解。復(fù)習(xí)上節(jié)課內(nèi)容在講解本節(jié)內(nèi)容前， 拋出以下問題讓學(xué)生回答，以復(fù)習(xí)第九章 的相關(guān)知識(shí) 。1、上一章中，我們學(xué)習(xí)了CSS3高級(jí)應(yīng)用，

3、主要包括過渡、變形、動(dòng)畫等。那么，請(qǐng)同學(xué)們回顧下：過渡效果包含哪幾個(gè)？答案：過 渡 屬 性 主 要 包 括transition-property、 transition-duration、transition-timing-function、 transition-delay四個(gè)屬性。說明：教師可根據(jù)學(xué)生對(duì)上述問題的回答情況，對(duì)以上問題進(jìn)行簡單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：制作網(wǎng)頁時(shí)通常需要先建立站點(diǎn)，那么，建立站點(diǎn)對(duì)網(wǎng)頁的制作有什么好處呢？學(xué)習(xí)好資料歡迎下載請(qǐng)小組代表 對(duì)以上問題 發(fā)表見解 。教師 對(duì)上述問題進(jìn)行解釋 ：“

4、站點(diǎn)”對(duì)于制作維護(hù)一個(gè)網(wǎng)站很重要，它能夠幫助我們系統(tǒng)地管理網(wǎng)站文件。一個(gè)網(wǎng)站， 通常由 HTML網(wǎng)頁文件、 圖片、 CSS樣式表等構(gòu)成。 簡單地說，建立站點(diǎn)就是定義一個(gè)存放網(wǎng)站中零散文件的文件夾。這樣，可以形成明晰的站點(diǎn)組織結(jié)構(gòu)圖，方便增減站內(nèi)文件夾及文檔等，這對(duì)于網(wǎng)站本身的上傳維護(hù)，內(nèi)容的擴(kuò)充和移植都有著重要的影響。知識(shí)點(diǎn)講解作為一個(gè)專業(yè)的網(wǎng)頁制作人員，當(dāng)拿到一個(gè)頁面的效果圖時(shí)，首先要做的就是準(zhǔn)備工作，主要包括“建立站點(diǎn)、站點(diǎn)初始化設(shè)置、切片、效果圖分析、頁面布局、定義公共樣式”等。本節(jié)將針對(duì)網(wǎng)頁制作的相關(guān)準(zhǔn)備工作進(jìn)行詳細(xì)講解。? 講解“建立站點(diǎn)”（ 1）、教師通過 PPT 對(duì)“站點(diǎn)”的概念

5、進(jìn)行講解，并舉例說明。（ 2）、教師通過 PPT 對(duì)“建立站點(diǎn)”的用途及優(yōu)點(diǎn)進(jìn)行分析說明。（ 3）、教師指出“建立站點(diǎn)”分為“創(chuàng)建網(wǎng)站根目錄”、“在根目錄下新建文件”、“新建站點(diǎn)” 、“站點(diǎn)建立完成”四個(gè)步驟。（ 4）、教師分別對(duì)“創(chuàng)建網(wǎng)站根目錄” 、“在根目錄下新建文件” 、“新建站點(diǎn)”、“站點(diǎn)建立完成”進(jìn)行詳細(xì)講解，并使用 Dreamweaver 工具演示說明。（ 5）、教師對(duì)比“建立站點(diǎn)”前后，站點(diǎn)根目錄文件夾結(jié)構(gòu)圖，分析其目錄結(jié)構(gòu)的變化。（ 6）、教師指出使用 Dreamweaver 工具“建立站點(diǎn)”時(shí)需要注意的問題，并給予解答。（ 7）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。? 講

6、解“站點(diǎn)初始化設(shè)置”（ 1）、教師通過PPT 對(duì)“站點(diǎn)初始化設(shè)置”的必要性進(jìn)行說明。（ 2）、教師對(duì)“站點(diǎn)初始化設(shè)置”的步驟進(jìn)行講解，并使用Dreamweaver工具實(shí)時(shí)演示。（ 3）、教師指出“站點(diǎn)初始化設(shè)置”時(shí)需要注意的問題，并給予解答。（ 4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。? 講解“效果圖分析”（ 1）、教師和學(xué)生互動(dòng)：效果圖分析是我們網(wǎng)頁制作的基礎(chǔ)，只有熟悉頁面的結(jié)構(gòu)及版式，才能更加高效地完成網(wǎng)頁的布局和排版。下面，將以電商網(wǎng)站首頁效果圖為例，學(xué)習(xí)如何進(jìn)行效果圖的分析。（ 2）、教師打開電商網(wǎng)站首頁，對(duì)電商網(wǎng)站首頁面效果圖進(jìn)行展示。學(xué)習(xí)好資料歡迎下載頭部導(dǎo)航頭部、導(dǎo)航及視頻

7、內(nèi)容部分（新品）內(nèi)容部分（試裝）內(nèi)容部分（評(píng)測）腳部（信息注冊(cè)）版權(quán)信息（ 3）、教師通過“ HTML 結(jié)構(gòu)”、“ CSS 樣式”兩方面對(duì)電商網(wǎng)站首頁面進(jìn)行分析，并詳細(xì)講解。（ 4）、教師指出“效果圖分析”時(shí)需要注意的問題，并給予解答。（ 5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。學(xué)習(xí)好資料歡迎下載? 講解“頁面布局”（ 1）、教師和學(xué)生互動(dòng)：頁面布局對(duì)于改善網(wǎng)站的外觀非常重要，是為了使網(wǎng)站頁面結(jié)構(gòu)更加清晰、有條理，而對(duì)頁面進(jìn)行的“排版”。下面，將對(duì)電商網(wǎng)站首頁面進(jìn)行整體布局。（ 2）、教師根據(jù) “效果圖分析” 的結(jié)果對(duì)頁面進(jìn)行布局， 并在 Dreamweaver 工具中書寫相應(yīng)的代碼。（

8、 3）、教師對(duì)“頁面布局”的代碼進(jìn)行講解，并進(jìn)行實(shí)時(shí)演示。（ 4）、教師指出“頁面布局”時(shí)需要注意的問題，并給予解答。（ 5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。? 講解“定義公共樣式”（ 1）、教師指出“清除各瀏覽器默認(rèn)樣式”的原因及作用。（ 2）、教師對(duì)“定義公共樣式”的方法進(jìn)行講解，并進(jìn)行代碼演示。（ 3）、教師分析首頁面中的哪些樣式需要定義為公共樣式，并進(jìn)行說明。（ 4）、教師打開樣式文件 index.css，書寫首頁面的公共樣式。（ 5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。說明： 在網(wǎng)頁制作時(shí)可適時(shí)停下來，讓學(xué)生自行嘗試。小組之間可以協(xié)作討論，教師巡視，對(duì)疑難問題進(jìn)行解答

9、。階段小結(jié)? 小結(jié)重點(diǎn)：建立站點(diǎn)、頁面布局。? 答疑教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。鞏固練習(xí)? 鞏固“電商網(wǎng)站首頁面”頁面布局學(xué)完知識(shí)點(diǎn)后，讓學(xué)生通過分析“電商網(wǎng)站首頁面”效果圖，進(jìn)行頁面布局，并定義其公共樣式。以此使學(xué)生更熟練地掌握“建立站點(diǎn)、站點(diǎn)初始化設(shè)置、效果圖分析、頁面布局、定義公共樣式”等知識(shí)點(diǎn)。? 通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。布置作業(yè)? 完成“補(bǔ)充案例” ，通過平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。? 預(yù)習(xí) 10.2 節(jié) 首頁面詳細(xì)制作。第三、四、五、六

10、課時(shí)（制作“電商網(wǎng)站首頁面” ，講解制作頭部、導(dǎo)航和視頻、內(nèi)容部分（新品） 、內(nèi)容部分（試妝） 、內(nèi)容部分（評(píng)測） 、腳部版權(quán)信息）說明：將 10.2 節(jié)作為四個(gè)課時(shí)進(jìn)行講解。復(fù)習(xí)上節(jié)課內(nèi)容在講解本節(jié)內(nèi)容前，拋出 以下 問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。1、關(guān)于建立站點(diǎn)的意義，下列說法正確的是？（）學(xué)習(xí)好資料歡迎下載A、可以形成明晰的站點(diǎn)組織結(jié)構(gòu)圖。B、方便增減站內(nèi)文件夾及文檔。C、可以系統(tǒng)化地管理網(wǎng)站文件。D、對(duì)于網(wǎng)站本身的上傳維護(hù)，內(nèi)容的擴(kuò)充和移植都有著重要的影響。答案： ABCD答案解析：“站點(diǎn)”對(duì)于制作維護(hù)一個(gè)網(wǎng)站很重要，它能夠幫助我們系統(tǒng)地管理網(wǎng)站文件。一個(gè)網(wǎng)站，通常由 HTML 網(wǎng)

11、頁文件、圖片、 CSS 樣式表等構(gòu)成。簡單地說， 建立站點(diǎn)就是定義一個(gè)存放網(wǎng)站中零散文件的文件夾。這樣，可以形成明晰的站點(diǎn)組織結(jié)構(gòu)圖，方便增減站內(nèi)文件夾及文檔等，這對(duì)于網(wǎng)站本身的上傳維護(hù)，內(nèi)容的擴(kuò)充和移植都有著重要的影響。說明：教師可根據(jù)學(xué)生對(duì)上述問題的回答情況，對(duì)以上問題進(jìn)行簡單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁模塊命名需要遵循一定的規(guī)則。下列選項(xiàng)中，常用于網(wǎng)頁模塊命名的是？ （）A 、 navB 、 divC、 headerD、 footer請(qǐng)小組代表 對(duì)以上問題 發(fā)表見解 。答案： ACD教師 對(duì)上述問題進(jìn)行解釋 ：在

12、網(wǎng)站模塊的命名規(guī)則中，header 常用于命名頁面頭部，nav 常用于命名導(dǎo)航欄，div 是常用的塊元素，footer 常用于命名頁面底欄。知識(shí)點(diǎn)講解本節(jié)主要講解電商網(wǎng)站首頁面的詳細(xì)制作，主要包括“制作頭部、導(dǎo)航和視頻、內(nèi)容部分（新品）、內(nèi)容部分（試妝）、內(nèi)容部分（評(píng)測）、腳部版權(quán)信息”等知識(shí)點(diǎn)。?講解“制作頭部、導(dǎo)航和視頻”（ 1）、教師展示頭部、導(dǎo)航和視頻的效果圖，通過HTML結(jié)構(gòu)、 CSS 樣式等方面進(jìn)行分析，并劃分其具體結(jié)構(gòu)。學(xué)習(xí)好資料歡迎下載頭部導(dǎo)航視頻、音頻PIC及按鈕（ 2）、教師帶領(lǐng)學(xué)生搭建網(wǎng)頁的頭部、導(dǎo)航和視頻結(jié)構(gòu)，在index.html件中書寫HTML 結(jié)構(gòu)代碼。（ 3）、

13、教師帶領(lǐng)學(xué)生在樣式表index.css 中書寫對(duì)應(yīng)的CSS 樣式代碼。文（ 4）、教師對(duì)“制作頭部、導(dǎo)航和視頻”時(shí)需要注意的問題進(jìn)行說明，并給與解答。（ 5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。?講解“制作內(nèi)容部分（新品）”（ 1）、教師展示內(nèi)容部分（新品）的效果圖，通過HTML結(jié)構(gòu)、 CSS 樣式等方面進(jìn)行分析，并劃分其具體結(jié)構(gòu)。標(biāo)題產(chǎn)品（ 2）、教師帶領(lǐng)學(xué)生在首頁面文檔index.html 中，添加內(nèi)容部分（新品）模塊的結(jié)構(gòu)代碼。（ 3）、教師分析內(nèi)容部分（新品）模塊的CSS 樣式，并在樣式表index.css中書寫對(duì)應(yīng)的CSS 樣式代碼。（ 4）、教師對(duì)“制作內(nèi)容部分（新品） ”時(shí)

14、需要注意的問題進(jìn)行說明，并給與解答。（ 5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。?講解“制作內(nèi)容部分（試妝）”（ 1）、教師展示內(nèi)容部分（試妝）的效果圖，通過HTML結(jié)構(gòu)、 CSS 樣式等方面進(jìn)行分析，并劃分其具體結(jié)構(gòu)。學(xué)習(xí)好資料歡迎下載標(biāo)題產(chǎn)品（ 2）、教師帶領(lǐng)學(xué)生在首頁面文檔index.html 中，添加內(nèi)容部分（試妝）模塊的結(jié)構(gòu)代碼。（ 3）、教師分析內(nèi)容部分（試妝）模塊的CSS 樣式，并在樣式表index.css中書寫對(duì)應(yīng)的CSS 樣式代碼。（ 4）、教師對(duì)“制作內(nèi)容部分（試妝） ”時(shí)需要注意的問題進(jìn)行說明，并給與解答。（ 5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。?講解“制

15、作內(nèi)容部分（評(píng)測）”（ 1）、教師展示內(nèi)容部分（評(píng)測）模塊的效果圖，通過HTML 結(jié)構(gòu)、 CSS樣式等方面進(jìn)行分析，并劃分其具體結(jié)構(gòu)。標(biāo)題評(píng)測公司 Logo（ 2）、教師帶領(lǐng)學(xué)生在首頁面文檔index.html 中，添加內(nèi)容部分（評(píng)測）模塊的結(jié)構(gòu)代碼。（ 3）、教師分析內(nèi)容部分（評(píng)測）模塊的CSS 樣式，并在樣式表index.css中書寫對(duì)應(yīng)的CSS 樣式代碼。（ 4）、教師對(duì)“制作內(nèi)容部分（評(píng)測） ”時(shí)需要注意的問題進(jìn)行說明，并給與解答。（ 5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。階段小結(jié)? 小結(jié)重點(diǎn)：電商網(wǎng)站首頁面制作。? 答疑教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。鞏固練習(xí)學(xué)習(xí)好資料歡迎下載?鞏固“電商網(wǎng)站首頁面”的制作學(xué)完知識(shí)點(diǎn)后， 讓學(xué)生再制作一次“電商網(wǎng)站首頁面” ，以此使學(xué)生更熟練地掌握如何制作頭部、導(dǎo)航和視頻、內(nèi)容部分（新品） 、內(nèi)容部分（試妝） 、內(nèi)容部分（評(píng)測） 、腳部版權(quán)信息等。? 通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。布置作業(yè)?完成“補(bǔ)充案例” ，通過平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。?復(fù)習(xí) 本課時(shí)的所有知識(shí)點(diǎn)和案例，加強(qiáng)鞏固。第七課時(shí)（上機(jī)測試）教師發(fā)放測試題目及案例素材，學(xué)