takeasy

your imagination is my power


CSS 版面控制: 固定置中版面


網頁設計師為了版面美觀,時常會想讓網頁的某塊區域置中。在以前拿表格來排版時,我們可以用以下方式達成目的:


Example:
<table align="center" border="1" width="200">
  <tr><td>網頁內容</td></tr>
</table>

Screen:

網頁內容


不過,以表格排版的話頁面的版型就定死了,毫無靈活度可言;比較好的方法是採用 CSS 各種特性來排版,請繼續看下去。


彈性寬度

如果你的網頁寬度想依視窗寬度調節(例如訂為視窗寬的 80%),那麼便可以採用這種方式。首先我們必須先把整個網頁內容用一個 div 標籤包起來,例如:

Example:
<html>
    <head>[網頁標題]</head>
    <body>
        <div id="container">
        [網頁內容]
        </div>
    </body>
</html>

我們指定這個 div 標籤的 id 屬性為 container (依據規範,id 屬性的值在整個頁面裡必須是獨一無二的,不可以重複)。設定完畢以後,在 head 標籤之中插入此段 CSS 程式碼:

<style type="text/css">
#container {
  margin: 0 auto;
  width: 80%; 
}
</style>

這代表此樣式要套用至 id 屬性為 container 的區塊(#container),區塊寬度為視窗寬的 80%,上下邊界為零、左右邊界則由瀏覽器自動調節(auto)。如此一來,頁面就會自動置中了。

固定寬度

如果你的版面寬度固定(如 760 像素),則可以把前例的 width 特性值修改為 760px。此外對於固定寬度的版面,我們還有另一種設定方式

#container {
  position: relative;
  left: 50%;
  margin-left: -380px; /* 760 除以 -2 */ 
  width: 760px;
}

這個方式比較奇妙點,position: relative; 代表此區塊將以相對方式,依其母元素(在此例為 body)的位置來定位。加上這條特性後,由於尚未指定位置,container 會依照預設值擺在母元素的左上角,如圖一所示。


加上 left: 50%; 之後,此區塊左緣將移至母元素的中線,如圖二。


第三條 margin-left: -380px; 比較難解釋,簡單說就是把整個元素的左邊界往回拉 380px(區塊寬度 760px 的一半,負值就是往回拉)。如圖三所示,我們可以看到整個版面置中了。

軟件推介:XP 模擬 Win 7 系列(6):全新小畫家


《Windows 7》中的《小畫家》程式,功能夠其他《Windows》的更多,亦使用「ribbon」介面。有程式員仿照《Windows 7》中的《小畫家》,製成《paintribbon》小程式,讓《Windows XP》亦可享用新功能。



paintribbon

Version: 0.1.5

Platform: Windows

Size: 1.87 MB

Website: http://aviassin.wikidot.com/paintribbon

Download

軟件推介:XP 模擬 Win 7 系列(5):容量顯示


自《Windows Vista》開始,在「我的電腦」中,會以圖像式顯示硬碟餘下的容量,只要在《Windows XP》中,安裝《Vista Drive Icon》即可仿傚此功能。


Vista Drive Icon

Version: 1.4.0.149

Platform: Windows

Size: 132KB

Website: http://drvicon.sourceforge.net/

Download

軟件推介:XP 模擬 Win 7 系列(4):追加 Gadgets


《Windows 7》和《Windows Vista》均提供小工具 Gadgets,讓用戶在桌面上使用不同的應用程式,十分方便,而《Windows 7》更可以將小工具任意擺放。有外國公司仿照《Windows 7》的設計,製作了一套小工具軟件,內裏有常用的工具,可隨便於桌面上任意擺放。


下載並安裝程式後,在右上方按下「+」號,便可以選擇使用哪款小工具。



按下欲使用的小工具後,便會即時顥示於桌面。


Thoosje's Windows 7 sidebar

Version: 3.0

Size: 5.26 MB

Website: Thoosje's Windows 7 sidebar 1.0 the Sidebar for Vista and XP

Download 1 | Download 2 | Download 3

軟件推介:XP 模擬 Win 7 系列(3):植入主題


