網頁製作筆記本

40 種網頁常用小技巧（Javascript）

2009-08-11T15:05:00.000+08:00

1. oncontextmenu="window.event.returnValue=false" 將徹底遮罩滑鼠右鍵

<table border oncontextmenu=return(false)><td>no</table> 可用於Table

2. <body onselectstart="return false"> 取消選取、防止複製

3. onpaste="return false" 不准粘貼

4. oncopy="return false;" oncut="return false;" 防止複製

5. <link rel="Shortcut Icon" href="favicon.ico"> IE位址欄前換成自己的圖示

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖示

7. <input style="ime-mode:disabled"> 關閉輸入法

8. 永遠都會帶著框架

<script language="javascript"></script>

9. 防止被人frame

<SCRIPT LANGUAGE=javascript></SCRIPT>

10. 網頁將不能被另存為

<noscript><iframe src=*.html></iframe></noscript>

11. <input type=button value=查看網頁源代碼

onclick="window.location = "view-source:"+ "http://www.gonet8.com"">

12.刪除時確認

<a href="javascript :if(confirm("確實要刪除嗎?"))location="boos.asp?&areyou=刪除&page=1"">刪除</a>

13. 取得控制項的絕對位置

//javascript

<script language="javascript">

function getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

alert("top="+t+"/nleft="+l);

}

</script>

//VBScript

<script language="VBScript"></script>

14. 游標是停在文本框文字的最後

<script language="javascript">

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart("character",e.value.length);

r.collapse(true);

r.select();

}

</script>

<input type=text name=text1 value="123" onfocus="cc()">

15. 判斷上一頁的來源

javascript :

document.referrer

16. 最小化、最大化、關閉視窗

<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

<param name="Command" value="Minimize"></object>

<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

<param name="Command" value="Maximize"></object>

<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

<PARAM NAME="Command" VALUE="Close"></OBJECT>

<input type=button value=最小化 onclick=hh1.Click()>

<input type=button value=最大化 onclick=hh2.Click()>

<input type=button value=關閉 onclick=hh3.Click()>

本例適用於IE

17.遮罩功能鍵Shift,Alt,Ctrl

<script>

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!"); //可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

18. 網頁不會被緩存

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎樣讓表單沒有凹凸感？

<input type=text style="border:1 solid #000000">

或

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea>

20.<div><span>&<layer>的區別？

<div>(division)用來定義大段的頁面元素，會產生轉行

<span>用來定義同一行內的元素，跟<div>的唯一區別是不產生轉行

<layer>是ns的標記，ie不支援，相當於<div>

21.讓彈出窗口總是在最上面:

<body onblur="this.focus();">

22.不要捲軸?

讓豎條沒有:

<body style="overflow:scroll;overflow-y:hidden">

</body>

讓橫條沒有:

<body style="overflow:scroll;overflow-x:hidden">

</body>

兩個都去掉？更簡單了

<body scroll="no">

</body>

23.怎樣去掉圖片鏈結點擊後，圖片周圍的虛線？

<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

24.電子郵件處理提交表單

<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain">

<input type=submit>

</form>

25.在打開的子視窗刷新父視窗的代碼裏如何寫？

window.opener.location.reload()

26.如何設定打開頁面的大小

<body onload="top.resizeTo(300,200);">

打開頁面的位置<body onload="top.moveBy(300,200);">

27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

28. 檢查一段字串是否全由數字組成

<script language="javascript"></script>

29. 獲得一個視窗的大小

document.body.clientWidth; document.body.clientHeight

30. 怎麼判斷是否是字元

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

else alert("全是字元");

31.TEXTAREA自適應文字行數的多少

<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">

</textarea>

32. 日期減去天數等於第二個日期

<script language=javascript>

function cc(dd,dadd)

{

//可以加上錯誤處理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

}

cc("12/23/2002",2)

</script>

33. 選擇了哪一個Radio

<HTML><script language="vbscript">

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

next

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style

<INPUT name="radio1" type="radio" value="barcode">Barcode

<INPUT type="button" value="check" onclick="checkme()">

</BODY></HTML>

34.腳本永不出錯

<SCRIPT LANGUAGE="javascript">



</SCRIPT>

35.ENTER鍵可以讓游標移到下一個輸入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

36. 檢測某個網站的鏈結速度：

把如下代碼加入<body>區域中:

<script language=javascript>

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

function butt(){

document.write("<form name=autof>")

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value=測試中……> =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>")

document.write("<input type=submit value=刷新></form>")

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="鏈結超時"}

else

{document.forms[0]["txt"+b].value="時間"+tim/10+"秒"}

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1

onerror=auto("http://"+autourl+"")>")}

run()</script>

37. 各種樣式的游標

auto ：標準游標

default ：標準箭頭

hand ：手形游標

wait ：等待游標

text ：I形游標

vertical-text ：水平I形游標

no-drop ：不可拖動游標

not-allowed ：無效游標

help ：?幫助游標

all-scroll ：三角方向標

move ：移動標

crosshair ：十字標

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

38.頁面進入和退出的特效

進入頁面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出頁面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

這個是頁面被載入和調出時的一些特效。duration表示特效的持續時間，以秒為單位。transition表示使用哪種特效，取值為1-23:

　　
0 矩形縮小

　　
1 矩形擴大

　　
2 圓形縮小

　　
3 圓形擴大

　　
4 下到上刷新

　　
5 上到下刷新

　　
6 左到右刷新

　　
7 右到左刷新

　　
8 豎百葉窗

　　
9 橫百葉窗

　　
10 錯位橫百葉窗

　　
11 錯位豎百葉窗

　　
12 點擴散

　　
13 左右到中間刷新

　　
14 中間到左右刷新

　　
15 中間到上下

　　
16 上下到中間

　　
17 右下到左上

　　
18 右上到左下

　　
19 左上到右下

　　
20 左下到右上

　　
21 橫條

　　
22 豎條

　　
23 以上22種隨機選擇一種

39.在規定時間內跳轉

<META http-equiv=V="REFRESH" content="5;URL=http://www.gonet8.com">

40.網頁是否被檢索

<meta name="ROBOTS" content="屬性值">

　　
其中屬性值有以下一些:

　　
屬性值為 "all": 檔將被檢索，且頁上鏈結可被查詢；

　　
屬性值為 "none": 檔不被檢索，而且不查詢頁上的鏈結；

　　
屬性值為 "index": 檔將被檢索；

　　
屬性值為 "follow": 查詢頁上的鏈結；

　　
屬性值為 "noindex": 檔不檢索，但可被查詢鏈結；

　　
屬性值為 "nofollow": 檔不被檢索，但可查詢頁上的鏈結。

[已售出] 經典銘機月光機 F30 F30fd 九成新

2009-08-10T15:13:00.001+08:00

經典銘機月光機 F30 F30fd 九成新

2007 年 10 月於玉山最低比價網購入，
平輸附發票、保證書，
完整盒裝，原廠配件全部都在，
也會全部附上，
原廠無附皮套，
皮套是自己另外購買的，
原廠電池一顆，
記憶卡為 128mb。

拍賣價格：

3999 元，需運費，送一張 128mb xD 記憶卡，不二價。
4500 元，免運費，送兩張 128mb xD 記憶卡，不二價。

本人是處女座 A 型男，所以對於相機的保護都極為龜毛，很愛惜相機，相機沒用時都放在電子防潮箱中，現在要找品相這麼好的 F30 很難了喔，請把握機會。

這一台拍出來的照片很漂亮，色彩豐富，高 ISO 在小相機中算是很強的！尤其是光線較弱的環境，這一台拍出來的照片比起其他小相機要好很多！

相機照片：http://www.flickr.com/photos/imfreero/tags/f30/

圖中相機 LCD 左上方為保護貼的痕跡，
我貼了兩層，沒有任何瑕疵。

平日中壢，假日淡水士林可面交，意者請來信或來電詳談。

mailtoandy(at)anet.net.tw
0963007920　鄭先生

[已售出] 九成九新 Konica KD510z 絕版銘機輕薄小巧全鋁合金時尚精品照片色彩迷人（KD500z/KD400z）

