使用imageready建立html樣板

偷懶了很久沒有寫教學了呵.....

延伸閱讀

使用表格排版3:儲存格排版

使用表格排版3:儲存格排版

您有辦法完成如下面表格一樣的排版方式嗎？

左上 123 1	中上 123 1	右上 123 1
左中 123 1	中中 123 1	右中 123 1
左下 123 1	中下 123 1	右下 123 1

也許有人一開始就沒有辦法讓文字貼在儲存格的上邊界與下邊界，您可以點此看看如何讓文字貼近儲存格的九個位置

如果您知曉如何佈局了，卻無法知道怎麼樣做才可以讓中間這一排的欄位既靠左又至中，哪麼請點此閱覽相關的製作動畫

熟析如何善用儲存格的排版屬性與一般DIV的排版屬性加以配合，就可以讓自己的表格排版更具活力。

使用表格排版2：儲存格魔咒

將資料轉換成網頁格式的麻煩

一般來說，幾乎所有使用word的人，在使用表格時，都會用拖曳的方式來調整儲存格。當然，這在所見即所得的看法來看相當妥當。不過這樣的方便性，卻也造就了在轉換格式的時候產生了不方便的結果。

我們常常遇到，客戶使用word建構出來的資料，在word中的排版多半都屬於A4等，以紙張為準的排版方式。基本上，當你使用拖曳來調整表格的時候，都會自動鎖定成絕對單位，因此當要轉換成HTML時，又要在東拉拉、西拉拉。幾乎可以算是要再整個重新畫過一次了！

甚至可以說：乾脆重畫比較快！

這幾乎是美工的痛，客戶建構好的word資料，不管應用於平面設計或是網頁設計，都得重新在畫一次。為什麼要放棄客戶建構好的表格，而選擇重新建構會比較快？以網頁設計的觀點來說，因為要在客戶建構好的表格中重新排版，讓視覺上符合HTML，並不光是靠拖曳就能解決，有時候，在客戶建構好的複雜表格中修改排版時，你會在IE瀏覽器碰到像下列的狀況：

這儲存格明明還有很大的空間，文字卻偏偏被擠到這麼小的空間來!!

會發生上面的狀況，是因為兩欄儲存格加起來的總寬度，小於整個表格的總寬度，因此，視覺上整個表格還是會放大兩欄之間的空間，但實際上，儲存格的內容卻被儲存格的寬度設定所限制，只能呈現在被壓縮的範圍中。這個例子的解決方法還算簡單，只要用拖曳的方法，去拖曳兩欄之間的寬度，軟體就會自動幫你把兩者間的矛盾處裡好。但事實上，如果發生在極為複雜的表格中，就沒辦法這麼輕易的解決了！

以網頁版型來說，我們鮮少透過轉換的方式來建構網頁版型，但仍舊不能忽略，儲存格長寬設定與表格長寬設定之間的關連性。

使用Dreamweaver來適當的解決資料表格轉換的麻煩！

在Dreamweaver中可以透過特別的方式來轉換Office所建構的表格資料。

貼上特殊效果：

這個指令在「編輯→貼上特殊效果」中，它可以讓你選擇，要保留從word帶過來的樣式，還是最低限度的樣式就好。

匯入表格式資料：

如果今天要匯入的是Excel的資料，他的表格架構比word來的更麻煩，這時就可以先讓Excel轉換成文字檔，然後再交由Dreamweaver的「檔案→匯入→表格式資料」來處裡。

上面兩個辦法都可以讓你經過選擇，匯入較為陽春，但又不破壞整個表格結構的表格資料，在調整的同時，受限不會比原來的大。

Opera mini 3.0 讓手機看網頁更輕鬆

Opera簡介

簡介取自http://zh.wikipedia.org/w/index.php?title=Opera&variant=zh-tw的節錄

別人看報紙雙手超忙，我只用大拇指就能綜覽新聞。

Opera起初是一款挪威Opera Software ASA公司製作的支持多頁面標籤式瀏覽的網路瀏覽器，支持多種作業系統。Opera還有手機用的版本，在2006年更與Nintendo簽下合約，提供NDS及Wii遊樂器Opera瀏覽器軟體；也支持多語言，包括簡體中文和繁體中文。

Opera聲稱自己為「世界上最快」的瀏覽器，多年以來一直保持著世界第一的稱號！此外還具備了瀏覽區域大瀏覽區域大、多功能且小巧、高靈活性、高定製度、高安全性等優點。

