資源簡介

(共15張PPT)
第18課　美化網頁方法多
第四單元　校園活動線上展
1
2
3
知道用HTML代碼簡單美化網頁的操作方法。
學習目標
知道串聯樣式表的作用，初步學會用它美化網頁。
能根據需求，分析不同方法的特點并合理選擇，提高解決問題的效率。
第18課　學習目標
前面編寫了介紹科技節某個項目的簡單網頁，這好似用HTML搭建好了“新房屋”的結構，接下來該怎樣將“新房屋”“裝修”得漂亮時尚？
問題情境
第18課　課堂導入
一 用HTML代碼美化網頁
二 用CSS美化網頁
學習內容
第18課　學習內容
請打開之前完成的科技節網頁，使用HTML標簽及屬性對網頁進行美化，如設置字體、設置背景等，然后交流討論這種方式是否便捷，美化效果好不好。
第18課　學習內容
一、用HTML代碼美化網頁
標　　簽 屬　　性 值 作　　用
color #RRGGBB 規定文本顏色，采用十六進制表示顏色值，如
face font_family 規定文本的字體，如
size number 規定文本的大小，如
bgcolor #RRGGBB 規定背景的顏色，采用十六進制表示顏色值，如

align left 左對齊文本，如

right 右對齊文本，如

center 居中對齊文本，如

左表是常用的控制網頁顯示效果的代碼。
第18課　學習內容
一、用HTML代碼美化網頁
用HTML代碼進行美化，美化效果往往很有限，但操作卻非常煩瑣。在實際應用中，人們經常用CSS來美化網頁。
CSS（cascading style sheets，串聯樣式表），生活中也經常被稱為級聯樣式表或層疊樣式表。
第18課　學習內容
二、用CSS美化網頁
如果將HTML代碼比作建造房屋的“建筑師”，那么CSS就是裝飾這間房屋的“裝潢設計師”。CSS可以描述網頁等文檔的外觀和格式，控制某類HTML標簽內容的顏色、字體、寬度、高度等。
第18課　學習內容
二、用CSS美化網頁
寫CSS代碼時，需要先指定網頁中的元素，然后對元素的顏色、字體等進行描述。瀏覽時，瀏覽器會按照CSS的描述顯示相應的元素。
第18課　學習內容
二、用CSS美化網頁
CSS的基本語法結構（選擇器、聲明）
選擇器
（需要改變樣式的HTML元素）
聲明開始大括號
聲明結束大括號
聲明
（屬性和值被: 分開，以; 結束）
屬性
屬性值
p {
}
font-size: 14px;
color : #606266;
第18課　學習內容
二、用CSS美化網頁
內部樣式



style標簽
CSS
第18課　學習內容
二、用CSS美化網頁
1．請參考右側代碼，嘗試用CSS對科技節網頁文本、標題、背景等進行美化。
2．觀察修改后網頁顯示效果的變化。
3．交流討論使用 CSS美化網頁的心得。
第18課　學習內容




二、用CSS美化網頁
屬　　性 值 作　　用
color #RRGGBB 設置文本顏色，采用十六進制表示顏色值，
如{color:#FF0000;}
font-family 字體系列名稱 設置文本的字體，如{font-family:楷體;}
font-size 長度值px/em 設置文本的大小，如{font-size:6px;}
background-color #RRGGBB 設置背景顏色，采用十六進制表示顏色值，
如{background-color:#0000FF;}
text-align left 左對齊文本，如{text-align:left;}
right 右對齊文本，如{text-align:right;}
center 居中對齊文本，如{text-align:center;}
text-indent 長度值px/em 設置段落中首行文本的縮進，如{text-indent:2em;}
第18課　學習內容
二、用CSS美化網頁
第18課　課堂總結
1．用HTML代碼可以美化網頁。
2． CSS可以讓網頁呈現出效果一致的美化風格。
3．使用CSS美化網頁，效果更好。
嘗試用在線人工智能模型，美化已有的HTML代碼。
第18課　拓展與提升
只要把已有的HTML代碼提交給模型，然后要求它使用CSS美化就可以了。