2008年6月19日 星期四

[下載]網頁設計師不可沒有的10個隨身碟軟體

隨著隨身碟的價格越來越低,要以不到一千元的價格取得2G以上的隨身碟可真是越來越簡單了,因為自己本身經常會到處跑,但是電腦有時候可不一定是隨身攜帶,所以帶個隨身碟,把常用的軟體放在裡面,不但隨時可在使用別人的電腦上網時不用擔心對方電腦沒有安裝此類軟體,也可以在幫別人重灌或是檢查電腦時,直接取用,如此方便的軟體,馬上就來看看吧~

第一個  FireFox 免安裝版網路瀏覽器

FireFox 講到瀏覽器,絕對會想到FireFox 這套好用又免費的瀏覽器,不但免費使用外,還有一堆方便的擴充元件可以增強他的功能,可謂不可多得的好物阿~目前免安裝版是由網友自行開發,在這邊找到一個載點給大家~請大家自行找找吧~或者直接按這裡在Google搜尋

第二個  Filezilla 免安裝版FTP軟體

Firezilla FTP軟體也當然不可以缺席阿~經常在外跑的設計師,若是遇到客戶臨時要稿件,那麼這套免安裝的FTP軟體絕對不可遺漏掉,免費且免安裝外~他還是中文版喔~所以有興趣的人不用擔心不會使用,像是我離職前一間公司內~就有好多程式設計師都在使用這一套呢~ 點這裡前往下載頁面啦~

第三個  GreatNews RSS 閱讀器

GreatNewsRSS閱讀器,據我接觸過的朋友,使用的人不多,但是保證用過的人馬上就會愛上他的啦,尤其是每天必逛眾多網頁的人來說,這套軟體絕對能幫你省下很多逛網的時間,你只要訂閱該站的RSS,之後,一旦該網站有新的文章發佈,你不用辛苦的到該網站,只要打開Great NEws馬上就能知道哪些網站有更新囉~由這前往官網~點這直接下載免安裝版 

第四個  7-zip 壓縮軟體

7-zip圖示 嫌RAR要錢又要安裝嗎? 那你就來用這一套吧~這是一套免費的壓縮軟體,免安裝、免費、小巧方便攜帶喔~支援的壓縮/解壓格式不僅多,利用7-zip壓縮出來的檔案還硬是比winRAR壓出來的還要更小,而且他還是大家推崇的開放原始碼軟體,如果想瞭解他支援的格式期詳細的資訊,就上他的官網吧~點我直接下載~

第五個  XnView 看圖軟體

XnViewXnVie是一套免費的看圖軟體,比起要錢的ACDSEE來說,XnView該有的功能都不少,當現在軟體越做越大,相對的耗用電腦的資源也越來越多,XnView能耗用極少的資源就可讓你輕鬆瀏覽你的相片圖庫,且內建的網路相簿功能,讓你用三個步驟就能輕鬆建立漂亮且效果十足的網路像簿,重點是他還是中文的喔~還在懷疑嗎? 快來下載吧~官網請到這~

第六個  FSCapture 螢幕擷取

FSCapture說到FSCapture這套軟體阿,可真是超棒的,雖然現在這套軟體已經要收費了,但是硬是被Mitch找到這套尚未收費前的舊版本,不過可不要看他版本舊,該有的功能可是一樣都不少,像我這種重度網路使用者,每天要晃的網站可不少,有時候MSN朋友還不時丟來一些好站連結,看完之後呢~馬上就用FSCapture給他把畫面擷取下來存檔,對於想建立網頁畫面資料庫的人來說,可是不可或缺之好物阿~還不趕快放到你的隨身碟嗎?! 舊版下載到這~新版請上官網~

第七個  ColorCop 螢幕取色器

colorcop 圖示想知道網頁上面的色彩數值是多少嗎? 用 ColorCop 馬上就知道啦! 小巧免費加上免安裝,當然一定要加入隨身碟收藏啦~往後看到好站的色彩,用ColorCop 吸一下馬上就可以知道囉~雖然他是套英文軟體,但是清楚簡單的圖形化介面 ,讓你一看馬上就會用,完全不需要學習喔~若想看更多的資訊就上他的官網吧~點我直接下載啦

第八個  ScreenRuler 螢幕尺規

ScreenRuler對於一些初入網頁設計的人~或者是有經驗的網頁設計師來說,網頁上面的尺寸可能常常都要把圖截取之後貼到Photoshop中利用尺標來量測,真是太麻煩了,為什麼不能直接在畫面上量呢? 對的~這個就是讓你直接在螢幕有把尺標可以量測畫面寬度的螢幕尺標,目前網路上有不少人分享,不過有些好像有病毒,這邊分享的檔案皆經過掃毒的~而這個版本原來是中文化版~但由於中文話程式被掃到判定有病毒~所以已被我砍掉了~若有人下載我的版本有掃到病毒的話請告知我,會立即砍掉此分享~以避免更多人中毒~Screen Ruler 下載請到這邊吧~

第九個  FLVplayer FLV影片播放器

