版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第18課美化網(wǎng)頁方法多第四單元校園活動(dòng)線上展義務(wù)教育信息科技課程資源七年級
123知道用HTML代碼簡單美化網(wǎng)頁的操作方法。學(xué)習(xí)目標(biāo)知道串聯(lián)樣式表的作用，初步學(xué)會(huì)用它美化網(wǎng)頁。能根據(jù)需求，分析不同方法的特點(diǎn)并合理選擇，提高解決問題的效率。第18課學(xué)習(xí)目標(biāo)前面編寫了介紹科技節(jié)某個(gè)項(xiàng)目的簡單網(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)容請打開之前完成的科技節(jié)網(wǎng)頁，使用HTML標(biāo)簽及屬性對網(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左對齊文本，如<palign="left">right右對齊文本，如<palign="right">center居中對齊文本，如<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)常被稱為級聯(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)頁中的元素，然后對元素的顏色、字體等進(jìn)行描述。瀏覽時(shí)，瀏覽器會(huì)按照CSS的描述顯示相應(yīng)的元素。第18課學(xué)習(xí)內(nèi)容二、用CSS美化網(wǎng)頁CSS的基本語法結(jié)構(gòu)（選擇器、聲明）選擇器（需要改變樣式的HTML元素）聲明開始大括號聲明結(jié)束大括號聲明（屬性和值被:分開，以;結(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．請參考右側(cè)代碼，嘗試用CSS對科技節(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左對齊文本，如{text-align:left;}right右對齊文本，如{text-align:right;}center居中對齊文本，如{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等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 護(hù)士聘用合同樣本
- 恐怖襲擊防控人防施工合同
- 交通運(yùn)輸庫房管理員招聘合同
- 人工智能技術(shù)應(yīng)用投資合同三篇
- 采購合同范例帶附件格式
- 閥門研磨合同范例
- 填寫裝修合同范例
- 生物科技園區(qū)建設(shè)及裝修工程合同三篇
- 外雇人員安全生產(chǎn)管理協(xié)議書
- 工業(yè)污水處理運(yùn)營服務(wù)合同范本
- 2024 年度校長述職報(bào)告：堅(jiān)守教育初心鑄就卓越未來
- 婦女健康教育宣傳內(nèi)容課件
- 2024年度個(gè)人工作總結(jié)范文四
- 人教版三年級數(shù)學(xué)上冊復(fù)習(xí)計(jì)劃
- 機(jī)電傳動(dòng)控制自動(dòng)運(yùn)輸線-課程設(shè)計(jì)
- 知行合一 - 社會(huì)實(shí)踐?創(chuàng)新創(chuàng)業(yè)（江西師范大學(xué)）知到智慧樹章節(jié)答案
- 工業(yè)項(xiàng)目投資估算及財(cái)務(wù)評價(jià)附表(有計(jì)算公式)
- 中國少數(shù)民族文化智慧樹知到期末考試答案章節(jié)答案2024年云南大學(xué)
- 唐宋名家詞智慧樹知到期末考試答案2024年
- 寧波市地面沉降基礎(chǔ)資料
- 臀療話術(shù)63089
評論
0/150
提交評論