加入超連結(jié)重點課件

第6章加入超連結(jié)著作權(quán)所有?旗標出版股份有限公司本章提要規(guī)劃超連結(jié)加入網(wǎng)站內(nèi)部的超連結(jié)加入網(wǎng)站外部的超連結(jié)使用書籤啟用超連結(jié)強化效果製作影像地圖管理超連結(jié)規(guī)劃超連結(jié)使用超連結(jié)的好處規(guī)劃超連結(jié)超連結(jié)的形式與目標使用超連結(jié)的好處超連結(jié)最大的好處就是「資源共享」：使用超連結(jié)的好處超連結(jié)還可擺脫「循序閱讀」的模式,將長篇大論分別放置不同網(wǎng)頁,讓瀏覽者自行選擇連結(jié)閱讀；或者對於網(wǎng)頁中提到的艱澀詞句,另寫解釋名詞的網(wǎng)頁,讓有疑惑的瀏覽者點選超連結(jié)查詢,便無需於文中插入解釋破壞了文章的完整性。使用超連結(jié)的好處規(guī)劃超連結(jié)

規(guī)劃網(wǎng)站的超連結(jié)運用導覽模式建立網(wǎng)站架構(gòu)的同時,也規(guī)劃了超連結(jié)。以本書的範例網(wǎng)站而言,首頁要能連結(jié)到網(wǎng)站內(nèi)的各個網(wǎng)頁,而網(wǎng)頁間也要能相互連結(jié)?！妇幮藜记伞咕W(wǎng)頁還會連結(jié)到「染髮效果」、「黑白/彩色照」...等網(wǎng)頁,一長串的連結(jié)下來,惟有透過事先的規(guī)劃才不會使網(wǎng)站組織雜亂無章。規(guī)劃網(wǎng)站的超連結(jié)在「導覽」模式建立網(wǎng)站架構(gòu)的好處如果你已經(jīng)依第3章的方法建立了網(wǎng)站架構(gòu),即可依第13章介紹的連結(jié)列功能自動加入各個網(wǎng)頁間的連結(jié),節(jié)省不少規(guī)劃的工作哦！如果沒有用導覽模式來建立網(wǎng)站架構(gòu),那麼就得在每個網(wǎng)頁中手動加入超連結(jié),否則網(wǎng)頁間是沒有橋樑可互通的。規(guī)劃外部超連結(jié)除了規(guī)劃好網(wǎng)站內(nèi)部連結(jié)的網(wǎng)頁,當然還要能連到外面的花花世界,否則就失去Internet資源共享的意義了。關(guān)於外部超連結(jié)的規(guī)劃,只要把自己喜歡、與網(wǎng)站主題相關(guān)的連結(jié)放進來就行了,例如網(wǎng)站的主題是「數(shù)位相片編修」,就可以多介紹幾個相關(guān)資訊的網(wǎng)站,像是國內(nèi)、外知名的攝影、數(shù)位相機討論網(wǎng)站。超連結(jié)的形式與目標

超連結(jié)的形式被加上連結(jié)的文字,預設(shè)下方會出現(xiàn)一條底線,並以藍色字體來表示,讓人一眼就知道哪些文字具有超連結(jié)功能。圖片也可以加入超連結(jié),

瀏覽者只要將滑鼠移到

圖片上,若變成了手指形

狀,就表示這張圖片已

加入超連結(jié)：超連結(jié)的目標網(wǎng)站內(nèi)部的超連結(jié)：指的是連結(jié)網(wǎng)站資料夾內(nèi)的其它網(wǎng)頁、檔案或是以書籤標註的位置。網(wǎng)站外部的超連結(jié)：可以是別人的WWW網(wǎng)站、FTP站臺、E-mail信箱,或是一個檔案的位置。而瀏覽器會依據(jù)超連結(jié)的語法指示,對連結(jié)目標執(zhí)行相關(guān)的動作,例如按下E-mail信箱的超連結(jié),就會自動開啟郵件編輯器。超連結(jié)的目標超連結(jié)的目標區(qū)分為4類,請按下插入超連結(jié)鈕：超連結(jié)的目標加入網(wǎng)站內(nèi)部的超連結(jié) 連結(jié)到網(wǎng)站內(nèi)的其它網(wǎng)頁移除超連結(jié)連結(jié)至新文件連結(jié)到檔案連結(jié)到網(wǎng)站內(nèi)的其它網(wǎng)頁以本書範例網(wǎng)站的主頁

