資源簡介

(共13張PPT)
Cloud
七年級下冊 主題一 文化遺產線上展
任務三 美化網頁方法多
情境導入
壯壯把設計好的“三月三”宣傳網站的主頁分享給小伙伴們，征集網頁美化意見。大家對網頁的效果各抒己見，壯壯應接不暇。
我們上節課制作的網頁也需要美化，有沒有什么美化網頁又快又好的方法呢？
導入
上網瀏覽一些設計比較成熟的網站，感受不同主題的網頁是如何通過色彩搭配和版面設計來增強視覺效果和用戶體驗的。結合你自己設計的網頁作品，想一想，網站的美化可以從哪些方面入手？
思考
思考
XXXX
某一網站主頁美化前后的代碼變化如書本P20-22的表1-3-1所示，請仔細觀察并對比內容，并回答以下問題：
1. 該網頁美化前后的代碼有何不同？請將不同之處標出來，把你發現的新標簽寫下來。
2. 打開美化后的網頁文件“首頁 _ 五色糯米飯簡介 .html”，試著把你發現的新標簽和網頁呈現效果進行匹配，寫下你對新標簽作用的猜想。查找相關資料或修改代碼調試效果，驗證你的猜想。
探究
XXXX
在網頁設計中，字體設置和色彩搭配占據著舉足輕重的地位。根據你自己的作品情況，制訂網站美化方案。
馬上行動
修改文字字體、顏色、大小
找到代碼中的標簽 ……，根據實際需求修改對應參數。

任意文字

字體
顏色
大小
使用HTML代碼美化網頁
XXXX
修改網頁背景顏色
找到 …… 標簽，增加 bgcolor 參數，修改對應值，如

HTML 顏色代碼通常用以 "#" 開頭的 6 個十六進制數字來表示。
部分參考顏色代碼：淺黃#FFFFCC、淺藍#CCFFFF、淺紅#FF9999
使用HTML代碼美化網頁
XXXX
CSS語句組成部分

網頁內的CSS可以放在之間
選擇器
（需要改變樣式的HTML元素）
聲明
（屬性和值被：分開，以；結束）
聲明開始大括號
聲明結束大括號
屬性名
屬性值
使用CSS美化網頁
XXXX
修改 CSS 代碼需要先指定網頁中的元素，再對該元素進行描述。
先完成 中的聲明

設置整個網頁字體
設置整個網頁的背景顏色
設置應用text樣式的文字的字體
設置應用text樣式的元素的文字的顏色
設置應用text樣式的元素的文字的大小
使用CSS美化網頁
如果需要對大段的文字進行統一的字體樣式、顏色設置，那么選用哪種美化方式更高效？兩種美化網頁的方式各有什么特點？分別適用于哪些場景？試著總結一下。
思考
思考
把自己美化過的網頁作品分享給老師、同學，收集他們對你的作品的看法并記錄下來，選擇你喜歡的方式進一步優化你的作品。
討論
討論
利用在線人工智能網站美化網頁，要求人工智能助手用 HTML 代碼和 CSS 兩種方式分別實現，對比最后得到的美化效果和代碼。
拓展任務
拓展
謝 謝
匯報人：WPS

展開更多......

收起↑