顯示具有 XHTML 標籤的文章。 顯示所有文章
顯示具有 XHTML 標籤的文章。 顯示所有文章

表格的欄位為什麼不對齊

表格的欄位為什麼不對齊

表格的欄位不對齊

Table Display Bug

這是一個舊頁面內容，裡面的本來都很正常。但近來有使用者慢慢更新作業系統或瀏覽器後，發現表格原本被隱藏的欄位在點擊後不會正常排版。各位可以點擊標題測試，如果你是舊IE 6~IE 9，以上測試是正常的。但從IE 10開始，上述表格欄位就會不正常。（包含目前主流瀏覽器都不正常）

閱讀更多 »
標籤： , , , 張貼者： 於 0 意見

Zen-Coding - 教你極速撰寫HTML5與CSS3程式碼

什麼是Zen-Coding？

Zen Coding本身是個外掛程式，官網上的資料，Zen Coding目前可以使用在36套各類HTML與CSS編輯器中，像是Aptana、TextMate (Mac)、Notepad++、PSPad、Dreamweaver、Sublime Text 2、Visual Studio…等常用的編輯器都有支援Zen Coding。

那Zen-Coding的作用是什麼呢？它的目標很簡單，就是利用已有的技術，高速的架構出HTML、CSS、XML、XSL或HAML。什麼是已有的技術，簡單說，它是CSS Selector（CSS選擇器）的再利用。

一些些改變，能帶來什麼呢？

極速

就我使用Zen-Coding它的經驗而言，就算只是簡單拿來產出HTML5或CSS3的程式碼，Zen-Coding也可以非常有效率的加速我寫HTML5與CSS3的速度，加多少，這我很難用言語或文字表示，先看一段影片：

哇!哇!哇!哇!哇!哇!

如果看完沒有跟著哇！那再來一次！

哇!哇!哇!哇!哇!哇!

閱讀更多 »
標籤： , , , , , 張貼者： 於 8 意見

2012 A Best Present "Microsoft MVP Award"

我只是一個平凡人，如果我能，你也能。by KKBruce
首先，我一定要感謝我最愛的家人們，不管什麼時候、什麼事，你們都永遠支持我。再來感謝所有幫助過我的人，因為有你們的表率，讓我有學習的對象，讓我有機會成為一位Microsoft MVP。

2012年最棒的一份新年禮物，那就是我當選2012年 Microsoft MVP。

KKBruce Microsoft MVP獎項
圖一：Microsoft MVP獎項
KKBruce 2012 Microsoft MVP獎盃
圖二：2012 Microsoft MVP獎盃

Microsoft MVP得獎感言

我不知道，我是不是很「感覺」的人？為什麼說很感覺呢？從開啟這個KingKong Bruce記事已經快滿5年的時間，除了一些在生活上的感想外，主要有很大一部分是以技術為主的文章內容，在學習這些以Microsoft為主的技術路上，常常覺得這些Microsoft MVP對於技術出神入化，只有嘆為觀止可以形容，常常有那種抬頭看天的感覺，人就是那麼奇怪，想追求平凡又不甘於平凡，我給自己一個夢想，想像有一天我也能成為一位Microsoft MVP。

從有那個夢開始，我慢慢觀察網路上這些Microsoft MVP們，我發現我錯了，這些Microsoft MVP們除有擁有技術外，更重要的是有一顆幫助別人的心，你很難想像，一位未曾謀面Microsoft MVP，使用MSN從頭到尾只和你聊"程式"，有空還會問你說，最近還有沒有什麼新鮮貨(新文章)，害得我想不長進都不行。

還有，當你看到突然有Microsoft MVP跑來你的Blog上指導時，我心想，我只是個無名小卒，怎會讓這些大腳、起大腳(台)的Microsoft MVP願意來我的Blog上指導我，意外之外，我了解到技術非第一，還是那句「有一顆助人的心」。

去年年底，不知道為什麼，我很想、非常想、超級想試試看去申請Microsoft MVP，我就在MSN上問Allen大大一些關於Microsoft MVP資格問題，原來申請Microsoft MVP有二種方式：
  • 毛遂自薦
  • 他人推薦
我是自己寫信去 mvpga@microsoft.com 要申請表格來填寫，不過好玩的事是幾天後，我在Plurk上收到一則私人息訊，發訊者是現任Microsoft MVP 91哥，他問我要不要去申請Microsoft MVP，我又嚇到了，這些Microsoft MVP的通靈能力也太強了吧！我又沒和任何人提過我想申請Microsoft MVP，感謝之餘，更讓我確定要去申請這個Microsoft MVP獎項。

