資源簡介

中小學教育資源及組卷應用平臺
信息技術《制作HTML5網頁》教學設計
課題 《制作HTML5網頁》 單元 一單元 學科 信息技術 年級 八年級
教材分析 《制作HTML5網頁》這一課旨在讓學生增進對HTML網頁的認識和掌握，以及學會使用PC端認識網頁背后的語言。教材編排了“學習任務-任務分析-操作指南-任務小結-知識鏈接-練習與思考”的系列學習活動，引導學生學會使用MAKA軟件制作網頁的方法和步驟，促進對網頁構建的學習和使用，這些學習對于初中學生來說是非常有必要的，不僅可以增加學生知識，同時也能增強學生對信息的感受力、注意力，以及對信息價值的判斷力和洞察力，提高學生信息素養。教材編排合理，貼近學生生活實際，符合七年級學生認知特點。
學習目標 1.信息意識：具有將創新理念運用到制作HTML5網頁學習中去的意識；2.計算思維：能夠對學習中產生的問題，進行分解、計算，得出解決辦法；3.數字化學習與創新：在學習中具有創新、創造能力；4.信息社會責任：規范使用網絡技術解決問題，形成良好道德準則，不做傷害他人的事。
重點 掌握制作HTML5網頁的步驟和方法
難點 學會運用所學的知識，制作更深層次的網頁
教學過程
教學環節 教師活動 學生活動 設計意圖
導入新課 導入：師：說到網頁網站，其實大家并不陌生，我們用電腦瀏覽新聞查詢信息，查看圖片等，都是在瀏覽網頁，網頁是一種可以在互聯網傳輸，能被瀏覽器識別和翻譯成頁面，并顯示出來的文件是網站的基本構成元素，只要是經常上上網的用戶都瀏覽過網頁。 學生了解網頁在生活中的運用 由此引出今天的學習內容
講授新課 我們學習和體驗了PC網站的制作，對網站的結構和內容組織方式有了充分的認識。那么，移動設備上的網站制作又是什么樣的 與PC網站的制作有何異同呢 學習任務1通過探究“所見即所得”工具編輯網頁背后的秘密——HTML語言，認識PC網站與移動端網站的關聯。拓展延伸PC端：Personal Computer 翻譯成中文的意思是：個人計算機或者個人電腦。PC是一個具有廣泛含義的詞語，也是電腦的統稱。移動端：就是移動端訪問的網站,通俗來說就是適合手機訪問的網站。任務分析我們制作網站使用的是“所見即所得”的網站制作工具。要想對比PC網站與移動端網站的異同，我們必須了解網頁文件背后的支持技術是怎樣的，也就是對編寫網頁的語言有所了解。了解相關技術，也能夠幫助我們進一步理解瀏覽器與網頁文件之間的關系。操作指南1.探究網頁背后的秘密（1)新建一個空白網頁，寫一段簡單的文字。（2）執“文件”→“另存為”命令，將文件以“first.html"為文件名保存到指定位置。 （3）在瀏覽器中打開“first.html”文件，執行“工具”→“F12開發人員工具”命令，在頁面下方左側出現HTML代碼，如圖所示。通過對比觀察你會發現，使用“所見即所得”編輯器（FrontPage)制作的圖文并茂、色彩豐富、生動有趣的網站，其背后是網頁編輯語言（超文本標記語言HTML)默默地支持這一切在網絡中神奇地發生。2.認識HTML(超文本標記語言)從一句話頁面的背后，我們看到網頁標記語言的結構如下:(1)和。表示超文本文件的開始，表示超文本文件的結束。這是告訴瀏覽器軟件：當讀到時，以下的代碼就是超文本文件，直到讀到為止，即這兩個標記之間的內容要以網頁的形式展現。（2)和。表示超文本文件頭信息的開始，表示超文本文件頭信息的結束。一般情況下，head區域存儲網頁的信息，如網頁標題存放在head標記下的title標記中，網頁關鍵字存放在meta標記中。(3)。這對標記是在和部分中使用的。之間是網頁的標題，如我們沒有特意修改某個網頁的標題，系統默認的HTML代碼是“”即標題是“New_Page 1”。（4)和。表示網頁主體部分的開始，表示網頁主體部分的結束。body區域是網頁內容的顯示部分，主要由表格（table標記)、段落(p標記)、圖像(img標記)等組成。在這里不做詳細介紹了，可以通過“普通”“代碼”兩個窗口來自己學習。（5）。

表示一段文本的開始，

