<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Azan 黃贊臣 &#187; 視覺設計</title>
	<atom:link href="http://tommy.ironman.tw/category/art-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://tommy.ironman.tw</link>
	<description>網頁設計文章的蒐集與整理</description>
	<lastBuildDate>Sun, 18 Dec 2011 15:59:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Apple iCloud icon 的製作教學</title>
		<link>http://tommy.ironman.tw/apple-icloud-icon/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=apple-icloud-icon</link>
		<comments>http://tommy.ironman.tw/apple-icloud-icon/#comments</comments>
		<pubDate>Thu, 09 Jun 2011 08:12:52 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[視覺設計]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[icloud]]></category>
		<category><![CDATA[ICON]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3273</guid>
		<description><![CDATA[Apple iCloud icon 的製作教學 &#160; Photoshopping iCloud Style Aluminium Icons (@photoguides) from Ash Davies on Vimeo.]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/apple-icloud-icon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>查詢特殊字元編碼(fileformat.info)</title>
		<link>http://tommy.ironman.tw/fileformat/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=fileformat</link>
		<comments>http://tommy.ironman.tw/fileformat/#comments</comments>
		<pubDate>Mon, 28 Feb 2011 16:05:29 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[線上工具]]></category>
		<category><![CDATA[fileformat]]></category>
		<category><![CDATA[特殊字元編碼]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3259</guid>
		<description><![CDATA[網頁上有時要打特殊字元時必須要輸入特別的編碼才能夠讓瀏覽器辨別，例如一般常需要用到的版權這個符號 © ，其實他必須輸入在HTML的語法上是 "&#38;copy;"，但我們怎麼知道其它許多特殊字元的編碼呢? 這個網站就能幫我們了，只要先在Word上打出想要的符號，然後複製字元代碼 再到這個網站 網站名稱：FileFormat.Info 網址：http://www.fileformat.info 貼上00A9 查詢 就能找到相關的資訊，我們看到第一筆點進去看 他有很多編碼方式，我們網頁要用的就是紅色框起來的這種，後面就是它的編碼 複製他後方寫的 "&#38;copy;" 貼進HTML內就能正確讓瀏覽器顯示了。]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/fileformat/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>3種jQuery UI Dialog取值、賦值的範例</title>
		<link>http://tommy.ironman.tw/3-jquery-ui-dialog-get-value-put-value-sample/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=3-jquery-ui-dialog-get-value-put-value-sample</link>
		<comments>http://tommy.ironman.tw/3-jquery-ui-dialog-get-value-put-value-sample/#comments</comments>
		<pubDate>Thu, 09 Dec 2010 04:54:45 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jQuery UI]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3212</guid>
		<description><![CDATA[由於使用jQuery UI Dialog時，必須將頁面上的值傳送到隱藏的Dialog表單，通常使用時都是在這裡出錯，例如取不到列表上的值，或是取值方法不對，或是取到值卻放不進隱藏表單的input欄位，這樣就無法執行寫入或更新了。 http://jquery.gogogogogogogogogo.com/LoadListTest.php 使用jquery.tablesorter.pager排序 http://jquery.gogogogogogogogogo.com/modiTitle.php http://jquery.gogogogogogogogogo.com/putValueInDialog.php 參考資料： http://www.oncoding.cn/2009/jquery-input-value/]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/3-jquery-ui-dialog-get-value-put-value-sample/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>解決圖層被Flash擋住的終極方法</title>
		<link>http://tommy.ironman.tw/layout-flash-wmode/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=layout-flash-wmode</link>
		<comments>http://tommy.ironman.tw/layout-flash-wmode/#comments</comments>
		<pubDate>Wed, 10 Nov 2010 08:10:30 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery UI]]></category>
		<category><![CDATA[dialog]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[wmode]]></category>
		<category><![CDATA[擋住]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3199</guid>
		<description><![CDATA[如果網頁上有 Flash 的話，往往 Flash 會把彈出的圖層或是使用jQuery dialog彈出的視窗給擋住，(FF除外，IE6，7，8均出現被擋情況) 解決辦法就是給Flash設置透明的參數：wmode="transparent"。 並在 embed 標籤中設置 wmode="transparent" 如果使用 AC_FL_RunContent，可以加多一對參數 'wmode','transparent' 即可。 如： 如果還是有問題，可以嘗試給 Flash 外面增加一個 DIV 標籤，並給他設置 z-index:0; 的樣式即可。]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/layout-flash-wmode/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>一個很棒的網頁構圖概論</title>
		<link>http://tommy.ironman.tw/introduction-of-a-great-web-page-composition/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=introduction-of-a-great-web-page-composition</link>
		<comments>http://tommy.ironman.tw/introduction-of-a-great-web-page-composition/#comments</comments>
		<pubDate>Sat, 30 Oct 2010 16:44:36 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[視覺設計]]></category>
		<category><![CDATA[構圖]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3154</guid>
		<description><![CDATA[網頁給人最直觀的感受就是它的頁面框架與構造，就像一座大樓的主體框架與形態，你可能記不起東方明珠塔和艾菲爾鐵塔是用什麼顏色或什麼材料塗的外牆，但我想你一定記得起它們的什麼樣的形狀。 同樣，網頁設計中的構圖也足以影響到整個網站給人的感受，雖然比喻並不十分恰當，但就網頁其構圖而言，些許的改變和簡單的創新也許就能起到事半功倍的效果，讓網站給人的視覺感受耳目一新。 如何將網頁這座樓蓋的漂亮？ 以下就例舉一些在網頁設計上能起到事半功倍的構圖技巧。 個人拙見，希望能夠拋磚引玉。 【一】堅實的地基-幾何圖形的力量。 幾何圖形在頁面中往往能起到大樑的作用，也是網頁內容最為常用的承載面板。 這些圖形合理的搭配和有效的穿插，能使頁面除了信息傳達外，更具層次感和觀賞性。 此網站圓角矩形巧妙的結合信息模塊穿插在一起，除了營造了網站的主體富有節奏的形狀之外，更加強了頁面的層次感，不會顯得頁面枯燥和單調。 圓形和橢圓形的結合搭載了輪播廣告和重要信息，使得整個頁面既有亮點又不失簡潔。 同樣是圓角矩形的穿插結合， 色彩填充的圖形交集既能展示重要信息又勾勒出整個網站的風格形態。 豎著的大圓角矩形和線條勾勒出整個完整的畫面，各種信息鑲嵌於各個形狀只中，既不顯得亂又使其相得益彰。 更多類似的例子： 【二】鋼筋上的鉚釘—破格而出的素材 素材應用的好，往往能起到畫龍點睛的作用，而素材起點綴頁面和表達主題之外，還能作為構圖中的一種主要元素存在，這些素材通常破格而出作為連接頁面的紐帶，使頁面結構更加的穩固，故稱其為“鉚釘”。 素材看似隨機的擺放，其實是有意的將素材擺放於左上和右下兩個對角點，視覺上俗稱的暗線，左下角信息內容的圖片和右上角的登錄窗口組成了另外一條對角暗線， 兩者並組成了X結構，而四個素材起到到了固定和壓軸的作用，穩固而又美觀。 飛躍的人越於頁面之上，護目鏡掛於導航欄之上。 這兩個素材的使用使整個頁面既貼切於主題又生動，而在構圖上人連接穿插了1、2兩個板塊，而護目鏡所在的2板塊鏈接了3、4板塊，視覺上的感官延續讓頁面脈絡清晰不脫節，切富有節奏感。 頁面非常簡單，除了圖形構築的基礎形，就是幾朵起到“鉚釘”作用的花兒，花朵破框而出，使得素材有機的融於框內又搭於整個頁面之上，讓人有種花是由圓洞內長到頁面之上的錯覺，簡單而富有層次。 這個頁面的素材和主體框架的結合很巧妙，破框而出的噴濺牛奶和靜態的巧克力、杯子的動靜結合於頁面頭部，使得整個頁面主次清晰而又連貫。 更多類似的例子: 【三】打造斜塔之美—斜的視覺張力 比薩斜塔之斜是地質沙化下沉還是設計師故意為之，至今還是有人在爭論，拋開爭議，斜塔的美似乎讓許多人都想來到它身邊一睹這位傾斜美人之容，湊巧的是，在浩瀚的宇宙中最美麗的星球，也就是地球，也斜著身子對著太陽轉著。 話題扯的比較遠，斜線，或者說是斜著的物體，似乎天生有一種張力。 在網頁設計中亦是如此，而在這裡所表現的為視覺的張力，是種視覺心裡上的延伸力而非物理上的。 當頁面過於平均，畫面平平毫無亮點時，打破平均打破通體的平均尤為重要，打破平均的方式有很多，而斜線似乎是網頁設計中慣用的一招，屢試不爽。 斜線的張力讓整個頁面富有動感和延伸性，即可為頁面起到修飾的作用，又能做為信息的承載模塊，兩者有機的融合併不讓人覺得傾斜的標題不好識別或者有礙閱讀，反之更能讓整個頁面富有形式感和表現力。 斜線的運用加上素材和圓形的穿插結合，讓整個頁面具有動感，同時視線又隨著斜線的走向帶入至素材和標題之上，具有張力的同時又讓這些線起到一個很好到視覺導向作用。 以斜線為暗線排版而成的信息組件和右邊斜線切割而成的圖片形成形態上的互補，又形成節奏上虛實和疏密的對比，使得整個畫面既有斜線帶來的張力和動感之外，又不乏整體的穩固和均衡。 更多類似的例子： 以上簡單的介紹了網頁設計中的一個步驟：構圖，羅列了一些比較常用而又有效果的方法，除此之外，應該還有很多，希望大家補充，但我相信無論構圖也好，色彩搭配也好，亦或是節奏旋律等等。 它們總是圍繞著一個共同點去進行，那就是使頁面在信息順利傳達的前提下變的美觀而生動，有了這一大準則，我想設計頁面的時候需要的不是一大堆技法和技巧，而是一顆永不停止探索美和創造美的心。]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/introduction-of-a-great-web-page-composition/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>一個免費且超漂亮的CSS3.0選單線上網站(www.onlycssmenu.com)</title>
		<link>http://tommy.ironman.tw/www-onlycssmenu-com/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=www-onlycssmenu-com</link>
		<comments>http://tommy.ironman.tw/www-onlycssmenu-com/#comments</comments>
		<pubDate>Wed, 06 Oct 2010 03:47:45 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[線上工具]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS3.0]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[onlycssmenu]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3090</guid>
		<description><![CDATA[這個網站提供各式各樣的選單，而且只用CSS語法就可變化多樣，有直式選單、橫式選單、步驟導引等，還可線上客製自己要的按鈕名稱與連結，下載下來就可使用了，並且在它下方都有顯示支援哪些瀏覽器，分享給大家。 網站：http://www.onlycssmenu.com]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/www-onlycssmenu-com/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>線上CSS圓角產生器 (border radius)</title>
		<link>http://tommy.ironman.tw/border-radius-com/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=border-radius-com</link>
		<comments>http://tommy.ironman.tw/border-radius-com/#comments</comments>
		<pubDate>Thu, 30 Sep 2010 07:38:48 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[線上工具]]></category>
		<category><![CDATA[電腦相關]]></category>
		<category><![CDATA[border radius]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[圓角]]></category>
		<category><![CDATA[產生器]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3084</guid>
		<description><![CDATA[Azan最近又發現一個不錯的線上CSS圓角產生器，隨著各大瀏覽器對矩形圓角的支援度越來越高，要製作一個圓角的方框越來越容易，不再像以前要切許多圖片來對應，它產生的語法支援3大瀏灠引擎，Webkit、Gecko與CSS3 網址：http://border-radius.com/ 在想要圓角的地方輸入數字後，中間就會自動幫你產生CSS語法，而下方有3個核選框，分別代表要輸出哪幾種的語法，預設都是全選，這3種的意思是... Webkit：是Apple所開放出來的瀏覽引擎核心，目前使用它的瀏覽器代表是Safari、Google Chrome也已把它納入瀏覽引擎的核心內以及手機，據說它的速度非常快，而且跨平台支援良好，諾基亞最先把 Webkit 搬到手機上去，連 iPhone 在內，現在幾乎所有手機市場都被Webkit佔據。 Gecko：代表瀏覽器就是Firefox。 CSS3：所有有支援CSS3的瀏覽器。 但兩光的IE6、IE7、IE8還是延續傳統的不支援@@，聽說IE9要一雪前恥，通通都支援了，再拭目以待。]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/border-radius-com/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>真傳神，設計師的心中的話...</title>
		<link>http://tommy.ironman.tw/designer-mind-os/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=designer-mind-os</link>
		<comments>http://tommy.ironman.tw/designer-mind-os/#comments</comments>
		<pubDate>Fri, 03 Sep 2010 06:58:39 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[視覺設計]]></category>
		<category><![CDATA[Designer]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=3036</guid>
		<description><![CDATA[　　　改改　　　　　改改 　　　改　　　　　　改 改改改改改改改　　改　改 　　　改　　　　改　　　改 　改改改改改　改　　　改　改 　改　　　改改　改改改改改　改 　改改改改改　　　　改 　改　　　改　　　　改 　改改改改改　　　　改　　改 　改　改　改　改改改改改改改改 　　　改　　　　　　改 改改改改改改改　　　改 　　　改　　　　　　改 　　　改　　　　　　改 　　　改　　　　　　改 哈！ 絕對不是我的意思喔 只是在FB看到的]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/designer-mind-os/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS滑鼠游標圖示語法</title>
		<link>http://tommy.ironman.tw/css-cursor/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=css-cursor</link>
		<comments>http://tommy.ironman.tw/css-cursor/#comments</comments>
		<pubDate>Thu, 12 Aug 2010 11:51:28 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[cursor]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=2797</guid>
		<description><![CDATA[雖然這是舊知識了，不過有時還是會用到，所以紀錄一下... 通常我們滑鼠在移到網頁的連結或特定的元件部位，都會有相對應的游標圖示會出現，以讓我們大概知道有什麼功能可以使用，例如移到連結會出現手型讓我們知道可以點擊，移到文字欄位會變 I 型，讓我們知道可以輸入或選取文字，但如果要強制改變瀏覽器對它的預設狀態，就可以用CSS樣式語法來改變了。 圖 值(Values) 測試 NS IE 語法範例 default TEST 6+ 4+ cursor:default crosshair TEST 6+ 4+ cursor:crosshair hand TEST 4+ cursor:hand pointer TEST 6+ cursor:pointer Cross browser TEST 4+ cursor:pointer;cursor:hand move TEST 6+ 4+ cursor:move text TEST 6+ 4+ cursor:text wait TEST 6+ 4+ cursor:wait help TEST 6+ 4+ cursor:help n-resize TEST [...]]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/css-cursor/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>取得jQuery UI 按紐小圖示的Class名稱</title>
		<link>http://tommy.ironman.tw/jquery-ui-icons/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=jquery-ui-icons</link>
		<comments>http://tommy.ironman.tw/jquery-ui-icons/#comments</comments>
		<pubDate>Wed, 11 Aug 2010 09:40:49 +0000</pubDate>
		<dc:creator>Azan</dc:creator>
				<category><![CDATA[jQuery UI]]></category>
		<category><![CDATA[ICON]]></category>

		<guid isPermaLink="false">http://tommy.ironman.tw/?p=2766</guid>
		<description><![CDATA[使用jQuery UI 的按鈕時，如果要製作有圖示的按鈕， 其實jQuery UI 的Themes包裝裡面，都已經將圖片夾帶放在images資料夾裡面了，但是它是一張大圖，透過CSS的座標定位去取出該圖片，直接打開圖片就可看到如下： 國外有人將圖示整理出來，看到想用的按鈕圖示時，複製他的按鈕名稱套用到Class就可以了，網址如下： jQuery UI icons：jQuery UI CSS Framework Icons Test Page jQuery UI Buttons：http://jqueryui.com/demos/button/#toolbar 上圖按鈕範例：http://jqueryui.com/demos/button/toolbar.html]]></description>
		<wfw:commentRss>http://tommy.ironman.tw/jquery-ui-icons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