FLV player現在要下載網路上的影片真是越來越簡單了,如果你下載到的是FLV這種影片格式怎麼辦? 沒關係,用這套免安裝的FLV 播放器來看吧,免安裝,只要把你的FLV 影片檔拖拉到視窗中放掉就可以了,播放FLV 影片就是那麼簡單啦~~還等甚麼? 快下載去吧~

第十個  Asuite 隨身碟選單

Asuite有了那麼多的隨身碟軟體,沒有一套好的軟體來管理可就太不方便了,Asuite是一套免費的隨身碟選單製作軟體,主要是在於它是使用相對錄鏡的觀念來啟動隨身碟中的軟體,所以對這一堆的免安裝程式來說,可是方便太多了,Asuite不但可以設定軟體捷徑,也可以製作資料夾及軟體群組的捷徑在一個選單上,像是印表機本人經常在各補習班做教學的時候需要開一些之前收錄的學生作品,或是自己的作品集等資料,勝制醫些不習班沒有安裝的軟體,通通我都設定在這個選單之中,只要點一下就開啟了~真是超方便的啦~~由於軟體本身是英文版的,所以印表機自己小小的中文化了一下,若是翻譯有不好的地方 ,還請大家多多指教阿XD~廢話講太多~下載先啦~

2008年6月17日 星期二

[技研]神阿~讓IE6正常顯示PNG圖檔的透明背景吧

長久以來網頁設計最讓人頭痛的就是無法使用具有透明背景的圖檔,或許很多人不認同,畢竟Gif不就是個具有透明背景的圖檔嗎? 然而大家也都清楚到不行的是Gif的透明背景實在是差到不行的效果,而在PNG這個格式出來之後,彷彿網頁設計出現了一盞明燈,但可惜的是全球最多使用者的瀏覽器-Internet Explorer 6.0 版之前對PNG圖檔的支援真是差的可以,也就造成了網頁設計一直以來讓人不得不勉強使用那醜陋的Gif透明背景效果。而為了解決這個讓人頭痛的問題,以下 使用微軟IE專用的濾鏡或許是目前較為可行的做法。

一般正常的作法通常是為各個瀏覽器添加不同設定的CSS,在這邊我就先針對IE6、IE7、FF來做CSS的設定,設定如下

==============================================================

/*IE 6---以下寫法所有瀏覽器都看的懂*/

.sample {
    background: url(../images/PNGsample.png) no-repeat top left;
}

/*FF---以下寫法只有FF及IE 7看的懂,其他瀏覽器看不懂*/

html>body .sample {
     background: url(../images/PNGsample.png) no-repeat top left;
}

/*IE 7---以下寫法只有IE 7看的懂,其他瀏覽器看不懂*/

*+html>body .sample {
     background: url(../images/PNGsample.png) no-repeat top left;
}

==============================================================

如同上面的寫法,那麼圖片在三個瀏覽器的顯示則會各為下列畫面(背景為天空,PNG檔則是太陽)

在IE6下PNG圖片顯示的狀況 在IE7及Firefox下PNG圖片顯示的狀況

很明顯的PNG圖檔(太陽)在IE6下面會在圖片透明區域產生醜陋的背景色,那麼這時我們在為IE6加上MS專有的濾鏡語法到CSS中,完整的Code如下:

============================================================

/*IE 6---以下寫法所有瀏覽器都看的懂*/

.sample { 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
            (src='images/PNGsample.png', sizingMethod='image');
}

/*FF---以下寫法只有FF及IE 7看的懂,其他瀏覽器看不懂*/

html>body .sample {
     background: url(../images/PNGsample.png) no-repeat top left;
}

/*IE 7---以下寫法只有IE 7看的懂,其他瀏覽器看不懂*/

*+html>body .sample {
     background: url(../images/PNGsample.png) no-repeat top left;
}

============================================================

接著很神奇的,就可以看到IE6那醜醜的PNG背景色消失了,如圖:

IE6套用濾鏡後
在IE7及Firefox下PNG圖片顯示的狀況

相信眼尖的你應該有發現,我在CSS中寫的 Code 把IE6的背景設定拿掉了,且圖片路徑也跟原本背景圖片的路徑不一樣,那就來看看這一整條的CSS的意思吧~

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sample.png', sizingMethod='scale',enabled=FALSE);

sizingMethod有crop,image,scale三種。預設是image,也就是PNG圖片照原本尺寸顯示。如果使用scale的話,圖片則會依照div容器的尺寸縮放;如果用crop且圖片尺寸比DIV還大的話,圖片超出DIV的部分則會被切掉。enabled則為效果的開關,如果值是false或1,就等於整個濾鏡效果都停用。

除此之外,AlphaImageLoader的用法在HTML及CSS中的路徑寫法是要注意的,倘若HTML檔案跟CSS是在不同階層的資料夾中,而我們的AlphaImageLoader要寫在獨立的CSS檔裡面的話,則路徑則要依照HTML及圖片的相對路徑來撰寫,而不是由CSS檔案與圖片的相對路徑來寫;也就是說,不管如何,使用AlphaImageLoader的做法,無論是寫在CSS還是HTML中,其圖片路徑一律皆採用HMTL檔案位置與圖片的相對路徑來寫,否則則會找不到圖片,也就是沒作用啦~XD

有興趣的人現在就快去試試吧^^

範例檔下載(34KB)