Web_Design 板


LINE

首先要先以一般人的想法,当然,显示出的效果一样,CSS还会因为浏览器支援度而有显 示上得差异,表格轻松简单就可达到一样的效果,何乐而不为呢? 这个最简单的看法,请打开两种不同写法的HTML原始码然後找出假设你要改的地方,并且 修改版面成另一个模样看看,我相信你对CSS会开始产生改观。 从设计上来说,表格是死的,CSS+DOM是活的,写好的表格很难再改变版型,光是要增加 一个栏位就必须在每一个<tr>中都加上一个<td>,其中有些还需要合并,一个弄不好就会 让整个版面完全毁掉,而CSS只需要加一个Div然後写好position就好。 网站不会是永远长一样的,有一天你想要更换样板时,表格式设计势必必须为了新的版面 而全部重新规划表格(你不会想要增减表格栏位的,累死人),但是CSS+DOM的网页大多 数时间只需要换一个CSS就好。 试试看找一个跑的非常慢表格式设计的网页,还有一个关掉CSS的CSS+DOM网页,你可以看 看哪一个你可以看得懂! 现在网页讲究跨平台,电脑、手机、PDA都能够上网,解析度从宽度160~1920像素都有, 用表格设计就无法针对不同解析度提供不同的效果,想想一个宽度980的表格版面在现在 多数的电脑上都能够正常显示,但是在EeePC、手机与PDA这种低解析度的装置上呢?保证 拖曳卷轴就能让使用者立即关闭网页。 即使没有提供不同装置不同显示效果,许多手机用的Opera都内建会自动调整版面内容成 手机最适合阅读的方式,CSS网页可以完全照自己想要的分配内容顺序,可是表格却没这 优点,左边的栏位一定要在右边的栏位之前显示。甚至使用者如果使用Firefox配合一些 套件还可以自己选择自己想要的样板,这点表格式设计是不可能做到的。 我们也不能自私,照顾弱势是现在的趋势,盲人也有盲人专用电脑浏览器,CSS+DOM的网 页可以将最重要的内容优先显示,让盲人能立即得到想要的资讯。 从功能性上来说,现在流行利用Ajax的方式来不同步更新网页内容,JavaScript主要的 设计就是针对DOM而来设计,如果使用表格式设计,在动态更新内容的时候,一个不小心 增加或删除到主要表格的HTML,整个网页就会混乱掉,这点Div做的轻松多了! 现在许多部落格也有自订区块的功能,如果使用表格设计,上下顺序要对调时就会相当辛 苦,使用CSS则相对轻松许多。 有时在写程式时,要输出HTML时思考表格的配置时比较不合逻辑,我想要依上下方向输出 我要的内容,但是我必须要先由左到右的栏位都处理完毕後才能到下一行,这是不符合程 式逻辑的! 现今网站还有一个重要考量,就是SEO,让搜寻机器人能够轻易辨识网页内容增加重要性 ,表格式设计是他们的恶梦,因为很难辨别主要内容,且在见到内容前必须先看到一堆 对他们而言没有任何意义的<table><tr><td>...... 通常这种网站分数都很难比CSS设计 的来的高。 还有原po有说到的频宽与速度问题,使用宽频看网页不大容易注意,但是用手机GPRS或讯 号微弱的3G上去试试看,表格式设计一定要等到整个网页都读取完毕才能看懂,但是CSS 设计的却可以先看到没有样板的内容,等到CSS下载完毕才会换成一般的外观,对於想更 快看到内容的使用者而言,这样体贴多了! 当然我不是诋毁表格式设计,它能够存在这麽久也是有其道理,但是CSS也的确带来许许 多多的方便之处,设计师最好也能了解到这点,没意义的话就不会有人不断推行标准化网 页了,只要使用者使用经验好,不管怎样的设计都是好设计,怎样的技术并不重要。 以上是我的经验与看法,请多多指教 --



