<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/main.xsl"?>
<b:blog xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://blog.othree.net"  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://blog.othree.net http://blog.othree.net/blooog.xsd">
	<b:blogTitle>O3noBLOG</b:blogTitle>
	<b:blogDescription></b:blogDescription>
	<b:entries>
		<b:entriesMeta>
			<b:listType>c</b:listType>
			<b:listData listID="css-html">css-html</b:listData>
		</b:entriesMeta>

		<b:entry entryID="000497" baseName="tfoot">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2008-03-17</b:date>
				<b:time>00:25:41</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>tfoot</b:title>
			<b:content>
				<b:summary>tfoot是table裡面用來把表格列群組化用的標籤之一，專門用在表格底端的表格列，不過要注意的是他不能放在tbody之後，而是要用thead、tfoot、tbody這樣的順序才對。...</b:summary>
				<b:mainContent><p><a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3">tfoot</a>是table裡面用來把表格列群組化用的標籤之一，專門用在表格底端的表格列，不過要注意的是他不能放在tbody之後，而是要用thead、tfoot、tbody這樣的順序才對。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="2"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000487" baseName="w3c-publish-html-5-wd">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2008-01-23</b:date>
				<b:time>01:59:14</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>W3C發佈HTML 5 Working Draft</b:title>
			<b:content>
				<b:summary>W3C剛發佈的HTML 5 Working Draft，正熱，不過太晚了，我已經沒力看改了什麼東西，明天醒來應該也可以看到不少評論了吧。 不過我其實還是快速看過目錄，nl(navigation list)和h(heading)好像不見了。...</b:summary>
				<b:mainContent><p><span class="caps">W3C</span>剛發佈的<a href="http://www.w3.org/TR/2008/WD-html5-20080122/"><span class="caps">HTML</span> 5 Working Draft</a>，正熱，不過太晚了，我已經沒力看改了什麼東西，明天醒來應該也可以看到不少評論了吧。</p>

<p>不過我其實還是快速看過目錄，nl(navigation list)和h(heading)好像不見了。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="0"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000483" baseName="eric-meyer-renew-style-reset">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2008-01-17</b:date>
				<b:time>23:39:25</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>Eric Meyer 更新 style resetting</b:title>
			<b:content>
				<b:summary>在Resetting Again這篇文章中，Eric Meyer更新了好幾個月沒修改過的style resetting（好像一直沒正式的名稱），真的改的地方其實不多，主要的修改是原來是設定為繼承的幾個地方，其他還有一些小變動，以下是完整code： html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong,...</b:summary>
				<b:mainContent><p>在<a href="http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/">Resetting Again</a>這篇文章中，Eric Meyer更新了好幾個月沒修改過的style resetting（好像一直沒正式的名稱），真的改的地方其實不多，主要的修改是原來是設定為<strong>繼承</strong>的幾個地方，其他還有一些小變動，以下是完整code：</p><pre><code>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing=&quot;0&quot;' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}</code></pre><h4>給不知道這是什麼的人</h4>

