【圓想專業設計圖庫】: 7月 2011

★◤室內設計圖庫大降價◢建築/室設/景觀圖庫高品質高質感★★

★◤圓想專業設計圖庫◢建築/室設/景觀圖庫高品質高質感★★
____________________________________________________________
◤圓想專業設計圖庫◢
http://www.taiwanarch.com/interior
____________________________________________________________

★◤圓想專業設計圖庫◢建築/室設/景觀/商設各種圖庫應有盡有★★

圓想室內設計圖庫目錄可以到這個新賣場參觀:
http://www.taiwanarch.com/interior

★★【凡購買光碟1000元以上一律九折免運費！！】★★

★室內商業設計平面Autocad 2D圖塊 299元
★景觀公設平面Autocad 2D圖塊 299元
★室設景觀設計Autocad3D圖塊 299元
★室內設計專業平面彩繪圖塊 299元
★室內設計專業後期處理圖庫2CD 499元
★室內商業設計Autocad施工圖合輯 399元
★景觀設計Autocad施工圖合輯 399元
★室內設計專業素材庫 399元
★室內設計3DMAX專業材質球+材質貼圖 399元
★歐式古典3DMAX模型庫 399元
★專業級建築效果圖模版2CD 599元
★室內設計3DMAX全套場景模型庫 2CD 699元
★櫥窗設計與展場設計精華圖庫 399元
★2007台灣區建材型錄光碟 599元
★Autocad施工細部大樣圖V.1 499元
★Autocad施工細部大樣圖V.2 499元
★Autocad施工細部大樣圖V.3 499元
★Autocad施工細部大樣圖V.4 499元
★裝修立面CAD精選圖集V.1 499元
★裝修立面CAD精選圖集V.2 499元
★裝修立面CAD精選圖集V.3 499元

**********************************************************************

★誠心推薦這個網站給大家看看!!★
你缺乏只建築室設相關參考資料嗎? 不管你是需要何種圖庫這裡都有
相關資料可以讓你參考

全部都是市面上所看不到的精品!!絕對讓你大開眼界!!
_____________________________________________________________

◤圓想專業設計圖庫◢
http://www.taiwanarch.com/interior

_____________________________________________________________

12個殺手級建議——如何用瀏覽器來做設計

<body>

<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>

美提名十大個性摩天樓國內四塔入選

美提名十大個性摩天樓國內四塔入選

http://www.taiwanarch.com/interior/

http://www.taiwanarch.com/modeco

http://www.taiwanarch.com/architecture

據美國《大眾機械》雜誌報導，提起摩天大樓，人們自然而然會想到迪拜。這是因為迪拜塔在這個月成為世界上最高的建築，儘管直到現在仍未竣工。

迪拜是世界建築上的一個傳奇。十幾年前，迪拜還是中東地區一個貌不驚人的城市，但現在已經成為世界矚目的中心，被譽為「夢幻城市」。「世界第一高度」、「世界上最大的購物中心」、「世界上最豪華的地鐵」，關於迪拜的新聞頻頻見諸報端。

「世界第一高度」指的是迪拜塔，又稱迪拜大廈或比斯迪拜塔，是位於阿拉伯聯合酋長國的迪拜的一棟正在興建的摩天大樓，於2004年9月21日動工，總建築師是芝加哥SOM公司的亞德里安•史密斯。迪拜塔的最終高度一直是個謎，從承包商的計劃可以得知，高度被建議在818米，可使用樓層約為160∼170層左右，但從此計劃官方網站內的一張升降機配置的計劃圖顯示，樓層數可能達189∼195層。迪拜塔在2008年9月1日高度達到了688米，160層，已經超越波蘭華沙電台廣播塔(高646.4米，1991年倒塌) ，而成為歷史上世界最高的結構建築。

