項(xiàng)目2 “博客”頁面制作_第1頁
項(xiàng)目2 “博客”頁面制作_第2頁
項(xiàng)目2 “博客”頁面制作_第3頁
項(xiàng)目2 “博客”頁面制作_第4頁
項(xiàng)目2 “博客”頁面制作_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、黑馬程序員網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程（HTML+CSS+JavaScript）（第2版）教學(xué)設(shè)計(jì)課程名稱： 網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程（HTML+CSS+JavaScript）（第2版）授課年級(jí)： XXXX年級(jí) 授課學(xué)期： 第X學(xué)期 教師姓名： 某某老師 2020年12月課題名稱項(xiàng)目二 “博客”頁面制作計(jì)劃課時(shí)6課時(shí)教學(xué)引入博客也被稱為網(wǎng)絡(luò)日記，是一種深受歡迎的網(wǎng)絡(luò)交流方式。在博客中，博主（博客賬號(hào)的擁有者）可以記錄技術(shù)感悟、旅游隨筆、心情寫照等。隨著互聯(lián)網(wǎng)用戶的激增，博客已經(jīng)成為一種全新的生活、工作、學(xué)習(xí)的方式。最近熱愛旅游的小思想要制作一個(gè)關(guān)于旅游的個(gè)人博客頁面，來分享一些旅游心情隨筆。由于之前沒

2、有接觸過網(wǎng)頁制作，小思決定先從HMTL語法、基本格式、基礎(chǔ)標(biāo)簽學(xué)起，等夯實(shí)基礎(chǔ)之后，再著手“博客”頁面的制作。教學(xué)目標(biāo)l 知識(shí)目標(biāo)使學(xué)生掌握HTML文檔基本格式，對(duì)HTML文檔格式有一個(gè)基本的認(rèn)識(shí)。使學(xué)生了解HTML文檔頭部相關(guān)標(biāo)簽，知道一些常用頭部標(biāo)簽的作用。l 技能目標(biāo)使學(xué)生掌握?qǐng)D像標(biāo)簽的用法，能夠制作圖文混排頁面。使學(xué)生掌握網(wǎng)頁中文本的字體、字號(hào)和顏色的設(shè)置方法。教學(xué)重點(diǎn)l HTML標(biāo)簽的屬性l 頁面格式化標(biāo)簽l <div>標(biāo)簽l 圖像標(biāo)簽l 絕對(duì)路徑和相對(duì)路徑l 【項(xiàng)目實(shí)現(xiàn)】制作“頭部”模塊l 【項(xiàng)目實(shí)現(xiàn)】制作“博主簡介”模塊l 【項(xiàng)目實(shí)現(xiàn)】制作“旅游隨筆”模塊l 【項(xiàng)目實(shí)

3、現(xiàn)】制作“驢友評(píng)論”模塊l 【項(xiàng)目實(shí)現(xiàn)】制作“頁腳”模塊教學(xué)難點(diǎn)l 絕對(duì)路徑和相路徑教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一、二課時(shí)（HTML文檔基本格式、HTML標(biāo)簽、HTML標(biāo)簽的屬性、HTML標(biāo)簽的關(guān)系、HTML文檔頭部相關(guān)標(biāo)簽、頁面格式化標(biāo)簽、文本樣式標(biāo)簽、文本格式化標(biāo)簽、特殊字符標(biāo)簽、<div>標(biāo)簽、常用圖像格式、圖像標(biāo)簽、相對(duì)路徑和絕對(duì)路徑、切圖）一、復(fù)習(xí)鞏固 教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過需求引入的方式導(dǎo)入新課HTML作為一門標(biāo)簽語言，主要用來描述網(wǎng)頁中的文字、圖像等信息。網(wǎng)頁中所有的結(jié)構(gòu)搭建都

