<?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>小麦工作室 &#187; css</title>
	<atom:link href="http://www.smartdio.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.smartdio.com</link>
	<description>探索、求知、思考、创造</description>
	<lastBuildDate>Tue, 02 Mar 2010 14:11:44 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>新的WordPress主题，把简洁进行到底</title>
		<link>http://www.smartdio.com/2009/10/smartdio-new-wordpress-theme/</link>
		<comments>http://www.smartdio.com/2009/10/smartdio-new-wordpress-theme/#comments</comments>
		<pubDate>Sun, 18 Oct 2009 01:38:27 +0000</pubDate>
		<dc:creator>smardio</dc:creator>
				<category><![CDATA[设计绘画]]></category>
		<category><![CDATA[960grid]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[eclipse]]></category>
		<category><![CDATA[photoshop]]></category>

		<guid isPermaLink="false">http://www.smartdio.com/?p=1478</guid>
		<description><![CDATA[这次新主题完全原创，采用“960布局框架”、Photoshop设计原稿、Eclipse管理编写代码。继续延续简洁的风格，力求简洁到极致。
以前的主题都是在别人设计的主题基础上进行修改，总觉得这样修改下来的主题不能完全贯彻我的想法。于是决定全新开发一个主题。
第一步：用 960 GRID SYSTEM 规划布局

“960 GRID SYSTEM”并不是一个工具（起码不是软件工具），是一套布局框架，包含一套模板文件。其中有CSS代码，Photoshop、Firework、Illustrator等常用工具的文件模板。
其实还有其他类型的CSS布局框架，我比较喜欢“960”，简单，配套的模板文件丰富。稍后再另写文章介绍“960”，如何利用“960”设计美观网页界面。
第二步：用Photoshop设计UI

利用“960”提供的Photoshop模板，新建Photoshop文件。按照模板提供的辅助线，规划布局，运用这样、那样的设计技巧做出网页的草图。使用Photoshop提供的切片工具，切出需要的部分，输出成网页支持的图像格式。
第三步：用Eclipse编写代码

以前喜欢用Dreamweaver设计网页。现在是CSS + XHTML的设计，基本上是手工编写CSS的时间比较多，Dreamweaver的可视化设计用得很少。
Eclipse有PHP的插件，又有强大的项目管理功能，我也非常熟悉，所以就选择Eclipse来编写代码。
第四步：调试、调整、发布
设计主题的大部分时间是调试、调整。先用XAMPP在本机搭建一个测试环境。把修改好的主题发布到本机的WordPress系统中，查找问题，然后修改调整。
现在发布的主题还不是最终完成的版本，还要继续对一些细节作调整。

© smardio for 小麦工作室, 2009. &#124;
Permalink &#124;
5 条评论 &#124;
Add to
del.icio.us

Post tags: 960grid, css, eclipse, photoshop

Feed enhanced by Better Feed from  Ozh
]]></description>
			<content:encoded><![CDATA[<p>这次新主题完全原创，采用“960布局框架”、Photoshop设计原稿、Eclipse管理编写代码。继续延续简洁的风格，力求简洁到极致。<span id="more-1478"></span></p>
<p>以前的主题都是在别人设计的主题基础上进行修改，总觉得这样修改下来的主题不能完全贯彻我的想法。于是决定全新开发一个主题。</p>
<h2>第一步：用 960 GRID SYSTEM 规划布局</h2>
<p><img class="aligncenter size-full wp-image-1482" title="960grid" src="http://www.smartdio.com/media/2009/10/960grid.jpg" alt="960grid" width="330" height="222" /></p>
<p>“960 GRID SYSTEM”并不是一个工具（起码不是软件工具），是一套布局框架，包含一套模板文件。其中有CSS代码，Photoshop、Firework、Illustrator等常用工具的文件模板。</p>
<p>其实还有其他类型的CSS布局框架，我比较喜欢“960”，简单，配套的模板文件丰富。稍后再另写文章介绍“960”，如何利用“960”设计美观网页界面。</p>
<h2>第二步：用Photoshop设计UI</h2>
<p><a href="http://www.smartdio.com/media/2009/10/photoshop_smartdio.jpg"><img class="aligncenter size-medium wp-image-1481" title="photoshop_smartdio" src="http://www.smartdio.com/media/2009/10/photoshop_smartdio-300x239.jpg" alt="photoshop_smartdio" width="300" height="239" /></a></p>
<p>利用“960”提供的Photoshop模板，新建Photoshop文件。按照模板提供的辅助线，规划布局，运用这样、那样的设计技巧做出网页的草图。使用Photoshop提供的切片工具，切出需要的部分，输出成网页支持的图像格式。</p>
<h2>第三步：用Eclipse编写代码</h2>
<p><a href="http://www.smartdio.com/media/2009/10/eclipse_smartdio.jpg"><img class="aligncenter size-medium wp-image-1483" title="eclipse_smartdio" src="http://www.smartdio.com/media/2009/10/eclipse_smartdio-300x234.jpg" alt="eclipse_smartdio" width="300" height="234" /></a></p>
<p>以前喜欢用Dreamweaver设计网页。现在是CSS + XHTML的设计，基本上是手工编写CSS的时间比较多，Dreamweaver的可视化设计用得很少。</p>
<p>Eclipse有PHP的插件，又有强大的项目管理功能，我也非常熟悉，所以就选择Eclipse来编写代码。</p>
<h2>第四步：调试、调整、发布</h2>
<p>设计主题的大部分时间是调试、调整。先用XAMPP在本机搭建一个测试环境。把修改好的主题发布到本机的WordPress系统中，查找问题，然后修改调整。</p>
<p>现在发布的主题还不是最终完成的版本，还要继续对一些细节作调整。</p>
<hr />
<p><small>© smardio for <a href="http://www.smartdio.com">小麦工作室</a>, 2009. |
<a href="http://www.smartdio.com/2009/10/smartdio-new-wordpress-theme/">Permalink</a> |
<a href="http://www.smartdio.com/2009/10/smartdio-new-wordpress-theme/#comments">5 条评论</a> |
Add to
<a href="http://del.icio.us/post?url=http://www.smartdio.com/2009/10/smartdio-new-wordpress-theme/&title=新的WordPress主题，把简洁进行到底">del.icio.us</a>
<br/>
Post tags: <a href="http://www.smartdio.com/tag/960grid/" rel="tag">960grid</a>, <a href="http://www.smartdio.com/tag/css/" rel="tag">css</a>, <a href="http://www.smartdio.com/tag/eclipse/" rel="tag">eclipse</a>, <a href="http://www.smartdio.com/tag/photoshop/" rel="tag">photoshop</a><br/>
</small></p>
<p><small>Feed enhanced by <a href='http://planetozh.com/blog/my-projects/wordpress-plugin-better-feed-rss/'>Better Feed</a> from  <a href='http://planetozh.com/blog/'>Ozh</a></small></p>
]]></content:encoded>
			<wfw:commentRss>http://www.smartdio.com/2009/10/smartdio-new-wordpress-theme/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
