takeasy

your imagination is my power

軟件推介:網頁草稿設件軟件Balsamiq Mockups


最近在煩惱網站設計、Template 設計等,所有設計都是由靈感至草稿開始。Balsamiq Mockups 提供手稿風格的 mockup presentation,包括有網上版、及下載版(Adobe Air Application)

。也因為 Balsamiq Mockups 是 Adobe Air 的應用程式,所以可以跨平台,不論 Windows、Mac或 Linux 都可以跑,非常方便。離線版也可以用快速鍵進行剪貼簿操作,而線上版就無法用快速鍵了。下載版(US$79)畫好的layout 可以另存成一個 xml 檔,也可以存成 png 圖片檔。

DESKTOP APPLICATIONS

DIALOG BOXES

WEB APPLICATIONS

WEB SITES


IPHONE APPLICATIONS

RICH INTERNET APPLICATIONS


Balsamiq Mockups 內建75種常用的網頁元件,要用時拉到工作底稿上,調一下位置和大小,填一下內部文字就好了。很快就可以畫出一個有模有樣,清爽易讀的網頁 layout 草稿。

Balsamiq Mockups 還有一個頗實用的功能,可切換到全螢幕展示模式;進入全螢幕模式後,畫面上會出現一個超大的滑鼠指標,便於指向你要解說的部位,這樣連雷射筆都可以省下來了。

要輸入中文時,要先勾選 View – Use System Fonts,這樣就能正常使用中文。


Sample:Mockups To Go

教學:

http://www.youtube.com/watch?v=aJTuFRaIi_g



網頁設計技巧:CSS固定footer


當做一個頁面時,如果頁面內容很少,不足於填充整個畫面,按普通的佈局,就會出現下面圖片中的樣子(也就是底部內容並沒有位於窗口的底部,而留下了大量空白。


對於追未完美的設計師來說,這是不美觀的。網上有一些解決方案,但會出現當改變窗口高度時,底部和正文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變窗口高度,但設計嘛,追求的就是盡善盡美。


下面是我找到的一個比較完美的方法,來自國外的設計達人,純CSS,可以實現:當正文內容很少時,底部位於窗口最下面。當改變窗口高度時,不會出現重疊問題。



HTML代碼:
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>
<div id="footer">
使用這個佈局的前提,就是footer要在總的div容器之外,footer使用一個層,其它所有內容使用一個總的層。如果確實需要到添加其它同級層,那這個同級層就必須使用position:absolute進行絕對定位。

CSS代碼:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必須使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
    clear:both;}
需要注意的就是#main的padding值、footer的高度和負margin值,需要保持一致。

瀏覽器的兼容:
對#main部份進行著名的Clearfix Hack:
clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
測試於兩欄懸浮佈局,兼容各大主流瀏覽器,包括Google Chrome。


  • 網絡上之前比較知名的footer佈局有Ryan Faits創造的,不過它的方法在HTML代碼中會有一個空的div層。嚴格來說,是不符合語義網代碼標準的。
  • 另外,還有一篇Exploring Footers article from A List Apart,但使用了一些JavaScript代碼。

原站:CSS Sticky Footer

解決不升級無法使用Windows live Messenger (MSN)


最近Microsoft 強制用戶必須把Windows Live Messenger 升級至9.0版本,才能正常登入。但可以利用模擬在Windows 2000 作業系統內行舊版Windows Live Messenger,便不會被強制升級。


    先找出MSN 的執行檔
  1. 在桌面或程式集內,以滑鼠右按Windows Live Messenger的捷徑,在工能表中選擇「內容」。
  2. 在跳出的「內容」視窗中,按下「搜尋目標」,便會跳出Windows Live Messenger主程式的安裝位置,以及自動選取其執行檔。

  3. 然後模擬執行
  4. 使用滑鼠右按Windows Live Messenger 的執行檔「msnmsgr.exe」,選擇「內容」。
  5. 在跳出的指定頁面中,移至「相容性」頁。
  6. 於「相容模式」欄下勾選「以相容性模式執行這個程式」。
  7. 於下方選擇「Windows 2000」,再按下「確定」,便能正常使用舊版Windows Live Messenger。