不過由於Opera嚴格執行W3C網頁標準，不支持其它擴展標準和ActiveX，不支持某些只對IE相容的頁面，這樣瀏覽器安全性高，相容性低。以致閱覽一些網站無法順利顯示。

之前曾經撰寫過"CSS是什麼：對應多種瀏覽格式"關於網頁設計的變革，也不只一次提過Opera瀏覽器的好用，如果Opera對於各家網頁相容性更高的話，也許我也會捨棄用firefox，改用Opera呢。

專為低階手機而誕生的http網頁瀏覽器 Opera mini

Opera為手機做了Opera Mobile™ 與Opera Mini ™，其中Opera Mobile™是針對高階手機而誕生的瀏覽器，由於在下不是很有錢的人，因此只能跟你們介紹可以安裝在低階手機的Opera Mini ™ ，只要是彩色手機，且門號可以GPRS連線，就可以用手機在網路中衝浪了。又，無緣使用、又想一窺手機上網的感覺的朋友，可以按這裡試玩Opera mini模擬器 。

網頁的內容跟報紙一樣，內容複雜而且主題很多，即使你點選閱覽新聞內文，卻也仍舊有很多雜七雜八的相關聯結在頁面中。在電腦中你可以靠適當的排版來做主客區分，但手機的畫面更小，只能靠上下關係來區分重要內容與次要內容。如果你只使用表格排版的話，在手機上看起來將會破破爛爛。相關的說明，可以參考"CSS是什麼：對應多種瀏覽格式"一文。

3.0版新功能：縮編相同屬性的內文

前面提及，手機閱覽只能靠上下關係區分主客關係外，由於手機記憶體有限，有時候甚至一張網頁的內容，在手機上看起來是長的不得了！比方yahoo新聞安全帶繫腋下 視同未繫罰1500元一文，在新版的Opera min3.0，會把大量相同屬性的內文"縮編起來"。這樣可以更快速的閱讀網頁的主要內容，使用起來也更加人性化。

不過，由於判別的效果有限，有些應該要縮編的內容並沒有縮編。我想這是因為由於 xhtml 的向下相容規範使得沒辦法完全具備XML的優點，因此還沒辦法可以做到盡善盡美。我看見縮編功能之後在我心中想到的，是可以自由選擇我要打開哪一類型的樹狀類別，的一個使用者自由的閱讀權利。

RSS訂閱功能與相片發布部落格功能

RSS基於XML為要求的語言，是一套可以讓小容量裝置也可以輕鬆閱讀的格式，因此Opera mini也加入了RSS訂閱功能，不過，由於各家網站的RSS呈現定義不太一樣，當我訂閱Engadget Chinese RSS時，他的RSS內容居然讓我的 nokia6010記憶體不足而無法完全閱讀完! 但是用來看yahoo奇摩新聞的RSS是相當足夠的。

Opera mini也可以跟你的手機相機功能連動，讓你可以透過手機把你拍的相片發佈至部落格，不過僅限於在Opera的部落格才能上傳，不知道以後可不可以支援更多的部落格。

使用感想：相當優良的階段性軟體

在還沒有更好的手持式瀏覽網頁方法以前，Opera mini可以算是不錯的網頁瀏覽器了，如果網頁設計師能夠思考到這一個層面來設計網頁，我想對於使用手機上網應該是件很舒服的事情才對。

[轉載]CSS的明確性(Specificty)

原始文章：http://www.htmldog.com/guides/cssadvanced/specificity/

如果你對某個標籤元素，設定了兩個（或更多）具有衝突的CSS設定，瀏覽器會去遵循一些基本的規範，來決定使用哪個CSS設定。

這個看似不是很重要，而且在大多情況下，你並不會碰到這樣的衝突。但當你的CSS設定規模漸漸變得越來越大，越來越複雜時；或者開始修改舊版本的CSS檔案時，就有可能發生衝突了。

如果選擇符(selectors)都一樣，那麼後者的選擇符將優先於最先的選擇符。像以下的範例，如果你這樣設定：

p { color: red; }
p { color: blue; }

p標籤的顏色屬性將會是藍色，因為遵循了『後者優先』的規則。