<p>這段CSS是用來把各種瀏覽器的預設樣式覆蓋掉，把整個網頁變成沒有樣式的狀態，h1、h2、p等標籤都會是一樣大小的字體、字集，使用方法就是在任何你自己的CSS之前先在網頁上套用這段CSS。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="0"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000481" baseName="html-4-10years">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2007-12-30</b:date>
				<b:time>16:00:05</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>HTML 4 10年了</b:title>
			<b:content>
				<b:summary>就在前兩週的18號，HTML 4堂堂邁入第10年，這10年過去了，後續的規格也推出不少，像是HTML 4.01、XHTML 1.0、XHTML 1.1，不過現在比較被推薦來使用的卻還是1999年推出的HTML 4.01，10年過去只增加了0.1版，還真是有股淡淡的哀傷啊，不過這也沒辦法，網路標準的制定和普及與一般程式語言不一樣，不只是W3C制定好就好，瀏覽器還要支援，接著還要等普羅大眾都有更新，網頁開發人員願意用，每個新標準制定出來到普及都有好長一段路要走（想像還要10年才制定的完的CSS3普及的那一天），在這條路上有個地方過不去，基本上就是失敗了，XHTML就是這樣，以Tim Bernes Lee理想的語意網來說，讓文件的語意結構完整是必要的，不過XHTML卻一口氣跑的太多步，先不看XHTML 2.0草案的改動程度，光是XHTML 1.1就已經讓網頁開發人員叫苦連篇，真正的XHTML 1.1要修改mime/type，也因此只要有一點錯誤，網頁就呈現不出來，語法又要求很嚴謹，可以用的entity只有三個，這三個符號不是做標籤使用時就一定要用entity表示之，不然網頁也會掛掉...etc，實在是麻煩一堆，然後看著XHTML 2.0更可怕的草案，終於瀏覽器開發者決定自己跑出來制定HTML 5，還有強化版的Web Forms 2.0，在一千零一網中，Tim Bernes Lee就提到他認為網際網路上的流通資訊和標準不應該為任意單一企業或組織所壟斷，即使是W3C也一樣，所以，最後W3C終於決定重組HTML Working Group，接納HTML 5進入，讓下一版功能更完整，編寫也容易的HTML標準的出現，露出曙光！ 我想，大概再等個10年就可以用了吧。...</b:summary>
				<b:mainContent><p>就在前兩週的18號，<a href="http://www.w3.org/TR/REC-html40-971218/"><span class="caps">HTML</span> 4</a>堂堂邁入第10年，這10年過去了，後續的規格也推出不少，像是<a href="http://www.w3.org/TR/html401/"><span class="caps">HTML</span> 4.01</a>、<a href="http://www.w3.org/TR/2002/REC-xhtml1-20020801/"><span class="caps">XHTML</span> 1.0</a>、<a href="http://www.w3.org/TR/2001/REC-xhtml11-20010531/"><span class="caps">XHTML</span> 1.1</a>，不過現在比較被推薦來使用的卻還是1999年推出的<strong><span class="caps">HTML</span> 4.01</strong>，10年過去只增加了0.1版，還真是有股淡淡的哀傷啊，不過這也沒辦法，網路標準的制定和普及與一般程式語言不一樣，不只是W3C制定好就好，瀏覽器還要支援，接著還要等普羅大眾都有更新，網頁開發人員願意用，每個新標準制定出來到普及都有好長一段路要走（想像還要10年才制定的完的CSS3普及的那一天），在這條路上有個地方過不去，基本上就是失敗了，XHTML就是這樣，以Tim Bernes Lee理想的語意網來說，讓文件的語意結構完整是必要的，不過XHTML卻一口氣跑的太多步，先不看XHTML 2.0草案的改動程度，光是XHTML 1.1就已經讓網頁開發人員叫苦連篇，真正的XHTML 1.1要修改mime/type，也因此只要有一點錯誤，網頁就呈現不出來，語法又要求很嚴謹，可以用的entity只有三個，這三個符號不是做標籤使用時就一定要用entity表示之，不然網頁也會掛掉...etc，實在是麻煩一堆，然後看著XHTML 2.0更可怕的草案，終於瀏覽器開發者決定自己跑出來制定<a href="http://www.whatwg.org/specs/web-apps/current-work/"><span class="caps">HTML</span> 5</a>，還有強化版的<a href="http://www.whatwg.org/specs/web-forms/current-work/">Web Forms 2.0</a>，在一千零一網中，Tim Bernes Lee就提到他認為網際網路上的流通資訊和標準不應該為任意單一企業或組織所壟斷，即使是W3C也一樣，所以，最後W3C終於決定重組HTML Working Group，接納HTML 5進入，讓下一版功能更完整，編寫也容易的HTML標準的出現，露出曙光！</p>

<p>我想，大概再等個10年就可以用了吧。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="2"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000467" baseName="divitis">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2007-10-11</b:date>
				<b:time>15:33:58</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>divitis</b:title>
			<b:content>
				<b:summary>Divitis，指在編寫網頁原始碼時，過度使用div標籤的人，剛好看到個範例，就是巴哈姆特，打開原始碼來看，在body內，不看script標籤，一開始就是： &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;mainOut&quot;&gt; &lt;div class=&quot;main&quot;&gt; &lt;div class=&quot;left&quot;&gt; 然後最後面則是： &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;...</b:summary>
				<b:mainContent><p><strong>Divitis</strong>，指在編寫網頁原始碼時，過度使用div標籤的人，剛好看到個範例，就是<a href="http://www.gamer.com.tw/">巴哈姆特</a>，打開原始碼來看，在body內，不看script標籤，一開始就是：</p><pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;mainOut&quot;&gt;