2009-08-10T14:50:00.009+08:00

請於此下標：http://goods.ruten.com.tw/item/show?11091013442366

KD510z 是 Konica 的經典之作，絕版銘機！這台相機輕薄小巧，全鋁合金，是相機也是時尚精品，500萬畫素，照片色彩豐富迷人，用過 Konica 相機的人應該都會有深刻的體會！

2006 年 7 月 21 日於桃園相機店購入，公司貨附保單，原廠電池兩顆。

當初買來想收藏，所以一買來就一直放在電子防潮箱中，沒有帶出去使用過，最多是在室內測試，相機實體照片如圖所示，保存的很好，近全新！平時皆保存於電子防潮箱（電池也是，有分開放！）。

因為缺錢所以求售，誠心交易，歡迎有緣者下標。

桃園中壢一帶的買家建議當面交易，當場驗貨，以節省運費，保障雙方權益！

拍賣價格：

全盒裝 + 兩顆原廠電池　不二價 4500

相機配件：

1. 原廠包裝盒
2. 原廠程式光碟
3. 繁體中文說明書
4. 原廠所贈相片紙
5. 原廠保證書
6. 記憶卡 SD 128MB
7. 原廠皮套
8. 原廠電池兩顆
9. 相機吊繩

相機優點：

1. 色彩豐富迷人。
2. 開機快速，且會有開機炫光！
3. 有 ISO 50 選項，讓您的照片細緻清晰！
4. 有全手動功能，可自行調整光圈快門！
5. 全鋁合金，時尚冷感！
6. 體積小巧輕薄，可放進口袋裡！
7. 最高五百萬畫素，洗照片綽綽有餘！
8. 超級省電！用過才知道有多省，絕不誇張！

詳細的評價請看這裡：http://www.enet.com.cn/article/2004/0722/A20040722326911.shtml

我用另一台 KD510z 所拍攝的相片（完全沒有修改過，可看得到 EXIF）：
http://www.flickr.com/photos/30619860@N08/sets/72157607313292284/

[已售出] Panasonic LX3 公司貨保固三年品相極佳含套統保護鏡原廠皮套 24mm超廣角 F2.0大光圈

2009-07-28T23:39:00.009+08:00

今年 98 年 2 月7 日購買，松下公司貨保固三年！超廣角畫質極佳的一台隨身機（有範例照片為證）！但無奈個人慣用單眼，不習慣小相機用 LCD 構圖，再加上操作介面跟我的 Nikon D80 差距大，用起來就是一個不習慣... 所以忍痛求售。

本人是處女座 A 型男，所以對於相機的保護都極為龜毛，這一台 LX3 的 LCD 有貼高透光的 LX3 專用保護貼，加上我另外購買的套統及保護鏡，目的就是防止入塵及保護鏡頭，此外，我在使用這一台的期間，有拿 Nikon D80 的熱靴蓋給 LX3 用，目的也是保護熱靴點... 但熱靴蓋我只有一片，是 D80 上的，所以這片不含在本次拍賣，請見諒！

說了這麼多，重點就是，我將相機照顧得很好，沒有用的時候也是放在防潮箱裡，品相極佳！松下公司貨保固三年！

配件：原廠黑色皮套（全新未使用），原廠電池一顆、副廠電池一顆，原廠相機帶（全新未使用），電池充電器，原廠鏡頭蓋，套統，保護鏡，保護鏡鏡頭蓋，中文說明書，原廠光碟，原廠USB連接線（全新未使用），AV線（全新未使用），及清潔組，原廠公司貨保證書（公司貨保固三年）！

註：上圖二中我另外購買的褐色皮套及熱靴蓋非本次拍賣內容物！

以下為本人使用這台相機所拍的照片，相機本身 JPG 直出（皆保留 EXIF），縮圖後上傳，其餘保留原廠風格：

其他的照片：http://www.flickr.com/photos/imfreero/sets/72157619440756220/

誠心交易，絕非詐騙集團，精密物品，歡迎面交。

桃園、中壢附近平日可面交，士林、淡水假日可面交！

爆笑影片：精神分裂狗

2008-09-25T09:58:00.000+08:00

轉載自：http://tw.youtube.com/watch?v=AjcQHNsj69U

[已租出] 淡水停車位出租金雞母社區室內平面停車格出租

2008-09-19T09:30:00.017+08:00

淡水室內平面停車位出租：金雞母社區第二停車場室內平面停車格出租

鄰近登輝大道、淡江大學、台電員工宿舍（附照片）

月租 1800，一季為一租期，租金季繳制（租滿一年送一個月）。

停車場出入口有社區警衛全時駐守，
入口有磁卡感應式電動柵欄，
出口自動感應免手動，
停車格位置佳，
旁邊有柱子，
附近停有多輛高級房車。

車位照片：http://www.flickr.com/photos/imfreero/sets/72157622959110223/

車位地址：台北縣淡水鎮水碓里北新路一段184巷50號地下層金雞母B區2號

Google 地圖：http://maps.google.com.tw/maps?hl=zh-TW&q=%E5%8F%B0%E5%8C%97%E7%B8%A3%E6%B7%A1%E6%B0%B4%E9%8E%AE%E6%B0%B4%E7%A2%93%E9%87%8C%E5%8C%97%E6%96%B0%E8%B7%AF%E4%B8%80%E6%AE%B5184%E5%B7%B750%E8%99%9F&um=1&ie=UTF-8&hq=&hnear=251%E5%8F%B0%E5%8C%97%E7%B8%A3%E6%B7%A1%E6%B0%B4%E9%8E%AE%E5%8C%97%E6%96%B0%E8%B7%AF%E4%B8%80%E6%AE%B5184%E5%B7%B7&gl=tw&ei=j4s0S4n6J8uLkAWJvaDsCA&sa=X&oi=geocode_result&ct=title&resnum=1&ved=0CAoQ8gEwAA

看車位專線：0963007920 鄭先生
聯絡信箱：mailtoandy(小老鼠)pchome.com.tw

如有興趣看車位請與我聯絡，謝謝您。

快讓您的愛車有個家吧！別讓愛車停在路邊被破壞卻哭訴無門！

PS. 前車位承租者吳先生承租滿一年，對於車位相當滿意 ^^

[已售出] Konica KD510z 絕版銘機輕薄小巧全鋁合金時尚精品照片色彩迷人 500萬畫素 (KD500z/KD400z 可參考)

2008-09-16T17:33:00.003+08:00

這一台已經賣出去了，不過還有更新的一台在這裡

http://webclipboard.blogspot.com/2009/08/kd510z.html

KD510z 是 Konica 的經典之作，絕版銘機！這台相機輕薄小巧，全鋁合金，是相機也是時尚精品，500萬畫素，照片色彩豐富迷人，用過 Konica 相機的人應該都會有深刻的體會！

相機實體照片如圖所示，保存的還不錯！平時皆保存於電子防潮箱（電池也是，有分開放！）。

因為本人現在都用單眼相機拍照，很少用它了，用單眼後想買外閃，缺錢所以求售，誠心交易，歡迎有緣者下標。

可於此下標：http://goods.ruten.com.tw/item/show?11091013442366

歡迎桃園中壢一帶的買家當面交易，當場驗貨，以節省運費！

按此觀看我用此相機所拍攝的相片（完全沒有修改過，可看得到 EXIF）：http://www.flickr.com/photos/30619860@N08/

相機配件：

1. 原廠包裝盒
2. 原廠程式光碟
3. 繁體中文說明書
4. 原廠所贈相片紙
5. 原廠國際保證書
6. 我自己的記憶卡 SD 32MB
7. 我自己的相機皮套（原廠的遺失了）
8. 我自己購買的原廠電池兩顆，不是副廠的（還很新）！
9. 原廠相機吊繩

相機優點：

1. 色彩豐富迷人。
2. 開機快速，且會有開機炫光！
3. 有 ISO 50 選項，讓您的照片細緻清晰！
4. 有全手動功能，可自行調整光圈快門！
5. 全鋁合金，時尚冷感！
6. 體積小巧輕薄，可放進口袋裡！
7. 最高五百萬畫素，洗照片綽綽有餘！
8. 超級省電！用過才知道有多省，絕不誇張！

