Reset

製作網頁結構示意圖 - Balsamiq Mockups

2009-06-08T00:31:00.015+08:00

Balsamiq Mockups
Balsamiq 公司所出的網頁頁面結構製作工具
有線上跟離線兩種版本

運用內建的 75 種常用元件
便可以快速的製作出網頁的頁面結構示意圖
不僅能明確地表示出網頁的頁面結構及各項功能
在操作上還支援許多常用快速鍵
製作起來更是直覺又容易

Feed 長尾搜索引擎 - feedmil

2009-06-07T14:53:00.014+08:00

feedmil
feedmil 的自我定位是 a "long tail" feed search engine
是一個專注在 Feed 的搜尋引擎
很適合有資訊焦慮的人

一開始先以關鍵字找到相關網站
初步篩選條件有 surprising 和 wellknown

之後還可以做再次篩選
透過進一步的再次篩選條件
可以更確實地找到符合需求的網站

製作網站小圖示 - favicon.ico Generator

2009-05-01T07:31:00.013+08:00

favicon.ico Generator
可以輕易地製作網站 favicon 小圖示的線上工具
如果有已作好的小圖可選擇 Import Image
若不知如何製作
選擇 Tag Cloud 中的任一 Tag
就會有一堆現成的 favicon 小圖示

製作完請存檔下載
上傳到網路空間後
在 <head> </head> 之中
加入下面的語法就讓可以網站有 favicon 小圖示

<link rel="shortcut icon" type="image/x-icon" href="上傳到網路空間的 favicon.ico" />

自訂訂閱網址 - FeedBurner

2009-01-25T12:24:00.032+08:00

FeedBurner
可自訂一個訂閱網址
讓部落格有一個固定訂閱的網址
這樣就算搬家或是換網址
也不會讓已訂閱的忠實讀者迷失

1.輸入自己的網站網址
　「I am a podcaster!」可勾選也可不勾選
　按下「Next」

2.然後選擇要提供給 FeedBurner 的來源
　blogger 提供了兩種來源格式
　在此我選擇「Atom：http://reset-info/feeds/posts/defauit」
　選擇好後按下「Next」

3.選擇一個覺得喜歡或好記的名字
　剩下的東西都可以在完成之後再來設定
　所以可以一直按「Next」直到完成

如果使用的是 blogger 系統的話
後台有個可以把原本的 feeds 重新導向到 FeedBurner 的貼心設定
這樣一來原先訂閱 blogger 所提供的訂閱網址的人
便無需再訂閱一次
設定很簡單
只要登入 blogger
到「設定」>「網站提供」>「張貼資訊提供重新導向網址」
貼上剛才產生的訂閱網址
「http://feeds2.feedburner.com/reset-info/reset」
再按下「儲存設定」

如果要搬家或是更改了網址
可以直接點擊「Edit Feed Details… 」
在「Original Feed: 之處輸入新的來源網址
然後按下「Save Feed Details」即可

medirs - media man

2009-01-07T21:22:00.018+08:00

medias | blog parts
有趣的部落格小工具
會抓取部落格最新文章的標題
將其變成人形
可修改寬度參數
(預設寬度為 160)

<script type="text/javascript">
var _mediasWidth = 160;
</script>
<script src="http://www.medias.net/common/js/medias_blogparts.js">
</script>

blogger Followers blogger

2008-10-07T10:58:00.013+08:00

詳細教學請參見
:::電子羊不寂寞。:::: Blogger小插件：Follow

線上配色參考工具 - kuler

2008-09-04T06:37:00.014+08:00

kuler
Adobe 公司所出的線上參考配色工具
有許多已經配好的現成顏色
若對於色彩掌握得還不是很好
可以直接選擇套用
也可以當作色彩學習的範本

測試網站載入速度 - WebWait

2008-08-18T22:22:00.005+08:00

WebWait - Benchmark Your Website
一樣是測試網站載入速度的線上工具
在「Enter website address」內填入網址

最後按下「Time It」的按鈕即可得到測試結果

測試網站載入速度 - Pingdom Tools

2008-08-03T11:54:00.008+08:00

Pingdom Tools
一個可以測試網站載入速度的好用線上工具
對於網站的各個相關物件與檔案及其載入之時間有詳細的列表
如此便可清楚得知是什麼東西在拖慢網頁的載入速度
在優化網站載入速度時是很好的參考
於「URL」內填入網址即得到測試結果

