分类： 设计开发

为了哀悼日，网页颜色黑白CSS代码

Wolfit 12 条评论

昨天又是哀悼日，全国停止一些娱乐活动，哀悼在舟曲泥石流中死去的生命。

如果没有记错，这已经是继2008年“5·12”地震以来的第三次哀悼日了，默默的感觉到以后的哀悼日可能会越来越多，所以找来这些代码，以备不时之需。

以下是CSS滤镜代码，两种都行，如果你还不知道添加在哪里，就请跳过这篇文章好了。

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}  

*{filter:gray; color:gray;}  

网页标准的协议也很重要，下面的标准最常用，否则可能无效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

有一些网站中flash的颜色不能被CSS滤镜控制，可以在flash代码的<object>和</object>之间插入

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

PS：以上CSS滤镜代码可能只在IE下有效，其他浏览器未验证。

网页顺利通过W3C验证的心得

Wolfit 13 条评论

闲来无事，把自己的几个小站进行了W3C标准的验证，修正了一些错误，以对得起网页上W3C的标志，下面是自己在验证过程中遇到的问题。

一、如果你的html是手写的，千万别把单词拼错，我有一次把content拼成了contact，相当低级的错误。

二、闭合所有标签。

  1. input标签也要以/结尾，<input type=”text” name=”size” id=”size” value=”” size=”10″ />
  2. <br />
  3. <img src=”” alt=”” />

三、如果<form></form>配合<table></table>使用，要把<form></form>写在外面。

<form>
<table>
<tr>
<td></td>
</tr>
</table>
</form>

继续阅读

Picasa 网络相册1.3 for Z-Blog 1.8

Wolfit 25 条评论

Picasa Web目前被完全屏蔽，无法正常访问，请停止下载使用该插件！（2010年11月27日）

由于之前Picasa在国内被“拦截”，导致包括我在内的用户都无法使用该网络相册服务，相应的，这个调用Picasa Api的相册插件处于死亡状态。前些天收到一封垃圾邮件，发现邮件里的一张可以正常显示的图片正是来自picasa，然而其域名来自日本，随即登录Google日本，发现Picasa竟然可以完全访问，同时可以完全访问的还有Google韩国。这就让我有了让这个插件复活的资本。

通过修改hosts可以正常访问Picasa Web，对Picasa情有独钟的同学可以通过修改hosts的方法继续使用这个插件。附上修改hosts的方法在下面的评论中。（2011年7月21日）

新的版本还是不用Picaza了，感觉不伦不类的，而且容易造成误解，干脆就叫Picasa网络相册，同时插件的ID修改为PicasaWeb，版本号继承之前的，现在为1.3。

update：

  1. 使用Google日本的Picasa，使得服务正常
  2. 修正了分类页面下“在Google Picasa Web中查看”的链接bug
  3. 分类页面新增“幻灯片演示”功能
  4. 图片页面排版修改，图片上的链接取消，图片底部为图片名称，下面是图片描述，下面是Tags（当Tags存在的情况下）
  5. 图片页面键盘方向键翻页及提示

继续阅读

重新设计的主题：轻描淡写

Wolfit 4 条评论

原来的主题也是这个名字，用了至少有1到2年时间，中间一直在不断调整。这次修改了很多内容，可谓改头换面，依然算是该主题的一个升级。

以下是部分调整内容：

  1. 修改了部分布局（见下面的设计草图）

  2. 顶部导航和banner宽度修改为100%

  3. 依然采用两栏，右边侧栏的布局，整体宽度固定为950px，其中左栏690px，右栏250px

  4. 加入了底栏背景图片，整体使用背景色配合，突出两栏的边框

  5. 文章间加入了虚线分割

素材图片保持原来的风格，总体感觉和之前保持一致，下面是重新布局的草图，自己随手用photoshop画的。

理解并合理选择图片文件格式

Wolfit 2 条评论

本文来自《CSS禅意花园》4.1.2，部分内容有增减和改动。

网页中应用的图片文件格式一般有三种，分别为GIF、JPEG、PNG。每种图片文件格式都有自己的色彩模型、表示形式、压缩方案以及透明效果支持dent特性。只有充分的了解每一种格式的优劣之处，才能根据实际需要作出合理的选择。

无损压缩将保留原图像的所有细节，有损压缩会对细节有所取舍，以换来更小的文件。二者都有其适用的地方。

色深是指某种图像格式包含的颜色的多少。色深用位计量，更高的色彩表示将包含更多的颜色种类。例如8位的色深只有256种颜色，而24位色深则能够包含一千六百万种颜色。

1、GIF

Gif出现的历史最早，大约在20年前就已经初具雏形。Gif使用一种叫做LZW的无所压缩格式，非常适合带有大块相同颜色区域的图像。单色插图、文本、色块等文件非常适合存为此格式。

