HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第3章 超鏈接_第1頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第3章 超鏈接_第2頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第3章 超鏈接_第3頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第3章 超鏈接_第4頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第3章 超鏈接_第5頁(yè)
已閱讀5頁(yè)，還剩17頁(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)介

第3章

超鏈接3.1創(chuàng)建超鏈接

3.2錨點(diǎn)3.3圖片的超鏈接

3.4小結(jié)

3.1創(chuàng)建超鏈接3.1.1超鏈接標(biāo)簽

3.1.2鏈接地址

3.1.3打開(kāi)鏈接的方式

3.1.1超鏈接標(biāo)簽超鏈接標(biāo)簽<a><aname="錨名稱"href="url"title="標(biāo)題"target="目標(biāo)">超鏈接文字</a>【示例3-1】創(chuàng)建一個(gè)簡(jiǎn)單的超鏈接，此超鏈接指向一個(gè)網(wǎng)站。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>簡(jiǎn)單的超鏈接</title>5

</head>6

<body>7

<a

href=""title="單擊此處進(jìn)入北京中醫(yī)藥大學(xué)遠(yuǎn)程教育學(xué)院的網(wǎng)站首頁(yè)"target="_blank"name="ibucm">北京中醫(yī)藥大學(xué)遠(yuǎn)程教育學(xué)院</a>8

</body>9

</html>超鏈接由以下5部分組成目標(biāo)地址鏈接文字標(biāo)題目標(biāo)窗口錨3.1.2鏈接地址設(shè)置鏈接地址的語(yǔ)法<ahref="鏈接地址">用來(lái)設(shè)置超鏈接的標(biāo)簽</a>【示例3-2】設(shè)置超鏈接的鏈接地址。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁(yè)面添加超鏈接</title>5

</head>6

<body>7 現(xiàn)在有很多動(dòng)物瀕臨滅絕，因此我們應(yīng)該保護(hù)動(dòng)物，特別是稀有動(dòng)物。<ahref="3-2-1.html">金絲猴</a>就是我國(guó)的一級(jí)保護(hù)動(dòng)物。它屬靈長(zhǎng)目、猴科，背部有金黃色的長(zhǎng)毛，故名“金絲猴”。8

</body>9

</html>3-2-1.html文件中的代碼1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>超鏈接</title>5

</head>6

<body>7

<p>金絲猴是我國(guó)的一級(jí)保護(hù)動(dòng)物。</p>8

<p><img

src="pic01.jpg"height="200px"></p>9

</body>10

</html>3.1.3打開(kāi)鏈接的方式target屬性<ahref="鏈接地址"target="目標(biāo)頁(yè)面的打開(kāi)方式">用來(lái)鏈接的標(biāo)簽</a>在HTML中，超鏈接的target屬性如表所示。屬性值含義屬性值含義_parent在上一級(jí)窗口打開(kāi)（常在框架頁(yè)面中使用）_self在同一窗口打開(kāi)，是默認(rèn)值_blank新建一個(gè)窗口打開(kāi)_top忽略所有的框架結(jié)構(gòu)，在瀏覽器的整個(gè)窗口中打開(kāi)【示例3-3】target屬性的使用。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>設(shè)置目標(biāo)頁(yè)面的打開(kāi)方式</title>5

</head>6

<body>7 現(xiàn)在有很多動(dòng)物瀕臨滅絕，因此我們應(yīng)該保護(hù)動(dòng)物，特別是稀有動(dòng)物。<ahref="3-2-1.html"target="_blank">金絲猴</a>就是我國(guó)的一級(jí)保護(hù)動(dòng)物。它屬靈長(zhǎng)目、猴科，背部有金黃色的長(zhǎng)毛，故名“金絲猴”。8

</body>9

</html>3.2錨點(diǎn)3.2.1創(chuàng)建錨點(diǎn)

3.2.2鏈接到本頁(yè)錨點(diǎn)

