資源簡(jiǎn)介

(共21張PPT)
網(wǎng)頁(yè)的數(shù)據(jù)呈現(xiàn)
浙教版八年級(jí)上冊(cè)
第7課 網(wǎng)頁(yè)的數(shù)據(jù)呈現(xiàn)
學(xué)習(xí)目標(biāo)
通過(guò)體驗(yàn)CSS樣式設(shè)置的效果，認(rèn)識(shí)CSS樣式表，了解樣式表的作 用；通過(guò)網(wǎng)頁(yè)中添加樣式，掌握樣式表的基本結(jié)構(gòu)；能理解使用CSS降 低網(wǎng)頁(yè)代碼耦合度所帶來(lái)的便捷。
探究
1.你瀏覽過(guò)的網(wǎng)頁(yè)中，看到過(guò)哪些網(wǎng)頁(yè)效果？
2.你知道網(wǎng)頁(yè)中的文字效果是如何實(shí)現(xiàn)的？
建構(gòu)
網(wǎng)站為了保證網(wǎng)頁(yè)風(fēng)格的整體性，在制作過(guò)程中往往要求文本、色彩等 樣式要協(xié)調(diào)統(tǒng)一，可以對(duì)網(wǎng)頁(yè)數(shù)據(jù)各種呈現(xiàn)的效果進(jìn)行樣式的設(shè)置。
一、網(wǎng)頁(yè)數(shù)據(jù)呈現(xiàn)的方式
HTML定義了網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu)，即網(wǎng)頁(yè)呈現(xiàn)的文字、圖文、視頻等內(nèi) 容，用HTML設(shè)計(jì)網(wǎng)頁(yè)外觀(guān)樣式時(shí)需要使用大量的標(biāo)記，代碼相對(duì)多而復(fù)雜，使用CSS可以有效地對(duì)網(wǎng)頁(yè)中數(shù)據(jù)的布局、字體和背景等效果實(shí)現(xiàn)更精確的控制，同時(shí)可以將網(wǎng)頁(yè)的結(jié)構(gòu)和格式分離，實(shí)現(xiàn)解耦。
一、網(wǎng)頁(yè)數(shù)據(jù)呈現(xiàn)的方式
比如對(duì)網(wǎng)站所有 頁(yè)面的風(fēng)格可以應(yīng)用一個(gè)CSS,只要修改這個(gè)CSS文件就可以更新所有頁(yè)面 的風(fēng)格樣式，既提高了更新和維護(hù)的效率，同時(shí)又縮減了網(wǎng)頁(yè)的代碼，提高了網(wǎng)頁(yè)的瀏覽速度。
二、CSS樣式
CSS全稱(chēng)為層疊樣式表(Cascading Style Sheets),也是一種標(biāo)識(shí)語(yǔ)言， CSS樣式可以方便地設(shè)置網(wǎng)頁(yè)效果。如網(wǎng)頁(yè)中文字的字號(hào)、字體、顏色、位 置以及圖片的大小等，都涉及網(wǎng)頁(yè)顯示信息的樣式。
開(kāi)動(dòng)腦經(jīng)
CSS樣式都能修改網(wǎng)頁(yè)的哪些外觀(guān)？最常見(jiàn)的有哪些？
二、CSS樣式
如下圖是添加了樣式表的網(wǎng)頁(yè)效果的前后對(duì)比圖。
未添加樣式的HTML文檔
二、CSS樣式
添加簡(jiǎn)單樣式表的網(wǎng)頁(yè)效果
二、CSS樣式
上圖的網(wǎng)頁(yè)是在＜body＞標(biāo)簽之前添加了以下CSS字體、顏色等樣式的代碼。

親身體驗(yàn)
修改樣式表里的屬性和屬性參數(shù)，觀(guān)察網(wǎng)頁(yè)外觀(guān)變化，嘗試其他樣式的設(shè)置。
三、樣式表的基本結(jié)構(gòu)

知識(shí)鏈接
級(jí)聯(lián)樣式表級(jí)聯(lián)樣式表(Cascading Style Sheet,簡(jiǎn)稱(chēng)CSS)是由國(guó) 際組織制定的一套延伸HTML樣式的新標(biāo)準(zhǔn)，用來(lái)控制網(wǎng)頁(yè)內(nèi)容的外觀(guān) 格式，包括版面的精確位置、特定字體和格式，甚至圖像、表格和圖層 等的位置和格式，稱(chēng)為“級(jí)聯(lián)”的主要原因是支持應(yīng)用多個(gè)樣式表到同一張網(wǎng)頁(yè)中。
隨堂練習(xí)
1. 用css樣式表美化網(wǎng)頁(yè)。
2. 嘗試使用圖像標(biāo)簽，在網(wǎng)頁(yè)里加入一張平鋪模式的背景圖。
謝謝聆聽(tīng)！
INTERNET OF THINGS
謝謝
21世紀(jì)教育網(wǎng)（www.21cnjy.com)
中小學(xué)教育資源網(wǎng)站
兼職招聘：
https://www.21cnjy.com/recruitment/home/admin

展開(kāi)更多......

收起↑