資源簡介

(共17張PPT)
七年級下冊 主題一 文化遺產(chǎn)線上展
任務(wù)一 探秘網(wǎng)頁與代碼
Cloud
匯報人：WPS
情境導(dǎo)入
壯壯上網(wǎng)搜集有關(guān)“三月三”的內(nèi)容，瀏覽到許多圖文并茂、呈現(xiàn)效果生動逼真的網(wǎng)頁，這些網(wǎng)頁是通過什么方式實現(xiàn)這些效果的呢？
導(dǎo)入
XXXX
用瀏覽器打開一個本地的 HTML 文件，按下“F12”鍵或在瀏覽器的工具欄中查找“開發(fā)者工具”，選中后打開，如圖：
探究
XXXX
用鼠標(biāo)在“開發(fā)者工具”窗口進行任意移動和點擊，觀察瀏覽器窗口所顯示的內(nèi)容的變化，如圖：
探究
1. 同一個網(wǎng)頁文件的內(nèi)容，顯示在瀏覽器窗口和顯示在“開發(fā)者工具”窗口有何不同？各有什么特點？
思考
瀏覽器窗口主要展示網(wǎng)頁的最終呈現(xiàn)效果,是用戶正常瀏覽網(wǎng)頁時看到的樣子。
開發(fā)者工具窗口除了顯示網(wǎng)頁的內(nèi)容外,還會展示網(wǎng)頁的源代碼結(jié)構(gòu)、網(wǎng)絡(luò)請求信息、性能分析數(shù)據(jù)等。
特點:瀏覽器窗口:用戶友好性高、視覺效果優(yōu)先。開發(fā)者工具窗口:面向開發(fā)者的功能強大、提供網(wǎng)頁底層信息。
思考
1. 同一個網(wǎng)頁文件的內(nèi)容，顯示在瀏覽器窗口和顯示在“開發(fā)者工具”窗口有何不同？各有什么特點？
思考
圖文聲像并茂的網(wǎng)頁背后,對應(yīng)著一串串字符代碼,這些代碼對應(yīng)著描述網(wǎng)頁的
語言--HTML(hypertext markup language,超文本標(biāo)記語言)。瀏覽器根據(jù)
HTML語言進行相應(yīng)的處理,才能呈現(xiàn)出人們看到的網(wǎng)頁效果。HTML 語言中用
于標(biāo)記內(nèi)容、格式或超鏈接的代碼符號叫標(biāo)簽,大部分標(biāo)簽是成對出現(xiàn)的,但也
存在不成對的情況。
思考
概念
HTML（hypertext markup language）的中文名全稱為“超文本標(biāo)記語言”，是一種標(biāo)記語言。HTML 標(biāo)簽是 HTML 中最基本的單位，HTML 就是通過一系列標(biāo)簽對要顯示在網(wǎng)頁上的超
文本內(nèi)容進行統(tǒng)一的格式定義。
概念
部分常用標(biāo)簽的作用
不同的標(biāo)簽有不同的效果，圖中還涉及了哪些標(biāo)簽？這些標(biāo)簽的作用分別是什么？請你大膽猜想并和小伙伴展開討論，將你們討論的結(jié)果記錄下來。
討論

DIV標(biāo)簽,稱為區(qū)隔標(biāo)記。作用是設(shè)定字、畫、表格等的擺放位置。
span標(biāo)簽,標(biāo)簽被用來組合文檔中的行內(nèi)元素,支持HTML的全局屬性。
討論
標(biāo)簽有哪些表現(xiàn)形式？請舉例說明。
思考
標(biāo)簽表現(xiàn)形式有:單標(biāo)簽與雙標(biāo)簽。
單標(biāo)簽::圖像、:換行符、:水平線等。
雙標(biāo)簽::超鏈接、:段落、:網(wǎng)頁的標(biāo)題等。
思考
XXXX
通過瀏覽器的“開發(fā)者工具”窗口編輯網(wǎng)頁，修改或刪除標(biāo)簽，觀察網(wǎng)頁效果的變化，驗證你的猜想，并將這些標(biāo)簽的作用進行總結(jié)，記錄在表中。
馬上行動
XXXX
1. 請明確將要制作的網(wǎng)頁主題，并規(guī)劃頁面結(jié)構(gòu)。
2. 請編寫代碼。使用“記事本”（或其他文本編輯器）直接編輯代碼，也可以使用在線網(wǎng)頁制作工具編寫。
3. 請運行調(diào)試，修改代碼。通過瀏覽器打開網(wǎng)頁文件預(yù)覽效果，可以借助瀏覽器的“開發(fā)者工具”調(diào)試代碼，直至達到滿意的效果。
4. 請保存網(wǎng)頁代碼，使用相關(guān)工具發(fā)布網(wǎng)頁。
做中學(xué)
XXXX
請將你操作過程中遇到的問題、解決方法記錄在表中
問題描述 解決方法
做中學(xué)
在網(wǎng)頁中添加本地圖像的代碼和添加來源于其他網(wǎng)頁上的圖像的代碼有什么區(qū)別？在實際應(yīng)用中各有哪些優(yōu)缺點？將兩種方式涉及的代碼寫下來進行對比，并根據(jù)運行效果總結(jié)它們適合的應(yīng)用場景。
思考
本地圖片:當(dāng)圖片存儲在服務(wù)器上或與HTML文件在同一目錄時,可以使用相對路徑引用圖片。如果HTML文件和圖片文件位于同一目錄下,可以使用以下代碼:;如果圖片在子目錄中,可以使用:;如果圖
片在上一級目錄中,可以使用:
網(wǎng)絡(luò)圖片:當(dāng)圖片存儲在其他網(wǎng)站的服務(wù)器上時,需要使用圖片的URL地址。如:

本地圖片的優(yōu)勢:使用本地圖片可以減少外部請求,加快頁面加載速度。本地圖片不受外部網(wǎng)站狀態(tài)的影響,更加穩(wěn)定。引用圖片時需要注意版權(quán)問題。
網(wǎng)絡(luò)圖片的優(yōu)勢:使用網(wǎng)絡(luò)圖片可以提供更多的靈活性和動態(tài)內(nèi)容更新。然而,這可能增加頁面加載時間,因為瀏覽器需要為每張圖片發(fā)起新的網(wǎng)絡(luò)請求。引用網(wǎng)絡(luò)圖片時需要注意版權(quán)問題。
思考
HTML 代碼是不是必須保存在以“.htm”“.html”為擴展名的網(wǎng)頁文件中？結(jié)合你對網(wǎng)頁和代碼之間關(guān)系的認(rèn)識，和伙伴們進行討論，把你的收獲寫下來。
討論
討論
查閱工具書或借助互聯(lián)網(wǎng)了解更多制作網(wǎng)頁的工具，選擇一款你喜歡的網(wǎng)頁制作軟件，用它制作一張屬于你自己的創(chuàng)意網(wǎng)頁，在創(chuàng)作過程中進一步體會網(wǎng)頁與代碼之間的關(guān)系。
拓展任務(wù)
拓展
謝 謝
匯報人：WPS

展開更多......

收起↑