然而，「世界第一高度」的爭奪異常慘烈，迪拜塔尚未峻工，其他城市已經躍躍欲試，計劃打造世界新高度。環顧全球，建築師們紛紛提出各自宏偉的建築工程設計計劃，向迪拜塔的紀錄發起有力挑戰，他們中有的追求高度，有的追求風格，有的注重環保，但這些建築有一個共同的特點，就是外觀新穎、別緻，讓人過目不望。以下是在建或即將開工的十座最具特色的摩天大樓。它們設計超前，結構環保，彌補了高度上的不足。

1.上海塔

上海塔（Shanghai Tower，以前稱上海中心）有一幫備受全球關注的「好鄰居」，它緊挨高1615英呎（約合492米）的上海環球金融中心。截至目前，上海環球金融中心是世界上第二高的已竣工摩天大樓，僅次於台北101大廈，後者的高度為1670英呎（約合509米）。另外，上海塔還毗鄰高達1381英呎（約合421米）的金茂大廈，金茂大廈是世界上第五高的建築。上海塔的高度為2073英呎（約合632米），超過上述三座摩天大樓——對於一片曾被規劃用作高爾球場的土地來說，這一結果並不算糟糕。

它和身邊的兩棟摩天大樓都位於浦東陸家嘴金融區。實際上，從1993年開始，它們的建設就已擺到決策層的桌面上，按照當時的規劃，陸家嘴將建設3幢超高層的標誌性建築，形成「品」字形的三足鼎立之勢。在GENSLER建築設計事務所的設計中標後，上海塔將從環球金融中心吸取一些美學經驗。同芝加哥螺旋塔一樣，上海塔的外立面亦可變化，頂部可以相對於底部順時針旋轉90度。

地點：中國上海
設計：GENSLER建築設計事務所
高度：2073英呎（約合632米）
樓層：127層
預計峻工時間：2013年

2.芝加哥螺旋塔

從1973年至今，高1730英呎（約合527米）的芝加哥希爾斯大廈一直獨享北美地區第一高樓的頭銜。然而，在設計環保的芝加哥螺旋塔竣工後，它將以300英呎之差將這一頭銜拱手讓出。芝加哥螺旋塔的設計師是著名建築師聖地亞哥•卡拉特拉瓦（Santiago Calatrava），2004年雅典奧運會主場館和瑞典HSB旋轉中心都出自這位建築大師之手。卡拉特拉瓦的目標是給芝加哥這座城市奪回一座獎盃:國際綠色建築認證「領先能源與環境設計」（LEED）金獎。

「領先能源與環境設計」證書是美國綠色建築委員會制定的北美標準，主要衡量建築的可持續性和設計中的生態方法。為了實現既定的金獎目標，芝加哥螺旋塔具有一系列深受「大地之母」讚賞的特點:循環雨水用以澆灌景觀，利用河水去幫助保持大樓涼爽，可容納數百輛自行車的空間，驅趕候鳥的特製玻璃；規劃中的公園區和地下停車場，由於它們不必使用空調，因此可以節省能源。芝加哥螺旋塔可以使大樓外立面旋轉360度，令其成為世界上一座獨特的摩天大樓。

地點：美國伊利諾斯州芝加哥
設計：聖地亞哥•卡拉特拉瓦
高度：2000英呎（約合610米）

樓層：150層
預計峻工時間：2012年

3.莫斯科聯邦大廈

莫斯科聯邦大廈獨特的外形是根據船的風帆設計的，事實上，它是由兩座塔樓組成，即1660英呎（約合506米）高的東塔樓和795英呎（約合242米）高的西塔樓，幾條通道將它們連了起來。東塔樓將用作辦公場所，西塔樓將用作酒店和公寓，兩個塔樓的頂部均設有360度觀景台。聯邦大廈距離克里姆林宮不到2.5英里，竣工後將成為全歐洲最高的建築。

地點：俄羅斯首都莫斯科
設計：NPS Tchoban Voss建築設計公司
高度：1660英呎（約合506米）
樓層：93層
預計峻工時間：2009年

4.國際貿易廣場