&lt;div class=&quot;main&quot;&gt;
&lt;div class=&quot;left&quot;&gt;</code></pre><p>然後最後面則是：</p><pre><code>&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="4"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000465" baseName="web-kit-support-web-fonts">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2007-10-05</b:date>
				<b:time>01:25:24</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>web-kit支援網路字型</b:title>
			<b:content>
				<b:summary>今天的消息，web-kit已經可以支援之前在web fonts這篇文章提到的網路字型，剛剛測試過後中文也支援，繪圖速度比較慢，另外字型下載完之前字都不會畫出來，而中文字型檔案果然大，我的螢幕黑掉一次才抓完，目前看來在有漢字的語系還是不實用。...</b:summary>
				<b:mainContent><p>今天的<a href="http://webkit.org/blog/124/downloadable-fonts/">消息</a>，web-kit已經可以支援之前在<a href="http://blog.othree.net/log/2007/08/30/web-fonts/">web fonts</a>這篇文章提到的<strong>網路字型</strong>，剛剛測試過後中文也支援，繪圖速度比較慢，另外字型下載完之前字都不會畫出來，而中文字型檔案果然大，我的螢幕黑掉一次才抓完，目前看來在有漢字的語系還是不實用。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="0"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000455" baseName="web_fonts">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2007-08-30</b:date>
				<b:time>17:21:19</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>web fonts</b:title>
			<b:content>
				<b:summary>A List Apart最新一期裡的CSS @ Ten: The Next Big Thing這篇文章裡面，提到接下來CSS會發展的一個主要方向，就是網路字型(web fonts)，這其實也不是新東西，早在1998年的CSS2裡面就有font-face，不過很不幸的，IE和Netscape都不支援truetype字型，結果網頁設計師都沒在使用，然後到了CSS2.1這功能也被屏棄了，現在這功能有希望回來了，不過其實我不是很樂觀啦，或許web fonts會回到CSS，不過等CSS 3制定出來不知道還要多久（個人推測10年），而且更大的問題是中文字型和歐美語系字型的大小差很多，如果做到像PDF可以只包含需要的部份，那變成伺服器端要支援，想起來就是一整個很難實行，中日文這些有漢字的地方大概還是只能繼續用系統有內建的字型和圖片吧。...</b:summary>
				<b:mainContent><p><a href="http://www.alistapart.com/">A List Apart</a>最新一期裡的<a href="http://www.alistapart.com/articles/cssatten"><span class="caps">CSS </span>@ Ten: The Next Big Thing</a>這篇文章裡面，提到接下來CSS會發展的一個主要方向，就是網路字型(web fonts)，這其實也不是新東西，早在1998年的CSS2裡面就有<a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">font-face</a>，不過很不幸的，IE和Netscape都不支援truetype字型，結果網頁設計師都沒在使用，然後到了<a href="http://www.w3.org/TR/CSS21/"><span class="caps">CSS2.1</span></a>這功能也被屏棄了，現在這功能有希望回來了，不過其實我不是很樂觀啦，或許web fonts會回到CSS，不過等CSS 3制定出來不知道還要多久（個人推測10年），而且更大的問題是中文字型和歐美語系字型的大小差很多，如果做到像PDF可以只包含需要的部份，那變成伺服器端要支援，想起來就是一整個很難實行，中日文這些有漢字的地方大概還是只能繼續用系統有內建的字型和圖片吧。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="3"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000454" baseName="setting-background">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2007-08-29</b:date>
				<b:time>11:08:20</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>CSS設定背景時</b:title>
			<b:content>
				<b:summary>最近逛網站時比較常發現的小問題，很多人在設計版面時，為了質感或是排版會使用背景圖，而使用了背景圖，不過使用了背景圖，卻沒設定背景色，這樣會有什麼問題呢？...</b:summary>
				<b:mainContent><p>最近逛網站時比較常發現的小問題，很多人在設計版面時，為了質感或是排版會使用背景圖，而使用了背景圖，不過使用了背景圖，卻沒設定背景色，這樣會有什麼問題呢？</p></b:mainContent>
				<b:extendContent><p>這邊先拿<a href="http://b-oo-k.net/blog/">老貓學出版</a>為例，我在頁面讀取到一半時就抓了一張圖，可以發現到在背景圖還沒讀完時，內文和最外層的背景色會混在一起，老貓學出版的狀況還算好，對比還夠，不過有不少網站最外層背景的顏色更深，這時候就會造成對比不足無法閱讀的狀況。</p>

