<?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>Seven Two Blog &#187; Tools</title>
	<atom:link href="http://www.seven2.com.cn/archives/category/tools/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.seven2.com.cn</link>
	<description></description>
	<lastBuildDate>Fri, 02 Dec 2011 13:47:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>HTML5 和 CSS3工具资源汇总</title>
		<link>http://www.seven2.com.cn/archives/774/</link>
		<comments>http://www.seven2.com.cn/archives/774/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 06:18:24 +0000</pubDate>
		<dc:creator>七二</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML 5]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://www.seven2.com.cn/?p=774</guid>
		<description><![CDATA[HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性!我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容中彬Go将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。彬Go希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。 HTML5 &#38; CSS3 准备就绪 该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。 HTML5安全手册 CSS3按钮生成器 所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。 When can I use…（HTML5 &#38; CSS3 浏览器兼容性） 很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。 CSS3颜色值/名称速查手册 CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等… CSS3生成器 在线测试CSS3新特性，即时生成效果。 Modernizr 当前浏览器对HTML5支持情况测试 该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细，很有用! CSS 边框半径(代码生成器) 通过输入数值即可生成CSS3代码的CSS 边框代码生成器。使用很简便。 FindMeByIP（HTML5 &#38; CSS3 浏览器兼容性手册） 很详细的HTML5和CSS3浏览器兼容性手册。 CSS3渐变生成器 CSS3 Watch 前端开发工具&#38;资源小集合 CSS3, please!(实时体验CSS3代码) font dragr CSS3生成器 CSS桌面 CSS桌面可以让你在线练习CSS3代码，并实时将渲染效果呈现在右侧，很棒的CSS3在线练习工具。 HTML5修订版本跟踪器 font-face 生成器 CSS3 选择器测试工具 IE 打印保险器 详细CSS 浏览器支持情况列表]]></description>
		<wfw:commentRss>http://www.seven2.com.cn/archives/774/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>常用前端的调试工具</title>
		<link>http://www.seven2.com.cn/archives/772/</link>
		<comments>http://www.seven2.com.cn/archives/772/#comments</comments>
		<pubDate>Mon, 21 Jun 2010 13:35:06 +0000</pubDate>
		<dc:creator>七二</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[W3c]]></category>

		<guid isPermaLink="false">http://www.seven2.com.cn/?p=772</guid>
		<description><![CDATA[FireFox 的插件 ColorZilla 利用 ColorZilla 您可以从浏览器中的任一点读取色彩值，快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。内建的调色板浏览器允许您从预定义的颜色集中选择颜色或将最常用颜色保存到自定义调色板。DOM 侦测功能让您可以快速、容易地获得关于 DOM 元素的各种信息。还有更多功能…… Web Developer Web Developer 作为 FireFox 的插件存在，主要功能表现在几个重要的方面： 对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改 CSS文件实时显示出得到的页面效果等等。 Web Developer 插件能够帮助我们对 CSS 网站进行分析，我们使用 FireFox 对网页进行浏览，运用 Web Developer 插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS 书写方式，鼠标所在位置的id或class是什么等等，使 我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握 CSS 布局技术。 Firebug Firebug 和 firefox 整合在一起，使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和  Javascript 。要查阅文档、截图和论坛请访问Firebug的网站：http://www.getfirebug.com YSlow YSlow 是 Yahoo 美国开发的一个页面评分插件，基于 Firebug,  非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。YSlow 从 Firebug 收集当前网页和该网页的访问信息后进行分析，如有必要则给出如何提高页面加载速度的建议，比如减少 DNS 查询，使用外部并压缩 Javascript 等。 Page [...]]]></description>
		<wfw:commentRss>http://www.seven2.com.cn/archives/772/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Dreamweaver鲜为人知的小秘诀</title>
		<link>http://www.seven2.com.cn/archives/235/</link>
		<comments>http://www.seven2.com.cn/archives/235/#comments</comments>
		<pubDate>Sat, 15 Nov 2008 15:38:01 +0000</pubDate>
		<dc:creator>七二</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Dreamweaver]]></category>

		<guid isPermaLink="false">http://www.seven2.com.cn/?p=235</guid>
		<description><![CDATA[一、背景分析 对想要在视觉化环境下制作复杂网页的专业网页制作者来说，Dreamweaver已经渐渐在网页编辑工具中展露头角，成为专业人士编写网页的最佳选择。根据Macromedia公司的调查，Dreamweaver目前已累积有超过七十万名的使用者，占有率在网页编辑工具中居冠，像“Adobe GoLive”和“NetObjects Fusion”等竞争者都被遥遥抛在后头。因此一般地预估Dreamweaver的使用群体将会持续的增加。 在这种势不可挡的普及率席卷之下，可想而知Dreamweaver内置的功能可说是越来越多、越来越丰富、齐全。在这次我们的介绍中，就有新增一些功能提供网页制作者一些更快速的设计、更容易地编码及整合性更强的功能。事不宜迟，以下我们介绍如何善用Dreamweaver里的一些功能。以下密技共有十二项，可分成四个主题。分别是：设计网页页面（Dreamweaver里具有弹性的页面设计功能）、搭配Macromedia其它产品一起使用Dreamweaver（制作动画和图片不求人）、自订使用界面（享受个性化的使用经验）和最后的加入Dreamweaver扩充程序（在网页中载入扩充高级功能 ）。 二、设计网页页面的秘诀 不管你是要运用HTML原始语法逐字逐字来编写网页，或是运用标准化窗口来进行网页的视觉设计，以下的小秘诀都可以派得上用场。 秘诀1：让网页页面大小更有弹性 有些网页开发者称以下要介绍的这种技巧为“liquid”，在这儿则把这种技巧叫做是“弹性延伸的技巧”。这是一种技巧，可在访客浏览器窗口大小改变时也随之调整网页页面大小，因此如果窗口过大就不会有空白处；窗口过小边缘就不会跑出上下移动的拉条。其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小，但是如果是网页里用到很多不同的框架及表格，网页页面大小就很难自动弹性地调整。通常网页设计者会用混合运用固定宽度的框架，和GIF图片作为间隔来设计网页页面，这样一来不论是用Internet Explorer或是用Netscape Navigator，页面大小都会固定而不会跑掉。用Dreamweaver 4.0可以轻而易举的设计出会自动弹性调整的网页。要怎么做呢？ ★具体做法：用工具面板（Object palette）上的按钮打开网页，并且转换到“格式查看”（Layout view）。这时可以看到文字方块的栏度，每一栏的方框上方中间还有一个小小的下拉式箭头，点选想要设置弹性显示的栏上方的小箭头，接着选择“将栏设为弹性显示”（Make Column Autostretch）。（设置自动调整栏的宽度以一栏为限）这时该栏方框上方就会出现一条波浪形的线，而不是原本表示栏度的数字。 Dreamweaver会自动制作出固定版面的空格图片，这个空白图片是以栏上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设置。（在第一次增加空白图片时会跳出一个对话框问你是否要使用内置图片，为求效果，我们建议你让Dreamweaver自动产生一个，不然就不用使用空白图片来填充版面。） 秘诀2：创造个人调色板 Dreamweaver新的“Assets panel”（属性控制面板）是一种可以在编辑网站时根据文件格式，例如图片、样式等来管理文件的新工具。 ★具体做法：当你定义新站点时（点选Site New Site），所有类型的物体会自动增加到“Asset panel” 里的适当表框中。这个新加入的“Assets panel”属性控制面板里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，以及超链接的颜色等。这是一个为使用者量身定做的网站导航颜色盘。只要启动“Assets panel”（先选 “Window”再点“Assets”），接着点左方那个小小的色彩卷轴，就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进位值的色彩淡浓度，和三原色对照码（RGB）。如果想将调色板工具栏缩小一点，甚至可以仅加入某些颜色到调色板的“我的最爱”里。只需将选取的颜色反白、点选窗口里一个叫做“新增到我的最爱的”按钮（最下方靠右的按钮），就可以完成了。 秘诀3：制作弹出式菜单导航系统 原本要制作弹出式菜单导航系统（Pop-up Menu Navigation System）要用到很多的一些javascript的语法和技巧，但是如果你有Dreamweaver、Fireworks Studio，即可轻轻松松快速办到。 ★具体做法：首先在“Fireworks”里开始，选择某个图片，然后在“Set Pop-Up Menu”的对话框里点选“ Insert　 Pop-Up Menu”，你可以输入项目（items）的名称并点“Plus”（加入）按钮，来新增该项目。你可以继续在跳出来的信息框里进行细项设置，例如设置该项目所要用的文字及超链接，当然也可以新增子菜单，并重新安排下一层的设置。完成时，点选“Next”（下一步），继续设置各种参数值，例如颜色、字体等等。这时菜单完成后，既可以预览HTML语法，也可预览图象。再点“ Finish”（完成）。这时当鼠标移动到原来的图片时，会出现菜单系统的内容一览。接着将制作好的文件导出时，“Fireworks”会自动生产出所有 Dreamweaver 需要用到的HTML、javascript，以及图象文件。 秘诀4：让图片动起来 如果你同时安装有Dreamweaver、Fireworks Studio，这两种软件搭配的完美程度将使你赞不绝口。即使你不是专业的图片设计者，在设计网页时也多多少少想把一些GIF图片修改得活灵活现。Dreamweaver可以让你制作动画不求人。 ★具体做法：在标准窗口里选择要进行修改的图片，然后在“Property Inspector”里点选“编辑”（Edit）。如果你安装的Dreamweaver里附有“Fireworks”，“Fireworks”就是Dreamweaver预设图片编辑器，这时图片就会自动载入到“Fireworks”。（如果仔细看，你会发现Fireworks的画面会出现“Editing From Dreamweaver”这样的文字和图样，指示你可以在Dreamweaver里进行图片编辑。）好了，现在在“Fireworks”里点选要编辑的图片，选择“ Modify Animate Animate [...]]]></description>
		<wfw:commentRss>http://www.seven2.com.cn/archives/235/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