(mainframe.htm)為例,只要點一下左頁框中的編修技巧鈕,就會連結(jié)到編修技巧網(wǎng)頁(tips.htm),你可以開啟範例網(wǎng)站來試試效果。設(shè)定文字的超連結(jié)請開啟練習檔ex06-01.htm,在設(shè)計模式選取要加入連結(jié)的文字：按下工具列上的插入超連結(jié)鈕,開啟插入超連結(jié)交談窗。在交談窗裡選擇現(xiàn)存的檔案或網(wǎng)頁,然後點選要連結(jié)的網(wǎng)頁：設(shè)定文字的超連結(jié)設(shè)定文字的超連結(jié)接下來就可以切換到預覽模式或用瀏覽器試試效果了。你也可以在設(shè)計模式直接按下[Ctrl]鍵再點選加入超連結(jié)的文字或圖片,這樣不僅會啟動超連結(jié),還會開啟連結(jié)頁面讓你編輯、修改內(nèi)容。從「資料夾清單」中拉曳網(wǎng)頁成為超連結(jié)從「資料夾清單」中拉曳網(wǎng)頁成為超連結(jié)設(shè)定圖片的超連結(jié)如果要為圖片加上超連結(jié),只要先點選一張圖片,再按下插入超連結(jié)鈕來建立連結(jié)即可。也可以在圖片上按右鈕,選擇『圖片內(nèi)容』命令：設(shè)定圖片的超連結(jié)設(shè)定圖片的超連結(jié)設(shè)定圖片的超連結(jié)如果要讓人一眼就看出圖片具有超連結(jié),可繼續(xù)切換到外觀頁次,將圖片的框線粗細設(shè)為"1"以上,就會在圖片周圍加上藍色框線,便可明白告知瀏覽者此張圖片具有超連結(jié)功能。移除超連結(jié)只要將插入點移至設(shè)定超連結(jié)的文字間,或是選取已設(shè)定超連結(jié)的圖片,在其上按右鈕選擇『超連結(jié)』命令,再按下交談窗中的移除超連結(jié)鈕,即可輕鬆移除超連結(jié)的設(shè)定。替超連結(jié)加上工具提示當我們替文字或圖片加上超連結(jié)後,除了滑鼠指標移至連結(jié)的文字或圖片上會變成手指狀外,我們還可以替超連結(jié)加上工具提示做為註解,讓瀏覽者更清楚此超連結(jié)的用意或目標。替超連結(jié)加上工具提示請先切換至設(shè)計模式中,選取要加入工具提示的文字或圖片,或是將插入點移至已設(shè)定超連結(jié)的位置。替超連結(jié)加上工具提示按下工具列上的插入超連結(jié)鈕,再按下工具提示鈕,在工具提示文字欄中輸入提示文字後,完成後按下確定鈕即可。替超連結(jié)加上工具提示替超連結(jié)加上工具提示然後再按下編輯超連結(jié)交談窗的確定鈕,請切換到預覽模式,來看看設(shè)定結(jié)果：超連結(jié)目標的3個選項目前資料夾：可選擇目前存在網(wǎng)站中的資料夾及檔案。超連結(jié)目標的3個選項已瀏覽的頁面：顯示最近曾在IE瀏覽過的頁面,即IE記錄資料夾中記錄的網(wǎng)頁。超連結(jié)目標的3個選項最近使用的檔案：最近曾編輯過的Office文件,包含Word、Excel、Access...等。連結(jié)至新文件可在連結(jié)至欄選擇建立新文件立即建立新網(wǎng)頁,並與之產(chǎn)生連結(jié)：連結(jié)至新文件連結(jié)到檔案插入超連結(jié)交談窗中的瀏覽檔案鈕,不僅可用來尋找網(wǎng)頁檔案並與之連結(jié),還可以連結(jié)使用者電腦上的檔案,甚至可以是網(wǎng)路上的芳鄰