詳細的評價請看這裡：http://www.enet.com.cn/article/2004/0722/A20040722326911.shtml

我用這台相機所拍攝的照片：

華梵大學、石碇老街

2008-09-09T14:23:00.001+08:00

拖銥珊的福，讓我們有機會到華梵大學與石碇老街開開眼界。

華梵大學給人的感覺非常不錯，似乎非常重視人文教育，環境也夠清幽，在華梵讀書，就像是在深山修行一樣，令人印象深刻的是居然還有素食餐廳，善哉，稀矣！

石碇老街也很特別，但不知是不是因為景氣差，很多店面都沒開了！石碇老街中，最特別的莫過於百年石頭厝（有靈氣的老厝）與老街中懷舊的空氣。

祝銥珊求學充實平安快樂，阿彌陀佛！

HTML 中的特殊字碼 (Times字型)

2008-08-05T12:49:00.000+08:00

有一些特殊字想在 HTML 中表示出來，可是沒有安裝特殊的輸入法，該怎麼輸入呢？雖然有些字可以用內碼打出來，不過有些字還是得輸入特定碼才會顯示出來的。

在編輯 HTML 時，輸入這樣的語法
<font facc='Times' size='+3'>&#特定碼;</font>
就可以在 HTML 中顯示出特殊字囉！

注意：

1.特定碼前必須加上 &# 這兩個符號；字尾則再加入 ; 分號。特定碼，請參照以下[特殊字碼表]。

2.有些殊特字的圖案較複雜，用大一點的字體才容易看出來。例如 size='+5'

3.請使用特定字體（例如 Times, Arial, Verdana 等）才會顯示。例如 face='Times'

每種字型所能顯示的特殊字範圍均不相同，[Times]字型可以顯示的特殊字較多，而[新細明體]字型可以顯示的特殊字較少。

特殊字碼表：http://cowwu.myweb.hinet.net/note/text/930421a.htm

轉載自：http://cowwu.myweb.hinet.net/note/text/930421a.htm

解決 IE 下使用 letter-spacing 標籤無法換行的問題

2008-06-20T19:11:00.000+08:00

解決 IE 下使用 letter-spacing <br> 標籤無法換行的問題其實不難，但 IE 往往就是讓人摸不著為何會有類似的 CSS 靈異事件，囧...

請參考以下方法：

.content {
  letter-spacing:1px;
  line-height:2em;
}

.content br {
  letter-spacing:0em;
}

也就是再多一組強制將
的 letter-spacing 設為 0 即可。

動態調整字型大小的 (無障礙) JS+CSS語法

2008-05-30T17:07:00.000+08:00

原本想幫部落格加上調整字型大小的語法，在網路上找了很多方法，以妹咕老師數位學習網的方法最簡單實用，請參考以下說明。

請依下列步驟執行：

1 開啟您已設計好的網頁 ,並進入程式碼編輯畫面

2 於</title>之後加入下列ＣＳＳ語法

<style type="text/css">
<!--
.mybig{font-size:24px}
.mymil{font-size:14px}
.mysmall{font-size:10px}
-->
</style>

3 於CSS之後再加入下列 JAVA SCRIPT 語法

<script language="javascript">
function small(mysize)
{
if(mysize=="mybig")
{document.all.myfont.className="mybig"}
if(mysize=="mymil")
{document.all.myfont.className="mymil"}
if(mysize=="mysmall")
{document.all.myfont.className="mysmall"}
}
</script>

4 於<body>之後加入下列更改字型的連結內容

<a href="#" onClick="small('mybig')">大字</a><a href="#" onClick="small('mymil')">中字</a><a href="#" onClick="small('mysmall')">小字</a>

5 請於所有要變動的文字前加入下列HTML語法

<div id="myfont">
您的文章內容
</div>

完工！很簡單吧 ^^

轉載自：http://alexsir.blogspot.com/2008/02/blog-post_9800.html

防止 DIV 層或表格被撐開的多種方法

2008-05-28T14:22:00.000+08:00

在我們設計網頁的時候，總會遇到一些不愉快的事情，最常見的莫過於在後台新增內容後才發現顯示的頁面被撐開，導致網頁極度不美觀。以前大家基本上都是設計表格，網上自然不少對於的解決方法，如今還有DIV+CSS標準設計，很少看到相關好的方法，現在我們把平時找到的防止表格被撐開的好方法總結歸納一下，和大家一起分享。

一、直接在網頁裡設定圖片大小，比如程式碼：<img src="http://www.krjpg.cn/www.xxol.net.jpg" width="600" height="500" border="0">，這樣雖然可以限制了圖片大小，但是需要在上傳圖片之前手動修改圖片大小，否則上傳的圖片就會變形。

二、使用如下代碼：

<img src="http://www.krjpg.cn/www.xxol.net.jpg">

這種方法會在叫用圖片的時候，自動按比例縮小到指定的寬度，不會引起圖片的變形，並且也不會撐破表格，但是缺點是，如果圖片太大，在圖片下載過程中，也就是圖片顯示過程中，會先以圖片原大小顯示，這時就會撐破表格，頁面很難看，二當圖片完全顯示後，圖片又會自動縮小。

三、我們可以針對表格的屬性來限制大小防止被撐開，比如在<table width="600" border="0" cellpadding="0" cellspacing="0">裡新增程式碼「style="table-layout:fixed;word-wrap:break-word;word-break;break-all;"」，其中「table-layout:fixed;」是為了將表格佈局固定住，就可以有效地防止表格被撐開，「word-wrap:break-word;」是控制換行的，也就是強制執行換行，這個在文字內容較多的情況下需要使用到，特別是重複的內容出現，不執行換行的話，表格就被撐開了；而「word-break: break-all;」可以解決IE的框架被英文（非亞洲語言文字行）撐開的問題，但是不會強制換行，只顯示表格寬度裡的內容。一般情況下只要用到「style="table-layout:fixed;word-wrap:break-word;"」就可以。

當然，上面叫用的語法可以定義在CSS裡，比如：

table {
table-layout: fixed;
word-wrap:break-word;
}

四、用CSS控制圖片自適應大小，程式碼如：

img {
max-width: 600px; 
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}

如果是DIV層，請用：

div {
table-layout: fixed;
word-wrap: break-word;
width: 加上寬度;
overflow: hidden; (讓多出來的不顯示。) 
}

轉載自：http://bbs.flash2u.com.tw/dispbbs_85_83712.html

Panasonic FZ1 升級 FZ2 Firmware 韌體下載及使用說明 (FZ1 upgrade to FZ2 Firmware)

2008-05-28T10:16:00.000+08:00

Panasonic FZ1 是多年前風靡 DC 界的熱門相機，網路上曾出現一種可以將 FZ1 升級成 FZ2 的韌體，現在要找這個韌體已經有點困難了，站長將韌體分享於此，只是不知道還有人需要這韌體？？

韌體下載：http://webclipboard.googlepages.com/firmware.bin

升級方法：

1. 確定電池完好，電量充足。
2. 把firmware.bin（831,096位元組）複製到SD卡的根目錄。
3. 相機電源關閉（power off），插入SD卡。
4. 把模式撥盤設置到playback相片瀏覽模式。
5. 打開相機電源（on），LCD上會顯示一個英文文字的圖片（不能確定是否不同版本的相機語種不同）。如果不是這樣的話，建議關閉相機（power off）。
6. 選擇選項FIRM/EEprom，按下SET按鈕（向下的箭頭），LCD應變成藍色，on/off燈會閃一分多鐘。
7. 當on/off燈停止閃爍時，關閉相機（power off）, 並且移走SD卡。
8. 插入其他的SD卡，打開相機（on），你會發現已經升級好了。

升級後，多了P,A,S功能（手動，光圈優先，快門優先）。

改善之處：

補償微調 - 能對白平衡色溫進行微調，以300K為一級，正負各5級，更好的調節藍色和紅色。這樣就能手動調節白平衡，使得FZ1的白平衡更加準確。

