資源簡介

1.1編輯網(wǎng)頁信息
課題 編輯網(wǎng)頁信息 單元 第一單元 學(xué)科 信息科技 年級(jí) 七年級(jí)下
教材分析 本課選自《信息科技》（電子工業(yè)版）的第一章第一節(jié)的內(nèi)容，教材由“瀏覽網(wǎng)頁”、“認(rèn)識(shí)H5網(wǎng)頁”“制作網(wǎng)頁”三部分內(nèi)容組成，主要內(nèi)容包括：了解網(wǎng)頁的概念及組成元素、H5網(wǎng)頁的特點(diǎn)與應(yīng)用以及網(wǎng)頁制作過程幾個(gè)部分。圍繞科技創(chuàng)新的主題，學(xué)生查找相應(yīng)資源，了解我國科技發(fā)展的相關(guān)知識(shí)，夯實(shí)信息社會(huì)責(zé)任，發(fā)揮信息科技課程的獨(dú)特育人價(jià)值，為數(shù)字強(qiáng)國培養(yǎng)優(yōu)秀接班人和建設(shè)者。
教學(xué)目標(biāo) 1、信息意識(shí)：體驗(yàn)互聯(lián)網(wǎng)交互方式。2、計(jì)算思維：在實(shí)踐應(yīng)用中，熟悉網(wǎng)絡(luò)平臺(tái)中的技術(shù)工具、軟件系統(tǒng)的功能與應(yīng)用。3、數(shù)字化學(xué)習(xí)與創(chuàng)新：根據(jù)任務(wù)要求，借助H5在線平臺(tái)創(chuàng)作作品。4、信息社會(huì)責(zé)任：遵循信息科技領(lǐng)域的倫理道德規(guī)范，弘揚(yáng)文化自信。
重點(diǎn) 1、了解網(wǎng)頁的概念及組成元素；2、了解靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁的區(qū)別；3、了解H5網(wǎng)頁的特點(diǎn)及應(yīng)用。
難點(diǎn) 1、掌握常用的瀏覽器的使用；2、掌握“科技創(chuàng)新·自主可控”主題網(wǎng)頁制作。
教學(xué)過程
教學(xué)環(huán)節(jié) 教師活動(dòng) 學(xué)生活動(dòng) 設(shè)計(jì)意圖
導(dǎo)入新課 學(xué)校即將迎來一年一度的科技節(jié)，本屆科技節(jié)的主題是“科技創(chuàng)新，自主可控”。本單元打算制作一個(gè)與主題相關(guān)的網(wǎng)頁，讓同學(xué)們了解我國科技發(fā)展的現(xiàn)狀，感受科技的魅力。請(qǐng)同學(xué)們思考制作網(wǎng)頁應(yīng)該使用什么工具呢？ 學(xué)生思考網(wǎng)頁背后的秘密。 構(gòu)建生活情境，激發(fā)學(xué)習(xí)興趣。
講授新課 瀏覽網(wǎng)頁是獲取信息的重要手段，隨著計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)的飛速發(fā)展網(wǎng)頁呈現(xiàn)形式越來越豐富。活動(dòng)一：在互聯(lián)網(wǎng)中搜索并瀏覽與科技創(chuàng)新相關(guān)的網(wǎng)頁，把你認(rèn)為優(yōu)秀的網(wǎng)頁收藏下來，完成表格，總結(jié)這些優(yōu)秀的網(wǎng)頁在設(shè)計(jì)與制作方面的可借鑒之處。提問：什么是網(wǎng)頁？網(wǎng)頁的組成要素有哪些？網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)，是一個(gè)包含HTML標(biāo)簽的純文本文件，采用超文本標(biāo)記語言格式（文件擴(kuò)展名為.html或.htm）。網(wǎng)頁包含的基本元素：（1）文本：文本是網(wǎng)頁上最重要的信息載體和交流工具，網(wǎng)頁中主要信息一般都以文本形式為主。（2）動(dòng)畫：動(dòng)畫在網(wǎng)頁中的作用是有效地吸引訪問者更多的注意。（3）圖像：圖像元素在網(wǎng)頁中具有提供信息并展示直觀形象的作用。（4）聲音：聲音是多媒體和視頻網(wǎng)頁重要的組成部分。（5）視頻：視頻文件的采用是網(wǎng)頁效果更加精彩且富有動(dòng)感。（6）表格：表格是在網(wǎng)頁中用來控制面業(yè)信息的布局方式。（7）導(dǎo)航欄：導(dǎo)航欄：導(dǎo)航欄在網(wǎng)頁中是一組超鏈接，其連接的目的端是網(wǎng)頁中重要的頁面。活動(dòng)2：認(rèn)識(shí)H5頁面隨著移動(dòng)互聯(lián)網(wǎng)的不斷發(fā)展，越來越多的商家和企業(yè)利用 H5 網(wǎng)頁來做營銷推廣。我們平時(shí)在移動(dòng)設(shè)備上看到的邀請(qǐng)函、賀卡、小游戲、測試題等很多都是 H5 網(wǎng)頁。請(qǐng)你思考生活中有哪些H5頁面，它們有什么特點(diǎn)？H5頁面又稱HTML5頁面，是一種基于HTML5技術(shù)開發(fā)的動(dòng)態(tài)網(wǎng)頁。H5頁面與傳統(tǒng)的PC端網(wǎng)頁相比，H5頁面更加輕便、美觀、互動(dòng)性強(qiáng)，適合于在移動(dòng)設(shè)備上瀏覽，提供了更好的用戶體驗(yàn)。H5頁面可以包含文字、圖片、音頻、視頻和動(dòng)畫等多種元素，還可以與用戶進(jìn)行互動(dòng)，如表單、投票和分享等。靜態(tài)網(wǎng)頁VS動(dòng)態(tài)網(wǎng)頁：（1）靜態(tài)網(wǎng)頁，其內(nèi)容是預(yù)先確定的，并存儲(chǔ)在Web服務(wù)器或者本地計(jì)算機(jī)/服務(wù)器之上。模板一旦確定下來，不容易修改，更新比較費(fèi)時(shí)費(fèi)事。（2）動(dòng)態(tài)網(wǎng)頁，是取決于由用戶提供的參數(shù)，并根據(jù)存儲(chǔ)在數(shù)據(jù)庫中的網(wǎng)站上的數(shù)據(jù)中創(chuàng)建的頁面。生活案例：（1）騰訊新聞的移動(dòng)端網(wǎng)站就是一個(gè)典型的H5網(wǎng)站。它采用了響應(yīng)式設(shè)計(jì)，能夠自適應(yīng)不同尺寸的屏幕，保證在不同設(shè)備上都能獲得良好的閱讀體驗(yàn)。同時(shí)，騰訊新聞還利用了HTML5的多媒體特性，在網(wǎng)站上嵌入了豐富的視頻和音頻內(nèi)容，增強(qiáng)了新聞的生動(dòng)性和可讀性。（2）7月23日，網(wǎng)易云音樂推出《云村觀察室》h5，盤點(diǎn)云村史上最值得珍藏的高光時(shí)刻。從歌曲、專輯、歌手、視頻、社區(qū)、用戶、直播&電臺(tái)等角度為用戶帶來一波回憶殺，開啟云村音樂回憶拼圖，并嶄新推出小彩蛋環(huán)節(jié)，為用戶送上一份別開生面暖心祝福。活動(dòng)3：制作H5頁面（1）登錄在線網(wǎng)頁編輯平臺(tái)（http://www.）。單擊“創(chuàng)建作品”菜單，進(jìn)入到在線網(wǎng)頁編輯窗口。（2）添加頁面。單擊工具欄中的“頁面”按鈕，在“舞臺(tái)”下方增加一個(gè)頁面對(duì)象，將該頁面命名為“歡迎頁”。（3）設(shè)置頁面背景顏色或背景圖片。輸入十六進(jìn)制顏色值或用吸管工具選擇顏色。（4）編輯文本。單擊工具面板中的“中文字體”工具 ，并在舞臺(tái)中單擊，然后在彈出的“文本內(nèi)容”對(duì)話框中輸入標(biāo)題文字。（5）設(shè)置文本屬性。在屬性面板中選擇字體，設(shè)置字體的顏色、大小等屬性。（6）添加圖片。單擊工具面板中的圖片工具，拖動(dòng)鼠標(biāo)，調(diào)整圖片的大小和位置，松開鼠標(biāo)后在彈出的“打開”對(duì)話框中選擇要插入網(wǎng)頁中的圖片。（7）給文本添加動(dòng)態(tài)效果。選中文本，單擊菜單欄中的按鈕，在下拉列表中為文本選擇一種動(dòng)態(tài)效果。（8）保存并預(yù)覽網(wǎng)頁。單擊菜單欄中的“保存”按鈕，保存網(wǎng)頁文件。單擊菜單欄中的“預(yù)覽”按鈕，預(yù)覽網(wǎng)頁效果。活動(dòng)具體要求：1、查找資料，選擇你感興趣的一種科技創(chuàng)新應(yīng)用，下載文字介紹及圖片；2、創(chuàng)建H5頁面，包括標(biāo)題、文字、圖片。3、發(fā)布H5頁面。 尋找制作精美的網(wǎng)頁，填寫表格，完成活動(dòng)一。回答：圖片、文字、視頻。回答：互動(dòng)項(xiàng)。回答：經(jīng)常有互動(dòng)小游戲。回答：一些邀請(qǐng)函就是H5頁面。通過教師的講解，學(xué)生親身實(shí)踐，完成任務(wù)。 通過瀏覽優(yōu)秀的網(wǎng)頁，使學(xué)生初步了解網(wǎng)頁的基本要素及框架。以問題的方式，幫助學(xué)生梳理觀察結(jié)果。培養(yǎng)學(xué)生獨(dú)立思考的能力。從靜態(tài)網(wǎng)頁逐步過渡至動(dòng)態(tài)網(wǎng)頁，用戶體驗(yàn)感、交互感更強(qiáng)。培養(yǎng)學(xué)生的探究能力，將理論知識(shí)轉(zhuǎn)化為實(shí)踐經(jīng)歷。培養(yǎng)學(xué)生的動(dòng)手實(shí)踐能力

展開更多......

收起↑