<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[Java伴侣 - Css&Ps]]></title>
<link>http://www.javamilk.org/</link>
<description><![CDATA[关于工作、学习与生活]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[blurxx@yahoo.cn(Blur)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>Java伴侣</title>
	<url>http://www.javamilk.org/images/logos.gif</url>
	<link>http://www.javamilk.org/</link>
	<description>Java伴侣</description>
</image>

			<item>
			<link>http://www.javamilk.org/article.asp?id=1523</link>
			<title><![CDATA[font-family:黑体;导致css定义全部不起作用]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Wed,02 Nov 2011 16:00:30 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1523</guid>
		<description><![CDATA[css文件里font-family: &#34;黑体&#34;;这句会导致后面的css定义全部不起作用了。<br/>只要把font-family: &#34;黑体&#34;;<br/>改成<br/>font-family:黑体;<br/>就行了，去掉空格和双引号。<br/>这个问题只存在于IE6中。<br/> <br/><br/>在互联网上找到的部份答案<br/><br/><br/>一处容器的font-family属性里写了&#34;宋体&#34;，而IE6一下不解析&#34;&#34;号，于是就导致整个页面的居中失效<br/><br/>css中指定font-family属性为黑体、幼圆、微软雅黑等，一一无法正常显示（ie7），最终发现原来是CSS文件是gb2312编码，另存为UTF-8后改掉乱码的中文，之后font-family指定中文字体便ok了~这样看浏览器ms是按utf8对css文件进行解析的<br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1480</link>
			<title><![CDATA[图片代码超链接文字特效代码3]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Thu,31 Mar 2011 14:13:20 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1480</guid>
		<description><![CDATA[<div>
<div><font color="#ff0000" size="2" style="background-color: #ffffff">1. 透明效果</font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2" style="background-color: #ffffff">&lt;img src=&quot;图片地址&quot; style=&quot;filter:Alpha(opacity=100,finishOpacity=<span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><font style="background-color: #ffffff">0</font></span></span></span>,style=<span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><font style="background-color: #ffffff">0</font></span></span></span>)&quot;&gt;</font></div>
<div><font size="2" style="background-color: #ffffff"><br />
或</font></div>
<div><br />
&lt;div style=&quot;filter:Alpha(opacity=100,finishOpacity=<span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><font style="background-color: #ffffff">0</font></span></span></span>,style=<span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><font style="background-color: #ffffff">0</font></span></span></span>) ;width:宽;height:高&quot;&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2" style="background-color: #ffffff">代码说明：<br />
opacity:开始处的透明度<br />
finishOpacity:结束处的透明度<br />
style:<span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><span id="baidubar_0" style="color: black; background-color: #ffff66"><font style="background-color: #ffffff">0</font></span></span></span>-平均透明 1-线状透明 2-圆形透明 3-菱形透明</font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2" style="background-color: #ffffff">效果预览：</font></div>
<div><font size="2" style="background-color: #ffffff"><img title="图片代码超链接文字特效代码3" height="338" alt="图片代码超链接文字特效代码3" src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" width="450" real_src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" style="filter: Alpha(opacity=100,finishO,pacity=0,style=0)" /></font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#ff0000" size="2" style="background-color: #ffffff">2. 翻转效果</font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2" style="background-color: #ffffff"><font color="#0000ff">左右翻转格式：</font></font></div>
<div><font size="2" style="background-color: #ffffff"><br />
&lt;img src=&quot;图片地址&quot; style=&quot;filter:FlipH&quot;&gt;<br />
或<br />
&lt;div style=&quot;filter:FlipH ;width:宽;height:高&quot;&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2">效果预览:</font></div>
<div><font size="2" style="background-color: #ffffff"><img title="图片代码超链接文字特效代码3" height="338" alt="图片代码超链接文字特效代码3" src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" width="450" real_src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" style="filter: FlipH" /></font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff" size="2" style="background-color: #ffffff">上下翻转格式：</font></div>
<div><font size="2" style="background-color: #ffffff"><br />
&lt;img src=&quot;图片地址&quot; style=&quot;filter:FlipV&quot;&gt;<br />
或<br />
&lt;div style=&quot;filter:FlipV ;width:宽;height:高&quot;&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2" style="background-color: #ffffff">效果预览：</font></div>
<div><font size="2" style="background-color: #ffffff"><img title="图片代码超链接文字特效代码3" height="338" alt="图片代码超链接文字特效代码3" src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" width="450" real_src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" style="filter: FlipV" /></font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#ff0000" size="2" style="background-color: #ffffff">3. 变调效果</font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2" style="background-color: #ffffff"><font color="#0000ff">灰调格式:</font></font></div>
<div><font size="2" style="background-color: #ffffff"><font color="#0000ff"><br />
</font><font color="#333333">&lt;img src=&quot;图片地址&quot; style=&quot;filter:Gray&quot;&gt;</font></font></div>
<div><br />
或</div>
<div><br />
&lt;div style=&quot;filter:Gray ;width:宽;height:高&quot;&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div>效果预览:</div>
<div><font size="2" style="background-color: #ffffff"><img title="图片代码超链接文字特效代码3" height="338" alt="图片代码超链接文字特效代码3" src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" width="450" real_src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" style="filter: Gray" /></font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff" size="2" style="background-color: #ffffff">X光效果:</font></div>
<div><font size="2" style="background-color: #ffffff"><br />
&lt;img src=&quot;图片地址&quot; style=&quot;filter:Xray&quot;&gt;</font></div>
<div><br />
或</div>
<div><br />
&lt;div style=&quot;filter:Xray ;width:宽;height:高&quot;&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2">效果预览:</font></div>
<div><font size="2" style="background-color: #ffffff"><img title="图片代码超链接文字特效代码3" height="338" alt="图片代码超链接文字特效代码3" src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" width="450" real_src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" style="filter: Xray" /></font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff" size="2" style="background-color: #ffffff">色彩对换:</font></div>
<div><font size="2" style="background-color: #ffffff"><br />
&lt;img src=&quot;图片地址&quot; style=&quot;filter:Invert&quot;&gt;</font></div>
<div><br />
或</div>
<div><br />
&lt;div style=&quot;filter:Invert ;width:宽;height:高&quot;&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div><font size="2" style="background-color: #ffffff">效果预览:</font></div>
<div><font size="2" style="background-color: #ffffff"><img title="图片代码超链接文字特效代码3" height="338" alt="图片代码超链接文字特效代码3" src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" width="450" real_src="http://blog.sina.com.cn/pic/40135133ba958d5ceeb43" style="filter: Invert" /></font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#ff0000">4. 边框效果</font></div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff">发光效果：</font></div>
<div>&nbsp;<wbr></wbr></div>
<div>&lt;div style=&quot;filter:Glow(color=#4A7AC9,strength=15);width:滤镜宽;height:滤镜高&quot; align=center&gt;&lt;br&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div>代码说明：</div>
<div>发光:(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2<br />
滤镜高=图高+发光强度x2+10)</div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff">投影效果：</font></div>
<div>&nbsp;<wbr></wbr></div>
<div>&lt;div style=&quot;filter:Shadow(color=#4A7AC9,direction=135);width:滤镜宽;height:滤镜高&quot; align=center&gt;&lt;br&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div>代码说明：</div>
<div>投影:(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25)<br />
濾鏡高=图高40)</div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff">阴影效果：</font></div>
<div>&nbsp;<wbr></wbr></div>
<div>&lt;div style=&quot;filter:Dropshadow(color=#333333,offX=5,offY=5);width:滤镜宽;height:滤镜高&quot; align=center&gt;&lt;br&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div>代码说明：</div>
<div>阴影:(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+20)</div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff">模糊效果：</font></div>
<div>&nbsp;<wbr></wbr></div>
<div>&lt;div style=&quot;filter:Blur(direction=135);width:滤镜宽;height:滤镜高&quot; align=center&gt;&lt;br&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div>代码说明：</div>
<div>模糊:(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,濾鏡高=图高+30)</div>
<div>&nbsp;<wbr></wbr></div>
<div><font color="#0000ff">波形效果：</font></div>
<div>&nbsp;<wbr></wbr></div>
<div>&lt;div style=&quot;filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);width:滤镜宽;height:滤镜高&quot; align=center&gt;&lt;br&gt;&lt;img src=&quot;图片地址&quot;&gt;&lt;/div&gt;</div>
<div>&nbsp;<wbr></wbr></div>
<div>代码说明：</div>
<div>波形:(freq频率(&gt;0)strength振幅强度(&gt;0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度x2<br />
滤镜高=图高+振幅强度x2+10)</div>
</div>
<p>&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1439</link>
			<title><![CDATA[CSS之filter 在IE下可用，在firefox下不可用]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Tue,17 Aug 2010 14:31:08 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1439</guid>
		<description><![CDATA[一般来讲，使用以下代码即可实现背景的半透明效果。<br/>&lt;STYLE type=text/css&gt; <br/>&lt;!-- <br/>table{FILTER: Alpha(opacity=80);} <br/>--&gt; <br/>&lt;/STYLE&gt; <br/><br/><br/>但是这样的代码在火狐下却是不识别的，唯一的办法就是把背景图片改成半透明的png，以达到兼容目的]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1432</link>
			<title><![CDATA[网页设计中如何用CSS定义虚线]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Thu,24 Jun 2010 14:46:27 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1432</guid>
		<description><![CDATA[如何用CSS定义虚线？在CSS中定义虚线一般有两种方法:一种是定义DIV的CSS样式，另一种是通过hr的CSS样式实现。<br/><br/>我们首先需要了解，关于线条的CSS的两个样式：<br/>dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线<br/>dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线<br/><br/>水平虚线线条，我们可以用hr来实现，也可以定义一个div，将它的高度设为1px或其它你想要的高度。<br/><strong>CSS定义一条水平虚线hr的方法实例：</strong><br/><br/><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.javamilk.org/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp57854"><!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Strict//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34;>
<head>
<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; />
<title>www.csscssorg.com</title>
<style type=&#34;text/css&#34;>
<!--
hr {border:1px #cccccc dotted;}
-->
</style>
</head>
<body>
<hr size=&#34;1&#34; noshade=&#34;noshade&#34; />
</body>
</html></TEXTAREA><br/><INPUT onclick="runEx('temp57854')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp57854')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp57854')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong>CSS定义一条水平虚线div的方法实例：</strong>　<br/><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.javamilk.org/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp5920"><meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; />
<title>www.csscss.org</title>
<style type=&#34;text/css&#34;>
<!--
#aaa {border-top:1px dashed #cccccc;height: 1px;overflow:hidden;}
-->
</style>
</head>
<body>
<div id=&#34;aaa&#34;><a href=&#34;<a href="http://www.csscss.org/" target="_blank" rel="external">http://www.csscss.org/</a>&#34;>CSS在线</a></div>
</body>
</html></TEXTAREA><br/><INPUT onclick="runEx('temp5920')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp5920')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp5920')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong>需要你注意：</strong>hr定义虚线方法中CSS的定义：hr {border:1px #cccccc dotted;} 用了dotted属性。在div的定义虚线的方法中用了dashed属性。从表面上讲，两者没有明显的区别。但在不同的浏览器环境下，可能会存在一些差异。但这些都无关紧要了，因为大多数人看到的是一样的效果------虚线。<br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1416</link>
			<title><![CDATA[Photoshop把PSD网站模板切图为XHTML+CSS的网页]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Sat,08 May 2010 14:03:50 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1416</guid>
		<description><![CDATA[　　之前我们用photoshop设计过一个blog网页界面---用PS设计清爽博客网站界面，这次将会将会用photoshop将网页设计稿制作成HTML页面<br/><br/>　　现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码，这样我们就会得到一个完整的博客设计。<br/><br/><img src="http://www.javamilk.org/download.asp?id=27" border="0" alt=""/><br/><br/>　　在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。<br/><br/><img src="http://www.javamilk.org/download.asp?id=28" border="0" alt=""/><br/><br/>　　首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，然后选择大的背景图导出为web使用格式。<br/><br/>　　从第一印象上来讲，这个大图片很容易让人觉得他很大，所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已，这里需要你来拿捏文件的质量和整体的体积的平衡。（译者注：图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点，一般来讲背景图不必使用特别清晰的底图，增加体积却又吸引眼球影响阅读。）<br/><br/><img src="http://www.javamilk.org/download.asp?id=29" border="0" alt=""/><br/><br/><br/>　　接下来导出的是主体内容区，画出另一个大的选区，其重要包括整个中部面板——当然别忘记那些带有效果的地方比如阴影，半透明的边框等，都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域，所以选取应该直接延伸到顶部。<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=30" border="0" alt=""/><br/><br/>　　一般来讲允许网页垂直重复的话，只要选择中部区域一小列内容导出就可以，我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=31" border="0" alt=""/><br/><br/>　　下面来完成页脚部分，选择同样的宽度，然后高度要包含灰色渐变的图形。<br/><br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=32" border="0" alt=""/><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了导出侧边栏，主体区域现在暂时的使用垂直拉伸。<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=33" border="0" alt=""/><br/><br/>　　因为之前的设计，所以这个独立的侧边栏的图形将充分利用两个图片——上部是足够长的区域，以便容纳更多的内容防止超出设计的部分，另一个是一个小的底部，底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=34" border="0" alt=""/><br/><br/><br/>　　这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果。<br/><br/><img src="http://www.javamilk.org/download.asp?id=35" border="0" alt=""/><br/><br/><br/>　　下一步是薄的底部部分，这样侧边栏部分就完成鸟。<br/><br/><img src="http://www.javamilk.org/download.asp?id=36" border="0" alt=""/><br/><br/>　另一个导出的小的可自动伸缩部分的是导航栏的背景，它可以根据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来覆盖住不同颜色的背景，这样看起来会更~和谐~~~~<br/><br/><img src="http://www.javamilk.org/download.asp?id=37" border="0" alt=""/><br/><br/>　　文章部分在概念设计稿上是跟侧边栏有一样的边线效果，但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题，所以我们将会用纯粹的css代码来实现他的效果。<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=38" border="0" alt=""/><br/><br/>　　接下来就是使用了蓝色渐变的内容区（也就是放留言数继续阅读等的区域），这个地方也是导出一个瘦长的区域然后横向重复就能达到其效果。<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=39" border="0" alt=""/><br/><br/>　　小的评论气泡，箭头，rss标志和电子邮箱图标等，都随着logo一起单独的导出即可，最好使用png格式这样适应性更强——当然如果你确定放弃给ie6的用户使用或者浏览的话。<br/><br/><img src="http://www.javamilk.org/download.asp?id=41" border="0" alt=""/><br/><br/><br/>　　现在概念设定已经完整的被分成了独立的图片，五部分的框架被拆分成了13个图片文件。他们一共才95Kb，这么来看即使是拨号网络也能比较流畅的观看网页了。<br/><br/><img src="http://www.javamilk.org/download.asp?id=42" border="0" alt=""/><br/><br/><br/>　　一个html网页设置控制结构的布局是必须的，上面那段话你没必要自己写，随便查看一个网页的源文件都能找到。一个单独的css样式表是将包括视觉规则的设计。然后让html文件链接到这个新建的css样式表文件。<br/><br/><img src="http://www.javamilk.org/download.asp?id=44" border="0" alt=""/><br/><br/>　　我们将内容和背景放到一个含有ID的div的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说，直到CSS3才更广泛的支持第二个div在这个图像之上。<br/><br/>　　网站名字用H1的标签来控制，他也是logo的基础，上部导航和rss /电子邮件订阅选项是作为无序列表。<br/><br/><img src="http://www.javamilk.org/download.asp?id=45" border="0" alt=""/><br/><br/>　　接下来开始用CSS重新构建页面，清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器，内容和页脚的div也要使用适当的背景图片和风格设置。<br/><br/><img src="http://www.javamilk.org/download.asp?id=46" border="0" alt=""/><br/><br/>　　继续写CSS样式表，接下来的一些元素用代码写出来慢慢加上，建立一个无序列表然后加上合适的图片和颜色。<br/><br/><img src="http://www.javamilk.org/download.asp?id=47" border="0" alt=""/><br/><br/>　　到目前来讲就可以在浏览器里面看看啦～基本上的大型已经出来啦～logo啊导航啊内容区啊基本上已经颇具雏形鸟。<br/><br/><img src="http://www.javamilk.org/download.asp?id=48" border="0" alt=""/><br/><br/>　　接下来是在这个框架上渐渐丰满起来，用一个容器来搞定文章发布区，就像我们前面说的一样，这个地方我们不用图片只需要用代码就能搞定。<br/><br/><img src="http://www.javamilk.org/download.asp?id=49" border="0" alt=""/><br/><br/>　　文章发布区的边线和颜色以及文章标题和段落文字都继续用CSS的样式表写好（实在不行就照抄吧，囧rz）。对于网站开发来讲，大部分用 firefox的朋友有福了，这意味着我们可以用moz-border-radius这句话来让我们的页面有一个很漂亮的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。（不过貌似我记得IE下面也可以用css写出来圆角的说，就是比较麻烦，这里给一个参考来）<br/><br/><img src="http://www.javamilk.org/download.asp?id=50" border="0" alt=""/><br/><br/>　　然后在浏览器里面测试下啦～如果没写错的话那么就跟设计稿上的效果是一样的～这说明CSS彪悍的将ps设计稿里面背景颜色和边框的效果给实现了。<br/><br/><img src="http://www.javamilk.org/download.asp?id=51" border="0" alt=""/><br/><br/>　　然后继续完善html的结构，现在轮到侧边栏了。我们来看看如何在一个容器里面用两个背景图片实现滑动门效果来让侧边栏的大小随内容来控制。<br/><br/><img src="http://www.javamilk.org/download.asp?id=52" border="0" alt=""/><br/><br/>　　继续添加更多的CSS样式来控制html里面的元素（可怜的html沦落为css的傀儡…………我翻译累了纯属发泄这个……）比如字体的大小，颜色，种类等等（其实CSS也就这么些个本事了……）<br/><br/><img src="http://www.javamilk.org/download.asp?id=53" border="0" alt=""/><br/><br/>　　接下来就可以在浏览器里面看到侧边栏鸟～注意别让内容超过了图片的宽度，及时的截断下看看效果就好啦（毕竟只是html的～）<br/><br/><img src="http://www.javamilk.org/download.asp?id=54" border="0" alt=""/><br/><br/>记下来我们快速的搞定继续阅读和评论等这个位置的东东<br/><br/><img src="http://www.javamilk.org/download.asp?id=55" border="0" alt=""/><br/><br/>　　继续给这些元素添加样式，用一个特殊的class来给这个段落添加用继续阅读的肩头和评论气泡作为背景图<br/><br/><img src="http://www.javamilk.org/download.asp?id=56" border="0" alt=""/><br/><br/>　　搞定后又可以用浏览器YY下，重复的背景上面是坚实的文本啊！<br/><br/><img src="http://www.javamilk.org/download.asp?id=57" border="0" alt=""/><br/><br/>　　大体效果就这么搞定了，设计稿的内容基本上也都呈现出来了，这时候你可以换着浏览器和分辨率来看看有没有问题以及模拟链接的效果比如鼠标on啊 鼠标点击过啊等等效果。<br/><br/><img src="http://www.javamilk.org/download.asp?id=58" border="0" alt=""/><br/><br/>　　其实网页设计这玩意搞起来了就停不下来了。你必须在FF，opera，safari下面看看有没有问题，你看这不在IE下面就出问题了么？（好讨厌IE6……如果机器装了更高版本的ie的话，你可以试试ietester）<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=59" border="0" alt=""/><br/><br/>　　修改一些CSS样式表很快就能搞定这个问题，具体的参见上图。<br/><br/><img src="http://www.javamilk.org/download.asp?id=60" border="0" alt=""/><br/><br/>　　订阅的选项似乎总是在IE下面会有问题，这个只需要简单地加上 display: inline在列表中就能解决。<br/><br/><img src="http://www.javamilk.org/download.asp?id=62" border="0" alt=""/><br/><br/>　　改完这些问题后这个正在做的网站就恢复正常勒，像一个wordpress主题鸟，当然想要更多的东西必须在加入更多的代码，比如内页区域和评论区域等～<br/><br/><img src="http://www.javamilk.org/download.asp?id=63" border="0" alt=""/><br/><br/>　　当然如果每行代码都详细地解释得话，我估计我没写完各位看官就已经困倒了，所以发挥举一反三地精神就看上面得源文件吧！<br/><br/><br/><img src="http://www.javamilk.org/download.asp?id=64" border="0" alt=""/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1415</link>
			<title><![CDATA[网页切图、css命名规则]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Sat,08 May 2010 13:44:13 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1415</guid>
		<description><![CDATA[头：header<br/>内容：content/container<br/>尾：footer<br/>导航：nav<br/>侧栏：sidebar<br/>栏目：column<br/>页面外围控制整体布局宽度：wrapper<br/>左右中：left right center<br/>登录条：loginbar<br/>标志：logo<br/>广告：banner<br/>页面主体：main<br/>热点：hot<br/>新闻：news<br/>下载：download<br/>子导航：subnav<br/>菜单：menu<br/>子菜单：submenu<br/>搜索：search<br/>友情链接：friendlink<br/>页脚：footer<br/>版权：copyright<br/>滚动：scroll<br/>内容：content<br/>标签页：tab<br/>文章列表：list<br/>提示信息：msg<br/>小技巧：tips<br/>栏目标题：title<br/>加入：joinus<br/>指南：guild<br/>服务：service<br/>注册：regsiter<br/>状态：status<br/>投票：vote<br/>合作伙伴：partner<br/><br/><br/><br/><strong>(二)注释的写法:</strong><br/>/* Footer */<br/>内容区<br/>/* End Footer */<br/><br/><br/><br/><strong>(三)id的命名:</strong><br/><br/><strong>(1)页面结构</strong><br/>容器: container<br/>页头：header<br/>内容：content/container<br/>页面主体：main<br/>页尾：footer<br/>导航：nav<br/>侧栏：sidebar<br/>栏目：column<br/>页面外围控制整体布局宽度：wrapper<br/>左右中：left right center<br/><br/><strong>(2)导航</strong><br/><br/>导航：nav<br/>主导航：mainbav<br/>子导航：subnav<br/>顶导航：topnav<br/>边导航：sidebar<br/>左导航：leftsidebar<br/>右导航：rightsidebar<br/>菜单：menu<br/>子菜单：submenu<br/>标题: title<br/>摘要: summary<br/><br/><strong>(3)功能</strong><br/><br/>标志：logo<br/>广告：banner<br/>登陆：login<br/>登录条：loginbar<br/>注册：regsiter<br/>搜索：search<br/>功能区：shop<br/>标题：title<br/>加入：joinus<br/>状态：status<br/>按钮：btn<br/>滚动：scroll<br/>标签页：tab<br/>文章列表：list<br/>提示信息：msg<br/>当前的: current<br/>小技巧：tips<br/>图标: icon<br/>注释：note<br/>指南：guild<br/>服务：service<br/>热点：hot<br/>新闻：news<br/>下载：download<br/>投票：vote<br/>合作伙伴：partner<br/>友情链接：link<br/>版权：copyright<br/><br/><strong>(四)class的命名:</strong><br/><br/>(1)颜色:使用颜色的名称或者16进制代码,如<br/>.red { color: red; }<br/>.f60 { color: #f60; }<br/>.ff8600 { color: #ff8600; }<br/>(2)字体大小,直接使用&#34;font+字体大小&#34;作为名称,如<br/>.font12px { font-size: 12px; }<br/>.font9pt {font-size: 9pt; }<br/>(3)对齐样式,使用对齐目标的英文名称,如<br/>.left { float:left; }<br/>.bottom { float:bottom; }<br/>(4)标题栏样式,使用&#34;类别+功能&#34;的方式命名,如<br/>.barnews { }<br/>.barproduct { }<br/><br/>注意事项:<br/><div class="UBBPanel quotePanel"><div class="UBBTitle"><img src="http://www.javamilk.org/images/quote.gif" style="margin:0px 2px -3px 0px" alt="引用内容"/> 引用内容</div><div class="UBBContent">1.一律小写;<br/>2.尽量用英文;<br/>3.不加中杠和下划线;<br/>4.尽量不缩写，除非一看就明白的单词.</div></div><br/><br/>主要的 master.css<br/>模块 module.css<br/>基本共用 base.css<br/>布局，版面 layout.css<br/>主题 themes.css<br/>专栏 columns.css<br/>文字 font.css<br/>表单 forms.css<br/>补丁 mend.css<br/>打印 print.css<br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1400</link>
			<title><![CDATA[java生成jpeg/png图片时，设置图片质量]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Wed,07 Apr 2010 16:02:05 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1400</guid>
		<description><![CDATA[<div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code69812);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.javamilk.org/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code69812>import&nbsp;&nbsp; java.awt.BasicStroke;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.awt.Color;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.awt.Graphics2D;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.awt.RenderingHints;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.awt.image.BufferedImage;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.io.File;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.io.IOException;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.util.Iterator;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; java.util.Random;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;import&nbsp;&nbsp; javax.imageio.*;&nbsp;&nbsp; <br/>&nbsp;&nbsp;import&nbsp;&nbsp; javax.imageio.stream.ImageOutputStream;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;public&nbsp;&nbsp; class&nbsp;&nbsp; ImageIOTest&nbsp;&nbsp; {&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;&nbsp; static&nbsp;&nbsp; void&nbsp;&nbsp; main(String[]&nbsp;&nbsp; args)&nbsp;&nbsp; throws&nbsp;&nbsp; IOException&nbsp;&nbsp; {&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;&nbsp; width&nbsp;&nbsp; =&nbsp;&nbsp; 800;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;&nbsp; height&nbsp;&nbsp; =&nbsp;&nbsp; 800;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BufferedImage&nbsp;&nbsp; image&nbsp;&nbsp; =&nbsp;&nbsp; new&nbsp;&nbsp; BufferedImage(&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width,&nbsp;&nbsp; height,&nbsp;&nbsp; BufferedImage.TYPE_INT_RGB);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Graphics2D&nbsp;&nbsp; g2d&nbsp;&nbsp; =&nbsp;&nbsp; image.cr&#101;ateGraphics();&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g2d.setColor(Color.white);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g2d.fillRect(0,&nbsp;&nbsp; 0,&nbsp;&nbsp; width,&nbsp;&nbsp; height);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,&nbsp;&nbsp;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RenderingHints.VALUE_ANTIALIAS_ON);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Random&nbsp;&nbsp; random&nbsp;&nbsp; =&nbsp;&nbsp; new&nbsp;&nbsp; Random();&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;&nbsp; (int&nbsp;&nbsp; i&nbsp;&nbsp; =&nbsp;&nbsp; 0;&nbsp;&nbsp; i&nbsp;&nbsp; &lt;&nbsp;&nbsp; 500;&nbsp;&nbsp; i++)&nbsp;&nbsp; {&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g2d.setColor(new&nbsp;&nbsp; Color(random.nextInt(256),&nbsp;&nbsp;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;random.nextInt(256),&nbsp;&nbsp; random.nextInt(256)));&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g2d.setStroke(new&nbsp;&nbsp; BasicStroke(random.nextFloat()&nbsp;&nbsp; *&nbsp;&nbsp; 5));&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;&nbsp; r&nbsp;&nbsp; =&nbsp;&nbsp; random.nextInt(width&nbsp;&nbsp; /&nbsp;&nbsp; 2);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g2d.drawArc(random.nextInt(width),&nbsp;&nbsp; random.nextInt(height),&nbsp;&nbsp;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r,&nbsp;&nbsp; r,&nbsp;&nbsp; 0,&nbsp;&nbsp; 360);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g2d.dispose();&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageWriter&nbsp;&nbsp; writer&nbsp;&nbsp; =&nbsp;&nbsp; null;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageTypeSpecifier&nbsp;&nbsp; type&nbsp;&nbsp; =&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageTypeSpecifier.cr&#101;ateFromRenderedImage(image);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Iterator&nbsp;&nbsp; iter&nbsp;&nbsp; =&nbsp;&nbsp; ImageIO.getImageWriters(type,&nbsp;&nbsp; &#34;jpg&#34;);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;&nbsp; (iter.hasNext())&nbsp;&nbsp; {&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;writer&nbsp;&nbsp; =&nbsp;&nbsp; (ImageWriter)iter.next();&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;&nbsp; (writer&nbsp;&nbsp; ==&nbsp;&nbsp; null)&nbsp;&nbsp; {&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IIOImage&nbsp;&nbsp; iioImage&nbsp;&nbsp; =&nbsp;&nbsp; new&nbsp;&nbsp; IIOImage(image,&nbsp;&nbsp; null,&nbsp;&nbsp; null);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageWriteParam&nbsp;&nbsp; param&nbsp;&nbsp; =&nbsp;&nbsp; writer.getDefaultWriteParam();&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;param.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;&nbsp; (int&nbsp;&nbsp; i&nbsp;&nbsp; =&nbsp;&nbsp; 0;&nbsp;&nbsp; i&nbsp;&nbsp; &lt;&nbsp;&nbsp; 10;&nbsp;&nbsp; i++)&nbsp;&nbsp; {&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;param.setCompressionQuality((float)&nbsp;&nbsp; ((i+1)&nbsp;&nbsp; /&nbsp;&nbsp; 10.0));&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageOutputStream&nbsp;&nbsp; outputStream&nbsp;&nbsp; =&nbsp;&nbsp;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageIO.cr&#101;ateImageOutputStream(new&nbsp;&nbsp; File(&#34;C:/test&#34;&nbsp;&nbsp; +&nbsp;&nbsp; (i+1)&nbsp;&nbsp; +&nbsp;&nbsp; &#34;.jpg&#34;));&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;writer.setOutput(outputStream);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;writer.write(null,&nbsp;&nbsp; iioImage,&nbsp;&nbsp; param);&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; <br/>&nbsp;&nbsp;}&nbsp;&nbsp; <br/>&nbsp;&nbsp;</div></div><br/><br/><br/>主要是通过<br/>javax.imageio.plugins.jpeg.JPEGImageWriteParam&nbsp;&nbsp; <br/>&nbsp;&nbsp;public&nbsp;&nbsp; void&nbsp;&nbsp; setCompressionQuality(float&nbsp;&nbsp; quality)&nbsp;&nbsp; <br/>来设置图片质量。<br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1399</link>
			<title><![CDATA[如何用PS切图和输出网页？]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Wed,07 Apr 2010 15:17:09 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1399</guid>
		<description><![CDATA[<p>关于PHOTOSHOP切图的问题，其实不是什么大问题，可是最近很多人都在问我。干脆写个教程吧~~（以下步骤均在PS7中进行，PS6版本和7略有不同，请自行琢磨） <br />
<br />
切图的好处，第一，是要控制单张图片的大小。把大图片切割成几个小图片，有利于浏览者尽快看到你的网页。第二，为了使排版不受到网页制作软件的限制。 <br />
<br />
我们先用PS做好以下图片（这个你爱怎么做就怎么做啦，在PS里没有排版的限制，不用考虑太多的） <br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/01.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/01.gif" /></a><br />
【图8.1】<br />
图片做好了，我们开始切图，使用PS中的切割工具： <br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/02.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/02.gif" /></a><br />
【图8.2】 <br />
对于画面的切割，总体的原则是要保证每个切片控制在一定大小内（一般10K以内）。注意我上面切割的图，标号（1）的区域是菜单，标号（2）的区域是打算放内框架的部分。在下面的部分里，我们将学到这两个区域的用途。 <br />
切好图片之后，我们通过菜单的&ldquo;文件&rdquo;－&ldquo;存储为web所用格式&rdquo;，打开&ldquo;存储为web所用格式&rdquo;窗口。 <br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/03.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/03.gif" /></a><br />
【图8.3】<br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/04.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/04.gif" /></a><br />
【图8.4】<br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/05.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/05.gif" /></a><br />
【图8.5】<br />
<br />
JPG格式一般适用于颜色较多，尤其是有渐变色的图片，一般品质为60就可以。GIF格式适用于颜色较少的图片，颜色可以选择128、64、32、16等。 <br />
选择切片格式和品质的原则，就是在浏览器中看起来和压缩前变化不大。点击【图8.6】中的小三角，选择弹出菜单中的&ldquo;编辑输出设置&rdquo;。弹出【图8.7】的输出设置窗口。 <br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/06.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/06.gif" /></a><br />
【图8.6】<br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/07.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/07.gif" /></a><br />
【图8.7】<br />
<br />
在【图8.7】中，其他的设置都不用管。点击&ldquo;下一个&rdquo;，切换到【图8.7】的页面， 注意这里的&ldquo;将图像放进文件夹&rdquo;。这个选项的意思就是，如果你把图片的html文件保存为example.html，那么切掉的小图片就保存在于example.html同目录的images文件夹中。大家试试看就知道了。<br />
最后，点击【图8.3】中的&ldquo;存储&rdquo;，就跳出保存文件的窗口了。我们现在把文命名为example.html，存放在合适的位置。 <br />
<br />
好，现在关闭PS，打开DW。打开刚才保存的example.html文件。我们可以看到，其实这个图片是被保存在表格中的。现在我们需要重新回顾【图8.2】中的两个切割区域了。 <br />
区域（1），这个是菜单，是要在各个菜单选项上做上链接的。选择区域（1）的图片，在属性框里，我们选择&ldquo;热点切割&rdquo;工具，在图片上划出热点链接区域。见【图8.9】。<br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/08.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/08.gif" /></a><br />
【图8.8】<br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/09.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/09.gif" /></a><br />
【图8.9】<br />
<br />
【图8.9】就是区域（1）被热点切割后在DW中显示的样子。选择蓝色的热点，就可以在属性中定义超级链接、替换文本等。<br />
<br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/10.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/10.gif" /></a><br />
【图8.10】<br />
然后我们看区域（2），我们注意到，其实这个区域图片是一张纯白色的图片，没有任何内容，我们可以直接把这张图片删去。删掉后就可以在单元格中直接输入文字了。这里要注意的是，不要轻易使用回车，否则可能会打乱整个表格的。<br />
<a target="_blank" href="http://lain1978.com/tutorial/images/ps/11.gif"><img class="insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://lain1978.com/tutorial/images/ps/11.gif" /></a><br />
【图8.11】<br />
<br />
一般来说，我们习惯于在区域（2）做一个内框架，就是把一个网页嵌在内部，并且有滚动条。 <br />
查看example.html的源代码，找到区域（2）这里的代码部分， <br />
&lt;TD ROWSPAN=5&gt; <br />
&lt;IMG SRC=&quot;images/example_4.gif&quot; WIDTH=28 HEIGHT=250 ALT=&quot;&quot;&gt;&lt;/TD&gt; <br />
&lt;TD ROWSPAN=4&gt;&lt;/TD&gt; <br />
&lt;TD ROWSPAN=5&gt; <br />
&lt;IMG SRC=&quot;images/example_6.gif&quot; WIDTH=42 HEIGHT=250 ALT=&quot;&quot;&gt;&lt;/TD&gt; <br />
<br />
在&lt;TD ROWSPAN=4&gt;和&lt;/TD&gt;间插入内框架的代码： <br />
&lt;iframe <br />
border=1 frameborder=0 framespacing=0 height=100％ marginheight=0 <br />
marginwidth=0 name=new_date noResize scrolling=yes <br />
src=&quot;news.html&quot; width=100% vspale=&quot;0&quot;&gt;&lt;/iframe&gt; <br />
<br />
<br />
其中，news.html就是内部框架要应用的网页。你可以按照实际情况来修改。内框架的边框大小、颜色、是否显示滚动条等都可以设置。对滚动条定义一下风格，就可以于这个图片统一了（IE5.5以上支持）。</p>]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1398</link>
			<title><![CDATA[PS切图不生成分隔符的方法]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Wed,07 Apr 2010 15:10:18 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1398</guid>
		<description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 今天试了很多次,但发现都存在很多分隔符,再用DW做的时候会遇到很多麻烦. <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 后来在网上搜索了一下,看到有人说到一点: 分隔符--&gt;总不. <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 然后就去PS里面找这个选项,后来终于找到了. <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 操作如下,文件--&gt;存储为WEB所用格式--&gt;点击&#34;存储&#34;<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在&#34;设置&#34;选择&#34;其他&#34;,跳出如下的框.按照如下设置一下,看到了吧,这里有了&#34;切片&#34;选项,并且有了分隔符的&#34;总不&#34;.这样就可以了,点确定后,就可以生成HTML文件和一个image文件夹. <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是个好方法哦,自己发现的呵呵,可以去试下喔~<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;但是发现光这样还是不对的,(出现很多空白处,很乱)因为发现不光光是分隔符的问题,还有个问题是我切的不好呀,参考了一个文章,终于恍然大悟,原来应该这样切.]]></description>
		</item>
		
			<item>
			<link>http://www.javamilk.org/article.asp?id=1314</link>
			<title><![CDATA[li去点]]></title>
			<author>blurxx@yahoo.cn(Java伴侣)</author>
			<category><![CDATA[Css&amp;Ps]]></category>
			<pubDate>Sun,29 Nov 2009 15:16:02 +0800</pubDate>
			<guid>http://www.javamilk.org/default.asp?id=1314</guid>
		<description><![CDATA[<div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code11647);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.javamilk.org/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code11647>list-style-type:none;</div></div>]]></description>
		</item>
		
</channel>
</rss>
