美化網(wǎng)頁方法多課件 2024-2025學(xué)年人教版（2024）初中信息科技七年級(jí)全一冊(cè)_第1頁
美化網(wǎng)頁方法多課件 2024-2025學(xué)年人教版（2024）初中信息科技七年級(jí)全一冊(cè)_第2頁
美化網(wǎng)頁方法多課件 2024-2025學(xué)年人教版（2024）初中信息科技七年級(jí)全一冊(cè)_第3頁
美化網(wǎng)頁方法多課件 2024-2025學(xué)年人教版（2024）初中信息科技七年級(jí)全一冊(cè)_第4頁
美化網(wǎng)頁方法多課件 2024-2025學(xué)年人教版（2024）初中信息科技七年級(jí)全一冊(cè)_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第18課美化網(wǎng)頁方法多第四單元校園活動(dòng)線上展義務(wù)教育信息科技課程資源七年級(jí)

123知道用HTML代碼簡(jiǎn)單美化網(wǎng)頁的操作方法。學(xué)習(xí)目標(biāo)知道串聯(lián)樣式表的作用，初步學(xué)會(huì)用它美化網(wǎng)頁。能根據(jù)需求，分析不同方法的特點(diǎn)并合理選擇，提高解決問題的效率。第18課學(xué)習(xí)目標(biāo)前面編寫了介紹科技節(jié)某個(gè)項(xiàng)目的簡(jiǎn)單網(wǎng)頁，這好似用HTML搭建好了“新房屋”的結(jié)構(gòu)，接下來該怎樣將“新房屋”“裝修”得漂亮?xí)r尚？問題情境第18課課堂導(dǎo)入一

用HTML代碼美化網(wǎng)頁二

用CSS美化網(wǎng)頁學(xué)習(xí)內(nèi)容第18課學(xué)習(xí)內(nèi)容請(qǐng)打開之前完成的科技節(jié)網(wǎng)頁，使用HTML標(biāo)簽及屬性對(duì)網(wǎng)頁進(jìn)行美化，如設(shè)置字體、設(shè)置背景等，然后交流討論這種方式是否便捷，美化效果好不好。第18課學(xué)習(xí)內(nèi)容一、用HTML代碼美化網(wǎng)頁標(biāo)簽屬性值作用<font>color#RRGGBB規(guī)定文本顏色，采用十六進(jìn)制表示顏色值，如<fontcolor="#FF0000">facefont_family規(guī)定文本的字體，如<fontface="楷體">sizenumber規(guī)定文本的大小，如<fontsize="6"><body>bgcolor#RRGGBB規(guī)定背景的顏色，采用十六進(jìn)制表示顏色值，如<bodybgcolor="#0000FF"><p>alignleft左對(duì)齊文本，如<palign="left">right右對(duì)齊文本，如<palign="right">center居中對(duì)齊文本，如<palign="center">左表是常用的控制網(wǎng)頁顯示效果的代碼。第18課學(xué)習(xí)內(nèi)容一、用HTML代碼美化網(wǎng)頁用HTML代碼進(jìn)行美化，美化效果往往很有限，但操作卻非常煩瑣。在實(shí)際應(yīng)用中，人們經(jīng)常用CSS來美化網(wǎng)頁。

CSS（cascadingstylesheets，串聯(lián)樣式表），生活中也經(jīng)常被稱為級(jí)聯(lián)樣式表或?qū)盈B樣式表。第18課學(xué)習(xí)內(nèi)容二、用CSS美化網(wǎng)頁如果將HTML代碼比作建造房屋的“建筑師”，那么CSS就是裝飾這間房屋的“裝潢設(shè)計(jì)師”。CSS可以描述網(wǎng)頁等文檔的外觀和格式，控制某類HTML標(biāo)簽內(nèi)容的顏色、字體、寬度、高度等。第18課學(xué)習(xí)內(nèi)容二、用CSS美化網(wǎng)頁寫CSS代碼時(shí)，需要先指定網(wǎng)頁中的元素，然后對(duì)元素的顏色、字體等進(jìn)行描述。瀏覽時(shí)，瀏覽器會(huì)按照CSS的描述顯示相應(yīng)的元素。第18課學(xué)習(xí)內(nèi)容二、用CSS美化網(wǎng)頁CSS的基本語法結(jié)構(gòu)（選擇器、聲明）選擇器（需要改變樣式的HTML元素）聲明開始大括號(hào)聲明結(jié)束大括號(hào)聲明（屬性和值被:分開，以;結(jié)束）屬性屬性值p{}font-size:14px;color:#606266;第18課學(xué)習(xí)內(nèi)容二、用CSS美化網(wǎng)頁內(nèi)部樣式<head><style>body{background-color:#191970;}h1{text-align:center;}……</style></head>style標(biāo)簽CSS第18課學(xué)習(xí)內(nèi)容二、用CSS美化網(wǎng)頁1．請(qǐng)參考右側(cè)代碼，嘗試用CSS對(duì)科技節(jié)網(wǎng)頁文本、標(biāo)題、背景等進(jìn)行美化。2．觀察修改后網(wǎng)頁顯示效果的變化。3．交流討論使用CSS美化網(wǎng)頁的心得。第18課學(xué)習(xí)內(nèi)容<head><title>校園科技節(jié)</title><style>body{background-color:#87CEFA;}h2{font-family:黑體;font-size:50px;color:#DB7093;}h1{font-family:黑體;font-size:40px;color:#DB7093;}p{font-family:隸書;font-size:24px;text-indent:2em;}</style></head>二、用CSS美化網(wǎng)頁屬性值作用color#RRGGBB設(shè)置文本顏色，采用十六進(jìn)制表示顏色值，如{color:#FF0000;}font-family字體系列名稱設(shè)置文本的字體，如{font-family:楷體;}font-size長度值px/em設(shè)置文本的大小，如{font-size:6px;}background-color#RRGGBB設(shè)置背景顏色，采用十六進(jìn)制表示顏色值，如{background-color:#0000FF;}text-alignleft左對(duì)齊文本，如{text-align:left;}right右對(duì)齊文本，如{text-align:right;}center居中對(duì)齊文本，如{text-align:center;}text-indent長度值px/em設(shè)置段落中首行文本的縮進(jìn)，如{text-indent:2em;}第18課學(xué)習(xí)內(nèi)容二、用CSS美化網(wǎng)頁第18課課堂總結(jié)

1．用HTML代碼可以美化網(wǎng)頁。2．CS

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論