设置背景图像,要注意框的尺寸
2008-03-25 9:47 pm假设图像 100X100,那么定义 框的尺寸为 width:100 height:100,那么图像全部显示。
假如不设置 width:100,那么图像会根据内容的多少而显示,比如,只在框内输入“我”一个字,那么只有“我”的范围内有图像。
假设图像 100X100,那么定义 框的尺寸为 width:100 height:100,那么图像全部显示。
假如不设置 width:100,那么图像会根据内容的多少而显示,比如,只在框内输入“我”一个字,那么只有“我”的范围内有图像。
字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于设计来说还是非常重要的。
中文和英文的最大区别就是中文是方块字,英文是拼音文字,这对字体的处理的影响是巨大的。看看下面的图示就会发现,英文字体里的那些变化在中文字体里都弱化了。

作为中文的读者,习惯性的接受方块形状做为阅读的单元,其实对于眼睛来说,这是一种容易疲劳的方式,阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。
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的表现。问题是你需要先知道原则,并且顺从原则进行练习,只有在你熟悉原则之后才有可能打破原则显现你的创造性,打破原则不意味着原则的缺陷和错误,只是你对这些原则的别出心裁的使用,你打破了一些,同时也对你所破坏的部分做一定的补偿,似乎很有点哲学的味道。
我个人以为比较重要的几个原则是(适用于英文的情形):
可能要多说几句的是 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 来定义字体的大小。
转自蓝色理想,作者不详
本想将首页右下角图片设置为浏览器高度的80%,前几天就已经搞定了,在IE7 FF OPERA中均测试通过,没想到今天在IE6中试了一下,竟然不起作用
整整搞了一下午,在经典发帖,也没人回。苍天不负有心人呐,最后突然发现,是不是要先设置父容器的高度?将body设置为height:100%,我靠,果然可以了。
还是基础欠缺啊!!
在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
可以实现首页不显示某分类文章
WP自带的翻页功能只能实现上一页下一页,太傻,这个插件可以实现按页数翻页
安装步骤
使用方法
PHP代码
/wp-content/plugins/pagenavi/pagenavi-css.css
有时候需要建立各种不同外观、用途的页面,只用page.php达不到这个目的,可以用建立页面模板的方式来定制。
建立页面模板,最重要的是插入这句代码:
<?php /*
Template Name: Template Page
*/ ?>
有了这句,就可以将这个文件作为页面模板来使用,在后台建立页面时,就会出现这个模板的选项。
剩下的,具体内容,自己定制吧。