《Web前端設(shè)計(jì)》教案

XXX學(xué)校

課程名稱Web前端開發(fā)授課時(shí)間第1周

第1章初識(shí)HTML5

授課章節(jié)

第2章HTML基礎(chǔ)

1.了解web的由來以及其與Internet之間的關(guān)系。

2.了解web的相關(guān)概念，包括WWW.Website.URL.Web

Standard、WebBrowser.WebServer。

知識(shí)目標(biāo)

3.了解HTML的歷史。

4.精通HTML的結(jié)構(gòu)。

教學(xué)目的

5.了解全局屬性。

1.會(huì)下載安裝開發(fā)工具，

技能目標(biāo)2.會(huì)使用瀏覽器瀏覽HTML文件，

3.會(huì)編寫簡單的網(wǎng)頁

教學(xué)重點(diǎn)Web相關(guān)概念,HTML的結(jié)構(gòu)。

教學(xué)難點(diǎn)HTML的結(jié)構(gòu)

教學(xué)方法案例講解法，演示法

教具計(jì)算機(jī)，多媒體

教學(xué)過程設(shè)計(jì)

（含時(shí)間分配）

第一、二課時(shí)

（講解web的由來以及其與Internet之間的關(guān)系，講解Web相關(guān)概念）

，本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：

什么是web?了解Web的誕生

請(qǐng)小組代表對(duì)以上問題發(fā)表見解。

教師對(duì)上述問題進(jìn)行解釋：

?Internet,中文正式譯名為因特網(wǎng)，又叫作國際互聯(lián)網(wǎng)，是由所有使東公用語

言互相通信的計(jì)算機(jī)連接而組成的全球網(wǎng)絡(luò)，一旦連接到它的任意一個(gè)節(jié)點(diǎn)，

就意味著計(jì)算機(jī)或者其他設(shè)備已經(jīng)連入Internet.目前，Internet的用戶已

經(jīng)遍及全球，截止到2018年，已經(jīng)有超過40億人在使用Internet,并且它的

用戶數(shù)還在以等比級(jí)數(shù)上升。

?Internet的前身是美國國防部高級(jí)研究計(jì)劃局(AdvancedResearchProjects

Agency,ARPA)主持研制的ARPANET網(wǎng)絡(luò)，當(dāng)時(shí)建立這個(gè)網(wǎng)絡(luò)是為了將美國的

幾臺(tái)軍事和研究用的計(jì)算機(jī)主機(jī)連接起來。ARPANET網(wǎng)絡(luò)于1969年正式啟用，

但當(dāng)時(shí)僅連接了4臺(tái)計(jì)算機(jī)，供科學(xué)家們進(jìn)行計(jì)算機(jī)聯(lián)網(wǎng)實(shí)驗(yàn)使用。

令知識(shí)點(diǎn)講解

＞講解“Internet常用的服務(wù)”

(1)、E-mail：電子郵件，具有速度快、成本低、方便靈活等優(yōu)點(diǎn)，是目前Internet

的重要服務(wù)項(xiàng)目之。

(2)、FTP：文件傳輸，用戶通過該協(xié)議可以進(jìn)行文件傳輸或者文件訪問。由于安

全問題，其使用場景也越來越少。

(3)、BBS:電子公告，最早是用來公布股市價(jià)格等類信息的，現(xiàn)在的BBS已經(jīng)發(fā)

展成功能齊全的社區(qū)，可以實(shí)現(xiàn)信息公告、線上交談、分類討論、經(jīng)驗(yàn)交流、文件共

享等。

(4)、www：World邛ideWeb,中文名為萬維網(wǎng)，也被稱為Web,是Internet中

發(fā)展最迅速的部分。

(5)、Web是Intemet的一個(gè)應(yīng)用。它的誕生也是極其富有戲劇性的。

＞講解“web的相關(guān)概念”

(1)、www,worldwideweb的縮寫，也可寫為w3、web,中文名為萬維網(wǎng)。www

是Internet的最核心部分。它是Internet上那些支持www服務(wù)和HTTP辦議的服務(wù)器

集合。

(2)、Website中文名為網(wǎng)站，是指在Internet上根據(jù)一定的規(guī)則,使用HTML

等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。人們可以通過網(wǎng)站發(fā)布自己想要公

開的資訊，或者利用網(wǎng)站提供相關(guān)的網(wǎng)絡(luò)服務(wù)。

(3)、URL,UniformResourceLocator的縮寫，中文名為統(tǒng)一資源定位符，俗

稱網(wǎng)址，它是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是

互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址，在WWW上瀏覽或者查詢信息，必須在網(wǎng)頁瀏覽器上諭入查

詢目標(biāo)的地址。

URL的一般格式如下：

協(xié)議:〃主機(jī)地址（IP地址）+目錄路徑+參數(shù)。

（4）、web應(yīng)用開發(fā)需要遵循的標(biāo)準(zhǔn)就是WebStandard（web標(biāo)準(zhǔn)），這里web

標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合，網(wǎng)頁主要由三部分組成：結(jié)構(gòu)標(biāo)準(zhǔn)（XML、HTML和XHTML）,

表現(xiàn)標(biāo)準(zhǔn)（CSS）,行為標(biāo)準(zhǔn)是（DOM、JavaScript）。

（5）、web瀏覽器，簡稱瀏覽器，是一個(gè)顯示網(wǎng)頁服務(wù)器或者檔案系統(tǒng)內(nèi)的HTML

文件，并讓用戶與這些文件互動(dòng)的軟件。第一個(gè)網(wǎng)頁瀏覽器就是TimBe.ers-Lee編

寫的WorldWideWeb,后改名為Nexus。主流瀏覽器如下圖所示：

1E瀏覽器火狐瀏覽器谷歌瀏覽器

獵豹瀏覽器Safari瀏覽器Opera瀏覽器

圖1主流瀏覽器

（6）,Web服務(wù)器的主要功能是提供網(wǎng)上信息瀏覽服務(wù)。Web服務(wù)器可以解析HTTP

協(xié)議，當(dāng)Web服務(wù)器接收到一個(gè)HTTP請(qǐng)求時(shí)，會(huì)返回一個(gè)HTTP響應(yīng)，這樣客戶端就

