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

下載本文檔

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

文檔簡(jiǎn)介

教案4案例4簡(jiǎn)單公司網(wǎng)站計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HTML超鏈接標(biāo)記的語(yǔ)法格式；掌握HTML圖像標(biāo)記的語(yǔ)法格式；掌握HTML常用標(biāo)記的使用方法。能力目標(biāo)會(huì)使用各種HTML標(biāo)記搭建網(wǎng)頁(yè)結(jié)構(gòu)；能記住各種常用HTML標(biāo)記的語(yǔ)法格式。素質(zhì)目標(biāo)在案例實(shí)現(xiàn)中培養(yǎng)綜合分析問(wèn)題的能力；在代碼編輯中培養(yǎng)耐心細(xì)致、精益求精的工匠精神。教學(xué)重點(diǎn)超鏈接標(biāo)記（a）；圖像標(biāo)記（img）。教學(xué)難點(diǎn)超鏈接的標(biāo)記的target和title屬性；圖像標(biāo)記的src、width、height等屬性。教學(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)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述綜合使用文本標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記等HTML標(biāo)記，創(chuàng)建簡(jiǎn)單的小米公司網(wǎng)站，頁(yè)面瀏覽效果如圖4-1～圖4-4所示。圖4-1網(wǎng)站首頁(yè)圖4-2公司簡(jiǎn)介頁(yè)面圖4-3所獲榮譽(yù)頁(yè)面圖4-4管理團(tuán)隊(duì)頁(yè)面二、案例分析與實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．創(chuàng)建網(wǎng)站首頁(yè)分析圖4-1所示的網(wǎng)站首頁(yè)效果圖，該頁(yè)面由標(biāo)題、無(wú)序列表、超鏈接和圖片等構(gòu)成。其中超鏈接使用<a>標(biāo)記定義，圖片使用<img>標(biāo)記定義。代碼:略。2．創(chuàng)建公司簡(jiǎn)介頁(yè)面分析圖4-2所示的公司簡(jiǎn)介頁(yè)面效果圖，該頁(yè)面由標(biāo)題、段落文字和超鏈接等構(gòu)成?！胺祷亍背溄邮褂?lt;a>標(biāo)記定義，用于返回首頁(yè)。代碼:略。3．創(chuàng)建所獲榮譽(yù)頁(yè)面分析圖4-3所示的所獲榮譽(yù)頁(yè)面效果圖，該頁(yè)面主要由標(biāo)題和列表組成。標(biāo)題使用標(biāo)題標(biāo)記<h2>定義；“返回”超鏈接使用<a>標(biāo)記定義，用于返回首頁(yè)；列表使用<ul>標(biāo)記定義。代碼:略。4．創(chuàng)建管理團(tuán)隊(duì)頁(yè)面分析圖4-4所示的管理團(tuán)隊(duì)頁(yè)面效果圖，該頁(yè)面主要由各級(jí)標(biāo)題和段落文字組成。標(biāo)題可以分別使用標(biāo)題標(biāo)記<h2>、<h3>和<h4>定義；“返回”超鏈接使用<a>標(biāo)記定義，用于返回首頁(yè)；段落文字使用<p>標(biāo)記定義；“到頁(yè)尾”和“到頁(yè)頭”使用<a>標(biāo)記建立錨點(diǎn)鏈接。代碼:略。第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、HTML超鏈接標(biāo)記重點(diǎn)超鏈接的語(yǔ)法格式如下。<a

href="目標(biāo)地址"

target="目標(biāo)窗口的打開(kāi)方式"

title="提示文字">熱點(diǎn)文字</a>說(shuō)明：href:target:title:頁(yè)面間的超鏈接錨點(diǎn)鏈接空鏈接二、HTML圖像標(biāo)記1．常用的Web圖像格式GIF、JPG、PNG2．圖像標(biāo)記<img

src="圖像路徑"

alt="替換文本"

title="提示文本"

width="圖像寬度"

height="圖像高度"

>說(shuō)明：Src:Alt:Title:Width:Height:例4-1：學(xué)生同步操作，做學(xué)教一體3．給圖像創(chuàng)建超鏈接例4-2：<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8">

<title>給圖像創(chuàng)建超鏈接</title>

</head>

<body>

<p>

<a

><img

src="img/logo.jpg"

alt="小米LOGO"></p>

<p>images</a></p>

</body></html>三、絕對(duì)路徑和相對(duì)路徑1．絕對(duì)路徑絕對(duì)路徑包括本地絕對(duì)路徑和網(wǎng)絡(luò)絕對(duì)路徑兩種。（1）本地絕對(duì)路徑：一般從盤(pán)符開(kāi)始，到文件名稱結(jié)束。（2）網(wǎng)絡(luò)絕對(duì)路徑：包括協(xié)議名、網(wǎng)站域名、文件路徑名和文件名等。2．相對(duì)路徑相對(duì)路徑以當(dāng)前文件位置為參考點(diǎn)，到文件名稱結(jié)束。保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè)文件，所使用的路徑將不相同，故稱為相對(duì)路徑。四、小結(jié)掌握超鏈接和圖像標(biāo)記的語(yǔ)法格式；掌握使用常

溫馨提示

  • 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)論