接下來要令個《Windows XP》看起來更像《Windows 7》。可使用由 SevenVG 製作的「SevenVG RTM Theme for Windows XP by Vishal Gupta」主題包。


下載 SevenVG 主題包並解壓後,會發現內裏包含多個資料夾。在「Themes」資料夾中執行「theme.exe」,按下[Install]鍵,再於「Styler Toolbar」資料夾中,執行「First Install Me」,便可安裝《Styler》。接著,執行「Then Run Me」即可成功將它安装到電腦。


然後,在桌面位置按下滑鼠右鍵,選取「內容」後,再於「主題」分頁下,選擇「SevenVG RTM」主題。


在「外觀」分頁中,於「Windows 和按鈕」內揀選「SevenVGRT」,並於「色彩配置」中,選取想要的主題色彩效果。


在頁中預覽設定的效果,完成設定後,整個《Windows XP》畫面已變得如《Windows 7》般。


Download


軟件推介:XP 模擬 Win 7 系列(2):體驗 SuperBar


《Windows 7》的「SuperBar」工作列,提升了用戶的使用體驗,即使用戶同時間啟多個視窗,亦顯得很有條理。《Windows XP》的用戶只要安裝《ViGlance Build 1194》小程式,便可以完全體驗「SuperBar」工作列的功能。


下載程式後無須安裝,直接執行程式,即可把各程式的視窗變成小圖示。用法跟《Windows 7》相同,只要在圖示上按下滑鼠右鍵,並選擇「Pin」,即可把該程式在工作列上建立圖示捷徑。


當開啟多個資料夾視窗時,它只會整理合為單一圖示,用戶把滑鼠移至圖示時,才會顯示正在開啟的視窗。



在右下方 ViGlance 圖示上,按下滑鼠右鍵進入「option」頁面,勾選「Start ViGlance with Windows」,便可讓電腦每次啟動時,均套用「SuperBar」工作列的功能。


ViGlance Build 1194

Platform: Windows XP

Size: 274 KB

Website: http://lee-soft.com/products/

Download

軟件推介:XP 模擬 Win 7 系列(1):登入畫面


被外界評為 Microsoft 近年最佳產品之一的《Windows 7》,已正式推出。暫未有預算升級《Windows 7》的《Windows XP》用家,其實可自行把作業系統改頭換面,體驗《Windows 7》的外觀和部分功能。


《Windows 7》的登入畫面教人眼前一亮。用戶介面設計師 RaulWindows,特別製作了一套模仿《Windows 7》的登入畫面,供各位免費使用,其登入畫面提供了傳統比例,以及現時流行的 widescreen 比例兩個版本任擇。


首先,下載檔案。另外,在「C:\Windows\Resources\」資料夾下,建立一個名為「logon」的資料夾,然後將下載回來的「LogonUL.exe」放到該資料夾中。


接著,執行同一資料夾中的「Setup.reg」,便完成安裝步驟。


下次開敫電腦時,便會套用新的《Windows 7》登入畫面。


Download

軟件推介;免費向量繪圖 - Inkscape


作為一款向量繪圖軟件,《Inkscape 0.47》的功能十分強大,當中內置無失真的繪圖元件,可以建構出美麗的幾何圖形,足以媲美《Adobe Illustrator》及《corelDraw》等軟件。另外,格式更可輸出為EPS, PS等格式,適合在其他平台作後期處理。















Inkscape

Platform: Windows/Mac/Linux

Version: 0.47

Language: English

Size: 35.8 MB

Website: Download

軟件推介:Windows系統制室


其實《Windows》內備有不少實用的系統工具,不過其位置十分隱蔽,又需要時間尋找或記住指令。現在使用《Commands in Demand 9.10》,即可集合各種內置指令。只要一按功能表,便可直接啟動工具,以檢視系資訊,或隱藏各種圖示及裝置。


Commands in Demand

Platform: 2000/XP/2003/Vista

Version: 9.10

Language: English

Size: 3.57MB

Website: Download

軟件推介:網頁草稿設件軟件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 ,請選取「保留我的最愛網站資料」核取方塊。
按一下 [刪除]。