可以從服務(wù)器上獲取網(wǎng)頁（HTML）,包括CSS、JavaScript.音頻、視頻等資源。

（7）、學(xué)生自主提問，教師對(duì)疑難問題進(jìn)行解答。

＞講解，eb開發(fā)”

目前，Web開發(fā)主要分為前端和后端兩部分。前端指的是直接與用戶接觸的網(wǎng)頁，

網(wǎng)頁上通常由HTML、CSS、JavaScript等內(nèi)容；后端指的是程序、數(shù)據(jù)庫和服務(wù)器層

面的開發(fā)。

階段小結(jié)

＞小結(jié)

本章簡單介紹了Internet的歷史和Web的誕生，重點(diǎn)介紹了Web的相關(guān)概念,

包括www、Website、URL、web標(biāo)準(zhǔn)、web的瀏覽器、Web服務(wù)器。同時(shí)、明確

了web前端開發(fā)需要掌握的內(nèi)容，包括HTML、CSS、JavaScript。

＞答疑

教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。

第三課時(shí)

（講解HTML基礎(chǔ)）

，復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。

1、目前，對(duì)HTML5新特性支持最好的瀏覽器是（）。

A、IE6瀏覽器；B、Firefox3.6瀏覽器

C、OperalO.1瀏覽器；D、chrome4.0瀏覽器

答案：D

谷歌瀏覽器對(duì)HTML5及CSS3的兼容性支持較好，而且調(diào)試網(wǎng)頁非常方便，所以在HTML5

網(wǎng)頁制作過程中谷歌瀏覽器是最常用的瀏覽器。

說明：教師可根據(jù)學(xué)生對(duì)上述問題的回答情況，對(duì)以上問題進(jìn)行簡單講解或直接進(jìn)入

本課時(shí)新內(nèi)容的學(xué)習(xí)。

,本課時(shí)內(nèi)容學(xué)習(xí)

＜分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：

學(xué)習(xí)任何一門語言，都要首先掌握它的基本格式，就像寫信需要符合書信的格式要求

一樣。HTML5標(biāo)記語言也不例外，同樣需要遵從一定的規(guī)范。請(qǐng)大家討論下：使用

Dreamweaver新建HTML5默認(rèn)文檔時(shí)，HTML5文檔的基本格式包括哪些標(biāo)記？

請(qǐng)小組代表對(duì)以上問題發(fā)表見解。

教師對(duì)上述問題進(jìn)行解釋：

?＜!DOCTYPE＞標(biāo)記

QDOCTYPE》標(biāo)記標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種HTML或

XHTML標(biāo)準(zhǔn)規(guī)范。

?標(biāo)記

標(biāo)記位于。doctype＞標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個(gè)

HTML文檔。

?<head>標(biāo)記

<head>標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記。

?<body>標(biāo)記

<body》標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。

?知識(shí)點(diǎn)講解

>講解“標(biāo)記語言”

(1)標(biāo)記語言，是一種將文本(Texl)以及與文本相關(guān)的其他信息結(jié)合起來，

展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。

(2)標(biāo)記語言的種類有很多，常見的有XML、HTML、XHTML等。

>講解“從HTML到XHTML”

HTML,超文本標(biāo)記語言(HyperTextMarkupLanguage,HTML),是為“網(wǎng)頁創(chuàng)

建和其他可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語言。人們可以使用

HTML建立自己的Web站點(diǎn)。HTML文檔在瀏覽器上運(yùn)行，并由瀏覽器解析。

?HTML(第1版)：1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布，

這個(gè)版本沒有標(biāo)準(zhǔn)版本，主要是因?yàn)楫?dāng)時(shí)有很多版本的HTML,沒有形成一個(gè)統(tǒng)

一的標(biāo)準(zhǔn)，所以沒有正式的HTMLl.Oo

?HTML2.0：1995年11月作為RFC1866發(fā)布。

?1ITML3.2：1997年1月14日，W3c推薦標(biāo)準(zhǔn)，這是第一個(gè)被廣泛使用的標(biāo)準(zhǔn)。

由于該版本年代較早，很多東西都已經(jīng)過時(shí)，在2018年3月15日被取消作為

標(biāo)準(zhǔn)。官方文檔地址為

https:〃www.w3.org/TR/2018/SPSD-html32-20180315/。

?HTML4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。

?HTML4.01:1999年12月24日，W3c推薦標(biāo)準(zhǔn)，這也是另一個(gè)被廣泛使用的

標(biāo)準(zhǔn)。官方文檔地址為https:〃www.w3.org/TR/1999/REC-html401-19991224/

?XHTML1.0：2000年1月26日，W3c推薦標(biāo)準(zhǔn)。官方文檔地址為

https：//www.w3.org/TR/2000/REC-xhtmll-20000126/。

?XHTML,可擴(kuò)展超文本標(biāo)記語言(extensibleHyperTextMarkupLanguage,

XHTML),是一種更純潔、更嚴(yán)格、更規(guī)范的HTML代碼。

>講解“HTML5文檔基本格式”

(1)教師通過Dreamweaver工具新建默認(rèn)文檔，并指出默認(rèn)文檔中會(huì)自帶一些源代

碼。

<!doctypehtml>

<html>

<head>

<metacharset=Mutf-8H>

〈title》無標(biāo)題文檔〈/title)

</head>

<body>

</body>

</html>

(2)、教師分析自帶的源代碼，講解HTML5文檔的基本格式及構(gòu)成標(biāo)記。

(3)、教師讓學(xué)生自行嘗試，理解<!D0CTYPE>文檔類型聲明、<html>根標(biāo)記、<head>

頭部標(biāo)記、<body>主體標(biāo)記的語義及用法。

(4)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

>講解“HTML語法”

(1)、教師展示PPT對(duì)“HTML語法”進(jìn)行簡單介紹。

(2)、教師展示PPT,對(duì)“HTML語法”規(guī)則進(jìn)行分析，并與之前的各種版本進(jìn)行對(duì)比

分析。

(3)、教師針對(duì)HTML語法中的“標(biāo)簽不區(qū)分大小寫、允許屬性值不使用引號(hào)、允許

部分屬性值的屬性省略”通過代碼演示，并舉例說明。