表示一段文本的結束，在它們中間輸入的文本將顯示在頁面上。3.了解HTML 5 HTML 5簡稱H5，是超文本標記語言HTML第5次重大改版，是目前互聯網前端開發的主流語言。HTML 5的Web頁面和傳統的網頁界面比起來，最大的差別就是HTML 5頁面能適配不同尺寸的移動設備以正常大小查看，適用于市場上不同的瀏覽器。通過不同的設備訪問普通的網站，由于每種設備的屏幕比例不一樣，在訪問普通網站的時候很容易出現頁面變形等情況。網站出現這樣的問題，非常影響使用。H5會根據不同設備屏幕的比例自動調整網站頁面的比例，這樣就可以很好地避免網站頁面變形等問題的出現，給訪問者良好的閱讀體驗。學習任務2利用前面制作網頁的素材，選擇在線的HTML 5網頁制作工具，制作主題為“大美七彩河北”的HTML5網頁。任務分析對HTML 5有所了解之后，我們可以選擇一款在線編輯工具，利用已有的網站制作經驗，體驗一下H5網頁的制作。可以參考以下步驟進行：①選擇H5網頁編輯器。②注冊賬號并登錄。③準備素材。④選擇場景，編輯內容。⑤發布網頁。操作指南本節以MAKA平臺為例，體驗制作HTML5網頁的基本方法。(推薦使用谷歌瀏覽器訪問)1.注冊、登錄MAKA網站打開MAKA網站，注冊賬號后完成登錄，網站首頁如圖所示。2.創建作品單擊“作品管理”按鈕跳轉頁面，在新頁面中單擊左側“創建作品”按鈕，選擇右側H5鏈接，如圖所示。系統默認創建的是空白模板，可以自主設計H5網頁，如圖所示。(以制作“大美七彩河北”網頁為例）（1）添加文字。單擊左側“文本”按鈕，在打開的列表中選擇一種字體樣式，單擊后該文字出現在頁面上。雙擊頁面中的相應文字可以修改文字內容。可以在右側屬性面板修改文字的屬性。如圖所示。(2)添加素材庫元素。為了讓頁面更生動、內容更豐富，可以配合網頁內容添加素材庫的不同元素。如圖所示。(3）添加圖片并設置樣式。①導入圖片素材。單擊“上傳”按鈕，選擇“上傳圖片”命令，在“打開”對話框中選擇圖片后，單擊“打開”按鈕，上傳本地圖片素材，如圖所示。建議把編輯網頁用到的圖片素材一起導入，方便應用。對于音視頻文件也是同樣的操作方式。②將圖片拖動到頁面上，在右側面板中設置圖片屬性和動畫效果，如設置圖片邊框圖片出現的方式等。通過單擊右側浮動菜單中的“預覽”按鈕圈，預覽頁面效果。3.保存、預覽網頁網頁編輯完成后，單擊“保存”按鈕保存網頁：通過“預覽/分享”按鈕預覽效果，生成網址、二維碼等信息，可以向他人分享。任務小結在本節，通過認識HTML語言，了解了“所見即所得”網頁背后的秘密，更深入地認識到網頁和瀏覽器之間的關系。瀏覽器實際上是HTML語言的翻譯官，瀏覽者通過它才能看到豐富多彩的網頁內容。而HTML 5是HTML為適應當下移動互聯網絡的發展而進行的改進和優化。通過體驗用MAKA平臺制作簡單的H5頁面，我們對PC網站和移動端網站的異同有了初步認識。知識鏈接1.使用“免費模板”制作H5網頁單擊“免費模板”鏈接，進入可以使用的免費模板頁面，單擊“立即使用”按鈕進入編輯狀態。選擇頁面上的內容，在右側屬性面板進行相關設置，也可以調整頁面元素的圖層關系。2.H5中的互動組件在制作H5網頁時，還有一些互動組件可以直接嵌入使用，包含表單、拼圖、撥號組件、投票、接力、地圖、倒計時等。這里我們舉個例子學習一下表單：表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分： 表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。練習與思考（1）制作H5網頁的流程是什么？（2）選擇一個免費模板，制作宣傳學校科技節的H5網頁。我們一起觀看視頻學習一下，看看H5是怎么制作的。作業布置請同學們總結我們本單元所學的所有知識點，制作一個最終的網頁版本，可以將我們所學的知識點全部運用進去，制作一個更加成熟、引人的位置頁面，下節課，一起進行評選，看看誰做的最好！ 學生了解什么是pc端與移動端學生掌握各種超文本標記語言的含義和使用學生了解H5網頁的含義學生掌握制作H5的方法和步驟學生掌握“任務小結”和“知識鏈接”的學習內容學生完成課堂練習和課后作業 拓展延伸學生知識，增加學生知識儲備增加學生知識技能鋪墊后續的實踐操作學習增加學生知識技能的同時，也提高學生的動手實踐能力這兩部分對本節課全部的學習內容的一個總結和概括鞏固本節課的學習知識
課堂練習 請同學們利用我們剛剛學習到的表單，嘗試將其嵌入到網頁里，或者使用其他的互動組件，一起試試吧！ 學生完成課堂練習 鞏固所學知識
課堂小結 認識不同HTML語言，了解不同網頁之間的聯系；學習H5制作的方法和流程；認識各種互動組件，加深對網頁的學習。 學生總結本節課的學習內容 總結概括本節課的學習內容
板書 H5網頁制作的方法和步驟了解不同網頁之間的聯系互動組件了解
21世紀教育網 www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://www.21cnjy.com/" 21世紀教育網(www.21cnjy.com)(共36張PPT)
《制作HTML5網頁》
河北大學版 初中版第二冊
內容總覽
學習目標
01
學習任務
02
任務分析
03
操作指南
04
任務小結
05
知識鏈接
06
目錄
07
08
課堂練習
課堂總結
09
10
板書設計
課后作業
教學目標
1.信息意識：具有將創新理念運用到制作HTML5網頁學習中去的意識；
2.計算思維：能夠對學習中產生的問題，進行分解、計算，得出解決辦法；
3.數字化學習與創新：在學習中具有創新、創造能力；
4.信息社會責任：規范使用網絡技術解決問題，形成良好道德準則，不做傷害他人的事。
新知導入
說到網頁網站，其實大家并不陌生，我們用電腦瀏覽新聞查詢信息，查看圖片等，都是在瀏覽網頁，網頁是一種可以在互聯網傳輸，能被瀏覽器識別和翻譯成頁面，并顯示出來的文件是網站的基本構成元素，只要是經常上上網的用戶都瀏覽過網頁。
新知講解
我們學習和體驗了PC網站的制作，對網站的結構和內容組織方式有了充分的認識。那么，移動設備上的網站制作又是什么樣的 與PC網站的制作有何異同呢
新知講解
學習任務1
通過探究“所見即所得”工具編輯網頁背后的秘密——HTML語言，認識PC網站與移動端網站的關聯。
新知講解
PC端：Personal Computer 翻譯成中文的意思是：個人計算機或者個人電腦。PC是一個具有廣泛含義的詞語，也是電腦的統稱。
移動端：就是移動端訪問的網站,通俗來說就是適合手機訪問的網站。
拓展延伸
新知講解
任務分析
我們制作網站使用的是“所見即所得”的網站制作工具。要想對比PC網站與移動端網站的異同，我們必須了解網頁文件背后的支持技術是怎樣的，也就是對編寫網頁的語言有所了解。了解相關技術，也能夠幫助我們進步理解瀏覽器與網頁文件之間的關系。
新知講解
操作指南
1.探究網頁背后的秘密
（1)新建一個空白網頁，寫一段簡單的文字。
（2）執行“文件”→“另存為”命令，將文件以“first.html"為文件名保存到指定位置。
（3）在瀏覽器中打開“first.html”文件，執行“工具”→“F12開發人員工具”命令，在頁面下方左側出現HTML代碼，如圖所示。
新知講解
通過對比觀察你會發現，使用“所見即所得”編輯器（FrontPage)制作的圖文并茂、色彩豐富、生動有趣的網站，其背后是網頁編輯語言（超文本標記語言HTML)默默地支持這一切在網絡中神奇地發生。
新知講解
2.認識HTML(超文本標記語言)
從一句話頁面的背后，我們看到網頁標記語言的結構如下:
新知講解
(1)和。
表示超文本文件的開始，表示超文本文件的結束。這是告訴瀏覽器軟件：當讀到時，以下的代碼就是超文本文件，直到讀到為止，即這兩個標記之間的內容要以網頁的形式展現。
（2)和。
表示超文本文件頭信息的開始，表示超文本文件頭信息的結束。一般情況下，head區域存儲網頁的信息，如網頁標題存放在head標記下的title標記中，網頁關鍵字存放在meta標記中。
新知講解
(3)。
這對標記是在和部分中使用的。之間是網頁的標題，如我們沒有特意修改某個網頁的標題，系統默認的HTML代碼是“”即標題是“New_Page 1”。
新知講解
(4)和。
表示網頁主體部分的開始，表示網頁主體部分的結束。body區域是網頁內容的顯示部分，主要由表格（table標記)、段落(p標記)、圖像(img標記)等組成。在這里不做詳細介紹了，可以通過“普通”“代碼”兩個窗口來自己學習。
（5）。