你如何知道摩天大樓能有多高？因為相關規定不允許大樓高過周圍的山頂，設計單位不得不將其縮短。香港國際貿易廣場就曾遭遇這種尷尬：根據最早的設計方案，樓高近1900英呎（約合579米），但為了不違反規定，後來被迫降至1608英呎（約合490米）。儘管如此，國際貿易廣場建成後仍將是香港最高的建築。大樓地下的購物商場已經投入使用。一旦工程全部竣工，它還將用作辦公大樓和飯店。屆時，麗嘉酒店將在國際貿易廣場地上1400英呎（約合427米）處的大廳開門營業，由此成為世界上最高的酒店。

地點：香港西九龍
設計：KPF建築師事務所
高度：1608英呎（約合490米）
樓層：118層
預計峻工時間：2010年

5.廣州電視塔

廣州電視觀光塔是在以鳥巢為代表的中國建設浪潮的大背景下誕生的。作為2008年北京奧運會主體育場，鳥巢一亮相即好評如潮。如果從底部到針狀物（比整座建築屋頂高出500英呎）計算，廣州電視觀光塔的高度估計在2001英呎（約合610米），令其成為世界上第三高的建築，僅次於迪拜塔和美國北達科他州KVLY-TV電視發射塔。

廣州電視觀光塔是雙曲面結構，意即它通過其外形構成結構的完整性，正如高架渠或橋樑的拱頂的作用一樣。大樓中間和屋頂有兩個露天的觀景台，整棟建築共有37層高，分別用作旋轉餐廳、藝術空間、會議室、商店、電影院以及廣播設施。

地點：中國廣州
設計：Information Based建築設計公司
高度：1489英呎（約合454米）
樓層：37層（不包括地下2層）
預計峻工時間：2009年底

6.阿爾哈姆拉大廈

阿爾哈姆拉塔（Al Hamra Tower）的每座辦公室都有一扇窗戶，給辦公人員留下俯瞰城市美景的空間：整座大廈將科威特城以及阿拉伯海灣的美景盡收眼底。從外面仰望阿爾哈姆拉塔，同樣給人以美的享受，其曲線面紗般「雕刻」外形與類似高度的摩天大樓截然不同。阿爾哈姆拉塔系出名門，由設計迪拜塔的SOM建築事務所一手設計。

它將用作科威特城的辦公大樓，其中最下面的5層闢為購物天堂，11層作為停車場，將購物商場和大樓一分為二。同加拿大的「弓」一樣，阿爾哈姆拉塔也被一個名為「天空大堂」（Sky Lobbies）的雙層觀景台分為三個區域。竣工後，它將成為科威特城最高的建築。

地點：科威特首都科威特城
設計：美國SOM建築設計事務所
高度：1352英呎（約合412米）
樓層：77層（不包括地下3層）
預計峻工時間：2009年

7.中鋼國際廣場

中鋼國際廣場的外觀似乎會強化辦公室白領作為「忙碌蜜蜂」的形象，事實上，這也是這棟大樓最酷的特點。其蜂巢狀外部結構起到了兩個重要作用。首先，作為承重結構，幫助調節光線和熱量進入大樓內。通過利用五個大小不同的六角形窗戶的交替外形，國際廣場的房間可以獲得充足的陽光，同時保持合適的溫度，夏天不需要空調，冬天不會有太多的熱量流失。

緩解一棟數百英呎高建築的散熱和供熱壓力，將大大降低中鋼國際廣場的能耗。其次，由於蜂巢狀部結構起到大樓支撐物的作用，意味著大樓內部不需要保留廣闊的基礎構架，從而騰出更多空間用作其它用途。中鋼國際廣場毗鄰一個288英呎（約合88米）高的住宅公寓，這棟公寓將採用類似的蜂巢狀外部結構。

地點：中國天津
設計：MAD建築事務所
高度：1174英呎（約合358米）
樓層：不詳
預計峻工時間：2012年