簡單好上手的編輯器 - Notepad++

2008-08-01T21:34:00.014+08:00

.:: NOTEPAD++ ::.
NOTEPAD++ 程式下載頁面
輕量級的好用編輯器
Windows 記事本 (Notepad) 加強版
十分簡單好上手

線上整理壓縮 CSS 程式碼 - Clean CSS

2008-07-28T18:12:00.013+08:00

Clean CSS - A Resource for Web Designers
一個可以整理壓縮 CSS 程式碼的線上應用工具
有五個壓縮等級
還有一些雜項可供選擇
基本上只要選擇壓縮等級「Compression (code layout)」那邊就好

xStyle alpha 1.0

2008-02-29T00:20:00.008+08:00

第8音 - xStyle alpha 1.0 發布
此 CSS framework 用少用繼承多用組合的拆解式思維
將 class 分解成可組合運用的形式
運用方式為 CSS 中的組合用法

說明
<div class="對齊樣式"><span class="文字顏色樣式文字大小樣式">這是一個將文字大小為16px的橘色文字置中的範例語法</span></div>

範例
<div class="cl"><span class="fc-orange fs-16">這是一個將文字大小為16px的橘色文字置中的範例語法</span></div>

用打電動來比喻的話
這個 css framework 就等於使用連環組合技一樣

優點
．對於不懂 CSS 的人,也能很容易使用一些基本樣式
．懂 CSS 的人可以更靈活的運用

缺點
．一不小心就會讓頁面與結構變得複雜碎瑣

FEEDJIT Live Traffic Feed

2008-02-07T23:06:00.013+08:00

FeedJIT
簡單實用的小玩意兒
可以看訪客來自何處
從哪個連結而來
到達哪個網頁
不用註冊
只要貼上程式碼即可

在程式碼中可以更改一些顏色設置
以符合自己的需求
(直接按 Customize it.. 也可以)

說明
bc= 背景顏色
tc= 文字顏色
brd1= 框線顏色
lnk= 連結顏色
hc= 標題字顏色
ww= 寬度
dot= 地圖點的顏色

範例
bc=FFFBED
tc=645930
brd1=D3B95E
lnk=D3B95E
hc=D3B95E
ww=200
dot=645930

共有四種
功能稍有不同

<script src="http://feedjit.com/serve/?bc=FFFBED&tc=645
930&brd1=D3B95E&lnk=D3B95E&hc=D3B95E&a
mp;ww=200" type="text/javascript"></script>

<script type="text/javascript" src="http://feedjit.com/map/?bc=F
FFBED&tc=645930&brd1=D3B95E&lnk=D3B95E&
amp;hc=D3B95E&dot=645930"></script>

<script type="text/javascript" src="http://feedjit.com/coFilter/?b
c=FFFBED&tc=645930&brd1=D3B95E&lnk=D3B9
5E&hc=D3B95E&ww=200"></script>

<script type="text/javascript" src="http://feedjit.com/popPages/
?bc=FFFBED&tc=645930&brd1=D3B95E&lnk=D3
B95E&hc=D3B95E&ww=200"></script>

Elements framework

2007-12-06T20:55:00.007+08:00

這是一組非常棒的CSS檔案
Elements | Overview 本身有提供下載
請至下載頁面中下載

Elements.css

此 CSS 檔案預設了一些基本的樣式
包括了齊左齊右置中
也有文字和圖片的基本架構可以直接套用

Reset.css

此 CSS 檔案會重置網頁所有元素
如此一來便無須個別的一個個設定
若不想要此重置的設定
只要單獨的設定該元素即可
IE 火狐皆適用,強力推薦!!!
不過與 NetBeans5.5 相衝
套用之後將無法使用 NetBeans 的設計界面...

Typography.css

此 CSS 檔案預設了一些文字標題與字型
可以方便快速的使用

External Links.css

此 CSS 檔案會自動判斷所設置的連結特定文字
譬如說: mailto: 或是 .pdf 等等
會在連結旁邊出現圖示 ICON
可以讓使用者很清楚地知道他將點擊的連結是什麼

elementsImport.css

直接引入上述四個 CSS 檔案
若要套用四個 CSS
可直接使用此檔案