以下為本站文章分類清單

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

    以下為文章回應區

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

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