版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
第7章
超鏈接與內(nèi)聯(lián)框架目錄創(chuàng)建超鏈接01超鏈接類型02超鏈接屬性設(shè)置03內(nèi)聯(lián)框架設(shè)置047.1創(chuàng)建超鏈接7.1.1超鏈接標簽和屬性建立超鏈接的HTML元素是<a></a>,它可以指向網(wǎng)絡(luò)上的任何資源：一個html頁面，一副圖像、一個聲音或者視頻文件。基本格式為：<ahref=””title=””target=””>超鏈接內(nèi)容</a><a>表示鏈接開始，</a>表示鏈接結(jié)束。href屬性表示鏈接的目標地址，可以鏈接到網(wǎng)頁或者其他文件地址，既可以是絕對地址，也可以是相對地址。title屬性用于顯示指向鏈接時的提示信息。7.1創(chuàng)建超鏈接target屬性用于指定打開目標鏈接的窗口，默認為原窗口，其主要屬性值如下：target=“_self”,在被點擊的同一個框架或窗口中顯示目標文檔（默認）。target=“_blank”,在一個新窗口中載入目標文檔。target=“_parent”，在父框架或父窗口中載入目標文檔。target=“_top”，在窗口主體中載入目標文檔。其中，_self，_parent，_top這三個值一般與iframe一起使用。7.1.2超鏈接路徑在建立超鏈接時，屬性href指定了要鏈接到的目標地址，這個目標地址稱為超鏈接路徑。常見的超鏈接路徑表示方法有三種：絕對路徑絕對路徑是指包括服務(wù)器協(xié)議在內(nèi)的完全路徑，必須使用絕對路徑才能鏈接到其他服務(wù)器上的文檔。例如：/zfxxgk/gkzd/202006/t20200601_1702222.html外部鏈接一般使用絕對路徑表示。7.1.2超鏈接路徑文檔相對路徑的是以當前網(wǎng)頁所在文件夾為基礎(chǔ)來計算的路徑。文檔相對路徑對于大多數(shù)web站點的本地鏈接來說，是最適用的路徑。文檔相對路徑需要保證鏈接對象和當前文檔的相對位置不發(fā)生變化。根路徑：根路徑表示所有路徑從本地站點這個根目錄開始算起。例如當前站點（根目錄）為d:\web1,則d:\web1\a.html可以直接寫成/a.html。7.2超鏈接對象超鏈接對象主要包括書簽（命名錨記）鏈接，圖像熱點鏈接、電子郵件鏈接等。7.2.1書簽鏈接（命名錨記鏈接）書簽鏈接也成為命名錨記鏈接，對于一個長html文檔來說，如果要馬上定位到一個具體的位置，可以在這個位置插入一個html頁面的書簽，之后通過超鏈接可以直接跳轉(zhuǎn)到這個位置，這樣的超鏈接稱為書簽鏈接。（1）首先為目標建立一個書簽<aid="書簽名字"></a>（2）插入超鏈接，鏈接到該位置。<ahref="#書簽名字">鏈接標題</a>圖片的熱點可以為一副圖片的多個區(qū)域設(shè)置不同的超鏈接。如中國地圖中，每個省區(qū)的區(qū)域分界線是沒有規(guī)則的，可以使用圖片熱點，點擊每個省區(qū)的熱點，就可以鏈接到相應的區(qū)域從而起到圖片導航的作用。7.2.2圖片熱點鏈接建立圖片熱點鏈接的操作步驟如下：1.新建頁面，在頁面中插入標題和圖片。如圖7-7所示：2.點擊圖片，在屬性面板顯示圖片屬性，在左下方地圖處，選擇繪制熱點的形狀，矩形、圓形或者是多邊形：7.2.2圖片熱點鏈接3.點擊矩形按鈕，將鼠標移動到圖片上，此時鼠標就變成十字，在需要加鏈接的地方即圖片左側(cè)畫一個方塊。添加熱點后的圖片區(qū)域會出現(xiàn)一個淺藍色蒙版，意味著該區(qū)域已經(jīng)添加了熱點。4.給熱點添加鏈接：熱點區(qū)域畫好后，下面的屬性面板就會變成該熱點區(qū)域的屬性，在屬性的鏈接右邊，選擇超鏈接的對象為介紹小狗的頁面”dog.html”。7.2.2圖片熱點鏈接7.2.2圖片熱點鏈接插入圖片及熱點設(shè)置代碼如下：<table><tr><tdalign="center"><imgsrc="img/xiaolan.jpg"usemap="#Map"/></td></tr></table><mapname="Map"id="Map">
<areashape="rect"coords="8,8,284,394"href="lan.html"/>
<areashape="rect"coords="290,10,504,395"href="kenan.html"/></map>7.2.2圖片熱點鏈接<area>標簽定義圖像映射中的區(qū)域，其主要屬性為：（1）shape規(guī)定區(qū)域的形狀，分別有圓形(cir或circle)、多邊形(poly或polygon)、矩形(rect或rectangle)（2）coords規(guī)定區(qū)域的x和y坐標值，coords屬性與shape屬性配合使用，來規(guī)定區(qū)域的尺寸、形狀和位置。shape的類型主要包括以下幾類：矩形：shape="rect"
coords="x1,y1,x2,y2",x1,y1定義矩形左上角的坐標，x2,y2定義矩形右下角的坐標。圓形：shape="circle",coords="x,y,r"，其中x,y表示圓心坐標，r為圓的半徑長度。多邊形：shape="ploygon"，coords="x1,y1,x2,y2,x3,y3..."，每一對x,y定義多邊形的一個頂點。7.3超鏈接屬性超鏈接是跳轉(zhuǎn)到另一個頁面的入口，當把鼠標移動到超鏈接上，會有顏色或者樣式的改變，可以使用css屬性樣式重新設(shè)置超鏈接的顏色。比如更改超鏈接的默認顏色，更改當鼠標移動到超鏈接上的顏色，點擊鼠標跳轉(zhuǎn)超鏈接的顏色等等，具體超鏈接的樣式主要分為以下幾種：a:link，定義正常鏈接的樣式；a:visited，定義已訪問過鏈接的樣式；a:hover，定義鼠標懸浮在鏈接上時的樣式；a:active，定義鼠標點擊鏈接時的樣式。7.4.1超鏈接動態(tài)按鈕制作下面的例子實現(xiàn)了超鏈接動態(tài)按鈕的制作，當鼠標放置在按鈕上時，按鈕會顯示凹陷效果，單擊后跳轉(zhuǎn)到相應的頁面。按鈕的凹凸效果，通過邊框線、背景、文字位置的改變來實現(xiàn)。1.新建一個頁面，命名為index.html。2.在頁面中輸入4個文本內(nèi)容，并設(shè)置超鏈接，代碼如下：<body><ahref="shouye.html">首頁</a><ahref="jianjie.html">簡介</a><ahref="xiangce.html">相冊</a><ahref="wenda.html">問答</a></body>7.4超鏈接動態(tài)效果設(shè)置7.4.1超鏈接動態(tài)效果設(shè)置3.在<head>區(qū)，建立<styletype="text/css"></style>，在<style></sytle>區(qū)域，設(shè)置頁面背景顏色為灰色，同時設(shè)置超鏈接a的基礎(chǔ)樣式：body{background-color:#AAA;}a{
/*統(tǒng)一設(shè)置超鏈接基本樣式*/font-family:Arial;font-size:.8em;text-align:center;margin:3px;}7.4.1超鏈接動態(tài)效果設(shè)置4.設(shè)置正常超鏈接、已訪問超鏈接狀態(tài)的樣式：a:link,a:visited{
color:#A62020;padding:4px10px4px10px;background-color:#DDD;text-decoration:none;border-top:1pxsolid#EEEEEE;
/*上邊框和左邊框深灰*/border-left:1pxsolid#EEEEEE;
border-bottom:1pxsolid#686868;
/*右邊框和下邊框灰白*/border-right:1pxsolid#686868;}7.4.1超鏈接動態(tài)效果設(shè)置5.設(shè)置鼠標經(jīng)過時的超鏈接樣式：a:hover{
color:#821818;
/*改變文字顏色*/padding:5px8px3px12px;
/*改變文字位置*/background-color:#CCC;
/*改變背景色*/border-top:1pxsolid#686868;
/*邊框變換，實現(xiàn)按下后“凹進去”的效果*/border-left:1pxsolid#686868;border-bottom:1pxsolid#EEEEEE;border-right:1pxsolid#EEEEEE;}在本例中，當鼠標經(jīng)過時，文字顏色較原來變深，同時，文字更靠右下，邊框變化了顏色，整體效果為當鼠標經(jīng)過時，按鈕凹下去了，有了動態(tài)的“按下去”的效果。
下面的例子實現(xiàn)了超鏈接圖片的特效。圖7-12為初始三幅圖形，當鼠標位于圖片上時，顯示紅色相框，如圖7-13所示，單擊該圖片跳轉(zhuǎn)到大圖顯示，如圖7-14所示。7.4.2超鏈接圖片效果7.4.2超鏈接圖片效果首先在網(wǎng)頁中，插入三幅圖片，并且設(shè)置超鏈接，代碼如下：<body><ahref="Images/002.jpg"><imgsrc="Images/s002.jpg"/></a><ahref="Images/004.jpg"><imgsrc="Images/s004.jpg"/></a><ahref="Images/005.jpg"><imgsrc="Images/s005.jpg"/></a></body>7.4.2超鏈接圖片效果接下來設(shè)置超鏈接的樣式，從效果圖可以看到，每個超鏈接包含的圖片外面都有一個白色的相框，這個相框用的是一個白色中間帶邊框的背景圖。樣式設(shè)置如下：a{display:block;/*超鏈接定義為塊級元素*/padding:34px14px36px11px;/*設(shè)置超鏈接里面圖片的位置*/background:url(Images/imgbg1.jpg)
norepeat;float:left;/*設(shè)置圖片并排放置*/}7.4.2超鏈接圖片效果接下來設(shè)置圖片的樣式，主要設(shè)置圖片的寬度和高度，以及邊距。img{border:none;
margin:0px;height:90px;width:135px;}最后設(shè)置鼠標懸停的效果，更改背景圖片即可。a:hover{background:url(Images/imgbg2.jpg)no-repeat;}7.5內(nèi)聯(lián)框架內(nèi)聯(lián)框架用于向當前頁面中引入一個其他頁面，通過使用iframe框架,我們可以在同一個瀏覽器窗口中顯示不止一個頁面。<iframesrc=””name=”163”width=”60%”height=”800px”frameborder=”1”></iframe>其中主要的屬性說明如下：src:用來指定要引入的網(wǎng)頁的路徑name:用來定義內(nèi)聯(lián)框架的名字width：用來定義內(nèi)聯(lián)框架的寬度height：用來定義內(nèi)聯(lián)框架的高度7.5內(nèi)聯(lián)框架noresize:用來規(guī)定用戶無法調(diào)整邊框的大小frameborder:用來規(guī)定內(nèi)聯(lián)框架的邊框.1表示顯示邊框;0表示不顯示邊框scolling:是否顯示滾動條marginheight：定義iframe頂部和底部的邊距marginwidth：定義iframe左側(cè)和右側(cè)的邊距內(nèi)聯(lián)框架例子<body>
<table
border="1"align="center"
frame="box"rules="rows">
<tr>
<tdcolspan="2"align="center"class="biaoti">新聞匯總站</td>
</tr>
<tr>
<td>
<p><ahref="main.html"target="ifs">主頁</a></p>
<p><ahref=""target="ifs">新浪新聞</a></p>
<p><ahref=""target="ifs">網(wǎng)易新聞</a></p>
</t
溫馨提示
- 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. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025-2030年中國串串香行業(yè)營銷創(chuàng)新戰(zhàn)略制定與實施研究報告
- 2025-2030年中國智能公交行業(yè)開拓第二增長曲線戰(zhàn)略制定與實施研究報告
- 2025-2030年中國螢石行業(yè)資本規(guī)劃與股權(quán)融資戰(zhàn)略制定與實施研究報告
- 2025-2030年中國XRF儀器行業(yè)全國市場開拓戰(zhàn)略制定與實施研究報告
- 化學品 快速雄激素干擾活性報告試驗 征求意見稿
- 安徽省房屋建筑安徽省工程建筑信息模型（BIM）審查數(shù)據(jù)標準（2025版）
- 2025年鋁制桌椅項目可行性研究報告
- 燒烤排煙知識培訓課件
- 實驗學校上學期工作參考計劃
- 防詐騙安全知識培訓課件
- 2024年股東股權(quán)繼承轉(zhuǎn)讓協(xié)議3篇
- 2025年中央歌劇院畢業(yè)生公開招聘11人歷年高頻重點提升（共500題）附帶答案詳解
- 北京市高校課件 開天辟地的大事變 中國近代史綱要 教學課件
- 監(jiān)事會年度工作計劃
- 2024中國近海生態(tài)分區(qū)
- 山東省濟南市2023-2024學年高一上學期1月期末考試化學試題（解析版）
- 北師大版五年級數(shù)學下冊第3單元第1課時分數(shù)乘法（一）課件
- 2024-2030年中國汽車保險杠行業(yè)市場發(fā)展現(xiàn)狀及前景趨勢分析報告
- 智研咨詢發(fā)布：中國種豬行業(yè)市場現(xiàn)狀、發(fā)展概況、未來前景分析報告
- 六年級上冊分數(shù)四則混合運算100題及答案
- 2024年認證行業(yè)法律法規(guī)及認證基礎(chǔ)知識
評論
0/150
提交評論