圖片熱點
規划出圖片上的一個區域,可以做出超鏈接,直接點擊圖片區域就可以完成跳轉的效果。與圖片鏈接不同,熱點是圖片上的某一個區域或多個區域。
我們用魔獸世界圖片來做一個圖片熱點,點擊logo、區域和不同人物會連接到對應種族介紹:
在網頁中打開圖片,指向特定的區域將顯示連接提示,點擊后連接到指定網址
<body>
<table align="center">
<tr>
<td>
<img src="魔獸世界1.jpg" width="900" usemap="wow" />
<map name="wow" >
<area shape="rect" coords="277,18,608,108" href="https://www.wowchina.com/zh-cn/" />
<area shape="poly" coords="816,422,790,441,781,469,767,504,877,508,861,483,844,463,839,438,831,427" href="https://www.wowchina.com/zh-cn/game/races/gnome" target="_blank" title="魔獸世界-侏儒" />
<area shape="poly" coords="786,350,824,300,835,247,864,248,895,256,889,299,894,342,885,369,896,433,891,492,844,436,861,393,863,366,817,354" href="https://www.wowchina.com/zh-cn/game/races/night-elf" target="_blank" title="魔獸世界-暗夜精靈" />
<area shape="poly" coords="864,368,773,343,790,320,730,304,727,338,687,336,664,353,662,368,672,388,665,412,653,449,662,503,763,505,790,429,847,417" href="https://www.wowchina.com/zh-cn/game/races/dwarf" target="_blank" title="魔獸世界-矮人" />
<area shape="poly" coords="639,142,691,165,690,218,718,263,716,337,661,334,595,272,595,250,588,205,608,160" href="#https://www.wowchina.com/zh-cn/game/races/draenei" target="_blank" title="魔獸世界-德萊尼" />
<area shape="poly" coords="491,294,528,285,548,245,592,244,593,274,664,340,662,370,671,387,655,447,662,504,504,506,524,403,498,389,477,353" href="#https://www.wowchina.com/zh-cn/game/races/human" target="_blank" title="魔獸世界-人類" />
<area shape="circle" coords="240,345,235" href="https://www.wowchina.com/zh-cn/game/races" target="_blank" title="魔獸世界種族" />
</map>
</td></tr>
</table>
</body>
一、先引用圖片並設置寬度<img src="" width="" />
二、設置<map>,並name命名
三、在<img>中引用name名 將<img>與<map>聯系起來
四、設置連接區域<area>
1、shape 連接區域形狀 rect矩形 circle圓形 poly多邊形
2、coords 設置連接區域的坐標 矩形為左上角坐標及右下角坐標 圓形為圓點坐標及半徑長度 坐標是圖片的左上角計算
3、href 設置連接網址 _blank 新網頁中打開
網頁內嵌
在一個網頁里,規划處一個區域來展示另一個網頁的內容
我們在上面的網頁基礎上嵌入百度主頁
<tr><td> <iframe src="http://www.baidu.com" width="900" height="400"></iframe> </td></tr>
<iframe></iframe> 為網頁內嵌標簽 設置區域寬與高來指定區域
網頁拼接
在一個網絡頁面內,規划出多個頁面窗口,以表格拼接的形式展現出來
快速切圖
用於做一個簡單的網頁效果圖
步驟一:PS打開一個圖片,選取“切刀”工具,對想要進行超鏈接的區域進行切割處理,可以同時切多處區域
步驟二:“文件”中選擇“存儲為Web所用格式...”,存儲時格式選擇“HTML 和圖像”
步驟三:在DW中打開保存的網頁,並設置每個區域連接的網址,即可完成一個簡單的網頁效果圖