在我寄送出申請表格之後的幾週後，有一天我的E-Mail裡寄來一封信，怎麼是Microsoft MVP的申請表格，一看，原來是我的老師MISLab2000寄來的，我很不意思說我已經寄出申請表格了，不過我心想，看來我的感覺是對的，就是這一次。

身體健康最重要

我要在得獎感言最後寫得病的心路歷程。可以得這個獎，我還感謝我的病「甲狀腺機能亢進」。

約半年多前的幾個月，我變成了超人，因為經常性失眠，這個失眠不是睡不著，而是睡一下下就睡飽了，天未亮雞未啼人已起，起來沒事做，就坐在電腦前看看資料、寫寫文章，所以今年文章的產量非常不錯。

因為平常坐得久，都有在小心控制飲食，就在發病的那一個月裡，我突然廋了十三公斤之多，我才在想怎麼這個月的效果超好，可以把心得拿來出書賺點奶粉錢，就在幾天後的早上，我帶著小花去散步，才走沒多久就覺得不舒服，回到家已經是臉色慘白加喘不過氣。

那個月的平均心跳在140上下，常常感到累而就在我家地板上睡著，選擇在地板上睡是因為很熱，心跳快加上新陳代謝也快，所以那一二個月的時間，我都無法在床上睡覺，醫生說，我那時的新陳代謝就算坐著不動，也是平常人的三~四倍，難怪會廋那麼快。

這讓我想到一位Visual Basic的前輩王國榮，我們那個年代，大概學Visual Basic的沒有一位不拜讀他的作品，後來好像生病引退了。

追求不平凡，要有健康的身體。

申請Microsoft MVP參考資料

  1. 什麼是微軟最有價值專家？
  2. 申請Microsoft MVP報名表
  3. Microsoft MVP常見問題集
標籤： , , , , , , , , , , , , , , 張貼者： 於 2 意見

XHTML與CSS免費參考資料

Professional XHTML+CSS：網頁設計師的創意與實踐

我有買這本書，寫的不錯，也很簡單入門，雖然是掛Professional，但讀起來很容易進入狀況，不會生澀難懂， 基礎的XHTML到CSS都有完整的介紹，另外它還有一份附件的參考資料，內容整理的很不錯，非常合適拿來複習之用：

目錄：
  • XHTML元素、屬性一覽表
  • 各瀏覽器支援之CSS規則一覽表
  • 各瀏覽器支援之CSS選擇器一覽表
  • 各瀏覽器支援之CSS屬性一覽表
  • 瀏覽器的DOCTYPE Switch
重點是可以免費下載，就算你沒買這本書，但以上的參考還是很棒，不下載太浪費了。

下載：Professional XHTML+CSS：網頁設計師的創意與實踐 -- 附錄參考資料
備份：Professional XHTML+CSS：網頁設計師的創意與實踐 -- 附錄參考資料(for .7z)

Reference：
標籤： , , 張貼者： 於 0 意見

CSS -- 中英文字型家族相關整理

英文字型家族

  1. Sans-serif家族
    Sans-serif家族都沒有截線，可讀性較高。
    • Verdana
    • Arial Black
    • Trebuchet MS
    • Arial
    • Genev
  2. Serif家族
    Serif家族都有截線，比較像印刷體。
    • Times
    • Times New Roman
    • Georgia
  3. Monospace家族
    Monospace家族字母寬度都一樣，適合顯示軟體程式碼之類。
    • Courier
    • Courier New
    • Andale Mono
  4. Cursive家族
    Cursive家族像手寫，適合「標題, h1~h6」之類。
    • Comic Sans
    • Apple Chancery
  5. Fantasy家族
    Fantasy家族像裝飾性風格，但非每台電腦都有，網路上較少使用。
    • LAST NINJA
    • Impact

Windows or Mac?

Windows and Mac可能都有的字型：
  • Andale Mono
  • Arial
  • Arial Black
  • Comic Sans
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
Mac可能有：
  • Genava
  • Courier
  • Helvetica
  • Times

Google Font API

Google Font API是Google所提供免費的英文字型。可線上載入及使用。

正體中文字型家型

中文字型的選擇就少很多，因為我們使用在網站上，主要目標還是Browser，假設你使用了「華康字型」，網路上其他人的電腦沒有此字型，也是白搭。所以就中文字型而言，在簡體或正體中文網站，就簡單多了，除非Microsoft會透過Microsoft Update去更新字型給所有Windows用戶，不然還是不要想太多，你沒什麼機會在網頁裡就中文字型動什麼花樣。

以大眾市場而言，正體中文就「"標楷體", "細明體", "新細明體","微軟正黑體"」四種，沒了；"微軟正黑體"還算比較新的字型，也不一定所有正體中文電腦都有，所以說是三種也行。

2010/12/07 補充--正體中文及簡體中文font-family設定