4、是通過HTML標(biāo)簽來完成的。因此我們想要制作網(wǎng)頁，首先要認(rèn)識(shí)HTML。本節(jié)將對(duì)HTML文檔基本格式、HTML標(biāo)簽等知識(shí)進(jìn)行講解，使大家進(jìn)一步認(rèn)識(shí)HTML。三、新課講解 知識(shí)點(diǎn)1-HTML文檔基本格式教師通過展示PPT中的圖片，講解HTML文檔基本格式。（1） 教師講解HTML文檔基本格式l <!DOCTYPE>文檔類型聲明l <html>根標(biāo)簽l <head>頭部標(biāo)簽l <body>主體標(biāo)簽。（2） 教師講解簡化后的HTML5文檔基本格式。 知識(shí)點(diǎn)2-HTML標(biāo)簽教師通過展示PPT講解HTML標(biāo)簽。（1） 雙標(biāo)簽：由開始和結(jié)束兩個(gè)標(biāo)簽符號(hào)組成的標(biāo)

5、簽。（2） 單標(biāo)簽：用一個(gè)標(biāo)簽符號(hào)即可完整的描述某個(gè)功能的標(biāo)簽。 知識(shí)點(diǎn)3-HTML標(biāo)簽的屬性教師通過展示PPT講解HTML標(biāo)簽的屬性。（1） HTML標(biāo)簽屬性的作用：為HTML標(biāo)簽設(shè)置屬性的方式可以增加更多的顯示樣式。（2） HTML標(biāo)簽添加屬性的基本語法格式：<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" >內(nèi)容</標(biāo)簽名>知識(shí)點(diǎn)4-HTML標(biāo)簽的關(guān)系教師通過PPT講解HTML標(biāo)簽的關(guān)系。（1） 嵌套關(guān)系：一個(gè)雙標(biāo)簽里面有包含了其他的標(biāo)簽。（2） 并列關(guān)系：兩個(gè)標(biāo)簽處于同一級(jí)別，并且沒有包含關(guān)系。知識(shí)點(diǎn)5-HTML文檔頭

6、部相關(guān)標(biāo)簽教師通過PPT講解HTML文檔頭部相關(guān)標(biāo)簽。（1） <title>標(biāo)簽：用于設(shè)置HTML頁面的標(biāo)題。（2） <meta />標(biāo)簽：用于定義頁面的元信息。知識(shí)點(diǎn)6-頁面格式化標(biāo)簽教師通過PPT講解頁面格式化標(biāo)簽。（1） 標(biāo)題標(biāo)簽l 基本語法格式：<hn align="對(duì)齊方式">標(biāo)題文本</hn>l align屬性的取值：left、center、right。l 使用標(biāo)題標(biāo)簽的注意事項(xiàng)（2） 段落標(biāo)簽基本語法格式：<p align="對(duì)齊方式">段落文本</p>（3） 水平線標(biāo)

7、簽l 基本語法格式：<hr 屬性="屬性值" />l <hr />標(biāo)簽的常用屬性：align、size、color、width（4） 換行標(biāo)簽l 換行標(biāo)簽“<br />”可以使文本內(nèi)容強(qiáng)制換行顯示。l 使用換行標(biāo)簽的注意事項(xiàng)。知識(shí)點(diǎn)7-文本樣式標(biāo)簽教師通過PPT講解文本樣式標(biāo)簽。（1） 基本語法格式：<font 屬性="屬性值">文本內(nèi)容</font> （2） 常用屬性：face、size、color。（3） 使用<font>標(biāo)簽的注意事項(xiàng)知識(shí)點(diǎn)8-文本格式化標(biāo)簽教師通過PPT講解常

8、見的文本格式化標(biāo)簽。（1） <b></b>和<strong></strong>（2） <i></i>和<em></em>（3） <s></s>和<del></del>（4） <u></u>和<ins></ins>知識(shí)點(diǎn)9-特殊字符標(biāo)簽教師通過PPT講解特殊字符標(biāo)簽。特殊字符描述字符的代碼空格符&nbsp;<小于號(hào)&lt;>大于號(hào)&gt;&和號(hào)&amp;￥