(4)、學(xué)生自主提問，教師對(duì)疑難問題進(jìn)行解答。

>講解“HTML標(biāo)記”

(1)、教師展示PPT對(duì)“單標(biāo)記與雙標(biāo)記”、“注釋標(biāo)記”的概念進(jìn)行講解，并指出

“單標(biāo)記與雙標(biāo)記”的不同。

(2)、教師舉例說明常見的單標(biāo)記、雙標(biāo)記以及注釋標(biāo)記。

(3)、教師通過代碼對(duì)“單標(biāo)記與雙標(biāo)記”、“注釋標(biāo)記”的使用方法進(jìn)行演示。

(4)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答,

＞講解“標(biāo)記的屬怛”

(1)、教師和學(xué)生互動(dòng)：在網(wǎng)頁制作時(shí)，如果大家想要控制標(biāo)記的樣式，比如：希望

標(biāo)題文本的字體為“微軟雅黑”且居中顯示，或者段落文本中的某些名詞顏色突出顯

示等問題。此時(shí)僅僅依靠HTML標(biāo)記的默認(rèn)顯示樣式已經(jīng)不能滿足需求了，需要使用

“HTML標(biāo)記的屬性”進(jìn)行控制。

(2)、教師展示PPT對(duì)“標(biāo)記的屬性”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時(shí)演示。

(3)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

＞講解“HTML文檔頭部相關(guān)標(biāo)記”

(1)、教師展示PPT對(duì)“HTML文檔頭部相關(guān)標(biāo)記”進(jìn)行講解。

(2)、教師分別對(duì)標(biāo)記、＜meta/＞標(biāo)記、＜：ink＞標(biāo)記及〈style)標(biāo)記的基本語

法格式進(jìn)行講解，并進(jìn)行代碼演示。

(3)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

＜階段小結(jié)

＞小結(jié)

重點(diǎn)：HTML語法、HTML標(biāo)記、標(biāo)記的屬性。

＞答疑

教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。

＞通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例對(duì)相

關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。

＞預(yù)習(xí)2.2節(jié)【全局屬性】。

笫四、五課時(shí)

(講解全局屬性、HTML主體元素、無語義元素、標(biāo)題元素和段落元素)

，復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。

1、簡要描述“HTML5語法”，并舉例說明“HTML5語法”相對(duì)于以前的語法格式有哪

些新變化？

答案：

?標(biāo)簽不區(qū)分大小寫

HTML5采用寬松的語法格式，標(biāo)簽可以不區(qū)分大小寫，這是HTML5語法變化的重要體現(xiàn)。

例如：

e>這里的D標(biāo)簽大小寫不一致</P>

在上面的代碼中，雖然p標(biāo)記的開始標(biāo)記與結(jié)束標(biāo)記大小寫并不匹配，但是在HTML5

語法中是完全合法的。

?允許屬性值不使用引號(hào)

在HTML5語法中，屬性值不放在引號(hào)中也是正確的。例如：

<inputchecked=atj^pe=checkbox/>

<inputreadon1y=readon1ytype=text/>

以上代碼都是完全符合HTML5規(guī)范的，等價(jià)于：

<inputchecked="a"type=HcheckboxM/>

<inputreadonly="readonly”type="lext"/>

?允許部分屬性值的屬性省略

在HTML5中，部分標(biāo)志性屬性的屬性值可以省略。例如：

<inputchecked="checked"type=''checkbox'V>

<inputreadon1y=Hreadon1ywtype="text"/>

說明：教師可根據(jù)學(xué)生對(duì)上述問題的回答情況，對(duì)以上問題進(jìn)行簡單講解或直接進(jìn)入

本課時(shí)新內(nèi)容的學(xué)習(xí)。

i本課時(shí)內(nèi)容學(xué)習(xí)

。分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：

我們知道，一篇結(jié)構(gòu)清晰的文章通常都有標(biāo)題和段落，那么如何使用HTML5語言創(chuàng)建

網(wǎng)頁中的標(biāo)題和段落呢？

教師對(duì)上述問題進(jìn)行解釋：

?為了使網(wǎng)頁更具有語義化，我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)記，HTML5提供了

6個(gè)等級(jí)的標(biāo)題，即<hl>、<h2>、<h3>><h4>、<h5>和<h6>,從<hl>到<h6>重

要性遞減。其基本語法格式如下：

＜hnalign="對(duì)齊方式"＞標(biāo)題文本＜/hn＞

該語法中n的取值為1到6,align屬性為可選屬性，用于指定標(biāo)題的對(duì)齊方式。

?同樣地，網(wǎng)頁也可以分為若干個(gè)段落，而段落的標(biāo)記就是＜p＞。默認(rèn)情況下，

文本在段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。＜p＞是HTML文檔中最常見的

標(biāo)記，其基本語法格式如下：

＜palign="對(duì)齊方式"＞段落文本＜/p＞

該語法中align屬性為＜p〉標(biāo)記的可選屬性，和標(biāo)題標(biāo)記＜hl＞~＜h6＞一樣，同樣可以使

用align屬性設(shè)置段落文本的對(duì)齊方式。

令知識(shí)點(diǎn)講解

＞講解“標(biāo)題和段落標(biāo)記”

（1）、教師展示PPT對(duì)“標(biāo)題標(biāo)記”、“段落標(biāo)記”的概念及基本語法格式進(jìn)行

講解。

（2）、教師對(duì)“標(biāo)題標(biāo)記”、“段落標(biāo)記”的顯示效果通過代碼進(jìn)行演示。

（3）、教師分別對(duì)“標(biāo)題標(biāo)記”及“段落標(biāo)記”的align屬性進(jìn)行講解并通過代碼進(jìn)

行演示。

（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

第六課時(shí)

（制作簡單的文字頁面）

綜合運(yùn)用所學(xué)標(biāo)簽，制作一個(gè)簡單的頁面，并提交，進(jìn)行作品互評(píng)。

心得

作業(yè)

備注

XXX學(xué)校

課程名稱Web前端開發(fā)授課時(shí)間第2周

授課章節(jié)第2章HTML基礎(chǔ)

了解HTML的注釋方法；

知識(shí)目標(biāo)掌握HTML的格式化元素；

教學(xué)目的

掌握HTML的圖片元素和超鏈接元素

