資源簡介

(共57張PPT)
1.1 編輯網頁信息
電子工業版七年級下冊
本章重點
1、學習使用網頁編輯工具創建網絡文檔，表達創作思想。
2、知道網絡中信息編碼及呈現的原理。
3、認識網絡爬蟲，了解網絡爬蟲的作用。
4、掌握通過編寫網絡爬蟲程序來獲取網頁信息的方法。
5、知道使用網絡爬蟲程序獲取網頁信息時要遵守基本的道德規范。
新知講解
互聯網的信息和資源的作用：
（1）政府部門發布政務信息，提供政策咨詢，溝通社情民意；
（2）企業進行產品推廣、業務宣傳、尋找合作伙伴；
（3）服務機構提供新聞、教育、娛樂、旅游等服務；
（4）學校師生可以宣傳學校形象、展示學習效果、開展研究性學習。
新知導入
首先觀看一個視頻，了解什么是H5？
教學目標
1、了解網頁的概念及組成元素；
2、掌握常用的瀏覽器的使用；
3、了解HTML和H5的概念；
4、了解靜態網頁和動態網頁的區別；
5、了解H5網頁的特點及應用；
6、掌握“科技創新·自主可控”主題網頁制作。
1.1.1 瀏覽網頁
新知講解
網頁是構成網站的基本元素，是承載各種網站應用的平臺，是一個包含HTML標簽的純文本文件，采用超文本標記語言格式（文件擴展名為.html或.htm）。
新知講解
網頁包含的元素：
（1）文本；
（2）圖像；
（3）音頻、視頻；
（4）表格、表單；
（5）動畫；
（6）導航欄。
思考——什么是導航欄？
導航欄就是在網頁中是一組超鏈接，其連接的目的端是網頁中重要的頁面。
新知講解
超鏈接是從一個網頁指向另一個目的端的鏈接，超鏈接的目的端可以是網頁，也可以是圖片、電子郵件地址、文件和程序等，用于實現頁面或者網站的跳轉功能。
新知講解
常用瀏覽器：
（1）IE瀏覽器；
（2）谷歌瀏覽器；
（3）360瀏覽器；
（4）火狐瀏覽器；
（5）世界之窗瀏覽器。
新知講解
與科技創新相關的網頁。
網址或網站名稱 可借鑒之處
中國科學院科技創新發展中心http://www.bjb./ 圖文并茂，動畫、視頻展示科技內容，采用表格合理劃分區域
網易新聞（神舟15號新聞報道） https://m./dy/article/HURRQDNV0552D3NO.html 除了圖文展示新聞內容外，才插入了GIF動畫，讓內容更加豐富
1.1.2 認識H5網頁
新知講解
HTML語言（超文本標記語言）是一種標準的通用網頁信息表示語言。
HTML語言的第五代，簡稱H5，H5網頁就是以用HTML5語言來制作的動態網頁。
新知講解
靜態網頁其內容是預先確定的，并存儲在Web服務器或者本地計算機/服務器之上。
新知講解
靜態網頁特點：
（1）制作速度快，成本低。
（2）模板一旦確定下來，不容易修改，更新比較費時費事。
（3）常用于制作一些固定版式的頁面。
（4）通常用于文本和圖像組成，常用于子頁面的內容介紹。
（5）對服務器性能要求較低，但對存儲壓力相對較大。
新知講解
動態網頁，是取決于由用戶提供的參數，并根據存儲在數據庫中的網站上的數據中創建的頁面。
通俗地講，靜態頁是照片，每個人看都是一樣的，而動態頁則是鏡子，不同的人（不同的參數）看都不相同。
新知講解
H5網頁的特點：
（1）互動性強；
（2）顯示效果更豐富；
（3）更適合移動設備；
（4）靈活性強；
（5）減少代碼冗余；
（6）開發簡單，成本低。
新知講解
H5網頁的應用：
（1）邀請函；
（2）賀卡；
（3）小游戲；
（4）測試題；
（5）宣傳海報；
（6）商業服務營銷。
1.1.3 制作網頁
新知講解
“科技創新·自主可控”主題網頁制作過程。
（1）登錄在線網頁編輯平臺（http://www.）。單擊“創建作品”菜單，進入到在線網頁編輯窗口。
新知講解
（2）添加頁面。單擊工具欄中的“頁面”按鈕，在“舞臺”下方增加一個頁面對象，將該頁面命名為“歡迎頁”。
新知講解
（3）設置頁面背景顏色。單擊屬性面板上的“背景顏色”，選擇一種顏色（橙色）。
新知講解
（4）編輯文本。單擊工具面板中的“中文字體”工具 ，并在舞臺中單擊，然后在彈出的“文本內容”對話框中輸入標題文字。
新知講解
（5）設置文本屬性，選中文本框。在屬性面板中選擇字體，設置字體的顏色、大小等屬性。
新知講解
（6）添加圖片。單擊工具面板中的圖片工具 ，拖動鼠標，調整圖片的大小和位置，松開鼠標后在彈出的“打開”對話框中選擇要插入網頁中的圖片。
新知講解
（7）給文本添加動態效果。選中文本，單擊菜單欄中的 按鈕，在下拉列表中為文本選擇一種動態效果。
新知講解
（8）保存并預覽網頁。單擊菜單欄中的 按鈕，保存網頁文件。單擊菜單欄中的 按鈕，預覽網頁效果。
新知講解
H5網頁預覽效果
項目實施
（1）單擊菜單欄中的 按鈕，添加一個方框，然后將填空顏色設置為“無”，邊框顏色為“#000000”（黑色），粗細為“1PX”，并且設置“圓角”的值為15。
項目實施
（2）單擊菜單欄中的 按鈕，添加文字“中國空間站”，并設置字體、顏色、文本對齊方式以及位置等。
項目實施
（3）單擊菜單欄中的 按鈕，按住鼠標左鍵不放，拖動透明按鈕框在“中國空間站”之上即可。
項目實施
（4）單擊菜單欄中的 按鈕，發布網頁文件（需要實名認證）。單擊菜單欄中的 按鈕，提供網頁預覽二維碼。
新知講解
帶按鈕功能的H5網頁預覽效果
知識拓展
點擊菜單欄“文件”，選擇“打開模板”，就可以選用網頁模板了。
知識拓展
5.12國際護士節和五四青年節參考模板的主頁面
課堂總結
本節課主要知道網頁的概念及組成元素，掌握常用的瀏覽器的使用，接著了解HTML和H5的概念，了解H5網頁的特點及應用最后重點講授了“科技創新·自主可控”主題網頁制作方法。
課堂練習
1、簡述互聯網的信息和資源的作用。
2、簡述網頁包含的元素。
3、列舉常用的瀏覽器。
4、簡述H5網頁的特點。
課堂練習
1、簡述互聯網的信息和資源的作用。
答：
（1）政府部門發布政務信息，提供政策咨詢，溝通社情民意；
（2）企業進行產品推廣、業務宣傳、尋找合作伙伴；
（3）服務機構提供新聞、教育、娛樂、旅游等服務；
（4）學校師生可以宣傳學校形象、展示學習效果、開展研究性學習。
課堂練習
2、簡述網頁包含的元素。
答：
（1）文本；
（2）圖像；
（3）音頻、視頻；
（4）表格、表單；
（5）動畫；
（6）導航欄。
課堂練習
3、列舉常用的瀏覽器。
答：
（1）IE瀏覽器；
（2）谷歌瀏覽器；
（3）360瀏覽器；
（4）火狐瀏覽器；
（5）世界之窗瀏覽器。
課堂練習
4、簡述H5網頁的特點。
答：
（1）互動性強；
（2）顯示效果更豐富；
（3）更適合移動設備；
（4）靈活性強；
（5）減少代碼冗余；
（6）開發簡單，成本低。
板書設計
編輯網頁信息
一、瀏覽網頁
1、網頁的概念及組成元素
2、常用的瀏覽器
二、認識H5網頁
1、HTML和H5簡介
2、靜態網頁和動態網頁
3、H5網頁的特點
4、H5網頁的應用
三、制作網頁
1、“科技創新·自主可控”主題歡迎網頁制作過程
2、項目實施——跳轉按鈕的制作
課后作業
1、制作“科技創新·自主可控”主題網頁第二頁、第三頁、第四頁的內容。
2、添加跳轉和返回按鈕功能。
作業布置
1、制作“科技創新·自主可控”主題網頁第二頁的內容，設置網頁背景顏色，添加文本、圖片和“返回”按鈕，效果如下圖所示。
作業布置
（1）添加頁面。單擊工具欄中的“頁面”按鈕，在“舞臺”下方增加一個頁面對象，將該頁面命名為“第二頁”。
答案
作業布置
（2）設置頁面背景顏色。單擊屬性面板上的“背景顏色”，選擇一種顏色（藍色）。
答案
作業布置
（3）單擊菜單欄中的 按鈕，添加文字“中國空間站簡介”以及正文內容，并設置字體、顏色、文本對齊方式以及位置等。
答案
作業布置
（4）添加圖片。單擊工具面板中的圖片工具 ，插入空間站圖片，并調整大小和位置。
答案
作業布置
（5）單擊菜單欄中的 按鈕，添加“返回”按鈕。
答案
作業布置
2、在“歡迎頁”為“中國空間站”按鈕添加“事件屬性”，設置按鈕的觸發條件為“點擊”，目標對象為跳轉到第二頁。實現單擊“中國空間站”按鈕可以跳轉到第二頁。
作業布置
（1）在“歡迎頁”選擇“中國空間站”按鈕，點擊 “事件屬性”，設置按鈕的觸發條件為“點擊”，目標對象為跳轉到第二頁。
答案
作業布置
3、在第二頁為“返回”按鈕添加“事件”屬性，實現單擊“返回”按鈕可以跳轉到“歡迎頁”。
答案
作業布置
4、查找關于“自研芯片”和“中國天眼”的資料，制作以“自研芯片”為主題的第三頁網頁和以“中國天眼”為主題的第四頁網頁，在“歡迎頁”添加“自研芯片”按鈕和“中國天眼”按鈕，并分別實現頁面跳轉的效果。
作業布置
（1）新建“自研芯片”為主題的第三頁網頁和以“中國天眼”為主題的第四頁網頁。
答案
作業布置
（2）在“歡迎頁”添加“自研芯片”按鈕和“中國天眼”按鈕，分別在第三頁、第四頁添加“返回”按鈕，并分別實現頁面跳轉的效果。
答案
作業布置
5、保存網頁，，查看預覽效果，并將制作的網頁進行分享。
訪問地址（ https://file1397f3214724./v3/idea/k1LBBs4V ）。
答案
謝謝
21世紀教育網（www.21cnjy.com)
中小學教育資源網站
兼職招聘：
https://www.21cnjy.com/recruitment/home/admin中小學教育資源及組卷應用平臺
信息科技 第1課 編輯網頁信息教學設計
課題 編輯網頁信息 單元 第一單元 學科 信息科技 年級 七年級下
教材分析 編輯網頁信息選自《信息科技》（電子工業版）的第一章第一節的內容，教材由“瀏覽網頁”、“認識H5網頁”“制作網頁”三部分內容組成，主要內容包括：了解網頁的概念及組成元素、H5網頁的特點與應用以及網頁制作過程幾個部分。學生通過對本教材的學習逐步掌握信息科技的相關知識，具備一定的科學精神和科技倫理，提高創新能力，夯實信息社會責任，發揮信息科技課程的獨特育人價值，為數字強國培養優秀接班人和建設者。
教學目標 1、信息意識：體驗互聯網交互方式。2、計算思維：在實踐應用中，熟悉網絡平臺中的技術工具、軟件系統的功能與應用。3、數字化學習與創新：根據任務要求，借助在線平臺，與伙伴協作設計和創作作品。4、信息社會責任：遵循信息科技領域的倫理道德規范，明確科技活動中應遵循的價值觀念、道德責任和行為準則。
重點 1、了解網頁的概念及組成元素；2、了解HTML和H5的概念；3、了解靜態網頁和動態網頁的區別；4、了解H5網頁的特點及應用。
難點 1、掌握常用的瀏覽器的使用；2、掌握“科技創新·自主可控”主題網頁制作。
教學過程
教學環節 教師活動 學生活動 設計意圖
導入新課 H5頁面是一種基于HTML5新特性的網頁設計，它可以幫助企業把網頁的設計效果和功能提升到一個新的高度。H5頁面的優勢在于它可以使網頁的功能更加豐富，可以更好地將網站的內容展示給用戶，從而提高用戶的體驗。觀看視頻引出今天的教學內容編輯網頁信息。 學生聽教師引導生活中的案例 激發學生對編輯網頁的學習興趣并快速進入學習狀態
講授新課 本章重點1、學習使用網頁編輯工具創建網絡文檔，表達創作思想。2、知道網絡中信息編碼及呈現的原理。3、認識網絡爬蟲，了解網絡爬蟲的作用。4、掌握通過編寫網絡爬蟲程序來獲取網頁信息的方法。5、知道使用網絡爬蟲程序獲取網頁信息時要遵守基本的道德規范。互聯網的信息和資源的作用：（1）政府部門發布政務信息，提供政策咨詢，溝通社情民意；（2）企業進行產品推廣、業務宣傳、尋找合作伙伴；（3）服務機構提供新聞、教育、娛樂、旅游等服務；（4）學校師生可以宣傳學校形象、展示學習效果、開展研究性學習。一、瀏覽網頁1、網頁是構成網站的基本元素，是承載各種網站應用的平臺，是一個包含HTML標簽的純文本文件，采用超文本標記語言格式（文件擴展名為.html或.htm）。2、網頁包含的元素：（1）文本；（2）圖像；（3）音頻、視頻；（4）表格、表單；（5）動畫；（6）導航欄。練一練思考——什么是導航欄？導航欄就是在網頁中是一組超鏈接，其連接的目的端是網頁中重要的頁面。3、超鏈接是從一個網頁指向另一個目的端的鏈接，超鏈接的目的端可以是網頁，也可以是圖片、電子郵件地址、文件和程序等，用于實現頁面或者網站的跳轉功能。4、常用瀏覽器：（1）IE瀏覽器；（2）谷歌瀏覽器；（3）360瀏覽器；（4）火狐瀏覽器；（5）世界之窗瀏覽器。練一練收集與科技創新相關的網頁，找出可以借鑒之處。二、認識H5網頁1、HTML語言（超文本標記語言）是一種標準的通用網頁信息表示語言。HTML語言的第五代，簡稱H5，H5網頁就是以用HTML5語言來制作的動態網頁。2、靜態網頁其內容是預先確定的，并存儲在Web服務器或者本地計算機/服務器之上。3、靜態網頁特點：（1）制作速度快，成本低。（2）模板一旦確定下來，不容易修改，更新比較費時費事。（3）常用于制作一些固定版式的頁面。（4）通常用于文本和圖像組成，常用于子頁面的內容介紹。（5）對服務器性能要求較低，但對存儲壓力相對較大。4、動態網頁，是取決于由用戶提供的參數，并根據存儲在數據庫中的網站上的數據中創建的頁面。通俗地講，靜態頁是照片，每個人看都是一樣的，而動態頁則是鏡子，不同的人（不同的參數）看都不相同。5、H5網頁的特點：（1）互動性強；（2）顯示效果更豐富；（3）更適合移動設備；（4）靈活性強；（5）減少代碼冗余；（6）開發簡單，成本低。6、H5網頁的應用：（1）邀請函；（2）賀卡；（3）小游戲；（4）測試題；（5）宣傳海報；（6）商業服務營銷。三、制作網頁1、“科技創新·自主可控”主題網頁制作過程。（1）登錄在線網頁編輯平臺（http://www.）。單擊“創建作品”菜單，進入到在線網頁編輯窗口。（2）添加頁面。單擊工具欄中的“頁面”按鈕，在“舞臺”下方增加一個頁面對象，將該頁面命名為“歡迎頁”。（3）設置頁面背景顏色。單擊屬性面板上的“背景顏色”，選擇一種顏色（橙色）。（4）編輯文本。單擊工具面板中的“中文字體”工具，并在舞臺中單擊，然后在彈出的“文本內容”對話框中輸入標題文字。（5）設置文本屬性，選中文本框。在屬性面板中選擇字體，設置字體的顏色、大小等屬性。（6）添加圖片。單擊工具面板中的圖片工具，拖動鼠標，調整圖片的大小和位置，松開鼠標后在彈出的“打開”對話框中選擇要插入網頁中的圖片。（7）給文本添加動態效果。選中文本，單擊菜單欄中的動效按鈕，在下拉列表中為文本選擇一種動態效果。（8）保存并預覽網頁。單擊菜單欄中的保存按鈕，保存網頁文件。單擊菜單欄中的預覽按鈕，預覽網頁效果。2、項目實施——添加按鈕功能（1）單擊菜單欄中的方框按鈕，添加一個方框，然后將填空顏色設置為“無”，邊框顏色為“#000000”（黑色），粗細為“1PX”，并且設置“圓角”的值為15。（2）單擊菜單欄中的文字按鈕，添加文字“中國空間站”，并設置字體、顏色、文本對齊方式以及位置等。（3）單擊菜單欄中的“透明按鈕”按鈕，按住鼠標左鍵不放，拖動透明按鈕框在“中國空間站”之上即可。（4）單擊菜單欄中的發布按鈕，發布網頁文件（需要實名認證）。單擊菜單欄中的二維碼按鈕，提供網頁預覽二維碼。3、點擊菜單欄“文件”，選擇“打開模板”，就可以選用網頁模板了。 通過教師的講解，以小組合作的方式，開展探討交流，完成任務。通過教師的講解，以小組合作的方式，開展探討交流，完成任務。通過教師的講解，以小組合作的方式，開展探討交流，完成任務。通過教師的講解，以小組合作的方式，開展探討交流，完成任務通過教師的講解，以小組合作的方式，開展探討交流，完成任務 通過小組合作，加強學生組內團結、共同完成任務培養學生獨立思考的能力培養學生獨立思考的能力培養學生的探究能力培養學生的動手實踐能力
布置作業 1、制作“科技創新·自主可控”主題網頁第二頁、第三頁、第四頁的內容。2、添加跳轉和返回按鈕功能。 完成作業 培養學生查閱資料的能力，分析解決問題的能力
課堂小結 本節課主要知道網頁的概念及組成元素，掌握常用的瀏覽器的使用，接著了解HTML和H5的概念，了解H5網頁的特點及應用最后重點講授了“科技創新·自主可控”主題網頁制作方法。 分組總結歸納 鍛煉學生的總結能力，邏輯思維、語言表達能力。
板書 一、瀏覽網頁1、網頁的概念及組成元素2、常用的瀏覽器二、認識H5網頁1、HTML和H5簡介2、靜態網頁和動態網頁3、H5網頁的特點4、H5網頁的應用三、制作網頁1、“科技創新·自主可控”主題歡迎網頁制作過程2、項目實施——跳轉按鈕的制作 學習、記憶及勾畫知識點 明確教學內容及重點和難點
21世紀教育網 www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://www.21cnjy.com/" 21世紀教育網(www.21cnjy.com)

展開更多......

收起↑