CSS是什麼：HTML原始碼的優化方案

難懂的HTML

雖然，HTML原始碼已經是最簡單的原始碼了，但很多人都討厭看原始碼，因為有太多太繁雜的設定涵蓋在裡面。其實，HTML碼繁雜的程度，不只人不想看，如果google、YAHOO搜尋引擎電腦程式，也可以選擇有選擇自主權的話，我想他也不會想看的。 這次我們來用 table與DIV ，產生一組3×3矩陣格，來比對原始碼的解讀難度。各位可以看看，到底哪個你比較願意看。

產生的結果

我們先來看看用table與用div產生的矩陣格結果會是如何：

table矩陣格	div矩陣格

如範例，外觀顯示沒什麼特別的不同。

原始碼探究

再來我們來看一下table與div之間產生的原始碼：

table矩陣格

div矩陣格

<table width="300" border="1" align="center" cellpadding="0" cellspacing="2" bordercolor="#999999">　 <tr>　　 <td width="96" height="96" align="center" valign="middle">1-1</td>　 <td width="96" height="96" align="center" valign="middle">1-2</td>　 <td width="96" height="96" align="center" valign="middle">1-3</td> </tr>　 <tr> <td width="96" height="96" align="center" valign="middle">2-1</td> <td width="96" height="96" align="center" valign="middle">2-2</td> <td width="96" height="96" align="center" valign="middle">2-3</td> </tr> <tr> <td width="96" height="96" align="center" valign="middle">3-1</td> <td width="96" height="96" align="center" valign="middle">3-2</td> <td width="96" height="96" align="center" valign="middle">3-3</td> </tr> </table>

<div class="table_box"> 　<div>1-1</div> 　<div>1-2</div> 　<div>1-3</div> 　<div>2-1</div> 　<div>2-2</div> 　<div>2-3</div> 　<div>3-1</div> 　<div>3-2</div> 　<div>3-3</div> </div>

結果根本就不用比，table的原始碼結構實在太多繁雜的內容了，比起來，div的原始碼乾淨又可以很快的看出是什麼內容。 可是，這裡就產生了一個疑問，為什麼div不需像table一樣有很多繁雜的必須屬性呢？ div當然有很多繁雜的必須屬性，只是被CSS樣式表給替代了

只需設定一次，就可以無限套用的CSS

