商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第6課 超鏈接設(shè)置方法_第1頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第6課 超鏈接設(shè)置方法_第2頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第6課 超鏈接設(shè)置方法_第3頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第6課 超鏈接設(shè)置方法_第4頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第6課 超鏈接設(shè)置方法_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第3章 HTML網(wǎng)頁制作技術(shù)3.5超鏈接設(shè)置方法3.5.1超鏈接的概念及類型3.5.2指向網(wǎng)站內(nèi)部的超鏈接3.5.3指向網(wǎng)站外部的超鏈接3.5.4給文本設(shè)置超鏈接3.5.5給圖像設(shè)置超鏈接3.5.6設(shè)置超鏈接的打開窗口3.5.7制作圖文超鏈接網(wǎng)頁綜合范例3.5超鏈接設(shè)置方法網(wǎng)站是由網(wǎng)頁組成的，那么若干網(wǎng)頁如何組織起來，形成具有一定功能的網(wǎng)站呢？超鏈接發(fā)揮了基礎(chǔ)的、不可替代的作用。網(wǎng)頁源文件之間、網(wǎng)頁源文件和其他相關(guān)文件之間，基本都是通過超鏈接有機(jī)聯(lián)系在一起的。也可以說，沒有超鏈接，也就沒有真正意義上的網(wǎng)站。3.5.1超鏈接的概念及類型1．超鏈接的概念超鏈接簡(jiǎn)單來講，就是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的鏈接關(guān)系。超鏈接在本質(zhì)上屬于網(wǎng)頁的重要組成部分，它允許網(wǎng)頁之間或者網(wǎng)頁與站點(diǎn)之間進(jìn)行內(nèi)容鏈接。超鏈接的鏈接目標(biāo)可以是一個(gè)網(wǎng)站、一個(gè)網(wǎng)頁、一段文本、一個(gè)圖片、一段音頻、一段視頻、一個(gè)郵箱地址，甚至是一個(gè)應(yīng)用程序、一個(gè)文件等。當(dāng)瀏覽者單擊已經(jīng)設(shè)置鏈接的文字或圖片后，鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開、運(yùn)行或保存。超鏈接的載體：是指承載超鏈接任務(wù)的載體，可以是文字、圖片、多媒體資料以及設(shè)置的熱點(diǎn)。原則上，網(wǎng)頁上的任何一個(gè)位置均可以設(shè)置超鏈接。屬性值描述hrefURL規(guī)定鏈接指向的目標(biāo)URLdownloadfilename規(guī)定被下載的超鏈接目標(biāo)target_blank_parent_self_topframename規(guī)定在何處打開鏈接的目標(biāo)2．超鏈接的類型超鏈接總體上可分為內(nèi)部鏈接和外部鏈接。內(nèi)部鏈接是指網(wǎng)站內(nèi)部網(wǎng)頁之間、網(wǎng)頁與文件（如圖片、多媒體文件等）之間、一個(gè)網(wǎng)頁的內(nèi)部?jī)?nèi)容之間的鏈接，也可以是空鏈接；外部鏈接是指指向網(wǎng)站外部的跳轉(zhuǎn)鏈接，通常指向一個(gè)外部網(wǎng)站、外部網(wǎng)頁、外部郵箱地址。3．超鏈接的標(biāo)簽及屬性超鏈接的標(biāo)簽為<a>，其常見屬性如下：3.5.2指向網(wǎng)站內(nèi)部的超鏈接1．指向站點(diǎn)內(nèi)部文件的鏈接站點(diǎn)內(nèi)部文件（包括網(wǎng)頁文件、圖片文件等）的鏈接是指在網(wǎng)頁與該網(wǎng)站內(nèi)部文件之間的鏈接關(guān)系。在建立網(wǎng)站內(nèi)部文件的鏈接時(shí)，要明確哪個(gè)頁面是當(dāng)前頁，哪個(gè)頁面是鏈接的目標(biāo)文件。內(nèi)部鏈接一般采用相對(duì)路徑。設(shè)置指向站點(diǎn)內(nèi)部文件的超鏈接，需要使用超鏈接標(biāo)簽<a>及其“href”屬性，設(shè)置方法為<ahref="網(wǎng)頁文件名">鏈接網(wǎng)頁文件的實(shí)例</a>

<ahref="圖像文件名">鏈接圖像文件的實(shí)例</a>

<ahref="其他文件名">鏈接其他文件的實(shí)例</a>