<p><a href="http://blog.othree.net/log/2007/08/29/setting-background/b-oo-k.png" class="thickbox"><img alt="圖片還沒出來時，背景色和文字的對比可能不夠" src="http://blog.othree.net/log/2007/08/29/setting-background/b-oo-k-thumb-400x300.png" width="400" height="300" /></a></p>

<p>不過有人會認為「這是讀取到一半的時候啊，不能這樣說。」而我要說的是，訪客都是不想等的，如果文字已經先讀取完了，為什麼不讓訪客可以先開始看內容呢？再來，雖然現在可能沒什麼人因為網路速度問題預設關閉讀取圖片，但是如果真的遇到了，那他就會看不清楚文字了，內容才是網站的主體，如果因為一些小疏忽讓傳達的過程出現障礙，那真是很可惜。</p>

<p class="update">更新：老貓學出版那已經修改過了，所以現在看不到上面所描述的狀況摟^^。</p></b:extendContent>
			</b:content>

			<b:comments commentCount="3"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000437" baseName="serif-sans-serif">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2007-07-24</b:date>
				<b:time>22:20:18</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>襯線字/無襯線字</b:title>
			<b:content>
				<b:summary> 在調整瀏覽器、設定網頁字型的時候，我常常會看到襯線字和非襯線字這兩個名詞，不過一直不了解差異在哪裡，直到前陣子看完寫給大家的平面設計書後才終於了解。...</b:summary>
				<b:mainContent><p><img alt="Firefox的字型設定有比例字型、襯線字型、無襯線字型和等寬字型四種可以分別設定" src="http://blog.othree.net/log/2007/07/24/serif-sans-serif/fx-serif.png" width="436" height="378" /></p>

<p>在調整瀏覽器、設定網頁字型的時候，我常常會看到<strong>襯線字</strong>和<strong>非襯線字</strong>這兩個名詞，不過一直不了解差異在哪裡，直到前陣子看完<a href="http://www.anobii.com/books/001b4f1a416c416677/">寫給大家的平面設計書</a>後才終於了解。</p></b:mainContent>
				<b:extendContent><p><img alt="襯線字體在筆劃末端會有裝飾線條" src="http://blog.othree.net/log/2007/07/24/serif-sans-serif/serif.png" width="400" height="300" /></p>

<p>在上圖中有兩個不同的<strong>b</strong>，左邊的是Arial字型，非襯線字，右邊的則是Times New Roman這個襯線字型，襯線字和非襯線字最主要的差異就是在我用紅色圈圈起來的地方，襯線字會有裝飾用的線條出現，非襯線字則完全沒有，當然這只是一個簡單的字型分法，實際上在書中是分成古典體、現代體、方塊襯線體、無襯線體、書寫體和裝飾體這幾種，而中文字型分法又不太一樣，基本上可以分為明體、黑體、原體、書寫體和美工體幾種，不過其實我不知道這個分法正不正確，尤其是英文字型的部份。</p></b:extendContent>
			</b:content>

			<b:comments commentCount="1"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

		<b:entry entryID="000435" baseName="input-with-image">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2007-07-10</b:date>
				<b:time>22:20:18</b:time>
			</b:datetime>
			<b:category>css-html</b:category>
			<b:title>用圖片製作文字輸入框</b:title>
			<b:content>
				<b:summary>理論上是可行的，最近有想重新設計搜尋欄位的樣子，所以就先做了一個範例，不過因為還沒畫出漂亮的圖，所以看來很陽春，目前這版還有些缺點，主要是不能自動調整長度，如果說要調整字體大小也能自動縮放的話，目前似乎還辦不到就是，基本原理就是用背景圖。...</b:summary>
				<b:mainContent><p>理論上是可行的，最近有想重新設計搜尋欄位的樣子，所以就先做了一個範例，不過因為還沒畫出漂亮的圖，所以看來很陽春，目前這版還有些缺點，主要是不能自動調整長度，如果說要調整字體大小也能自動縮放的話，目前似乎還辦不到就是，基本原理就是用背景圖。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>

			<b:comments commentCount="2"></b:comments>


			<b:trackbacks trackbackCount="0"></b:trackbacks>

		</b:entry>

	</b:entries>
</b:blog>