3.2.3鏈接到其他網(wǎng)頁(yè)的錨點(diǎn)3.2.1創(chuàng)建錨點(diǎn)<aname="錨點(diǎn)名稱">錨點(diǎn)的鏈接文字</a>3.2.2鏈接到本頁(yè)錨點(diǎn)<ahref="#錨點(diǎn)名稱">錨點(diǎn)的鏈接文字</a>【示例3-4】設(shè)置鏈接到本頁(yè)的錨點(diǎn)。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>命名錨</title>5

</head>6

<body>7

<palign="center">Microsoft軟件最終用戶許可協(xié)議</p>8

<aname="top">目錄</a>：<br/>9

<ahref="#target01">1.通則</a><br/>10

<ahref="#target02">2.許可證的授予</a><br/>11

<ahref="#target03">3.客戶端訪問(wèn)許可證</a><br/>12

<ahref="#target04">4.完整協(xié)議</a><br/>13

<br/>14

MicrosoftWindowsServer2003,StandardEdition<br/>15

MicrosoftWindowsServer2003,EnterpriseEdition<br/>16

<br/>17

<aname="target01">1.通則。</a>本《協(xié)議》是您（個(gè)人或單個(gè)實(shí)體）與MicrosoftCorporation（“Microsoft”）之間達(dá)成的法律協(xié)議?！?lt;br/>18

<ahref="#top">返回頂端</a><br/><br/>19

<aname="target02">2.許可證的授予。</a>如果您遵守本《協(xié)議》的所有條款和條件，則Microsoft授予您以下權(quán)利：<br/>20

<ahref="#top">返回頂端</a><br/><br/>21

<aname="target03">3.客戶端訪問(wèn)許可證（“cal”）。</a>“軟件”授權(quán)模型包含操作系統(tǒng)許可證和增量cal，因此“軟件”總成本隨使用量而增長(zhǎng)。根據(jù)您的個(gè)人需要，您可以使用幾種cal類型和授權(quán)模式。<br/>22

<aname="target04">4．完整協(xié)議；可分割性。</a>……<br/>23

</body>24

</html>3.2.3鏈接到其他網(wǎng)頁(yè)的錨點(diǎn)<a>標(biāo)簽的name屬性<ahref="頁(yè)面地址#錨點(diǎn)名稱">用于鏈接錨點(diǎn)的文字</a>【示例3-5】設(shè)置鏈接到其他網(wǎng)頁(yè)的錨點(diǎn)1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>命名錨</title>5

</head>6

<body>7

《Microsoft軟件最終用戶許可協(xié)議》中有關(guān)客戶端訪問(wèn)許可證的相關(guān)內(nèi)容，請(qǐng)<ahref="【示例3-4】設(shè)置鏈接到本頁(yè)的錨點(diǎn).html"target="_blank">單擊這里</a>查看，也可以<ahref="【示例3-4】設(shè)置鏈接到本頁(yè)的錨點(diǎn).html#target03"target="_blank">單擊這里</a>查看。8

</body>9

</html>3.3圖片的超鏈接3.3.1將整個(gè)圖片設(shè)置為超鏈接

3.3.2設(shè)置圖片熱點(diǎn)區(qū)域

3.3.1將整個(gè)圖片設(shè)置為超鏈接<ahref="鏈接地址"><imgsrc="源文件地址"></a>【示例3-6】將圖片設(shè)置為超鏈接。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>圖片超鏈接</title>5

</head>6

<body>7

<ahref=""title="人郵教育">8

<imgsrc="renyou.gif">9

</a><br/>10

<ahref=""title="百度"target="_blank">11

<imgsrc="baidu.gif">12

</a><br/>13

<ahref=""title="北京中醫(yī)藥大學(xué)遠(yuǎn)程教育學(xué)院"target="_blank">14

<imgsrc="ibucm.gif"><br/>15 北京中醫(yī)藥大學(xué)遠(yuǎn)程教育學(xué)院16

</a><br/>17

</body>18

</html>3.3.2設(shè)置圖片熱點(diǎn)區(qū)域<img>標(biāo)簽的usemap屬性<map>標(biāo)簽<img

src="url"usemap="#map名"><mapname="map名">

<areashap="圖像熱點(diǎn)區(qū)域形狀"coords="熱點(diǎn)區(qū)域坐標(biāo)"href="

溫馨提示

  • 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)論