原文：http://designreviver.com/tips/internet-explorer-resources-for-web-developers/

在开发者与设计者眼里没有比通过IE浏览网站更糟糕的事情了，随着IE8的到来，事情有所好转，但是仍然有大量的用户在使用IE6和IE7，请升级，立刻升级！！！

IE 仍然占有绝大部分的用户，所以，很遗憾，开发者和设计者还要和他相伴工作（我非常的扫瑞啊）。

今天，我们整理了一部分很好的资源，提示和备忘录来帮助您为IE做开发。

终极 IE6 备忘录:如何解决25+ Internet Explorer 6 臭虫

CSS 在 Internet Explorer 6, 7 和 8 中的不同之处

开发者必须在所有目前使用的Internet Explorer浏览器工作中为客户的网站与个人项目进行彻底测试，保证目标拥有更广泛的受众。

本文为开发人员提供了一个详尽的，易于使用的参考，让您清楚CSS中的IE6中，IE7和IE8的支持的差异。

Internet Explorer 6, 7 和 8 通盘测试战略

这篇文章中，作者向我们展示了如何通过Microsoft提供的虚拟PC（VPC在线）和Internet Explorer VPC镜像中的应用程序兼容性来降低成本，安装多个合法版本的IE来进行测试，当您完成后，您就可以放心地测试在IE6，IE7和IE8中测试了。

经典方案 （css/jquery）

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.corners.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘.box’).corners(’10px’);
});
</script>

<div>
<!–CONTENT–>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').corners('10px');
});
</script>

<div>
	<!--CONTENT-->
</div>

CSS3 方案

<style type=”text/css”>
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div>
<!–CONTENT–>
</div>

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div>
	<!--CONTENT-->
</div>

还有附带视频

假如你是新手，又不想从头写那些反复的theme基本文件，请看这里。一款未穿上衣服的theme衣架。适合初学者全面了解，wordpress theme 的文件框架。

这里还有几个测试xml，可以import一下，看看效果。

Dummy Content:

WP XML Test Data Import

When developing themes one of the biggest frustrations can be the lack on content on a new installation of WordPress. Self Conclusion has put together an XML file with several posts and pages of dummy content with tags, categories, comments, links, lists, and everything you will need to test a theme. You can easily download this file and import it into WordPress to save the time of adding your own dummy content.

Sandbox Dummy Content

For Sandbox design competitions, a set of dummy content was released. It achieves the same purpose as the content from Self Conclusion that was just mentioned.

WordPress Test Post Pack

Think Design Blog also has a pack of dummy content that can be downloaded and imported into WordPres

看到这篇文章以后，做下自己的整理。

在写css的过程中，Class的命名是非常重要的一项内同，简洁有语义的Class命名有利于代码的可读性。虽然伴随着HTML5的到来，会逐渐弱化，直接在HTML标签上进行简化和加强语义，但是这里还是有必要写一下。

class=”fixed”

这里是清除浮动的新写法，自动产生一个不显示的字符”.”，清除浮动，非常的实用。我自己使用class=”clearfix”

.fixed:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  \*/
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

class=”alt”

alt是”alternative”的缩写

#content img{
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #ccc;
	padding:1em 0;
	background:#fff;
	}
#content img.alt{
	float:right;
	margin-right:0;
	margin-left:10px;
	}

class=”selected”

<li class=“selected”><a href="/about">About Us</a></li>

class=”first”,class=”last”

直到所有的浏览器都支持:first-child 和 :last-child属性以后，这个写法将会消失。

class=”inner”

作为内容器经常与container一起使用

<div id="container">
	<div>

	</div>
</div>

class=”even”，calss=”odd”

使用在隔行变色的li或者table tr上

<ul>

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li>

</ul>

class=”section”

替代以前常用的class=“box”

<div>
	content here...
</div>

<?php

$custom_more = "Continue reading this post";
add_filter( 'the_content_more_link', 'my_more_link', 10, 2 );

