Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（第2版）（微課版） 教案 第2講次 任務(wù)3 圖像和超鏈接

教案序號(hào)：2授課日期課時(shí)數(shù)4章節(jié)名稱(chēng)任務(wù)3圖像和超鏈接教學(xué)內(nèi)容重點(diǎn)圖像標(biāo)簽、相對(duì)路徑、超鏈接標(biāo)簽、錨點(diǎn)標(biāo)簽難點(diǎn)相對(duì)路徑和結(jié)構(gòu)標(biāo)簽的使用教學(xué)目的與要求1.掌握HTML5的頁(yè)面結(jié)構(gòu)。2.掌握HTML5語(yǔ)言中的標(biāo)簽的使用方法。3.掌握標(biāo)簽中的屬性的使用方法。4.掌握HTML5頁(yè)面文檔的編寫(xiě)方法。教學(xué)方法與手段教師采用任務(wù)驅(qū)動(dòng)法，使用教學(xué)PPT輔助授課。教師操作演示，學(xué)生實(shí)訓(xùn)練習(xí)。學(xué)生課前課后均可通過(guò)“浙江省高等學(xué)校在線開(kāi)放課程共享平臺(tái)”的配套微課學(xué)習(xí)。作業(yè)及思考題完成課堂上未完成的習(xí)題，通過(guò)網(wǎng)絡(luò)平臺(tái)上交作業(yè)，通過(guò)回帖的方式回答課上留下的思考題，并預(yù)習(xí)下一節(jié)內(nèi)容。講授內(nèi)容課堂組織第一學(xué)時(shí)（任務(wù)3圖像和超鏈接3.1圖像標(biāo)簽）首先發(fā)布思考題：網(wǎng)頁(yè)中常用的圖片格式，可在“浙江省高等學(xué)校在線開(kāi)放課程共享平臺(tái)”回帖。實(shí)操任務(wù)目標(biāo)發(fā)布（制作網(wǎng)頁(yè)介紹界面、“文章故事網(wǎng)”頁(yè)面）圖2-圖2-SEQ圖\*ARABIC1index.html頁(yè)面圖2-圖2-SEQ圖\*ARABIC2page1.html頁(yè)面圖2-圖2-SEQ圖\*ARABIC3page2.html頁(yè)面圖2-圖2-SEQ圖\*ARABIC4“文章故事網(wǎng)”界面準(zhǔn)備知識(shí)介紹圖像標(biāo)簽語(yǔ)法格式：<imgsrc="url"alt="some_text">圖像標(biāo)簽的屬性：屬性描述屬性描述src規(guī)定顯示圖像的URL。alt圖像不能顯示時(shí)的替換文本。align規(guī)定如何根據(jù)周?chē)奈谋緛?lái)排列圖像。（不推薦使用）border定義圖像周?chē)倪吙?。（不推薦使用）height定義圖像的高度。width設(shè)置圖像的寬度。hspace定義圖像左側(cè)和右側(cè)的空白。（不推薦使用）vspace定義圖像頂部和底部的空白。（不推薦使用）title光標(biāo)停留在圖像上時(shí)，顯示提示文字。子任務(wù)發(fā)布：在網(wǎng)頁(yè)中插入圖像圖2-圖2-SEQ圖\*ARABIC5子任務(wù)1完成效果圖發(fā)布任務(wù)，學(xué)生能夠有目標(biāo)地進(jìn)行學(xué)習(xí)教師介紹標(biāo)簽類(lèi)型及屬性，學(xué)生實(shí)際操作鞏固標(biāo)簽作用。第二學(xué)時(shí)（任務(wù)3圖像和超鏈接3.2絕對(duì)路徑和相對(duì)路徑、3.3超鏈接標(biāo)簽、3.4錨點(diǎn)鏈接）絕對(duì)路徑和相對(duì)路徑介紹絕對(duì)路徑：指文件或目錄在硬盤(pán)上真正的路徑。比如，圖像top.jpg存放在c盤(pán)的images文件夾下，那么該圖像的絕對(duì)路徑表示方法為c:\images\top.jpg。相對(duì)路徑：相對(duì)于當(dāng)前文件的路徑。網(wǎng)頁(yè)中的圖片、超鏈接等一般都使用相對(duì)路徑來(lái)表示。相對(duì)路徑常見(jiàn)的表示方法Html文檔的位置圖像的位置相對(duì)路徑情形說(shuō)明c:\democ:\demo<imgsrc="top.jpg">圖文均在同一目錄c:\democ:\demo\images<imgsrc="images/top.jpg">圖在網(wǎng)頁(yè)下一層目錄c:\democ:\<imgsrc="../top.jpg">圖在網(wǎng)頁(yè)上一層c:\democ:\images<imgsrc="../images/top.jpg">圖文在同一層但不同目錄提示：“../”指回到上一層目錄，“images/”指進(jìn)入下一層目錄images，“../images/”指回到上一層目錄，然后再進(jìn)入目錄images中.子任務(wù)發(fā)布：使用不同路徑進(jìn)行網(wǎng)頁(yè)圖像排列圖2-圖2-SEQ圖\*ARABIC6站點(diǎn)中各文件的位置超鏈接標(biāo)簽語(yǔ)法格式：<ahref="url"target="目標(biāo)窗口的彈出方式">鏈接文本</a>href屬性：描述鏈接的地址target屬性：描述鏈接頁(yè)面的打開(kāi)方式_self：默認(rèn)值，表示在原網(wǎng)頁(yè)窗口中打開(kāi)鏈接_blank：在新窗口中打開(kāi)鏈接子任務(wù)發(fā)布：在網(wǎng)頁(yè)中插入超鏈接圖2-圖2-SEQ圖\*ARABIC7在網(wǎng)頁(yè)中插入超鏈接提示：href屬性的內(nèi)容可以是站點(diǎn)內(nèi)網(wǎng)頁(yè)文件的相對(duì)路徑，也可以是網(wǎng)頁(yè)的網(wǎng)址等。錨點(diǎn)標(biāo)簽錨點(diǎn)鏈接可以幫助瀏覽者快速定位網(wǎng)頁(yè)內(nèi)的目標(biāo)內(nèi)容，實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)的鏈接跳轉(zhuǎn)。創(chuàng)建方法第一步：使用<aname="錨點(diǎn)名稱(chēng)"></a>創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱(chēng)第二步：使用<ahref="#錨點(diǎn)名稱(chēng)">鏈接文本</a>創(chuàng)建錨點(diǎn)鏈接這樣，鼠標(biāo)點(diǎn)擊鏈接文本，網(wǎng)頁(yè)窗口即可定位到目標(biāo)位置。發(fā)布子任務(wù)：在網(wǎng)頁(yè)中插入錨點(diǎn)鏈接圖2-SEQ圖\*ARABIC8在網(wǎng)頁(yè)中插入錨點(diǎn)鏈接第三學(xué)時(shí)（3.2實(shí)戰(zhàn)演練——制作“網(wǎng)頁(yè)技術(shù)介紹”網(wǎng)頁(yè)）實(shí)訓(xùn)操作：設(shè)計(jì)并制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面，單擊index.html頁(yè)面中的圖片時(shí)，跳轉(zhuǎn)顯示page1.html頁(yè)面，網(wǎng)頁(yè)效果如下效果如圖2-9、2-10、2-11所示。圖2-圖2-SEQ圖\*ARABIC9index.html頁(yè)面圖2-SEQ圖\*ARABIC10page1.html頁(yè)面圖2-SEQ圖\*ARABIC圖2-SEQ圖\*ARABIC11page2.html頁(yè)面第四學(xué)時(shí)（3.3強(qiáng)化訓(xùn)練——制作“文章故事網(wǎng)”頁(yè)面）一、實(shí)訓(xùn)操作：設(shè)計(jì)并制作“文章故事網(wǎng)”頁(yè)面，網(wǎng)頁(yè)效果如圖2-12所示。圖2-SEQ圖\*ARABIC12“