《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第9課 使用HTML5添加超鏈接_第1頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第9課 使用HTML5添加超鏈接_第2頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第9課 使用HTML5添加超鏈接_第3頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第9課 使用HTML5添加超鏈接_第4頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第9課 使用HTML5添加超鏈接_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第課使用HTML5第課使用HTML5添加超鏈接的基基本本PAGE1293193219321使用HTML5添加超鏈接第課PAGE1393212使用HTML593212使用HTML5添加超鏈接第課PAGE1

課題使用HTML5添加超鏈接課時2課時（90min）教學目標知識技能目標：（1）學習URL的使用（2）掌握在HTML5中添加普通鏈接與內(nèi)容塊鏈接的方法（3）掌握在HTML5中添加圖像鏈接與下載鏈接的方法（4）掌握在HTML5中添加錨點鏈接、電子郵件鏈接和圖像熱點鏈接的方法思政育人目標：通過對HTML5中超鏈接的使用，培養(yǎng)學生的邏輯思維、辯證思維和創(chuàng)新思維能力，引導學生養(yǎng)成獨立思考和深度思考的良好習慣教學重難點教學重點：學習HTML5中超鏈接的使用方法教學難點：在HTML5網(wǎng)頁中添加超鏈接教學方法講授法、啟發(fā)法、問答法、演示法、討論法、練習法教學用具電腦、投影儀、多媒體課件、教材教學設(shè)計第1節(jié)課：知識講解（23min）第2節(jié)課：導入新知（2min）知識講解（23min）

上臺演示（16min）（2min）

作業(yè)布置（2min）教學過程主要教學內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學生】班干部報請假人員及原因培養(yǎng)學生的組織紀律性，掌握學生的出勤情況問題導入

（4min）【教師】提出問題，引出新知識點【學生】思考、發(fā)言【教師】總結(jié)發(fā)言用戶之所以能夠使用電腦或手機穿梭在各個網(wǎng)頁之間，都是通過超鏈接實現(xiàn)的。超鏈接相當于各個網(wǎng)頁之間的橋梁，使用它可以從一個網(wǎng)頁跳到另一個網(wǎng)頁通過問答的方式，讓學生主動思考,如何使用HTML5中的超鏈接，加快對信息的瀏覽知識講解

