打造一份在不同電腦,不同瀏覽器中有相同視覺感受的網頁,不一定指你必需精通 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的連結語法呢?
謝謝 ^^