<html><head><title>鏈接內(nèi)部文件</title></head><body><br><ahref="book/books.html">鏈接網(wǎng)頁文件</a><br><ahref="book/book1.jpg">鏈接圖片文件</a><br><ahref="book/pdf1.pdf">鏈接PDF文件</a><br><ahref="book/test.apk">鏈接APK文件</a></body></html>當(dāng)單擊“鏈接網(wǎng)頁文件”的超鏈接后當(dāng)單擊“鏈接圖片文件”的超鏈接后當(dāng)單擊“鏈接PDF/APK文件”的超鏈接后在單擊“鏈接APK文件”后2．指向本頁面中特定部分的鏈接所謂指向網(wǎng)頁的特定部分，就是指鏈接到文檔中一個(gè)預(yù)先定義好的位置。一般用在網(wǎng)頁內(nèi)容較長(zhǎng)、一屏無法全面展示的情景。若實(shí)現(xiàn)此功能，需要在文檔中給相應(yīng)位置的標(biāo)簽（如標(biāo)題標(biāo)簽、文字標(biāo)簽、圖片標(biāo)簽等）增加“id”屬性并賦值，即增加“錨點(diǎn)”，然后建立超鏈接指向該id的屬性值，即可實(shí)現(xiàn)指向該“錨點(diǎn)”的位置。設(shè)置指向本頁中的錨點(diǎn)，需要使用元素標(biāo)簽（如文本標(biāo)簽、標(biāo)題標(biāo)簽、圖像標(biāo)簽等）的“id”屬性，設(shè)置錨點(diǎn)的方法為<標(biāo)簽名稱id="錨點(diǎn)屬性值">文檔錨點(diǎn)實(shí)例</標(biāo)簽>設(shè)置指向錨點(diǎn)的超鏈接，需要使用超鏈接標(biāo)簽的<a>的“href”屬性，用“href”指向錨點(diǎn)，設(shè)置方法為<ahref="#錨點(diǎn)屬性值">指向文檔錨點(diǎn)的超鏈接實(shí)例</a><html><head><title>云之雷科技</title></head><body><imgsrc="sdlogo.png"width="80"height="80"alt="企業(yè)logo"/><fontcolor="blue"face="微軟雅黑"size=12id="top">云之雷科技有限公司</font><hr><fontcolor="black"face="黑體"size=4>筆記本電腦系列</font><p><imgsrc="book/book1.jpg"width="260"height="200"alt="計(jì)算機(jī)——筆記本電腦圖片"/><imgsrc="book/book2.jpg"width="260"height="200"alt="計(jì)算機(jī)——筆記本電腦圖片"/><imgsrc="book/book3.jpg"width="260"height="200"alt="計(jì)算機(jī)——筆記本電腦圖片"/><br><fontface="宋體"size="4">筆記本電腦（Laptop）又被稱為“便攜式電腦，手提電腦、掌上電腦或膝上型電腦”，其最大的特點(diǎn)就是機(jī)身小巧，相比PC攜帶方便，是一種小型、可便于攜帶的個(gè)人電腦，通常重1～3千克。筆記本電腦的發(fā)展趨勢(shì)是體積越來越小，重量越來越輕，而功能卻越發(fā)強(qiáng)大。為了縮小體積，筆記型電腦當(dāng)今采用液晶顯示器（也稱液晶LCD屏）。除了鍵盤以外有些還裝有觸控板（Touchpad）或觸控點(diǎn)（Pointingstick）作為定位設(shè)備（Pointingdevice）。<br><br>筆記本電腦與臺(tái)式機(jī)的主要區(qū)別在于其攜帶方便，對(duì)主板、CPU、內(nèi)存、顯卡、硬盤等的能耗比要求較高。雖然筆記本電腦的機(jī)身十分輕便，但完全不用懷疑其實(shí)用性，在日常操作和基本商務(wù)、娛樂、運(yùn)算操作中，筆記本電腦完全可以勝任。當(dāng)今的筆記本電腦正在根據(jù)用途分化出不同的趨勢(shì)，上網(wǎng)本趨于日常辦公以及電影，商務(wù)本趨于穩(wěn)定低功耗獲得更長(zhǎng)久的續(xù)航時(shí)間，家用本擁有不錯(cuò)的性能和很高的性價(jià)比，游戲本則是專門為了迎合少數(shù)人群外出游戲使用的，具有發(fā)燒級(jí)配置，娛樂體驗(yàn)效果好，當(dāng)然價(jià)格不低，電池續(xù)航時(shí)間也不理想。<br><br>目前，在全球市場(chǎng)上有多種品牌的筆記本電腦，排名前列的有聯(lián)想、華碩、戴爾（DELL）、ThinkPad、惠普（HP）、蘋果（Apple）、宏碁（Acer）、索尼、東芝、三星等。</font></p><hr><fontcolor="black"face="黑體"size=4>臺(tái)式機(jī)系列</font><p><imgsrc="computer1.jpg"width="260"height="200"alt="計(jì)算機(jī)----臺(tái)式機(jī)圖片"/><imgsrc="../computer2.jpg"width="260"height="200"alt="計(jì)算機(jī)----臺(tái)式機(jī)圖片"/><imgsrc="../computer3.jpg"width="260"height="200"alt="計(jì)算機(jī)----臺(tái)式機(jī)圖片"/><br><fontface="宋體"size=4>臺(tái)式計(jì)算機(jī)，相對(duì)于筆記本電腦和上網(wǎng)本來說體積較大，主機(jī)、顯示器等設(shè)備一般都是相對(duì)獨(dú)立的，一般需要放置在電腦桌或者專門的工作臺(tái)上，因此命名為臺(tái)式機(jī)。<br><br>臺(tái)式機(jī)的優(yōu)點(diǎn)就是耐用、性能強(qiáng)，以及價(jià)格實(shí)惠。和筆記本電腦相比相比，在相同價(jià)格的前提下臺(tái)式機(jī)配置更高，散熱性較好。缺點(diǎn)就是：笨重，耗電量大。電腦（Computer）是一種利用電子學(xué)原理根據(jù)一系列指令來對(duì)數(shù)據(jù)進(jìn)行處理的機(jī)器。電腦可以分為兩部分：軟件系統(tǒng)和硬件系統(tǒng)。第一臺(tái)電腦ENIAC于1946年2月14日宣告誕生。</font></p><ahref="#top">返回頂部</a><br><fontcolor="black"face="宋體"size=3>=============云之雷科技有限公司=============</font></body></html>3．指向空鏈接空鏈接是指鏈接對(duì)象為空的鏈接，可用于向頁面中的對(duì)象附加一些行為?？真溄油ǔ２粫?huì)單獨(dú)出現(xiàn)，總是伴隨著附加行為（附加行為通常為腳本程序）同時(shí)出現(xiàn)。當(dāng)單擊該空鏈接后，因?yàn)槭强真溄?，所以網(wǎng)頁沒有指向其他的鏈接目標(biāo)，但是卻啟動(dòng)了關(guān)聯(lián)的腳本程序，以實(shí)現(xiàn)腳本程序里的功能。設(shè)置空鏈接需要用到超鏈接標(biāo)簽<a>的“href”屬性，設(shè)置方法為<ahref="#">空鏈接標(biāo)簽實(shí)例<a>

