<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Tahoma, Helvetica, Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<div style="background-origin: initial; background-clip: initial; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 12px; color: rgb(53, 53, 53); line-height: 1.5; margin: 0pt; padding: 0pt; background: rgb(255, 255, 255) repeat repeat">
<div id="yeeyan" style="margin-top: 0pt; margin-right: auto; margin-bottom: 0pt; margin-left: auto; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; border-top-width: 0pt; border-right-width: 0pt; border-bottom-width: 0pt; border-left-width: 0pt; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; width: 960px; ">
<div id="article_container" style="margin-top: 1px; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; border-top-width: 0pt; border-right-width: 0pt; border-bottom-width: 0pt; border-left-width: 0pt; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; width: 960px; ">
<div id="article_left" class="hr-border" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 1px; padding-bottom: 0pt; padding-left: 0pt; border-top-width: 0pt; border-right-width: 1px; border-bottom-width: 0pt; border-left-width: 0pt; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(226, 226, 226); border-right-color: rgb(226, 226, 226); border-bottom-color: rgb(226, 226, 226); border-left-color: rgb(226, 226, 226); width: 657px; ">
<div id="article_content" style="margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; border-top-width: 0pt; border-right-width: 0pt; border-bottom-width: 0pt; border-left-width: 0pt; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; width: 647px; font-size: 14px; overflow-y: hidden; overflow-x: auto; ">
<span class="Apple-style-span" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: palatino, georgia, helvetica, sans-serif; line-height: 20px; ">
<div class="post-4381 post hentry category-css category-layouts" id="post-4381" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0pt; border-right-width: 0pt; border-bottom-width: 0pt; border-left-width: 0pt; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; ">
<h3 class="maintitle" style="color: rgb(87, 60, 34); line-height: 50px; font-weight: normal; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; ">
<font size="2">12個殺手級建議——如何用瀏覽器來做設計</font></span></h3>
<hr style="height: 1px; border-left-style: none; border-right-style: none; border-top-style: none; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 7px; margin-bottom: 10px; padding: 0px; background-image: none">
<font size="2">
<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
<div class="entry_single" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0pt; border-right-width: 0pt; border-bottom-width: 0pt; border-left-width: 0pt; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; ">
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-header.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; "></font></div>
<p class="lead" style="line-height: 30px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">你會如何製作網頁?</font></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
經典的工作流程一般是從Photoshop開始的，最近一段時間我們漸漸的轉到HTML和CSS設計來儘可能的模仿原始PSD文件類型。但是一種拋棄Photoshop的網頁設計方式正在興起，你可以單純用你的瀏覽器來設計出你網站的首頁。我想你現在一定在想：這一定會有很多功能限制吧。但實際上它能做到的超出你的想像。作為你在這個領域邁出的第一步，這篇文章會提供給你創造出漂亮的網頁模板所需要的一些工具和技巧。</font></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; line-height: 24px; "> </p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; ">
<font size="2">一些觀點</font></span></h2>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">24ways.org的米根·費舍爾對於在瀏覽器上做設計闡述了一些<a target="_top" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; text-decoration: none; color: rgb(0, 66, 118); " href="http://24ways.org/2009/make-your-mockup-in-markup">不錯的觀點</a>，雖然我不讚同她對Photoshop的輕視（我超愛Photoshop，它是地球上最好的軟件！）但我贊同她其中的一些觀點，比如她說靜態圖片不會像動態網頁一樣讓你體會網站看起來真正的感覺，所以在瀏覽器上設計網頁會確保你去注意到整體網頁元素的組織形式、網頁的親和力和文字的編排方式等等。<br style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; ">
那麼我們就用費舍爾的文章來作為我們的起跳板，來探討一下如何在瀏覽器上做出好作品，以應對客戶們的各種需求。</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">1：從基礎開始使用網格來設計</font></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.blueprintcss.org/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-blueprint.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
正如上面所述，將還沒處理好的網頁內容統統扔進去然後再作調整，這會使你的內容更加的適合網頁。而使用基於網格的框架（grid-based
framework）可以完美的縮短時間並保證你的網頁佈局完美無瑕。<br style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; ">
</font>
<span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; ">
<font size="2">
<span class="Apple-style-span" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: palatino, georgia, helvetica, sans-serif; ">
<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
資源</strong></span>：<br style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; ">
更多信息請訪問</font><span class="Apple-style-span" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: palatino, georgia, helvetica, sans-serif; "><font size="2"><a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://designshack.co.uk/articles/css/css-frameworks-pros-and-cons">CSS
frameworks</a>。</font></span></span></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">2：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">找個好的編輯器</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://macrabbit.com/espresso/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-espresso.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
如果你是手工編代碼人，那一個專業的網頁編輯器將是你的不二選擇。我個人使用（絕對超愛) <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://macrabbit.com/espresso/">Espresso
from MacRabbit</a>。它有所有我喜歡的小功能，比如說代碼模板功能（snippets）、自動完成功能，還有最爽的是當你編代碼的時候，你能實時看見網頁的變化。你可以到網站四處看看，找找合適你的應用。以下是一些可以讓你起步的應用列表：</font></p>
<ul style="font-size: 14px; line-height: 24px; list-style-image: url('http://www.taiwanarch.com/book/data/20100118225839/bullet.png'); text-indent: 0px; border: 0pt none initial; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding-left: 20px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px">
<li style="list-style-type: none; list-style-image: none; list-style-position: outside; border: 0pt none initial; margin: 0px; padding: 0px">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.aptana.org/">
<font size="2">Aptana:</font></a><font size="2"> Mac,
Windows Linux (目前我最喜歡的免費選擇)</li>
<li style="list-style-type: none; list-style-image: none; list-style-position: outside; border: 0pt none initial; margin: 0px; padding: 0px">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.activestate.com/komodo/">
Komodo IDE</a>: Mac, Windows, Linux</li>
<li style="list-style-type: none; list-style-image: none; list-style-position: outside; border: 0pt none initial; margin: 0px; padding: 0px">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://netbeans.org/">
NetBeans</a>: Mac, Windows, Linux</li>
<li style="list-style-type: none; list-style-image: none; list-style-position: outside; border: 0pt none initial; margin: 0px; padding: 0px">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.panic.com/coda/">
Coda</a>: Mac (a worthy Espresso alternative)</li>
<li style="list-style-type: none; list-style-image: none; list-style-position: outside; border: 0pt none initial; margin: 0px; padding: 0px">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.barebones.com/products/textwrangler/">
Text Wrangler</a> & <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.barebones.com/products/bbedit/">BBEdit</a>:
Mac</font></li>
</ul>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">3：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">為網頁元素添加陰影</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://css.flepstudio.org/en/css3/box-shadow.html">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-shadow.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
Photoshop已經不再是唯一能做出漂亮陰影的軟件了。許多（不是全部）主流瀏覽器支持CSS3，因此我們可以依此來實現一些進階設計功能。最有用的功能之一是Box-shadow，它可以讓你單靠CSS為某個元素添加陰影。Box-shadow的格式是</font><em style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><font size="2">box-shadow:5px
5px 20px #000000。</font><span class="Apple-style-span" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-style: normal; "><font size="2">通過這些值允許你來調節陰影的長寬還有模糊半徑還有顏色。</font></span></em></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
<font size="2">資源:</font></strong><font size="2"><br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
更多信息請訪問 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://css.flepstudio.org/en/css3/box-shadow.html">CSS.flepstudio's</a> article
on the <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://css.flepstudio.org/en/css3/box-shadow.html">box-shadow
effect</a> </font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">4：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">為文字添加陰影</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-textshadow.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">如果你想為文字添加陰影，使用<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/">Kremalicious
tutorial</a>所展示的功能就能達到，格式是 </font><em style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><font size="2">text-shadow:
1px 1px 1px #000。</font><span class="Apple-style-span" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-style: normal; "><font size="2">頭兩個值決定著陰影的偏移（分別是x和y坐標），第三個值決定著模糊半徑，最後一個值決定了陰影的顏色。</font></span></em></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
這個功能不但能做陰影，鏈接中的教程還會教你如何做出凸版文字效果、光暈效果還有燃燒文字效果。</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2"> 5：製作圓角</font></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.spiffycorners.com/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-corners.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
圓角在如今的CSS中終於被實現了。你可以在Safari和Firefox中使用</font><em style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><font size="2">border-radius</font><span class="Apple-style-span" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-style: normal; "><font size="2">來實現圓角。只要簡單設置 -moz-border-radius and/or -webkit-border-radius<span class="Apple-converted-space"> </span>給它賦個像素值（ value
in pixels）來調整某個元素的邊界的曲度。</font></span></em></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
<font size="2">資源:</font></strong><font size="2"><br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
數都數不過來的圓角教程請訪問 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.devwebpro.com/25-rounded-corners-techniques-with-css/">25
Rounded Corners Techniques with CSS</a>.</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2"> 6：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">建立顏色方案</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://kuler.adobe.com/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/kuler.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
Photoshop提供了一個很好的方式去可視化和嘗試不同的顏色，但是網絡上仍然有大量的免費顏色方案可供選擇。其中最棒的是 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://kuler.adobe.com/">Adobe
Kuler</a>。Kuler不僅給你一個友好的界面讓你快速創造漂亮協調的顏色方案，同時它也提供了一個巨大的顏色庫，有著大量先前人們創造的，可以搜索到的顏色方案。想給你的網站一個秋天的感覺嗎？只要輸入「秋天」（fall）你就會有超過2600中方案可供選擇。Kuler讓給你的網站添加顏色變得超級簡單，而且只要嵌入到你的CSS裡。（這樣你要改變和嘗試就變的簡單了）</font></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
<font size="2">資源:</font></strong><font size="2"><br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
更多關於顏色的工具，請查看 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://designshack.co.uk/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme">25
Awesome Tools for Choosing a Website Color Scheme</a>.</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">7：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">文字漸變效果</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-gradient.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
如果你夠聰明，你就知道如何做到文字的漸變效果來使你的文字栩栩如生。你需要什麼奇怪有趣的效果？到這看看吧<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/">WebDesignerWall</a>。本質上，它是在想要有漸變效果的文字周圍添加span來達成。只要用一個重複的漸變png圖來設置一下span的背景。當然png還是要需要圖片編輯器來做的。（沒錯，最終你還是不得不會到我們的老朋友Photoshop）</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">8：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">利用RGBA來屏蔽顏色</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://24ways.org/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-rgba.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
CSS3增添了一個新功能交RGBA（A為Alpha）。通過設置A的值，你能夠設置填充顏色的不透明度。這個方便的功能不僅讓你僅通過不同的A值創造出不同顏色，而且還能讓你創造出透明的東西從而顯現出藏在後面的圖片，和Photoshop裡減少圖層不透明度的道理是一樣的。</font></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
<font size="2">資源:</font></strong><font size="2"><br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
詳情查看 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://oncemade.com/the-right-way-to-declare-rgba-colors/">The
Right Way to Declare RGBA Colors</a>.</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">9：<span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; ">瞭解你網站的字體</span> </font></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.typetester.org/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-typetester.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
不要總是使用一兩個字體就想打造出完美的網站，要學會利用網絡上數以千計的字體。 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://www.typetester.org/">Typetester</a>就是這麼一個工具。它讓你從在瀏覽器上用不同的字體和設置（字號、對齊方式、字距等）來預覽一整段文字。當你發現你最喜歡的設置時，Typetester就會替你輸出CSS。</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">10：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">尋找更漂亮的字體</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://typekit.com/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-typekit.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
用Photoshop做成的漂亮字體圖片可以讓你盡情發揮對字體的應用，而不用考慮到兼容性問題。但是不幸的是，這種方法會導致你的字不能選擇而且不能被搜索。但是解決這個問題也不難。<a target="_top" style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; text-decoration: none; color: rgb(0, 66, 118); " href="http://imawebdev.com/tutorial/Font_Replacement_with_sIFR_Cufon_and_TypeKit">這裡</a>介紹的方法就能讓你用 @font-face
命令來自由應用各種定製字體。</font></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">資源s:<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
更多字體請點擊 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://designshack.co.uk/articles/css/how-to-use-typekit-on-your-site-step-by-step">step-by-step
TypeKit tutorial</a>.</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">11：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">網絡圖片資源庫永遠是你的夥伴</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://graphicriver.net/">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-graphicriver.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
一般你在在開始你的第一個網站模板時，你會想要一個按鈕，圖標或其他一些你不想自己做的圖片。網上的圖庫像<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="http://graphicriver.net/collections/342385-web-buttons">GraphicRiver</a>就有著無數的建造網站所需要的一切圖片元素。而且根本不需要用Photoshop去修修圖。即使你能夠在一小時內做出一個完美的物件，為什麼不用這些資源讓你兩三分鐘就搞定呢。</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<font size="2">12：</font><span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; "><font size="2">用瀏覽器來測試你的網站</font></span></h2>
<div class="tutorialimage" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); width: 510px; ">
<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="https://browserlab.adobe.com/index.html#">
<font size="2">
<img class="alignNone size-full wp-image-1611" src="http://www.taiwanarch.com/book/data/20100118225839/dib-browserlab.jpg" alt="screenshot" width="510" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: initial; border-color: initial; max-width: 650px; height: auto; text-decoration: none; display: block; "></font></a></div>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
我知道到你們當中已經有人忍不住要說上面的技術（陰影、圓角等）只適用於某些瀏覽器。這我也知道，但我只是想說你可以使用瀏覽器做到很多Photoshop能做到事，但確實也不要忽略由於瀏覽器缺乏支持，會導致到用戶瀏覽體驗的下降。</font></p>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
我想說的是，不管你用什麼方法來打造你的網站，你一定要知道主流的瀏覽器是怎麼呈現你的網站的，因此你可以很好的決定要放棄哪個瀏覽器。要完成這項任務，你可以試一下 <a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(101, 141, 91); " href="https://browserlab.adobe.com/index.html#">Adobe
Browserlab</a>。這個不錯的東西能讓你用不同的瀏覽器來實時呈現你的網站，你會發現有些瀏覽器的表現你的網站確實爛到不行。</font></p>
<h2 style="text-transform: none; letter-spacing: normal; color: rgb(87, 60, 34); font-weight: normal; float: none; line-height: 33px; border-bottom: 1px dotted rgb(204, 204, 204); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px">
<span style="margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; font-family: simhei; ">
<font size="2">結論</font></span></h2>
<p style="line-height: 24px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px">
<font size="2">
怎麼樣？有什麼想法？你是不是開始躍躍欲試了呢？你還是你像我，死也不會放開Photoshop這件寶物的。顯然這裡沒有絕對，有些人不用圖像編輯器就能做出網站，重要的是你覺得怎麼樣才最有效率。我們想知道你的看法，大家暢所欲言，捍衛你的設計方式吧。不過我就在此打住了。</font></div>
</div>
</span></div>
</div>
</div>
</div>
</div>
</span>
</body>
發表文章
0 意見:
張貼留言