改善畫質 - 升級後畫質有所改善，特別是夜景和1600×1200解析度的照片畫質有提升。FZ1的夜景畫質向來不太令人滿意，這次升級之後希望能有明顯的改善。畫質提升以後圖片文件變大了一些，所以存儲照片的數量減少了。升級前8M的SD約能存儲8張低壓縮的照片或者16張高壓縮的照片，升級後將只能存儲6張低壓縮的或者13張高壓縮的照片；64M的卡則由74張低壓縮/149張高壓縮變成能存儲64張低壓縮/125張高壓縮照片。

變焦倍數顯示 - 還有一點微小的變化也令FZ1用戶感到很實用，以前FZ1在變焦時看不出來變焦倍數，也就是說不知道使用了多少倍變焦，但升級後，顯示器上將顯示變焦倍數，更方便用戶掌握拍攝。

注意：升級有一定的風險，若升級失敗將導致相機韌體錯誤，所以升級與否請自行衡量，升級失敗請自行負責！

[版面] XOOPS 網頁右下角出現浮動框邀請訪客登錄或註冊

2008-05-20T10:46:00.000+08:00

這是快樂天堂的站長分享出來的但我發現訪客無法連至註冊頁面。

經修改後已可正常使用登錄或註冊功能，剛裝覺得還不錯，提供給大家試試看。

修改法：

一、打開目前使用的布景目錄，編輯 theme.html 檔

A.尋找標籤

B.上方加上代碼

<{if !$xoops_isuser}>
<div class="maintable">
<script   type="text/javascript"   src="<{$xoops_imageurl}>pmlogin.js"></script>
<div   id="popupWin" style="border:0px solid #000000; display:none; position:absolute;   z-index:9999; width:180px; height:115px; right:1px; bottom:1px;   background-image:url('<{$xoops_url}>/images/pmlogin.jpg')"   onselectstart="return false;" onmousedown="return   popupWinespopup_DragDrop(event);">
<div id="popupWin_header"   style="cursor:default; display:none; position:absolute; left:0px; width:178px;   top:5px; height:18px; font:10px arial,sans-serif; color:#000000;   text-decoration:none;">

<span   id="popupWintitleEl"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font   style="color:#000000;">登錄提示</font></b></span>
<span   style="position:absolute; right:0px; top:2px; cursor:pointer; color:#FFFFFF;   font:10px arial,sans-serif; position:absolute; right:4px;"   onclick="popupWinespopup_Close()" onmousedown="event.cancelBubble=true;"   onmouseover="style.color='#FFFFFF';"   onmouseout="style.color='#FFFFFF';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·</span></div>

<div   id="popupWin_content" onmousedown="event.cancelBubble=true;"   style="display:none; border-left:0px solid #000000; border-top:0px solid   #000000; border-bottom:0px solid #000000; border-right:0px solid #000000;   padding:0px; overflow:hidden; text-align:center; font:10px arial,sans-serif;   position:absolute; left:0px; width:178px; top:35px;   height:80px;">
&nbsp;<font   style="color:#333333;">歡迎訪問&nbsp;<{$xoops_sitename}>&nbsp;！</font><br   /><br />
<font style="color:#333333;">請您<a   href="<{$xoops_url}>/user.php">登錄</a>或<a   href="<{$xoops_url}>/register.php">註冊</a></font><br   /><br /><font   style="color:#666666;">本提示數秒後自動隱藏</font><br><br>
</div></div></div><{/if}>

把附件 pmlogin.rar 解壓縮為 pmlogin.js，
放到您的佈景資料夾內，
圖片放到 {xoops}/images 裡頭即可！
清空 templates_c 目錄裡的檔案然後重新整理檢視結果！

pmlogin.rar 下載處：http://webclipboard.googlepages.com/pmlogin.rar

轉載自：http://uason.d-y-u.com/xoops/modules/newbb/viewtopic.php?topic_id=228

關於 JPG、GIF 及 PNG 的特性比較

2008-05-20T09:18:00.000+08:00

網際網路上目前被廣泛使用的圖檔格式大概就是這三種，而其中又以JPG以及GIF被使用的最為廣泛，但是這三種檔案格式彼此之間的差別，卻會讓初次接觸網頁設計的人不知作何選擇。

我們在切割網頁用圖檔的時候該如何正確選擇符合我們需求的格式？又該如何做最有效的圖檔最佳化？

在正式了解這些檔案格式的特色及用途以前，我們必須先來談談何謂最佳化。

最佳化的目的，在於希望在盡量不影響網頁設計的品質下，讓圖檔最小化，為什麼要這樣做？因為一個好的網頁設計絕對不是弄一堆看起來很漂亮的圖檔就叫做設計，你還必須去考慮使用者的頻寬以及使用者對於網站下載時間的容忍度。面對下載半天的網站，除非我們對他的內容以及圖檔是非要不可，不然大多數的情形我們就是直接關閉網站的瀏覽視窗；因為網際網路的瀏覽速率一直都是個十分現實的問題，所以網頁使用的圖檔，都必須經過最佳化的程序。

最佳化跟圖檔格式有何關係？嚴格說來，如果選擇了錯誤的檔案格式來做最佳化的處理，檔案不但沒有辦法如預期般的有效縮小，反而會比正確最佳化的檔案還要大上許多倍，這樣一來，反而造成品質不佳、速度更慢的悲劇。因此，正確的認識圖檔的格式是非常重要的一件事情。

以下是這三種不同圖像檔案格式的特色以及簡單介紹：

■ GIF圖形交換格式

GIF(Graphics Interchange Format)是由CompuServe公司發展出來的網路圖形交換格式，適合儲存256色的影像，現在通用的是可以儲存透明背景及動畫效果的GIF 89a規格。GIF格式使用LZW技術縮減影像色彩至256色內並壓縮，透過減色的方式來減少檔案大小，因為可以儲存的顏色較少，所以不適合用於全彩照片、漸層豐富的細膩影像儲存，但很適合存取色塊等形狀不甚複雜的圖形。

而通常在設定GIF最佳化的時候，會出現一個交錯式的選項，所謂的交錯顯示(Interlacing)指得是圖檔出現的方式，一般而言，網頁圖形的顯示是由上而下一條線一條線地依序顯示，使用者必須要等到圖形資料下載完後，才能看到完整的圖形，如果圖檔太大，圖檔就必須花很長的時間才能完全顯示出來。而交錯顯示則是以相隔八條線的方式跳著顯示，所以圖形的出現有如打開百葉窗一般(有些瀏覽器處理的方式可能不同)，可以讓瀏覽者在圖形未完全出現前，先對圖案有個概念，但是檔案相對也會比較大；附帶一提的是，製作GIF動畫時，就比較不適合使用交錯顯示，因為會有鬼影殘留的現象。

附註：Unisys Corporation 擁有包含多項 GIF-LZW 壓縮技術的專利，Microsoft Corporation 於 1996 年 9 月時取得 Unisys LZW 專利的使用權。然而 Microsoft 取得的使用權並未延伸至使用任何 Microsoft 工具、語言開發或作業系統產品的軟體開發人員或協力廠商，來為他們的應用程式提供 GIF 讀/寫或任何其它 LZW 能力 (例如透過 DLL 和 API 的方式)。

如果您的商業應用程式使用了這些控制項 (也就是使用了 LZW 技術)，例如您也許是透過PHP程式碼來產生JPEG的圖形格式，您也許必須要考慮到專利使用權上的問題，如果想要取得關於該項專利的獨立法律意見，可以聯絡 Unisys 美國網站 http://www.unisys.com/ 取得相關資訊。

■ JPG靜態影像壓縮格式

JPEG(Joint Photographic Experts Group )圖檔，又稱JPG檔，是由CCITT&ISO的一群專業人員，於1987年正式推出的一種工業壓縮標準，適用於儲存24位元全彩影像，但不支援透明或動畫。JPEG格式運用壓縮運算法可以將影像資料壓縮成數十分之一的大小，但壓縮比愈高時影像的資料耗損程度會愈大，影像也會愈失真(為達到高度壓縮，部份資料會被忽略)。多數的影像編輯軟體可以調整JPEG的壓縮比值，一般壓縮比10左右比較無法分辨出與原先的差別。雖然JPEG檔好用，但因是破壞性壓縮，所以不宜重複壓縮，過度的破壞會造成影像的品質愈來愈差。