軟件推介:UltraDefrag 重組硬碟碎片


UltraDefrag 是一款實而不華的硬碟重組工具,操作介面雖然簡單,但功能直截了當,有助加快硬碟的讀寫表現。


UltraDefrag

version: 3.2.1

Platform: 2000/XP/Vista

Language: English

Download

電腦應用:如何刪除電腦中的cookies?


刪除在IE 6 中的cookies

開啟IE並轉到工具,然後選Internet選項 。

刪除cookies




刪除暫存檔





刪除在IE 7 中的cookies

按「開始」→「控制台」→「網際網路選項」
在「一般」標籤頁中,在「瀏覽歷止記錄」下按「删除」

在「Cookie」 之下,按一下「刪除 Cookie」,然後按一下「是」 以確認您要刪除這些 Cookie。

在「Temporary Internet Files」點選「刪除檔案(F)」,在「刪除檔案」畫面, 按「是(Y)」刪除所有暫存 Internet Explorer。


刪除在IE 8 中的cookies

開啟 Internet Explorer
按一下「安全性」按鈕,然後按一下「刪除瀏覽歷程記錄」。
選取「Cookie」旁的核取方塊。
如果您不想刪除與「我的最愛」清單中之網站相關的 Cookie ,請選取「保留我的最愛網站資料」核取方塊。
按一下 [刪除]。

網頁設計技巧:8個簡單和實用的CSS技巧


最好的解決方案往往是最簡單的,這裏列出8個CSS技巧,非常簡單,簡單到只需要寫一行代碼,只需要定義一個屬性參數。非常適合學習CSS的新手朋友閱讀。

  1. 使用line-height來達到垂直居中
  2. line-height:24px;
    
    當你有一個固定高度的區域,你可以通過把line-height和區域的高度設為相同的數值而達到垂直置中。 Demo
  3. 使用overflow防止内容溢出
  4. #main{ overflow:hidden; }
    
    這個應該基本都知道了。可以在限制內容塊的寬度的前提下,隱藏那些有可能溢出的文本或圖像。雖然會導致一些內容被隱藏,但總比溢出撐開影響頁面佈局要好。
  5. 強制在同一行內顯示所有內文
  6. a{ white-space:nowrap;}
    強制在同一行內顯示所有內文,直到內文結束或者< br>。
  7. 始終顯示Firefox垂直捲軸
  8. html{ overflow:-moz-scrollbars-vertical;}
    Firefox默認是不顯示垂直捲軸的,而這個參數設置將能讓它始終顯示垂直捲軸。
  9. 内容置中
  10. margin:0 auto;
    這個大家都應該知道了,但是這個設置並不是在所有流覽中都有效。並且,在相同的流覽器中,如果受其他影響,也很可能會失去效果。
  11. 移除IE的默認捲軸
  12. textarea{ overflow:auto;}
    IE默認是顯示內文框的垂直捲軸,這個參數將移除這個捲軸,除非輸入的內容超過內文框的高度。
  13. 強制列印時自動分頁
  14. h2{ page-break-before:always;}
    這個屬性參數可以「始終在物件之前插入頁分割符」,主要用於需要列印的頁面設置。
  15. 移除點擊鏈結時的虛線框
  16. a:active, a:focus{ outline:none;}
    大家都知道,點擊鏈結時,通常會出現虛線框,影響美觀。這個屬性設置可以移除點擊時的虛線框。

用CSS實現網頁垂直置中


