WangAguo wa wa wa: 2007/06

2007年6月12日星期二

無障礙網頁設計用表格排版合理嗎

正在了解無障礙網頁設計, 找到了台灣的無障礙網路空間服務網, 試了以後發現網站都是用表格來做排版!

寫了一封信給, 無障礙網路空間服務網

標題: 無障礙用表格來做排版合理嗎??
無障礙檢測時, 有看到以下這一條需人工檢測的部份.
# 5.1:H105100 對於每一個存放資料的表格（不是用來排版），標示出行和列的標題(7個)

可是你們的網站和其它貼有無障礙標簽的網站卻都是用表格來做排版.
<table border="0" cellspacing="0" cellpadding="0" summary="版型表格：頁頭">
還貼了這麼大字的summary="版型表格：頁頭", 用來通過機器檢測.

想請問, 這樣子合理嗎? 因為我正在了解製做無障礙網頁中, 希望您們能夠解答, 謝謝.

回答如下:

您好

本人是研考會無障礙網路空間推動的業務承辦窗口，就您的問題，謹補充如下：

表格分排版表格及資料表格，最重要的是，網頁設計人員必須能分清楚那些屬排版表格？那些又屬資料表格？
不然，就會不論排版表格或資料表格，一律以〔排版表格〕掩飾過機器檢測！

若為排版表格，其摘要說明使用〔排版表格〕，並沒有無合理之處；

但若是資料表格，就必須釐清何謂是行列標題？何謂表格標題？
行列標題，請使用th標籤標示，您可參考http://enable.nat.gov.tw/document/5_1.jsp的範例說明！
表格標題，必須使用caption標籤，您可參考http://enable.nat.gov.tw/document/5_6.jsp的範例說明！
至於，資料表格的摘要說明，請使用summary標籤，當然不可以〔排版表格〕作為說明，必須就表格內容提供有意義的說明，您可參考http://enable.nat.gov.tw/document/5_5.jsp的範例說明！

在推動過程中，的確發現到，許多網頁的表格問題，或者其他人工檢測問題，均未確實做好自我人工檢視作業，此部分盼網站承辦人員基於無障礙旨意，建置可讀性佳的網頁，本會亦將持續性的觀念宣導！

謝謝！

2007年6月8日星期五

網站開發良藥

urlTea: urlTea 好用的縮短網址服務
urlTea是一個好用的網址縮短服務，這個服務和其他的縮短網址服務有一點不同的地方，urlTea可以在產生的網址後面用「?」再加上你自己喜愛的字串，方便用來描述這個網址，以本站為例：
縮短網址後：http://urltea.com/253
縮短網址加字串：http://urltea.com/253?hotnews

以上二個網址都會連到本站的，但第二個網址加了一些字串，可方便辨別，測試過後覺得他的速度也蠻快的喔！不過因為Server在國外就拖慢了速度。
I Want Hot News
Ajaxload: Ajax 載入中的圖片gif產生器
everystockphoto: [推薦]everystockphoto 超過百萬張的免費圖片
everystockphoto是一個收集了上百萬張的圖片，基於creative commons的精神，你可以免費使用，以後會繼續增加圖庫，讚讚讚！欠圖檔的人可以到這裡來尋寶。
I Want Hot News
FONTS500: 500個免費英文字型
Fonts 500顧名思義就是提供500個免費字型，每個都很精美，比較偏藝術風，對於一些網頁設的美工人員，應該有蠻大的用處，下圖是擷取幾個字型的畫面。
I Want Hot News
IconFinder: iconfinder是專門尋找icon的搜尋引擎，只要輸入你要找的名稱，就會列出資料庫中所有的icon，目前只有上萬個icon，相信不久後應該會越來越多，可以選擇大小來呈現要找的icon！
I Want Hot News
精選25款免費字型: 由Vukan Karadzic所精選的25款免費字型，喜歡搜集的人可以看瞧瞧，我個人偏愛手寫字型及簽名字型！I Want Hot News
IconArchive: 有很多的Icon，但好像都只有個人使用及非商業．
搜尋的時候加上 -"personal desktop use only"-"non-commercial use"，就可以排除．
OSWD - Open Source Web Design: Open Source Web Design is a site to download free web design templates and share yours with others. We help make the internet a prettier place.
Currently 2080 free designs!

網頁設計必看網站

Smashing Magazine有很多的好文章

CSS 好東西

53個你不能錯過的CSS技巧
12個基本CSS樣版下載
2006年50個基於CSS的最佳網頁設計
為何使用表格排版是不明智的: 說明應讓用div加CSS的排版方式，而非用表格。
CSS Browser Selector: 可以針對不同的Browser來設定CSS的CSS Browser Selector。
w3schools css 參考
maxdesign css教學
Sample CSS Page Layouts
IE7: IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6

線上工具–HTML unicode

資料來源: http://joshnote.wordpress.com/2007/02/13/%e7%b7%9a%e4%b8%8a%e5%b7%a5%e5%85%b7%e2%80%93html-unicode/

當你在Blog要貼上html程式碼時，最麻煩的是什麼？

我想有經驗的人一定知道，那就是<和>這兩個符號，常常動不動就被吃掉，偏偏這兩個符號又最常用，在我剛用Blogger的時侯，就常常為了要使<和>這兩個符號正常顯示而花了不少時間。

現在我介紹給各位一個好物，很方便的線上工具–HTML unicode，如下圖：

當你下次要在Blog上貼上Html程式碼時，只要到HTML unicode這裡，把你的程式碼貼在 Original這個textarea內，它就會把轉換好的程式碼顯示在Charcode這個textarea之中，你再Copy到你的文章之中就行了，很方便吧！

2007年6月7日星期四

Blogger新版Template的ReadMore

設定->格式->文章範本

1. 填入: 這裡是文章的開頭。 <span class="fullpost">這裡是文章的其餘部份。</span>
2. 存檔

範本->修改 HTML

0.備份 / 還原模版->在編輯模版之前，先儲存一份模版。 (重要)

1.核選"展開小裝置範本" (重要)

2.在<Head></Head>中加入

<style type="text/css">
  <b:if cond='data:blog.pageType == "item"'> 
    span.fullpost {display:inline;}
  <b:else/>
    span.fullpost {display:none;} 
  </b:if>
</style>

3.在<div class='post-body'></div>中加入

<b:if cond='data:blog.pageType != "item"'>
  <br/>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>Read more!</a>
  <b:else/>
    <b:if cond='data:post.url'>
      <a expr:href='data:post.url'>Read more!</a>
    <b:else/>
      <data:post.title/>
    </b:if>
  </b:if>
</b:if>

接著再新增一篇文章試試! 把不顯示的部份放在<span class="fullpost"></span>之中.
您可再做一些調整讓畫面更好看.
以上是給新版本Blogger的Template用的.

以下是相關的說明網頁, 都有一些小問題, 舊版的是"傳統範本", 新本的是[版面配置], 我是依照說明再做修改才能運作的.
原說明的<a href="<data:post.url/>">Read more!</a>是有問題的!

http://help.blogger.com/bin/answer.py?answer=42215
http://help.blogger.com/bin/answer.py?answer=42214
http://help.blogger.com/bin/answer.py?answer=46995

網頁

2007年6月12日 星期二