Terence-studio

html <span>&nbsp;</span> <p>In this paragraph is an <span>important</span> section</p> <div><input type="text" /></div> <a href="#">not special</a> script $("*", document.body).click(function (e) { 　　e.stopPropagation(); 　　var domEl = $(this).get(0); 　　$("span:first").text("Clicked on - " + domEl.tagName); }); 畫面上點到的東西都會顯示出他的標籤名稱， $("*", document.body).click(function (e) { 　　//當頁面上body裡的任一東西被按到之後，會執行以下 　　e.stopPropagation(); 　　//此行會中止底下.get()的向上爬 　　var domEl = $(this).get(0); 　　//當東西被按到時，會由目前的選項開始逐一的往上爬並呈現 　　//當按到input就會顯示input 、div 　　//所以我們只取得第一個 　　$("span:first").text("Clicked on - " + domEl.tagName); 　　//將結果的'標籤'寫入第一個span當中， });

html <div>One</div> <div>Two</div> <div>Three</div> map： 將目前相符集合中的每個元素傳入函式內 產生包含傳回值的新jquery物件 Script:map var cont = $('div').map(function(){ return $(this).text(); }); alert(cont) 會得到 [object Object] 因此，要將東西叫出來時，會使用 .get(),join() =================華麗的分隔線================= get: 取得jqyery物件所選取的dom元素 Script:get var cont = $('div').get(); alert(cont); 則會取得 [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement] 將東西叫出來時，則使用 innerHTML

<div id="first">first</div> <div id="second">second</div> 出現的結果就是會有兩個div， 而點選每一個都有不同的結果， 要做出按不同的div，會有不同的訊息， 一般可以想到針對第一個，有msg1，第二個則是msg2 var msg1 = … 之類的 但是10個100個就累死人了， 可是在語法中，message只有一個， 表示每個按下去的div都有自己的message， 一般的想法會以為： var message = 'u click first';   //這裡定義 $('#first').bind('click',function(){  //這裡塞入     alert(message); }) var message = 'u click second';  //這裡定義新內容（同樣是message這個值） $('#second').bind('click',function(){  //這裡塞入     alert(message); }) 這樣的狀況下，並不如as當中一樣， 執行到哪就塞到哪並等著你， 因為， 最後按的時後，會去找到message（已經變second了） 因此，要塞入的方法就要改一下 Script var message = 'u click first'; $('#first').bind('click',{msg: message},function(event){     alert(event.data.msg); }) var message = 'u click second'; $('#second').bind('click', {msg: message} ,function(event){     alert( event.data.msg ); }) 如此一來，一定義就塞入，就各不相關， 跟as中，給物件一個值同道理...

首先，這是一個 CSS p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; } .blue { color:blue; } .highlight { background:red; } Script <p class="blue">Click to toggle (<span>clicks: 0</span>)</p> <p class="blue highlight">highlight (<span>clicks: 0</span>)</p> <p class="blue">on these (<span>clicks: 0</span>)</p> <p class="blue">paragraphs (<span>clicks: 0</span>)</p> 在這樣的狀況下，設定點擊即會增加後面的數字 /////////////////////////////// Script script var count = 0; $('p').click(function(){ count++; $(this).find('span').text('clicks: ' + count); $(this).toggleClass("highlight", count % 3 == 0); }) 可是，count只有一個，那麼當每個都當時，卻是全部的累加 (以下是每個p都點一下的結果) /////////////////////////////// Script使用了each var count = 0; $("p").each(function() { var $thisParagraph = $(this); var count = 0; $thisParag...

jQuery.extend(jQuery.expr[':'],{ 'num-children' : function(element, index, matches,set) { var count = 0; for (var node = element.firstChild; node; node= node.nextSibling) { if(node.nodeType === 1) { count ++; } } return count == matches[3]; } });

Axure 5.6 for mac Axure 5.6 for PC 一個網站企畫的工具，讓不懂網頁設計的人也可以快速的建立起具互動的架構， 並且可以發佈成HTML的格式， 以下是他的介面： 常用的工具包括了： Sitemap、Widgets、Masters、Annotations & Interactions 、pannel以及輸出：prototype Widgets 可以擴充，點擊並拖拉到介面上即可使用， 運用Master功能可以製作樣板， 利用互動來連結到不同的頁面， 輸出後即是一個有互動功能的頁面。 整體而言是一個不錯用的工具， 透過擴充還可以增加不同的風格物件， 但是沒有中文以及無法做細致的設計是我覺得美中不足吧 以下影片的內容是由 Luca Benazzi 所設計，為倫敦的使用者經驗設計師 Axure RP 網站原型示範- "Axure in Action" 看了影片可以發現這個網站所能做到的功能 其實滿強大的吧~

queue 就象是as中陣列的push一樣，依序的一個個放進去容器當中； dequeue 就是一個個取出來用，放了多少東西就能取多少，但是每一個 dequeue 只會叫一次；而clearQueue則是直接刪去陣列中的內容。 $('div').queue(function(){    $('div').fadeIn(); }) 以上無法呈現東西，只是填入容器而已，欲呈現得有 $('div').dequeue(); 才行  

Finally i start try to learn how to design web on iphone. A little difficult, but I think is useful.

最近花了不少時間在學習jQuery和一些程式許法， 較少摸到CSS， 不過，還是試著去習慣怎麼編輯每家的blog， 目前看來， blogspot的自由性較大， 連內容的位置都可以隨意更動， 不像其它家只能動css部份， 這樣下次我可以試著加jquery看看了~

長久以來一直所希望做的事， 大概就是有自己所屬的， 這個blog放一些工作室的作品， 要是技術上的交流， 還是以另一個blog為主了， 起步晚了， 但是熱誠不變！ 我是Terence， 我熱愛音樂、設計、互動與程式， 歡迎指教。

that is on flash CS4

在 IE8 還沒出來之前，都是利用 margin: 0 auto; 的方式來解決 div 置中的問題，但是這在 IE8 並沒有發揮作用，無效了，底下在網路上發現兩種解法，分享給大家知道： 1. Width:100% 在最外層 div 加入 Width:100% 的屬性，程式碼如下： #container {width:100%;} #centered {width:400px; margin:0 auto;} 2. Text-Align:Center 在 div tag 裡面加入 Text-Align:Center，這樣 IE8 會偵測到此語法，就會服從 margin:0 auto; 之屬性，不過這樣內容會被全部至中，如果您有需要將其 div 內容往左邊對齊，那就必須在加上語法 Text-Align:left，底下是範例程式碼： #container {text-align:center;} #centered {width:400px; margin:0 auto;text-align:left;} IE6，IE7 則是利用下面語法： #wrap {   margin: 0px auto; /* firefox */   *margin: 0px auto; /* ie7 */   _margin: 0px auto; /* ie6 */   height:100px;    width:860px;   border:5px solid red;     } 來源： http://blog.wu-boy.com/2010/03/22/2074/

很久沒有做這類的東西， 這次是一種漸層的排序， 運用了三角函數的sin， 和一些tween

suffer 遭受、經歷 suffer from 因(疾病)而痛或不舒服;因...而更糟;受...之苦 i'm suffering from... 我正遭受著 He is suffering from...他正遭受著 He suffered from...他一直遭受著 vt. 及物動詞 變化形 suffered; suffered; suffering; 遭受; 經歷 He suffered many humiliations before he became a football star. 他在成為足球名將前受過許多屈辱。 (常用於否定句)忍受 I cannot suffer such rudeness. 我不能容忍這種粗魯的舉止。 容許; 任憑[O2] vi. 不及物動詞 變化形 suffered; suffered; suffering; 受苦; 患病[(+from)] He suffered from poverty all his life. 他一生受貧窮之苦。 My father suffers from high blood pressure. 我父親有高血壓。 They suffered a great deal in those days. 那時他們吃了不少苦。 受損害, 受損失; 變糟[(+for/from)] This scientific instrument suffered severely. 這部科學儀器受到嚴重損壞。 受懲罰; 被處決[(+for)] He suffered for his offence. 他因自己的過錯而受到懲罰。 to become worse 變差；變糟 V His school work is suffering because of family problems. 由於家庭問題，他的學業日漸退步。

拉丁字詞後綴的意思 -al 為relating to，有關 -ant 表示 a thing which 或是 a people who -ate 為動詞後綴 -ary 指 of ....或是being.... 例：primary school 即指：school of prim -et 拉丁語中常見的後綴 -ist 指 a person who does （從事什麼） -ous 指 full of （充滿著...） 法文來源 de 為英文的 of ， 例如 deluxe 原指：de luxe（法語），即是 of luxury（英 語）的意思 前面的詞根有： ad- to的意思 circum- 指週圍的、圍繞的 inter- 介入、居中的（between, among) sub- 為底下（below） super- 表示over,above,exceed wr- 開頭者，為日耳曼詞源，有一部分錶示了擰、扭、編織、彎曲和捻的概念

