避免在 HTML 開頭使用註解

五月 2nd, 2009
2,767 views 7 comments

前幾天學弟問我一個問題，說他 CSS 排版的網頁在大部分瀏覽器都正常，唯獨 IE 怪怪的，網頁中的 DIV 元素怎麼樣都無法置中，困擾了他許久，他的原始碼內容大致長這樣：


<!-- Head area -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
<!--
#content {
	margin: 0 auto;
	width: 500px;
}
-->
</style>
</head>

<body>
<!-- Content Begin -->
<div id="content">Content</div>
<!-- Content End -->
</body>
</html>

嗯，看起來不應該會有什麼問題的，那是什麼原因讓 IE 無法將區塊置中勒？
我突然注意到他網頁開頭的那一行註解，因為自己寫網頁到現在從未在開頭使用過註解…

果然，拿掉以後就一切正常了。IE，還真是搞不懂你啊！
(註：全系列 IE 都有此現象)

網頁設計 , ,

jQuery Drag and Drop Demo

三月 11th, 2009
4,890 views 5 comments

Drag & Drop(拖放) 效果若是應用得當可以讓 UI 操作更直覺簡單，目前最常見的大概就是對項目作排序，或是像購物車將物體從某區塊移到另一區塊。

網路上雖然有很多 Drag & Drop 的範例，但有些過於複雜或是不夠完整，前陣子為了交作業嘗試用 jQuery+jQuery UI 做了一個簡單的 Demo，果然快速、簡潔、流暢，不得不再次向大家推薦 jQuery 啊！

Demo 網址：http://blog.linym.net/demo/jquery/jquery_DragDrop.html

dragdrop

Ajax, 程式筆記, 網頁設計 , , ,

利用 CSS 為相片加框

三月 8th, 2009
2,441 views 1 comment

相片如果搭配了合適的邊框，可以讓相片看起來更有味道及特色，而一般相片加框都是使用軟體來達成的，所以電腦裡可能會有這些檔案：

  1. 原始相片檔
  2. 裁切、後製的檔案
  3. 縮圖無加框的檔案
  4. 縮圖有加框的檔案

但是為了應付各種需求，總不可能所有檔案都上傳到相簿吧？所以我只作前兩項，然後將想要保留的相片上傳到 Flickr，因為 Flickr 支援原始檔下載(升級Pro) 可以當作多一份備份，又會自動產生五種大小的縮圖，而且品質都不錯，所以要在 Blog 或別的地方展示時，只需選擇想要的大小再搭配 CSS 加框即可。

CSS 加框的部份找了很久，最後找到 CSS Decorative Gallery 這篇，他所 Demo 的是簡單也最多樣化的，給大家參考看看。

好書好站, 網頁設計 , , , , ,

修改 SyntaxHighlighter 符合 XHTML 驗證

一月 8th, 2009
1,463 views No comments

本站顯示程式碼是用「SyntaxHighlighter」，有人將它寫成 WP plugin，使用上非常方便，不過 SyntaxHighlighter 預設的呼叫語法是用

<pre name="code" class="html">......</pre>

由於 W3C 規範中 pre tag 是沒有 name 屬性的，所以鐵定要跟驗證貼紙說 bye bye，如果真的很在意的話可以這樣修改：

1. 修改 syntaxhighlighter.php

找到
<pre name="code"
改成
<pre title="code"

2. 修改 files/shCore.js

找到
tags[i].getAttribute('name')
改成
tags[i].getAttribute('title')

以 title 替換 name 屬性，這樣就能通過驗證了。

參考文章：Google SyntaxHighlighter - workaround for XHTML validation issue

PHP, 程式筆記, 網頁設計 , ,

[WordPress] 在 IIS 使用固定網址(Permalink)

一月 8th, 2009
2,109 views 2 comments

Apache 有個非常強大好用的 mod_rewrite 模組，可以實現 URL Rewriting，運用在網站或部落格對 SEO 會有幫助。WP 的固定網址也是這類的運用，一般架設在 Apache 不會有什麼問題，只要有啟用 mod_rewrite 就 OK，不過如果是裝在 IIS 上，那就會看到很醜的 /index.php/aaa/bbb/123 這樣的網址，本篇就是教大家如何讓 IIS 真正擁有 rewrite 的功能。

首先必須安裝 for IIS 的擴充，微軟有針對 IIS7 開發一套 URL Rewrite Module，不過 IIS6 就只能用別的，測試很多套最後選擇 ISAPI_Rewrite，因為它幾乎相容 .htaccess、mod_rewrite 語法，也比較穩定，ISAPI_Rewrite 有分要錢的 full 版和免費的 Lite 版，差異請看這篇，目前選 Lite 就夠用了。

Step 1
先設定 WordPress ，進入後台選擇想要的固定網址格式，如「/%year%/%monthnum%/%day%/%postname%.html」，記得把前面 index.php 拿掉。
固定網址

Step 2
安裝好 ISAPI_Rewrite 3 Lite，編輯安裝目錄下的 httpd.conf 設定檔，內容範例：

# 假設WP網址為 http://aaa.domain.com/blog/
RewriteCond %{HTTP_HOST} ^aaa\.domain\.com$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^/blog/ /blog/index\.php [L]

# 假設WP網址為 http://bbb.domain.com
RewriteCond %{HTTP_HOST} ^bbb\.domain\.com$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index\.php [L]

Step 3
基本上完成前兩個動作固定網址就可以運作了，但是如果網址帶有中文就會發生 404 錯誤，原因可以參考這篇，修改 wp-includes/classes.php

// 找到
$pathinfo = $_SERVER['PATH_INFO'];
// 改成
$pathinfo = mb_convert_encoding($_SERVER['PATH_INFO'], 'UTF-8', 'BIG5');

// 找到
$req_uri = $_SERVER['REQUEST_URI'];
// 改成
$req_uri = mb_convert_encoding($_SERVER['REQUEST_URI'], 'UTF-8', 'BIG5');

這樣就正常了。註：PHP 必須啟用 mbstring。

Server, Windows, 程式筆記, 系統筆記 , , , , ,