從上面的div原始碼得知，先是用一層div，包覆著九個div標籤；總共10個div標籤，只有最外圍有設定一個class屬性「table_box」，這個「table_box」則是一個識別代號。有了這個識別代號，就可以讓CSS針對其代號做屬性的設定。 以下就是CSS針對「table_box」做的屬性原始碼： .table_box { 　padding: 1px; 　height: 300px; 　width: 300px; 　margin-top: 0px; 　margin-right: auto; 　margin-bottom: 0px; 　margin-left: auto; } .table_box div { 　margin: 1px; 　padding: 0px; 　float: left; 　height: 96px; 　width: 96px; 　text-align: center; 　vertical-align: middle; 　line-height: 96px; } div { 　border: 1px solid #999999; }

這樣比較起來，div的原始碼與table的原始碼感覺就一樣複雜了。不過，如果今天是要各做三組以上的3×3矩陣格，就能更清楚的知道哪個簡單哪個複雜了。

結論

對於擁有同樣屬性設定的html，只需用css設定一次就好了，其他的，只要設定class屬性，剩下的全部都不用在重覆定義，原始碼看起來更舒服，其實，對搜尋引擎來看，更能加速了解整個網頁的內容。多少對於關鍵字排名是有幫助的。

CSS是什麼：初步的認識

直接以範例來讓初步了解CSS可以做到什麼樣子

紅白機的超級瑪莉歐盜用音樂！？

消息來源

消息最初來自於all things mau，發表於2006年9月21日的文章。 詳細內容是指任天堂紅白機的超級瑪莉歐地下水管關卡的背景音樂，與遊戲發售前六年（1979年）的Friendship裡的音樂十分相似 其後有人真的找到了此張唱片比對，證實 以此爆出了相當的討論，我到目前為止還摸不透到底是怎麼回事，有心的大大還請留言補述一下 請按此觀看問題影片

延伸閱讀

• all things mau-------Nintendo Stole a Super Mario Theme from 6 years ealier?
• youtube-------------[ファミコン]スーパーマリオの曲は盗作です
• 「好きになった」---スーパーマリオ「盗作」とアンディ・ウォーホル

會說話的圖片--SVG

範例圖片

SVG已經被IE納為基本元件了，因此當你進來這一頁的時候，看見要你點選「同意啟用」的說明文字，安心的點選啟用就好了。不需另下載安裝程式。

SVG簡介

SVG乃是基於XML架構誕生的向量圖像語言，因此他也就具有「語意」，圖片上的文字是可以被選取的，所以自然也可以被搜尋。當然未來就可以被當作是資料而任意取用。 跟FLASH一樣，可以做動畫，可以設定事件，也可以納入點陣圖。也許也因此，FLASH為了與SVG區隔，強化了RIA與資料庫聯繫，以及媒體播放組件。企圖與標準格式有所差異。

更多參考

• Mozila的自然SVG Sample
• Adobe的 SVG View's Sample(Firefox瀏覽不能，只能用IE閱覽)
• 其他的一些跨瀏覽器 SVG Sample

網頁標籤的誤用舉例

前言

本篇我們將舉例「網頁編輯「人性」化」一文中所提及的

每個人利用相同工具產生出來的檔案，並不一定都是完全合理的格式。

來證實會產生此種錯誤的可能，並試著推理其原因。 我們將利用左側報紙的主標題『研究腦科學 兩岸競設中心』與次標題『清大腦科中心與美合作進行果蠅腦神經計畫 港、大陸則首創華人大腦銀行』。將其在dreamweaver的網頁編輯器上予以正確的顯示。

舉例

如右圖，我們將標題與次標題分成了第1與第2的實驗組，和第3與第4的對照組。 從外觀看起來皆相似的標題與次標題，各位可以想想看，如果是你，會怎麼利用畫面上的工具呈現標題與副標題？

如下圖，實驗組1的標題是利用屬性工具列的粗體按鈕[B]及字級32像素的文字作成

實驗組2的次標題則是利用屬性工具列的粗體按鈕[B]作成 對照組3的主標題則是利用字體選項的「標題1」設定來作成 對照組4的次標題則是利用字體選項的「標題4」設定來作成

探討-哪組才是最貼切的表達？

從視覺外觀來看，對照組跟實驗組都成功的以字體的大小來區別標題與次標題的重要性。然而，如果就html標籤來看，我們將得到以下四個語意：

1. 為一行粗體強調且字級放大的文字
2. 為一行粗體強調的文字
3. 為一行標題等級為「1」的文字
4. 為一行標題等級為「4」的文字

依此結果來看，實驗組1、2所呈現出來的語意，遠不及對照組3、4所呈現出來的語意來的貼切。 可惜的是，我們無法證實，使用者會選用實驗組的操作方式；還是會選用對照組的操作方式，來建立網頁標題與副標題。這需要經過統計與抽樣才能得知原因。 我們鮮少被告知選用工具與產生的電腦語意之間的關係與後果。 而依照上面的實驗舉例來看，面對如此多樣的工具按鈕，依循視覺上的經驗，尋找最有可能的工具按鈕來依樣做出視覺的外觀。而並非依循語意上的經驗來選出適合的工具按鈕的可能性是有的。

縮放網頁--大螢幕觀賞網頁的救星

我想有很多人跟我一樣，因為軟體有太多、太長的工具列，而不得不選擇較大的螢幕解析度的美編設計師。在觀賞大部分都是以1024*768為設計目標的網頁的時候，會不會有一種挑戰視力的感覺呢？

如果有的話，這個豆技巧第一回，就可以讓你好好參考了

用opera9.2以1280*1024觀看以1024*768為設計基準的yahoo奇摩網頁用opera9.2以1440*900觀看以1024*768為設計基準的yahoo奇摩網頁用opera9.2以1440*900全螢幕觀看以1024*768為設計基準的太郎電影部落格

這些圖片上傳的時候，flickr都做了適當的縮小，但是事實上這些畫面的截圖都是超過1024的寬螢幕畫面。透過opera的縮放網頁功能來把整個網頁給放大，我記得之前我在試用IE7試用版的時候，也有這個功能。但是做的不是很好，不知道正式版是否改進了

雖然這樣放大觀賞網頁，圖片看起來都會產生鋸齒狀，但是放大的文字閱讀起來甚是舒服。再者因為是整個網頁放大而不是局部文字放大，所以排版上也不會有很大的誤差，我個人算是很推崇這個功能的。

網頁編輯「人性」化

緣起

今天用google 搜尋有關「部落格排版」的相關文章，然後拜讀了墳墓兄的「去你的 CSS 排版！」，心有戚戚焉，接著又跟者找了很多。比方老貓學出版的「傳統編輯對部落格新手的寫作建議：一個呼籲」；還有Jas9 Taipei. 的「網頁設計標記語言工具」；以及"資訊人權貴" 之家的「文書處理第零課: 放下對外觀的執著」。然後就有了些心得，跟各位共享。

寫給人看，也要寫給電腦看

計算機是基於邏輯推理的機器，經過長時間的進化，漸漸的能夠處裡較為感性的圖像。而過去沒有網路的日子，要搜尋、解析資料，都得從書紙上把化成圖案的文字，靠人腦去理解、整理後，將得到的理論用文字「畫」在書紙上。

網路的誕生，更加速了資料的流通，更方便了資料的重組。但是多半還是得靠人腦去理解與整理與彙整，失去了電腦最初誕生的原因--「協助計算與判斷」

原因就在於，網路所用的傳遞語言，長久以來都被錯誤的利用，使得廣大的內容都得在靠人力去重組。因為每個人對於網路編輯軟體工具的認知有所差異，每個人利用相同工具產生出來的檔案，並不一定都是完全合理的格式。

將資料用適當的格式呈現，可以讓電腦在解析資料的時候得以正確的分類，繼而讓整體搜尋能力向上提昇，而不會像現在的搜尋引擎一樣，搜尋關鍵字卻找到了一堆不相干的東西！

依此「資料、結構、樣式」分開表述的理論就誕生了，這也是DIV大戰TABLE的開端！！

雖然不夠人性化，但是多少還是懂一點吧！

而推行分開表述至今，仍舊無法根絕錯誤的TABLE使用。我覺得是因為過去錯誤的理解已經深深的成為了網路出版的排版理論，加上中小企業對於網路傳遞的不解與短視。讓資料的完整性計畫繼續被漠視著。

雖然css與xhtml已經是很簡單的標籤了，但仍舊不夠人性化，使得大家不太願意深入去了解也是原因之一。

可是請想像一下：未來我們老了，也許老到眼睛不中用了，只能用聽的的時候，聽取以前年輕的時候的網路出版品。赫然發現因為資料結構的錯誤，聽起來讓人吐血......多麼令人唏噓阿......

所以，就算是為了自己老了以後的回憶，請多少還是懂一點xhtml跟css吧。

延伸閱讀

• 微風夕語部落格--去你的CSS排版
• 老貓學出版--傳統編輯對部落格新手的寫作建議：一個呼籲
• Jas9 Taipei. --網頁設計標記語言工具
• "資訊人權貴"之家--文書處理第零課：放下對外觀的執著
• 維基百科--XML：歷史

Flock試用報告

編寫部落格邊試用，我想是最能測試軟體的方式了吧(笑）

在充滿了眾人的期待中,「Flock」這個社會化瀏覽器。目前為0.7.1版，在經過各界的使用後, 大家對它褒貶不一, 但,「Flock」仍然有其特色, 因此在此介紹給大家。

---

社會化瀏覽器

您可以按此到官方網站，觀看動畫介紹，可以讓你更快速的了解Floxk的功能

Goston's Blog稱Flock為「社會化瀏覽器」。但我想，即使我更詳細的定義它為「網路社會瀏覽器」，各位應該還是會對此定義感到莫名其妙。（尤其對自己已經開始生活在WEB2.0時代還不知道的人）

所以我想直接來看看這個瀏覽器到底具備了什麼特別的特色，讓大家來看看是不是真的需要這樣的瀏覽器，繼而慢慢了解被定義叫做「社會化瀏覽器」的原因。

以前常常聽人問到：「怎麼在留言板貼圖？」、「怎麼寫超連結？」、「我的網站怎麼圖片都不見了？」。即使現在大家在用部落格，對於要引用別人部落格的圖片，或是電影官方網站的圖片等等。卻也還是沒辦法精確的直接引用在自己的部落格當中。

然後，由於IE太久沒有更新與升級，使得Firefox的誕生，得到了廣大網民的支持：值得一提的外掛功能，讓使用者得以依照自己的想法訂做可以更快速瀏覽的瀏覽器外，比IE更完整支援的CSS與PNG圖片透明支援，也是讓很多網站與程式設計師紛紛投靠的原因。

Firefox當時的滑鼠右鍵就可以針對圖片去索取所需的資料，包括另開視窗檢視、圖片網址等，也可以檢視頁面內容，把所有的圖片跟媒體檔作成列表來觀看或另存新檔。這樣的方式，雖然對於撰寫部落格或是貼圖語法沒什麼太大的幫助，但是卻著實的加速了整個作業的動作。

因此，為了能讓大家更輕鬆的編輯部落格，「Flock」誕生了

---

上傳、貼圖、超連結：一秒搞定！

簡單的說，Flock可以讓你利用滑鼠拖曳就可以完成「上傳圖片」「完成貼圖」「編輯部落格或留言的網頁語法」的網頁瀏覽器，你不用在去熟悉每個網站提供的上傳介面，「只用拖曳」，就可以幫你作成，另外，你還可以先把你看到的好圖記在一個Flock提供的記事介面，然後，到你想分享的討論區或是部落格留言板「拖曳」到對話框，輕鬆完成分享的動作。

其flock誕生的出發點雖然不錯，但與前篇「Windows Live Writer試用報告」一樣，由於不同黨派的blog與相簿設定都不一樣，上傳圖片部份僅只有支援flick與Photobucket兩個網站而已。

革命尚未成功

至於部落格編輯器部份，其實跟windows live writer比起來差的頗遠，工具介面更為精簡，由於沒有從本機檔案插入圖片的功能，也沒有圖片編排設定；文字工具列更簡單，連定義文字顏色都沒有；更沒有精確的預覽介面，全部得用Source模式去手寫html來定義。不過，他也不是全然比不上windows live writer，它可以把你在本機編寫的部落格轉存為html格式，這跟windows live writer的封閉檔案格式就開放的許多。

總而言之，不管是windows live writer或是Flock，各有各的優點，目的都是為了加速各位網民的使用速度與效率，而我相信確實達到了這兩個軟體想要達到的目的（雖然還不是完全），革命尚未成功，要使用輔助軟體達到完美的排版效果，我想還尚須一段時間的等候吧。

technorati tags:試用報告

Windows Live Writer試用報告

Windows Live Writer（以下簡稱WLW）號稱「部落格軟體」。那麼當然就要好好的試驗一下，他能對排版的支援到什麼情況了呦。

WLW是 Microsoft 於 2006/8/11 日所推出的 Remote Blogging  Software，你可以透過 Windows Live Writer 直接將文章打好，儲存在電腦內。等到連上網路時，再把文章上傳到你的 Blog 中。

WLW還支援開放式外掛，上圖就是由Filckr照片輸入外掛的圖片。圖片可以藉由快速介面設定置左、置右、置中的基本排版對齊外，還可以簡單的設置margin，讓圖片與文字間可以有些許空格

不過，從電腦檔案中置入的圖片，會使的發佈的時候面臨FTP的設定問題，現在很少有開放式的FTP空間給予放置，所以得借助前面所提的「外掛」，或是藉由其他軟體先行上傳，但Inter Map功能所產生的圖片由於是軟體產生的圖片，因此很難找到他到底放在電腦裡的什麼地方！！

---

從介面來看。對於排版能做的也有限，沒有表格功能；甚至連水平分隔線都沒有按鈕介面，只能藉由html code介面去輸入。除了html code視覺介面外。還有另外三個視覺介面，甚至可以不閉上傳，就能夠在你的電腦直接模擬發佈後的樣子。是個非常親切的視覺介面。

就算已經把在WLW寫好的文章發佈成了網誌，還是可以以開啟舊檔的方式來修改並發佈，而不是會在發佈另一個新網誌。不過可惜的是，如果你藉由網頁介面來修改內容的話，WLW就沒辦法得知並下載更新後的內容於你的電腦中了，換言之，還可能會造成覆蓋新檔的意外！

---

總結來說，WLW帶來的，是簡單方便，又不被連線限制的好軟體，如果可以打破不同黨派的blog設定，這樣的東西，我還滿建議大家來安裝的，慢慢的寫網誌，然後慢慢的設定您網誌上的排版。讓閱覽者看的更舒服！！

引用內容

如何在 LifeType 上使用 Windows Live Writer (1)

自由言論的可貴與尊重

本來我以為沒那麼誇張與嚴重，但漸漸的對照著FUAC（自動播放撲滅委員會）與音樂愛好者兩者的訴求及其言論。卻發現在發表自由言論的過程當中，細微的瑕疵與情緒性的發表，造成焦點模糊與不必要的衝突。使得原來的訴求漸漸的失去了平衡

這似乎不光是此事件而已，對於自由言論的網路或是國家，這似乎一個嚴重的通病

以下我以以此事件來舉例說明，並把兩個立場的看法平均的放在左右兩側列出，為求的是一種對兩方看法的平衡所作的訴求排版，也許會讓你看的很不舒服，在下先道歉。

FUAC的各位，『打擊』這是你們的訴求嘛？

「撲滅」的字眼雖然僅限於立場上的幽默，但仍讓對立者反感。繼而引發眾多音樂愛好網民的不諒解及反抗。對於FUAC而言，這是他們想要的訴求嘛？

也因此，這些音樂愛好者的網民，他們就算很認真的看了FUAC的訴求，卻也很難去正面面對事情的原因，因為一開始，他們就沒接受到善意的告知，又何苦需要善意的回應？對於這些音樂愛好者來說，自動播放並不需要嚴重到被「撲滅」的地步

對於廣大的音樂愛好者們，你們聽到真正的聲音了嘛？

在你們不滿自己為什麼會被指名「撲滅」的同時你聽見應該聽到的，「真正」的聲音嘛？

我想，各位音樂愛好者所該正視的，不光是宣示自動音樂的正當性而已，不只是「自己手動按掉正在播放中的音樂」，或是「上班偷閒記得把喇叭關掉」那麼簡單而已。即使這是你自己的空間，可以自由的展現你的個性，但「所謂的自由，即是在不妨礙他人自由下，才算自由」的。自動播放可以給人帶來方面，但確實也會給人帶來不變，不是嗎？

顯然的，在我看到的部落格中，都沒有正視，與尊重這個問題的核心與對方的立場，繼而本來看似很正當的訴求被模糊，被攻擊，互揭蹌疤

或許這不該怪我們廣大世界的網民，所謂「上樑不正、下樑歪」，看看新聞上各位官員們高來高去。就知道為什麼大家現在都這樣處理事情了吧

引用網站

[FUAC]自動播放撲滅委員會
我對〈自動播放撲滅委員會〉的看法
自由，是離開，不是撲滅

p.s:第一次使用「引用」，不小心按了太多次，被我引用的網站會出現重覆引用的訊息，在此向被我引用的網站致歉，小的不會在犯了