8.威爾大廈

當威爾大廈（Tower Verre）設計方案最早被提出來的時候，因其超前的有角設計，以及它超過克萊斯勒大廈（高1046英呎）的事實，這一設計方案遭到曼哈頓人的堅決反對。不過，經過重重波折，海尼斯房地產公司最終獲得建造這棟建築的權利，威爾大廈將於明年開工建設。一旦竣工，它將包括大片藝術空間，成為紐約現代藝術館的一部分。最上面的幾層將作為豪華公寓和酒店房間。大樓的雙子塔尖如鑽石般透徹，有人認為它將對紐約現代藝術館的藝術品起到有益的補充。

地點：美國紐約
設計：讓•努維爾
高度：1155英呎（約合352米）
樓層：75層
預計峻工時間：2012年

9.比克曼大廈

比克曼大廈（Beekman Tower）的外觀給人一種超凡脫俗、特立獨行之感，設計風格類似於法國鬼才建築大師弗蘭克•蓋裡（Frank Gehry）的一些標誌性作品（位於布拉格的「舞樓」就是他這種風格的集中體現）。在你注意到小小的細節之前，恐怕很難發現這種風格。比克曼大廈不鏽鋼外立面呈現出宜人的波狀結構，這一切要歸功於其錯落有致的單元結構形成的外觀。外部曲線直抵不規則地面，儘管從遠處看外觀幾無差別，但大廈每一層都有其獨特之處，絕無雷同。

比克曼大廈的外立面並非這棟建築唯一迷人、奇特之處:它還呈現出一種獨特的公共空間與私人空間共存的形態——大樓最底下的6層正在修建一所公立小學，大樓本身還包括零售空間，附近紐約市中心醫院的辦公場所及各種不同規模的公寓。實際上，樓內的設計更加沉穩。比克曼大廈外觀設計出自蓋裡的手筆，但他並沒有觸及內部結構。蓋裡在接受採訪時表示:「我不喜歡專注於生活方式的建築。我之前的一代建築師習慣於設計一切，但我不喜歡。」

地點：美國紐約
設計：弗蘭克•蓋裡
高度：867英呎（約合264米）
樓層：76層
預計峻工時間：2011年

10.「弓」

「弓」（The Bow）這一名稱來自於該建築獨一無二的曲線造型。竣工後，它將成為卡爾加里市第一座鋼結構摩天大樓，這種結構意味著「弓」所用的建築材料將大大減少，因為鋼構架消除了在承重牆體上建大量更為虛弱的支撐的需要。另外，它還將是卡爾加里市最高的建築，福斯特建築事務所的設計團隊會把它打造成為一座環保、可持續性建築。

「弓」樓高約18層，分為商業區、購物區和休閒區等三個區域，南向中庭橫跨整個「弓」的外立面。外立面將大廈內部完全暴露於充足的陽光下，到了冬季幫助大廈保持溫暖舒適的環境。「弓」獨特的玻璃結構有利於光線進入，從而將能量保存起來，這意味著它可以利用更多自然光照，少用人工光照。儘管「弓」的高度只有774英呎（約合236米），並沒有資格在全球一百座最高的建築名單中佔據一席之地，但它卻是環保建築思想的典範之作。

地點：加拿大阿爾伯達省卡爾加里市
設計：福斯特建築事務所
高度：774英呎（約合236米）
樓層：58層
預計峻工時間：2011年

建築師和開發商都致力於打造「標誌建築」，但為什麼大多數達不到預期的目的？

「標誌建築」，誰為你瘋狂？

威托德·黎辛斯基

建築師和開發商都致力於打造「標誌建築」，但為什麼大多數達不到預期的目的？
　

http://www.taiwanarch.com/interior/

http://www.taiwanarch.com/modeco

http://www.taiwanarch.com/architecture

弗蘭克·蓋裡與「畢爾巴鄂效應」