從fb的網站範例中摸索出的筆記-以彈跳照片為例 一般而言的fb使用方式， a 裡面包含了 img。 而js是用 $("選擇器").fancybox({ }); 'titleShow': false titleShow是圖片的title，預設是true會出現，要關掉就直接設false。 而title會出現的內容，以 a 的 title 為主，若沒有則是使用img裡的alt。 'transitionIn'    : 'elastic', 在開啟時使用elastic的效果彈跳視窗，亦有fade、與none的效果 'transitionOut'    : 'elastic' 在關閉時使用elastic的效果彈跳視窗，亦有fade、與none的效果 'titlePosition'    : 'inside' 設定說明文，以 a 的 title 為主，若沒有則是使用img裡的alt。 參數中，除了 inside 還包括了 outside 及 over。 outside：在彈跳視窗之外，另用背景呈現 inside：圖片會有背景呈現文字 over：直接在圖片上呈現一層色彩，文字覆蓋在圖片上。 以下為官方的設定說明： Key Default value Description padding 10 Space between FancyBox wrapper and content margin 20 Space between viewport and FancyBox wrapper opacity false When true, transparency of content is changed for elastic transitions modal false When true, 'o...

基本非 IE 的流覽器的私有屬性一般都會以 -xxx- 這樣開始， -o-就是以 Presto 為引擎的 Opera 私有的、 -icab- 是 iCab 私有的，-khtml- 是以 KHTML 為引擎的流覽器（如 Konqueror Safari）、 -moz- 就是以 Mozilla 的 Gecko 為引擎的流覽器（如Firefox，Mozilla）、 -webkit- 就是以 Webkit 渲染引擎（是 KHTML 的衍生產品）的流覽器（如 Safari、Swift）。 即支援的私有屬性分別為： moz-background-clip webkit-background-clip khtml-background-clip moz-background-origin webkit-background-origin khtml-background-origin 來源： http://hi.baidu.com/leoo0/blog/item/464bd836234e70360b55a934.html