JPEG格式又可分為標準JPEG、漸進式JPEG及JPEG2000三種格式。

1. 標準JPEG格式：此類型圖檔在網頁下載時只能由上而下依序顯示圖片，直到圖片資料全部下載完畢，才能看到全貌。

2. 漸進式JPEG格式：漸進式JPG為標準JPG的改良格式，可以在網頁下載時，先呈現出圖片的粗略外觀後，再慢慢地呈現出完整的內容(就像GIF格式的交錯顯示)，而且存成漸進式JPG格式的檔案比存成標準JPG格式的檔案要來得小，在這一點上面，與GIF的交錯式設定略有不同，所以如果要在網頁上使用圖片，可以多用這種格式。

3. JPEG2000格式：新一代的影像壓縮法，壓縮品質更好，並可改善無線傳輸時常因訊號不穩造成馬賽克及位置錯亂的情況；此外，以往瀏覽線上地圖時總要花許多時間等待全圖下載，JPEG2000格式具有Random Access的特性，可讓瀏覽者先從伺服器下載10%的圖檔資料，在模糊的全圖中找到需要的部分後，再重新下載這部分資料即可，如此一來可以大幅縮短瀏覽地圖的時間。

■ PNG可攜式網路圖像格式

PNG(Portable Network Graphics)格式與同是網路上流通的影像格式JPEG及GIF相較，有諸多優秀的特性：PNG壓縮影像不失真，可儲存 48 位元的彩色影像，比JPEG的24位元高，像素色彩也可有256種不同的透明度選擇，可讓圖像在任何背景上，看不到接縫，改善了GIF格式像素色彩只能有透明或不透明兩種選擇，及GIF檔描邊不佳的問題(GIF檔通常需要針對每種背景顏色採用不同的反毛邊修飾)。此外，PNG格式跨平台的影像亮度控制，可讓影像在不同的作業系統(Windows, Mac, linux)上顯示出相同的效果，不像GIF檔在不同的作業系統上顯示出的畫面會跟著不一樣，所以PNG格式格外適合在網路環境流通。

雖然PNG格式”幾乎”支援了 GIF 與 JPEG格式的所有功能，但是仍有缺點，缺點不能像GIF一樣作為動畫檔的儲存格式，另外，因為PNG使用的是非破壞性的壓縮，所以PNG檔通常比 JPEG檔大。但是這兩的缺點大概都不能算是PNG的致命傷，PNG之所以到現在依然無法快速流通的最主要問題，就是目前的瀏覽器並沒有辦法支援它所有的功能，例如IE6.0就無法顯示出PNG檔背景透明的效果，就目前IE6的市佔率來看，這一點等於讓現階段的PNG自己回家吃自己，所以PNG格式雖然優異，但是支援的環境仍待加強，不過未來仍然是個令人期待的檔案格式。

了解圖形格式，才能夠真正達到最佳化的目的，身為一個網頁設計師不應該只是在設計華而不實的網頁，而是必須從實用、視覺、維護性等多方面去考量，一個深思熟慮的設計師，才能夠讓網站成為行銷真正的武器。

轉載自：http://atedev.wordpress.com/2007/01/01/%E9%97%9C%E6%96%BCjpg%E2%80%A7gif%E2%80%A7%E4%BB%A5%E5%8F%8Apng/

HTML 常用的特殊符號

2008-05-19T12:17:00.000+08:00

符號	說明	編碼	符號	說明	編碼	符號	說明	編碼
「	雙引號	"	×	乘號	×	←	向左箭頭	←
&	AND符號	&	÷	除號	÷	↑	向上箭頭	↑
<	小於符號	<	±	正負符號	±	→	向右箭頭	→
>	大於符號	>		function符號	&fnof;	↓	向下箭頭	↓
	空格		√	根號	√		雙向箭頭	↔
	倒問號	¿	∞	無限大符號	∞	⇐	雙線向左箭頭	⇐
«	雙左箭頭	«	∠	角度符號	&ang;	⇑	雙線向上箭頭	&uArr;
»	雙右箭頭	»	∫	微積分符號	∫	⇒	雙線向右箭頭	⇒
『	左單引號	‘	°	度數符號	°	⇓	雙線向下箭頭	&dArr;
』	右單引號	’	≠	不等於符號	≠		雙線雙向箭頭	⇔
「	左雙引號	“	≡	相等符號	&equiv;		黑桃符號	&spades;
」	右雙引號	”	≦	小於等於符號	≤		梅花符號	&clubs;
	段落符號	¶	≧	大於等於符號	≥		紅心符號	&hearts;
§	章節符號	§	⊥	垂直符號	&perp;		方塊符號	&diams;
©	版權所有符號	©		二分之一符號	½	α	Alpha符號	α
	註冊商標符號	®		四分之一符號	¼	β	Bata符號	β
	商標符號	™		四分之三符號	¾	γ	Gamma符號	γ
€	歐元符號	€		百分符號	&permil;	Δ	Delta符號	Δ
¢	美分符號	¢	∴	所以符號	&there4;	θ	Theta符號	θ
£	英鎊符號	£	π	圓週率符號	π	λ	Lambda符號	λ
¥	日圓符號	¥	¹	註解1符號	¹	Σ	Sigma符號	Σ
…	…	…	²	註解2符號、平方	²	τ	Tau符號	τ
⊕		&oplus;	³	註解3符號、立方	³	ω	Omega符號	ω
∇	倒三角型符號	∇	↵	ENTER符號	&crarr;	Ω	Omega符號、歐姆符號	Ω

註：有些符號在IE不能正常顯示。

更多特殊符號，請參考此篇文章：HTML 中的特殊字碼 (Times字型)

QuickFolder - 存檔快速找到常用資料夾 (個人認為比 PlacesBar Constructor 更好用)

2008-04-24T20:52:00.000+08:00

在存檔時，是否覺得一層層點來點去的找資料夾是件麻煩的不得了的事？之前看到Joaoko在推薦PlacesBar Constructor這個自訂Windows存檔捷徑的軟體時，泉就很想推薦一下自己用的同性質卻更為便利的中文軟體：

QuickFolder　http://pcman.ptt.cc/QF.html

這個軟體是知名BBS連線軟體－PCMAN的作者所寫的另一個Windows小軟體，檔案解壓縮後才115KB，免費免安裝。你要做的只有解壓解，然後執行它就好了。它的製作目的跟PlacesBar Constructor是一樣的，但是做法不太一樣。在執行後，存檔時左上角會多一個「資料夾(F)」的選項，點選或按ALT+F後會列出你設定好的資料夾捷徑，而非像PlacesBar Constructor去變更左邊的預選選單。你也可以為這些資料夾捷徑分類放於不同群組資料夾下，更甚至為常用的資料夾設定熱鍵！便利度完全不是PlacesBar Constructor可以比擬的，更何況它可是原生中文的軟體呢！

不過這個小軟體對新手可能比較不親切一點，下載下來的檔案是壓縮檔，預設解壓目的地是「C:\Program Files\QuickFolder」（當然你可以更改解壓目的地），在解壓後要自己找到解壓縮的資料夾去點選「QuickFolder.exe」這個檔案來執行它，啟動時不會有說明文字，當你下載檔案時才會看到它。如果不想每次開機都自己開啟，你要自己手動把「QuickFolder.exe」拉個捷徑進「開始→程式集→啟動」裡面，以後開機時它就會一起開啟。

至於編輯它的目的地資料夾選單則是同個資料夾下的「QF_Ed.exe」這個檔案，或是在執行主程式時也有內建好「加入目前資料夾到此處」和設定用的選項，相當便利。只可惜建好的資料夾捷徑不能以拖曳方式管理，如果想把設好的資料夾捷徑移去另一群組中，就只能重新建立一次捷徑。

如果還有不懂的，就仔細看看下載頁的說明吧！作者其實介紹的蠻仔細的。

轉載自：http://wech.blog.shinobi.jp/Entry/101/