技能目標(biāo)1.會(huì)制作包含圖片和超鏈接的1ITML5百科頁面

HTML5語法、HTML5標(biāo)記及其屬性、文本控制標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)

教學(xué)重點(diǎn)

記

教學(xué)難點(diǎn)HTML5標(biāo)記及屬性、圖像標(biāo)記、超鏈接標(biāo)記

教學(xué)方法案例講解法，演示法

教具計(jì)算機(jī)，多媒體

教學(xué)過程設(shè)計(jì)

（含時(shí)間分配）

第一課時(shí)

（講解注釋元素、格式化元素）

＞講解“注釋元素”

（1）＜!--）用于HTML中插入注釋，它的開始標(biāo)簽為。一，結(jié)束標(biāo)簽為一》，開始

標(biāo)簽和結(jié)束標(biāo)簽不一定在一行，也就是說，可以寫多行注釋。瀏覽器不會(huì)顯示注釋。

＞講解“文本格式化元素”

（1）、教師和學(xué)生互動(dòng)：使用“HTML標(biāo)記的屬性”可以設(shè)置文本的對(duì)齊方式、顏色等，

那么，如果想要為文字設(shè)置粗體、斜體或下劃線效果需要怎么辦呢？下面，我們來學(xué)

習(xí)“文本格式化標(biāo)記”。

（2）、教師展示PPT對(duì)“文本格式化標(biāo)記”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時(shí)演示。

（3）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

＞講解“特殊字符標(biāo)記”

（1）、教師和學(xué)生互動(dòng)：瀏覽網(wǎng)頁時(shí)常常會(huì)看到一些包含特殊字符的文本，如數(shù)學(xué)公

式、版權(quán)信息等。那么如何在網(wǎng)頁上顯示這些包含特殊字符的文本呢？下面，我們來

學(xué)習(xí)特殊字符標(biāo)記。

（2）、教師展示PPT對(duì)“常用特殊字符標(biāo)記”進(jìn)行講解，分析“字符標(biāo)記”的構(gòu)成，

并使用代碼進(jìn)行實(shí)時(shí)演示，

（3）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

?階段小結(jié)

＞小結(jié)

重點(diǎn)：段落標(biāo)記、文本格式化標(biāo)記。

＞答疑

教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生掌握段落標(biāo)

記、文本格式化標(biāo)記、特殊字符標(biāo)記的使用。

＞通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例對(duì)相

關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。

＞預(yù)習(xí)1.4節(jié)【圖像標(biāo)記】。

第二、三課時(shí)

（講解常用圖像格式、圖像標(biāo)記＜img/＞、絕對(duì)路徑和相對(duì)路徑）

說明：

將1.4小節(jié)作為兩個(gè)課時(shí)進(jìn)行講解。

，復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。

1、在上節(jié)課中，我們學(xué)習(xí)了文本格式化標(biāo)記。那么，在文本格式化標(biāo)記中，如何將文

字設(shè)置為粗體呢？

答案：

將文字以粗體方式顯示的標(biāo)記是：＜b〉標(biāo)記或〈strong》標(biāo)記。其中，使用＜b＞標(biāo)記定義

文本粗體，〈strong)標(biāo)記定義強(qiáng)調(diào)文本。

說明：教師可根據(jù)學(xué)生對(duì)上述問題的回答情況，對(duì)以上問題進(jìn)行簡單講解或直接進(jìn)入

本課時(shí)新內(nèi)容的學(xué)習(xí)。

，本課時(shí)內(nèi)容學(xué)習(xí)

?分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：

在網(wǎng)站中，我們可以看到絢麗多彩的圖片。那么，目前網(wǎng)頁上常用的圖像格式有哪些

呢，請(qǐng)結(jié)合它們的優(yōu)缺點(diǎn)進(jìn)行說明？

請(qǐng)小組代表對(duì)以上問題發(fā)表見解。

教師對(duì)上述問題進(jìn)行解釋：

目前網(wǎng)頁上常用的圖像格式主要有GIF、JPG和PNG三種，具體區(qū)別如下：

?GIF格式

GIF最突出的地方就是它支持動(dòng)畫，同時(shí)GIF也是一種無損的圖像格式。另外，GIF支

持透明(全透明或全不透明)，因此很適合在互聯(lián)網(wǎng)上使用。但GTF只能處理256種

顏色。在網(wǎng)頁制作中，GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。

?PNG格式

PNC包括PNC-8和真色彩PNC(PNC-24和PNC-32)。相對(duì)于CIF,PNC最大的優(yōu)勢是體

積更小，支持alpha透明(全透明，半透明，全不透明)，并且顏色過渡更平滑，但

PNG不支持動(dòng)畫。

?JPG格式

JPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的圖像，但

是JPG是一種有損壓縮的圖像格式，網(wǎng)頁制作過程中類似于照片的圖像比如橫幅廣告

(banner)、商品圖片、較大的插圖等都可以保存為JPG格式。

簡而言之，在網(wǎng)頁中小圖片或網(wǎng)頁基本元素如圖標(biāo)、按鈕等考慮GIF或PNG-8,半透明

圖像考慮PNG-24,類似照片的圖像則考慮JPG。

令知識(shí)點(diǎn)講解

＞講解“常用圖像格式”

(1)、教師帶領(lǐng)學(xué)生查看網(wǎng)頁中的圖像，總結(jié)網(wǎng)頁中常用的圖像格式。

（2）、教師展示PPT對(duì)GIF、JPG和PNG三種常用的圖像格式進(jìn)行講解，比較三種格

式的異同，并指出其優(yōu)缺點(diǎn)。

（3）、學(xué)生提問，教師對(duì)疑難問題進(jìn)行解答。

＞講解“圖像標(biāo)記＜img/＞”

（1）、教師和學(xué)生互動(dòng)：在網(wǎng)頁中隨處可見各種各樣的圖像，比如：廣告圖、推廣圖、

輪播圖等。大家在網(wǎng)頁中都見過哪些圖片呢？然后，教師使用PPT展示網(wǎng)頁中各式各

樣的圖片效果。

（2）、教師展示PPT對(duì)“圖像標(biāo)記”及其屬性進(jìn)行講解，并使用代碼進(jìn)行實(shí)時(shí)演示。