在一般打程式時， 總要記得那一大串的語法， 打錯還不行， 因此有一些方便的工具因應而生， Quicktext就是運用於Notepad++的一個好Plug-in 下載 解壓後放到Notepad++安裝目錄下的plugins資料夾當中， 然後就可以從外掛模組中找到他， 可以透過設定去改變或增加“熱鍵” 建議去改變Quicktext的快速鍵（原本為Tab） 大多是改成ctrl+enter 而設定熱鍵當中， “$”符號是游漂停留的地方， “\$”可以輸入"$"符號 “\n”换行。

這次做的是簡易的讀取外部圖片， 我第一次做的時後語法是寫： $but_total = 6; $body = this.createEmptyMovieClip("body", 0); for (i=0; i $obj = $body.createEmptyMovieClip("obj", i); $obj.attachMovie("but","but"+i,i); $obj._y = i*50; $obj.mark = i; $obj.onPress = function() { $loadPic(this.mark); }; } function $loadPic(n) { $picPath = "img"; $picBoard = $obj.loadMovie($picPath + n + ".jpg"); } 其中讀取進來的圖片是背景， 但是圖一進來後，第一個按鈕不見， 然後其實這麼寫的問題在於， 縱使讀取了新的背景圖， 但舊的背景圖其實一直存在， 值得注意的是， 背景圖既然是覆蓋所有的背後圖片， 因此，從頭到尾只需要一個圖層來處理 因此新增一個圖曾 $picBoard = this.createEmptyMovieClip("picBoard",0) 並設定用他讀取圖片 $picBoard.loadMovie($picPath + n + ".jpg"); 完整如下 $but_total = 6; $body = this.createEmptyMovieClip("body", 1); $picBoard = this.createEmptyMovieClip("picBoard",0) for (i=0; i $obj = $body.createEmptyMovieClip("obj", i); $obj.attachMovie("but","but"+i,i); $obj._y = i*50; $obj.mark = i; $obj.onPress = functi...

$( ".block" ).draggable({ 　　//helper: "clone", //拖動時克隆,默認是original 　　axis:"x", //定義拖動方向，x與y還有auto。 　　containment: "#contain" , //定義一個容器,div就只能在容器的範圍內活動了 　　cursor: "move" , //定義拖動時鼠標指針的狀態，參數類型詳見css中cursor配置 　　cursorAt:{top:10}, //定義拖動的時候鼠標指針的位置,此位置是相對被拖動對象的邊框，單位px 　　opacity: 0.40, //設置對像被拖動時的透明度 　　handle: "div" , //設置拖動控制器，也就是說當鼠標按住控制器的時候，才能拖動對象 　　distance: 20, //設置當鼠標拖動多少像素時對象才會移動 　　//delay: 1000, //設置延遲時間單位毫秒 　　grid:[50,50], //設置每次拖動的步進單位px ??(scroll: false , //設置當拖動超出整個瀏覽器窗口,是否滾動瀏覽器) 　　dragPrevention:[ 'input' , 'textarea' , 'button' , 'select' , 'option' ],//設置被拖動的div碰到那些dom元素時停止 　　start: function (e,ui){}, //開始拖動執行的函數 　　drag: function (e,ui){}, //拖動時執行的函數 　　stop: function (e,ui){} //拖動停止執行的函數 }) 來源：http://zhg-grj.spaces.live.com/blog/cns!ADA1FB08E190EBF4!221.entry

鑑於台灣沒有fw的書， 所以我只好一邊讀原文的， 一邊寫下筆記T_T 這是貝茲的工具列， 在cs4裡開始我才注意到這個的用處， 最上面的Combine Paths就不說明了， 學向量的人都該知道該功能。 Alter Paths Fisheye path：讓選取的貝茲能圓弧化（必需先畫一個目標的圓型，圖層在原物件上方，兩個一同點選，並使用） Simplify：簡化曲線，減少節點的數量（點選貝茲，並使用即可） Expand Stroke：向外擴增線段，（點選貝茲並使用） Deform to Path：（原物件外，其上下圖層還需要一個向量物件，三個同時點選，並使用） Editing Points Straighten / smooth：將選取的點尖銳化/曲線化。 Round Points to Pixels / Half-Pixels ： Move Points：運用輸入的方式來移動點，第一為x軸，第二為y軸。 Scales Points：與Move Points相似，不過輸入的是比例，50為1/2，100則是不變。（變型是以中間為中心） Rotate Points：選取向量物件下使用，輸入旋轉角度（變型以中心為主），正數是順時針，負數是逆時針。 Mirror Points：翻轉向量物件，選取向量物件使用，選yes為水平翻轉，選no為垂直翻轉。 Sharpen Points：將接近的兩個點合併為一個點，使其尖銳化。 Fillet Points：將點分為兩個點，使其有圓角效果，（輸入數值的方法） Add Points：至少選取兩個點，該指令讓兩個點之間隔輸入的值增加一個點（輸入100，則x+y為100的地方加一個點） Subdivide Points：至少選取兩個點，該指令讓兩個點的中心位置增加一個點

用了FW CS4之後一陣子，之前因為需要而製作一些text styles， 在網路上看到許多範例，因此也想製作看看，甚至可以將做成元件庫， 但是在第一步上就遇到了挫折…XD 這是我看到網路上的範例： 字體色彩：漸層 字體外擴：漸層 陰影 然而，在FW原本的特效與stroke中， 則有三種選擇， 1：set stroke================================== 能用出外框，也可以選擇內部、中間與外部框線， 但是，其特色是 a.字和字會重疊…（在某些時後似乎很好用） b.沒有辦法使用漸層 因此又找到了另一個方法 2：glow======================================= 雖然沒有重疊的字體問題，但是依然不能用漸層… 然後，還是試著求助於photoshop的外掛： 3.photoshop live effects============================================ 但是！卻發現是陽春版的…T_T Fill的選項Gradient（漸層） 竟然只能有黑到白的漸層， 下面的color只針對單純填色… 這把以FW為命的我來說跟本就是逼上絕路了… Orz… 最後，我又回去了老東家Photoshop， 真的是看到了一絲希望呀… ………能知道我無言的點了吧。。。 (photoshop CS3 &"fireworks CS4") FW明明就是cs4，photo live 竟然陽春到不行，唉… adobe真討厭，見不得FW的廣大民眾…

一直在找直接離線發佈的軟體， 因為畢竟在公司不好使用瀏覽器開blogger， （icon太大XD） 而ff的外掛，與firebug又太近， 之前被要求移除， 認為佔資源， 最後在搜尋了一陣後找到了這個方法！！ 寫mail並發佈~ 這真是神奇XD

目前在試做階段， 在index.html內，在FF用layout.css，在ie6用ie6.css， 圖片有text.png與text2.png html為： <div> <!-- <img src="images/text.png" alt="testpic" title="testpic"/> --> <div id="pic"></div> <p class="p">Yahoo!奇摩信箱歡迎您</p> </div>

<!--[if IE]>內容<![endif]--> 內容只有 IE 會顯現。 <!--[if IE 6]>內容<![endif]--> 內容只有 IE6 會顯現。 <!--[if lt IE 7]>內容<![endif]--> 內容只在比 IE7 更舊的版本會顯現。 [參考說明] <!--[if gte IE 8]>內容<![endif]--> 內容只有 IE8 及其較新版本會顯現。 [參考說明] <!--[if !IE]>-->內容<!--<![endif]--> 內容除 IE 以外都會顯現。 [參考說明] <!--[if !(IE 6)]>內容<![endif]--> 內容除 IE6 以外的 IE 都會顯現。 [參考說明] <!--[if (gte IE 6)&(lt IE 8)]>內容<![endif]--> 內容只從 IE6 以後及 IE8 之前版本會顯現。 [參考說明] <!--[if (IE 7)|(IE 6)]>內容<![endif]--> 內容只有 IE7 及 IE6 會顯現。 [參考說明] <!--[if gte IE 7]><!-->內容<!--<![endif]--> 內容在 IE7 及其較新版本，以及 IE 以外都會顯現。 [參考說明] 藍色部分 <!-- 或 --> 為標準 HTML 註解的起始或結尾；除此之外，紅色部分即為 IE 能辨識的特殊語法。所以，只有 IE 會依據紅字所表示的條件來判斷呈現與否，而其它瀏覽器依標準一律當成是註解。 語法中空格不能任意省去，尤其注意 IE 之後，版本編號前的空格。除 IE 必須大寫，其餘英文字母都是小寫。註解的結尾語法都是 <![endif]--> 。 思考 - 條件式註解的應用 運用不同條件可在不同版本呈現的原理，我們可以做出提供使用者，類似瀏覽器版本線上偵測的範例 ： xhtml 語法 <!--[if IE]> <p>您正在使用的瀏覽器為 ie 。</p> <![endif]--...

1.連結的網址，在該檔案所在位置旁邊的資料夾的話： 資料夾名 / 檔案名 （對的） 而非 / 資料夾名 / 檔案名 （錯的） ex：web/index.html，連結一個css檔在 web/css/layout.css， 則連結就在： css/layout.css 而非 /css/layout.css

在公司的網頁都上線後， 老闆的電話那頭說著IE8跑位了！ 什麼，IE8是什麼？ 有人在用那個呀XD…， 基於IE市場真的好大， 我還是得去試看看怎麼改… 在html內，我們可以設定， 先讀取css for ff， 再css for ie， 然後才是css for ie6 （雖然分成很多檔，但是，至少乾淨明白） 而其實也有另一種方法， 就是針對一個css檔做多種瀏覽器的做法， color:#F00; /*FF & 所有 IE*/ color:#FF0 \9 ; /*所有 IE，包含ie8*/ *color:#0F0; /*IE7 IE6*/ _color:#00F; /*只有IE6*/ 在製作時一定要照著： FF → IE8 → IE7 → IE6的順序寫。 記得喔 來源：壞掉的印表機

由於工作的關係， 常常都得在不同的瀏覽器上檢測結果， 而恰好電腦又是IE7， 無法針對舊的IE做測試， 因此網路上發現了幾個不錯的多重網頁檢測軟體： ==================================== 一、IEtester： 本身介面精緻，且有許多功能， 本身亦有DebugBar， 可以直接Drag去檢測每個物件的原始碼， 及樣式， 聽說容易變慢，我就不知道了。。。 = = ==================================== 第二個就是： Multiple IE 使用者可以在使用時選擇版本， 從ie3~8都有 本身長的跟ie很像 但是目前沒看到有可以deBug的程式在上面， 所以，我大多拿來看看兩個是否有不同而已 以上兩個儘管都是有ie的骨子 但其實常有跑位的狀況， 不過，差異不大啦~ 哈

Friendly Bit 在今年1月有篇有趣的文章，標題為： Levels of CSS Knowledge ，作者 Emil Stenström 將CSS的知識分為下列7個等級，並且描述了各等級的開發人員對網路產生的影響。我將內文簡譯如下： 第0級：CSS？那不是一個多人射擊遊戲嗎？（CSS? Isn’t that a multiplayer game?） 有些人因為在找CS:S（Counter Strike: Source）這款遊戲的資訊而進到 #CSS 網站。不必擔心這些人，他們不可能製作太多網頁，所以對網路也不會造成多大傷害。 第1級：是啊，我偶爾用它來移除連結的底線（Yeah, I use it to remove underlines on links sometimes） 和第0級的人不同，這些人學過HTML，也製作過幾個簡單的網站。他們只有在無法使用HTML製作出某些效果時，才會使用CSS，例如移除連結的底線或者設定行高。這些人的網站通常規模不大也沒什麼訪客，所以他們也不會對網路造成太大傷害。 第2級：不，我不喜歡div元素；表格好用多了（No, I don’t like divs; tables are much easier to work with） 他們聽過使用div元素來設計網頁這件事，也花了些時間學習CSS。不過他們很快就放棄了，覺得CSS太難而且支援度不佳，還是寧可用表格排版。 注意！他們是危險人物！他們在這個領域已經待了一段時間，許多都是網站部門的主管。和他們接觸是很重要的，提倡網路標準的人應該多多開導他們，這對網路的意義非同小可。 第3級：是啊，聽說它挺好的，不過我沒用它因為……（Yes I’ve heard it’s good, but I can’t use it because of…） 這些人雖然知道CSS的優點，不過總是基於某些原因而無法使用它，例如他們可能有第2級的上司，或者他們必須考慮到Netscape 4的使用者。 舊版的瀏覽器雖然不支援CSS，不過使用者還是可以看見完整的內容。而基於親和力（accessibility）和易用性（usability）的好 處，CSS可以為網站帶來更多訪客。把這些優點告訴第3級的開發人員，即使他們不是決策者，或許多少能對第2級的上司發揮點影響力吧。 第4級：CSS？喔！沒錯，我用di...

從我接觸網頁的設計以來， 只要是這種不是很高解析的設計， 我全都是使用fireworks來解決。 隨著軟體的更新， 我從fireworks mx2004用到了cs4， 其中的功能愈來愈多， 當然，我是每個新功能也不會用…就是編輯而已嘛…。 一邊工作一邊找，並寫下來， 因此這篇文章會不斷的更新…… 基本的功能我就不做介紹了。 圖層物件： ctrl + 上：該圖層向上移 ctrl + 下：該圖層向下移 alt + 方向鍵：移動複製該圖層 ctrl + E ： 合併此圖層與下一圖層（可加shift，加大距離） ctrl + alt + shift + Z ： 將所選的圖層全部合併（無法環原！） ctrl + alt + L：鎖定該圖層 ctrl + L：隱藏該圖層 ctrl + shift + L：顯示所有圖層 文字相關： ctrl + shift + > 加大1px字級 ctrl + shift +

對於一般作圖人員而言， 可能一個螢幕往往足夠， 但對於寫程式， 或是其它需要的人而言， 都會使用雙螢幕來工作， 一邊對照一邊編輯， 確實省去了不少麻煩。 但是，另外買一個螢幕不是說買就能買， 但是因為需要而又不得不能好好的分開程式， 這時，WinSplit就是一個很好用的工具了。 簡易的將一個螢幕的視窗， 分為左上、上、右上、右、右下、下、左下、左，以及中間， 而每一個方位，又分為1/2寬、1/3及2/3寬，甚至可以自己調整， 並可以用快速鍵來定位， 其實滿好用的。 尤其又以寬螢幕的使用更為便利。 按此下載

對需要常截取螢幕的人而言， 確實是不錯的功能， 功能包括了： 全螢幕截取、固定範圍截取、不規則範圍截取、捲軸型網頁截取、錄影片、顏色吸取器、螢幕量尺…等。 當拍下螢幕圖片時， 可選擇的有： 到編輯器（內建）、剪貼簿、檔案、自動存檔、列印、word、email、ftp。 而錄影片則可以在滑鼠的任何反應有動畫效果， 還可以設定快速鍵， 一整個好用到不行~~XD 對於我半個程式人員而言， 算是非常好用的了。

有時在寫blog時，總會想要在本機端寫完並上傳即可， 省的還要上網打開，一頁頁的進去， 在mac上試用了ecto，除了空行大到不行外， 支援台灣的blog部份也不多， 爬文找到這個plugin就在第一時間上來用看看囉！

在文章中總會不對齊，尤以英文及半形符碼更為嚴重， 在css的標籤中加入以下： text-align: justify; 即可。 有文章說要加 text-align: justify; text-justify:inter-ideograph; 試了結果，其實第一行即可， 不知是為何？ 來源：http://blog.xuite.net/jeanson61/xuite/21923365 也發現一個不錯的：http://hit1205.blogdns.org/teach/

<a id="myStyle"></a> 的狀況下， #myStyle { background:#F00; position:absolute; display:block; width:100px; height:100px; top:50px; left:50px; } #myStyle:hover { background:#FF0; } 這樣的狀況在firefox和ie7下都是好的， 但是在ie6則出現問題， 主要原因還是a的標簽內沒有href造成的， 所以不會有hover的效果。。。 <a id="mystyle" href="/"></a> 這小地方讓我花了些時間去找問題…唉~ =====20100408補充===== 在工作中又發現了一次ie6在hover沒反應的狀況， 這次儘管有了href, 但是圖片仍沒變動， 原因是： <a href=""><div id="picture"/></a> 工程師把圖片用在a裡面的div上， 導致IE6沒有辦法顯示hover的功效, 所以， 將div的id移到a裡即可。 <a id="picture" href=""></a>