資源簡介

(共16張PPT)
七年級下冊 主題一 文化遺產線上展
Cloud
任務四 組建網站跟我做
匯報人：WPS
導入
點擊導航欄的“制作過程”，網頁發生了跳轉，這是什么魔法？
01
通過超鏈接可以將制作好的網頁關聯起來，形成一個完整的網站
探究
思考
對比瀏覽器窗口和“開發者工具”的內容
XXXX
點擊導航欄的“制作過程”時，網頁發生了跳轉，這說明了什么？
這在“開發者工具”中對應的 HTML 代碼是哪部分？
探究
XXXX
仔細查看“開發者工具”窗口中的代碼，能實現網頁跳轉效果的 HTML
代碼有哪些？找一找，比一比，寫下它們之間的異同。
探究
超鏈接就像網頁之間的橋梁，常見類型為文本超鏈接和圖像超鏈接
類型 代碼舉例
文本超鏈接 需要顯示的文字
圖像超鏈接
不同類型的超鏈接
XXXX
結合你之前設計的網站結構圖，使用箭頭來表示跳轉的方向，實現網頁之間的鏈接，完善網站鏈接關系圖。
網站鏈接關系圖
XXXX
在設置超鏈接時，不可使用文件管理系統中的絕對路徑來表示網頁的位置，要使用相對地址。
層級 代碼舉例
指向當前文件夾 顯示文字
指向子文件夾 顯示文字
指向上一層文件夾 顯示文字
注意事項
XXXX
觀摩學習優秀網站，嘗試優化
選擇一個你喜歡的網站進行瀏覽，感受超鏈接的效果。觀察這些超鏈接是怎么設置的，比如所處的位置是否顯眼？點擊后網頁的跳轉是否流暢？有沒有遇到過點擊了沒反應，或者跳轉到了錯誤頁面的情況？
談一談：你發現設計得好的超鏈接具有的特點
優化超鏈接設計
XXXX
改變顏色
制作原料
在 標簽內添加一個 style 屬性，用于定義內聯樣式，將超鏈接文字的顏色設置為白色。
美化超鏈接顯示效果
去掉下劃線
制作原料
text-decoration:underline;表示給超鏈接文字去掉下劃線
美化超鏈接顯示效果
設置背景色
制作原料
background-color:yellow;表示給超鏈接文字設置藍色背景
美化超鏈接顯示效果
現有一段設置超鏈接的代碼，請你分析參數，并指出對應的效果。
制作原料
href參數值指定了點擊本元素后跳轉的頁面文件，style參數值 指定了本超鏈接顯示文本的格式。
color:white 指定了文字顏色為藍色
background-color:blue 指定了背景顏色為藍色
text-decoration:none 指定了沒有下劃線
padding:10px 指定了內邊距為10px
border-radius:5px 指定了圓角邊框效果為5px
代碼解讀
請創新超鏈接的使用方式，嘗試設計隱藏的超鏈接、限時出現的超鏈接或通過解謎才能找到的超鏈接等，增加網頁的趣味性和挑戰性。
拓展任務
拓展
謝 謝
匯報人：WPS

展開更多......

收起↑