（23min）【教師】講述URL的使用超鏈接是通過引用目標地址鏈接到某個目標的，這就要用到URL。URL全稱uniformresourcelocator，即統(tǒng)一資源定位器，用于指定資源的地址，一般由3部分組成，分別為通信協(xié)議、存有目標資源的主機域名和目標資源的路徑。通信協(xié)議指明目標資源的類型；主機域名一般用于引用外部網(wǎng)站，如百度的域名為“”；目標資源的路徑就是它的具體位置，可以使用相對路徑或絕對路徑。其中的通信協(xié)議一般有以下幾種。（1）“http://”。用于從服務(wù)器傳輸超文本到本地瀏覽器的超文本傳輸通信協(xié)議。（2）“ftp://”。用于從服務(wù)器復制文件或從本地計算機上傳文件的文件傳輸通信協(xié)議。（3）“maillo:”。表示目標資源是電子郵件。【學生】聆聽、思考【教師】分析教材給出的URL案例/company_profile.php【學生】聆聽、觀察、思考【教師】講解普通鏈接與內(nèi)容塊鏈接1．普通鏈接在HTML5中，使用<a>標簽添加超鏈接，具體格式為：<ahref="目標地址">載體</a>其中，href表示目標資源的引用地址，屬性值為URL或相對路徑。<a>標簽必須設(shè)置href屬性，如果沒有指向的目標資源，可使用“#”作為屬性值，表示指向當前頁面的空鏈接?！窘處煛垦菔尽纠?-1】操作流程，實現(xiàn)圖5-2的效果設(shè)置普通鏈接（部分代碼），頁面效果如圖5-2所示。<ahref="">超鏈接（百度首頁）</a>圖5-2普通鏈接的頁面效果<a>標簽還有一個常用的屬性target，表示打開目標資源的方式，屬性值“_self”是默認值，表示在當前標簽頁中加載目標資源；“_blank”表示在新的標簽頁中加載目標資源?！窘處煛垦菔尽纠?-2】操作流程，實現(xiàn)圖5-3的效果設(shè)置在新的標簽頁中打開的超鏈接（部分代碼），頁面效果如圖5-3所示。<ahref=""target="_blank">超鏈接（百度首頁）</a>圖5-3在新的標簽頁中打開超鏈接的頁面效果2．內(nèi)容塊鏈接<a>標簽中的載體可以為文本、圖像或內(nèi)容塊等，但不能為其他鏈接、音頻、視頻等交互式內(nèi)容。內(nèi)容塊鏈接在移動頁面中應(yīng)用較多，便于觸摸交互?！窘處煛垦菔尽纠?-3】操作流程，實現(xiàn)圖5-4的效果設(shè)置內(nèi)容塊鏈接（部分代碼），頁面效果如圖5-4所示。<ahref=""target="_blank"> <imgsrc="images/p1.jpg"width="200px"/> <p>百度一下，你就知道（百度首頁）</p></a>圖5-4內(nèi)容塊鏈接的頁面效果【學生】聆聽、思考、記錄【教師】講解圖像鏈接與下載鏈接1．圖像鏈接除了鏈接到網(wǎng)頁之外，<a>標簽還可以鏈接到圖像，這種鏈接稱為圖像鏈接，鼠標單擊圖像鏈接后可在瀏覽器中全屏查看所鏈接的圖像文件?！窘處煛慷嗝襟w演示參考案例，運行程序設(shè)置圖像鏈接（部分代碼），頁面效果如圖5-5所示<ahref="images/p2.jpg"> <imgsrc="images/p2.jpg"width="150px"/> <p>查看原圖</p></a>圖5-5圖像鏈接的頁面效果2．下載鏈接除網(wǎng)頁和圖像外，超鏈接還可以鏈接到文檔、郵件地址和應(yīng)用程序等。當鏈接的文件不能被瀏覽器解析時，如壓縮文件，單擊超鏈接后將直接下載鏈接的文件至本地計算機中，這種鏈接就是下載鏈接。對于能夠被瀏覽器解析和識別的文件，如“.jpg”“.png”“.gif”“.txt”等，也可以使用HTML5新增屬性download強制瀏覽器執(zhí)行下載操作。download屬性值可以為下載文件的名稱，也可以省略?！緦W生】觀察、思考、理解【教師】演示【例5-5】操作流程，實現(xiàn)圖5-6的效果設(shè)置下載鏈接，頁面效果如圖5-6所示圖5-6下載鏈接的頁面效果（火狐瀏覽器）【學生】觀察、思考、理解通過講解知識點，讓學生了解HTML5中超鏈接的使用課堂練習

（16min）【教師】布置課堂練習復現(xiàn)圖像的下載鏈接，并將下載內(nèi)容進行另存為操作【教師】分析課堂練習內(nèi)容<ahref="images/p2.jpg"><imgsrc="images/p2.jpg"width="150px"alt="松鼠"/><p>在線預覽</p></a><ahref="images/p2.jpg"download="松鼠">下載圖片</a><ahref="images/test.rar">下載壓縮包</a>【學生】完成課堂練習【教師】公布完成代碼【學生】對照答案，修改內(nèi)容【教師】講解課堂練習利用練習法，強化對HTML5中超鏈接的理解第二節(jié)課新知導入

（2min）【教師】列舉HTML5中其他超鏈接的方式上一節(jié)課，主要講述網(wǎng)頁中最常見的幾種超鏈接方式，像普通鏈接與內(nèi)容塊鏈接等，除了以上幾種常見的超鏈接外，還有很多其他的鏈接方式，比如錨點鏈接、電子郵件鏈接以及圖像熱點鏈接等【學生】聆聽、思考、理解通過列舉HTML5中其他超鏈接的方式，激發(fā)學生對HTML5中超鏈接的興趣知識講解