表示一段文本的開始，

表示一段文本的結束，在它們中間輸入的文本將顯示在頁面上。
新知講解
3.了解HTML 5
HTML 5簡稱H5，是超文本標記語言HTML第5次重大改版，是目前互聯網前端開發的主流語言。HTML 5的Web頁面和傳統的網頁界面比起來，最大的差別就是HTML 5頁面能適配不同尺寸的移動設備以正常大小查看，適用于市場上不同的瀏覽器。通過不同的設備訪問普通的網站，由于每種設備的屏幕比例不一樣，在訪問普通網站的時候很容易出現頁面變形等情況。網站出現這樣的問題，非常影響使用。H5會根據不同設備屏幕的比例自動調整網站頁面的比例，這樣就可以很好地避免網站頁面變形等問題的出現，給訪問者良好的閱讀體驗。
新知講解
學習任務2
利用前面制作網頁的素材，選擇在線的HTML 5網頁制作工具，制作主題為“大美七彩河北”的HTML5網頁。
新知講解
任務分析
對HTML 5有所了解之后，我們可以選擇一款在線編輯工具，利用已有的網站制作經驗，體驗一下H5網頁的制作。可以參考以下步驟進行：
①選擇H5網頁編輯器。
②注冊賬號并登錄。
③準備素材。
④選擇場景，編輯內容。
⑤發布網頁。
新知講解
操作指南
本節以MAKA平臺為例，體驗制作HTML5網頁的基本方法。(推薦使用谷歌瀏覽器訪問)
1.注冊、登錄MAKA網站
打開MAKA網站，注冊賬號后完成登錄，網站首頁如圖所示。
新知講解
2.創建作品
單擊“作品管理”按鈕跳轉頁面，在新頁面中單擊左側“創建作品”按鈕，選擇右側H5鏈接，如圖所示。
系統默認創建的是空白模板，可以自主設計H5網頁，如圖所示。(以制作“大美七彩河北”網頁為例）
新知講解
（1）添加文字。
單擊左側“文本”按鈕，在打開的列表中選擇一種字體樣式，單擊后該文字出現在頁面上。雙擊頁面中的相應文字可以修改文字內容。可以在右側屬性面板修改文字的屬性。如圖所示。
新知講解
(2)添加素材庫元素。
為了讓頁面更生動、內容更豐富，可以配合網頁內容添加素材庫的不同元素。如圖所示。
新知講解
(3）添加圖片并設置樣式。
①導入圖片素材。
單擊“上傳”按鈕，選擇“上傳圖片”命令，在“打開”對話框中選擇圖片后，單擊“打開”按鈕，上傳本地圖片素材，如圖所示。建議把編輯網頁用到的圖片素材一起導入，方便應用。對于音視頻文件也是同樣的操作方式。
新知講解
②將圖片拖動到頁面上，在右側面板中設置圖片屬性和動畫效果，如設置圖片邊框圖片出現的方式等。通過單擊右側浮動菜單中的“預覽”按鈕圈，預覽頁面效果。
新知講解
3.保存、預覽網頁
網頁編輯完成后，單擊“保存”按鈕保存網頁：通過“預覽/分享”按鈕預覽效果，生成網址、二維碼等信息，可以向他人分享。
新知講解
任務小結
在本節，通過認識HTML語言，了解了“所見即所得”網頁背后的秘密，更深入地認識到網頁和瀏覽器之間的關系。瀏覽器實際上是HTML語言的翻譯官，瀏覽者通過它才能看到豐富多彩的網頁內容。而HTML 5是HTML為適應當下移動互聯網絡的發展而進行的改進和優化。通過體驗用MAKA平臺制作簡單的H5頁面，我們對PC網站和移動端網站的異同有了初步認識。
新知講解
知識鏈接
1.使用“免費模板”制作H5網頁
單擊“免費模板”鏈接，進入可以使用的免費模板頁面，單擊“立即使用”按鈕進入編輯狀態。選擇頁面上的內容，在右側屬性面板進行相關設置，也可以調整頁面元素的圖層關系。
新知講解
2.H5中的互動組件
在制作H5網頁時，還有一些互動組件可以直接嵌入使用，包含表單、拼圖、撥號組件、投票、接力、地圖、倒計時等。
新知講解
表單：
表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分： 表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
這里我們舉個例子學習一下
新知講解
練習與思考
（1）制作H5網頁的流程是什么？
（2）選擇一個免費模板，制作宣傳學校科技節的H5網頁。
新知講解
我們一起觀看視頻學習一下，看看H5是怎么制作的。
課堂練習
請同學們利用我們剛剛學習到的表單，嘗試將其嵌入到網頁里，或者使用其他的互動組件，一起試試吧！
課堂總結
1.認識不同HTML語言，了解不同網頁之間的聯系；
2.學習H5制作的方法和流程；
3.認識各種互動組件，加深對網頁的學習。
板書設計
H5網頁制作的方法和步驟
了解不同網頁之間的聯系
互動組件了解
作業布置
請同學們總結我們本單元所學的所有知識點，制作一個最終的網頁版本，可以將我們所學的知識點全部運用進去，制作一個更加成熟、引人的位置頁面，下節課，一起進行評選，看看誰做的最好！
謝謝
21世紀教育網（www.21cnjy.com)
中小學教育資源網站
兼職招聘：
https://www.21cnjy.com/recruitment/home/admin

展開更多......

收起↑