（3）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

＞講解“絕對(duì)路徑和相對(duì)路徑”

（1）、教師通過文件夾的層級(jí)關(guān)系對(duì)“路徑”進(jìn)行講解，并指出網(wǎng)頁中的路徑通常分

為“相對(duì)路徑與絕對(duì)路徑”兩種。

（2）教師展示PPT對(duì)“絕對(duì)路徑”進(jìn)行講解，并舉例說明。

（3）、教師展示PPT對(duì)“相對(duì)路徑”進(jìn)行講解，并通過“圖像文件和html文件”的

不同位置進(jìn)行演示。

（4）、學(xué)生提問，教師對(duì)疑難問題進(jìn)行解答。

說明：在網(wǎng)頁制作時(shí)可適時(shí)停下來，讓學(xué)生自行嘗試。小組之間可以協(xié)作討論，教師

巡視，對(duì)疑難問題進(jìn)行解答。

令階段小結(jié)

＞小結(jié)

重點(diǎn)：圖像標(biāo)記。

＞答疑

教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。

＜鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌

握?qǐng)D像標(biāo)記＜img/＞的使用，并能夠區(qū)分圖像的相對(duì)路徑與絕對(duì)路徑的不同。

＞通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例對(duì)相

關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。

＞預(yù)習(xí)【超鏈接標(biāo)記】。

預(yù)習(xí)【階段案例一制作HTML5百科頁面】。

第四課時(shí)

（講解創(chuàng)建超鏈接、錨點(diǎn)鏈接）

，復(fù)習(xí)上節(jié)課內(nèi)容

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：

1、在上節(jié)課中，我們學(xué)習(xí)了圖像標(biāo)記＜img/＞及其/＞標(biāo)記的屬性。那么，請(qǐng)簡要

說明：圖像的alt屬性的用法？

請(qǐng)小組代表對(duì)以上問題發(fā)表見解，

教師對(duì)上述問題進(jìn)行解釋：

在瀏覽網(wǎng)頁時(shí)，我們可以發(fā)現(xiàn)由于一些原因圖像可能無法正常顯示，比如圖片加載錯(cuò)

誤，瀏覽器版本過低等。因此為頁面上的圖像加上替換文本是個(gè)很好的習(xí)慣，在圖像

無法顯示時(shí)告訴用戶該圖片的信息，這就需要使用圖像的alt屬性。

，本課時(shí)內(nèi)容學(xué)習(xí)

。分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：

當(dāng)我們打開一個(gè)網(wǎng)站時(shí)，例如傳智播客官網(wǎng)"/"，通過點(diǎn)擊頁

面中的導(dǎo)航或者帶有鏈接地址的文字就可以跳轉(zhuǎn)到不同的頁面，那么如何實(shí)現(xiàn)網(wǎng)站中

的頁面跳轉(zhuǎn)呢？

教師對(duì)上述問題進(jìn)行解釋：

超鏈接雖然在網(wǎng)頁中占有不可替代的地位，在HTML5中創(chuàng)建超鏈接非常簡單，只需用

＜aX/a＞標(biāo)記環(huán)繞需要被鏈接的對(duì)象即可，其基本語法格式如下：

＜ahref="跳轉(zhuǎn)目標(biāo)"target;”目標(biāo)窗口的彈出方式”〉文本或圖像＜/a＞

在上面的語法中，＜a＞標(biāo)記是一個(gè)行內(nèi)標(biāo)記，用于定義超錐接，href和target為其常

用屬性，具體解釋如下：

?href：用于指定鋌接目標(biāo)的url地址，當(dāng)為〈a＞標(biāo)記應(yīng)用href屬性時(shí)，它就具

有了超鏈接的功能。

?target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中

self為默認(rèn)值，意為在原窗口中打開，blank為在新窗口中打開。

?知識(shí)點(diǎn)講解

＞講解“創(chuàng)建超鏈接”

⑴、教師和學(xué)生互動(dòng):教師打開百度新聞網(wǎng)址http:〃news.baidu.com/,點(diǎn)擊

頁面中的導(dǎo)航文字，就可以跳轉(zhuǎn)到相應(yīng)的頁面，這就是通過給文字創(chuàng)建超鏈接來實(shí)現(xiàn)

的。教師組織學(xué)生討論：如何通過超鏈接實(shí)現(xiàn)頁面中的跳轉(zhuǎn)呢？

(2)、教師針對(duì)超鏈接的作用以及基本語法格式進(jìn)行講解，并進(jìn)行演示說明。

(3)、教師展示PPT對(duì)“創(chuàng)建超鏈接”進(jìn)行講解，并使用代碼進(jìn)行實(shí)時(shí)演示。

(4)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

＞講解“錨點(diǎn)鏈接”

(1)、教師和學(xué)生互動(dòng)：如果網(wǎng)頁內(nèi)容較多，頁面過長，瀏覽網(wǎng)頁時(shí)就需要不斷

地拖動(dòng)滾動(dòng)條，來查看所需要的內(nèi)容，這樣效率較低且不方便。那么如何提高信息的

檢索速度呢？HTML5語言提供了一種特殊的鏈接一一錨點(diǎn)鏈接，用戶能夠快速定位到目

標(biāo)內(nèi)容。

(2)、教師針對(duì)“錨點(diǎn)鏈接”的作用及創(chuàng)建方法進(jìn)行講解，并進(jìn)行演示說明。

(3)、教師對(duì)“創(chuàng)建超鏈接”與“錨點(diǎn)鏈接”進(jìn)行對(duì)比分析，并總結(jié)其注意事項(xiàng)。

(4)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

令階段小結(jié)

＞小結(jié)

重點(diǎn)；創(chuàng)建超鏈接、錨點(diǎn)鏈接。

＞答疑

教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

＞鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌

握創(chuàng)建超鏈接、錨點(diǎn)鏈接的方法，并能夠通過創(chuàng)建超鏈接、錨點(diǎn)鏈接來實(shí)現(xiàn)頁面間的

跳轉(zhuǎn)U

＞通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例對(duì)相

關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

第五課時(shí)

（講解制作圖文混排的超鏈接頁面）

＞案例實(shí)現(xiàn)

