tag:blogger.com,1999:blog-91393046366660094882024-03-08T11:54:58.865+08:00takeasyyour imagination is my powerChrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.comBlogger24125tag:blogger.com,1999:blog-9139304636666009488.post-52657261425047084202010-02-23T16:27:00.000+08:002010-02-23T16:27:59.132+08:00CSS 版面控制: 固定置中版面<style>
pre.code {border: 1px #333 solid; padding: 3px;margin:10px;letter-spacing:0px; }
.example {border: 2px #AAF solid; padding:3px; margin:10px; }
.remark {color: red }
</style><br />
<h3>CSS 版面控制: 固定置中版面<br />
</h3><br />
<p>網頁設計師為了版面美觀,時常會想讓網頁的某塊區域置中。在以前拿表格來排版時,我們可以用以下方式達成目的:<br />
</p><br />
<div class="example">Example:<br />
<pre class="code"><table align="center" border="1" width="200">
<tr><td>網頁內容</td></tr>
</table>
</pre><br />
<div class="display">Screen:<center><br />
<table align="center" border="1" width="200"> <tr><td>網頁內容</td></tr>
</table></center><br />
</div></div><br />
<p>不過,以表格排版的話頁面的版型就定死了,毫無靈活度可言;比較好的方法是採用 CSS 各種特性來排版,請繼續看下去。</p><br />
<h1>彈性寬度</h1><p>如果你的網頁寬度想依視窗寬度調節(例如訂為視窗寬的 80%),那麼便可以採用這種方式。首先我們必須先把整個網頁內容用一個 div 標籤包起來,例如:</p><div class="example">Example:<br />
<pre class="code"><html>
<head>[網頁標題]</head>
<body>
<div id="container">
[網頁內容]
</div>
</body>
</html></pre></div><p>我們指定這個 div 標籤的 id 屬性為 container (依據規範,id 屬性的值在整個頁面裡必須是獨一無二的,不可以重複)。設定完畢以後,在 head 標籤之中插入此段 CSS 程式碼:</p><pre class="code"><style type="text/css">
#container {
<span class="remark">margin: 0 auto;
width: 80%;</span>
}
</style>
</pre><p>這代表此樣式要套用至 id 屬性為 container 的區塊(#container),區塊寬度為視窗寬的 80%,上下邊界為零、左右邊界則由瀏覽器自動調節(auto)。如此一來,頁面就會自動置中了。</p><h4>固定寬度</h4><p>如果你的版面寬度固定(如 760 像素),則可以把前例的 width 特性值修改為 760px。此外對於固定寬度的版面,我們還有另一種設定方式</p><pre class="code">#container {
<span class="remark">position: relative;
left: 50%;
margin-left: -380px; /* 760 除以 -2 */</span>
width: 760px;
}
</pre><p>這個方式比較奇妙點,position: relative; 代表此區塊將以相對方式,依其母元素(在此例為 body)的位置來定位。加上這條特性後,由於尚未指定位置,container 會依照預設值擺在母元素的左上角,如圖一所示。</p><img src="http://lh4.ggpht.com/_OmeNwfve_n0/S4OPu8UB2xI/AAAAAAAAAHY/vP4MOvjwZCQ/e6b33ff5.gif"><br />
<p>加上 left: 50%; 之後,此區塊左緣將移至母元素的中線,如圖二。</p><img src="http://lh4.ggpht.com/_OmeNwfve_n0/S4OPupSGCxI/AAAAAAAAAHQ/2dzsrIux3Xg/14e63a11.gif"><br />
<p>第三條 margin-left: -380px; 比較難解釋,簡單說就是把整個元素的左邊界往回拉 380px(區塊寬度 760px 的一半,負值就是往回拉)。如圖三所示,我們可以看到整個版面置中了。</p><img src="http://lh5.ggpht.com/_OmeNwfve_n0/S4OPuho39PI/AAAAAAAAAHU/IerRYcZ-8tA/22e10e96.gif">Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-32741429237285919912009-12-03T15:51:00.000+08:002009-12-03T15:51:43.532+08:00軟件推介:XP 模擬 Win 7 系列(6):全新小畫家<h3>軟件推介:XP 模擬 Win 7 系列(6):全新小畫家<br />
</h3><br />
<p>《Windows 7》中的《小畫家》程式,功能夠其他《Windows》的更多,亦使用「ribbon」介面。有程式員仿照《Windows 7》中的《小畫家》,製成《paintribbon》小程式,讓《Windows XP》亦可享用新功能。<br />
</p><img src="http://aviassin.wdfiles.com/local--files/paintribbon/pic2.png"><br />
<img src="http://aviassin.wdfiles.com/local--files/paintribbon/pic1.png" width=500><br />
<p><u><b>paintribbon</b></u><br><br />
Version: 0.1.5<br><br />
Platform: Windows<br><br />
Size: 1.87 MB<br><br />
Website: <a href="http://aviassin.wikidot.com/paintribbon" target="_blank">http://aviassin.wikidot.com/paintribbon</a><br><br />
<a href="http://download.cnet.com/3001-2191_4-10958115.html?spi=34908298fdb9861f75438265c169a433&part=dl-6314117" target="_blank">Download</a><br />
</p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-16543106339671304922009-12-03T15:40:00.000+08:002009-12-03T15:40:28.611+08:00軟件推介:XP 模擬 Win 7 系列(5):容量顯示<h3>軟件推介:XP 模擬 Win 7 系列(5):容量顯示<br />
</h3><br />
<p>自《Windows Vista》開始,在「我的電腦」中,會以圖像式顯示硬碟餘下的容量,只要在《Windows XP》中,安裝《Vista Drive Icon》即可仿傚此功能。<br />
</p><img src="http://drvicon.sourceforge.net/images/screenshot.png" width=500><br />
<p><u><b>Vista Drive Icon</b></u><br><br />
Version: 1.4.0.149<br><br />
Platform: Windows<br><br />
Size: 132KB<br><br />
Website: <a href="http://drvicon.sourceforge.net/" target="blank">http://drvicon.sourceforge.net/</a><br><br />
<a href="http://downloads.sourceforge.net/drvicon/VistaDriveIcon_1.4_Setup.exe" target="_blank">Download</a><br />
</p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-42727388416682091852009-12-03T15:32:00.001+08:002009-12-03T15:33:02.058+08:00軟件推介:XP 模擬 Win 7 系列(4):追加 Gadgets<h3>軟件推介:XP 模擬 Win 7 系列(4):追加 Gadgets<br />
</h3><br />
<p>《Windows 7》和《Windows Vista》均提供小工具 Gadgets,讓用戶在桌面上使用不同的應用程式,十分方便,而《Windows 7》更可以將小工具任意擺放。有外國公司仿照《Windows 7》的設計,製作了一套小工具軟件,內裏有常用的工具,可隨便於桌面上任意擺放。<br />
</p><br />
<p>下載並安裝程式後,在右上方按下「+」號,便可以選擇使用哪款小工具。<br />
<br />
<a href="http://www.thoosje.com/windows-7-sidebar/sevenbar-scrn-1.jpg" target="_blank"><br />
<img src="http://www.thoosje.com/windows-7-sidebar/sevenbar-thumb1.jpg"></a></p><br />
<p>按下欲使用的小工具後,便會即時顥示於桌面。<br />
<a href="http://www.thoosje.com/windows-7-sidebar/sevenbar-scrn-2.jpg" target="_blank"><br />
<img src="http://www.thoosje.com/windows-7-sidebar/sevenbar-thumb2.jpg"></a></p><br />
<p><u><b>Thoosje's Windows 7 sidebar</b></u><br />
<br />
Version: 3.0<br />
<br />
Size: 5.26 MB<br />
<br />
Website: <a href="http://www.thoosje.com/windows-7-sidebar-for-xp-and-vista.html" target="_blank">Thoosje's Windows 7 sidebar 1.0 the Sidebar for Vista and XP</a><br />
<br />
<a href="http://www.thoosje.com/download/sidebar-7/click.php?id=1" target="_blank">Download 1</a> | <a href="http://www.thoosje.com/download/sidebar-7/click.php?id=2" target="_blank">Download 2</a> | <a href="http://www.thoosje.com/download/sidebar-7/click.php?id=3" target="_blank">Download 3</a><br />
</p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-91231712082099165622009-12-03T11:12:00.001+08:002009-12-03T11:12:56.316+08:00軟件推介:XP 模擬 Win 7 系列(3):植入主題<h3>軟件推介:XP 模擬 Win 7 系列(3):植入主題<br />
</h3><br />
<p>接下來要令個《Windows XP》看起來更像《Windows 7》。可使用由 SevenVG 製作的「SevenVG RTM Theme for Windows XP by Vishal Gupta」主題包。<br />
</p><br />
<p>下載 SevenVG 主題包並解壓後,會發現內裏包含多個資料夾。在「Themes」資料夾中執行「theme.exe」,按下[Install]鍵,再於「Styler Toolbar」資料夾中,執行「First Install Me」,便可安裝《Styler》。接著,執行「Then Run Me」即可成功將它安装到電腦。<br />
<br />
<img src="http://lh3.ggpht.com/_OmeNwfve_n0/Sxcr4XXSfYI/AAAAAAAAADc/ggjG8Fswj98/Theme1.png"></p><br />
<p>然後,在桌面位置按下滑鼠右鍵,選取「內容」後,再於「主題」分頁下,選擇「SevenVG RTM」主題。<br />
<br />
<img src="http://lh6.ggpht.com/_OmeNwfve_n0/Sxcr4RqBzsI/AAAAAAAAADg/RE6FdwlkbmA/Theme2.png"></p><br />
<p>在「外觀」分頁中,於「Windows 和按鈕」內揀選「SevenVGRT」,並於「色彩配置」中,選取想要的主題色彩效果。<br />
<br />
<img src="http://lh5.ggpht.com/_OmeNwfve_n0/Sxcr4vTz8OI/AAAAAAAAADk/mri3HyFFHro/Theme3.png"></p><br />
<p>在頁中預覽設定的效果,完成設定後,整個《Windows XP》畫面已變得如《Windows 7》般。<br />
<br />
<img src="http://lh6.ggpht.com/_OmeNwfve_n0/Sxcr4Ob-_UI/AAAAAAAAADY/5eooe1KH-48/s640/Theme_Preview.png" width=500></p><br />
<p><a href="http://www.deviantart.com/download/133568262/SevenVG_RTM_Theme_for_XP_by_Vishal_Gupta.zip" target="_blank">Download</a></p><br />
<p></p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-18578766397019823222009-12-03T10:18:00.004+08:002009-12-03T10:27:20.722+08:00軟件推介:XP 模擬 Win 7 系列(2):體驗 SuperBar<h3>軟件推介:XP 模擬 Win 7 系列(2):體驗 SuperBar<br />
</h3><br />
<p>《Windows 7》的「SuperBar」工作列,提升了用戶的使用體驗,即使用戶同時間啟多個視窗,亦顯得很有條理。《Windows XP》的用戶只要安裝《ViGlance Build 1194》小程式,便可以完全體驗「SuperBar」工作列的功能。<br />
</p><br />
<p>下載程式後無須安裝,直接執行程式,即可把各程式的視窗變成小圖示。用法跟《Windows 7》相同,只要在圖示上按下滑鼠右鍵,並選擇「Pin」,即可把該程式在工作列上建立圖示捷徑。<br />
<img src="http://lh5.ggpht.com/_OmeNwfve_n0/Sxcb-I4ZuuI/AAAAAAAAADM/Zpq2GX0OvR4/ViGlance1.png"></p><br />
<p>當開啟多個資料夾視窗時,它只會整理合為單一圖示,用戶把滑鼠移至圖示時,才會顯示正在開啟的視窗。<br />
<img src="http://lh4.ggpht.com/_OmeNwfve_n0/SxccDe1nf-I/AAAAAAAAADQ/qeMKF2p4l5M/s640/Aero-vNext-the-Sistine-Chapel-of-Windows-Shell-Evolution-Windows-7-Superbar-4.jpg" width=500><br><br />
<img src="http://clifgriffin.com/wp-content/uploads/2008/11/superbarrevealedwindows.png"></p><br />
<p>在右下方 ViGlance 圖示上,按下滑鼠右鍵進入「option」頁面,勾選「Start ViGlance with Windows」,便可讓電腦每次啟動時,均套用「SuperBar」工作列的功能。<br />
<img src="http://lh3.ggpht.com/_OmeNwfve_n0/Sxcb-Oqn2hI/AAAAAAAAADI/q1tb2Q1fHXk/ViGlance3.png"></p><br />
<p><b>ViGlance Build 1194</b><br><br />
Platform: Windows XP<br><br />
Size: 274 KB<br><br />
Website: <a href="http://lee-soft.com/products/" target="_blank">http://lee-soft.com/products/</a><br><br />
<a href="http://lee-soft.com/viglance/builds/ViGlance%20OneStep%20V1.zip">Download</a><br />
</p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-54360799838492241512009-12-03T09:49:00.000+08:002009-12-03T10:27:20.724+08:00軟件推介:XP 模擬 Win 7 系列(1):登入畫面<h3>軟件推介:XP 模擬 Win 7 系列(1):登入畫面<br />
</h3><br />
<p>被外界評為 Microsoft 近年最佳產品之一的《Windows 7》,已正式推出。暫未有預算升級《Windows 7》的《Windows XP》用家,其實可自行把作業系統改頭換面,體驗《Windows 7》的外觀和部分功能。<br />
</p><br />
<p>《Windows 7》的登入畫面教人眼前一亮。用戶介面設計師 RaulWindows,特別製作了一套模仿《Windows 7》的登入畫面,供各位免費使用,其登入畫面提供了傳統比例,以及現時流行的 widescreen 比例兩個版本任擇。</p><br />
<p><img src="http://lh6.ggpht.com/_OmeNwfve_n0/SxcVO-NDmhI/AAAAAAAAAC8/hkcFC1jqoUQ/logonUI.png">首先,下載檔案。另外,在「C:\Windows\Resources\」資料夾下,建立一個名為「logon」的資料夾,然後將下載回來的「LogonUL.exe」放到該資料夾中。</p><br />
<p><img src="http://lh4.ggpht.com/_OmeNwfve_n0/SxcVO-zlsQI/AAAAAAAAADA/fIgnm0YCM54/reg.png" width=500>接著,執行同一資料夾中的「Setup.reg」,便完成安裝步驟。</p><br />
<p><img src="http://lh5.ggpht.com/_OmeNwfve_n0/SxcVPK3ZLPI/AAAAAAAAADE/Yp7Q2Zvknf4/s640/Windows_7_Default_Login_5.jpg" width=500>下次開敫電腦時,便會套用新的《Windows 7》登入畫面。</p><br />
<p><a href="http://raulwindows.deviantart.com/art/Windows-7-Default-Login-5-120585446" target="_blank">Download</a></p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-54721521609069348712009-12-02T10:43:00.002+08:002009-12-02T10:52:13.680+08:00軟件推介;免費向量繪圖 - Inkscape<h3>軟件推介;免費向量繪圖 - Inkscape<br />
</h3><br />
<p>作為一款向量繪圖軟件,《Inkscape 0.47》的功能十分強大,當中內置無失真的繪圖元件,可以建構出美麗的幾何圖形,足以媲美《Adobe Illustrator》及《corelDraw》等軟件。另外,格式更可輸出為EPS, PS等格式,適合在其他平台作後期處理。<br />
</p><br />
<p><a href="http://www.inkscape.org/screenshots/gallery/inkscape-0.47-tweakaroo.png" target="_blank"><br />
<img src="http://www.inkscape.org/screenshots/gallery/thumbs/inkscape-0.47-tweakaroo_thumb.png"></a><br />
<a href="http://www.inkscape.org/screenshots/gallery/inkscape-0.47-spiro-typography.png" target="_blank"><br />
<img src="http://www.inkscape.org/screenshots/gallery/thumbs/inkscape-0.47-spiro-typography_thumb.png"></a><br />
<a href="http://www.inkscape.org/screenshots/gallery/inkscape-0.47-pinkitude.png" target="_blank"><br />
<img src="http://www.inkscape.org/screenshots/gallery/thumbs/inkscape-0.47-pinkitude_thumb.png"></a><br />
<a href="http://www.inkscape.org/screenshots/gallery/inkscape-0.47-photorealism.png" target="_blank"><br />
<img src="http://www.inkscape.org/screenshots/gallery/thumbs/inkscape-0.47-photorealism_thumb.png"></a><br />
<a href="http://www.inkscape.org/screenshots/gallery/inkscape-0.47-garden.png" target="_blank"><br />
<img src="http://www.inkscape.org/screenshots/gallery/thumbs/inkscape-0.47-garden_thumb.png"></a><br />
<a href="http://www.inkscape.org/screenshots/gallery/inkscape-0.47-font-design.png" target="_blank"><br />
<img src="http://www.inkscape.org/screenshots/gallery/thumbs/inkscape-0.47-font-design_thumb.png"></a><br />
</p><br />
<p><b>Inkscape</b></p><p>Platform: Windows/Mac/Linux</p><p>Version: 0.47</p><p>Language: English</p><p>Size: 35.8 MB</p><p>Website: <a href="http://www.inkscape.org" target="_blank">Download</a></p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-29842289434034674972009-12-02T10:16:00.002+08:002009-12-03T10:27:31.496+08:00軟件推介:Windows系統制室<h3>軟件推介:Windows系統制室<br />
</h3><br />
<p>其實《Windows》內備有不少實用的系統工具,不過其位置十分隱蔽,又需要時間尋找或記住指令。現在使用《Commands in Demand 9.10》,即可集合各種內置指令。只要一按功能表,便可直接啟動工具,以檢視系資訊,或隱藏各種圖示及裝置。<br />
</p><p><img src="http://www.vasilios-free.gr/freesoft/data/commands_in_demand.gif"></p><p><b><br />
Commands in Demand</b></p><p>Platform: 2000/XP/2003/Vista</p><p>Version: 9.10</p><p>Language: English</p><p>Size: 3.57MB</p><p>Website: <a href="http://www.vasilios-free.gr/freesoft/">Download</a></p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-49234735667849104142009-11-30T10:34:00.003+08:002009-12-03T10:27:46.903+08:00軟件推介:網頁草稿設件軟件Balsamiq Mockups<h3>軟件推介:網頁草稿設件軟件Balsamiq Mockups<br />
</h3><br />
<p>最近在煩惱網站設計、Template 設計等,所有設計都是由靈感至草稿開始。Balsamiq Mockups 提供手稿風格的 mockup presentation,包括有<a href="http://www.balsamiq.com/demos/mockups/Mockups.html">網上版</a>、及<a href="http://www.balsamiq.com/products/mockups/desktop#download">下載版</a>(Adobe Air Application)</p>。也因為 Balsamiq Mockups 是 Adobe Air 的應用程式,所以可以跨平台,不論 Windows、Mac或 Linux 都可以跑,非常方便。離線版也可以用快速鍵進行剪貼簿操作,而線上版就無法用快速鍵了。下載版(US$79)畫好的layout 可以另存成一個 xml 檔,也可以存成 png 圖片檔。<br />
<br />
DESKTOP APPLICATIONS<br />
<img src="http://www.balsamiq.com/images/myTunez.gif" width=550><br />
DIALOG BOXES<br />
<img src="http://www.balsamiq.com/images/exportdialog.gif"><br />
WEB APPLICATIONS<br />
<img src="http://www.balsamiq.com/images/wiki.gif" width=550><br />
WEB SITES<br />
<img src="http://www.balsamiq.com/images/bahoomaps.gif" width=550><br />
<img src="http://www.balsamiq.com/images/mytube.gif" width=550><br />
IPHONE APPLICATIONS<br />
<img src="http://www.balsamiq.com/images/iPhoneExamples.png" width=550><br />
RICH INTERNET APPLICATIONS<br />
<img src="http://www.balsamiq.com/images/bmeeting.gif" width=550><br />
<br />
<p>Balsamiq Mockups 內建75種常用的網頁元件,要用時拉到工作底稿上,調一下位置和大小,填一下內部文字就好了。很快就可以畫出一個有模有樣,清爽易讀的網頁 layout 草稿。</p><p>Balsamiq Mockups 還有一個頗實用的功能,可切換到全螢幕展示模式;進入全螢幕模式後,畫面上會出現一個超大的滑鼠指標,便於指向你要解說的部位,這樣連雷射筆都可以省下來了。</p><p>要輸入中文時,要先勾選 View – Use System Fonts,這樣就能正常使用中文。</p><br />
<p>Sample:<a href="http://www.mockupstogo.net/">Mockups To Go</a><br />
<p>教學:<br />
<br />
<a href="http://www.youtube.com/watch?v=aJTuFRaIi_g">http://www.youtube.com/watch?v=aJTuFRaIi_g</a><br />
<br />
<br />
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/aJTuFRaIi_g&hl=zh_TW&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/aJTuFRaIi_g&hl=zh_TW&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br />
</p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-35735570495883547612009-11-24T09:42:00.002+08:002009-11-24T09:48:05.823+08:00網頁設計技巧:CSS固定footer<h3>網頁設計技巧:CSS固定footer<br />
</h3><br />
當做一個頁面時,如果頁面內容很少,不足於填充整個畫面,按普通的佈局,就會出現下面圖片中的樣子(也就是底部內容並沒有位於窗口的底部,而留下了大量空白。<br />
<img src="http://www.wowbox.com.tw/blog/attachments/month_0902/1200922413410.gif" /><br />
<br />
對於追未完美的設計師來說,這是不美觀的。網上有一些解決方案,但會出現當改變窗口高度時,底部和正文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變窗口高度,但設計嘛,追求的就是盡善盡美。<br />
<img src="http://www.wowbox.com.tw/blog/attachments/month_0902/3200922413415.gif" /><br />
<br />
下面是我找到的一個比較完美的方法,來自國外的設計達人,純CSS,可以實現:當正文內容很少時,底部位於窗口最下面。當改變窗口高度時,不會出現重疊問題。<br />
<img src="http://www.wowbox.com.tw/blog/attachments/month_0902/4200922413422.gif" /><br />
<br />
<br />
HTML代碼:<br />
<div style="border: 1px solid; letter-spacing: 0px; margin: 10px; padding: 3px;"><pre><div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</pre></div>使用這個佈局的前提,就是footer要在總的div容器之外,footer使用一個層,其它所有內容使用一個總的層。如果確實需要到添加其它同級層,那這個同級層就必須使用position:absolute進行絕對定位。<br />
<br />
CSS代碼:<br />
<div style="border: 1px solid; letter-spacing: 0px; margin: 10px; padding: 3px;"><pre>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;}
</pre></div>需要注意的就是#main的padding值、footer的高度和負margin值,需要保持一致。<br />
<br />
瀏覽器的兼容:<br />
對#main部份進行著名的Clearfix Hack:<br />
<div style="border: 1px solid; letter-spacing: 0px; margin: 10px; padding: 3px;"><pre>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 */
</pre></div>測試於兩欄懸浮佈局,兼容各大主流瀏覽器,包括Google Chrome。<br />
<br />
<br />
<ul><li>網絡上之前比較知名的footer佈局有Ryan Faits創造的,不過它的方法在HTML代碼中會有一個空的div層。嚴格來說,是不符合語義網代碼標準的。</li>
<li>另外,還有一篇Exploring Footers article from A List Apart,但使用了一些JavaScript代碼。</li>
</ul><br />
原站:<a href="http://www.cssstickyfooter.com/using-sticky-footer-code.html">CSS Sticky Footer</a>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-74667443596409176512009-11-23T12:05:00.002+08:002009-11-23T12:06:33.330+08:00解決不升級無法使用Windows live Messenger (MSN)<h3>解決不升級無法使用Windows live Messenger (MSN)<br />
</h3><br />
最近Microsoft 強制用戶必須把Windows Live Messenger 升級至9.0版本,才能正常登入。但可以利用模擬在Windows 2000 作業系統內行舊版Windows Live Messenger,便不會被強制升級。<br />
<br />
<br />
<ol>先找出MSN 的執行檔
<li>在桌面或程式集內,以滑鼠右按Windows Live Messenger的捷徑,在工能表中選擇「內容」。</li>
<li>在跳出的「內容」視窗中,按下「搜尋目標」,便會跳出Windows Live Messenger主程式的安裝位置,以及自動選取其執行檔。</li>
<br>然後模擬執行
<li>使用滑鼠右按Windows Live Messenger 的執行檔「msnmsgr.exe」,選擇「內容」。</li>
<li>在跳出的指定頁面中,移至「相容性」頁。</li>
<li>於「相容模式」欄下勾選「以相容性模式執行這個程式」。</li>
<li>於下方選擇「Windows 2000」,再按下「確定」,便能正常使用舊版Windows Live Messenger。</li>
</ol>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-66578403929957705682009-11-23T11:01:00.003+08:002009-12-03T10:28:06.062+08:00軟件推介:UltraDefrag 重組硬碟碎片<h3>軟件推介:UltraDefrag 重組硬碟碎片<br />
</h3><br />
<p>UltraDefrag 是一款實而不華的硬碟重組工具,操作介面雖然簡單,但功能直截了當,有助加快硬碟的讀寫表現。<br />
</p><img src="http://ultradefrag.sourceforge.net/screenshots/ud2sc1.gif" width="500"><br />
<p><b>UltraDefrag</b><br />
<br />
version: 3.2.1<br />
<br />
Platform: 2000/XP/Vista<br />
<br />
Language: English<br />
<br />
<a href="http://ultradefrag.sourceforge.net/">Download</a><br />
</p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-90169515641877660562009-11-16T11:32:00.002+08:002009-11-16T11:41:47.301+08:00電腦應用:如何刪除電腦中的cookies?<h3>電腦應用:如何刪除電腦中的cookies?<br />
</h3><br />
<h4>刪除在IE 6 中的cookies</h4>開啟IE並轉到工具,然後選Internet選項 。<br />
<img src="http://9.share.photo.xuite.net/mail/195f6c3/7563/201528_l.jpg" title="Internet 選項" /><br />
刪除cookies<br />
<img src="http://9.share.photo.xuite.net/mail/195f6c4/7563/201529_l.jpg" /><br />
<br />
<img src="http://9.share.photo.xuite.net/mail/195f6c5/7563/201530_l.jpg" /><br />
<br />
刪除暫存檔<br />
<img src="http://9.share.photo.xuite.net/mail/195f6c6/7563/201531_l.jpg" /><br />
<br />
<img src="http://9.share.photo.xuite.net/mail/195f6c7/7563/201532_l.jpg" /><br />
<br />
<br />
<h4>刪除在IE 7 中的cookies</h4>按「開始」→「控制台」→「網際網路選項」<br />
在「一般」標籤頁中,在「瀏覽歷止記錄」下按「删除」<br />
<img src="http://www.trendmicro.com.tw/support/downloads/pc-cillin/image/sb-2094-5.jpg" /><br />
在「Cookie」 之下,按一下「刪除 Cookie」,然後按一下「是」 以確認您要刪除這些 Cookie。<br />
<img src="http://www.trendmicro.com.tw/support/downloads/pc-cillin/image/sb-2094-7.jpg" /><br />
在「Temporary Internet Files」點選「刪除檔案(F)」,在「刪除檔案」畫面, 按「是(Y)」刪除所有暫存 Internet Explorer。<br />
<img src="http://www.trendmicro.com.tw/support/downloads/pc-cillin/image/sb-2094-6.jpg" /><br />
<br />
<h4>刪除在IE 8 中的cookies</h4>開啟 Internet Explorer<br />
按一下「安全性」按鈕,然後按一下「刪除瀏覽歷程記錄」。<br />
選取「Cookie」旁的核取方塊。<br />
如果您不想刪除與「我的最愛」清單中之網站相關的 Cookie ,請選取「保留我的最愛網站資料」核取方塊。<br />
按一下 [刪除]。Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-43764921317830782462009-11-09T15:31:00.001+08:002009-11-09T17:54:16.212+08:00網頁設計技巧:8個簡單和實用的CSS技巧<h3>網頁設計技巧:8個簡單和實用的CSS技巧</h3><br />
最好的解決方案往往是最簡單的,這裏列出8個CSS技巧,非常簡單,簡單到只需要寫一行代碼,只需要定義一個屬性參數。非常適合學習CSS的新手朋友閱讀。<br />
<br />
<ol>
<li>使用line-height來達到垂直居中</li>
<pre>line-height:24px;
</pre>當你有一個固定高度的區域,你可以通過把line-height和區域的高度設為相同的數值而達到垂直置中。 <a href="http://cssglobe.com/articles/one_liners/line_height.html">Demo</a>
<li> 使用overflow防止内容溢出</li>
<pre>#main{ overflow:hidden; }
</pre>這個應該基本都知道了。可以在限制內容塊的寬度的前提下,隱藏那些有可能溢出的文本或圖像。雖然會導致一些內容被隱藏,但總比溢出撐開影響頁面佈局要好。
<li>強制在同一行內顯示所有內文</li>
<pre>a{ white-space:nowrap;}</pre>強制在同一行內顯示所有內文,直到內文結束或者< br>。
<li>始終顯示Firefox垂直捲軸</li>
<pre>html{ overflow:-moz-scrollbars-vertical;}</pre>Firefox默認是不顯示垂直捲軸的,而這個參數設置將能讓它始終顯示垂直捲軸。
<li>内容置中</li>
<pre>margin:0 auto;</pre>這個大家都應該知道了,但是這個設置並不是在所有流覽中都有效。並且,在相同的流覽器中,如果受其他影響,也很可能會失去效果。
<li>移除IE的默認捲軸</li>
<pre>textarea{ overflow:auto;}</pre>IE默認是顯示內文框的垂直捲軸,這個參數將移除這個捲軸,除非輸入的內容超過內文框的高度。
<li>強制列印時自動分頁</li>
<pre>h2{ page-break-before:always;}</pre>這個屬性參數可以「始終在物件之前插入頁分割符」,主要用於需要列印的頁面設置。
<li>移除點擊鏈結時的虛線框</li>
<pre>a:active, a:focus{ outline:none;}</pre>大家都知道,點擊鏈結時,通常會出現虛線框,影響美觀。這個屬性設置可以移除點擊時的虛線框。 </ol>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-51640774317403308872009-11-09T14:58:00.005+08:002009-11-09T15:09:17.854+08:00網頁設計技巧:用CSS實現網頁垂直置中<h3>用CSS實現網頁垂直置中<br />
</h3><br />
在設計頁面佈局的時候,我們很可能需要到一些內容可以達到垂直置中。如果使用<table>裏面的valign屬性,那很容易達到內容的垂直置中。但使用<table>的缺點就是,你很可能就為了達到垂直置中,就弄了一個煩人的表格框架。以下是其中一個解決方法,純CSS實現頁面的垂直居中。<br />
<br />
<ol><li>HTML代碼</li>
<div style="border: 1px solid; letter-spacing: 0px; margin: 10px; padding: 3px;"><pre><div id=<span style="color: blue;">"container"</span>>
<div id=<span style="color: blue;">"position"</span>>
<div id="<span style="color: blue;">content"</span>>
<span style="color: #666666;">Text Here.</span>
</div>
</div>
</div>
</pre></div>
<li>CSS代碼</li>
<div style="border: 1px solid; letter-spacing: 0px; margin: 10px; padding: 3px;"><pre><span style="color: purple;"><STYLE type=</span><span style="color: #274e13;">"text/css"</span>>
<span style="color: magenta;">#container {</span> <span style="color: #20124d;">width</span><span style="color: magenta;">: </span><span style="color: blue;">100%</span><span style="color: magenta;">; </span><span style="color: #20124d;">height</span><span style="color: magenta;">: </span><span style="color: blue;">100%</span><span style="color: magenta;">; </span><span style="color: #20124d;">display</span><span style="color: magenta;">: </span><span style="color: blue;">table</span><span style="color: magenta;">; }</span>
<span style="color: magenta;">#position {</span> <span style="color: #20124d;">display</span><span style="color: magenta;">: </span><span style="color: blue;">table-cell</span><span style="color: magenta;">; </span><span style="color: #20124d;">vertical-align</span><span style="color: magenta;">: </span><span style="color: blue;">middle</span><span style="color: magenta;">;
</span><span style="color: #20124d;">width</span><span style="color: magenta;">: </span><span style="color: blue;">100%</span><span style="color: magenta;">; </span><span style="color: #20124d;">text-align</span><span style="color: magenta;">:</span> <span style="color: blue;">center</span><span style="color: magenta;">; }</span>
<span style="color: purple;"></STYLE></span>
</pre></div>這串CSS代碼,幾乎支持所有的browser (除了IE之外),所以需要對IE進行一個小小的Hack
<li>對IE的Hack</li>
<div style="border: 1px solid; letter-spacing: 0px; margin: 10px; padding: 3px;"><pre><!--[if IE]>
<STYLE type="text/css">
#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
</STYLE>
<![endif]–>
</pre></div>
</ol>按這裏查看 <a href="http://www.vdotmedia.com/demo/css-vertically-center.html">Demo</a> 或 <a href="http://www.vdotmedia.com/demo/css-vertically-center.zip">下載</a> 。Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-68027117494686918372009-11-05T13:01:00.007+08:002009-11-09T17:55:17.478+08:00網頁設計技巧:偵測解析度進入不同網頁<h2>網頁設計技巧:偵測解析度進入不同網頁</h2><p>自動辨識瀏覽者解析度而進入不同的網頁</p><p>放於<head>與</head>之間:</p><br />
<div style="border: 1px solid; margin: 10px; padding: 3px; letter-spacing:0px;"><pre><<span style="color: #660000;">script type=</span><span style="color: blue;">"text/javascript"</span>>
<!--
<span style="color: #20124d;">var </span>swidth<span style="color: blue;">=</span><span style="color: red;">1024</span>;
<span style="background-color: white;">var </span>sheight<span style="color: blue;">=</span><span style="color: red;">768</span>;
<span style="color: #20124d;">if (</span><span class="Apple-style-span" style="background-color: white;"><span style="color: purple;">screen</span></span>.width<span style="color: blue;"><</span>swidth<span style="color: blue;">||</span><span style="color: purple;">screen</span>.height<span style="color: blue;"><</span>sheight)
{ location.<span style="color: #38761d;">replace</span>(<span style="color: blue;">"800.htm"</span>); }
else { location.<span style="color: #38761d;">replace</span>(<span style="color: blue;">"1024.htm"</span>); }
//-->
<span style="color: #660000;"></script></span>
</pre></div>800.htm和1024.htm就是自動辨識解析度進入的網頁Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-45356045908966077372009-11-05T12:42:00.002+08:002009-11-09T17:56:29.583+08:00網頁設計:做網站該注意哪些基本要素?<h2>網頁設計:做網站該注意哪些基本要素?</h2><p>以下內容參考Google對網站管理員的建議,適當的地方我們已經添加註解。</p><p>設計與內容指南</p><ul><li>網站應具有清晰的層次結構和文本鏈接。每個網頁應至少可以通過一個靜態文本鏈接打開。文本鏈接不同於通過javascript等其他代碼生成的鏈接。如有些網頁下面的「打印」即不是通過文本鏈接實現。</li>
<li>為用戶提供網站地圖,列出指向網站重要部分的鏈接。如果網站地圖上的鏈接超過或大約為 100 個,則需要將網站地圖拆分為多個網頁。</li>
<li>網站應實用且信息豐富,網頁文字應清晰、準確地表述要傳達的內容。</li>
<li>要考慮到用戶會使用哪些字詞來查找您的網頁,確保網站上確實包含了這些文字。 深刻理解這一點,會讓你受益匪淺。</li>
<li>儘量使用文字而不是圖形來顯示重要的名稱、內容或鏈接。Google 抓取工具無法識別圖形中所含的文字。 特別是友情鏈接時,如果你是為了提供PR和排名,則用文字鏈接是重要的。</li>
<li>確保對 TITLE 和 ALT 標記屬性的描述和表達準確無誤。切記為網頁的圖片加上 ALT描述,這裡是你放關鍵詞的好地方。</li>
<li>檢查鏈接是否損壞,並確保 HTML 格式正確。 請使用 <a href="http://www.google.com/webmasters/" target="_blank">Google網站管理員工具</a>時刻檢查自己網站的鏈接,如有損壞,注意刪除或修正。</li>
<li>如果您決定採用動態頁面(即網址中包含"?"字符),請注意並非所有搜索引擎的抓取工具都能像抓取靜態網頁一樣抓取動態網頁。縮短參數長度並減少參數數目對動態頁面是有幫助的。建議採用URL重寫技術進行動態鏈接靜態化。</li>
<li>將特定網頁上的鏈接限制在合理的數量內(少於 100 個)。如本頁,包含內部鏈接和外部鏈接不要超過 100個。</li>
</ul><p>網站準備就緒之後</p><ul><li>將其他相關網站鏈接到您的網站。 就是尋找友情鏈接。</li>
<li>將網站提交給 Google,網址為:<a href="http://www.google.com/addurl/?continue=/addurl" target="_blank">http://www.google.com/addurl.html</a> 。</li>
<li>將 Sitemap 作為 <a href="http://www.google.com/webmasters/" target="_blank">Google網站管理員工具</a>的一部分提交。Google 使用您的 Sitemap 來瞭解您網站的結構,並提高對您網頁的抓取率。</li>
<li>確保應瞭解您網頁的所有網站都知道您的網站已處於在線狀態。即指向你網站的鏈接都需要是正常的,而非損壞。</li>
<li>將您的網站提交到相關的目錄,例如,Open Directory Project 和 Yahoo!,以及其他特定行業的專業網站。</li>
</ul>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-7875027410276516172009-11-05T12:27:00.008+08:002009-11-05T17:30:59.710+08:00網頁設計技巧:IE6支援png圖檔的方法。<h2>網頁設計技巧:IE6支援png圖檔的方法。</h2><br />
<img src="http://www.sdt.net.tw/wp-content/uploads/2009/06/blog024.png" width="500" /><br />
PNG 是一種很好很強大的圖檔格式,可支援 32 bit 色彩,GIF 只到 256 色,色彩上更細緻,而且不會像 JPEG 會有壓縮性的破壞,並可以儲存成透明格式,檔案也不會大的離譜,這些都是 JPEG 望塵莫及的。<br />
<br />
這麼好用的圖片格式,很可惜的是在現在瀏覽器市場市佔率第一名的 IE 6 上卻不支援,網頁設計師們只能退而求其次,選擇色彩較少的 GIF 檔,而且 GIF 在轉成透明圖時,會有難看的毛邊出現,並不像 PNG 那般平順。<br />
<br />
下面介紹的方法可以讓這個古老、萬惡的IE6也可以讀取PNG透明圖檔,而不在出現醜暴的灰底。<br />
<br />
<ol><li>下載<a href="http://homepage.ntlworld.com/bobosola/pngfix.js">pngfix.js</a>檔案,儲存到適當的地方。</li>
<li>然後將下列語法貼至<html></html>之間(我也看過有人貼<head></head>在之間,可我測試是無效的。</li>
</ol><div style="border: 1px solid; margin: 10px; padding: 3px; letter-spacing: 0px;"><pre><!–-[if is IE 7.]>
<script defer type='text/javascript' src='pngfix.js'></script>
<![endif]–->
</pre></div>註一:src='pngfix.js' 注意該js檔案的路徑位置是否與你上傳的路徑相同<br />
註二:src='pngfix.js' 可以寫絕對路徑。Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-4085049456286373802009-11-04T09:02:00.000+08:002009-11-04T09:02:36.527+08:00車主必看:7 個省油大法<p>車主必看:7 個省油大法</p><ol><li>柔順加速</li><br>就是控制「黃金右腳」,在一般城市內到處都是交通燈,猛踩油門加速不會快得多少,但就會大大增加耗油量。 <br><br>
<li>不要超速</li><br>一般汽車最省油的速度大概介乎時速 80 至 90 公里,開得越快,風阻越大,時速 90 公里較時速 110 公里省油約 20%。 <br><br>
<li>減低重量</li><br>將車內不必要的物品拿掉,不要將車尾箱當作流動儲物櫃。 <br><br>
<li>關閉車窗</li><br>如果在時速 80 公里以下打開車窗關閉冷氣較省油;但在時速 80 公里以下時,關閉車窗開冷氣較省油。 <br><br>
<li>保持均速</li><br>在道路上盡量保持均速,不要經常猛加速後收慢車子。 <br><br>
<li>保持跟車距離</li><br>如果緊跟實前車,不但較為危險,而且當前面收慢時便要馬上踩 brake,白白浪費了車輛的動力。 <br><br>
<li>定期保養車子</li><br>定期保養車子,一些損耗品要定期更換,如機油、風隔、火咀等。而且要根據自己的駕駛狀況選擇合適的產品,例如用了度數太高的機油會較浪費汽油。</ol>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-32011025759620179272009-11-04T08:56:00.003+08:002009-11-05T17:31:25.637+08:00PHP 的日期計算在 PHP 內計算兩個日期之間的差距的話,可以先將日期轉成 Unix timestamp 的數值然後再作計算。例如要計算兩個日期 01/01/2009 及今天的日期差距,可以這樣做:<br />
<br />
<div style="border: 1px solid; padding: 3px;margin:10px; letter-spacing: 0px;"><pre><span style="color: #e69138;"><i>// 將日期以 "/" 附號分隔, 得出 日, 月, 年</i></span>
$time = <span style="color: #0060bf;">explode</span>(<span style="color: maroon;">"/"</span>, <span style="color: maroon;">"01/01/2009"</span>);
<span style="color: #ff7f00;"><i>// 將 01/01/2009 轉換成 Unix timestamp</i></span>
$unix_time = <span style="color: #0000bf;">mktime</span>(<span style="color: red;">0</span>, <span style="color: red;">0</span>, <span style="color: red;">0</span>, $time[<span style="color: red;">0</span>], $time[<span style="color: red;">1</span>], $time[<span style="color: red;">2</span>]);
<span style="color: #ff7f00;"><i>// 計算 $unix_time 和現在的差距, 並除 86400 (一天有 86400 秒)</i></span>
$time_diff = (<span style="color: #0060bf;">time</span>() - $unix_time) / 86400;
<span style="color: #ff7f00;"><i>// 只擷取整數部份</i></span>
$time_diff = (<span style="color: #00bf60;">int</span>) $time_diff;
echo <span style="color: maroon;">"01/01/2009 距離現在 "</span> . $time_diff . <span style="color: maroon;">" 天."</span>;
?></pre></div>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-30292042229986292312009-11-04T08:49:00.006+08:002009-11-04T08:53:19.580+08:00將《Windows XP》的設定,完整轉移至《Windows 7》<img src="http://www.anseo.cn/seo/upload/windowsXP_logo.png" height="100" style="border:0"><img src="http://www.clker.com/cliparts/6/0/9/5/1195445238199413807jean_victor_balin_arrow_blue_right.svg.hi.png" height="80" style="border:0"><img src="http://en.onsoftware.com/wp-content/uploads/2008/05/windows-7-logo.jpg" height="100" style="border:0"><br />
<p>由於《Windows XP》無法直升級至《Windows 7》,所以必須預先將原有系統的設定值進行備份,包括:電子郵件,相版及「我的最愛」等。Microsoft 特別針對用家所面對的難題,開發了「Windows 輕鬆傳輸」功能,只要事先在舊電腦系統上執行此程式,即可把原有資料備份,再把新設定及檔案完整套用至《Windows 7》。</p><p>「Windows 輕鬆傳輸」下載網址:<br />
<br />
<a href="http://www.microsoft.com/downloads/details.aspx?displaylang=zh-tw&FamilyID=734917d8-0663-4c26-89d0-2d00b632ebdb">《Windows XP (32bit)》</a><br />
<br />
<a href="http://www.microsoft.com/downloads/details.aspx?familyid=09D80814-2A73-4245-A63B-8E780D0430CB&displaylang=zh-tw">《Windows Vista (32bit)》</a><br />
<br />
<a href="http://www.microsoft.com/downloads/details.aspx?familyid=30C4DA6D-0522-4D28-AAC3-CE9D70AC6A6A&displaylang=zh-tw">《Windows Vista (64bit)》</a><br />
</p><ol><li>安裝後可於「開始」功能表行「Windows 7 的 Windows 輕鬆傳輸」。</li>
<li>跟著選擇傳輸方法,若沒有專用傳輸綫,可選擇「外接式硬碟或 USB 快閃磁碟機」。</li>
<li>然後按一下「這是我的舊電腦」。</li>
<li>此時,會列出系統的使用者帳戶,用戶可以按下「自訂」選擇指定項目進行轉移。</li>
<li>接著,可為輚移檔案設下密碼,提高保安性。</li>
<li>檔案會以 MIG 格式儲存,只需將檔案抄寫到流動儲存裝置上即可。</li>
<li>最後,可將存有舊系統設定值的流動存裝置,連接至已安裝《Windows 7》的電腦上,並執行該 MIG 檔,以及按下「傳輸」,便可把所有資料轉移到《Windows 7》上。</li>
</ol>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-66268743259431769892009-11-04T08:47:00.000+08:002009-11-04T08:47:32.664+08:00完成安裝《Windows 7》後,怎樣進行徹底備份?<img src="http://en.onsoftware.com/wp-content/uploads/2008/05/windows-7-logo.jpg" height="150"><br />
<p>以往版本的《Windows》,只會定期為系統備份一些還原點,而非確實將所有檔案進行複製,備份做另一副本;一旦遇上系統設定當損壞,便不能進行修復。<br />
</p><p>《Windows 7》新增「映像檔」功能,將硬碟內有檔案與奬態徹底備份;若系統不幸發問題,只需透過《Windows 7》安裝光或或自行製作的修復光碟,便可將系統還原至本來狀態。<br />
</p><p>設定備份</p><ol><li>首先,要進入控制台,並選取「系統及安全性」,繼而進入「備份電腦」。</li>
<li>於右方備份欄內,按下「設定備份」。</li>
<li>跟著便要選擇備份檔所儲存位置,可以是本機沒有安裝《Windows》的硬碟分割區、外置碟碟,或是燒錄至光碟上。</li>
<li>之後,可選擇需要備份的項目。若用戶沒有特定的資料夾需再分開備份,可選擇「讓Windows選擇」;不然,則可選取「讓我選擇」,自行設定。</li>
<li>若儲存裝置本身空量足夠,建議一併剔選「包含磁碟機的系統映像」,額外備分整個硬碟分割,以防萬一。</li>
<li>當所有設定完成,便可按下「開始排程」,程式隨即自動定時備份系統。</li>
</ol><p>光碟修復密技</p><ol><li>至於光碟修復,過程十分簡單。同樣進入「控制台」內的「系統及安全性」,進入「備份電腦」分頁,往左方點選「建立系統修復光碟」。跟著放入一張空白光碟,再按下「建立光碟」,程式即自動開始製作。</li>
<li>假若電腦出現故障,只需利用修復光碟啟動電腦,並接駁已儲存備份映像檔的外接儲存裝置,選擇「Restore your computer using a system image that you created」→「Next」。</li>
<li>程式便會開始偵測早前備份的映像檔,可因應需要選擇合適的存檔,然後按下「Next」,讓系統執行修復工作。</li>
</ol>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0tag:blogger.com,1999:blog-9139304636666009488.post-14294618043004797742009-11-03T14:59:00.003+08:002009-11-03T15:52:09.644+08:00怎樣可令XP、Vista及Win7 同時共存?<img src="http://www.anseo.cn/seo/upload/windowsXP_logo.png" height="100"> <img src="http://www.pestaola.gr/img1/windows-vista-logo.jpg" height="100"> <img src="http://en.onsoftware.com/wp-content/uploads/2008/05/windows-7-logo.jpg" height="100"><br />
<p>只要為3個作業系統各自建立一個硬碟分割區,再把它們分別安裝到各分割區中,便可享用多重系統。</p><br />
<ol><p>《Windows XP》</p><li>要做到多重系統效果,需要先安裝《Windows XP》。請放入安裝光碟啟動安裝程式,並按下〔Enter〕 鍵。</li>
<li>建入下一頁,按下〔C〕鍵,命令程式在未分割的硬碟空間上建立一個磁碟分區。</li>
<li>跟著,更可因應需要,輸入要分配予《Windows XP》使用的空間空量,如:電腦的硬碟為120GB,可分配三分之一的容量,即40GB予此系統。</li>
<li>按下〔Enter〕鍵跳至下一頁,再按下〔Enter〕鍵,更將《Windows XP》安裝在所選的磁碟分割區上。確認《Windows XP》運作無誤後,即可安裝《Windows Vista》。</li>
<p>《Windows Vista》</p><li>接下來,便是安裝《Windows Vista》,同樣利用光碟啟動安裝程序,進入後選取「Custom」。</li>
<li>然後於未分割硬碟空間,輸入分配空量;若是安裝「Home Premium」或以上本,建議分配10GB或以上空間,完成後按「Apply」。</li>
<li>待安裝完畢,便可發現,電腦在重新開機後,會跳出作業系統的選單。</li>
<p>《Windows 7》</p><li>之後,用所便可安裝《Windows 7》;步驟跟《Windows Vista》方法相同。需要先選擇「自定」安裝模式,再於另一獨立硬碟分割上安裝新系統。</li>
<li>當三個的作業系統安裝完成後,重新啟動電腦,便會出現開機選單,選擇後即可分別進入不同的《Windows》。</li>
</ol><p></p>Chrishttp://www.blogger.com/profile/16676388032844600313noreply@blogger.com0