function my_more_link( $more_link, $more_link_text ) {
	return str_replace( $more_link_text, $custom_more, $more_link );
}
?>

不过这个工具只能在Windows (XP with SP2 和更高级的系统)下工作，但非常的不错。访问 Xenocode Browsers

• 能有建立任何类型的网站
• 如果你不知道如何从零开始创建自己的主题
• 有效的和有语义的XHTML
• 如果你打算开始学习主题设计
• 网页开发人员需要快速转变他们的客户网站
• SEO优化主题
• 支持多种流行插件
• 灵活的结构类别，可以通过CSS针对任何特定的页面
• 利用微格式

Sandbox

可能是第一个真正意义上的主题框架，Sandbox是 WordPress主题设计者和开发者强有力的工具。Sandbox能轻松的通过CSS进行设计，所以新手会感觉到非常的舒服，而不会被PHP打扰。

Thematic

Thematic是免费的开源的高扩展的SEO优化的WordPress主题框架，13个widget准备区,简洁的网格排版，适用很多受欢迎的插件，背后拥有一整套的社区。非常适合新手blogger和 WordPress个人开发。

Hybrid

Carrington

WPframework

Parallel

这是一个我经常会注意到的问题，虽然不是每个设计师都有具备扎实与强大的手绘功底，但是作为设计师的必备技能，应该积累此方面或多或少的能力。尤其是独立设计师，把脑海中的设计思路快速的落实在纸上，手绘技能是不可或缺的。

设计是一个奇怪的过程，并不是你具有很强的手绘或者绘画功夫就能做好的，整个过程是感性和理性相互交融相互博弈的产物，这也是很多绘画能力很强的人做不好设计的原因。当然没有手绘与绘画基本能力，在一定的程度上制约了设计师的提高，这也就是大多数非美术专业的设计从业者需要面临的问题。

拿我作为例子，并没有很多的手绘能力，这就制约在某个方面的设计能力。假如你想成为出色的设计师，手绘是必要的。

这里有一篇讲解有关手绘问题的文章。我认为讲解的很到位，不妨去看一下。

DesignBump旧版本

DesignBump新版本

新旧两个版本而言，旧版本的有点类似基于cms的默认模板，没有什么特点和亮点。新版则侧重于UI的高度统一，有相当整洁的版面，和ICON。

DesignBump是社会性书签网站，在设计上应该偏重于互动性。设计应该尽量趋于简洁易用，让用户更多的关注网站实际内容。

下面是作者在设计之前，落实在纸面的设计稿（应该是logo的草稿）。看到设计稿，我们能看出设计师在脑海里面的大体概念，追寻着箭头的抽象概念，体现网站整体的行为方式，Up或者Bump。

草稿反映到绘图软件中。设计者确定了基本的配色，对箭头的基本形状做出了各种demo,为网站的名称选用了几种字体做对比。

确定了整体效果，并做最后的调整。

logo的配色选择上，是非常好的，加上细微的颜色渐变，充满了空间感，整体的不仅仅是2D效果，有延伸感。

加入了黑白两色视觉效果图。这里要说的是，好的logo设计应该秉承VI设计的思路，不仅要简洁好看有意义，易于使用才是根本。可以看到这个标识的黑白稿很有设计感，相信不仅在网页上还是印刷品中使用起来应该十分方便。

下面我们来看看由logo延伸，全套ICON。

最后我们看看网站的整体版面规划。对于相对简单的既定性版面设计，我们有一套可遵循的操作方法，网格加上辅助线，把各个模块分割出来，插入网格中。有平面设计基础的人，对于这样的设计可谓是手到擒来，没有太大的技术含量。建议设计师多看看版面设计，参照杂志设计或者海报设计，版面和网格的设计就是最基础的原理。可以看到国外的设计已经进化了，想成为出色网页设计师，研习传统设计方式，是不可以避免的一项。有效的继承是创新的基础。

细节一，Dump

细节二，分类与链接

个人页面

表单设计