輕鬆修復 DreamMail 郵件資料庫 DmData.dao (無法開啟「DM2005\User\DefaultUser\DmData.dao」文件)

2008-04-14T11:14:00.000+08:00

DreamMail (http://www.dreammail.org/) 是一個很好用的 Email 軟體，使用方便，界面漂亮，而且更新的速度也很快。

目前在使用中卻遇到無法打開數據庫的問題，即無法打開「DM2005\User\DefaultUser\DmData.dao」文件，按照自動彈出的提示是刪除該文件，但是決不能這樣做！裡面保存了好幾百兆的工作郵件啊！

目前在網路上找到 DreamMail 資料庫 (DmData.dao) 的修復辦法有兩個，但經本人親自測試過後，方法二無效，方法一卻是確實可以成功修復，但修復後的資料庫資料表似乎還是有一些小問題！但總比無法回復郵件好多了。為了郵件安全，還是乖乖定期備份吧！

方法一：

將 DM2005\User\DefaultUser\ 下的 DmData.dao 改成 DmData.mdb，此時用 Access 打開該文件，會出現提示輸入密碼的對話框，但此密碼是 DreamMail 自動設訂的，我們無法得知密碼進入資料庫，所以我們用 Advanced Office Password Recovery 破解 DmData.mdb 資料庫的密碼。破解密碼後，利用得到的密碼打開 DmData.mdb，進行修復，最後再把 DmData.mdb 改成 DmData.dao，重新啟動 DreamMail。

方法二：

先把 DmData.dao 文件備份出來，然後將原位置的文件刪除。再次啟動 DreamMail，此時 DreamMail 會自動新增郵件帳號資料庫的對話方塊，關閉此對話方塊，直接關掉就行了，畢竟只是臨時用用，很快就要被替換了。

回來 USER 文件夾下，刪除 Dmdata.dao 文件，然後試了一下用之前備份的 DmData.dao 文件覆蓋！

最後一步，直接運行[工具]\[壓縮與修複數據庫]，修復完成後退出 DreamMail，再重新啟動 DreamMail。

Font Xplorer V1.2.2 字體管理 (免安裝)

2008-04-09T12:23:00.000+08:00

【軟體名稱】字體管理工具 Font Xplorer V1.2.2 full (免安裝)
【軟體語言】繁體中文
【授權類型】免費軟體
【檔案格式】RAR
【檔案大小】514/KB
【作業系統】Win2003, WinXP, Win2000, Win9X
【下載工具】HTTP
【檔案下載】http://www.badongo.com/file/2785316

轉載自：http://tw.myblog.yahoo.com/jw!PBa_LRyLERAIb_Qh2uz6/article?mid=488&prev=495&next=487&l=f&fid=43

MSN Messenger 8.5.1235.0517 beta 繁中免安裝版

2008-04-03T14:13:00.000+08:00

【軟體名稱】 MSN Messenger 8.5.1235.0517 beta 繁中免安裝版
【檔案大小】 6 MB
【軟體語言】中文
【檔案格式】 rar
【軟體簡介】

隨身迷你版 MSN 免安裝，可以帶在 USB 隨身碟中，不用怕使用的電腦沒有安裝 MSN，任何一台電腦都可以使用。

下載：http://www.esnips.com/nsdoc/76002936-9937-4ad6-bd57-ab9babfae4a1

如果無法登入 (微軟強迫升級的問題)，解決方法請參考重灌狂人的「MSN 7.5無法登入的解決方法（微軟強迫升級的問題）」。

MSN Messenger 80792 繁中免安裝版 (附外掛)

2008-04-03T14:08:00.000+08:00

【軟體名稱】 MSN Messenger 80792 繁中免安裝版 (附外掛)
【檔案大小】 11 MB
【軟體語言】中文
【檔案格式】 rar
【軟體簡介】

隨身迷你版 MSN 免安裝，可以帶在 USB 隨身碟中，不用怕使用的電腦沒有安裝 MSN，任何一台電腦都可以使用。

下載：http://www.badongo.net/file/1849041

如果無法登入 (微軟強迫升級的問題)，解決方法請參考重灌狂人的「MSN 7.5無法登入的解決方法（微軟強迫升級的問題）」。

MSN messenger 7.5 迷你免安裝

2008-04-03T13:25:00.000+08:00

【軟體名稱】 MSN messenger 7.5 迷你免安裝
【檔案大小】 4.5 MB
【軟體語言】中文
【檔案格式】 rar
【作業系統】 Windows XP/NT/ME/2000/98
【解壓密碼】 prince35@WaikeungSiteBBS
【軟體簡介】

隨身迷你版 MSN 免安裝，可以帶在 USB 隨身碟中，不用怕使用的電腦沒有安裝 MSN，任何一台電腦都可以使用。

下載：http://www.sendspace.com/file/2rte6p

如果 MSN 7.5 無法登入 (微軟強迫升級的問題)，解決方法請參考重灌狂人的「MSN 7.5無法登入的解決方法（微軟強迫升級的問題）」。

中華電信簡訊便利貼 2.02 繁體中文版

2008-04-03T11:51:00.000+08:00

【檔案名稱】：中華電信簡訊便利貼 v2.02繁體中文版
【檔案大小】：431KB
【檔案格式】：RAR
【語言種類】：繁體中文
【解壓密碼】：http://www.mycould.com BY bigvip2005
【檔案簡介】：

‧ 限定中華電信手機用戶使用。
‧ 在桌面上直接按滑鼠右鍵選擇發送簡訊。
‧ 支援IE瀏覽器發送簡訊。
‧ 一次可發送45通簡訊。
‧ 多則簡訊發送，最多5則。
‧ 通訊錄聯絡人可做匯入、匯出功能。
‧ 通訊錄群組功能，最多可設定20組，可記錄1,000筆聯絡人。
‧ 簡訊範本可設20組類別，1000筆範本。
‧ 寄件備份可作保存，不被刪除。

下載：http://rapidshare.com/files/89291458/goldsms2.02.rar

RapidShare 下載白金帳號 (PREMIUM-Account) 帳號密碼產生器

2008-04-03T11:43:00.000+08:00

【軟體名稱】RapidShare下載帳號密碼產生器
【軟體語言】英文
【授權類型】免費軟體
【存放空間】RapidShare
【檔案格式】rar
【檔案大小】104k

說明：此程式是白金帳號 (PREMIUM-Account) 的序號產生器，有了它就沒有下載時間的限制了！

下載：http://w15.easy-share.com/1699781422.html

隨機圖片顯示語法 (共三個)

2008-03-18T16:08:00.000+08:00

1. 隨機圖片簡易版語法

<script>
　document.write('<img src="img/'+parseInt(Math.random()*(5))
　+'.gif"height="40" width="50">')
</script>

　圖片文件名為0.gif 1.gif 2.gif 3.gif 4.gif

2. 隨機圖片進階版語法

<script language="javascript">
a = 3
var slump = Math.random();
var talet = Math.round(slump * (a-1))+1;
function create() {
this.src = ''
this.border = ''
this.alt = ''

}

b = new Array()
for(var i=1; i<=a; i++) { b[i] = new create() }


b[1].src = "simple_images/xml.gif"
b[1].border = "0"
b[1].alt = "圖片一"


b[2].src = "simple_images/alixixi.gif"
b[2].border = "0"
b[2].alt = "圖片二"


b[3].src = "simple_images/logo.gif"
b[3].border = "0"
b[3].alt = "圖片三"

var visa = "";

visa += '<img src='+b[talet].src+' border="0"'+' alt='+b[talet].alt+'>';
</script>
<script language="javascript">
<!-- Hide this script from old browsers --
document.write(visa)
// -->
</script>

3. 隨機圖片外掛 JS 版語法

首先請將下面這段語法貼在存文字檔中，並另存檔為 js 檔案，本範例中為 image.js。

today=new Date();
jran=today.getTime();
function rnd() {
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
return jran/(im*1.0);
};
function rand(number) {
return Math.ceil(rnd()*number);
};
document.write("<center>");
for(i=1;i<=1;i++) {
myNum=(rand(3)); //改成你要隨機顯示的圖片數；
if(myNum == 1) document.write("<img src='images/jk_01.jpg'>"); //圖片路徑，可用http://
if(myNum == 2) document.write("<img src='images/jk_02.jpg'>");
if(myNum == 3) document.write("<img src='images/jk_03.jpg'>");
else {
document.write();
}
};
document.write("</center>");

然後在你要顯示隨機圖片的地方貼上以下語法（注意文件路徑）。

<script src="js/image.js"></script>

完工！

outBrain 部落格 blogger 文章評分外掛

2008-03-17T15:42:00.000+08:00

outbrain 支援大數國外的部落格架站平台，對於沒有列在表上的，outbrain 也提供了 javascript 的安裝方式，不過國內的BSP能否順利支援，這個我就沒有深入去嘗試過了。

你可以透過我目前文章下方的 outbrain 星等評分最右邊的問號，或是進入 outbrain 首頁，都可以看到一個大大的﹝Get Ratings on your Blog﹞，按下去就對了。

outbrain：http://www.outbrain.com/

然後在眾多支援的平台中選擇你的部落格平台。甚至還支援了 FeedBurner 的 FeedFlare（不知道這是什麼嗎？請看：讓讀者更方便收藏你的文章 FeedBurner的FeedFlare 補充包）。

如果是 Blogger 平台的話，不需要什麼網頁語法的知識，只要選擇 outbrain 介面想要的語言（Chinese 即是繁體中文，目前沒有簡體中文），然後按下﹝Install ratings on your Blogger blog﹞即可。

接著你會直接轉入安裝 Blogger 迷你組件的畫面，按下﹝新增迷你組件﹞即可。這個 outbrain 組件可以擺放在版面的任何一個位置上，它會自動搜尋你的文章結尾，並且讓星等評分系統出現在那裡。

轉載自：http://playpcesor.blogspot.com/2008/03/outbrain.html

LOVE 系列 003 MSN GIF 動畫圖庫

2008-03-17T12:42:00.001+08:00

點小圖可看動畫！

LOVE 系列 003 MSN GIF 動畫圖庫

2008-03-17T12:21:00.001+08:00

點小圖可看動畫！

CSS 背景語法

2008-03-17T11:19:00.000+08:00

背景色彩 background-color

除了英文，也可以用色碼，例如 #000、#000000。

body{background-color: red;}　整個網頁
background-color: red;　指定某區塊的背景

背景圖片 background-image

body{background-images: url(網址);}　整個網頁                   
background-images: url(網址);　指定某區塊的背景

浮水印 background-attachment

用來固定背景不會因為有捲軸而移動。

background-attachment : scroll;　不使用浮水印 
background-attachment : fixed ;　使用浮水印

背景圖片是否重複 background-repeat

background-repeat: repeat;　填滿整個背景
background-repeat: no-repeat;　只出現一張圖但不併列顯示
background-repeat: repeat-x;　並列水平的一排背景圖 (沒設定是最上方一排)
background-repeat: repeat-y;　並列垂直的一排背景圖 (沒設定是靠左邊垂直一排)

背景圖片的位置 background-position

可以用英文表示，top、bottom、left、right 分別代表上下左右，center 則是置中。
也可以用 X 軸 (從左到右算) Y 軸 (從上到下算) 來自訂圖片位置。

background-position: right top;　圖片在網頁的右上
background-position: left    top;　圖片在網頁的左上
background-position: right bottom;　圖片在網頁的右下
background-position: left    bottom;　圖片在網頁的左下
background-position: center;　圖片在網頁的中央
background-position: 90% 90%;　x 軸 y 軸

不要背景圖 none

body{background-images: none;}　網頁不要背景            
background-images: none;　指定某區塊不要背景

轉載自：http://blog.yam.com/himari/article/3445219

在部落格 blogger 標題列或文章區加上 FunP 推文按鈕

2008-03-17T09:40:00.000+08:00

新版的推文按鈕設計還不賴，推文數 = 0 時，是一種面板，推文數 > 0 時，就換另一種面板。
不說這些了，現在就來安裝吧！

首先，在 <head> </head> 之間，加入這段程式碼。

<script language='JavaScript' src='http://webclipboard.googlepages.com/funp_button2.js'/>

如果要把推文按鈕加在文章標題列，則在 <h3 class='post-title'> 後，加入以下程式碼。

<script>funp_genButton("<data:post.url/>");</script>

如果想放在文章左側，則在<p><data:post.body/></p> 之前，加入以下程式碼。

<div style='float:left;margin-left:10px;'>
<script>funp_genButton(&quot;<data:post.url/>&quot;);</script>
</div>

如果是文章右側，則在<p><data:post.body/></p> 之前，加入以下程式碼。

<div style='float:right;margin-right:10px;'>
<script>funp_genButton(&quot;<data:post.url/>&quot;);</script>
</div>

轉載自：http://skyvee.net/2007/08/funp-push.html

Calendar 線上製作月曆

2008-03-16T10:50:00.000+08:00

應該很多人會自己去製作屬於自己的月曆。當然，製作的方法很多元，可以選擇自己擅長的繪圖軟體，也可以使用 Word 等工具來製作。但對於不擅長這些工具，卻又想要擁有自己月曆的人，可以利用這個網站。

操作方法很簡單，您可以選擇從自己電腦上傳圖片，或是輸入圖片的網址，然後選擇該月曆的「年份」及「月份」，便可產生您的月曆了。趕快去試試吧！

網站畫面：

下面的圖片是該網站操作的畫面：

網址：http://bighugelabs.com/flickr/calendar.php

月曆製作的成品：

下面的月曆是利用此線上製作月曆網站所產生的。

轉載自：http://www.ithome.com.tw/plog/index.php?op=ViewArticle&articleId=16986&blogId=964

LOVE 系列 002 MSN GIF 動畫圖庫

2008-03-15T13:21:00.000+08:00

點小圖可看動畫！

LOVE 系列 001 MSN GIF 動畫圖庫

2008-03-14T11:20:00.000+08:00

點小圖可看動畫！

五種 Email、網路服務小貼紙產生器 Generator

2008-03-13T13:52:00.000+08:00

介紹幾個之前找到的貼紙生成網站。

一個貓咪圖像生成網站 (有powerpoint 樣版、email貼紙、貓咪名片、貓咪照片... 等)，不過主要針對 Mail 貼紙來講

http://sagittarius.dip.jp/~toshi/

http://sagittarius.dip.jp/~toshi/img_cgi.html

這一個是對岸的，支援的貼紙種類蠻多的，有簽名、廣告、信箱、聊天、書籤按鈕等貼紙，種類還蠻多的。

http://www.eoool.com/

這一個算是中規中矩的基本款吧，有多家 Mail 的公司貼紙可供選擇。支持的 Mail 類型的包括GMail、Hotmail、yahoo、MSN、AOL、ATT、Bigfoot、QQ、 Comcast、Netscape、Blueyonder、Lycos、 Rogers等。

http://services.nexodyne.com/email/

算是基本的貼紙生成器，不過可以自訂背景、字型顏色。

http://www.lucazappa.com/brilliantMaker/buttonImage.php

這一個也是純mail貼紙生成器，不過它的貼紙有提供不同的大小樣式以供選擇。

http://email.liquism.com/

轉載自：http://iplay99.blogspot.com/2007/12/emailgenerator.html

改掉 Blogger Archive 在 IE 顯示的超大三角形

2008-03-12T10:58:00.000+08:00

在 Blogger 內建的 archive 在 ie 下會顯示成超大的三角形，非常不美觀，而筆者原先花了一點時間都找不到調整方法而作罷；但這幾天，無意間卻讓我看到兩篇文章可以解決這個問題，真是了結了我一樁心事，雖說筆者自己是使用 Firefox，但有時在 ie 看到那極不協調的大三角，就覺得十份礙眼。

現在只要在加入 CSS 的 style sheet 部份加入以下代碼可解決輕鬆此問題，還 Archive 一個清爽的空間。

#ArchiveList .toggle-open {
  _font-size: 80% !important;
}

