推 Tonnny:@@ 看了你的討論,真是獲益良多,觀念也更成熟些, 09/07 18:54
→ Tonnny:Thanks~~ 09/07 18:55
推 santin:謝謝指教^^ 09/08 11:23
推 etpig007:有深深的感觸!!! 09/13 00:46
※ 引述《santin (被雷劈)》之銘言：
: 既然要用CSS了，就別用表格排版，用DIV取代會比較好做事
您說 用DIV取代會比較"好做事"
我不清楚您的意思是什麼 如果您是指tableless排版比較簡單的話
我倒不這麼認為 畢竟以目前來說CSS layout存在著太多瀏覽器間的差異和bugs
(主要是box model和float modle, 絕大部分是來自IE/Win)
這些對於設計師來說帶來太多頭痛的問題 (要不然也不會有這麼多CSS Hacks)
您有沒有看過很多用Firefox看ok, 用IE看layout就亂掉的網頁?
目前CSS layout要做到盡善盡美比用table難多了 (當然, 簡單的layout
就不在我說得範圍內)
然而沒錯! 本來就不應該靠table來做視覺上的呈現, HTML/XHTML是"結構"化
的markup, 文件的展示就是靠CSS來定義, table-based的layout是將大部分的'視覺'
呈現又塞回HTML/XHTML本身, 違反了語意結構, 破壞了對於GUI瀏覽器外其他UA的親和性,
失去了視覺呈現調整彈性等等...
然而, 但單就親和力來說, 您建議原po捨棄表格排版,
我覺得並不那麼必要(或不一定要這麼做):
1. 原po並未指出他的target UA是什麼, 他也沒說他的網頁要適用於所有的UA,
如果他的設定就是限於一般電腦上CSS-enabled的GUI瀏覽器,
用表格排版也沒什麼不好.
2. 就算是考慮到其他的UA, 只要他的表格排版結構不是太複雜(比如用了多層的nested
tables), 對於親和性的影響其實也沒我們想像的那麼嚴重. 別於我們熟知的瀏覽器外,
mobile browsers, text browsers, screen readers ..., 對於table-based layout的網頁
或多或少都有一些輔助方便瀏覽的處理機制(畢竟, 現今大部分的網頁都還是用table
做排版, 不是?) 表格就是用來區隔資料的一種格式, 對於這些UA來說倒是可以充分利
用的一種"結構"(雖然語意不那麼正確)
3. 原po可能也沒時間重新設計網頁
先撇開結構的正確性不談, table也不是那麼evil(當然,這是指做排版而言,
屬於表列資料的就用table去做markup), 特定的狀況下表格排版也是不錯的選擇
: 表格就讓她回歸表格的功能...放資料
所以, 您建議原po放棄用表格排版應該是基於文件語意結構的正確性吧
可是您卻說:
用"DIV取代"會比較好做事
這也沒符合您的原意啊
div(和span)本身不帶有任何結構上的意義(semanticless), 它是用來grouping
一些markup, 主要是搭配CSS使用.
您提供的markup:
<div id=iBtn_top>研究生專區</div>
<div id=iBtn>
<div class=iBtn>
<a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu">
最新消息 </a></div>
<div class=iBtn>
<a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu">
最新消息 </a></div>
<div class=iBtn>
<a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu">
最新消息 </a></div>
<div class=iBtn>
<a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu">
最新消息 </a></div>
<div class=iBtn>
.
.
.
完全無結構可言, 對於任何一個UA來說, 語意上只是一團文字和連結, 或許您套用了CSS
在視覺上達成了可辨識性, 這樣的話原po用table又有何不可,
至少table還帶有結構上的意義, 親和力上絕對優於無結構的markup
這幾年來Web強調的結構(HTML/XHTML)與展示(CSS)的分離,
原因之一不就是為了加強文件的結構性,
您不用有meaning的markup那倒還不如回到用表格做排版的模式
(要不然, HTML/XHTML的body只要有div, span,a和object, 其他的tag我們都可以不要了,
反正用CSS在呈現上搞定就可以了)
所以, 原po的markup改成如下會不會比較有意義呢?
<h2 class="nav-head">研究生專區</h2>
<ul class="nav-menu">
<li class="nav-entry"><a href="index_stu.php?cat=news_stu">最新消息</a></li>
<li class="nav-entry"><a href="index_stu.php?cat=studying">學業專區</a></li>
<li class="nav-entry"><a href="index_stu.php?cat=grant">助學金專區</a></li>
.
.
.
</ul>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.131.19.3