（23min）【教師】講述錨點鏈接和電子郵件鏈接錨點鏈接錨點鏈接是指向同一頁面或其他頁面中特定元素的鏈接。例如，在篇幅較長的網(wǎng)頁底部設(shè)置一個返回頂部的錨點鏈接，可以通過單擊鏈接快速回到網(wǎng)頁頂部，省去移動滾動條的麻煩。在網(wǎng)頁中添加錨點鏈接需要執(zhí)行兩步操作。（1）創(chuàng)建錨點。錨點就是錨點鏈接所指向的元素位置，為元素設(shè)置了id屬性后，其屬性值即可作為該元素的錨點。（2）添加鏈接。錨點鏈接的href屬性值為“#錨點名”，錨點名即目標元素的id屬性值，如“href="#p5";”表示鏈接至當前頁面中id屬性值為p5的元素。當指向其他頁面中的某個元素時，需要在“#”符號前加上頁面的名稱，如“href="test.html#p1";”?！窘處煛垦菔尽纠?-6】操作流程，實現(xiàn)圖5-7的效果制作分類相冊，頁面效果如圖5-7所示。圖5-7分類相冊的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標簽中輸入以下代碼，構(gòu)建分類相冊的結(jié)構(gòu)。<h1>分類相冊：<ahref="#m1">動物</a>  