font-size 前面的 "_" 不是打錯，別亂刪唷！否則在正常瀏覽器下三角形會變超小。80% 的比例大家可以自己調整，而筆者測用之後，仍偏愛用原創者的 80% 比例。

轉載自：http://blog.pixnet.net/ezpost/post/11578697

Blogger 讓 Lable 及 Archive 頁面只顯示標題

2008-03-11T11:02:00.000+08:00

由於一直有人相關的問題，我就把該方法寫起來，方便需要的人查閱。
首先進入Edit HTML，並把Expand Widget Templates打勾。
找到
<b:include data='post' name='post'/>
接著用下面這段取代它

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<!-- 標題 -->
<h3 class='post-title'>
<a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

完工^^

轉載自：http://chagg.blogspot.com/2006/11/blogger-betalablearchive.html

色胚子 - 免費的配色工具

2008-03-10T22:53:00.000+08:00

這個工具主要是「取得資訊」，在網頁編輯上，你的配色怎麼配，你的色碼是多少？在繪圖軟體上RGB、HSB、CMYK值是多少？等等... 雜七雜八的資訊它都會秀出來，算是設計人員必備的一個小工具。

底下幾個我認為吸引我使用的特點：

* 自動配色：版面配色工具可依據設定自動給予建議配色
* 軟體可攜性：綠色軟體 - 可免安裝直接執行，適合放置於USB隨身碟中。
* 調配顏色：RGB、HSB視覺化調色桿，直覺的調配顏色；暫存色、歷史紀錄功能，方便配色。