教師帶領(lǐng)學(xué)生分步驟地進(jìn)行網(wǎng)頁制作，通過分析效果圖、制作頁面、制作頁面鏈

接等步驟完成頁面的制作，并指出其中需要注意的事項(xiàng)。

說明：在網(wǎng)頁制作時(shí)可適時(shí)停下來，讓學(xué)生自行嘗試。小組之間可以協(xié)作討論，教師

巡視，對(duì)疑難問題進(jìn)行解答。

＞通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例

對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。

令布置作業(yè)

＞完成“補(bǔ)充案例”，通過平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。

＞復(fù)習(xí)本課時(shí)的所有知識(shí)點(diǎn)和案例，加強(qiáng)鞏固。

第六課時(shí)

（上機(jī)測試）

教師發(fā)放測試題目及案例素材，學(xué)生進(jìn)行上機(jī)測試。以此檢查學(xué)生對(duì)相關(guān)知識(shí)點(diǎn)

的掌握情況。測試完成后將作品通過平臺(tái)提交給老師。

上機(jī)測試主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在代碼中容易出

錯(cuò)的操作步驟。

（作品點(diǎn)評(píng)）

教師對(duì)學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評(píng)，指出代碼中容易出現(xiàn)bug的地方，

并給與解答，同時(shí)將自己的作品上傳到學(xué)習(xí)通的討論區(qū)。

心得

作業(yè)

備注

XXX學(xué)校

課程名稱Web前端開發(fā)授課時(shí)間第3周

授課章節(jié)第2章HTML基礎(chǔ)

1.掌握結(jié)構(gòu)元素的使用，可以使頁面分區(qū)更明確。

2.理解分組元素的使用，能夠建立簡單的標(biāo)題組。

3.掌握表格元素。

知識(shí)目標(biāo)

教學(xué)目的4.掌握HTML表單元素

5.理解HTML框架元素。

6.了解HTML的預(yù)留字符串

技能目標(biāo)熟練使用常用標(biāo)簽編寫網(wǎng)頁

教學(xué)重點(diǎn)列表元素、表格元素

教學(xué)難點(diǎn)分組元素、表格元素

教學(xué)方法案例講解法，演示法

教具計(jì)算機(jī)，多媒體

教學(xué)過程設(shè)計(jì)

（含時(shí)間分配）

第一課時(shí)

（講解U1元素、01元素、dl元素、列表的嵌套應(yīng)用）

，復(fù)習(xí)上節(jié)課內(nèi)容

對(duì)上節(jié)課的內(nèi)容進(jìn)行復(fù)習(xí)提問

4本課時(shí)內(nèi)容學(xué)習(xí)

e分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論關(guān)于列表的問題，并請(qǐng)小組代表對(duì)以上問題發(fā)表見解。

教師對(duì)上述問題進(jìn)行解釋：

?無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間為

并列關(guān)系，沒有順序級(jí)別之分。如下圖：

?今年清明節(jié)，請(qǐng)幫這100位烈士尋親

?年輕夫妻的絕筆信為誰而寫英雄母親鄧玉芬

■一紙繁花I千年古法造紙做活花茂鄉(xiāng)村振興

-全國公安系統(tǒng)清明主題云詩會(huì)4日全網(wǎng)播出

?綠水青山這樣"變現(xiàn)"

■為子孫后代呵護(hù)美好家園

?正片來了！《暗流涌動(dòng)-中國新強(qiáng)反恐挑戰(zhàn)》播出

?訪楊東嶺革命舊址?洪好黨史放手止紅色玨因代代相傳

?深圳大學(xué)：為雙區(qū)建設(shè)培養(yǎng)高質(zhì)量的創(chuàng)新創(chuàng)業(yè)人才

?黨建引領(lǐng)貴州金沙接續(xù)推進(jìn)鄉(xiāng)村振興

?花茂村：土陶技藝傳承人母先才用土陶守-鄉(xiāng)斡

?傳好脫苴攻堅(jiān)接力棒開啟鄉(xiāng)村振興折征程

?重磅！掌舵長春兩年，王凱回到了家鄉(xiāng)河南

?孫大光破任命為南寧市副市長.代理市長

?有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)會(huì)按照一定的順序排列，例如下圖。

百度熱榜0換一換

1云南新增4例本土確診病例489萬

2新疆反恐紀(jì)錄片:有廳官接觸暴恐頭目471萬

3直播:臺(tái)鐵列車脫軌事故救援現(xiàn)場455萬

4教育部:小學(xué)生每日睡眠應(yīng)達(dá)10小時(shí)439萬

5我國每68名孩子中約有1名患自閉癥424萬

6離開北上廣去農(nóng)村時(shí)409萬

7臺(tái)鐵脫軌列車上多為清明掃墓民眾394萬

8王凱任河南副省長、代理省長381萬

9羅永浩稱6億債務(wù)年底還完36775

10瑞麗急需流調(diào)人員和緬語翻譯354萬

?無序列表使用VU1X/U1〉標(biāo)記定義，<li></li>為具體的列表項(xiàng)。有序列表使用VO1X/O1〉標(biāo)記

定義，為具體的列表項(xiàng)。

令知識(shí)點(diǎn)講解

>講解“Ul元素”

（1）、教師展示PPT對(duì)“無序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說

明。

（2）、教師展示PPT,對(duì)“無序列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼

演示。

（3）、教師指出定義“無序列表”時(shí)需要注意的問題，并給與解答。

（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。

>講解“。1元素”

（1）、教師展示PPT對(duì)“有序列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說明。

（2）、教師展示PPT,對(duì)“有序列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼

演示。

（3）、教師對(duì)比“無序列表”與“有序列表”的顯示效果，分析其區(qū)別與聯(lián)系。

（4）、教師指出定義“有序列表”時(shí)需要注意的問題，并給與解答。

（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。

>講解“dl元素”

（1）、教師展示PPT對(duì)“定義列表”的概念進(jìn)行講解，并列舉網(wǎng)頁中常見的例子進(jìn)行說明。

（2）、教師展示PPT,對(duì)“定義列表的基本語法格式”及常用屬性值進(jìn)行講解，并進(jìn)行代碼

演示V

（3）、教師對(duì)比“定義列表”與“無序列表和有序列表”的顯示效果，分析其區(qū)別與聯(lián)系。

