《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第4課 HTML與HTML5（三）_第1頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第4課 HTML與HTML5（三）_第2頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第4課 HTML與HTML5（三）_第3頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第4課 HTML與HTML5（三）_第4頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第4課 HTML與HTML5（三）_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第4課HTML與HTML5（三）課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：掌握HTML的圖像標(biāo)簽、超鏈接標(biāo)簽素質(zhì)目標(biāo)：掌握HTML的相關(guān)知識，加強(qiáng)學(xué)生的理論基礎(chǔ)，提升學(xué)生的專業(yè)技能教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：HTML圖像標(biāo)簽、HTML超鏈接標(biāo)簽教學(xué)難點(diǎn)：HTML圖像標(biāo)簽、HTML超鏈接標(biāo)簽教學(xué)方法問答法、討論法、講授法、實(shí)踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（25min）→頭腦風(fēng)暴（10min）第2節(jié)課：→傳授新知（32min）→上機(jī)操作（5min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請大家了解HTML圖像標(biāo)簽、HTML超鏈接標(biāo)簽的相關(guān)內(nèi)容。【學(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課程的主要內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（8min）【教師】提出以下問題HTML圖像標(biāo)簽具有什么作用？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（25min）2.6HTML圖像標(biāo)簽2.6.1網(wǎng)頁中的圖像文件類型?【多媒體】組織學(xué)生掃碼播放“HTML圖像標(biāo)簽”視頻（詳見教材），讓學(xué)生對這部分內(nèi)容有一個大致地了解【教師】講解圖像文件的基本類型目前，市場上有很多類型的圖像，而且不同的瀏覽器對不同類型的圖像可能有不同的識別能力。但是，幾乎任何瀏覽器都可以識別PNG、JPG、GIF格式的圖像（后綴名分別為.png、.jpg、.gif）。因此，開發(fā)者一般將圖像處理為這三種類型中的一種。【提示】圖像的使用一定要與網(wǎng)頁的主題相匹配，圖像的色彩要與網(wǎng)頁中文字的顏色相協(xié)調(diào)，這樣才能達(dá)到深化主題且美觀的效果。此外，網(wǎng)頁中可以使用圖像作為頁面的背景。但是，為了保證瀏覽器載入網(wǎng)頁的速度，建議大家盡量避免使用太大的圖像作為網(wǎng)頁背景圖像?！緦W(xué)生】聆聽、記錄、理解2.6.2網(wǎng)頁中的相對地址和絕對地址【教師】講解網(wǎng)頁中的相對地址和絕對地址的定義在網(wǎng)頁中，有多種資源引用到網(wǎng)頁時需要資源地址，如圖像、音樂、網(wǎng)頁、視頻、Flash等。資源地址有兩種，即相對地址和絕對地址。1.相對地址相對地址是指以當(dāng)前網(wǎng)頁文件為起點(diǎn)，通過層級關(guān)系描述資源的位置。它的使用方法如下。（1）如果要引用的資源與網(wǎng)頁文件在同一目錄中，則只需輸入要鏈接資源文件的名稱即可，如“img1.png”。（2）如果要引用的資源位于網(wǎng)頁文件的下一級目錄中，則需要先輸入目錄名，再加上“/”，最后輸入資源文件名即可，如“img/img1.png”。（3）如果要引用的資源位于網(wǎng)頁文件的上一級目錄中，則需要先輸入“../”，再輸入目錄名，最后輸入資源文件名即可，如“../img/img1.png”?！菊n堂互動】?【教師】提問相對地址有什么作用？?【學(xué)生】聆聽、思考、回答相對地址最適合用于引用網(wǎng)站內(nèi)部的資源，即只要資源處于站點(diǎn)文件夾之內(nèi)，相對地址就可以自由地在文件之間構(gòu)建鏈接。利用這種地址形式構(gòu)建鏈接的兩個文件之間的相對關(guān)系不受站點(diǎn)文件夾所處服務(wù)器位置的影響。所以，當(dāng)站點(diǎn)文件夾所在服務(wù)器地址發(fā)生改變時，文件夾的所有內(nèi)部文件地址都不會出現(xiàn)問題。2.絕對地址【課堂互動】?【教師】提問什么是絕對地址？?【學(xué)生】聆聽、思考、回答絕對地址是指帶有盤符或網(wǎng)絡(luò)協(xié)議的完整路徑，使用方法如下。（1）帶有盤符的完整路徑，如“D:/example/img/images/img1.png”表示圖像文件img1.png在本地計(jì)算機(jī)中的絕對位置，以盤符D:/開頭。（2）帶有網(wǎng)絡(luò)協(xié)議的完整路徑，如：“/i/eg_mouse.jpg”表示圖像文件eg_mouse.jpg在網(wǎng)絡(luò)中的絕對位置，以https://協(xié)議開頭。絕對地址適合用于引用網(wǎng)站外部的資源。使用絕對地址定位鏈接資源文件比較清晰。但是，需要輸入的內(nèi)容較多，而且如果資源文件出現(xiàn)移動，就需要重新設(shè)置所有相關(guān)的鏈接。例如，在本地測試網(wǎng)頁時，鏈接全部可用，但是到了網(wǎng)上，鏈接就不可用了。【學(xué)生】聆聽、記錄、理解2.6.3圖像標(biāo)簽<img>【教師】講解網(wǎng)頁中的圖像標(biāo)簽<img>的語法格式和使用方式<img>標(biāo)簽用于定義圖像，可以指定圖像的地址、寬度、高度、邊框和替代文本，其可選擇的屬性有src，用于指定圖像的URL；width，用于指定圖像的寬度；height，用于指定圖像的高度；border，用于指定圖像周圍的邊框；alt，用于指定圖像的替代文本。<img>標(biāo)簽是行標(biāo)簽，其語法格式如下：<imgsrc="圖像文件的地址（相對地址或絕對地址）"width="寬度值"height="高度值"border="邊框值"alt="文本"/>【提示】屬性width、height、border的值是一個數(shù)值，單位默認(rèn)為px（像素），可省略不寫?！臼纠?-6-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="這是一張圖像"/></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“圖像標(biāo)簽及其屬性設(shè)置效果”以及“找不到圖像資源效果”圖片（詳見教材），并講解效果：在頁面主體部分顯示圖像，地址為"img/beijing.jpg"，寬度為400px，高度根據(jù)比例縮放，邊框?yàn)?px，頁面顯示效果如圖2-6-1所示。當(dāng)圖像地址找不到圖像時，則顯示為點(diǎn)位符?！咎崾尽吭诰W(wǎng)頁中插入圖像時，一定要保證所插入圖像位于網(wǎng)站文件夾中，否則一旦移動網(wǎng)站文件位置，圖像就不能正常顯示?！緦W(xué)生】聆聽、記錄、理解2.6.4圖像對齊方式align【教師】講解網(wǎng)頁中的圖像對齊方式align的語法格式和使用方式align屬性用于定義圖像周圍文本與圖像混排時的對齊規(guī)則，其值有top、bottom、right、left、middle。其中，top表示將圖像與頂部對齊；bottom表示將圖像與底部對齊；right表示將圖像對齊到右邊；left表示將圖像對齊到左邊；middle表示將圖像與中央對齊?！臼纠?-6-2】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body>這是圖像<imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="這是一張圖像"align="middle">以及常用屬性</body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“圖像對齊方式屬性設(shè)置效果”圖片（詳見教材），并講解效果：圖像的中央與文本的中央對齊?！緦W(xué)生】聆聽、記錄、理解2.6.5水平間距hspace和垂直間距vspace【教師】講解網(wǎng)頁中的水平間距hspace和垂直間距vspace的語法格式和使用方式hspace和vspace屬性用于定義圖像四周文本與圖像之間的距離。其中，hspace屬性用于定義左右兩側(cè)文字與圖像的間距；vspace屬性用于定義上下兩端文字與圖像的間距。它們的語法格式如下：<imgsrc="圖像文件的地址"hspace="距離值"vspace="距離值"/>【提示】距離值是一個數(shù)值，其單位默認(rèn)為px（像素），可以省略不寫。【示例2-6-3】在【示例2-6-2】的基礎(chǔ)上，編輯HTML文檔<body>標(biāo)簽的內(nèi)容，即在img標(biāo)簽中添加水平間距屬性hspace。代碼如下：<imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="這是一張圖像"align="middle"hspace="30">【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“水平間距屬性設(shè)置效果”圖片（詳見教材），并講解效果：圖像左側(cè)和右側(cè)的文本與圖像間隔30px?！緦W(xué)生】聆聽、記錄、理解通過教師講解、課堂互動、知識拓展、演示操作等方式，使學(xué)生了解HTML圖像標(biāo)簽的語法以及使用，為后邊的學(xué)習(xí)打好基礎(chǔ)頭腦風(fēng)暴（10min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開展討論根據(jù)各隊(duì)伍的網(wǎng)站主題，討論如何使用本節(jié)課中介紹的HTML圖像標(biāo)簽與超鏈接標(biāo)簽編輯圖片與超鏈接?！緦W(xué)生】思考、討論通過頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團(tuán)隊(duì)精神第二節(jié)課問題導(dǎo)入（3min）【教師】提出以下問題大家結(jié)合網(wǎng)頁超鏈接的理解，思考HTML超鏈接標(biāo)簽具有什么功能？【學(xué)生】思考、舉手回答通過提問引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（32min）2.7HTML超鏈接標(biāo)簽【教師】講解超鏈接標(biāo)簽的定義超鏈接全稱超文本鏈接，是HTML的一個強(qiáng)大且有價值的功能。它是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖像，一個電子郵件地址，一個文件，甚至是一個應(yīng)用程序。在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或一個圖像?！ㄔ斠娊滩模緦W(xué)生】聆聽、記錄、理解2.7.1超鏈接標(biāo)簽<a>【教師】講解超鏈接標(biāo)簽<a>標(biāo)簽的基本語法與示例?【多媒體】組織學(xué)生掃碼播放“HTML超鏈接標(biāo)簽”視頻（詳見教材），讓學(xué)生對這部分內(nèi)容有一個大致地了解<a>標(biāo)簽用于定義超鏈接，可以從一張頁面鏈接到另一張頁面，其屬性有href，用于指定鏈接地址，其值是絕對地址或相對地址。該標(biāo)簽是行標(biāo)簽，其語法格式如下：<ahref="鏈接地址">超鏈接內(nèi)容</a>【提示】當(dāng)把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，鼠標(biāo)指針通常會變?yōu)橐恢恍∈??！臼纠?-7-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <ahref="">百度一下</a> <ahref="bigClass.html">站內(nèi)一級列表頁</a></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“超鏈接標(biāo)簽?zāi)J(rèn)效果”圖片（詳見教材），并講解效果：超鏈接文本的格式默認(rèn)為藍(lán)色字體且有下劃線?！緦W(xué)生】聆聽、記錄、理解2.7.2超鏈接屬性target【教師】講解超鏈接屬性target的使用與示例【課堂互動】?【教師】提問HTML中超鏈接屬性target應(yīng)有什么設(shè)置？?【學(xué)生】聆聽、思考、回答target屬性用于定義目標(biāo)文檔在何處顯示，可以是當(dāng)前窗口、新窗口、某浮動窗口等，其取值有_self、_blank、_parent和_top。其中，_self表示在當(dāng)前窗口中打開目標(biāo)文檔；_blank表示在新窗口中打開目標(biāo)文檔；_parent表示將目標(biāo)頁面載入到當(dāng)前框架的父框架窗口中，如果沒有框架，則等同于_self；_top表示將目標(biāo)頁面載入到整個瀏覽器窗口，并刪除所有框架。若超鏈接標(biāo)簽<a>沒有設(shè)置屬性target，則默認(rèn)為_self。【示例2-7-2】在【示例2-7-1】基礎(chǔ)上，編輯HTML文檔<body>標(biāo)簽的內(nèi)容，即為第一個超鏈接標(biāo)簽<a>添加屬性target。代碼如下：<ahref=""target="_blank">百度一下</a><ahref="bigClass.html">站內(nèi)一級列表頁</a>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示效果：單擊鏈接“百度一下”，則百度首頁會在一個新的瀏覽器窗口中打開；單擊鏈接“站內(nèi)一級列表頁”，則bigClass.html頁面會在當(dāng)前瀏覽器窗口中顯示?！緦W(xué)生】聆聽、記錄、理解2.7.3錨點(diǎn)鏈接【教師】講解錨點(diǎn)鏈接的使用與示例【課堂互動】?【教師】提問HTML中錨點(diǎn)鏈接應(yīng)有什么設(shè)置？?【學(xué)生】聆聽、思考、回答錨點(diǎn)鏈接用于實(shí)現(xiàn)在一個頁面中的不同位置之間或不同頁面中的某兩個位置之間進(jìn)行跳轉(zhuǎn)。錨點(diǎn)的設(shè)置同樣使用<a>標(biāo)簽，不過作為錨點(diǎn)的<a>標(biāo)簽不需要href屬性，而是需要用name或id屬性來定義錨點(diǎn)的名稱或標(biāo)記錨點(diǎn)。【提示】錨點(diǎn)又可以理解為書簽，只是這個書簽不會以任何特殊方式顯示，它對瀏覽者是不可見的。要實(shí)現(xiàn)錨點(diǎn)鏈接，首先需要定義一個錨點(diǎn)，然后以此錨點(diǎn)為鏈接目標(biāo)，主要步驟如下。步驟1定義錨點(diǎn)，其語法格式如下：<aname="錨點(diǎn)名稱">錨點(diǎn)位置（可以為空）</a>或者<aid="錨點(diǎn)id值">錨點(diǎn)位置（可以為空）</a>【提示】為了遵行HTML5規(guī)范，建議使用id屬性。步驟2鏈接到錨點(diǎn)，其語法格式如下：<ahref="#錨點(diǎn)名稱/#id值">鏈接載體</a>【示例2-7-3】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <ahref="#shuqian">注意事項(xiàng)</a><br/> <imgsrc="img/beijing.jpg"alt=""><br/> <aid="shuqian">書簽：</a><br/> <p>您可以使用name屬性創(chuàng)建HTML頁面中的書簽。書簽不會以任何特殊方式顯示，它對讀者是不可見的。當(dāng)使用命名錨（namedanchors）時，我們可以創(chuàng)建直接跳至該命名錨（如頁面中某個小節(jié)）的鏈接，這樣瀏覽者就無須不停地滾動頁面來尋找他們需要的信息了。</p></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“單擊錨點(diǎn)鏈接之前效果”以及“單擊錨點(diǎn)鏈接之后效果”圖片（詳見教材），并講解效果：“注意事項(xiàng)”鏈接顯示在頁面最上方。單擊“注意事項(xiàng)”鏈接后，頁面直接跳轉(zhuǎn)到書簽位置。【學(xué)生】聆聽、記錄、理解2.7.4圖像鏈接【教師】講解圖像鏈接的使用與示例在網(wǎng)站中，很多時候?qū)D像作為鏈接載體，其語法格式如下：<ahref="目標(biāo)網(wǎng)頁地址"> <imgsrc="鏈接載體的圖像地址"alt=""/></a>【示例2-7-4】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <ahref=""> <imgsrc="img/logo.gif"alt=""width="300"height="auto"> </a></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示效果：當(dāng)鼠標(biāo)浮于圖像上時，鼠標(biāo)指針變?yōu)槭中?。單擊圖像，網(wǎng)頁可跳轉(zhuǎn)至百度首頁?！咎崾尽恳曈X上，圖像鏈接與普通圖像沒有不同?！緦W(xué)生】聆聽、記錄、理解2.7.5圖像熱區(qū)鏈接【教師】講解圖像熱區(qū)鏈接的使用與示例【課堂互動】?【教師】提問什么是圖像熱區(qū)鏈接？?【學(xué)生】聆聽、思考、回答圖像熱區(qū)鏈接是指在一張圖像上劃出若干個區(qū)域（稱為熱區(qū)），這些區(qū)域可以分別設(shè)置超鏈接，從而鏈接到不同的目標(biāo)位置。需要注意的是，設(shè)置圖像熱區(qū)鏈接不再使用<a>標(biāo)簽，而是使用<area>標(biāo)簽定義圖像映射中的區(qū)域（圖像映射是指帶有可單擊區(qū)域的圖像），并在<area>標(biāo)簽的外層增加<map>標(biāo)簽定義一個客戶端圖像映射。設(shè)置圖像熱區(qū)鏈接的步驟如下。步驟1在圖像文件中設(shè)置映射圖像的名稱，即在添加圖像的<img>標(biāo)簽中使用usemap屬性，添加圖像要引用的映射圖像的名稱，其語法格式如下：<imgsrc="圖像地址"usemap="#映射圖像名稱"/>步驟2定義熱區(qū)圖像和熱區(qū)連接，其語法格式如下：<mapname="映射圖像名稱"> <areashape="熱區(qū)形狀"coords="熱區(qū)坐標(biāo)"href="連接地址"/></map>【高手點(diǎn)撥】shape屬性用于定義區(qū)域的形狀，其值有circle、rect、poly、default（默認(rèn)值）。其中，circle表示圓形；rect表示矩形；poly表示多邊形；default表示整幅圖像。coords屬性用于定義可單擊區(qū)域（對鼠標(biāo)敏感的區(qū)域）的坐標(biāo)?！ㄔ斠娊滩模臼纠?-7-5】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body><imgsrc="img/googlein.jpg"usemap="#map_name"width="400px"/><mapname="map_name"><areashape="circle"coords="200,200,30"href=""alt=""/><areashape="rect"coords="120,120,185,185"href=""alt=""/><areashape="poly"coords="200,260,150,300,250,300"href=""alt=""/></map></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“圖像上的熱點(diǎn)區(qū)域效果”圖片（詳見教材），并講解效果：當(dāng)單擊圖像上的相應(yīng)區(qū)域時，會分別顯示熱區(qū)形狀，且鼠標(biāo)指針變?yōu)槭中?。【學(xué)生】聆聽、記錄、理解2.7.6空鏈接【教師】講解空鏈接的使用與示例所謂空鏈接就是指鼠標(biāo)指向鏈接后，鼠標(biāo)指針變?yōu)槭中危珕螕翩溄雍?，頁面仍然停留在?dāng)前頁面?！菊n堂互動】?【教師】提問空鏈接具有什么作用？?【學(xué)生】聆聽、思考、回答空連接用于設(shè)置暫時還未確定鏈接的目標(biāo)地址，便于后期更新鏈接的目標(biāo)地址。設(shè)置空鏈接的方法有很多，可以將<a>標(biāo)簽的href屬性值設(shè)置為空，也可以僅使用符號#，還可以使用JavaScript的語句，它們的語法格式如下：<ahref=""></a><ahref="#"></a><ahref="javascript:void(0)"></a>【示例2-7-6】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <imgsrc="img/beijing.jpg"/> <ahref="">這是第一個空鏈接</a> <ahref="#">這是第二個空鏈接</a> <ahref="javascript:void(0)">這是第三個空鏈接</a></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示效果：當(dāng)圖像高度超過一屏?xí)r，單擊第一個和第二個空鏈接不會有新頁面出現(xiàn)，但頁面會返回到頂部，但是單擊第三個空連接時，頁面不會發(fā)生任何改變?！緦W(xué)生】聆聽、記錄、理解2.7.7E-mail鏈接【教師】講解E-mail鏈接的使用與示例E-mail鏈接一般用于設(shè)置頁面中的“聯(lián)系我們”等條目，以指向一個電子郵件地址，然后瀏覽器會啟動系統(tǒng)默認(rèn)的郵件程序（如果有的話）。設(shè)置E-mail鏈接的語法格式如下：<ahref="mailto:郵件地址"></a>【示例2-7-7】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <ahref="mailto:123456789@">聯(lián)系站長</a></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“E-mail鏈接效果”圖片（詳見教材），輔助并講解E-mail鏈接效果效果：單擊“聯(lián)系站長”，出現(xiàn)需要使用的應(yīng)用程序?！緦W(xué)生】聆聽、記錄、理解2.7.8JavaScript鏈接【教師】講解JavaScript鏈接的使用與示例JavaScript鏈接用于在瀏覽器窗口中設(shè)置彈窗，從而實(shí)現(xiàn)提示或警告。設(shè)置JavaScript鏈接的語法格式如下：<ahref="javascript:alert('彈窗顯示內(nèi)容');"></a>【示例2-7-8】編輯

溫馨提示

  • 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

提交評論