Archive for the ‘ 網頁設計 ’ Category

[教學]顯示寶寶歲數的Javascript

一直以來礙於誕生日カウント有寫明不能轉載code,所以雖然想寫教學,但是不夠大方的日本人的這條規定就讓我作罷了Orz

不過剛剛在他著作權聲明看到了這一條

スクリプトの設置、カスタマイズなどを解説する場合に、ソースを部分的に引用するのはOKです。(このサイトへのリンクを貼ってください。)

大意是說「如果用來教學的,可以部份引用啦~可是還是要請你連結回站上喔!」

okok。

這個在頁面上顯示寶寶目前歲數的小東西,是由Javascript寫成的,不管你有幾個baby,都可以使用。

但是麻煩使用前要先讀過作者的使用規定,看不懂也沒關係…因為最重要的就是不要刪除程式碼的版權訊息、並且連結回作者網站,這樣就可以了(還有不能全文轉載code

由於我的日文也只有五歲小孩的程度(經過日文老師求證),所以要是理解錯了你可以跳出來嚴格的指正我…我不會哭的…囧

Read more

[改版]升級到wp2.5以及更換theme

(2008.04.07有更新,請拉到文章最底下閱讀)

昨天WordPress公佈了2.5正式版本,並且網站也整個改版了。顏色以淡藍+灰配置,看起來非常舒服。

WordPress 2.5 最大的改變應屬管理後台,除了配色像本次官網的淡藍+灰外,文章編輯器也做了很大的變化,並且內建了tag自動完成功能,整體來說非常賞心悅目 :D

官方並釋出了一支後台的demo影片如下

另外一個貼心的小改變是外掛頁面裡,要是有更新的版本便可以一鍵更新,不需要再連回外掛頁面,執行下載、解壓縮、上傳…這些繁複的動作了。不過這有個小小缺點,要是該plugin更新失敗的話會從目錄裡面消失。

Read more

Link Thumbnail -預覽連結的JS

lab.arc90.com提供了一段程式碼,可以讓滑鼠指到連結時,顯示一段說明文字或是預覽圖
該怎麼作呢?

  • 首先,下載 linkthumb.zip 這個檔案,然後解壓縮將裡面的東東全部上傳到你的主機上。
    注意哦,必須跟你的網站目錄放同個資料夾下
  • 接著在你要加入這效果的頁面,加入如下的程式碼:
    < script src="http://myserver.com/path/to/javascript/arc90_linkthumb.js" language="JavaScript" type="Text/JavaScript">
  • 在你的連結標籤a裡加入
    darkredclass="linkthumb"
  • 如果你想讓所有的連結都加入這個特效,該怎麼作呢?這當然不是問題,只要在head區域加入
  • 承上,如此一來便可以不用在a標籤裡頭加入class屬性了

可以在以下瀏覽器正常運作:

  • Internet Explorer 6.0+
  • Mozilla Firefox 1.5+
  • Apple Safari 2.0
  • Opera Version 8.51+

讓CSS能夠正常更新的hack


Warning: Invalid argument supplied for foreach() in /home/gooloosc/public_html/gooloos/blog/wp-content/plugins/where-did-they-go-from-here/where-did-they-go-from-here.php on line 54

部分瀏覽器在更新CSS時並不會即時更新,需要用到Ctrl+R或Ctrl+F5的祕招..
原因出在於瀏覽器會對CSS做cache動作,對一般網頁設計者來說可能是很頭大的問題

CSS Caching Hack這邊提到:
只要將原始碼中連結到CSS檔案的部分改為像這樣的形式,便能簡單解決這個問題

  1. <link rel="stylesheet" xhref="http://www.sample.com/style.css?version=1" type="text/css" />

重點在於問號後方的這段 ?version=1,作用是讓瀏覽器誤判CSS網址是動態網頁(像.php or .cgi程式網址後方會有get變數),瀏覽器便會盡責的去取得新版本

若有興趣多了解的可到 Stefan Hayden 看看:)

