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

下載本文檔

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

文檔簡介

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

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

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

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

src="圖像路徑"

alt="替換文本"

title="提示文本"

width="圖像寬度"

height="圖像高度"

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論