在危機四伏的房地產市場，建築商和開發商仍然堅持說不動產是最有魅力的商品。在紐約，有一幢計劃建設的56層豪華住宅樓，它由「普利茲克獎」（Pritzker Prize）獲得者瑞士建築師雅克·赫爾佐格（Jacques Herzog）和皮埃爾·德梅隆（Pierre de Meuron）設計。儘管還未建成，已經被稱之為「標誌」（iconic）。一幢位於布魯克林區的高層住宅樓，它有由設計芝加哥的西爾斯大廈（Sears Tower）的SOM建築事務所設計的獨具特色的參差不齊的外表面；由亮色和暗色的玻璃構成。它也希望成為「標誌設計」。一家西班牙的開發商十分自信地命名它的即將建設的住宅樓為「標誌」（The Icon）。顯然，每一個人都希望他的建築物成為「標誌」，但這不是容易的。

圖一、丹麥建築師約翰·伍重設計的悉尼歌劇院。

從傳統上看，當一幢建築物比它本身的形象更高大，成為人們都知道的象徵時，它便成了「標誌」——例如白宮、埃菲爾鐵塔（Eiffel Tower）和帝國大廈（Empire State Building）。「標誌建築」一般由公眾認可，並且是在它們建成之後經歷很長的時間獲得認可。那麼，開發商為什麼認為他們能夠立即創造「標誌」？美國建築師弗蘭克·蓋裡（Frank Gehry）和畢爾巴鄂的「古根海姆博物館」（Guggenheim Museum）又是怎麼一回事呢。

「古根海姆博物館」位於西班牙東北的工業城市畢爾巴鄂，於1997年向公眾開放。弗蘭克·蓋裡使用創新的計算機技術，設計和建造了一幢引人注目的、獨特的、形式新穎的建築。「古根海姆博物館」旋轉的外形，表面是高度反光的鈦合金板，使它與人們曾經見過的建築物截然不同。而且，不像大多數先鋒派的創造物——例如「無調性音樂」（atonal music）或「新浪潮電影」（Nouvelle Vague），畢爾巴鄂「古根海姆博物館」是很讓人感興趣的。

畢爾巴鄂「古根海姆博物館」不是第一個現代建築「標誌」。更前面有「悉尼歌劇院」（Sydney Opera House）——由丹麥建築師約翰·伍重（J·rn Utzon）設計的令人震驚的水邊建築。「悉尼歌劇院」的外形使人想起帆船或貝殼。當它在1973年建成時，成為國際轟動的一件大事。弗蘭克·蓋裡說，他的巴斯克僱主要求讓畢爾巴鄂「古根海姆博物館」產生澳大利亞的「悉尼歌劇院」那種影響。實際上，蓋裡的博物館在吸引訪問者方面是成功的。畢爾巴鄂「古根海姆博物館」吸引了數百萬人參觀。「標誌建築」吸引遊客的作用，成為從所周知的「畢爾巴鄂效應」（Bilbao effect）。

不過，你可以把弗蘭克·蓋裡的畢爾巴鄂「古根海姆博物館」解釋為一艘乘風破浪的帆船；一種天外飛來之物，或解釋為一叢銀白色的洋薊（artichoke）。它毫無疑問地成為國際上公認的建築「標誌」。畢爾巴鄂「古根海姆博物館」是你必須至少參觀一次的地方——美國的「尼亞加拉大瀑布」（Niagara Falls）或「大峽谷」（Grand Canyon）的「建築相等物」。這是「畢爾巴鄂效應」的主要希望。就像一個音廳希望吸引聽眾；一個城市希望吸引遊客；或一個房地產開發商希望吸引顧客。

可遇而不可求的「標誌效應」

圖二、弗蘭克·蓋裡設計的西班牙畢爾巴鄂「古根海姆博物館」。