/* for China */
    font-family : "宋体", simsun, nsimsun, "黑体", simhei, "楷体", simkai, "仿宋", simfang, Arial, Verdana, "Trebuchet MS", sans-serif;
    
    /* for Taiwan */
    font-family : "新細明體", PMingLiu , "標楷體", DFKai-sb , "細明體", MingLiu , "微軟正黑體", "Microsoft JhengHei" , Arial, Verdana, "Trebuchet MS", sans-serif;

2010/12/27 補充--OS及軟體包含字型查詢網址

  1. Microsoft Typegraphy
  2. MAC OS X:Fonts list
標籤： , 張貼者： 於 0 意見

感謝對正體中文付出的人

在開發網頁的過程裡，可能是我大腦還停在我高中那台486 HD 40MB的等級，常常需要參考其他資料，看過就忘是正常的，所以寫網誌(Blog)是個不錯的方法，就當做是留下筆記資料，要使用時，就上來看看。

今天發現在mozilla的開發者網站中，原來所有的資料都已經有了「正體中文化」， 你只在要畫面上「Languages」選擇「中文(台灣)」就可以切換到正體中文了。雖然這種「科技、技術」類看原文是比較好，但使用自己的母語來學習的話，一定能更快速提升自己的層次。而如果有看不懂的地方，也能回頭去看看原文，這也是一般「翻譯書」所做不到的地方。

ps. 有些不錯的翻譯書會附上原文全文電子檔。 不過就我逛過、看過、買過的書中，很少就是了。

mozilla Web 開發

我自己有翻譯過這種技術文件，我知道難度很高，看了之後很感動，在學習網頁的過程中，這是一個你不可錯過的網站。從HTML、XHTML、DOM、CSS、Javascript、AJAX，一步一步的看，一步一步的學，這裡面的內容都非常實用。

如果你不想花錢買書，或許從這裡開始是個不錯的選擇。也借此感謝一下翻譯文件的人，他們的幸苦讓我能更加輕鬆愉快來學習知識。

我推薦給各位。
標籤： , , , 張貼者： 於 0 意見

XHTML 1.0檢查表

XHTML是XML，而HTML就只是HTML。

以下是從HTML轉換到XHTML的必做事項：

* 將DOCTYPE改為嚴格版XHTML。或者，如果還在用過渡期HTML，可以用過渡期XHTML。

<!-- transitional：過渡期XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- strict：嚴格版XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 把xmlns、lang和xml:lang屬性加到<html>起始標籤。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">

xmlns：用來辨別html所屬的XML語言，URL裡的內容並不重要，你也可以指定成你網域的URL。
lang、xml:lang：en指定使用的語言為英文，zh-tw指定語言為繁體中文，zh-cn指定語言為簡體中文。
* <html>標籤必須是DOCTYPE之後的第一個標籤，而</html>結束標籤必須是文件的最後一個標籤。
* 所有元素名稱都必須是小寫字體。
* 所有起始標籤都必須有結束標籤。如果是空元素，那麼這個標籤必須用空白加上/>做結束。

HTML 4.01：
< br >
<img src="..." alt="...">

XHTML 1.0
< br />
<img src="..." alt"..." />

* 所有屬性值都要用雙引號框住，而且都一定要含有數值。
* 不可在HTML內容使用&。&是實體的起始字元，所以請用&amp;，也請將其他特別的字元轉換為實體。


參考資料：Head First HTML with CSS & XHTML (中文：深入淺出HTML、CSS與XHTML)
標籤： 張貼者： 於 0 意見

HTML 4.01 Strict導覽

主要規則

1. <html>元素：出門在外別忘了帶<html>喔！
每個頁面開端一定要用DOCTYPE，緊跟著DOCTYPE之後，<html>元素一定要是頁面首席元素或是根元素。因此，在DOCTYPE之後，要用<html>標籤放在頁面開端，且應用</html>標籤結束頁面，至於其他的東西都是巢居在這兩個標籤裡頭。
2. 記住要用你的<head>和<body>，才會有比較好的HTML喔！
只有<head>和<body>元素可以直接放在<html>元素裡，其他元素都應放在<head>或<body>元素裡。絕無例外。
3. 沒有<title>的<head>是什麼？
一定要給<head>元素一個<title>元素。這是法律，辦不到的話，那就會使用HTML不符合一致性。<head>元素是唯一該放<title>、<meta>、<style>元素的地方(也許還會含<script>標籤)。
4. 只能給你的<body>吃有益的區塊元素。
只能把<h1>、<h2>…<h6>、<p>、<blockquote>…等區塊元素直接放到你的<body>元素內。所有的行內元素與文字都要先放在別一個區塊元素內，之後才能放進<body>元素內。
5. 行內元素要遠離區塊元素。
唯一能放行內元素內的東西就是文字和其他行內元素。區塊元素無論如何都不可以放在行內元素裡。