或者<ahref="javasrcipt:void(0);">空鏈接標(biāo)簽實(shí)例</a>3.5.3指向網(wǎng)站外部的超鏈接1．指向其他網(wǎng)站的超鏈接網(wǎng)站外部的超鏈接，是指跳轉(zhuǎn)到當(dāng)前網(wǎng)站之外，指向其他網(wǎng)站中的頁面的鏈接關(guān)系。這種鏈接的URL地址一般采用絕對(duì)路徑，要有完整的URL地址，包括協(xié)議名、主機(jī)名、文件所在主機(jī)上的存儲(chǔ)路徑及文件名。設(shè)置指向網(wǎng)站外部超鏈接需要使用超鏈接標(biāo)簽<a>及其“href”屬性，設(shè)置方法為<ahref="外部網(wǎng)站域名或者具體網(wǎng)頁實(shí)例">指向網(wǎng)站外部超鏈接實(shí)例<a>

<html><head><title>鏈接外部網(wǎng)站</title></head><body><br><ahref="/">指向人民郵電出版社網(wǎng)站的超鏈接</a><br><ahref="/">指向人郵教育社區(qū)網(wǎng)站的超鏈接</a><br></body></html><html><head><title>鏈接電子郵箱</title></head><body><ahref="mailto:testmail2018@126.com">聯(lián)系郵箱</a></body></html>2．指向電子郵箱的超鏈接設(shè)置電子郵箱超鏈接需要使用超鏈接標(biāo)簽<a>及其“href”屬性，設(shè)置方法為<ahref="mailto:電子郵箱名稱">指向電子郵箱的超鏈接實(shí)例</a>