在設計頁面佈局的時候,我們很可能需要到一些內容可以達到垂直置中。如果使用<table>裏面的valign屬性,那很容易達到內容的垂直置中。但使用<table>的缺點就是,你很可能就為了達到垂直置中,就弄了一個煩人的表格框架。以下是其中一個解決方法,純CSS實現頁面的垂直居中。

  1. HTML代碼
  2. <div id="container">
     <div id="position">
      <div id="content">
      Text Here.
      </div>
     </div>
    </div>
    
  3. CSS代碼
  4. <STYLE type="text/css">
     #container { width: 100%; height: 100%; display: table; }
     #position { display: table-cell; vertical-align: middle; 
    width: 100%; text-align: center; }
    </STYLE>
    
    這串CSS代碼,幾乎支持所有的browser (除了IE之外),所以需要對IE進行一個小小的Hack
  5. 對IE的Hack
  6. <!--[if IE]>
    <STYLE type="text/css">
     #container { position: relative; }
     #position { position: absolute; top: 50%; }
     #content { position: relative; top: -50%; }
    </STYLE>
    <![endif]–>
    
按這裏查看 Demo下載

網頁設計技巧:偵測解析度進入不同網頁

自動辨識瀏覽者解析度而進入不同的網頁

放於<head>與</head>之間:


<script type="text/javascript"> 
<!-- 
var swidth=1024var sheight=768;
if (screen.width<swidth||screen.height<sheight)
{ location.replace("800.htm"); } 
else { location.replace("1024.htm"); }
//--> 
</script> 
800.htm和1024.htm就是自動辨識解析度進入的網頁

網頁設計:做網站該注意哪些基本要素?

以下內容參考Google對網站管理員的建議,適當的地方我們已經添加註解。

設計與內容指南

  • 網站應具有清晰的層次結構和文本鏈接。每個網頁應至少可以通過一個靜態文本鏈接打開。文本鏈接不同於通過javascript等其他代碼生成的鏈接。如有些網頁下面的「打印」即不是通過文本鏈接實現。
  • 為用戶提供網站地圖,列出指向網站重要部分的鏈接。如果網站地圖上的鏈接超過或大約為 100 個,則需要將網站地圖拆分為多個網頁。
  • 網站應實用且信息豐富,網頁文字應清晰、準確地表述要傳達的內容。
  • 要考慮到用戶會使用哪些字詞來查找您的網頁,確保網站上確實包含了這些文字。 深刻理解這一點,會讓你受益匪淺。
  • 儘量使用文字而不是圖形來顯示重要的名稱、內容或鏈接。Google 抓取工具無法識別圖形中所含的文字。 特別是友情鏈接時,如果你是為了提供PR和排名,則用文字鏈接是重要的。
  • 確保對 TITLE 和 ALT 標記屬性的描述和表達準確無誤。切記為網頁的圖片加上 ALT描述,這裡是你放關鍵詞的好地方。
  • 檢查鏈接是否損壞,並確保 HTML 格式正確。 請使用 Google網站管理員工具時刻檢查自己網站的鏈接,如有損壞,注意刪除或修正。
  • 如果您決定採用動態頁面(即網址中包含"?"字符),請注意並非所有搜索引擎的抓取工具都能像抓取靜態網頁一樣抓取動態網頁。縮短參數長度並減少參數數目對動態頁面是有幫助的。建議採用URL重寫技術進行動態鏈接靜態化。
  • 將特定網頁上的鏈接限制在合理的數量內(少於 100 個)。如本頁,包含內部鏈接和外部鏈接不要超過 100個。

網站準備就緒之後

  • 將其他相關網站鏈接到您的網站。 就是尋找友情鏈接。
  • 將網站提交給 Google,網址為:http://www.google.com/addurl.html 。
  • 將 Sitemap 作為 Google網站管理員工具的一部分提交。Google 使用您的 Sitemap 來瞭解您網站的結構,並提高對您網頁的抓取率。
  • 確保應瞭解您網頁的所有網站都知道您的網站已處於在線狀態。即指向你網站的鏈接都需要是正常的,而非損壞。
  • 將您的網站提交到相關的目錄,例如,Open Directory Project 和 Yahoo!,以及其他特定行業的專業網站。

網頁設計技巧:IE6支援png圖檔的方法。



