首頁
文章清單
RSS 
|
打造一份在不同電腦，不同瀏覽器中有相同視覺感受的網頁，不一定指你必需精通 CSS / CSS2 或是 DOM 或是必需具備撰寫 Javascript 的能力（儘管當你邁入進階級人員時，強烈建議這是必備的條件），一些簡單的地方多注意，打造一份相容的網頁並非難事。先看下面的例子：
| 表格一 | 表格二 | 表格三 | ||||||||||||
|
|
|
好了，這你現在使用的瀏覽器是： 。所看到的上面三個表格的結果，而這三個表格，有可能都是你自己撰寫的，在同一個瀏覽器中就有視覺上的差異了，更何況是不同瀏覽器呢？
如果你看不出差異，請注意表格一和表格二、三在框線上的差異，表格二和表格三在文字大小上的差異。
而同樣的資料，在 Microsoft Internet Explorer（以下簡稱 IE）與 FireFox （以下簡稱 FF）中看起來更是大不相同，如下圖：
上面兩種瀏覽器是目前流通較廣的瀏覽器(註1)，顯然有著明顯不同，但我們透過電腦合成，來察看一下「相同」的地方，如下圖：
是否有察覺到，其實在 IE 與 FF 之間，表格三表現出來的視覺效果是相同的？
三個表格的始 HTML 列舉如下：
| 表格一 | <table width="100%" border="1"> |
| 表格二 | <table width="100%" border="1" cellpadding="2" cellspacing="1"> |
| 表格三 | <table width="100%" border="1" cellpadding="2" cellspacing="1" style="font-size:9pt;"> |
表格一和表格二的差異，少了指定表格內文邊界（cellpadding）與間距（cellspacing），少了這兩個屬性，表格一樣畫的出來，但表現則交給瀏覽器去自訂，可能 IE 的 cellpadding 預設值是 2，而 FF 的預設值是 1，當不指定時，就造成視覺效果不同了。
同樣的，表格二在表格的部份，IE 與 FF 的視覺效果是沒有什麼差異的，只有內文文字上的差別，這就是表格三再進一步修正的地方，如果你不指定文字大小時，同樣的，瀏覽器依照預設值來顯示，IE 可能是 12 級字，FF 可能是 11 級字，當然視覺效果會有不同。
而你不可不知的一件事，我電腦上的 IE 和你電腦上的 IE 看同一份網頁，若是撰寫人員不夠細心，看出來的效果也不同相！
一個好的網頁撰寫人員，在您未能體察這些細微差異前，都算不上是個網頁設計師。一位稱職的網頁設計師，必需考慮到多方使用者的瀏覽舒適感，而要達成上例相同的視覺效果，並不需要有什麼高深的程式技術，或動輒談論 Javascript、DOM 等，只要培養出良好撰寫習性即可。
基本 HTML 標籤中，相關重要屬性，列於下表(註2、3)：
| 標籤 | 屬性 | 說明 | 建議必寫 |
|---|---|---|---|
| A | 超連結 | ||
| href | 超連結位址，通常是一個網址 | V | |
| name | 超連結名稱，可透過 Javascript 程式進行摩擬點選或者應用為錨點。 | ||
| FONT | 文字樣式 | ||
| size | 文字大小，表示方式可以用點(pt)，或是加減級數，如+2 | ||
| color | 文字顏色，表示方式可以用十六進位#RRGGBB或十進位RGB(R,G,B)表示 | ||
| face | 字型清單，多組以逗號區隔 | ||
| FORM | 表單 | ||
| action | 本表單送出後執行的程式名稱 | V | |
| method | 本表單傳送封包的方式 | V | |
| enctype | 本表單傳送時的編碼型態 | V | |
| name | 本表單名稱 | V | |
| FRAME | 頁框 | ||
| name | 頁框名稱 | V | |
| src | 頁框預設載入文件檔案來源 | V | |
| noresize | 指定不可變更頁框大小 | ||
| scrolling | 指定頁框無捲軸 | ||
| frameborder | 頁框邊框粗細 | V | |
| marginwidth | 頁框內文邊界左右值 | V | |
| marginheight | 頁框內文邊界上下值 | V | |
| FRAMESET | 頁框組設定 | ||
| rows | 頁框組上下分割的比例 | V | |
| cols | 頁框組左右分割的比例 | V | |
| IFRAME | 內嵌於頁面中的頁框 | ||
| name | 內嵌頁框名稱 | V | |
| src | 內嵌頁框預設載入文件檔案來源 | ||
| width | 內嵌頁框寬度 | V | |
| height | 內嵌頁框高度 | V | |
| IMG | 加入影像 | ||
| src | 影像檔來源 | V | |
| name | 影像檔在文件中的名稱 | ||
| width | 影像於文件中顯示的寬度 | V | |
| height | 影像於文件中顯示的高度 | V | |
| alt | 影像遺失時，於文件中顯示的替代文字 | ||
| title | 影像標題 | ||
| align | 影像與鄰近其他元件的對齊方式 | V | |
| TABLE | 表格 | ||
| align | 對齊方式 | ||
| width | 寬度 | V | |
| border | 邊框寬度 | V | |
| cellpadding | 儲存格內文字或其他元件的邊界 | V | |
| cellspacing | 儲存格與儲存格之間的距離 | V | |
| bgcolor | 表格背景色 | ||
| background | 表格背景圖案 | ||
| TD | 表格中的儲存格 | ||
| rowspan | 儲存格合併列數 | ||
| colspan | 儲存格合併行數 | ||
| width | 儲存格寬度 | ||
| bgcolor | 儲存格背景色 | ||
| nowrap | 指定儲存格不換行顯示 | ||
| TR | 表格中的列 | ||
| bgcolor | 列背景色 |
註1：目前流通較廣的瀏覽器，計有微軟的 IE 以及加強操作介面的衍生系列，如 KKMan, myIE （更名為 Maxthon）等，Mozilla Gecko 系列的 FireFox、Mozilla、Netscape等，以及自成一格的 Opera。本文僅列舉 IE 與 FF 作為範例，重點在於研討「相容」與「視覺相同」的網頁撰寫技術，並非經過調查確認這兩款瀏覽器的市佔率最高。
註2：標籤列表取自 W3C (http://www.w3.org/TR/html4/index/elements.html) 所編排之順序，並增刪和本文相關的部份，所有標籤連結，均會連到到 W3C 網站。
註3：各標籤屬性的列舉經過調整，筆者認定必需要提出來的部份才列舉在本表中，算不上完整，在此向諸前輩高手致歉，畢竟本文希望帶領入門者或迷惑於如何進行符合標準網頁撰寫人員，一個通曉何謂標準的入門。
同意轉載，不過麻煩看一下轉載需知
柳雁 2007/8/23 上午 11:19:00
謝謝卜老師給我一個方向去修改它~
我測出來了~ ^^
原來我是移動圖片位置~指定到新的位置
這樣一點就通了 :D
那只用CSS應該無法將虛線框刪除摟!?
謝謝^^
卜維丰 2007/8/22 下午 12:42:00
柳雁你好,
抱歉, 最近很忙, 又出差, 回覆晚了
首先, 要加上說明文字, 原則上如果你不是預先寫好, 再透過 CSS 去控制顯示
一般難辦到
再來, 我測, 是一點就有大圖了, 至於小圖不見, 那是因為你移動圖片到新位置上
也就是頁面裡只有一張圖, 只不過你透過 CSS 控制大小和位置, 所以當然一點就不見
最後, 那個框, 是超連結的虛線框, 一般超連結文字或圖片, 在點下去的瞬間, 都有虛線框
這類問題, 除非指定要求使用純 CSS 來處理, 不然我都建議加點 javascript , 會更簡便些(包括去除虛線框)
柳雁 2007/8/17 下午 03:07:00
卜老師不好意思~我可以問你3個CSS的問題嘛!? 網址貼在上方了
1請問我要如何能夠將點出來的圖片
加上說明文字呢....
2滑鼠點完圖片要離開點的圖才會秀出大張的圖
而且小圖會不見
請問有什麼辦法可以讓他滑鼠一點就秀出大圖呢?
而且小圖不要不見
3點開的圖檔...為什麼他的虛線外框這麼大呢...
謝謝你不好意思因為我研究了很久...
才疏學淺...所以都是剪剪貼貼...
以上問題真的困擾我很久
真的很抱歉 打擾您了
卜維丰 2007/7/31 下午 03:06:00
柳雁你好,
href="./chapter2.html" 之中的 ./ 本身就代表同目錄
簡單用 href="chapter2.html" 即可
柳雁 2007/7/31 下午 12:20:00
<A href="./chapter2.html"
title="Get chapter two.">chapter two</A>.
請問一下卜先生...
這是在W3C Recommendation 裡面的語法
請問這是通用於FF & IE 瀏覽器嘛?
因為我做的網站有點小小問題
在FF裡可以連結到我想要連結的位址
用IE瀏覽器就不行。
我想知道有沒有通用於FF與IE的連結語法呢?
謝謝 ^^