Example：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 如有使用到JavaScript語言請加上此<meta>標籤 -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<!-- 如有使用到CSS請加上此<meta>標籤 -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="auther" content="作者" />
<meta name="description" content="此網頁說明或描敘" />
<meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" />
</head>

<body>

</body>
</html>


HTML 4.01 Strict導覽續篇(一)

次要規則

1. <p>元素要遠離區塊元素。
段落是用在文字的，所以別讓區塊元素靠近段落。當然，所有你想要的行內元素，如：<em>、<a>、<strong>、<img>、<q>…等，都可以放在<p>元素裡面。
2. 清單(<ol>、<ul>)裡就只能放清單項目(<li>)。
只有<li>元素能放在<ul>和<ol>元素裡，你也不會想放非清單項目的東西放在未排序或排序的清單裡吧？
Example：

<ol>
<li></li>
<li></li>
</ol>

3. 清單項目<li>裡放什麼都行。
<li>元素裡非常自由，文字、行內元素或是區塊元素。
4. 誰知道？<blockquote>只喜歡區塊元素。
<blockquote>元素裡頭需要一個或更多的區塊元素。雖然常見到文字直接放在區塊元素裡，但這還沒列入HTML 4.01的法條裡。務必先把文字和行內元素被在區塊元素內之後，才能把這些內容放進<blockquote>裡。
Example：

<blockquote>
<p>...Context...</p>
</blockquote>

5. 將某個行內元素巢居在另一個行內元素內時，請務必要小心謹慎。
雖然幾乎每個行內元素都能巢居在另一個行內元素裡，但是還是有幾個特例。絕對不要把<a>元素放在<a>元素內，因為這會讓訪客感到極度困擾。還有，<img>這類的空元素不能讓其他行內元素巢居於內。

HTML 4.01 Strict導覽續篇(二)：

注意事項

1. 區塊(block)元素獨立自主；行內(inline)元素隨波逐流。
區塊元素是用在網頁的主要建築區塊，而行內元素則標示出內容的一小部份。行內元素要放在區塊元素裡。
2. 給連結(<a title="...")標題，提升連結識別度。
* 連結標籤要精簡，不要放整句話或一段長文字到連結上。
一般而言，放幾個字就好了，額外的資訊可以放在title屬性。
* 連結標籤要有意義。
不要使用類似「點擊此處」或「本頁」的描述。
* <a>標籤有兩個角色
一是從一個頁面跳到另一個頁面，二是擔任連結的降落點(landing point)或目的地(destination)，要成為降落點可使用id屬性。

<a id="landing">段落二</a>

在URL最後使用"#"來進行降落的動作：

<a href="index.html#landing">段落二</a>

3. <img>標籤的alt屬性是有意義的圖像描述。記得，<img>是行內元素，所以參考第一點最後一段文字。

<p>
<img src="..." alt="..." />
</p>

4. 清楚的<meta>標籤告訴瀏覽器網頁的額外資訊，加快瀏覽器的處理速度。
在<head>標籤素加入以下基本<meta>標籤：
<!-- charset設定HTML文件是以何種文字碼所寫成，如BIG5、GB2312、UTF-8…等，不分大小寫。 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 設定該HTML文件內之樣式表和預設的Script語言。一般使用環境中，即使不指定，也會自動將樣式表視為CSS，並將Script語言視為JavaScript，但指定預設語言才是正確的作法。 -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="auther" content="作者" />
<!-- 你可能會在搜尋引擎上的結果頁面看到搜尋引擎對此網頁文件的描述，此描述大多來自description，你會想點擊有良好說明的搜尋連結或是沒有說明的搜尋連結。 -->
<meta name="description" content="此網頁說明或描述" />
<!-- keywords以是半型逗點來分隔關鍵字，一般最多10組 -->
<meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" />

除了良好的(X)HTML架構與實用的內容，<meta>標籤內容的設計，也是一個簡單的SEO(Search engine optimization，搜尋引擎最佳化)，讓你的網站網頁可以得到比別人更搜尋引擎排名。
5. 怪異模式
許多瀏覽器有兩種顯示HTML的模式：「怪異模式」用在舊版HTML，標準模式用在HTML 4.01或XHTML1.0/1.1。如果不告訴瀏覽器你用的是哪種版本的HTML(未使用文件類型定義"DOCTYPE")，許多瀏覽器就會用怪異模式，這會導致不同的瀏覽器出現不一致的頁面顯示結果，例如IE6這個版本的瀏覽器。

參考1：Head First HTML with CSS & XHTML (中文：深入淺出HTML、CSS與XHTML)
參考2：http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
參考3：http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/

標籤： 張貼者： 於 0 意見
訂閱： 文章 (Atom)