（4）、教師指出定義“定義列表”時(shí)需要注意的問題，并給與解答。

（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答。

?階段小結(jié)

>小結(jié)

重點(diǎn)：3元素、ol元素、dl元素、列表的嵌套應(yīng)用。

>答疑

教師詢問學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。

令鞏固練習(xí)

>鞏固本課時(shí)知識(shí)點(diǎn)

學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)?本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生了解無序列表、有序

列表、定義列表的不同，并能熟練地應(yīng)用ul元素、ol元素、dl元素搭建列表結(jié)構(gòu)以及列表的

嵌套應(yīng)用。

>通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)

教師分發(fā)測試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)

進(jìn)行鞏固。

>使用列表元素制作招聘頁面

第二課時(shí)

（講解表格元素）

，復(fù)習(xí)上節(jié)課內(nèi)容

復(fù)習(xí)上節(jié)課內(nèi)容，請(qǐng)小組代表對(duì)以上問題發(fā)表見解。

答案：

?定義列表常用于對(duì)術(shù)語或名詞進(jìn)行解釋和描述，與無序和有序列表不同，定義列表的列表

項(xiàng)前沒有任何項(xiàng)目符號(hào)。

定義列表使用Vdl>v/dl>、Vdl>v/dt>和Vdd>v/dd>進(jìn)行定義，其中，vdt>v/dt>標(biāo)記用于指定術(shù)語

名詞，vdd></dd>標(biāo)記用于對(duì)■名詞進(jìn)行解釋和描述。一對(duì)可以對(duì)應(yīng)多對(duì)vdd></dd>,即

可以對(duì)一個(gè)名詞進(jìn)行多項(xiàng)解釋。

說明：教師可根據(jù)學(xué)生對(duì)上述問題的回答情況，對(duì)以上問題進(jìn)行簡單講解或直接進(jìn)入本課時(shí)新

內(nèi)容的學(xué)習(xí)。

,本課時(shí)內(nèi)容學(xué)習(xí)

>講解“表格基本結(jié)構(gòu)”

表格由一行或多行單元格組成，應(yīng)用表格可以讓數(shù)據(jù)展現(xiàn)更有條理。例如，要展現(xiàn)一組企業(yè)員

工通訊錄，通訊錄包括員工名稱、電話、中子批件、職務(wù)四項(xiàng)，就可以使用多行四欄的表格來展現(xiàn)

企業(yè)員工通訊錄。HTML表格元索使用table標(biāo)簽，表格元素的所有內(nèi)容都放置在table的起始標(biāo)簽

和結(jié)束標(biāo)簽內(nèi)，表格的行元素使用tr標(biāo)簽，一對(duì)tr標(biāo)簽（標(biāo)簽的起始標(biāo)簽和結(jié)束標(biāo)簽稱為一對(duì)標(biāo)

簽）表示表格的一行。表格的單元格放置在tr標(biāo)簽內(nèi)，單元格又分為表頭（表格的開頭部分）和表

格單元格（表格的主體部分），表頭使用th標(biāo)簽，表格單元格使用td標(biāo)簽。基本表格結(jié)構(gòu)如下。

<table>

<tr>

<th></th>

</tr>

<tr>

<:>表格單元格l</=>

漾格單元格n</t

</tr>

<tr>_

<t>表格單元格l</=>

<,>友格單元格n</td>

</tr>

</tabla>

假如有下面的企業(yè)員工通訊錄（張三，電話，郵件，研發(fā)工程師）、（王二，電話，郵件，研

發(fā)經(jīng)理）、（李四.電話,郵件、研發(fā)丁程師）.企業(yè)員T通訊錄可以使用HTML表格元素來展現(xiàn)c

<h?ad>

企業(yè)員工通訊錄<八131.》

</h?ad>

<body>

<h3>企業(yè)員工通訊錄</hl>

<hr>

<tr>

<th>姓名〃th>

<Ch>電子那件</3>

<訃）職務(wù)（八

</tr>

<tr>

<“>張三<八"

<td>lt;/td>

<td>zhang5an^l63.co<n</td>

研發(fā)工看痛〃td>

</tr>

<td汪二〃td>

<td>16589ei2689</td>

<td>Mdnge?^163.<o?</td>

<td>5ft^S3</td>

</tr>

<tr>

Cd>李四〃*>

<td>1723001906S</td>

<td>lisi^i63.con</td>

<td>祈發(fā)工程師</td>

</tr>

</tabl?>

</boyd>

從瀏覽器顯示效果可以看出，表格為四行四列，第一行為表頭，使用tr標(biāo)簽，tr標(biāo)簽內(nèi)的單元

格使用th標(biāo)簽，標(biāo)簽間的內(nèi)容為黑體字體起到強(qiáng)調(diào)的作用；第二、三、四行為表格主體，也使用

tr標(biāo)簽，tr標(biāo)簽內(nèi)的單元格使用td標(biāo)簽，標(biāo)簽間的內(nèi)容為普通字體。

但顯示的表格有個(gè)缺點(diǎn)，欄與欄之間，行與行之間沒有表格線，整個(gè)表格結(jié)構(gòu)不是很清晰。可

以在table標(biāo)簽內(nèi)添加屬性boder來設(shè)置表格線，border的值為表格線的寬度，單位為百分?jǐn)?shù)或像

素。在前面HTML文檔的table標(biāo)簽添加border屬性，屬性的值為1像素，并預(yù)覽效果。

<tableborder=,,l">

>講解“表格欄間距離（cellspacing）

表格欄間距離是指表格欄與欄之間的距離，table標(biāo)簽的cellspacing屬性用F-設(shè)置表格欄之間

的距離,cellspacing屬性的值可以是百分?jǐn)?shù)或像素。在前面HTML文檔的table標(biāo)簽添加cellspacing

屬性，屬性的值為20像素，并預(yù)覽效果。

>講解“如何設(shè)置表格寬度”

前面的table標(biāo)簽沒有設(shè)置.表格寬度，表格寬度就是表格中每一列寬度的總和，列的寬度由單

元格的內(nèi)容和cellpadding屬性來確定。可以在table標(biāo)簽中添加width屬性來設(shè)置表格的寬度，單