儘管畢爾巴鄂「古根海姆博物館」取得了成功，「畢爾巴鄂效應」證明是不容易重複的，——甚至對弗蘭克·蓋裡也一樣。他為微軟公司的老闆保羅·艾倫設計的「體驗音樂博物館」（Experience Music Project），預期是成為西雅圖的建築地標。儘管它的獨特的結構加上色彩華麗的外形——據說是從電子吉他獲得的靈感，但它的滾石音樂博物館和吉米·亨德里克斯（Jimi Hendrix）紀念館證明是不成功的。這個博物館參觀的人很少，並且在最近，這幢建築物的一部分改變為「科幻博物館」。

從芬蘭建築師埃羅·沙裡寧（Eero Saarinen）為美國麻省理工學院設計「克萊斯格體育館」（Kresge Auditorium）以來，麻省理工學院沒有建設過重要的現代建築。它委託弗蘭克·蓋裡為它的校園增加一個地標性建築。這個「斯塔特中心」（Stata Center）是一座引人注目的建築，外形很搶眼, 乍看之下很像是一棟棟大樓倒在一起。但是由於成本過高和功能缺陷，它預期的「標誌效應」，被一場公眾憤怒和一場訴訟嚴重削弱。它的缺陷包括生長黴菌，漏水和牆面堆積冰雪。

丹尼爾·裡伯斯金（Daniel Libeskind）是另一個著名的建築師。他設計的位於柏林的「猶太博物館」（Jewish Museum），被認為是「點石成金」。成為一座標誌性的建築。然而他最近為丹佛藝術博物館（Denver Art Museum）設計的新側廳，未能吸引預期的數量的遊客。他為多倫多的「皇家安大略博物館」（Royal Ontario Museum）設計的擴建項目，也未獲得業界的好評。這些建築物沒有一個成為有關城市所期望的「標誌」，在經濟發生衰退的時候，給它們帶來好處。

圖三、威廉姆·羅恩聯合建築事務所設計的「威廉斯大學」新的戲劇和舞蹈中心。

也許，「畢爾巴鄂效應」應當稱為「畢爾巴鄂異常現象」，建築物的設計、它的形象在公眾中間引起的「標誌感應作用」是相當稀少的——並且有點神秘。例如，赫爾佐格德梅隆建築事務所設計的北京奧林匹克體育場（Beijing\\\'s Olympic Stadium）是很獨特的。但這個綜合工程給人的感覺是一個「鳥巢」的形象（這個綽號並不來源於它的建築師）。它加強了這幢建築物的國際「標誌」地位。它的「編織」成網狀的鋼鐵外殼好像不僅象徵中國的古代傳統，而且象徵它正奔向現代化。所謂的「水立方」（Water Cube）是北京奧運會的游泳館。它也成為一個「標誌」。由於這個照明物體的主要視覺效應是在晚上，它有點像「只會一招的小馬駒」（one-trick pony）。觀察它的「標誌效應」能夠持續多久是很有趣的。

除了上面提到的一些「標誌」工程，打造「標誌」而代價昂貴的失敗項目是很多的。這些建築物不能激發公眾的想像力。當然，失敗的「標誌」並沒有消失，它是一個問題。從「畢爾巴鄂效應」的說法產生以來，有人錯誤地認為，非常規的建築風格是成為「標誌」的前提。建築客戶鼓勵他們的建築師以越來越大的規模設計不平常的、令人驚奇的建築物。但這種衝擊將不可避免地消失，並且，從現在起100年內，所有這些想成為「標誌」的建築物，將類似於主題公園和拉斯維加斯大道（Las Vegas strip）之間的一個十字架（cross）。

「標誌建築」不一定是巨大的建築

雖然「標誌」這個詞越來越多地用於表示突出的或引人注目的建築物，但建築學上的「標誌」包含特定的意思。例如，白宮意味著總統辦公室，正如其他的「標誌」大房子一樣，「白金漢宮」（Buckingham Palace）代表英國君主政治。在「冷戰」期間，克里姆林宮（Kremlin）代表蘇聯政權。

圖四、赫爾佐格德梅隆建築事務所設計的北京奧林匹克體育場。