<ahref="#m2">植物</a>  <ahref="#m3">風景</a></h1><!--分別設(shè)置圖像類別的錨點鏈接--><h1id="m1">動物</h1> <!--設(shè)置“動物”標題的錨點--><imgsrc="images/p2.jpg"/><imgsrc="images/p3.jpg"/><imgsrc="images/p4.jpg"/><imgsrc="images/p5.jpg"/><imgsrc="images/p6.jpg"/><imgsrc="images/p7.jpg"/><h1id="m2">植物</h1> <!--設(shè)置“植物”標題的錨點--><imgsrc="images/a2.jpg"/><imgsrc="images/a3.jpg"/><imgsrc="images/a4.jpg"/><imgsrc="images/a5.jpg"/><imgsrc="images/a6.jpg"/><imgsrc="images/a7.jpg"/><h1id="m3">風景</h1> <!--設(shè)置“風景”標題的錨點--><imgsrc="images/b2.jpg"/><imgsrc="images/b3.jpg"/><imgsrc="images/b4.jpg"/><imgsrc="images/b5.jpg"/><imgsrc="images/b6.jpg"/><imgsrc="images/b7.jpg"/>（2）在<head>標簽中添加<style>標簽，在其中輸入以下代碼，設(shè)置圖像元素的寬度與高度。img{width:500px;height:300px;}電子郵件鏈接使用電子郵件鏈接可以打開客戶端瀏覽器默認的電子郵件應(yīng)用程序，收件人的郵件地址由電子郵件鏈接指定，無須手動輸入。電子郵件鏈接的href屬性值為“mailto:電子郵件地址?subject=郵件主題”，如“mailto:test@163.com?subject=suggest”，其中，subject表示郵件主題，可以省略。【教師】演示【例5-7】操作流程，實現(xiàn)圖5-8的效果設(shè)置電子郵件鏈接（部分代碼），頁面效果如圖5-8所示。圖5-8電子郵件鏈接的頁面效果【學生】思考、理解【教師】講述圖像熱點鏈接圖像熱點鏈接圖像熱點鏈接是在圖像上創(chuàng)建多個熱點區(qū)域并分別為這些區(qū)域設(shè)置不同的超鏈接，鼠標單擊熱點區(qū)域后可跳轉(zhuǎn)到不同的目標文件。使用這種方法可以為圖像的局部區(qū)域設(shè)置鏈接，或根據(jù)需要為一個圖像設(shè)置多個鏈接。制作圖像熱點鏈接一般需要三步操作（1）在頁面中添加一個圖像文件。需要注意的是，要為<img/>標簽設(shè)置usemap屬性，屬性值為圖像熱點鏈接作用區(qū)域的名稱。（2）在<img/>標簽下方添加<map>標簽，表示添加圖像熱點鏈接的作用區(qū)域，該標簽需設(shè)置id屬性（有的瀏覽器需設(shè)置name屬性，為了兼容各個瀏覽器有時需同時設(shè)置這兩個屬性），屬性值為對應(yīng)<img/>標簽的usemap屬性值。（3）在<map>標簽中添加<area>標簽設(shè)置圖像映射的熱點區(qū)域，該標簽一般包含表示替換文本的alt屬性，表示具體坐標值的coords屬性，表示鏈接地址的href屬性，表示區(qū)域形狀的shape屬性，表示打開超鏈接方式的target屬性。制作圖像熱點鏈接的重點是設(shè)置<area>標簽。直接設(shè)置坐標屬性值不僅耗費時間也不夠精準，此時可以使用DW提供的可視化工具自動生成準確的坐標代碼?！窘處煛垦菔綝W快速制作圖像熱點鏈接在DW中打開本書配套素材“項目5”→“foodmap.html”文檔，該文檔中只有一個圖像，此時頁面效果如圖5-9所示。圖5-9“foodmap.html”頁面效果（1）選中第8行代碼，按“Ctrl+F3”組合鍵打開“屬性”面板（見圖5-10），使用該面板可為圖像添加熱點區(qū)域，并為這些區(qū)域設(shè)置鏈接。圖5-10“屬性”面板（2）在DW界面上方單擊“實時視圖”右側(cè)的實心三角按鈕，在展開的列表中選擇“設(shè)計”選項，切換到設(shè)計模式，如圖5-11所示。圖5-11切換到“設(shè)計”模式（3）單擊“屬性”面板左下角的矩形熱點工具，在圖像上按下鼠標并拖動繪制矩形熱點區(qū)域，繪制完成后代碼自動同步，如圖5-12所示。圖5-12繪制矩形熱點區(qū)域使用同樣方法為左側(cè)的兩道菜繪制兩個矩形熱點區(qū)域。（4）單擊“屬性”面板左下角的圓形熱點工具，在圖像上繪制3個圓形熱點區(qū)域，如圖5-13所示。圖5-13繪制圓形熱點區(qū)域（5）代碼自動生成完畢，其中<area>標簽的href屬性值默認為“#”（空鏈接），如圖5-14所示。圖5-14熱點區(qū)域的代碼（6）根據(jù)images文件夾中的圖像文件及其名稱補全第一個矩形熱點區(qū)域的href屬性值，修改代碼如下。<areashape="rect"coords="318,188,445,356"href="images/豹子金錢蛋.jpg">（7）參照步驟8補全剩余熱點區(qū)域的href屬性值，為各個熱點區(qū)域設(shè)置圖像鏈接，最終頁面效果如圖5-15所示。圖5-15“foodmap.html”的最終頁面效果【學生】思考、理解【教師】詢問學生，是否有不理解的地方【學生】回顧課堂內(nèi)容，提出疑問【教師】回答學生疑問通過講解知識點，讓學生進一步了解HTML5中超鏈接的使用上臺演示

（16min）【教師】隨機抽取小組【學生】做好上臺準備【教師】布置上臺演示內(nèi)容為“網(wǎng)上書店”頁面添加超鏈接本任務(wù)實施制作“網(wǎng)上書店”頁面的“重磅推薦”區(qū)域，并通過為其中的圖像與文本設(shè)置超鏈接，練習超鏈接在實際網(wǎng)頁制作中的應(yīng)用【學生】小組討論，分析題目【教師】參與小組討論，給予提示和幫助在DW中打開本書配套素材“項目5”→“任務(wù)5.1”→“bsonline”→“main.html”文檔，此時“網(wǎng)上書店”頁面的效果如圖5-17所示。圖5-17“網(wǎng)上書店”頁面的效果在<divid="main_bt"></div>標簽中輸入以下代碼，制作“重磅推薦”區(qū)域第一本圖書的簡介內(nèi)容（添加列表及第一個列表項，相關(guān)樣式在樣式表文件中已經(jīng)給出），此時頁面效果如圖5-18所示。<ulid="zbtj"> <li> <imgsrc="images/p1.jpg"/> <p>《活著》</p> <p>余華著</p> <p><span>¥14.00</spa

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論