3.5.4給文本設(shè)置超鏈接給文本設(shè)置超鏈接，就是把文本當(dāng)成超鏈接的載體，形式上是將文本放在超鏈接的開始標(biāo)簽<a>和結(jié)束標(biāo)簽</a>之間。給文本設(shè)置超鏈接需要使用超鏈接標(biāo)簽<a>及其“href”屬性，設(shè)置方法如下：<ahref="鏈接地址">文本超鏈接實(shí)例<a>以前介紹的超鏈接示例中，均是給文本設(shè)置超鏈接。3.5.5給圖像設(shè)置超鏈接給圖像設(shè)置超鏈接，就是把圖像當(dāng)成超鏈接的載體，形式上是將圖像放在超鏈接的開始標(biāo)簽<a>和結(jié)束標(biāo)簽</a>之間。給圖像設(shè)置超鏈接，需要使用超鏈接標(biāo)簽<a>及其“href”屬性，以及圖像標(biāo)簽<img>及其“src”屬性。設(shè)置方法如下：<ahref="鏈接目標(biāo)實(shí)例"><imgsrc="圖像實(shí)例文件名"/></a><html><head><title>給圖像設(shè)置超鏈接</title></head><body><br><ahref="/"><imgsrc="ptpress.png"></a></body></html>值描述_blank在新窗口中打開被鏈接文檔_self默認(rèn)。在相同的框架中打開被鏈接文檔_parent在父框架集中打開被鏈接文檔_top在整個(gè)窗口中打開被鏈接文檔framename在指定的框架中打開被鏈接文檔3.5.6設(shè)置超鏈接的打開窗口超鏈接標(biāo)簽<a>有一個(gè)“target”屬性，這個(gè)屬性是控制超鏈接的打開窗口。target的屬性值及其意義如下：<html><head><title>超鏈接打開窗口</title></head><body><br><ahref="book/books.html"target="_self">在相同窗口打開</a><br><ahref="book/books.html"target="_blank">在新窗口中打開</a><br><ahref="book/books.html"target="_parent">在父窗口中打開</a><br><ahref="book/books.html"target="_top">在整頁窗口中打開</a><br><ahref="book/books.html"target="newframe">在指定框架中打開</a></body></html>1．設(shè)置超鏈接打開窗口設(shè)置超鏈接打開窗口，需要使用超鏈接標(biāo)簽<a>及其“target”屬性，設(shè)置方法為<ahref="屬性值">超鏈接實(shí)例</a><html><head><title>全網(wǎng)設(shè)置超鏈接打開窗口</title><basetarget="_blank"/></head><body><br><ahref="book/books.html">打開books.html</a><br><ahref="/">打開人民郵電出版社網(wǎng)站</a><br><ahref="/">打開人郵學(xué)院網(wǎng)站</a><br><ahref="/">打開人郵教育社區(qū)網(wǎng)站</a></body></html>2．設(shè)置全網(wǎng)默認(rèn)打開窗口設(shè)置全網(wǎng)采用同一種方式打開超鏈接窗口，需要使用基準(zhǔn)網(wǎng)址標(biāo)記標(biāo)簽<base>及其target屬性，并在頭部標(biāo)簽<head>中完成設(shè)置。設(shè)置方法為<basetarget="屬性值"/><base>標(biāo)簽的“target”屬性值與超鏈接標(biāo)簽<a>的“target”的屬性值的概念和作用是相同的。3.5.7制作圖文超鏈接網(wǎng)頁綜合范例我們以設(shè)計(jì)制作“云之雷科技有限公司”網(wǎng)站為樣例，對(duì)公司旗下的3個(gè)筆記本電腦系列、3個(gè)臺(tái)式機(jī)系列進(jìn)行宣傳。同時(shí)，鏈接天貓商城、京東商城和唯品會(huì)網(wǎng)站。為了方便客戶聯(lián)系，設(shè)立了聯(lián)系郵箱。網(wǎng)頁的樣式如圖：版面分析：對(duì)于筆記本電腦系列，需要3個(gè)圖片book1.jpg、book2.jpg、book3.jpg做展示，并設(shè)置超鏈接，對(duì)應(yīng)各自的筆記本電腦介紹文檔book1.html、book2.html、book3.html；對(duì)于臺(tái)式機(jī)系統(tǒng)，需要3個(gè)圖片computer1.jpg、computer2.jpg、computer3.jpg做展示，并設(shè)置超鏈接，對(duì)應(yīng)各自的臺(tái)式機(jī)介紹文檔computer1.html、computer2.html、computer3.html。因?yàn)槿嗣襦]電出版社、人郵學(xué)院、人郵教育社區(qū)是云之雷科技有限公司的合作伙伴，故而建立了指向這3個(gè)網(wǎng)站的超鏈接。最后，向客戶提供聯(lián)系方式，公布了聯(lián)系電話、聯(lián)系郵箱。<html><head><title>云之雷科技</title><basetarget="_blank"/></head><bodybgcolor="#CCCCCC"><imgsrc="sdlogo.png"width="80"height="80"alt="企業(yè)logo"/><fontcolor="blue"face="微軟雅黑"size=6.5>云之雷科技有限公司</font><hr><h3>筆記本電腦系列</h3><ahref="book/book1.html"><imgsrc="book/book1.png"width="230"height="130"alt="計(jì)算機(jī)--筆記本圖片"/></a><ahre

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論