p.s 希望我沒意會錯誤..

改變反白顏色


Warning: Invalid argument supplied for foreach() in /home/gooloosc/public_html/gooloos/blog/wp-content/plugins/where-did-they-go-from-here/where-did-they-go-from-here.php on line 54

剛剛逛到 花兒開了 ,發現反白的顏色不一樣
觀察一下CSS,發現是

::-moz-selection{
background: #fbdbe8;
color: #F55B99;
}::selection {
background: #fbdbe8;
color: #F55B99;
}

這兩段的巧作,但只有Mozilla系的可以呈現
(話說回來,發現這裡用Fx的人比較多耶?還是用IE的都比較少留言?)

Apache Mod_rewrite 開啟教學

於 localhost 安裝 1.0.x 時,一直卡在 http.conf mod_rewrite 設定上
google 爬了一段時間後,終於從 紅塵一隅間拾得 找到正確的開啟方法

修改 apache 下的 http.conf
搜尋並將以下兩行前的注解「#」拿掉

#LoadModule rewrite_module modules/mod_rewrite.so
#AddModule mod_rewrite.c

再搜尋 http.conf 中有

AllowOverride None

的語句,將其改為

AllowOverride All

然後重啟 Apache Server, 大功告成!

I Like Your Colors! -分析網站配色的工具

I Like Your Colors! 比之前介紹的Color Palette Generator有用多了,它能分析網站的配色

ilikeurcolors

甚至還能抓出該網站的CSS來分析配色

你是不是常常看到某些網站配色很棒,常常拿著滴管到處吸色研究人家怎麼配色的呢?快用用I Like Your Colors!吧,你會愛上它的!

(我也是常常拿著滴管吸色的其中一人)

【簡報】CSS設計指南

Pushing Your Limits,這應該算簡報吧..
全長98頁,教你怎麼以CSS設計網站
範例包涵Blogger跟M$

Flash Text Editor

FlashTextEditor,就是 Flash 的 TextEditor
介面流暢,沒有JS那種卡卡的感覺
玩了一下…應該也是跨瀏覽器吧,起碼我的fx能運作:p
這真是一個好東西

哪天要是我閒到發荒就把後台的編輯介面改成這樣^(+++)^
flasheditor

你想看看你的網站在其他瀏覽器與作業系統的樣子嗎?


Warning: Invalid argument supplied for foreach() in /home/gooloosc/public_html/gooloos/blog/wp-content/plugins/where-did-they-go-from-here/where-did-they-go-from-here.php on line 54

Browsershots 可以幫你做到
只要在 submit 中填入你的網址,勾選你想看的作業系統、瀏覽器、解析度,一分鐘內就能在 ScreenShot 中看到你的網站,兩分鐘後就能看到你的網站在你勾選項目中的樣子

不知道是memei blog的原因還是該站預設語言的關係,所以screenshot裡,中文字會變成亂碼 已經修正囉!請看文末6/8 Update
這是這裡的screen shot,雖然並不符合W3C規範,不過我有刻意微調過..所以還算能看啦..XD 不過我沒顧慮到800*600的使用者就是了…

Update 6/8
謝謝JUTE回報,Browsershots 非常快的為中文使用者作出回應,這種感覺真是令人興奮。
Browsershots 於6/7公告說明如下:

We had some visitors from Taiwan today who were inconvenienced by the apparent lack of Chinese fonts on our screenshot factories. So we have installed the ttf-arphic-* Debian packages and requeued some of the jobs to test them. If you have more suggestions for improvement, please send email.

Update: Konqueror was still missing some characters. The problem was fixed around 19:00 UTC by installing even more font packages. The command "dpkg -l | grep font | wc -l" now returns 80. Feel free to resubmit your site to see if the fonts are ok now.

現在中文字型可以正常顯示囉!