然而，你不會選擇使用衝突宣告效果一樣的選擇符（因為那裡沒有大量的點），讓衝突完全合理的發生。不過，當你使用了巢狀選擇符，於以下的例子中：

div p { color: red; }
p { color: blue; }

也許看起來p標籤是置於div標籤內時，p標籤的顏色將會是藍色。依照『後者優先』看起來是這樣，但事實上他們會選用指定為紅色的第一個選擇符。基本上，更具體的選擇符，所造成的衝突才是本文要談論的主題。

實際上，選擇符個別都持有一個優先值。基本上，如果你使用的是id選擇符("#id名稱") 他的優先值是100；每個類(class)選擇符(".類名稱") 的優先值是10；而HTML標籤選擇符（任何HTML名稱）的優先值是1。當使用更具體的選擇符的時候，依照上述的數值將之總和，就可以得到該選擇符的優先值了。

• p ：的優先值是1（1個html選擇符）
• div p ：的優先值是2（2個html選擇符；1+1）
• .tree ：的優先值是10（1個類選擇符）
• div p.tree ：的優先值是12（兩個html選擇符與1個類選擇符；1+1+10）
• #baobab ：的優先值是100（1個id選擇符）
• body #content .alternative p ：的優先值是112（1個html選擇符，id選擇符，類選擇符，html選擇符；1+100+10+1）

所以依照上面列表的範例，div p.tree（優先值12） 的優先權就高於div p（優先值2）；body #content .alternative p（優先值112）的優先權就高於上述全部的範例。而不會依照『後者優先』的規則。

使用表格排版1：結構對齊

雖然這樣說很令人吃驚～向來不建議使用表格做網頁排版的我，今天這個標題實在可以上報紙頭條了。而「使用表格做網頁排版」系列，也並不是使用表格來做出合理的網頁排版。而是我們來借用表格，來解惑使用表格排版，會產生哪些不穩定的因素，以及要注意哪些設定事項。並且藉由表格，來讓大家對更正確的網頁排版方式有更明確的概念，未來，就可以更輕鬆的使用CSS排版，脫離table排版的魔咒了！

表格排版，要注意結構對齊

什麼是結構對齊，首先，我們必須要瞭解表格的HTML碼，表格的原始碼是HTML結構中最常見，最複雜的結構，因為多數網頁設計師都用表格排版，所以也算是也是讓HTML混亂的元兇之一。以下是表格不考慮所有屬性時，二欄二列的原始碼：

第一列第一欄	第一列第二欄
第二列第一欄	第二列第二欄

<table>
　<tr>
　　<td>第一列第一欄</td><td>第一列第二欄</td>
　</tr>
　<tr>
　　<td>第二列第一欄</td><td>第二列第二欄</td>
　</tr>
</table>

我們可以看見表格是用<table><tr><td>這三種標籤組合而成的，以下我們簡單的替這三個標籤做介紹

• <table>表格父標籤：表格的最父層結構，他本身可以做到表格與頁面間對齊方式、欄內內距、欄內行距設定，邊框寬度與邊框顏色，整個表格的寬度還可以指定所有欄標籤背景色。
• <tr>表格列標籤：表格的列結構，統整欄位高度，一般在看網頁的時候看不見他的視覺效果，但卻是使用表格排版時扮演最重要的角色。他可以控制所管轄的該列背景色，邊框顏色，背景顏色，背景影像，欄內對齊方式。
• <td>表格欄標籤，表格的最小結構，主要目的是讓網頁設計師放置文字，圖案等作用，可以控制本身的邊框顏色，背景顏色，欄內對齊方式。

表格的欄標籤與欄標籤，列標籤與列標籤之間會相互牽制。所以沒辦法做出不對齊的列或是不對齊的欄。如右圖，雖然在一個表格中切的出來，但是卻沒辦法讓所有切好的欄位，都具有自己的寬度與高度，換言之，欄位們會各被所屬的列所牽制著，當超出指定寬度與高度時，整個版面即會破裂。

因此，要做出右圖般複雜的欄與列排版，就要使用很多表格來幫忙完成，我會先做一個四列一欄的表格，然後在第二列中，再置入一個一列五欄的表格，下面依次，第三列與第四列再各置入一個二欄的表格；再回到第三列的第一欄放入一個六列的表格，第二欄放入一個二列的表格。看不懂上面步驟說明的，這裡有影片可以讓您觀看我是如何建構右圖的複雜排版的。