(區(qū)域網(wǎng)路內(nèi))的檔案：連結(jié)到檔案連結(jié)到檔案連結(jié)到檔案的方式,並不適合放到Internet上,因為讀取的是電腦中的檔案,別人的電腦不一定有相同的路徑、相同的檔案,因此建議不要使用這種連結(jié)方式。若是連結(jié)到區(qū)域網(wǎng)路內(nèi)的檔案,也不適合放到Internet上,因為除非瀏覽者的電腦,與你的電腦在同一個區(qū)域網(wǎng)路中,否則瀏覽者不會和你有相同的區(qū)域網(wǎng)路環(huán)境及設(shè)定,當然就會找不到連結(jié)的檔案囉！如何放置可供人下載的檔案檔案匯入網(wǎng)站中後執(zhí)行『檔案/匯入』命令,在匯入交談窗中選擇新增檔案鈕,將檔案匯入網(wǎng)站。選取要建立連結(jié)的文字或圖形,將連結(jié)的目標指定為剛剛匯入網(wǎng)站的檔案。瀏覽者點選此連結(jié)時,瀏覽器將發(fā)現(xiàn)所連結(jié)的是一個不支援的檔案,就會出現(xiàn)如下的交談窗：如何放置可供人下載的檔案如何放置可供人下載的檔案如果要供人下載的檔案,不在自己的網(wǎng)站裡,那麼就將連結(jié)目標指定為其它網(wǎng)站(這樣也可以節(jié)省自己網(wǎng)站的空間),但網(wǎng)址、路徑、檔名一定要正確才行。大部份的軟體都是有版權(quán)的,也不允許你放在網(wǎng)站上公開散播,所以請小心不要違法了！加入網(wǎng)站外部的超連結(jié)開啟新視窗連結(jié)到其它網(wǎng)站連結(jié)到電子郵件信箱連結(jié)Internet上的其它服務(wù)開啟新視窗連結(jié)到其它網(wǎng)站請在瀏覽器開啟相關(guān)網(wǎng)站網(wǎng)頁：開啟新視窗連結(jié)到其它網(wǎng)站開啟新視窗連結(jié)到其它網(wǎng)站請開啟練習檔ex06-04.htm,先選取網(wǎng)頁中要加入連結(jié)的文字,例如：旗標出版公司,再按下工具列的插入超連結(jié)鈕：在插入超連結(jié)交談窗中如下操作。開啟新視窗連結(jié)到其它網(wǎng)站接著會開啟預設(shè)的瀏覽器,請連上Internet並開啟想要加入的網(wǎng)站：開啟新視窗連結(jié)到其它網(wǎng)站本例為連到旗標出版公司網(wǎng)站(http://.tw)。開啟新視窗連結(jié)到其它網(wǎng)站將瀏覽器縮到最小並回FrontPage中,你就會看到交談窗的網(wǎng)址欄自動變成剛剛的網(wǎng)址了,再按下確定鈕就完成一個超連結(jié)設(shè)定。開啟新視窗連結(jié)到其它網(wǎng)站開啟新視窗連結(jié)到其它網(wǎng)站請按下插入超連結(jié)交談窗中的目標框架鈕來指定：開啟新視窗連結(jié)到其它網(wǎng)站開啟新視窗連結(jié)到其它網(wǎng)站再介紹另一種加入外部連結(jié)的方法,請先開啟IE並連上欲設(shè)定的網(wǎng)頁,再將IE的視窗縮小一點,接著如下操作：開啟新視窗連結(jié)到其它網(wǎng)站開啟新視窗連結(jié)到其它網(wǎng)站連結(jié)到電子郵件信箱E-mail可做為與瀏覽者互動的溝通管道。在本書範例網(wǎng)站中,於左框架的導覽列下方設(shè)定了E-mail的超連結(jié),當瀏覽者按下E-MAIL

的超連結(jié),會立即開啟電腦中預設(shè)的電子郵件軟體。請開啟練習檔案ex06-05.htm,選定要設(shè)定的文字或圖片,本例請選擇E-MAIL的圖片,然後按下插入超連結(jié)鈕：連結(jié)到電子郵件信箱連結(jié)到電子郵件信箱請切換到預覽模式或用瀏覽器來預覽：連結(jié)到電子郵件信箱連結(jié)Internet上的其它服務(wù)Internet上除了WWW網(wǎng)頁外,還包含許多各式各樣的網(wǎng)路服務(wù),如E-mail、FTP、NEWS…等,都屬於Internet的服務(wù)範疇。我們可以在網(wǎng)址欄中輸入對應(yīng)的語法來與之連結(jié),例如要連結(jié)WWW網(wǎng)站就用"http://網(wǎng)站位址"、要連結(jié)E-mail信箱就用"mailto:電子郵件信箱位址",其它的連結(jié)語法也都大同小異：連結(jié)Internet上的其它服務(wù)使用書籤連結(jié)至同一網(wǎng)頁中的書籤連結(jié)至其它網(wǎng)頁的書籤更改、刪除書籤使用書籤FrontPage的書籤,目的是用來建立網(wǎng)頁內(nèi)的連結(jié)點,當網(wǎng)頁內(nèi)容很多時,瀏覽者不必從頭看起,只要點選我們加在網(wǎng)頁最前面的索引標題,就可以立即跳至網(wǎng)頁中已設(shè)定書籤的相關(guān)主題,省去在網(wǎng)頁中拉曳捲軸及尋找的麻煩。連結(jié)至同一網(wǎng)頁中的書籤本書範例網(wǎng)站中的拍攝技巧網(wǎng)頁(camerawork.htm),共介紹了8個實用的攝影技巧,為了讓瀏覽者快速找到自己想查詢的內(nèi)容,我們在網(wǎng)頁開頭加入了索引連結(jié),你可以在瀏覽器開啟該網(wǎng)頁來試試看。加入書籤我們必須先在各個特定的位置放入一個記號,讓FrontPage知道連結(jié)的目的應(yīng)該在什麼地方,而這個記號就是所謂的書籤。請開啟練習檔ex06-06.htm,先將插入點移到下方的"持穩(wěn)相機..."標題前,然後執(zhí)行『插入/書籤』命令：加入書籤加入書籤連結(jié)至書籤請先選好要建立連結(jié)的文字或圖片,然後按下插入超連結(jié)鈕：連結(jié)至書籤完成後就可以在預覽模式,或開啟瀏覽器測試看看了。如果一個網(wǎng)頁內(nèi)要加入很多書籤連結(jié),建議你先把所有書籤都加入完畢後,再替所有書籤建立連結(jié),這樣會比較有效率。適時加入回到頁首的書籤連結(jié)運用書籤雖可以迅速跳到特定位置,但瀏覽者想回到網(wǎng)頁最頂端時,還是得慢慢地拉動捲軸才行。這時我們可以在網(wǎng)頁頂端加入一個top

書籤,然後於網(wǎng)頁中放幾個GoTop的連結(jié),這樣瀏覽者都可以隨時跳回文章最前面：適時加入回到頁首的書籤連結(jié)適時加入回到頁首的書籤連結(jié)連結(jié)至其它網(wǎng)頁的書籤假設(shè)我們要在練習檔案ex06-07.htm中,加上ex06-06.htm已設(shè)定好的書籤內(nèi)容,請確定ex06-06.htm與ex06-07.htm的檔案置於同一網(wǎng)站資料夾內(nèi),然後開啟ex06-07.htm並選取欲加入超連結(jié)的文字,再按下插入超連結(jié)鈕。連結(jié)至其它網(wǎng)頁的書籤連結(jié)至其它網(wǎng)頁的書籤連結(jié)至其它網(wǎng)頁的書籤「這份文件中的位置」與「書籤」鈕有什麼不同？在設(shè)定書籤的超連結(jié)時,利用這份文件中的位置鈕開啟的書籤選單,只會顯示這份文件中的書籤；按下書籤鈕開啟的書籤選單,則是可以指定網(wǎng)頁檔案,再選取其中的書籤。如果沒有選擇任何網(wǎng)頁就按下書籤鈕,那麼其開啟的書籤選單仍會是這份文件中的書籤。更改、刪除書籤要更改或刪除已加入的書籤名稱,只要將插入點移到已加入書籤的文字間,或選取書籤圖示,然後按下滑鼠右鈕選擇『書籤內(nèi)容』命令,就會開啟如下的書籤交談窗：更改、刪除書籤更改、刪除書籤利用書籤交談窗刪除網(wǎng)頁中的書籤時,同樣要先選取書籤名稱,再按下到鈕(網(wǎng)頁會自動移至書籤的位置),才可按下清除鈕將之刪除。你也可以選取網(wǎng)頁上的書籤圖示,直接按下[Delete]鍵來刪除,不過若要刪除的書籤數(shù)量很多時,還是利用書籤交談窗會比較省事哦！啟用超連結(jié)強化效果請開啟本書範例網(wǎng)站的拍攝技巧網(wǎng)頁(camerawork.htm)：啟用超連結(jié)強化效果請開啟ex06-08.htm並在網(wǎng)頁上按滑鼠右鈕選擇『網(wǎng)頁內(nèi)容』命令,然後切換到進階頁次：啟用超連結(jié)強化效果啟用超連結(jié)強化效果設(shè)定完成後,網(wǎng)頁中的所有超連結(jié)都會套用相同設(shè)定。由於超連結(jié)強化效果是由CSS所控制,因此若該瀏覽器未完全支援CSS時,可能無法顯示正確的結(jié)果。製作影像地圖一般而言,一張圖片只能建立一個超連結(jié)。若是運用影像地圖

(ImageMap)的技術(shù),則可以使同一張圖片包含多個超連結(jié),也就是說,在圖片的不同位置按下滑鼠左鈕,就會分別連到相關(guān)的內(nèi)容。本書範例網(wǎng)站中的編修技巧網(wǎng)頁(tips.htm),就是一個影像地圖的應(yīng)用：製作影像地圖製作影像地圖製作影像地圖的方法,是先將一張完整的圖片分割成幾塊區(qū)域,再分別為每個區(qū)域指定超連結(jié)。請開啟練習檔ex06-09.htm並選取圖片,此時會自動顯示圖片工具列。若沒有顯示,請在圖片上按右鈕選擇『顯示圖片工具列』命令：建立矩形與圓形連結(jié)區(qū)域我們已在ex06-09.htm中加入一張現(xiàn)成的圖片,請選定圖片後,按下圖片工具列上的矩形鈕：建立矩形與圓形連結(jié)區(qū)域建立矩形與圓形連結(jié)區(qū)域接著利用前面學過的方法,指定一個網(wǎng)站內(nèi)部或外部的超連結(jié),並重複以上的步驟,就可以在圖片上建立多個作用區(qū)及超連結(jié)了。劃分連結(jié)作用區(qū)時,如果不小心發(fā)生了作用區(qū)重疊的情況,則重疊區(qū)域的連結(jié)目標將以最先設(shè)定的為主。修改與刪除作用區(qū)的範圍如果想要刪除圖片中的作用區(qū),可以點選該作用區(qū)後(作用區(qū)的框線周圍會出現(xiàn)控點),再按下鍵盤上的[Delete]鍵。若要修改作用區(qū)的位置,可以直接拉曳作用區(qū)到目的位置；而拉曳作用區(qū)的控點,則可以改變作用區(qū)的大小。建立多角形連結(jié)區(qū)域使用多角形作用區(qū)鈕,可建立不規(guī)則形狀的連結(jié)作用區(qū)。建立多角形連結(jié)區(qū)域當起始與結(jié)束是同一個地方時,也就是將多角形封閉起來,表示作用區(qū)已經(jīng)繪製完成。若是在繪製時雙按滑鼠左鈕,這樣不規(guī)則區(qū)域也會自動封閉起來。三個劃分工具,可依據(jù)圖片的內(nèi)容、特性來選擇。不管使用哪一種劃分方法,都儘量不要有重疊的情況發(fā)生,這樣才能提供瀏覽者一個真正方便又實用的影像地圖。不遺漏圖片中任何區(qū)域的連結(jié)技巧如果你希望瀏覽者點選圖片中沒有被劃分的區(qū)域時,也能連結(jié)到某個地方,那麼可以為整張圖片建立超連結(jié)。當圖片中作用區(qū)發(fā)生重疊狀況時,超連結(jié)的目的會以先設(shè)定的為主。假設(shè)先設(shè)定了作用區(qū),又設(shè)定整張圖片連結(jié)的情況下,圖片中作用區(qū)的超連結(jié)優(yōu)先性將高於圖片本身的超連結(jié)。不遺漏圖片中任何區(qū)域的連結(jié)技巧我們以右圖來說明其作用

區(qū)及超連結(jié)的優(yōu)先順序：此時A作用區(qū)超連結(jié)目的

優(yōu)先順序為：2>3>1。

即當圖片上沒有建立影像

地圖作用區(qū)時,才會啟動

圖片的超連結(jié)；當影像地

圖作用區(qū)重疊時,則會以先設(shè)定的作用區(qū)為優(yōu)先。管理超連結(jié)「超連結(jié)」檢視模式「報告」檢視模式管理超連結(jié)網(wǎng)站中的超連結(jié)模式,可以做為你檢視超連結(jié)的好幫手；而報告模式,則可以輕鬆修復中斷的超連結(jié)哦！建議你開啟練習檔網(wǎng)站ex06-10來進行稍後的練習。該網(wǎng)站是本書範例網(wǎng)站在修正超連結(jié)前的版本,你可以藉由我們稍後的說明,來練習修正錯誤的超連結(jié)?！赋B結(jié)」檢視模式網(wǎng)站的超連結(jié)檢視模式,可以清楚地看到每個網(wǎng)頁之間的連結(jié)情形,以及頁裡共加入了多少超連結(jié),甚至放了哪些圖片也都可一目了然。若連結(jié)發(fā)生了中斷的情形,也可以在此模式中馬上立即發(fā)現(xiàn)。以下用本書的範例網(wǎng)站來做說明：「超連結(jié)」檢視模式將其它的網(wǎng)頁設(shè)為檢視中心一般我們會以首頁為中心,來檢視超連結(jié)的情況,不過也可以其它網(wǎng)頁做為檢視中心,以方便觀察特定網(wǎng)頁的連結(jié)狀況。你可用以下兩種方式來達成：將其它的網(wǎng)頁設(shè)為檢視中心將其它的網(wǎng)頁設(shè)為檢視中心設(shè)定超連結(jié)的顯示方式在右方窗格空白處按下滑鼠右鈕,可設(shè)定超連結(jié)的顯示方式：設(shè)定超連結(jié)的顯示方式檢視內(nèi)部連結(jié)的狀況如果網(wǎng)站內(nèi)的連結(jié)有中斷的情形,那麼原本網(wǎng)頁間的連接線會斷成兩半：檢查外部連結(jié)的狀況網(wǎng)站外部的超連結(jié)常常不是我們所能掌控的,因為別人的網(wǎng)站可能隨時會搬家、關(guān)閉,甚至是網(wǎng)址輸入錯誤,使得瀏覽者無法順利連結(jié)過去。在超連結(jié)模式檢查外部連結(jié)時,只要選定以http://開頭的URL網(wǎng)頁,然後按下滑鼠右鈕選擇『檢查超連結(jié)』命令,即可針對該網(wǎng)站進行檢查,當然必須先連上Internet才行。檢查外部連