|
|
---|
壹、超鏈結的虛框線應算是網頁外觀小殺手: ⊕當你點選超鏈連結或按鈕時,該連結目標位置四周旁邊是不是會出現不太好看的虛線框外觀? ⊕這是 HTML 標籤的預設(默認)值,當初目的是要讓使用者明確知到您已觸動這個功能,並無不妥。 ⊕在追求網站製作完美的要求下,您可能已對此產生這個疑問:如何消除超鏈結產生的四周虛框線? ⊕超鏈結所產生的四周虛框線,包括文字、圖檔、表單按鈕、影像地圖,甚至當紅的 Flash 特效。 ⊕因為它不是網頁錯誤的問題,或許到現在為止,您還沒發現這個不起眼的小問題,讓我詳細告訴您吧。 ⊕有個好消預告:用了將近 3 個月時間,全新、最完整的 HTML 標籤教學網站,預定 96 年 8 月與大家見面! |
參、消除超鏈結產生的四周虛框線,最簡單的初級辦法: ◎利用 JavaScript 程式個個擊破: 01.用於純文字,適合單一鏈結標籤或超鏈結不多的網頁。 ◎本 JavaScript 程式語法:
⊙本標籤語法完全適用於 Internet Explorer 瀏覽器,Mozilla Firefox 及 Netscape Browser 瀏覽器,只能適用 onfocus="this.blur()" 這個。
02.用於圖檔標籤個個擊破,適合單一鏈結標籤或超鏈結不多的網頁。
|
肆、消除超鏈結產生的四周虛框線,中級辦法: 01.利用 CSS 語法控制整頁內的超鏈結: ◎適合整個網頁所有鏈結標籤。 ◎本 CSS 語法:
⊙程式簡單解說: IE 對 CSS 有一種擴充叫做 expression (表示),很神奇的讓您也可以在 CSS 裡撰寫 JavaScript,寫出一些可以隨狀況改變的 CSS 樣式。 ⊙很可惜的是,這個 CSS 語法是 Internet Explorer 瀏覽器專用並不適用於 Mozilla Firefox 及 Netscape Browser 瀏覽器。
A.另一種適合 ( IE、Firefox、Netscape 瀏覽器) CSS 語法
B.另一種適合 ( IE、Firefox、Netscape 瀏覽器) 的 CSS inline 樣式語法
02.使用 JavaScript 程式全面擊破超鏈結虛框線:
⊙本標籤語法適用於 Internet Explorer、Mozilla Firefox 及 Netscape Browser 瀏覽器。
03.另一種適合 ( IE、Firefox、Netscape 瀏覽器) 的 JavaScript 程式語法
⊙本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla Firefox 完全不適用,Netscape Browser 僅圖檔適用。 |
伍、消除超鏈結產生的四周虛框線,高級辦法: ⊙如何才能大量或一次就消除網站上,所有超鏈結產生的四周虛框線問題? ⊙如果您只能使用上述的 Onfocus="this.blur()",這個 JavaScript 程式碼來消除超鏈結產生的四周虛框線。 ⊙就算您是使用 Ctrl+C (複製)、Ctrl+V (貼上) 快速功能鍵,數十個還好辦,要是超過百個怎麼辦? ⊙若是運用類似 Dreamweaver 這樣強的的網頁編輯器內的尋找替換功能,是可減輕一點負擔,但還是不太好用! ⊙很慶幸的是,在瀏覽器設計工程師的努力下,已想到使用一個簡單 HTC 代碼,就能掌控整個網站的超鏈結問題。 ⊙還沒開始前先瞭解一下,甚麼是 HTC 文件? ⊙何謂 HTC 文件,全名為 Html Components,是微軟在 IE5.0 後開始提供的一種新的指令組合。 ⊙它可以把某種特定功能的代碼封裝在一個組件之中,從而實現了代碼的重復使用功能。 ⊙一個 htc 組件裡面包含了屬性、方法、事件等等各種用法,這裡就不詳細介紹,有興建請參考微軟的 msdn 主頁。 ⊙運用 HTC 文件控制網站內全部的超鏈結: ⊙適合整個網頁所有鏈結標籤。 ⊙本 HTC 文件語法(製作方法)如下: 01.先在記事本或任何文書編輯器打入以下語法:
03.然後使用 CSS inline 樣式語法:
套用到 CSS inline 樣式語法內說明:
⊙您只要在每一頁的 ... 內,插入這段 CSS inline 樣式語法,這樣是不是精簡多少?再多網頁也不怕了。 ⊙本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla Firefox 完全不適用,Netscape Browser 僅圖檔適用。 |
陸、表單按鈕要怎麼做: 01.只要在 <input 內加入 onFocus="this.blur()"> 即可: ⊙Html 表單按鈕語法:
⊙hidefocus=true" 也可以運用在其他表單標籤,如 radio、checkbox ... ,瀏覽器必須是 IE 5.5 以上的版本才有效果。 ⊙本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla Firefox 及 Netscape Browser 部份適用。
02.如果這頁表單很多按鈕呢?
⊙本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla Firefox 及 Netscape Browser 部份適用。 |
柒、影像 (Image Map) 地圖要怎麼做: ⊙利用 JavaScript 程式個個擊破。 ⊙在鏈結的 Map 的影像檔 Img 裡,加入 hidefocus="true" 就可以了喔! ⊙JavaScript 影像(索引)地圖語法:
|
捌、用於 Flash 特效要怎麼做: 01.這是傳統未加消除四周虛框線的 Flash 特效: ⊙本標籤語法只有 Internet Explorer 會有虛框線,對於 Mozilla Firefox 及 Netscape Browser 瀏覽器不受影響。
⊙共有以下兩種技巧(方法):
03.這是使用 swfobject.js 程式處理過的狀況:(下swfobject.js)
|
玖、本站會員注意事項: 網頁研習室費心製作的 HTML 標籤教學網站,不論您是否已有基礎,都值得您進一步研習的好地方,敬請期待! 為利網友快速取得本報導所相關檔案等資料,歡迎到網頁研習室網站進一步取得完整教材。 您也可以加入我們的教學會員或免費索取教材,直接由教材光碟 (CD-R) 片內取得更多學習資料。 本報導所有檔案均存放於 CD:/study/maillist3/html/06/ 目錄內。 歡迎大家前往最新完工的網頁教學 議題討論版 ,發表您的看法或建議,讓彼此更能互動受惠。 |
拾、結論與建議: ⊕本報每篇報導都花上很多時間搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。 ⊕本電子報 第三階段 報導資料,將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱 。 ⊕強烈建議您【學會 HTML 語法】,她真的簡單易學,懂了她您就能駕馭她,將【所見即所得】軟體當做輔助工具吧。 ⊕為因應網友要求,本報自即日起全面改為 索取教材資料 方式 ,繼續提供及服務有此需求網友。 ⊕本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的兩套光碟片,則是我們的誠意而已。 ⊕本報導內容或資料,因限人力、時間,非 索取教材資料包含線上指導 網友,不接受任何疑惑解答,敬請見諒。 ⊕本報導 非會員 可免費訂閱及享用我的電子報報導成果,而 會員 則可以進一步取得所有資料與線上指導。 ☆本站所有報導資料,歡迎網友免費加入鏈結,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。 |
第三階段 96.06.30. 發行第 36 期 更多 精彩報導 文章 |
|
© 網頁研習室【電子報】李文能 主編 © |