以下為本站文章分類清單

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

以下為文章回應區

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

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

謝謝 ^^

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