位為百分?jǐn)?shù)或像素。在前面HTML文檔的table標(biāo)簽添加width屬性，屬性的值為1000像素。，

并預(yù)覽效果。

>講解“表格單元格內(nèi)容對(duì)齊屬性”

表格單元格內(nèi)容對(duì)齊屬性分為水平對(duì)齊和垂直對(duì)齊兩種方式。水平對(duì)齊又分為左對(duì)齊、居中對(duì)

齊、右對(duì)齊和兩端對(duì)齊；垂直對(duì)齊乂分為上對(duì)齊、中對(duì)齊、底對(duì)齊。表格單元格內(nèi)容對(duì)齊屬性可以

應(yīng)用于tr標(biāo)簽、th標(biāo)簽和td標(biāo)簽。

水平對(duì)齊屬性為align,常用值為left（左對(duì)齊）、center（居中對(duì)齊）、right（右對(duì)齊）、justify

（兩端對(duì)齊）。

垂直對(duì)齊屬性為valign,常用值為top（上對(duì)齊）、middle（中對(duì)齊）、bottom（底對(duì)齊）。

上圖中的表格改變寬度后，單元格內(nèi)容沒有在水平方向上居中對(duì)齊，在tr標(biāo)簽添加align屬性，值

為center0

在企業(yè)員工通訊錄中的tr標(biāo)簽添加align屬性后，在瀏覽器顯示。

>講解“表格的行合并與欄合并”

前面介紹的表格都是由簡單的行和列組成的，如果要展現(xiàn)一些更雜的表格就難以勝任了。例如

下面的表格：

銷售統(tǒng)計(jì)表

商品名稱用途價(jià)格金欲（元）

34545

辦公

商SB1?3030

合計(jì)75

網(wǎng)頁要展現(xiàn)上述表格就需要用到表格的行合并屬性與欄合并屬性。行合并屬性用于一個(gè)單元格

跨越多行，通常使用在td和th標(biāo)簽中，屬性為rowspan；欄合并屬性用于一個(gè)單元格跨越多欄，

通常使用在td和th標(biāo)簽中，屬性為colspano

>講解“<tbody>、<thead>、<tfoot>w元素

第三課時(shí)

（講解表單元素）

，復(fù)習(xí)上節(jié)課內(nèi)容

在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。

1、下列選項(xiàng)中，屬于input控件的有哪些？（）

A、單行文本輸入框

B、單選按鈕

C、復(fù)選框

D、提交按鈕

答案：ABCD

答案解析：input控件包括單行文本輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕

等。

說明：教師可根據(jù)學(xué)生對(duì)上述問題的回答情況，對(duì)以上問題進(jìn)行簡單講解或直接進(jìn)入

本課時(shí)新內(nèi)容的學(xué)習(xí)。

，本課時(shí)內(nèi)容學(xué)習(xí)

令分組討論

對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：

瀏覽網(wǎng)頁時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉菜單，例如選擇所在的城市、出生年月、

興趣愛好等。那么，如何使用表單元素創(chuàng)建下拉菜單效果呢？

請(qǐng)小組代表對(duì)以上問題發(fā)表見解，

教師對(duì)上述問題進(jìn)行解釋：

在表單中，使用select控件可以定義下拉菜單效果，其中，<selecLX/selecL>標(biāo)記

用于在表單中添加一個(gè)下拉菜單，〈option></option>標(biāo)記嵌套在〈selectX/select>

標(biāo)記中，用于定義下拉菜單中的具體選項(xiàng)，每對(duì)<selectX/select>中至少應(yīng)包含一對(duì)

<option></option>o

令知識(shí)點(diǎn)講解

>講解"textarea元素”

（1）、教師通過PPT對(duì)“textarea元素”定義的多行文本輸入框效果進(jìn)行展示。

Q..2.啦件

義芹9宣roseo積E?XM<D

*?[[<亮旗P**■

評(píng)論I-

評(píng)論的時(shí)候,請(qǐng)建圮守法并汪邑語言文明.多給文檔分享人一些支持〃

g

-皿------------------------------------------------------------------------------------------------------=

（2）、教師對(duì)textarea元素的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。

(3)、教師對(duì)textarea元素的常用屬性進(jìn)行講解，并進(jìn)行代碼演示。

(4)、教師指出應(yīng)用“textarea元素”時(shí)需要注意的問題，并給予解答。

(5)、學(xué)生練習(xí)，教師巡視，對(duì)疑難問題進(jìn)行解答，

＞講解“select元素”

(1)、教師通過PPT對(duì)“select元素”定義的下拉菜單效果進(jìn)行展示。

尹在校區(qū)?所在校區(qū):

卜請(qǐng)選擇-二J

北京

海

梃交|上

州

廣

漢

武

都

成

(2)、教師對(duì)使用select元素定義下拉菜單的基本語法格式進(jìn)行講解，并進(jìn)行代碼

演示。

(3)、教師對(duì)select元素的常用屬性進(jìn)行講解，井進(jìn)行代碼演示。

(4)、教師指出應(yīng)用“select元素”時(shí)需要注意的問題，并給予解答。

(5)、教師對(duì)如何使用Dreamweaver工具生成表單控件進(jìn)行講解，并通過Dreanweaver

工具進(jìn)行演示。

＞講解“input標(biāo)簽屬性”

第四課時(shí)

(講解框架元素、預(yù)留字符)

?框架結(jié)構(gòu)標(biāo)簽(＜frarreset＞)

?框架結(jié)構(gòu)標(biāo)簽(＜frameset＞)定義如何將窗口分割為框架

A每個(gè)frameset定義了一系列行或列

＞rows/columns的值規(guī)定了每行或每列占據(jù)屏幕的面積

?框架標(biāo)簽(Frame)單標(biāo)簽，其屬性見下圖。

注意：不能將＜body＞＜/body＞標(biāo)簽與＜framesetx/franeset＞標(biāo)簽同時(shí)使用！不過，假如你添

加包含一段文本的＜noframes＞標(biāo)簽，就必須將這段文字嵌套「＜bodyx/body＞標(biāo)簽內(nèi)。

Frame對(duì)象的屬性

?使描述

contentDocument行納框架的內(nèi)宙的文檔.

frameBorder設(shè)置或返回是否顯示框架