以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

第一篇:養成良好寫作網頁的習慣。

指定每一個標籤的屬性預設值

打造一份在不同電腦,不同瀏覽器中有相同視覺感受的網頁,不一定指你必需精通 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:各標籤屬性的列舉經過調整,筆者認定必需要提出來的部份才列舉在本表中,算不上完整,在此向諸前輩高手致歉,畢竟本文希望帶領入門者或迷惑於如何進行符合標準網頁撰寫人員,一個通曉何謂標準的入門。

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

Can you get taller with yoga?   2017/8/4 上午 09:54:00

Hi to every body, it's my first visit of this blog; this blog includes amazing and truly good material in support of readers.

soonstai.wordpress.com   2017/7/31 上午 01:17:00

Heya i am for the first time here. I found this board and I find It really useful
& it helped me out a lot. I hope to give something back and help others like you aided me.

Why is my Achilles tendon burning?   2017/7/28 上午 12:34:00

I love your blog.. very nice colors & theme.
Did you make this website yourself or did you hire someone to do it for you?

Plz reply as I'm looking to construct my own blog and would like to find out where u got this from.
thanks a lot

How do you treat a sore Achilles tendon?   2017/7/27 下午 11:46:00

My family members always say that I am killing my time here at net,
however I know I am getting knowledge all the time by reading
such fastidious articles.

How do you strengthen your Achilles tendon?   2017/7/21 下午 02:33:00

Greetings! Very helpful advice within this
post! It is the little changes that make the largest changes.
Thanks for sharing!

foot pain big toe joint   2017/7/3 下午 02:29:00

We're a gaggle of volunteers and opening a new scheme in our community.
Your web site provided us with helpful information to work on. You have performed a
formidable activity and our whole neighborhood might be thankful to you.

   2017/6/24 下午 08:14:00

Since the admin of this website is working, no question very quickly it will be famous,
due to its quality contents.

tanpsychology1175.wordpress.com   2017/5/19 上午 06:02:00

Hello! This is kind of off topic but I need some guidance from an established blog.
Is it very difficult to set up your own blog?

I'm not very techincal but I can figure things out pretty fast.

I'm thinking about creating my own but I'm not
sure where to start. Do you have any tips or suggestions?
Cheers

manicure   2017/5/3 下午 09:24:00

Good day! This is kind of off topic but I need some help from
an established blog. Is it very difficult to set
up your own blog? I'm not very techincal but I can figure things out pretty quick.
I'm thinking about making my own but I'm not sure where to begin. Do you
have any ideas or suggestions? Thank you

manicure   2017/5/3 下午 08:46:00

It's appropriate time to make some plans for the future and it is time
to be happy. I have read this post and if I could I desire to suggest you few interesting
things or tips. Maybe you can write next articles referring to this article.
I desire to read even more things about it!

stefanie7Armstrong92.page.tl   2017/4/29 下午 07:38:00

Wonderful blog! I found it while browsing on Yahoo News.
Do you have any tips on how to get listed in Yahoo News?

I've been trying for a while but I never seem to get there!

Cheers

BHW   2017/4/13 下午 11:45:00

It's difficult to find knowledgeable people in this particular subject, but
you sound like you know what you're talking about! Thanks

柳雁   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的連結語法呢?

謝謝 ^^

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: