網頁設計中 HTML 常犯的幾個錯誤─網頁研習室【網頁製作系列報導】─智邦公益電子報
enews.url.com.tw · August 18,2016拾、結論與建議:
本電子報每篇報導至少花了 4 天時間編輯與修改,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
本電子報 第三階段 報導資料,將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱 。
強烈建議您【學會 HTML 語法】,她真的簡單易學,懂了她您就能駕馭她,將【所見即所得】軟體當做輔助工具吧。
一篇保證前所未見的 HTML 教學課程,絕對是您學習 HTML 的好教材,強烈建議您進入實際體驗一下。
為因應網友要求,本報自即日起全面改為 索取教材資料 方式 ,繼續提供及服務有此需求網友。
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的光碟片,則是我們的誠意而已。
本報導內容或資料,因限人力、時間,非 索取教材資料包含線上指導 網友,不接受任何疑惑解答,敬請見諒。
對本篇有任何問題,歡迎大家前往網頁教學 議題討論版 ,發表您的看法或建議,讓彼此更能互動受惠。
本報導 非會員 可免費訂閱及享用我的電子報報導成果,而 會員 則可以進一步取得所有資料與線上指導。
本站所有報導資料,歡迎網友免費加入鏈結,但請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。
捌、濫用禁止右鍵或複製功能:
很多人喜歡將網頁設定禁止右鍵或複製功能,有的還使用加密功能,深怕他的原始碼或照片被人偷走。
諸不知任何禁止右鍵或複製功能,及亂碼加密,都不可能防止網頁被複製或擷取,那何不大方一點呢。
問題:網站就是要提供資訊給大家使用,禁止右鍵或複製功能,造成來訪的使用者非常不方便。
結果:訪客會抱怨,下次就不來您家了,做這些禁止右鍵或複製功能的事,您認為值得嗎。
建議:如果您發現有甚麼新功能或好技巧,不如就大大方方的告訴訪客,歡迎擷取使用。
玖、開啟過多的新視窗:
標籤最神奇的功能之一,就是可以這一頁連到那一頁,網網相連到天涯,這就是超鍊結 Hyper Link)標籤。
除此之外,他還能指定位置 Target=name,開啟新視窗 Target=_New)或,開啟更多新視窗 Target=_Blank。
問題:如果您未能妥善運用這個標籤屬性,任何連結都採開啟新的視窗以供瀏覽,看起來很簡單、很方便。
結果:您會讓訪客有關不完的新視窗,這就失去超鍊結 Hyper Link 標籤的真正用意了。
建議:如果您不喜歡使用退回或指定連結標籤,建議您可以採用分割視窗來處理過多的網頁問題。
柒、網頁使用 Mailto 內設郵件標籤:
保證半年之內,您設定的這個信箱會有接不完的廣告信出現,而且會越接越多,直到您放棄不用。
如果您用的是免費信箱,大不了再換一個;如果是您花前買的或是很重要的信箱,痛苦指數 100 %。
問題:這是不肖人士運用專門蒐集信箱 (@) 的蜘蛛程式,24 小時在指定區域不斷找尋出來的。
結果:當您的電子信箱被網路蟑螂抓走後,您只能生氣、抱怨、抗議、反擊或放棄這個信箱了。
建議:請參考本站電子報 - HTML 進階網路運用 - 第一篇如何保護信箱不遭受廣告信侵擾(參考網址)。
網址:詳參網頁研習室電子報如何保護信箱不遭受廣告信侵擾
陸、未指定圖檔寬度與高度:
圖檔最簡單的標籤寫法就是:詳參網頁研習室電子報,其實這樣就能顯示圖片了,看起來非常簡單。
問題:如果未於圖檔標籤內加入圖片寬度 (Width="Pixel") 與高度 (Height="Pixel") 時,會產生下面這個問題。
結果:訪客一進入該網頁時,瀏覽器不會將圖檔預先定位好,藉時您會發現圖檔重新排列所產生的推擠現象(參考註解)。
建議:建議在每個圖檔標籤內,加上寬度 (Width="Pixel") 與高度 (Height="Pixel") 屬性,甚至 Alt="代替圖示文字"。
註解:由於現在的連線速度很快,您可能無法立即查覺,如果您這頁的圖檔很大或很多,就會很明顯看出來這個問題。
伍、重複使用置中標籤與屬性:
在修改別人網頁或指導學生作品中,經常看到重複使用置中標籤:詳參網頁研習室電子報。
問題:重複使用置中標籤與屬性不會影響網頁排版,但在以後的維護與修改網頁時,會有點麻煩。
結果:檔案變的比較大些,修改時很浪費時間,原始碼看起來不夠清爽。
建議:表格中已有 td align='center' 用來使資料置中功能,您就不要重覆使用以下籤與屬性。
詳參網頁研習室電子報
肆、網頁或圖檔使用中文檔名:
在自己電腦看一切正常,路徑也正確,但上傳檔案到主機後確顯示找不到這個檔案,到底出現甚麼問題。
可能是您使用中文當網頁檔名,如:中文.htm;或使用英文大寫當網頁檔名,如:ABC.htm。
問題:如果您使用的主機是採用 Apache Server 或 linux 主機或英文主機(參考註解),這個問題就會發生。
結果:有些 linux 系統的虛擬主機,對檔案或目錄名稱,甚至會區分英文字母大小寫字體。
建議:為了有效避免發生這個情況,建議您所有網頁或圖檔命名,全部使用英文小寫或數字做為檔案名稱。
註解:如果一定非使用中文檔名或路徑不可,建議去找 windows 主機試試。
注意:不管是使用那種主機,網頁命名應把握以下三點:
01.一律以英文小寫命名(包括路徑、圖檔、程式等)。
02.檔案命名中間或最後都不可有空格,會被視同非英文小寫檔名。
03.檔案名稱之間也不可有標點符號或任何其他非數字符號。
壹、前言:
在我學習超過十年的 HTML 標籤歲月裡,不論是網頁製作或教學中,經常看到一些不應該發生的 HTML 錯誤。
這些錯誤在初學者過程中,很容易被引用,偶爾也會出現在老手中,特別為大家整理出八個最常見的錯誤觀念。
有些在我過去三期的電子報導中,曾經深入討論發表過,希望藉由這篇舊話重提,能帶給初學者避免重滔覆轍。
如果您有興趣瞭解更多頁製作學習技巧與需要注意事項,請回頭看看我的各期電子報或持續訂閱與購買完整取得。
網頁研習室 - 電子報是針對初學者或想徹底學會 HTML 標籤朋友而設,有心學習網頁製作者,請不要錯誤這個機會。
貳、加入 charset=big5 標籤:
這是剛學會做網頁的人,過於依賴編輯工具,又忽略這個重要問題時才會犯的嚴重錯誤。
問題:如果您沒以在 與 之間,加入這段中文編碼(參考註解),網頁可能會顯示亂碼。
結果:當訪客是來自外國語系或變更過瀏覽器編碼設定時,當轉到您的網頁文字時,就會出現一團外星文字。
建議:請務必養成在每一個網頁 與 之間,都加入 charset=big5 標籤(參考註解)。
註解:打開瀏覽器 設定 檢視 編碼 查看自動選取是否已打勾。
註解:charset=big5 完整標籤 - 詳參網頁研習室電子報
參、頁背景色與的背景圖設定:
如果您沒有指定網頁背景顏色,瀏覽器的內定值底色是白色的 。
如果您同時指定網頁背景顏色加上網頁背景圖,網頁背景圖會優先於網頁背景顏色。
問題:如果有訪客將網頁圖片顯示功能關閉(參考註解),或圖檔不見等因素也會造成底圖圖片無法顯示。
結果:當您設定的文字顏色是淺系列時,訪客就有可能看不清楚這些文字了。
建議:網頁背景色與的背景圖應該同時設定,選用背景色一定要考慮到您設定的文字顏色。
註解:關閉瀏覽器網頁圖片顯示功能工具 選項 進階多媒體 顯示圖片沒打勾。