PNG 是一種很好很強大的圖檔格式,可支援 32 bit 色彩,GIF 只到 256 色,色彩上更細緻,而且不會像 JPEG 會有壓縮性的破壞,並可以儲存成透明格式,檔案也不會大的離譜,這些都是 JPEG 望塵莫及的。

這麼好用的圖片格式,很可惜的是在現在瀏覽器市場市佔率第一名的 IE 6 上卻不支援,網頁設計師們只能退而求其次,選擇色彩較少的 GIF 檔,而且 GIF 在轉成透明圖時,會有難看的毛邊出現,並不像 PNG 那般平順。

下面介紹的方法可以讓這個古老、萬惡的IE6也可以讀取PNG透明圖檔,而不在出現醜暴的灰底。

  1. 下載pngfix.js檔案,儲存到適當的地方。
  2. 然後將下列語法貼至<html></html>之間(我也看過有人貼<head></head>在之間,可我測試是無效的。
<!–-[if is IE 7.]>
<script defer type='text/javascript' src='pngfix.js'></script>
<![endif]–->
註一:src='pngfix.js' 注意該js檔案的路徑位置是否與你上傳的路徑相同
註二:src='pngfix.js' 可以寫絕對路徑。

車主必看:7 個省油大法

  1. 柔順加速

  2. 就是控制「黃金右腳」,在一般城市內到處都是交通燈,猛踩油門加速不會快得多少,但就會大大增加耗油量。

  3. 不要超速

  4. 一般汽車最省油的速度大概介乎時速 80 至 90 公里,開得越快,風阻越大,時速 90 公里較時速 110 公里省油約 20%。

  5. 減低重量

  6. 將車內不必要的物品拿掉,不要將車尾箱當作流動儲物櫃。

  7. 關閉車窗

  8. 如果在時速 80 公里以下打開車窗關閉冷氣較省油;但在時速 80 公里以下時,關閉車窗開冷氣較省油。

  9. 保持均速

  10. 在道路上盡量保持均速,不要經常猛加速後收慢車子。

  11. 保持跟車距離

  12. 如果緊跟實前車,不但較為危險,而且當前面收慢時便要馬上踩 brake,白白浪費了車輛的動力。

  13. 定期保養車子

  14. 定期保養車子,一些損耗品要定期更換,如機油、風隔、火咀等。而且要根據自己的駕駛狀況選擇合適的產品,例如用了度數太高的機油會較浪費汽油。

在 PHP 內計算兩個日期之間的差距的話,可以先將日期轉成 Unix timestamp 的數值然後再作計算。例如要計算兩個日期 01/01/2009 及今天的日期差距,可以這樣做:

// 將日期以 "/" 附號分隔, 得出 日, 月, 年
$time = explode("/", "01/01/2009");
 
// 將 01/01/2009 轉換成 Unix timestamp
$unix_time = mktime(0, 0, 0, $time[0], $time[1], $time[2]);
 
// 計算 $unix_time 和現在的差距, 並除 86400 (一天有 86400 秒)
$time_diff = (time() - $unix_time) / 86400;

// 只擷取整數部份
$time_diff = (int) $time_diff;
 
echo "01/01/2009 距離現在 " .  $time_diff . " 天.";
?>


由於《Windows XP》無法直升級至《Windows 7》,所以必須預先將原有系統的設定值進行備份,包括:電子郵件,相版及「我的最愛」等。Microsoft 特別針對用家所面對的難題,開發了「Windows 輕鬆傳輸」功能,只要事先在舊電腦系統上執行此程式,即可把原有資料備份,再把新設定及檔案完整套用至《Windows 7》。

「Windows 輕鬆傳輸」下載網址:

《Windows XP (32bit)》

《Windows Vista (32bit)》

《Windows Vista (64bit)》

  1. 安裝後可於「開始」功能表行「Windows 7 的 Windows 輕鬆傳輸」。
  2. 跟著選擇傳輸方法,若沒有專用傳輸綫,可選擇「外接式硬碟或 USB 快閃磁碟機」。
  3. 然後按一下「這是我的舊電腦」。
  4. 此時,會列出系統的使用者帳戶,用戶可以按下「自訂」選擇指定項目進行轉移。
  5. 接著,可為輚移檔案設下密碼,提高保安性。
  6. 檔案會以 MIG 格式儲存,只需將檔案抄寫到流動儲存裝置上即可。
  7. 最後,可將存有舊系統設定值的流動存裝置,連接至已安裝《Windows 7》的電腦上,並執行該 MIG 檔,以及按下「傳輸」,便可把所有資料轉移到《Windows 7》上。


以往版本的《Windows》,只會定期為系統備份一些還原點,而非確實將所有檔案進行複製,備份做另一副本;一旦遇上系統設定當損壞,便不能進行修復。

《Windows 7》新增「映像檔」功能,將硬碟內有檔案與奬態徹底備份;若系統不幸發問題,只需透過《Windows 7》安裝光或或自行製作的修復光碟,便可將系統還原至本來狀態。

設定備份

  1. 首先,要進入控制台,並選取「系統及安全性」,繼而進入「備份電腦」。
  2. 於右方備份欄內,按下「設定備份」。
  3. 跟著便要選擇備份檔所儲存位置,可以是本機沒有安裝《Windows》的硬碟分割區、外置碟碟,或是燒錄至光碟上。
  4. 之後,可選擇需要備份的項目。若用戶沒有特定的資料夾需再分開備份,可選擇「讓Windows選擇」;不然,則可選取「讓我選擇」,自行設定。
  5. 若儲存裝置本身空量足夠,建議一併剔選「包含磁碟機的系統映像」,額外備分整個硬碟分割,以防萬一。
  6. 當所有設定完成,便可按下「開始排程」,程式隨即自動定時備份系統。

光碟修復密技

  1. 至於光碟修復,過程十分簡單。同樣進入「控制台」內的「系統及安全性」,進入「備份電腦」分頁,往左方點選「建立系統修復光碟」。跟著放入一張空白光碟,再按下「建立光碟」,程式即自動開始製作。
  2. 假若電腦出現故障,只需利用修復光碟啟動電腦,並接駁已儲存備份映像檔的外接儲存裝置,選擇「Restore your computer using a system image that you created」→「Next」。
  3. 程式便會開始偵測早前備份的映像檔,可因應需要選擇合適的存檔,然後按下「Next」,讓系統執行修復工作。

 

只要為3個作業系統各自建立一個硬碟分割區,再把它們分別安裝到各分割區中,便可享用多重系統。


    《Windows XP》

  1. 要做到多重系統效果,需要先安裝《Windows XP》。請放入安裝光碟啟動安裝程式,並按下〔Enter〕 鍵。
  2. 建入下一頁,按下〔C〕鍵,命令程式在未分割的硬碟空間上建立一個磁碟分區。
  3. 跟著,更可因應需要,輸入要分配予《Windows XP》使用的空間空量,如:電腦的硬碟為120GB,可分配三分之一的容量,即40GB予此系統。
  4. 按下〔Enter〕鍵跳至下一頁,再按下〔Enter〕鍵,更將《Windows XP》安裝在所選的磁碟分割區上。確認《Windows XP》運作無誤後,即可安裝《Windows Vista》。
  5. 《Windows Vista》

  6. 接下來,便是安裝《Windows Vista》,同樣利用光碟啟動安裝程序,進入後選取「Custom」。
  7. 然後於未分割硬碟空間,輸入分配空量;若是安裝「Home Premium」或以上本,建議分配10GB或以上空間,完成後按「Apply」。
  8. 待安裝完畢,便可發現,電腦在重新開機後,會跳出作業系統的選單。
  9. 《Windows 7》

  10. 之後,用所便可安裝《Windows 7》;步驟跟《Windows Vista》方法相同。需要先選擇「自定」安裝模式,再於另一獨立硬碟分割上安裝新系統。
  11. 當三個的作業系統安裝完成後,重新啟動電腦,便會出現開機選單,選擇後即可分別進入不同的《Windows》。