色胚子是一套集合強大配色、選色功能的輔助軟體，除了提供三種配色模式及多種配色輔助工具，還可透過擷取螢幕及圖片的顏色來得到色彩數值及色碼，更提供版面的配色建議、色彩資訊分析以及完整的情境式色票，調配好顏色之後並可複製、貼上、匯出與匯入多種色碼及色票格式，在網頁色彩方面亦提供網頁216安全色色盤及自動檢測網頁安全色的功能，而便利的色票管理功能更可幫助使用者管理調配好的顏色，不論您是時尚Blogger或是專業網頁設計師，色胚子絕對是您最佳的好幫手。

調配顏色：RGB、HSB視覺化調色桿，直覺的調配顏色；暫存色、歷史紀錄功能，方便配色。

顏色管理：色票管理功能，可將調配好的色彩組合分門別類的存成色票，並支援多種色票樣式。

螢幕取色：單點、多點擷取螢幕顏色，並可由螢幕取色資訊面板檢視取色資訊。

網頁安全色：網頁216安全色盤檢色、自動提示目前顏色是否為網頁安全色。

顏色轉換：轉換顏色為最接近的網頁安全色、相對應的反相色、相對應的互補色。

色碼複製：可複製九種色碼格式到剪貼簿，方便與其他軟體、網頁共通。

色碼貼上：便利的顏色數值貼上操作，可自動判斷色碼格式。

執行效能：開啟速度快、不耗費大量記憶體資源。

軟體可攜性：綠色軟體 - 可免安裝直接執行，適合放置於USB隨身碟中。

整合性：支援匯出、匯入多種色票檔案格式，可與各大知名影像處理軟體、網頁共通色票。

自動配色：版面配色工具可依據設定自動給予建議配色。

其他更多功能：圖像取色、混色工具、相關色工具、色彩資訊....。

使用完全免費

詳細介紹立即下載

轉載自：http://tinoroy.myweb.hinet.net/

快速移除或自動隱藏 blogger 頁首的導覽列 (navbar)

2008-03-10T11:16:00.000+08:00

使用 Blogger 的網友應該都知道什麼是 blogger navbar，雖然可用來搜尋其他 blog，不過老實說沒有什麼用處，所以有不少 blogger 的網友都會將它加以處理。其實只要花幾秒鍾，加兩三行程式碼上去，就可以把那導覽列隱藏起來了。

1.完全隱藏
在 </head> 前，加入以下程式碼：

<style type='text/css'>
.Navbar {visibility:hidden;display:none;}
</style>

2.自動隱藏
另一個方法就是讓 navbar 具有自動隱藏的效果，可以用濾鏡的方式，不過目前自動隱藏的效果只適用在 Firefox，在 ie 下的效果是隱形並非移除，但滑鼠向右上角上移時，仍可以點到登入 blogger 的連結。
在 </head> 前，加入以下程式碼：

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

3.完全隱藏
這是我變通的另一個方法，完全不用修改到 navbar 的設定，在要在 body 中修改 margin 的值，讓 navbar 顯示在畫面之外就可以了。

body {
margin: -40px 0 0 0; /* 將 navbar 排除在畫面顯示外 (30+10) */
background: $bgcolor;
color: $textcolor;
font: x-small Georgia Serif;
...
}

轉載自：http://blog.pixnet.net/ezpost/post/11523613

網頁製作筆記本

40 種網頁常用小技巧（Javascript）

[已售出] 經典銘機 月光機 F30 F30fd 九成新

[已售出] 九成九新 Konica KD510z 絕版銘機 輕薄小巧 全鋁合金 時尚精品 照片色彩迷人（KD500z/KD400z）

[已售出] Panasonic LX3 公司貨保固三年 品相極佳 含套統保護鏡 原廠皮套 24mm超廣角 F2.0大光圈

爆笑影片：精神分裂狗

[已租出] 淡水停車位出租 金雞母社區室內平面停車格出租

[已售出] Konica KD510z 絕版銘機 輕薄小巧 全鋁合金 時尚精品 照片色彩迷人 500萬畫素 (KD500z/KD400z 可參考)

華梵大學、石碇老街

HTML 中的特殊字碼 (Times字型)

解決 IE 下使用 letter-spacing 標籤無法換行的問題

動態調整字型大小的 (無障礙) JS+CSS語法

防止 DIV 層或表格被撐開的多種方法

Panasonic FZ1 升級 FZ2 Firmware 韌體下載及使用說明 (FZ1 upgrade to FZ2 Firmware)

[版面] XOOPS 網頁右下角出現浮動框邀請訪客登錄或註冊

關於 JPG、GIF 及 PNG 的特性比較

HTML 常用的特殊符號

QuickFolder - 存檔快速找到常用資料夾 (個人認為比 PlacesBar Constructor 更好用)

輕鬆修復 DreamMail 郵件資料庫 DmData.dao (無法開啟「DM2005\User\DefaultUser\DmData.dao」文件)

Font Xplorer V1.2.2 字體管理 (免安裝)

MSN Messenger 8.5.1235.0517 beta 繁中免安裝版

MSN Messenger 80792 繁中免安裝版 (附外掛)

MSN messenger 7.5 迷你免安裝

中華電信簡訊便利貼 2.02 繁體中文版

RapidShare 下載白金帳號 (PREMIUM-Account) 帳號密碼產生器

隨機圖片顯示語法 (共三個)

outBrain 部落格 blogger 文章評分外掛

LOVE 系列 003 MSN GIF 動畫圖庫

LOVE 系列 003 MSN GIF 動畫圖庫

CSS 背景語法

在部落格 blogger 標題列或文章區加上 FunP 推文按鈕

Calendar 線上製作月曆

LOVE 系列 002 MSN GIF 動畫圖庫

LOVE 系列 001 MSN GIF 動畫圖庫

五種 Email、網路服務小貼紙產生器 Generator

改掉 Blogger Archive 在 IE 顯示的超大三角形

Blogger 讓 Lable 及 Archive 頁面只顯示標題

色胚子 - 免費的配色工具

快速移除或自動隱藏 blogger 頁首的導覽列 (navbar)

[已售出] 經典銘機月光機 F30 F30fd 九成新

[已售出] 九成九新 Konica KD510z 絕版銘機輕薄小巧全鋁合金時尚精品照片色彩迷人（KD500z/KD400z）

[已售出] Panasonic LX3 公司貨保固三年品相極佳含套統保護鏡原廠皮套 24mm超廣角 F2.0大光圈

[已租出] 淡水停車位出租金雞母社區室內平面停車格出租

[已售出] Konica KD510z 絕版銘機輕薄小巧全鋁合金時尚精品照片色彩迷人 500萬畫素 (KD500z/KD400z 可參考)