<?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>The7in &#187; 教程</title>
	<atom:link href="http://the7.in/tag/%e6%95%99%e7%a8%8b/feed/" rel="self" type="application/rss+xml" />
	<link>http://the7.in</link>
	<description>建筑师？我，在路上……</description>
	<lastBuildDate>Wed, 01 Sep 2010 04:24:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>给博客中的图片带个套</title>
		<link>http://the7.in/dingyi-tupian-waikuang/</link>
		<comments>http://the7.in/dingyi-tupian-waikuang/#comments</comments>
		<pubDate>Tue, 09 Feb 2010 04:11:55 +0000</pubDate>
		<dc:creator>王士奇</dc:creator>
				<category><![CDATA[学习随笔]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[博客]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://the7.in/dingyi-tupian-waikuang/</guid>
		<description><![CDATA[几乎我的博客中每篇文章中都有大量图片出现，在希望显示给网友的同时又能够很好的被搜索引擎抓取。于是一直都想给图片加一个边框，使图片的边界明显一些。试用过好几种方法都不尽人意，最后在万戈的博客中找到了最好的方法。





<span class="readmore"><a href="http://the7.in/dingyi-tupian-waikuang/" title="给博客中的图片带个套">阅读全文——共851字</a></span>]]></description>
			<content:encoded><![CDATA[<p>几乎我的博客中每篇文章中都有大量图片出现，在希望显示给网友的同时又能够很好的被搜索引擎抓取。于是一直都想给图片加一个边框，使图片的边界明显一些。试用过好几种方法都不尽人意，最后在<a href="http://wange.im/" target="_blank">万戈</a>的博客中找到了最好的方法。</p>
<p><img style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" title="david" src="http://the7.in/wp-content/uploads/2010/02/david.jpg" border="0" alt="david" width="468" height="474" /></p>
<p><span id="more-1405"></span></p>
<h2>CSS代码</h2>
<blockquote><p>通过一下代码，可以实现对图片外框的设置。</p>
<blockquote>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">.aligncenter<span style="color: #00AA00;">,</span>
div<span style="color: #6666ff;">.aligncenter</span> <span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.alignleft</span> <span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.alignright</span> <span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.wp-caption</span> <span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#f3f3f3</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">padding-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">4px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
   <span style="color: #808080; font-style: italic;">/* optional rounded corners for browsers that support it */</span>
   -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
   -khtml-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
   -webkit-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
   border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.wp-caption</span> img <span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.wp-caption</span> p<span style="color: #6666ff;">.wp-caption-text</span> <span style="color: #00AA00;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">11px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">17px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">4px</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
   <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

</blockquote>
</blockquote>
<h2>HTML代码</h2>
<blockquote><p>定义了样式之后，如何在网页中调用呢？通过Firefox 查看了万戈的页面代码，找到如下代码，已实现对图片的定义。</p>
<blockquote><p>这是对整个图片定义DIV，其中的宽度可以根据自己的版面来调整。</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;wp-caption alignnone&quot;</span> style<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;width: 480px;&quot;</span><span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></div></div>

</blockquote>
<blockquote><p>这是对图框内位置定义，用你希望显示的文章代替那几个“X”</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>p <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;wp-caption-text&quot;</span><span style="color: #339933;">&gt;</span>XXXXX<span style="color: #339933;">&lt;/</span>p<span style="color: #339933;">&gt;</span></pre></div></div>

</blockquote>
</blockquote>
<h2>示例图片</h2>
<div class="wp-caption alignnone" style="width: 480px;">
<p><img style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" title="david" src="http://the7.in/wp-content/uploads/2010/02/david.jpg" border="0" alt="david" width="468" height="474" /></p>
<p class="wp-caption-text">感谢<a href="http://jlmlz.blog.163.com">K</a>提供图片</p>
</div>
<h2>相关链接</h2>
<blockquote><p><a href="http://wange.im/caption-classes-for-picture.html" target="_blank">Life Studio</a></p>
<p>用caption属性给图片加描述边框</p>
<p><a href="http://codex.wordpress.org/CSS#WordPress_Generated_Classes" target="_blank">WordPress</a></p>
<p>Codex&#8211;CSS&#8211;WordPress Generated Classes</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://the7.in/dingyi-tupian-waikuang/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>别在键盘上浪费你的时间了</title>
		<link>http://the7.in/how-to-use-the-cajviewer/</link>
		<comments>http://the7.in/how-to-use-the-cajviewer/#comments</comments>
		<pubDate>Fri, 15 Jan 2010 14:46:51 +0000</pubDate>
		<dc:creator>王士奇</dc:creator>
				<category><![CDATA[资料共享]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[下载]]></category>
		<category><![CDATA[分享]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://the7.in/how-to-use-the-cajviewer/</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160; 很久之前在人人网上看到一个教人将打印稿变成电子稿的教程，一时兴起，留言一条，介绍了一个更加方便可行的方法。后来几位童鞋回复询问，鉴于人人网的留言方式太过于老土，同时为了解放大家更多的时间，在此特写一篇教程。如果觉得确实好用，请帮忙推广，谢谢。

<span class="readmore"><a href="http://the7.in/how-to-use-the-cajviewer/" title="别在键盘上浪费你的时间了">阅读全文——共960字</a></span>]]></description>
			<content:encoded><![CDATA[<p>&#160;&#160;&#160;&#160;&#160;&#160; 很久之前在人人网上看到<a href="http://blog.renren.com/blog/231598084/431207938#id1394638398" target="_blank">一个教人将打印稿变成电子稿的教程</a>，一时兴起，留言一条，介绍了一个更加方便可行的方法。后来几位童鞋回复询问，鉴于人人网的留言方式太<font color="#ff0000">过于老土</font>，同时为了解放大家更多的时间，在此特写一篇教程。如果觉得确实好用，请<font color="#ff0000">帮忙推广</font>，谢谢。</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="how-to-use-the-CAJViewer-00" border="0" alt="how-to-use-the-CAJViewer-00" src="http://the7.in/wp-content/uploads/2010/01/howtousetheCAJViewer00.jpg" width="468" height="250" /> </p>
<p> <span id="more-1250"></span><br />
<h2>
<p>快安装CAJViewer 吧</p>
</h2>
<blockquote><p><font color="#ff0000">CAJViewer</font> 是一免费软件，可以完全替代 ，可以在<a href="http://www.cnki.net/software/xzydq.htm" target="_blank">中国知网</a>下载此软件，大小为30M。</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="how-to-use-the-CAJViewer-01" border="0" alt="how-to-use-the-CAJViewer-01" src="http://the7.in/wp-content/uploads/2010/01/howtousetheCAJViewer01.jpg" width="450" height="328" /></p>
</blockquote>
<h2>
<p>如何得到我们想要的文字</p>
</h2>
<blockquote><p>下载、安装不是我们的目的，学习使用也不是我们的目的，我们做这一切仅仅是为了得到结果。</p>
<p>为了证明此软件是真正的强大，我们用一个里面的文字模式以图片存在的PDF文档来测试（请大家自行思考问什么）。</p>
<p>我们看看我们用Adobe Reader 中的文字选择工具会出现什么样的情况！（下图）</p>
<blockquote><p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="how-to-use-the-CAJViewer-02" border="0" alt="how-to-use-the-CAJViewer-02" src="http://the7.in/wp-content/uploads/2010/01/howtousetheCAJViewer02.jpg" width="450" height="278" /> </p>
<p>结果是无法作为文字选取。当然，就算你用专业版也是会出现同样的情况。</p>
</blockquote>
<p>那么我们来看看CAJViewer 做的到吗？</p>
<blockquote><p>1. 我们使用工具来框选你想要得到的文字。</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="how-to-use-the-CAJViewer-03" border="0" alt="how-to-use-the-CAJViewer-03" src="http://the7.in/wp-content/uploads/2010/01/howtousetheCAJViewer03.jpg" width="450" height="244" /> </p>
<p>2. 看看它给了你怎样的惊喜。</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="how-to-use-the-CAJViewer-04" border="0" alt="how-to-use-the-CAJViewer-04" src="http://the7.in/wp-content/uploads/2010/01/howtousetheCAJViewer04.jpg" width="451" height="286" /> </p>
<p>3. 复制下来吧，粘贴到你的word 文档里面吧，当然，不用忘记检查是否有小错误。</p>
</blockquote>
<p>大家要记住，CAJViewer 只能识别PDF格式的文件中的文字，如果转将你的图片转换成PDF应该就不用我再写了吧。</p>
</p>
</blockquote>
<p>&#160;</p>
<h2>
<p>关于那篇被广为流传的教程</p>
</h2>
<blockquote><p>50000+的阅读，10000+的分享，一篇如此难以理解的文章居然被这么多的人顶礼膜拜。我不得不去深思，大家到底有没有真正的试验过这样的方法的可操作性？</p>
<p>从文字的题目<a href="http://blog.renren.com/blog/231598084/431207938#id1394638398" target="_blank">《办公室——教你如何把打印稿变成电子稿（太牛啦！！你打一天的字都比不上她2分钟！！人手一份，留着以后用哈！）》</a>我已经得到我想要的答案了。</p>
<p>现在<font color="#ff0000">流行长标题</font>，由于生活节奏的加快，大家并不会再向从前那样认真的关注文章的内容，通常草草扫过标题就将文章收藏或者关闭。如此一来，所以标题吸引人的都成为了高点击率的，而那些可能有价值但是标题老套的文章却被深深的压在了最低处。</p>
<p>我们看的是内容，学的是知识，不是在一个收藏一次分享之后，就拥有了知识。而且，我们草率的动作，会给其他的人带来不必要的麻烦。为什么？试问，有多少看到那篇文章的童鞋，是真正的觉得文章有用而不是看到分享的人多了点击的人多了后认为此文章一定是好文章而收藏分享的呢？</p>
<p><font color="#ff0000">网络是虚拟的，但我们同样需要责任感</font>。感谢大家看了我这么就的唠叨，欢迎常来看看。也欢迎给我一些意见和建议。</p>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://the7.in/how-to-use-the-cajviewer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
