網站鏈接的創建:
超鏈接(jie)(jie)是(shi)一種網(wang)站上常見的對象,它以(yi)特(te)殊編碼的文(wen)本(ben)或圖(tu)形來實現鏈接(jie)(jie)。如果單擊(ji)該鏈接(jie)(jie),則相當于(yu)指示瀏(liu)覽器(qi)移至(zhi)同(tong)一網(wang)站中的某個位置(zhi)、打開(kai)一個新的網(wang)頁(ye)或打開(kai)某一個新的網(wang)站中的網(wang)頁(ye)。
一、網站(zhan)鏈接概念
要正確地創(chuang)建鏈接(jie)(jie),就必須(xu)了解鏈接(jie)(jie)與被鏈接(jie)(jie)文檔之間的路徑,每(mei)一個網頁都有(you)一個唯一的地址,稱為(wei)統(tong)一資源定位符(URL)。網站中的超(chao)鏈接(jie)(jie)按照鏈接(jie)(jie)路徑的不同,可以分為(wei)以下3種。
第 1種是絕對URL的超鏈接(jie)。URL(Uniform Resource Locator)就(jiu)是統一資源定位符,簡單地講就(jiu)是網(wang)絡上(shang)的一個站點或網(wang)站的完整路徑,如“//www.guigusheji.com”。
第2種(zhong)是相對URL的(de)超鏈(lian)接。如(ru)將自(zi)己網(wang)(wang)(wang)站上的(de)某(mou)一(yi)段文字(zi)或某(mou)標題鏈(lian)接到同一(yi)網(wang)(wang)(wang)站的(de)其他網(wang)(wang)(wang)頁上。
第3種稱為(wei)同一(yi)(yi)網站的超鏈接(jie)(jie),這(zhe)就是要(yao)使用(yong)到書簽的超鏈接(jie)(jie),一(yi)(yi)般用(yong)“#”號加上名稱即可(ke)鏈接(jie)(jie)到同一(yi)(yi)頁面的指定地(di)方。
二、課堂案例——圖像熱點鏈接
同(tong)一個圖像(xiang)的(de)(de)(de)不同(tong)部分(fen)可以鏈(lian)(lian)接到不同(tong)的(de)(de)(de)文檔,這就(jiu)(jiu)是熱(re)點(dian)鏈(lian)(lian)接。要使圖像(xiang)特定部分(fen)成為超鏈(lian)(lian)接,就(jiu)(jiu)要在圖像(xiang)中設置熱(re)點(dian),然后(hou)再創建鏈(lian)(lian)接。這樣當(dang)鼠(shu)標指針(zhen)移動到圖像(xiang)熱(re)點(dian)的(de)(de)(de)時(shi)候(hou)就(jiu)(jiu)會變成手的(de)(de)(de)形狀,當(dang)按(an)下鼠(shu)標的(de)(de)(de)時(shi)候(hou),頁(ye)面(mian)(mian)就(jiu)(jiu)會跳轉到或者打開鏈(lian)(lian)接的(de)(de)(de)頁(ye)面(mian)(mian)。
下面創建圖像(xiang)熱(re)區鏈接。
最終案例效果文件(jian)所在位置:最終文件(jian)\CH01\1.7.2\index1.html
1 打開“原始文件\CH01\1.7.2\index.html”。
2 選中圖像images\index18.jpg,在【屬(shu)性】面板(ban)中選擇【矩形(xing)熱點】工(gong)具(ju)
。
提示
在【屬(shu)性(xing)】面板中有3種熱點(dian)工(gong)具(ju),分別是【矩形(xing)熱點(dian)】工(gong)具(ju)、【圓形(xing)熱點(dian)】工(gong)具(ju)和(he)【多邊形(xing)熱點(dian)】工(gong)具(ju),可以根據圖像的形(xing)狀來(lai)選擇(ze)熱點(dian)工(gong)具(ju)。
3 將光標置于圖像上(shang)要創(chuang)建熱點(dian)的(de)部(bu)分,按住(zhu)鼠(shu)標左鍵(jian)拖(tuo)曳,繪制一個矩(ju)形熱點(dian)。在(zai)【屬性】面(mian)板中的(de)【鏈(lian)(lian)接】文本框中輸入(ru)鏈(lian)(lian)接的(de)地址(zhi)shouye。
在熱(re)點的【屬性(xing)】面板中的各(ge)參數設置如下(xia)。
鏈(lian)接:輸(shu)入相(xiang)應的鏈(lian)接地址。
替換:輸入說明(ming)文(wen)字。瀏(liu)覽網頁時,當鼠(shu)標指(zhi)針移動到圖像(xiang)熱點上就會顯示輸入的說明(ming)文(wen)字。
目標(biao):選擇打(da)開瀏(liu)覽器(qi)窗口的(de)方式,不做選擇則默認在瀏(liu)覽器(qi)窗口打(da)開。
4 按(an)照(zhao)步驟2~3的方法繪制其他的熱(re)點并創建鏈(lian)接
。
5 保存(cun)文(wen)檔。按(an)F12鍵在(zai)瀏(liu)覽(lan)器(qi)中瀏(liu)覽(lan)效果。
三(san)、課堂案例——E-mail鏈(lian)接
在網頁上單(dan)擊電子郵件(jian)(jian)鏈接(jie)時,將使計算機上的(de)(de)郵件(jian)(jian)程序打(da)開(kai)一個新(xin)的(de)(de)空(kong)白郵件(jian)(jian)窗口(kou),并(bing)在電子郵件(jian)(jian)消息窗口(kou)中的(de)(de)【收(shou)件(jian)(jian)人】一欄(lan)自動顯示(shi)電子郵件(jian)(jian)鏈接(jie)中指定的(de)(de)地址。
創建電子(zi)郵(you)件超級鏈接的(de)效(xiao)果具(ju)體操(cao)作步驟如下。
最(zui)終案例效果文件所在位置:最(zui)終文件\CH01\1.7.3\index1.html
1 打(da)開(kai)“原始文件\CH01\1.7.3\index.html”
2 將光(guang)標置于要創建電(dian)子郵件鏈(lian)接(jie)的位置,選(xuan)擇(ze)【插入】|【電(dian)子郵件鏈(lian)接(jie)】命(ming)令,彈(dan)出(chu)【電(dian)子郵件鏈(lian)接(jie)】對話(hua)框(kuang),在(zai)對話(hua)框(kuang)中的【文本】文本框(kuang)中輸(shu)入“聯系(xi)我們”,【電(dian)子郵件】文本框(kuang)中輸(shu)入zhu@greatgoal-design.com。
3 單擊【確定】按鈕,創建電子郵件(jian)鏈(lian)接
.
4 保存文檔。按F12鍵在(zai)瀏覽器中瀏覽效果.
提示
創建(jian)電(dian)子郵件(jian)鏈接(jie)時,也可以在【屬性】面板中的【鏈接(jie)】文本(ben)框中輸入(ru)“mailto:郵件(jian)的名稱”,應注意的是輸入(ru)郵件(jian)地址時一定不要省略(lve)“mailto:”。
四、課堂案例——下(xia)載文(wen)件鏈接
如果(guo)超(chao)級鏈(lian)接(jie)指向的(de)不是一個網(wang)頁文件(jian)(jian),而是其他文件(jian)(jian)(如zip、mp3或exe文件(jian)(jian)等(deng)),單擊超(chao)鏈(lian)接(jie)的(de)時候就會下載文件(jian)(jian)。如果(guo)在網(wang)站中提供下載資(zi)料,就需(xu)要為文件(jian)(jian)提供下載鏈(lian)接(jie)。
下(xia)面創建下(xia)載文件超級鏈接(jie)具體操作步驟如下(xia)。
最終案(an)例效果(guo)文(wen)件(jian)所在位置:最終文(wen)件(jian)\CH01\1.7.4\index1.html
1 打(da)開“原始文件\CH01\1.7.4\index.html”,選中文字“更(geng)多”。
2 在(zai)【屬性(xing)】面板中單擊【鏈接(jie)】文本框(kuang)右邊的【瀏(liu)覽文件(jian)】按鈕,彈出(chu)【選擇文件(jian)】對(dui)話(hua)框(kuang)。在(zai)對(dui)話(hua)框(kuang)中選擇要下(xia)載的文件(jian)“產品介紹(shao).rar”。
3 單擊【確定】按鈕,創(chuang)建下載文件(jian)超鏈(lian)接
。
4 保存(cun)文(wen)檔。按F12鍵(jian)在(zai)瀏(liu)覽(lan)器中(zhong)瀏(liu)覽(lan)效果。
五、課堂案例——錨點鏈接(jie)
有時候網頁很(hen)長,為了(le)找到其中的(de)目標,不得不上(shang)下拖曳滾動條將整個文(wen)檔的(de)內容(rong)瀏(liu)覽一遍(bian),這樣就浪費了(le)很(hen)多時間。利用錨點鏈接能夠更精(jing)確(que)地(di)使訪問者快速(su)瀏(liu)覽到選(xuan)定的(de)位(wei)置,加快信息(xi)檢索(suo)速(su)度(du)。
下面創建錨點鏈接具體(ti)操(cao)作步驟如下。
最終案(an)例效果文件所在(zai)位(wei)置:最終文件\CH01\1.7.5\index1.html
1 打(da)開“原始文件(jian)\CH01\1.7.5\index.html”
。
2 將光標(biao)置于要插(cha)(cha)入錨(mao)點的位置,選(xuan)擇【插(cha)(cha)入】|【命(ming)名錨(mao)記(ji)】命(ming)令,彈出(chu)【命(ming)名錨(mao)記(ji)】對(dui)話框。在對(dui)話框中(zhong)的【錨(mao)記(ji)名稱】文本框中(zhong)輸入a。
提示
錨記(ji)名稱只能(neng)包(bao)含小寫字母和數字,且不能(neng)以數字開頭。同一個(ge)網頁中可以有無數個(ge)錨記(ji),但(dan)不能(neng)有相同的(de)錨記(ji)名稱。
3 單擊【確定】按鈕,插入命名錨記。
4 選中文(wen)(wen)字“抗病原(yuan)微生物(wu)類”,在(zai)【屬性】面板中的(de)【鏈接】文(wen)(wen)本框(kuang)中輸入(ru)“#a”
。
5 按照步驟2~4的方法插入(ru)錨記,【錨記名稱】文本框中(zhong)分(fen)別輸入(ru) b、c、d、e,并創建鏈接(jie)。