Wednesday, 14. February 2007, 08:35:55
Code, CSS
现在大部分论坛、Blog系统都支持段落缩进，但不知为何Opera迟迟不肯加入这一功能，这样在输入大段大段的文字时会显得非常不方便。不过，在Opera加入之前，我们不妨用CSS的方法来实现段落缩进。
首先在Blog的CSS文件里加入下面的代码：
.indent {
margin: 0 20px 0 20px;
}
然后把文章里你想要缩进段落的文字加上这些代码：
<div class='indent'> 一些文字................ </div>
由于加入HTML代码会打乱文章的排版，所以还要用下面的代码来代替文章里的回车：
<br></br>
当然了，手动加入代码的话非常麻烦，我们不妨在opera的菜单文件的[Edit Widget Popup Menu]段下加入下面的代码：
Item, "段落缩进"=Cut & Insert, "<div class='indent'>" & Paste & Insert, "</div>"
这样我们就可以直接通过右键菜单加入代码。
下面是一个范例：
FAQ：
<br></br>
<div class='indent'>Q5. 我怎样启动/停止服务?
<div class='indent'>A1.有两个函数集能帮助你控制服务:
<br></br>
<div class='indent'>SumTingWong制作的ServiceControl.au3,包含的函数有:
<div class='indent'>_StartService()<br></br>
_StopService()<br></br>
_ServiceExists()<br></br>
_ServiceRunning()<br></br>
_CreateService()<br></br>
_DeleteService()<br></br></div>
</div>
<br></br>
<div class='indent'>CatchFish制作的_NTServices.au3,包含的函数有:
<div class='indent'>_ServiceStart()<br></br>
_ServiceStop()<br></br>
_ServiceStatus()<br></br>
_ServicePause()<br></br></div>
</div></div></div>
效果：
FAQ：
Q5. 我怎样启动/停止服务?
A1.有两个函数集能帮助你控制服务:
SumTingWong制作的ServiceControl.au3,包含的函数有:
_StartService()
_StopService()
_ServiceExists()
_ServiceRunning()
_CreateService()
_DeleteService()
CatchFish制作的_NTServices.au3,包含的函数有:
_ServiceStart()
_ServiceStop()
_ServiceStatus()
_ServicePause()
Saturday, 11. November 2006, 14:29:22
CSS笔记, CSS, Code
来这里的朋友可能已经发现了，鼠标在划过Blog搜索框处时会有很好看的颜色变化效果，实现的代码如下：
/* 美化输入框和文字框 */
input, textarea{
border-width: 1px; /*边框宽1像素*/
border-style: solid; /*边框样式为实线*/
border-color: #CCC #EEE #EEE #CCC; /*边框颜色,表现为凹陷效果*/
background-color: #FCFCFC; /*背景色*/
}
/* 输入框激活和聚焦时的效果 */
input:hover,input:focus{
background: #fff9ed;/*背景色*/
}
如果你仅仅想让Blog搜索框实现这样的效果的话,只需加入下面的代码:
#searchbox {
border-width: 1px;
border-style: solid;
border-color: #CCC #EEE #EEE #CCC;
background-color: #FCFCFC;
}
#searchbox:hover,#searchbox:focus{
background: #fff9ed;
}
注意:IE6无法显示这种效果
Saturday, 11. November 2006, 12:10:26
Code, CSS笔记, CSS
这是一个有趣的链接效果，当你把鼠标移到链接上时，链接下会出现一道流动的线条。
点这里查看示范效果你只需在CSS文件中加入下面的代码就可以实现这个效果：
a:link {
color: #C37108;
white-space: nowrap;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #C37108;
}
a:hover {
text-decoration: none;
background-image: url(http://files.myopera.com/z8519312/images/animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
}
a:active {
text-decoration: none;
}
Saturday, 4. November 2006, 10:43:30
CSS笔记, CSS
在编写CSS时，Opera和IE的表现总会有太多的差异，如果你更满意IE的显示效果的话，可以在CSS文件里直接针对Opera另写一段代码，格式为：
@media screen and (min-width:0px){
选择符 {
样式
}
选择符 {
样式
}
}
由于上面的代码只能被Opera读到，而其他浏览器只会将其视为无效的代码而忽略掉，所以我们可以将其作为Opera的
hack来使用。
Sunday, 17. September 2006, 07:20:53
CSS, Design, Template
趁周末我又做个了模板。这次我采用了node33的设计——
TerraFirma，然后将其改为Opera Blog模板。这个模版不需要修改顶图，大家可以直接拿去用，另外为了美观，我将topbar隐藏了，应该不会产生太大麻烦。不过留言栏外框出了点问题，由于宽度不相符，留言栏文字和外框都出现了错位情况，只好暂时去掉外调，下周再抽时间调整。还有顶图文件太大了，有整整90k，还要抽时间压缩一下。
最后，按照原设计作者的声明，你可以随意使用和修改此设计作品。
效果图：
下载：TerraFirma10.1.更新改了又改，终于改得基本正常了
TerraFirma_3
Sunday, 10. September 2006, 06:51:18
CSS, Translations
使用CSS的好处之一是你可以不通过使用标签（
markup）就能很好地控制页面。但是CSS也赢得了一个不好的名声——不易学习，尤其是对于那些刚刚接触到这门语言的初学者们。这是因为有大量不同的网页布局方法。似乎每一个CSS作者都有自己独特的方法去建立多列设计（multicolumn layouts），而很多初学CSS的人也喜欢使用一些自己不明白工作原理的技术。“黑匣子”型布局方式虽然可以立竿见影，但对你的学习很有害。
所有的这些CSS布局技术都建立在3个最基本的概念上：定位（positioning）、浮动（floating）和边距操作（margin manipulation）。不同的技术其实并不是真的不同，只要你能理解核心的概念，你就能轻易地做出你自己的设计。
在这一节，你将学习到如何把网页内容居中显示。
Read more...
Wednesday, 30. August 2006, 00:57:54
CSS, Design, Translations
原文：http://www.w3.org/QA/Tips/png-gif
一、GIF VS PNG 这次我们将会探讨这两种经常用于显示简单图片、logo的主要图像格式：
- GIF（代表Graphics Interchange Format）于上世纪80年代末被开发出来，直到今天仍然被广泛地使用。
- PNG（Portable Network Graphics）在1995年左右被开发出来，在1996年被W3C推荐使用，并在1998年为大部分的浏览器所支持。
GIF GIF格式采用一种叫LZW的算法来压缩文件，LZW算法能在保持图像色彩的同时减少文件体积。
GIF的优势在于它被广泛的支持并经常作为简单图片的默认格式。与其它格式相比较（尤其是PNG），GIF并不具有太多的技术优势，不过在互联网发展的最初几年里，对PNG的支持刚刚开始，相对于PNG来说GIF是一个更加安全的选择，可能在这篇文章写下来的时候GIF仍然是个更安全的选择，虽然GIF并不安全很多。
环绕在GIF格式周围的一个问题就是优利系统公司对LZW算法的版权保护。在美国LZW的版权将于2003年6月20日到期，与此同时在加拿大、法国、意大利、德国、英国和日本LZW的版权保护则已经过期。
PNG PNG是一种无损压缩、轻便、更易储存的可扩展文件格式。PNG没有像GIF那样的版权保护的限制。PNG支持索引颜色、灰度和真彩色，同时也能对alpha通道提供额外支持。PNG的图像位数可以达到16位。
从网络角度来说，PNG相对于GIF有三点优势：
- alpha通道（可变透明度）
- 跨平台伽玛修正（控制图像亮度）和颜色修正
- 双重空间间隔（一种改进的图像显示方法）
同样的，在压缩图片方面PNG仍比GIF优秀（通常情况下压缩比要高上5%至25%）
不过有些情况仍需要注意，老浏览器或者一些特殊的功能不能很好的支持PNG。如果你想了解不同浏览器对PNG的支持程度，你可以查看下面的文档：
二、相关资料、链接：
WIDGETIZE