2008-03的存档

在本地测试好主题上传到网站后,一定要注意插件!!!!

2008-03-29 15:41:09

在本地测试一切正常,传到网站上安装后就提示JS有问题

花了半夜时间没搞定

经提醒才发现插件的问题

本地安装启用了,主题中加入了相关代码,上传后网站未使用该插件……

一定要注意这个问题

实现不同时段跳转不同页面

2008-03-29 15:39:21

代码如下:

<script>
var h=(new Date()).getHours();
if (h>=6 && h<18){
location.href=’http://www.google.com’
//白天上google
}
else{
location.href=’http://www.baidu.com’
//晚上上百度
}
</script>

有人使用这样的:

<script>
var h=(new Date()).getHours();
if (h>=6 && h<18){
navigate(’http://www.google.com’)
//白天上google
}
else{
navigate(’http://www.baidu.com/’)
//晚上上百度
}
</script>

但是navigate不被firefox支持

DIV水平居中的方法

2008-03-26 12:13:06

浮动: body{text-align:center;}  div{ width:100px;margin:10px auto;}

绝对定位:div{position:absolute;top:10px;left:50%;width:100px;margin-left:-50px;}

设置背景图像,要注意框的尺寸

2008-03-25 21:47:30

假设图像 100X100,那么定义 框的尺寸为 width:100   height:100,那么图像全部显示。

假如不设置 width:100,那么图像会根据内容的多少而显示,比如,只在框内输入“我”一个字,那么只有“我”的范围内有图像。

在 CSS 中关于字体处理效果的思考

2008-03-25 18:26:16

字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于设计来说还是非常重要的。

中文和英文的最大区别就是中文是方块字,英文是拼音文字,这对字体的处理的影响是巨大的。看看下面的图示就会发现,英文字体里的那些变化在中文字体里都弱化了。


作为中文的读者,习惯性的接受方块形状做为阅读的单元,其实对于眼睛来说,这是一种容易疲劳的方式,阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。

NOW I VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND

Now I ve tried to talk to you and make you understand

哪一行更容易读呢?

第一行和中文的情形有些类似,不同的是,每个中文单字就好比一幅画,其变化要比26个英文字母丰富的多,对于我们来说,我们接受了这个特点,但是设计时还是有一些问题需要考虑,我不是设计师,如果说的不对,请在下面留言讨论。这些内容在我教授Typography的时候是作为一般原则来提出的。我也告诉学生一句话:“The purpose of rule is to break the rule.” 设计原则本身就是为了打破原则,这也是所谓的creativity的表现。问题是你需要先知道原则,并且顺从原则进行练习,只有在你熟悉原则之后才有可能打破原则显现你的创造性,打破原则不意味着原则的缺陷和错误,只是你对这些原则的别出心裁的使用,你打破了一些,同时也对你所破坏的部分做一定的补偿,似乎很有点哲学的味道。

我个人以为比较重要的几个原则是(适用于英文的情形):

  1. 字体的选用要考虑该文字的用途,是做标题呢,还是段落文字?通常来说 san serif 字体适合作为标题使用,例如 Arial;serif 字体适合作为段落文字使用,例如Time New Roman。对于网页设计来说,有几个字体是我强烈推荐的,verdana, tahoma, georgia。事实上,像 Verdana 这个字体是由世界上顶级的字体设计师花了差不多两年时间设计出来的,Microsoft负责买单, 然后免费提供给用户,这个字体是IE安装的一部分,如果你安装了IE 4以上的版本,你的电脑里就一定有这个字体,所以你不必担心用户是否有这个字体。它的设计考虑了字体在屏幕上显示的可能面对的问题,而且提供了近乎完美的答案。唯一的麻烦是它的近乎完美造成了我们使用的时候没有了个性,因为每个人都使用它。
  2. 字号的大小?论坛里很多讨论,关于pixle 好还是point好? 我就不重复了,在这里我想提出的是字号的大小在CSS里,有很多不同的单位,大致上有三类,
    • 绝对大小:mm, cm, in, pt, pc
    • 相对大小:em, ex
    • 相对于设备:px

    可能要多说几句的是 em 和 ex,em 在 css 里代表就是字体字号的大小,例如对于12 pt的字体来说, 1 em 就等于12 pt 范例:

    p {
    font-size: 10pt;
    text-indent: 1em
    }

    也许你会说我可以用text-indent: 10pt来实现同样的效果啊,但那只是在理想的情形下,如果用户觉得他的浏览器设置字体大小为14pt更好的时候,你所设计的比例就失去了,所以相对尺寸对于网页的可伸缩性设计是非常有利的。

    ex 和 em 类似,但不尽相同, 回到上面的图示,x-height 对于每一种字体来说是不同的,ex 是根据字体的 x-height 来定义字体的大小。

  3. 对齐方式?最好使用左对齐,尤其要避免使用左右对齐,除非你有一个特殊的设计目的,左对齐时右侧的不对齐正是为了阅读的方便,右侧的变化对你的视力是一个帮助,它借助变化告诉你的眼睛可以换行了。
  4. 行间距?行间距取决于字体的大小,一般来说,小的字号需要大一点的行间距来便于阅读,中文字体在网页上如果没有行间距的设定,对于阅读大段文字来说是读者的灾难,所以适当设定line-height是非常必要的。一般地, line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里, 一般设定字体的120%作为缺省的行间距。css里的 line- height 设定,是均分后加在每一行的上下,也就是说,如果 line-height 设定为 20px 的话,那么每一行文字的上下各有10px的间距。
  5. 字间距和字符间距?很特殊的用途,对中文来说这两者应该是相同的。这个设定的本身就是为了解决某些字体设计上缺陷,来增加文字的可读性。

 转自蓝色理想,作者不详

height width 设置百分比的话,一定要先搞好父容器!!

2008-03-25 17:33:42

本想将首页右下角图片设置为浏览器高度的80%,前几天就已经搞定了,在IE7  FF OPERA中均测试通过,没想到今天在IE6中试了一下,竟然不起作用

整整搞了一下午,在经典发帖,也没人回。苍天不负有心人呐,最后突然发现,是不是要先设置父容器的高度?将body设置为height:100%,我靠,果然可以了。

还是基础欠缺啊!!

IE6模拟max-width对图片缩放,实现WP中图片缩放

2008-03-25 15:19:50

  在web2.0的站中用户互动性是很强的,例如用户留言我们可能放开img标签,允许用户外链其他站点的图片,那么我们就需要解决图片尺寸过大所带来的页面布局问题。在支持max-width属性的浏览器中,这个很容易实现,我们只需要给特定的img定义全局的样式,不定义高宽,通过限定max-width就可以保证版面不受外链大图的干扰了。遗憾的是IE6不支持这个属性,很多时候我们采用overflow的hidden来保证我们的版面不受干扰,但这个解决方式并不是十分完美,没有兼顾图片的比例问题,对用户的参与积极性有一定的影响。这里介绍我的另外一种实现方式,用JS来动态缩放图片。(查看示例
  
  核心的JS代码如下:
function resizeImage(img,width){
var image=new Image();
image.src=img.src;
var temp = image.width;
//var rate = image.width/image.height;
img.width = temp = (temp>width)?width:temp;
//img.height = Math.round(temp/rate);
img.style.display = "inline";
}
function doResize(){
if($.browser.version==6&&$.browser.msie) $("img").each(function(){resizeImage(this,100)});
}

window.onload = doResize;  

  实现的原理很简单,主要是resizeImage函数通过判断,然后修改了img.width属性。然后就是考虑效率优化上的一些问题了,曾经看到有人直接在img标签的onload属性里调用动态修改尺寸的做法,这显然是极大消耗的,不可取;利用CSS中的行为-expression也存在争议,可能造成浏览器死掉,我个人很少用这个方法。

  这里我引用了Jquery框架,当然你可以使用其他类库或者自己来的库。目的就是在DOM元素返回以后统一进行函数处理。在此之前我对浏览器做了判断,当浏览器是ie6时才执行缩放操作,对于支持max-width属性的浏览器,我用CSS来完成对图片的限定。
 
  img{
display:inline !important;
display:none;
max-width:180px;
}

  
  考虑到外链图可能很大,如果网速慢的时候我们的脚本把图片读入到内存也需要时间,因此我在页面加载时用CSS将图片先隐藏了,当缩放完成的时候再用JS将图片显示,所以这个CSS里用hack手段来针对ie6做隐藏处理了。

  还有一个小的优化就是尽可能不要定义图片的高宽,从我的示例中你可以看出,如果不定义高宽,那么JS只需要修改宽度,那么高度会自适应,如果定义了,那么JS需要对高宽都做等比缩放才能达到我们要的效果,这里额外增添了JS的消耗。对于用户输入带进来的高宽,那么服务端完全有能力把这个属性给过滤掉。

转载:http://www.v-sky.com/blog/?p=198

我将上面的代码放在 footer.php中,希望最后再处理这个问题,减少对网页加载的影响。

附:下载:jq.js

用Front Page Excluded Categories实现首页不显示某分类文章

2008-03-25 12:03:42

下载

可以实现首页不显示某分类文章

wordpress翻页插件WP-PageNavi及使用方法

2008-03-25 00:10:22

WP自带的翻页功能只能实现上一页下一页,太傻,这个插件可以实现按页数翻页

下载:

安装步骤

  1. 解压后,将 pagenavi 文件夹上传到 /wp-content/plugins 中
  2. 激活 WP-PageNavi 插件

使用方法

  1. 打开 /wp-content/themes/<YOUR THEME NAME>/footer.php(或者其他文件如 index.php)
  2. 增加下面的代码到合适的地方

    PHP代码

    1. <?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
  3. 到 “WP-Admin -> Options -> PageNavi” 配置 WP-PageNavi 插件的参数
    3.1.翻页文本内容
    Text For Number Of Pages 总页数
    Text For Current Page 当前页
    Text For Page 页数
    Text For First Post 首页
    Text For Last Post 尾页
    Text For Next Post 下一页
    Text For Previous Post 上一页
    Text For Next … 下
    Text For Previous … 上
    3.2.翻页显示选项
    Page Navigation Style 普通(横排列表)和下拉(Drop Down List)
    Number Of Many Pages To Show 直接显示页的数量
    Always Show Page Navigation 是否总是显示翻页功能
  4. 如果需要修改 WP-PageNavi CSS 可以对下面的文件修改

          /wp-content/plugins/pagenavi/pagenavi-css.css

通过建立页面模板的方式定制WP页面

2008-03-25 00:00:53

有时候需要建立各种不同外观、用途的页面,只用page.php达不到这个目的,可以用建立页面模板的方式来定制。

建立页面模板,最重要的是插入这句代码:
<?php /*
   Template Name: Template Page 
*/ ?>

有了这句,就可以将这个文件作为页面模板来使用,在后台建立页面时,就会出现这个模板的选项。

 剩下的,具体内容,自己定制吧。