「標誌」不僅是國家的——例如「帝國大廈」和「埃菲爾鐵塔」是城市的象徵。紐約「黑石大廈」（Black Rock），這座幽靈般的花崗石摩天樓，是哥倫比亞廣播公司（CBS）的總部，它代表一個公司。「標誌」可能不只有一個含義。例如，「華盛頓紀念碑」（Washington Monument）不僅是紀念美國第一任總統，而且還像征具有他的名字的這座首都城市。並且，它非常高大和自信的形象，代表著「美國精神」。

「華盛頓紀念碑」是一個方尖碑，是一個可以追溯到古埃及的傳統紀念設施。所以，我們知道它是一個紀念碑。但是，建築學上的「標誌」的形式和它的含義之間的關係不一定是直接的。克里姆林宮的神仙故事中的洋蔥頭屋頂，使我想像它是一個極權主義政權的奇怪象徵。

阿根廷的總統宮殿，名叫「玫瑰宮」（Casa Rosada）或「粉紅宮」（Pink House），是一個19世紀的總統根據這座建築物的顏色命名的。但一些建築是偶然地成為「標誌」。在華盛頓特區的一幢由多孔的沙岩構成的建築物，最初作為總統官邸（Executive Mansion），在塗了一層白色的保護層之後，人們開始稱它為「白宮」。

只是在1901年，這個名字才被美國總統西奧多·羅斯福（Theodore Roosevelt）正式採用。「五角大樓」（Pentagon）從一個獨特的五邊形建設計劃獲得它的綽號。執行這個計劃的原因是場地難以規劃。在另一個場地，它可能很容易地規劃成一個正方形或長方形，當然我們也就沒有了美國國防部的這個有趣的、帶點神秘的象徵性的稱呼。

威斯特敏斯特宮（Palace of Westminster）著名的鐘樓，也就是眾所周知的「大笨鐘」（Big Ben），被認為是英國「哥特建築復興」（Gothic Revival）的重要作品。另一方面，美國的白宮是模仿都柏林的喬治王時代的一幢房子，是很漂亮的。但它不屬於新的建築領域。我一直喜歡「帝國大廈」，但它與粗獷的「克萊斯勒大廈」（Chrysler Building）和「洛克菲勒中心」（Rockefeller Center）的「維克多大廈」（RCA Building）相比，是使人不太感興趣的摩天樓。至於「五角大樓」，它在建造上優點不多，主要是它的巨大規模給人留下深刻的印象——當然，還有它的形象。「標誌建築」的真諦是，它不一定是巨大的建築。

如何將外觀與其他效果統一起來

圖五、麻省理工學院的「斯塔特中心」。

當由菲利普·顧文（Philip Goodwin）和愛德華·達雷爾·斯通（Edward Durrell Stone）設計的「紐約現代藝術博物館」（Museum of Modern Art）在1939年開放時，它的白色牆壁、帶狀窗戶和有排孔的屋頂，作為一種高瞻遠矚的國際風格的新的預言，受到廣泛的讚揚。這幢建築物不完全稱得上「標誌」，但肯定是未來的前兆。

兩年以後，位於華盛頓的「國家美術館」開放。它的建築師約翰·盧梭·波普（John Russell Pope）於幾年前逝世，因此他免除了現代主義批評家對他的新古典主義設計的嘲笑和奚落。他們稱他為「最後的羅馬人」（The last of the Romans）。

大多數人都稱華盛頓的「國家美術館」是一個「傑作」，這不歸因於它的風格，而是歸因於它的體裁的「持久性」（durability）——那就是它的不受時間影響的品質。大學和學院特別關心建築的長壽，它們擴展——而不是損害它們的建築遺產。這大概是耶魯大學選擇羅伯特·斯特恩（Robert A.M. Stern）去設計它的兩個新的寄宿制學院的原因。斯特恩在哥倫比亞大學（Columbia）、喬治敦大學（Georgetown）和「哈奇斯基學校」（Hotchkiss School）建設學生住宅。

