Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)3-圖像和超鏈接課件_第1頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)3-圖像和超鏈接課件_第2頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)3-圖像和超鏈接課件_第3頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)3-圖像和超鏈接課件_第4頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)3-圖像和超鏈接課件_第5頁(yè)
已閱讀5頁(yè)，還剩33頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

任務(wù)3圖像和超鏈接第二單元HTML5語(yǔ)言基礎(chǔ)任務(wù)3圖像和超鏈接第二單元HTML5語(yǔ)言基礎(chǔ)1錨點(diǎn)標(biāo)簽圖像標(biāo)簽絕對(duì)路徑和相對(duì)路徑超鏈接標(biāo)簽掌握學(xué)習(xí)目標(biāo)錨點(diǎn)標(biāo)簽圖像標(biāo)簽絕對(duì)路徑和相對(duì)路徑超鏈接標(biāo)簽掌握學(xué)習(xí)目標(biāo)2網(wǎng)頁(yè)中常用的圖片格式了解:學(xué)習(xí)目標(biāo)網(wǎng)頁(yè)中常用的圖片格式了解:學(xué)習(xí)目標(biāo)3實(shí)戰(zhàn)演練——制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面任務(wù)目標(biāo)4強(qiáng)化訓(xùn)練——制作“文章故事網(wǎng)”頁(yè)面任務(wù)目標(biāo)強(qiáng)化訓(xùn)練——制作“文章故事網(wǎng)”頁(yè)面任務(wù)目標(biāo)51.圖像標(biāo)簽語(yǔ)法格式：<imgsrc="url"alt="some_text">圖像標(biāo)簽的屬性：屬性描述屬性描述src規(guī)定顯示圖像的URL。alt圖像不能顯示時(shí)的替換文本。align規(guī)定如何根據(jù)周圍的文本來(lái)排列圖像。（不推薦使用）border定義圖像周圍的邊框。（不推薦使用）height定義圖像的高度。width設(shè)置圖像的寬度。hspace定義圖像左側(cè)和右側(cè)的空白。（不推薦使用）vspace定義圖像頂部和底部的空白。（不推薦使用）title光標(biāo)停留在圖像上時(shí)，顯示提示文字。知識(shí)準(zhǔn)備1.圖像標(biāo)簽語(yǔ)法格式：<imgsrc="url"alt6示例：在網(wǎng)頁(yè)中插入圖像<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body><center><imgsrc="images/1.gif"alt="女孩"title="女孩"><imgsrc="images/2.gif"width="240"height="320"><imgsrc="images/3.gif"border="1"><imgsrc="images/4.gif"></center></body></html>知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入圖像<!DOCTYPEhtml>知識(shí)準(zhǔn)備72.絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑：指文件或目錄在硬盤上真正的路徑。比如，圖像top.jpg存放在c盤的images文件夾下，那么該圖像的絕對(duì)路徑表示方法為c:\images\top.jpg。相對(duì)路徑：相對(duì)于當(dāng)前文件的路徑。網(wǎng)頁(yè)中的圖片、超鏈接等一般都使用相對(duì)路徑來(lái)表示。知識(shí)準(zhǔn)備2.絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑：指文件或目錄在硬盤上真正的82.絕對(duì)路徑和相對(duì)路徑相對(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中。知識(shí)準(zhǔn)備2.絕對(duì)路徑和相對(duì)路徑相對(duì)路徑常見(jiàn)的表示方法Html文檔的9示例：絕對(duì)路徑和相對(duì)路徑<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body><center><imgsrc="../images/1.gif"title="圖片1"alt="圖片1"><imgsrc="2.gif"title="圖片2"alt="圖片2"width="240"height="320"border="1"><imgsrc="../3.gif"title="圖片3"alt="圖片3"><imgsrc="images/4.gif"alt="圖片4"title="圖片4"></center></body></html>知識(shí)準(zhǔn)備示例：絕對(duì)路徑和相對(duì)路徑<!DOCTYPEhtml>知識(shí)準(zhǔn)103.超鏈接標(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)鏈接知識(shí)準(zhǔn)備3.超鏈接標(biāo)簽語(yǔ)法格式：<ahref="url"tar11示例：在網(wǎng)頁(yè)中插入超鏈接<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body><ahref=""target="_self">百度主頁(yè)，原窗口打開(kāi)</a><br><ahref=""target="_blank">新浪主頁(yè)，新窗口打開(kāi)</a><br><ahref=""title="百度"target="_blank"><imgsrc="images/baidu.png"width="270"height="129"></a></body></html>提示：href屬性的內(nèi)容可以是站點(diǎn)內(nèi)網(wǎng)頁(yè)文件的相對(duì)路徑，也可以是網(wǎng)頁(yè)的網(wǎng)址等。知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入超鏈接<!DOCTYPEhtml>提示：124.錨點(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)名稱"></a>創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱第二步：使用<ahref="#錨點(diǎn)名稱">鏈接文本</a>創(chuàng)建錨點(diǎn)鏈接這樣，鼠標(biāo)點(diǎn)擊鏈接文本，網(wǎng)頁(yè)窗口即可定位到目標(biāo)位置。知識(shí)準(zhǔn)備4.錨點(diǎn)標(biāo)簽錨點(diǎn)鏈接：可以幫助瀏覽者快速定位網(wǎng)頁(yè)內(nèi)的目標(biāo)內(nèi)13示例：在網(wǎng)頁(yè)中插入錨點(diǎn)鏈接（因篇幅有限，僅列出部分代碼和效果截圖）…………<p><aname="menu"></a><ahref="#item1">節(jié)氣謠諺詩(shī)歌</a><br><ahref="#item2">節(jié)氣分類</a><br><ahref="#item3">節(jié)氣的安排及含義</a><br><ahref="#item4">二十四番花信風(fēng)</a><br><ahref="#item5">各地有關(guān)節(jié)氣的諺語(yǔ)</a><br></p>…………<aname="item1">節(jié)氣謠諺詩(shī)歌</a>…………<palign="right"><ahref="#menu">回到菜單</a></p>創(chuàng)建錨點(diǎn)鏈接創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱創(chuàng)建錨點(diǎn)鏈接知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入錨點(diǎn)鏈接（因篇幅有限，僅列出部分代碼和效果14案例描述：設(shè)計(jì)并制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面，單擊index.html頁(yè)面中的圖片時(shí)，跳轉(zhuǎn)顯示page1.html頁(yè)面，網(wǎng)頁(yè)效果如下。制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面index.htmlpage1.htmlpage2.html實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面，單擊index.htm15案例描述：設(shè)計(jì)并制作“文章故事網(wǎng)”頁(yè)面，網(wǎng)頁(yè)效果如下。制作“文章故事網(wǎng)”頁(yè)面強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作“文章故事網(wǎng)”頁(yè)面，網(wǎng)頁(yè)效果如下。制作“1601圖像標(biāo)簽02絕對(duì)路徑和相對(duì)路徑03超鏈接標(biāo)簽04錨點(diǎn)標(biāo)簽任務(wù)小結(jié)01圖像02絕對(duì)路徑和相對(duì)路徑03超鏈接標(biāo)簽04錨點(diǎn)任務(wù)小結(jié)17設(shè)計(jì)并制作旅游景點(diǎn)網(wǎng)頁(yè)面，效果如圖所示。課后實(shí)訓(xùn)設(shè)計(jì)并制作旅游景點(diǎn)網(wǎng)頁(yè)面，效果如圖所示。課后實(shí)訓(xùn)18謝謝觀看謝謝觀看19任務(wù)3圖像和超鏈接第二單元HTML5語(yǔ)言基礎(chǔ)任務(wù)3圖像和超鏈接第二單元HTML5語(yǔ)言基礎(chǔ)20錨點(diǎn)標(biāo)簽圖像標(biāo)簽絕對(duì)路徑和相對(duì)路徑超鏈接標(biāo)簽掌握學(xué)習(xí)目標(biāo)錨點(diǎn)標(biāo)簽圖像標(biāo)簽絕對(duì)路徑和相對(duì)路徑超鏈接標(biāo)簽掌握學(xué)習(xí)目標(biāo)21網(wǎng)頁(yè)中常用的圖片格式了解:學(xué)習(xí)目標(biāo)網(wǎng)頁(yè)中常用的圖片格式了解:學(xué)習(xí)目標(biāo)22實(shí)戰(zhàn)演練——制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作網(wǎng)頁(yè)技術(shù)介紹頁(yè)面任務(wù)目標(biāo)23強(qiáng)化訓(xùn)練——制作“文章故事網(wǎng)”頁(yè)面任務(wù)目標(biāo)強(qiáng)化訓(xùn)練——制作“文章故事網(wǎng)”頁(yè)面任務(wù)目標(biāo)241.圖像標(biāo)簽語(yǔ)法格式：<imgsrc="url"alt="some_text">圖像標(biāo)簽的屬性：屬性描述屬性描述src規(guī)定顯示圖像的URL。alt圖像不能顯示時(shí)的替換文本。align規(guī)定如何根據(jù)周圍的文本來(lái)排列圖像。（不推薦使用）border定義圖像周圍的邊框。（不推薦使用）height定義圖像的高度。width設(shè)置圖像的寬度。hspace定義圖像左側(cè)和右側(cè)的空白。（不推薦使用）vspace定義圖像頂部和底部的空白。（不推薦使用）title光標(biāo)停留在圖像上時(shí)，顯示提示文字。知識(shí)準(zhǔn)備1.圖像標(biāo)簽語(yǔ)法格式：<imgsrc="url"alt25示例：在網(wǎng)頁(yè)中插入圖像<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body><center><imgsrc="images/1.gif"alt="女孩"title="女孩"><imgsrc="images/2.gif"width="240"height="320"><imgsrc="images/3.gif"border="1"><imgsrc="images/4.gif"></center></body></html>知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入圖像<!DOCTYPEhtml>知識(shí)準(zhǔn)備262.絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑：指文件或目錄在硬盤上真正的路徑。比如，圖像top.jpg存放在c盤的images文件夾下，那么該圖像的絕對(duì)路徑表示方法為c:\images\top.jpg。相對(duì)路徑：相對(duì)于當(dāng)前文件的路徑。網(wǎng)頁(yè)中的圖片、超鏈接等一般都使用相對(duì)路徑來(lái)表示。知識(shí)準(zhǔn)備2.絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑：指文件或目錄在硬盤上真正的272.絕對(duì)路徑和相對(duì)路徑相對(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中。知識(shí)準(zhǔn)備2.絕對(duì)路徑和相對(duì)路徑相對(duì)路徑常見(jiàn)的表示方法Html文檔的28示例：絕對(duì)路徑和相對(duì)路徑<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body><center><imgsrc="../images/1.gif"title="圖片1"alt="圖片1"><imgsrc="2.gif"title="圖片2"alt="圖片2"width="240"height="320"border="1"><imgsrc="../3.gif"title="圖片3"alt="圖片3"><imgsrc="images/4.gif"alt="圖片4"title="圖片4"></center></body></html>知識(shí)準(zhǔn)備示例：絕對(duì)路徑和相對(duì)路徑<!DOCTYPEhtml>知識(shí)準(zhǔn)293.超鏈接標(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)鏈接知識(shí)準(zhǔn)備3.超鏈接標(biāo)簽語(yǔ)法格式：<ahref="url"tar30示例：在網(wǎng)頁(yè)中插入超鏈接<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body><ahref=""target="_self">百度主頁(yè)，原窗口打開(kāi)</a><br><ahref=""target="_blank">新浪主頁(yè)，新窗口打開(kāi)</a><br><ahref=""title="百度"target="_blank"><imgsrc="images/baidu.png"width="270"height="129"></a></body></html>提示：href屬性的內(nèi)容可以是站點(diǎn)內(nèi)網(wǎng)頁(yè)文件的相對(duì)路徑，也可以是網(wǎng)頁(yè)的網(wǎng)址等。知識(shí)準(zhǔn)備示例：在網(wǎng)頁(yè)中插入超鏈接<!DOCTYPEhtml>提示：314.錨點(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)名稱"></a>創(chuàng)建目標(biāo)位置的錨點(diǎn)名稱第二步：使用<ahref="#錨點(diǎn)名稱">鏈接文本</a>創(chuàng)建錨點(diǎn)鏈接這樣，鼠標(biāo)點(diǎn)擊鏈接文本，網(wǎng)頁(yè)窗口即可定位到目標(biāo)位置。知識(shí)準(zhǔn)備4.錨點(diǎn)標(biāo)簽錨點(diǎn)鏈接：可以幫助瀏覽者快速定位網(wǎng)頁(yè)內(nèi)的目標(biāo)內(nèi)32示例：在網(wǎng)頁(yè)中插入錨點(diǎn)鏈接（因篇幅有限，僅列出部分代碼和效果截圖）…………<p><aname="menu"></a><ahref="#item1">節(jié)氣謠諺詩(shī)歌</

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論