網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例5新聞詳情網(wǎng)頁(yè)_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例5新聞詳情網(wǎng)頁(yè)_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例5新聞詳情網(wǎng)頁(yè)_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例5新聞詳情網(wǎng)頁(yè)_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例5新聞詳情網(wǎng)頁(yè)_第5頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡(jiǎn)介

模塊二使用CSS3美化網(wǎng)頁(yè)本模塊通過(guò)8個(gè)案例的實(shí)現(xiàn)，介紹CSS的基本使用方法、CSS常用選擇器、CSS盒子模型、CSS背景屬性、元素的浮動(dòng)與定位、元素類型的轉(zhuǎn)換等內(nèi)容。知識(shí)目標(biāo)：掌握將CSS引入網(wǎng)頁(yè)的方式；掌握CSS常用文本屬性；掌握CSS常用選擇器;理解盒子模型的概念及相關(guān)屬性；掌握背景相關(guān)屬性；理解元素的浮動(dòng)與定位屬性；理解元素類型轉(zhuǎn)換的原理。能力目標(biāo)：能熟練使用盒子布局網(wǎng)頁(yè)內(nèi)容；能熟練使用CSS美化網(wǎng)頁(yè)內(nèi)容。素質(zhì)目標(biāo)：在編輯代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神；在美化網(wǎng)頁(yè)中培養(yǎng)欣賞美、感受美的能力。教案5案例5新聞詳情網(wǎng)頁(yè)計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)了解CSS的概念和作用；掌握在網(wǎng)頁(yè)中引入CSS樣式的3種方法；掌握CSS常用文本屬性；熟練使用CSS美化網(wǎng)頁(yè)文本內(nèi)容。能力目標(biāo)能理解并說(shuō)出CSS的優(yōu)勢(shì)；會(huì)使用CSS美化網(wǎng)頁(yè)文本內(nèi)容。素質(zhì)目標(biāo)通過(guò)關(guān)于奧運(yùn)精神的內(nèi)容引導(dǎo)學(xué)生樹立為國(guó)爭(zhēng)光的愛(ài)國(guó)精神和艱苦奮斗的奉獻(xiàn)精神；在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教學(xué)重點(diǎn)CSS特點(diǎn)、CSS樣式引入；font-family、font-size、font-style、color等CSS常用文本屬性。教學(xué)難點(diǎn)使用CSS美化網(wǎng)頁(yè)中的文本內(nèi)容。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析與實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述利用HTML5標(biāo)記搭建頁(yè)面結(jié)構(gòu)，并使用CSS3設(shè)置內(nèi)容樣式，制作新聞詳情網(wǎng)頁(yè)，瀏覽效果如圖5-1所示。圖5-1第一個(gè)HTML5網(wǎng)頁(yè)二、案例分析與實(shí)現(xiàn)1.案例分析圖5-1所示的網(wǎng)頁(yè)內(nèi)容由4部分構(gòu)成，分別為標(biāo)題、副標(biāo)題、段落文字和圖像。標(biāo)題使用<h2>標(biāo)記定義，副標(biāo)題使用<h4>標(biāo)記定義，段落文字使用<p>標(biāo)記，圖像使用<img>標(biāo)記定義。構(gòu)建頁(yè)面結(jié)構(gòu)后，再使用CSS3內(nèi)部樣式表美化網(wǎng)頁(yè)。2.案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、引入CSS樣式學(xué)生已觀看微課，略講1．行內(nèi)式行內(nèi)式也稱為內(nèi)聯(lián)樣式，是指通過(guò)標(biāo)記的style屬性設(shè)置元素的樣式。其基本語(yǔ)法格式如下。<標(biāo)記style="屬性:屬性值;屬性:屬性值；……">內(nèi)容</標(biāo)記>例5-1example01.html學(xué)生同步操作，做學(xué)教一體2．內(nèi)部樣式表內(nèi)部樣式表也叫內(nèi)嵌式，是指將所有CSS樣式代碼寫在HTML文檔的頭部標(biāo)記<head>中，并且用<style>標(biāo)記定義。其語(yǔ)法格式如下。<head><styletype="text/css">選擇器1{屬性：屬性值；屬性：屬性值；……}/*注釋內(nèi)容*/選擇器2{屬性：屬性值；屬性：屬性值；……}……</style></head>3．外部樣式表外部樣式表是指將所有的CSS樣式代碼放入一個(gè)以.css為擴(kuò)展名的外部樣式表文件中，再通過(guò)<link>標(biāo)記將外部樣式表文件鏈接到HTML文件。其語(yǔ)法格式如下?！?lt;head><linkhref="外部樣式表文件路徑"rel="stylesheet"type="text/css"></head>……例5-2example02.html學(xué)生同步操作，做學(xué)教一體二、CSS常用文本屬性學(xué)生已觀看微課，略講1.font-family2.font-size3.font-weight4.font-style5.@font-face6.text-decoration7.color8.text-align9.text-indent10.line-height11.text-shadow12.text-overflow例5-3example03.html學(xué)生同步操作，做學(xué)教一體三=2\*ROMAN、小結(jié)重點(diǎn)掌握CSS的3中引入方式和常用的CSS文本屬性，會(huì)綜合利用CSS的文本屬性設(shè)置網(wǎng)頁(yè)中文本元素的樣式。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例6中的微課，學(xué)習(xí)CSS常用選擇器和CSS的高級(jí)特性課前小組討論過(guò)程中，培養(yǎng)學(xué)生團(tuán)隊(duì)合作，共同探討的協(xié)作意識(shí)，培養(yǎng)學(xué)生良

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論