※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 118.167.168.22 ※ 编辑: rabbithenry 来自: 118.167.168.22 (05/04 01:13)
1F:推 ateclean:推 05/04 01:21
2F:推 etrexetrex:推 05/04 02:34
3F:推 adamp3:不推不行 05/04 03:17
4F:推 secobarbital:推 05/04 05:03
5F:推 austin119:推。 朝着无障碍验证前进中 / \ / \ / \ 05/04 07:44
6F:推 pm2001:我不太懂为什麽大家都把table定位在排版用? 05/04 09:17
7F:→ rabbithenry:因为以前没有CSS! 05/04 11:28
8F:推 takumi412:推, 因为没有CSS的时代, table排版是唯一解 05/04 12:16
9F:推 miau:推 05/04 15:43
10F:→ TonyQ:非常慢表格式设计的网页,还有一个关掉CSS的CSS+DOM网页 05/04 15:44
11F:→ TonyQ:这两个应该就画面应是前者比较容易「看得懂」吧o_o 05/04 15:44
12F:→ TonyQ:如果是说html code ,关掉css就有所矛盾了,不太懂这句话。 05/04 15:45
13F:推 pm2001:问题是table当初设计出来又不是给你排版用的 05/04 16:12
14F:→ pm2001:大家爱乱用变成是table的原罪? 05/04 16:12
15F:→ rabbithenry:意思是说,关掉CSS的网页会变成纯文字排版,表格未读 05/04 18:45
16F:→ rabbithenry:完会先从左上角开始一格格显示 05/04 18:46
17F:推 andrew43:几乎把所有教科书的说词都包括了!非常好文。 05/05 01:22
18F:→ aceone:以前就有CSS了啦 ^^" 只是旧浏览器比较不支援 05/05 06:58
19F:推 ikari512:推荐 07/30 03:44







like.gif 您可能会有兴趣的文章
icon.png[问题/行为] 猫晚上进房间会不会有憋尿问题
icon.pngRe: [闲聊] 选了错误的女孩成为魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一张
icon.png[心得] EMS高领长版毛衣.墨小楼MC1002
icon.png[分享] 丹龙隔热纸GE55+33+22
icon.png[问题] 清洗洗衣机
icon.png[寻物] 窗台下的空间
icon.png[闲聊] 双极の女神1 木魔爵
icon.png[售车] 新竹 1997 march 1297cc 白色 四门
icon.png[讨论] 能从照片感受到摄影者心情吗
icon.png[狂贺] 贺贺贺贺 贺!岛村卯月!总选举NO.1
icon.png[难过] 羡慕白皮肤的女生
icon.png阅读文章
icon.png[黑特]
icon.png[问题] SBK S1安装於安全帽位置
icon.png[分享] 旧woo100绝版开箱!!
icon.pngRe: [无言] 关於小包卫生纸
icon.png[开箱] E5-2683V3 RX480Strix 快睿C1 简单测试
icon.png[心得] 苍の海贼龙 地狱 执行者16PT
icon.png[售车] 1999年Virage iO 1.8EXi
icon.png[心得] 挑战33 LV10 狮子座pt solo
icon.png[闲聊] 手把手教你不被桶之新手主购教学
icon.png[分享] Civic Type R 量产版官方照无预警流出
icon.png[售车] Golf 4 2.0 银色 自排
icon.png[出售] Graco提篮汽座(有底座)2000元诚可议
icon.png[问题] 请问补牙材质掉了还能再补吗?(台中半年内
icon.png[问题] 44th 单曲 生写竟然都给重复的啊啊!
icon.png[心得] 华南红卡/icash 核卡
icon.png[问题] 拔牙矫正这样正常吗
icon.png[赠送] 老莫高业 初业 102年版
icon.png[情报] 三大行动支付 本季掀战火
icon.png[宝宝] 博客来Amos水蜡笔5/1特价五折
icon.pngRe: [心得] 新鲜人一些面试分享
icon.png[心得] 苍の海贼龙 地狱 麒麟25PT
icon.pngRe: [闲聊] (君の名は。雷慎入) 君名二创漫画翻译
icon.pngRe: [闲聊] OGN中场影片:失踪人口局 (英文字幕)
icon.png[问题] 台湾大哥大4G讯号差
icon.png[出售] [全国]全新千寻侘草LED灯, 水草

请输入看板名称,例如:BabyMother 或 站内搜寻

TOP