9、人民幣&yen;©版權(quán)&copy;®注冊(cè)商標(biāo)&reg;°攝氏度&deg;±正負(fù)號(hào)&plusmn;×乘號(hào)&times;÷除號(hào)&divide;²平方2（上標(biāo)2）&sup2;³立方3（上標(biāo)3）&sup3;教師在講解時(shí)，講解不推薦空格符“&nbsp;”的原因。知識(shí)點(diǎn)10-<div>標(biāo)簽教師通過PPT講解<div>標(biāo)簽。<div>標(biāo)簽可以簡單理解成一個(gè)容器，可以容納網(wǎng)頁中的文本模塊、圖像模塊，從而實(shí)現(xiàn)網(wǎng)頁的規(guī)劃

10、和布局。知識(shí)點(diǎn)11-常用圖像格式教師通過PPT講解網(wǎng)頁中常用的圖像格式。（1） GIF格式：支持動(dòng)畫。（2） PNG格式：體積更小，支持alpha透明。（3） JPEG格式：顏色多。知識(shí)點(diǎn)12-圖像標(biāo)簽教師通過PPT講解圖像標(biāo)簽。（1） 圖像標(biāo)簽的基本語法格式：<img src="圖像URL" />（2） 圖像標(biāo)簽的屬性：l src：指定圖像的路徑。l alt：圖像不能顯示時(shí)的替換文本。l title：鼠標(biāo)懸停時(shí)顯示的內(nèi)容。l width：設(shè)置圖像的寬度。l height：設(shè)置圖像的高度。l border：設(shè)置圖像邊框的寬度。l vspace：設(shè)置圖像頂部和底部

11、的空白（垂直邊距）。l hspace：設(shè)置圖像左側(cè)和右側(cè)的空白（水平邊距）。l align：將圖像對(duì)齊到左邊。知識(shí)點(diǎn)13-絕對(duì)路徑和相對(duì)路徑教師通過PPT講解絕對(duì)路徑和相對(duì)路徑。（1） 絕對(duì)路徑：絕對(duì)路徑就是網(wǎng)頁上的文檔或目錄在盤符（即C盤、D盤等）中的真正路徑。（2） 相對(duì)路徑：相對(duì)路徑就是相對(duì)于當(dāng)前文檔的路徑，相對(duì)路徑?jīng)]有盤符，通常是以HTML網(wǎng)頁文檔為起點(diǎn)，通過層級(jí)關(guān)系描述目標(biāo)圖像的位置。設(shè)置方法如下：l 圖像和html文檔位于同一文件夾；l 圖像位于html文檔的下一級(jí)文件夾；l 圖像位于html文檔的上一級(jí)文件夾。知識(shí)點(diǎn)14-切圖教師通過PPT講解切圖的步驟。（1） 選擇切片工具（2

12、） 繪制切片區(qū)域（3） 導(dǎo)出切片。四、歸納總結(jié)Ø 教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。Ø 學(xué)生交流，針對(duì)自己遇到的難點(diǎn)向老師提問，老師進(jìn)行解答。五、布置作業(yè)Ø 教師通過高校教輔平臺(tái)（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。Ø 預(yù)習(xí)下節(jié)課的內(nèi)容。第三課時(shí)（【項(xiàng)目實(shí)現(xiàn)】：頁面建設(shè)準(zhǔn)備工作、【項(xiàng)目實(shí)現(xiàn)】：制作“頭部”模塊、【項(xiàng)目實(shí)現(xiàn)】：制作“博主簡介”模塊）一、復(fù)習(xí)鞏固 教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過需直接引入的方式導(dǎo)入新課在制作“博客”頁面之前，小思需要做一些頁面建設(shè)的準(zhǔn)備工作，主