圖六、弗蘭克·蓋裡設計的西雅圖「體驗音樂博物館」。

例如，他在康涅狄格州沃特敦市塔夫特學校（Taft School）設計的學生宿舍，是1900年代初期由建築師古德修（Bertram Grosvenor Goodhue）設計的「哥特藝術」（Crafts Gothic）風格的，並且後來由詹姆斯·甘布爾·羅傑斯（James Gamble Rogers）補充設計的校園的一部分。詹姆斯·甘布爾·羅傑斯在耶魯大學建設了許多學院。羅伯特·斯特恩的建築，顯示了他的特有的「豐富的材料特質性」（hearty material physicality）——按照建築師文森特·斯庫利（Vincent Scully）的建築語彙，他採用紅磚、石灰岩裝飾、板岩頂板和格子窗戶增加哥特式風格的效應。

建築物的「永恆」並不必然意味著「向後看」。在馬薩諸塞州威廉斯鎮的「威廉斯大學」，波士頓的威廉姆·羅恩聯合建築事務所（William Rawn Associates）受委託設計一個新的戲劇和舞蹈中心。儘管這個想像的「標誌」的建築師將注意力集中在外部效應，羅恩更要小心謹慎。他說：「我們通常告訴我們的客戶，他們可以選擇三個或四個特殊的東西。」

隨後向大學打聽，這些「特殊的東西」結果是主要的表演空間，一個玻璃圍護的舞蹈表演廳、一個木材裝飾的前廳。這些突出的部分，採用了有細微差別的玻璃、石灰岩和給人以模糊的北歐感覺的木材構成。儘管離「標誌建築」還遠，威廉姆·羅恩聯合建築事務所設計的戲劇和舞蹈中心在視覺上與它的環境相聯繫，使人有較廣闊的空間感覺。

建築回應它的環境的另一個例子，是加拿大多倫多市的新的歌劇院。這個名為「四季演藝中心」（Four Seasons Centre for the Performing Arts）的建築物由「戴蒙－施密特建築事務所」（Diamond & Schmitt Architects）設計。它的傳統的馬蹄形的劇場，在一個不引人注目的深藍色的磚塊構成的「盒子」裡面。這個「盒子」的特色是有一個裝有玻璃的前廳面對多倫多的一條主要街道——「大學大道」。這幢建築給人深刻印象，但算不上「標誌」。

建築師傑克·戴蒙（Jack Diamond）說：「建造一個標誌建築是容易的，因為它只解決一個問題。」「四季演藝中心」處理了幾個問題：在外部，它用透明和開闊，回應熱鬧的城區；在內部，它創造了一個多用途的大廳——包括一個非正式的表演空間和一個不尋常的全玻璃的樓梯。並且，在這個有2,000個座位的大廳內，它提供了極佳的視覺效果和聲學效果。

「四季演藝中心」的建造成本為1.5億美元。作為一個歌劇院的開銷是相對節省的。但更重要的是怎樣花費這筆錢——用在大廳和內部，而不是用在外表面的建築效應。這體現了加拿大人注重實際的特點。

圖七、丹尼爾·裡伯斯金設計的多倫多「皇家安大略博物館」增加部分。

一些建築物——例如塔夫特學校的學生宿舍、威廉斯大學藝術中心和多倫多的歌劇院尋求內部效果而不是外表突出，並且是改善而不是壓制它們的環境。它們謹慎地走近時尚的風格，傾向於保守，和採用過多次反覆，證明是好的東西，而不採用試驗性的東西。它們是端莊的，甚至是美麗的，但它們不要求讓人們驚奇。你可以稱這些建築物為「非正統標誌」（Anti-icons），或僅僅是令人滿意的建築。

原文作者：威托德·黎辛斯基（Witold Rybczynski），系波蘭裔美國建築師、設計評論家，現在賓夕法尼亞大學任教。