Gif需要使用颜色索引来实现无损压缩，但这却是把双刃剑。该格式的色深只允许同一张图像中最多出现256种颜色，对于超过范围的若干种颜色只能忍痛割爱。但对于少于256种颜色的图像，其颜色索引也会相应的变小，这也就意味着图片文件的整体大小也将随之降低。当然，对于超过256种颜色的图像，我们仍可以将其存为Gif格式，不过某些颜色信息将丢失，最终变成有损压缩。

Gif支持1位的透明度，即某个像素要么完全透明，要么完全不透明，没有任何中间值。若在图像编辑软件中使用各种范围的透明度，那么在保存为Gif的时候将会受到限制并不得不进行妥协。但若是预先知道该图像在网页中所处区域的背景颜色，那么这也不会带来太大问题。此外，Gif还支持基于帧的简单动画以及隔行加载技术，但这两者都将增加文件大小。 继续阅读

JS判断浏览器语言 自动跳转多语言页面

Wolfit 4 条评论

一直在不停的换工作，最近总算稳定下来，目前的本职工作是外贸。在这个网络普及的时代，外贸的主要途径一定是网络。也许你的企业网站既有中文版本，同时也有英文版本（如果你的公司有外贸业务）。

下面贡献一段代码，可以让你的网站自动判断客户端浏览器或者操作系统的语言，实现在不同语言间跳来跳去，比如中英文网站间的自动跳转。

var type=navigator.appName
if (type=="Netscape"){
var lang = navigator.language
}
else{
var lang = navigator.userLanguage
}
//取得浏览器语言的前两个字母
var lang = lang.substr(0,2)
// 英语
if (lang == "en"){
window.location.href="http://www.xxx.com/"
}
// 中文 - 不分繁体和简体
else if (lang == "zh"){
//  window.location.href="http://www.xxx.cn/"
//  注释掉了上面跳转,不然会陷入无限循环
}
// 除上面所列的语言
else{
window.location.href="http://www.xxx.com.cn/"
}

以上代码通过Firefox、Chrome、Opera测试有效；为了测试IE下的效果，特意在VMware Player里安装了Windows XP英文版，结果一样有效。

亲手测试一下效果：在Chrome的高级设置里添加其他语言，设置语言为en-us或者任何en开头的，测试效果。

PS：多余一句，在html中使用JavaScript代码需要<script type="text/javascript">….</script>。

利用 301 重定向实现域名补全 www

Wolfit 11 条评论

关于域名、顶级域名、二级域名可能很多人存在这样一种误解，带www的才是的顶级域名，或者两者之间并没有差别。而事实上，带www的域名和不带www的绝不是同一个，不带www的域名才是顶级域名，带www的域名应该只是一个二级域名。举个例子，www.wilf.cn≠wilf.cn，而www.wilf.cn和qqq.wilf.cn是一个道理。

只是，用户对此可能没有概念，大家习惯访问的域名都是带www的，于是我们也都习惯使用带有www的域名。

那么不带www的域名怎么办呢？一般有三种情况：

1、和带有www的域名解析到一起。这样可能会造成两个网站的内容两个url的情况，一个带www，另一个不带www，重复的内容不同的域名，这样做对SEO是绝对不利的。

2、利用各种途径将不带www的域名跳转到带www的域名。跳转的方法有很多，这也是本文的意义所在。

3、不解析，不跳转，无法访问。我持有的几个域名和网站曾经一度都是这样。

以下重点说转向，转向可以通过很多方法实现

比如域名解析里自带的跳转，html的<meta http-equiv=”refresh” content=”5;url=http://www.i0554.com”>，javascript的location.href=’htpp://www.i0554.com’，还有各种语言的跳转了，以及下面的301重定向。 继续阅读

修改完善 HDWiki 的 RSS 输出

Wolfit 评论

hdwiki确实是一款不错的wiki程序，基于MVC开发，扩展性很强，定制起来非常方便。

一、解决最新词条没有标题的bug

control/list.php 136行开始，在中间添加上最新词条的相关代码 recentupdate….

function dorss(){
if($this->get[2]){
switch($this->get[2]){
case 'recentupdate':
$typename = '最新词条';
break;
case 'focus':
$typename = '推荐词条';
break;
case 'hot':
$typename = '热门词条';
break;
case '':
$typename = '精彩词条';
break;
}

继续阅读

使用InstantRails搭建Ruby On Rails开发环境

Wolfit 评论

这是第一篇Rails学习笔记，也许后面还会有一系列这个方面的笔记，看我是否可以一路坚持了。

1、首先，下载InstantRails

在这里下载InstantRails最新版本2.0 ，我自己用的还是朋友发过来的1.7。

2、在本地任意文件夹解压（不用安装，很绿色）

运行InstantRails.exe，apache和mysql会启动。如果你有运行phpnow等本地环境的话会有80端口被占用的提示。关闭原来占用80端口的程序，重启即可。

InstantRails

继续阅读