13、要包括網(wǎng)站素材整理、頁面結(jié)構(gòu)分析、頁面布局等。準(zhǔn)備完畢我們就從頭部開始進(jìn)行制作。三、新課講解知識(shí)點(diǎn)1-【項(xiàng)目實(shí)現(xiàn)】：頁面建設(shè)準(zhǔn)備工作教師展示PPT，講解頁面建設(shè)準(zhǔn)備工作。（1） 網(wǎng)站素材整理l 網(wǎng)站站點(diǎn)建立l “博客”頁面切圖（2） 頁面結(jié)構(gòu)分析（3） 頁面布局知識(shí)點(diǎn)2-【項(xiàng)目實(shí)現(xiàn)】：制作“頭部”模塊教師帶領(lǐng)學(xué)生制作“頭部”模塊（1） 效果分析：教師帶領(lǐng)學(xué)生對(duì)“頭部”模塊進(jìn)行分析。（2） 模塊制作：教師帶領(lǐng)學(xué)生對(duì)“頭部”模塊進(jìn)行制作。知識(shí)點(diǎn)3-【項(xiàng)目講解】：制作“博主簡介”模塊教師帶領(lǐng)學(xué)生制作“博主簡介”模塊（1） 效果分析：教師帶領(lǐng)學(xué)生對(duì)“博主簡介”模塊進(jìn)行分析。（2） 模塊制作：教師帶領(lǐng)學(xué)

14、生對(duì)“博主簡介”模塊進(jìn)行制作。三、歸納總結(jié)Ø 教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。Ø 學(xué)生交流，針對(duì)自己遇到的難點(diǎn)向老師提問，老師進(jìn)行解答。四、布置作業(yè)Ø 讓學(xué)生針對(duì)本節(jié)課所學(xué)內(nèi)容進(jìn)行練習(xí)鞏固。Ø 讓學(xué)生分小組討論并總結(jié)在操作中遇到的困難，列出3條。第四課時(shí)（【項(xiàng)目實(shí)現(xiàn)】：制作“旅游隨筆”模塊、【項(xiàng)目實(shí)現(xiàn)】：制作“驢友評(píng)論”模塊、【項(xiàng)目實(shí)現(xiàn)】：制作“頁腳”模塊）一、復(fù)習(xí)鞏固 教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過溫故知新的方式導(dǎo)入新課回顧上節(jié)課制作的模塊，針對(duì)難點(diǎn)再次說明。這節(jié)課繼

15、續(xù)往下進(jìn)行，制作“旅游隨筆”模塊、“驢友評(píng)論”模塊和“頁腳”模塊。三、新課講解 知識(shí)點(diǎn)1-【項(xiàng)目實(shí)現(xiàn)】：制作“旅游隨筆”模塊教師帶領(lǐng)學(xué)生制作“旅游隨筆”模塊（1） 效果分析：教師帶領(lǐng)學(xué)生對(duì)“旅游隨筆”模塊進(jìn)行分析。（2） 模塊制作：教師帶領(lǐng)學(xué)生對(duì)“旅游隨筆”模塊進(jìn)行制作。知識(shí)點(diǎn)2-【項(xiàng)目實(shí)現(xiàn)】：制作“驢友評(píng)論”模塊教師帶領(lǐng)學(xué)生制作“驢友評(píng)論”模塊（1） 效果分析：教師帶領(lǐng)學(xué)生對(duì)“驢友評(píng)論”模塊進(jìn)行分析。（2） 模塊制作：教師帶領(lǐng)學(xué)生對(duì)“驢友評(píng)論”模塊進(jìn)行制作。知識(shí)點(diǎn)3-【項(xiàng)目實(shí)現(xiàn)】：制作“頁腳”模塊教師帶領(lǐng)學(xué)生制作“頁腳”模塊（1） 效果分析：教師帶領(lǐng)學(xué)生對(duì)“頁腳”模塊進(jìn)行分析。（2） 模塊制作：教師帶領(lǐng)學(xué)生對(duì)“頁腳”模塊進(jìn)行制作。四、歸納總結(jié)Ø 學(xué)生交流，針對(duì)自己遇到的難點(diǎn)向老師提問，老師進(jìn)行解答。Ø 教師對(duì)整章內(nèi)容進(jìn)行總結(jié)，并結(jié)合課后練習(xí)鞏固本章學(xué)習(xí)內(nèi)容。五、布置作業(yè)Ø 讓學(xué)生針對(duì)本節(jié)課所學(xué)內(nèi)容進(jìn)行練習(xí)鞏固。Ø 讓學(xué)生分小組討論本節(jié)課的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論