透明PNG背景图片 For IE 6.0 Firefox Opera

PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出实用,绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。

IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型

(X)HTML:

<div id="wrap">
<p><a href="http://www.jluvip.com"><strong>PNG半透明背景图片效果</strong></a><br />:PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出需要使用绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。</p>
<p>IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
</p>
<p><a class="test" href="http://www.jluvip.com">这里是个超链接测试</a></p>
</div>

CSS:

#wrap{ width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}
/*not for ie 6.0*/
html>body #wrap{background: url(img/bgcanvas.png) repeat;}
/*for ie 6.0*/
* html #wrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");
background:none;
}
#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失效的问题*/
#wrap a:hover{ text-decoration:underline;}

效果预览

经测试,兼容IE6.0 Firefox 1.5 Opera 8.5,因为AlphaImageLoader滤镜不支持IE5.0,所以IE5.0没有达到想要的效果,基本IE5.0与PNG无缘了。
关于AlphaImageLoader滤镜

Quotes From CSS2.0手册

语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
      true : 默认值。滤镜激活。
      false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
        image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
        scale : 缩放图片以适应对象的尺寸边界。
        src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

欧美酷站CSS+XHMLl酷站欣赏(年末巨献)

STI Creative Michigan web Design
Web address:http://www.sti-cs.com/


NoseRub
Web address:http://www.noserub.com/


okb – estudio interactivo
Web address:http://www.okb.es/


Srown Design Studio
Web address:http://www.srown.com/


Art Decor – Pentru clipe de neuitat
Web address:http://www.sta.uwi.edu/uwilife/


Grant Executive Jets
Web address:http://www.grantexecutivejets.com/


Unstoppable Robot Ninja
Web address:http://unstoppablerobotninja.com/


Superawesome
Web address:http://sprawsm.com/


Citrus7 blog
Web address:http://www.citrus7.com.br/secao/blog


Digital Artifext
Web address:http://www.digitalartifex.com/


Contraception – PillBell
Web address:http://pillbell.com/contraception.html


gimimodiena.lt
Web address:http://www.gimimodiena.lt/


KNI
Web address:http://www.kurtnoble.com/


Sonze Design Studio
Web address:http://www.sonze.com/


A-SIGN | Mediendesign
Web address:http://www.a-sign.ch/


Danny Blackman
Web address:http://www.dannyblackman.com/


Hotel Oxford – Timisoara
Web address:http://www.hotel-oxford.ro/


martha stewart
Web address:http://www.marthastewart.com/


Axe Effect
Web address:http://www.axe-effect.co.za/


Made by Cocoon
Web address:http://www.madebycocoon.com/


Instant Offices
Web address:http://www.instant-offices.com/


b_dc
Web address:http://www.baselinedc.com/


hyperwave
Web address:http://www.hyperwave.com/e/


manch235ter
Web address:http://www.manchester235.com/

http://smallpic.zcool.com.cn/coolsite/426.jpg
ESAM Air Technology Australia
Web address:http://www.sidechannelblowers.com.au/


Grupo L’auca
Web address:http://www.grupolauca.com/


Right Media
Web address:http://www.rightmedia.com/


Horizon Bildungszentrum Essen e.V.
Web address:http://www.horizont-essen.de/index.aspx


Carduri-de-credit
Web address:http://www.carduri-de-credit.ro/


Cal Tax Group
Web address:http://www.caltaxgroup.com/


web1.in
Web address:http://www.web1.in/


New Life Christian Church
Web address:http://www.nulifecc.com/


Cenceo
Web address:http://www.cenceo.com/

Bram Nicholson & Accociates
Web address:http://www.bramsturf.com.au/

Base One Group
Web address:http://www.baseonegroup.co.uk/

Gizcore Labs
Web address:http://www.gizcore.com/

20 个优秀CSS网站(年末巨献)

这次除了从这些 CSS Gallery 网站中挑选最新的设计外,还增加了几个自己收藏的 XHTML+CSS 布局网站,如 Zeldman 老大哥的。这些设计都是我比较喜欢的,但不一定是你所喜欢的,所以仅供参考。这次分享的网站比较注意导航栏设计,可以说一个漂亮的导航栏决定了一个 XHTML+CSS 布局网站质量,一些网站凭一个独特的导航栏就能吸引人,即使它下面的设计有凑数的感觉。Smashing Magazine 这篇文章列出了很多出众的导航菜单设计。

头些天我比较喜欢的 bartelme.at 改版,一些 CSS Gallery 网站也随之做了推荐,他的每次改版都能引来关注。还有就是昨天 Derek 写了一篇文章“WordPress China Users, operating on their own terms”,建议大家都去看看顺便发表一下自己的看法。再推荐一个 WordPress 主题“Hello 2007”,我喜欢它的导航菜单,手感很好。

另外,如果英文不错,可以去 9rules 的设计社区玩玩,很多高手都在。

1、www.spiga.com.mx
www.spiga.com.mx

2、www.vivereacomo.com
www.vivereacomo.com

3、hellowiki.com
hellowiki.com

4、hotpress.brandexpansion.com
hotpress.brandexpansion.com

5、bartelme.at
bartelme.at

6、www.zeldman.com
www.zeldman.com

7、5thirtyone.com
5thirtyone.com

8、www.binarymoon.co.uk
www.binarymoon.co.uk

9、ikram-zidane.com
ikram-zidane.com

10、www.solutionwatch.com
www.solutionwatch.com

11、www.miskonys.lt
www.miskonys.lt

12、www.emanuelblagonic.com
www.emanuelblagonic.com

13、www.bramn.com
www.bramn.com

14、dannyblackman.com
dannyblackman.com

15、www.jackvanj.de
www.jackvanj.de

16、www.fluidbook.com
www.fluidbook.com

17、www.hongkiat.com
www.hongkiat.com

18、www.ndesign-studio.com
www.ndesign-studio.com

19、www.lifespy.com
www.lifespy.com

20、iconshoppe.com
iconshoppe.com

如何去除点击链接时出现的虚线框

=====================2008年1月26日0:50:54更新=====================
这个貌似正确:
a {blr:e­xpression(this.onFocus=this.blur())} /*for IE*/
a {outline:none;} /*for 现代浏览器*/

=====================2008年1月25日10:49:44更新=====================

就加这段在head中间就行
<style type=”text/css”>  
a{blur:e­xpression(this.onFocus=this.blur());}  
</style>

有时候在一个页面用到收放功能的时候时,总有一个虚线框在触发收放的功能按钮上,显得特别刺眼,那如何去除这个虚线框呢?

在IE下,需要在标签 a 的结构中加入 hidefocus=”true” 属性。即:

<a href=”http://www.taobao.com” hidefocus=”true” title=”淘宝网,淘我喜欢”>淘宝网</a>

而在FF等浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none; 就可以了,即:

a {
outline:none;
}

如有更好的方法,欢迎跟帖讨论!

flash加密软件SWF Encrypt v4.0.5 英文绿色破解版(v4.0.4 汉化破解版)

SWF Encrypt v4.0.5 英文绿色破解版(v4.0.4 汉化破解版)
上传时间:2006-7-20
最近更新:2007-12-6

官方网站:http://www.amayeta.com

点击下载:

SWF Encrypt v4.0.5 英文绿色破解版

SWF Encrypt v4.0.4 汉化破解版

***************
2007-7-2更新
v4.0.4

SWF Encrypt 4.0 has been updated this month to version 4.0.4 – This latest build includes encryption optimizations for larger SWFs and also an update which defeats ASV 5.25 (which was also released ealrier this month). This is a highly recommended update for all registered users!

***************
2007-3-29更新
v4.0.1

经测试发现,加密强度选项(Encryption)和最优化选项(optimization)不再像 v3.0.12 一样看起来不怎么起作用,设置过后的加密文件体积明显下降。

感谢 深蓝兄 的破解。

***************
2007-1-13更新

3.0.12注册
name:任意,例如 www.zhugao.cn
email:任意,例如 zhugao@zhugao.cn
sn:SE3-9gGHtBdn74wSn3945-861

尽管加密后文件仍然有明显的增大,然而令人振奋的是,已经支持放射状渐变,支持Flash8.0。
***************
2006-12-28测试发现

3.08不支持放射状渐变,不支持Flash8.0,请发布成6.0或7.0来加密。
***************
2006-7-20更新
  
SWF Encrypt 3.08 功能介绍:
1、加密和保护SWF影片文件内容。
2、防止大多数流行的SWF反编译软件。
3、防止actionscript 脚本盗用。
4、Actionscript 混淆技术。
5、100% 安全地本地化加密操作。
6、优化对Macromedia Flash 6, 7的支持。
7、无actionscript 代码行数限制。
8、唯一的加密码,更多级别的压缩控制等等。
9、比起其他加密软件,它可以有效防止 Action Script Viewer
  
缺陷:
加密后文件明显增大,不保证所有文件都能加密成功。

***************
2007-1-25更新
关于Flash加解密的综合文章:
http://www.zhugao.cn/info/news_show.asp?id=503

JS eval()函数

eval()函数
    
   JavaScript有许多小窍门来使编程更加容易。
   其中之一就是eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
   举个小例子:
    
   var the_unevaled_answer = “2 + 3”;
   var the_evaled_answer = eval(“2 + 3”);
   alert(“the un-evaled answer is ” + the_unevaled_answer + ” and the evaled answer is ” + the_evaled_answer);
    
   如果你运行这段eval程序, 你将会看到在JavaScript里字符串”2 + 3″实际上被执行了。
   所以当你把the_evaled_answer的值设成 eval(“2 + 3”)时, JavaScript将会明白并把2和3的和返回给the_evaled_answer。
   这个看起来似乎有点傻,其实可以做出很有趣的事。比如使用eval你可以根据用户的输入直接创建函数。
   这可以使程序根据时间或用户输入的不同而使程序本身发生变化,通过举一反三,你可以获得惊人的效果。
   在实际中,eval很少被用到,但也许你见过有人使用eval来获取难以索引的对象。
    
   文档对象模型(DOM)的问题之一是:有时你要获取你要求的对象简直就是痛苦。
   例如,这里有一个函数询问用户要变换哪个图象:变换哪个图象你可以用下面这个函数:
    
   function swapOne()
   {
   var the_image = prompt(“change parrot or cheese”,””);
   var the_image_object;
    
   if (the_image == “parrot”)
   {
   the_image_object = window.document.parrot;
   }
   else
   {
   the_image_object = window.document.cheese;
   }
    
   the_image_object.src = “ant.gif”;
   }
    
   连同这些image标记:
    
    
   [img src=”http://a.com/a.gif” name=”parrot”]
   [img src=”http://b.com/b.gif” name=”cheese”]
   [code]
   请注意象这样的几行语句:
   [code]
   the_image_object = window.document.parrot;
    
    
   它把一个图象对象敷给了一个变量。虽然看起来有点儿奇怪,它在语法上却毫无问题。
   但当你有100个而不是两个图象时怎么办?你只好写上一大堆的 if-then-else语句,要是能象这样就好了:
    
   function swapTwo()
   {
   var the_image = prompt(“change parrot or cheese”,””);
   window.document.the_image.src = “ant.gif”;
   }
    
   不幸的是, JavaScript将会寻找名字叫 the_image而不是你所希望的”cheese”或者”parrot”的图象,
   于是你得到了错误信息:”没听说过一个名为the_image的对象”。
    
   还好,eval能够帮你得到你想要的对象。
    
   function simpleSwap()
   {
   var the_image = prompt(“change parrot or cheese”,””);
   var the_image_name = “window.document.” + the_image;
   var the_image_object = eval(the_image_name);
   the_image_object.src = “ant.gif”;
   }
    
   如果用户在提示框里填入”parrot”,在第二行里创建了一个字符串即window.document.parrot. 然后包含了eval的第三
   行意思是: “给我对象window.document.parrot” – 也就是你要的那个图象对象。一旦你获取了这个图象对象,你可以把
   它的src属性设为ant.gif. 有点害怕?用不着。其实这相当有用,人们也经常使用它。
   我们常常在Javascript中间到Eval这个函数,
   有些人觉得这个函数很奇怪,可以把一些字符串变的功能很强大
   在我们需要将普通的字符串转变成具体的对象的时候,就会用到这个函数
    
   eval 函数对作为数字表达式的一个字符串进行求值,其语法为:
    
   eval(expr)
    
   此处 expr 是一个被求值的字符串参数。如果该字符串是一个表达式,eval 求该表达式的值;如果该参数代表一个或多个 JavaScript 语句,那么 eval 执行这些语句。eval 函数可以用来把一个日期从一种格式(总是字符串)转换为数值表达式或数字。

网站重构技术:XML,XHTML代码规范,样式表调用方式,CSS布局要点

1. 几个概念

1.1.      什么是HTML?

HTML是Hypertext Markup Language的英文缩写,即超文本标记语言,是一种用来制作网页的标记语言。

1.2.      什么是XHTML?

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。它实现HTML向XML的过渡。

1.3.      什么是XML?

XML(extensible Markup Language)的出现,结构化文档和数据有了一个通用的、科适应的格式,不仅仅应用在web上,也可以应用在任何地方。标准称为可能。 (*.xsl,*.dtd,*.xml)。

1.4.      什么是CSS?

CSS是Cascading Style Sheets层叠样式表的缩写。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。 (xsl)

1.5.      为什么要采用CSS布局代替table布局?

(1) 用css布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,减轻工作量和服务器的负荷,增加站点的扩展能力和应用。

(2) 可以使用表格。只是表格仅仅用于其本意:展示数据列表。而不允许使用表格排版和定位。

1.6.      什么是web标准?

所谓web标准,不是指XML,而是指为了实现大量HTML信息向XML标准的过渡,W3C和ECMA制定的一系列的技术规范,目前主要包括XHTML1.0、CSS2.0、DOM1.0和ECMA JavaScrit。web标准不仅仅是一个规范,而是一系列规范的总称。 按这些规范制作的网页,符合XML格式规范,内容与表现相分离,将使你的页面数据在以后可以被分享、交换和重用。

2. XHTML代码规范

2.1.   所有的标记都必须要有一个相应的结束标记

以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个”/”来关闭它。例如:

<br />

<img height=”80″ alt=”网页设计师” src=”../images/logo_w3cn_200x80.gif” width=”200″ />

2.2.   所有标签的元素和属性的名字都必须使用小写

与HTML不一样,XHTML对大小写是敏感的,<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如:<BODY>必须写成<body> 。大小写夹杂也是不被认可的,通常dreamweaver自动生成的属性名字”onMouseOver”

也必须修改成”onmouseover”。

2.3.   所有的XML标记都必须合理嵌套

同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以前我们这样写的代码:

<p><b></p></b>

必须修改为:

<p><b></b></p>

就是说,一层一层的嵌套必须是严格对称。

2.4.      所有的属性必须用引号””括起来

在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。例如:

<height=80>

必须修改为:

<height=”80″>

特殊情况,你需要在属性值里使用双引号,你可以用”,单引号可以使用&apos;,例如:

<alt=”say&apos;hello&apos;”>

2.5.      把所有<和&特殊符号用编码表示

. 任何小于号(<),不是标签的一部分,都必须被编码为& l t ;

. 任何大于号(>),不是标签的一部分,都必须被编码为& g t ;

. 任何与号(&),不是实体的一部分的,都必须被编码为& a m p;

注:以上字符之间无空格。

2.6.      给所有属性赋一个值

XHTML规定所有属性都必须有一个值,没有值的就重复本身。例如:

<td nowrap>

<input type=”checkbox” name=”shirt” value=”medium” checked>

必须修改为:

<td nowrap=”nowrap”>

<input type=”checkbox” name=”shirt” value=”medium” checked=”checked”>

2.7.      不要在注释内容中使“–”

“–”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的:

<!–这里是注释———–这里是注释–>

用等号或者空格替换内部的虚线。

<!–这里是注释============这里是注释–>

以上这些规范有的看上去比较奇怪,但这一切都是为了使我们的代码有一个统一、唯一的标准,便于以后的数据再利用。

3. 样式表调用方式

3.1.      页面内嵌法:

就是将样式表直接写在页面代码的head区。类似这样:

<style type=”text/css”> <!– body { background : white ; color : black ; } –> </style>

3.2.      外部调用法:

将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

3.3.      双表法调用样式表

查看某些符合标准站点的原代码,你可能看到,在调用样式表的地方有如下2句:

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” /> <style type=”text/css” media=”all”>@import url( css/style01.css );</style>

为什么要写两次呢? 实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的”@import”命令用于输入样式表。而”@import”命令在netscape 4.0版本浏览器是无效的。也就是说,当你希望某些效果在netscape 4.0浏览器中隐藏,在4.0以上或其它浏览器中又显示的时候,你可以采用”@import”命令方法调用样式表。

3.4.      Style属性

<input type=”Text” value=”浅绿色底色” style=”background-color:#ccffcc”>

4. head区的其他设置

4.1.      设置站点作者信息

<meta name=”author” content=”chinanews” />

4.2.      设置站点版权信息

<meta name=”copyright” content=”www.chinanews.com,版权所有” />

4.3.      站点的简要介绍(推荐)

<meta name=”description” content=”中新网新闻中心是中新网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。每日编发新闻数以万计。” />

4.4.      站点的关键词(推荐)

<meta name=”keywords” content=”新闻,时事,时政,国际,国内,社会,法治,聚焦,评论,文化,教育,新视点,深度,网评,专题,环球,传播,论坛,图片,军事,焦点,排行,环保,校园,法治,奇闻,真情”/>

5. XHTML下css+div布局小结

5.1.      为页面添加正确的DOCTYPE

DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你 DOCTYPE定义的DTD(文档类型定义)来解释页面代码。

注意:DOCTYPE声明并不是XHTML文档自身的一部分。它也不属于XHTML元素,不需要有关闭标签。

XHTML1.0提供了三种DOCTYPE可选择:

(1)过渡型(Transitional )–使用非常普遍。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

(2)严格型(Strict )

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd”>

(3)框架型(Frameset )

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

5.2.      设定一个名字空间(Namespace)

直接在DOCTYPE声明后面添加如下代码:

<html XMLns=”http://www.w3.org/1999/xhtml” >

一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

注意:XHTML文档要求xmlns属性出现在html标签中。然而,w3.org的校验器不会由于这个属性没有出现在你的XHTML文档中而报告错误。这是因为”xmlns=http://www.w3.org/1999/xhtml”是一个固定的值,即使你的文档里没有包含它,它也会自动加上的。

5.3.      声明你的编码语言

为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:

<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />

这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。 国际化站点时候通常推荐采用编码为:UTF-8。

5.4.      用小写字母书写所有的标签

XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。

5.5.      为图片添加 alt 属性

为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:

<img src=”logo.gif” alt=”logo.gif”>

正确的写法:

<img src=”logo.gif” alt=”中国新闻社,点击返回首页”>

5.6.      给所有属性值加引号

在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。还必须用空格分开属性。

例:

<hr width=”75%”size=”7″/>

这也是不正确的

5.7.      关闭所有的标签

在XHTML中,每一个打开的标签都必须关闭。空标签也要关闭,在标签尾部使用一个正斜杠 “/”来关闭它们自己。例如:

<br />

5.8.      收藏夹小图标

例如:首先制作一个16×16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon” />

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

5.9.      Lang 属性

xml:lang 属性 — 代表xml语言声明,它能指定元素中内容的使用语言

此属性可以使用在任何XHTML或XML标签上

. 此属性符合GNU I18N规范

. 取值:可以参考rfc3066标准

. 如果要在元素中使用lang属性,就必须加上xml:lang属性,像这样:

XHTML文档使用英文

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

XHTML文档使用中文

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN”>

XHTML文档,”段落一”使用中文,其余使用繁体(下面只是伪代码)

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-HK”>

       <p xml:lang=”zh-CN”>

              段落一

       </p>

</html>

说明:

. 如果网页定义为XHTML1.1或者XML格式,那么使用xml:lang属性(因为xml:lang属性是在XML中确定语言信息的标准用法).

. 如果网页使用HTML格式,那么应该同时使用xml:lang和lang属性.

. 此属性常用于html标签中,代表整个文档(文件)使用了某种语言,也可以使用在某个XHTML标签中.

. xml:lang属性可以使搜索引擎了解你的页面使用了何种语言,搜索引擎可以按语言把页面归类,或者启动某些自动翻译系统.xml:lang属性也可以使排版工具了解你的页面使用了何种语言,这样相应的排版工具就可以切换标点符号,转换格式等操作.

5.10. id属性替换name属性

对于a, applet, frame, iframe, img和map元素,HTML 4.01中定义了name属性,而在XHTML中是不能这样做的,应该用id来代替。

这是错误的:

<img src=”picture.gif” name=”picture1″ />

这是正确的:

<img src=”picture.gif” id=”picture1″ />

注: 针对版本比较低的浏览器,应该同时使用name和id属性,并使它们两个的值相同,像这样:

<img src=”picture.gif” id=”picture1″ name=”picture1″ />

兼容提示:

要让XHTML兼容当前的浏览器应该在/标记前添加空格

5.11. 用CSS定义元素外观

css是不区别空格和大小写的,下面是一些基础的归纳

(1)颜色值

颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须

写满六位。

(2)定义字体

web标准推荐如下字体定义方法:

body { font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;Lucida Grande字体适合Mac OS X; Verdana字体适合所有的Windows系统; Lucida适合UNIX用户”宋体”适合中文简体用户; 如果所列出的字体都不能用,则默认的sans-serif字体能保证调用。

(3)群选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:

p, td, li { font-size : 12px ; }

(4)派生选择器

可以使用派生选择器给一个元素里的子元素定义样式,例如这样:

li strong { font-style : italic; font-weight : normal;}

就是给li下面的子元素strong定义一个斜体不加粗的样式。

(5)id选择器

用CSS布局主要用层”div”来实现,而div的样式通过”id选择器”来定义。例如我们首先定义一个层

<div id=”menubar”></div>

然后在样式表里这样定义:

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中”menubar”是你自己定义的id名称。注意在前面加”#”号。

id选择器也同样支持派生,例如:

#menubar p { text-align : right; margin-top : 10px; }

这个方法主要用来定义层和那些比较复杂,有多个派生的元素。

(6)类别选择器

在CSS里用一个点开头表示类别选择器定义,例如:

.14px {color : #f60 ;font-size:14px ;}

在页面中,用class= “类别名”的方法调用:

<span class=”14px”>14px大小的字体</span>

这个方法比较简单灵活,可以随时根据页面需要新建和删除。

(7)定义链接的样式

CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上语句分别定义了 “链接、已访问过的链接、鼠标停在上方时、点下鼠标时”的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

(8)组合使用选择器创造精致的设计效果

用漂亮的图案代替普通无序列表前沉闷的黑点。站点http://marine.happycog.com/

先用css规则告诉类别属性inventory的无序列表。

ul.inventory{

list-style:disc url(/images/common/lister2.gig) inside;}

它的调用标记:

<ul class=”inventory”>

<li><a href=”/angelfish”>Angelfish</a>(67 items)</li>

<li><a href=”/angeld”>Angels/Frogfish</a>(35 items)</li>

<li><a href=”/anthias”>Angelfish</a>(5526 items)</li>

<li><a href=”/basslets”>Angelfish</a>(15 items)</li>

<ul>

(9)缩写是按照顺时针的顺序

margin:25px 0 25px 0;

(10)行高

line-height:150% 说明行距为正常的150%

5.12. 结构化代码div(division)、id、class

用它们来书写紧凑的xhtml,更明智的使用css.

(1)结构化id标签,与class的有区别:

如果你的属性页面包含了一个div,它的id为”content”,它就不可能有另外一个div或者其他元素拥有相同的名字。相反,class属性可以在意个页面中一次又一次地使用。

(2)id的规则

一个id值必须用一个字母或者下划线开头,它不能用一个数字进行开头,然后跟随字母、数字和下划线。空格和连字符-都是不允许的。

5.13. 制作好的网站可以到w3c进行标准校正

http:validator.w3.org

http://jigsaw.w3.org/css-validator/

6. CSS布局要点

CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。

6.1.      定义DIV

分析一个典型的定义div例子:

#sample{ MARGIN: 10px 10px 10px 10px;

PADDING:20px 10px 10px 20px;

BORDER-TOP: #CCC 2px solid;

BORDER-RIGHT: #CCC 2px solid;

BORDER-BOTTOM: #CCC 2px solid;

BORDER-LEFT: #CCC 2px solid;

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

COLOR: #666;

TEXT-ALIGN: center;

LINE-HEIGHT: 150%; WIDTH:60%; }

说明如下:

. 层的名称为sample,在页面中用就可以调用这个样式。

. MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。”10px 10px 10px 10px”分别代表”上右下左”(顺时针方向)四个边距,如果都一样,可以缩写成”MARGIN: 10px;”。如果边距为零,要写成”MARGIN: 0px;”。

注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位”px”。MARGIN是透明元素,不能定义颜色。

. PADDING是指层的边框到层的内容之间的空白。和margin一样,分别指定上右下左边框到内容的距离。如果都一样,可以缩写成”PADDING:0px”。单独指定左边可以写成”PADDING-LEFT: 0px;”。PADDING是透明元素,不能定义颜色。

. BORDER是指层的边框,”BORDER-RIGHT: #CCC 2px solid;”是定义层的右边框颜色为”#CCC”,宽度为”2px”,样式为”solid”直线。如果要虚线样式可以用”dotted”。

. BACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用”url(../images/bg_logo.gif)”来指定背景图片路径;其次定义背景色”#FEFEFE”。”no-repeat”指背景图片不需要重复,如果需要横向重复用”repeat-x”,纵向重复用”repeat-y”,重复铺满整个背景用”repeat”。后面的”right bottom;”是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE .

. COLOR用于定义字体颜色。

. TEXT-ALIGN用来定义层中的内容排列方式,center居中,left居左,right居右。

. LINE-HEIGHT定义行高,150%是指高度为标准高度的150%,也可以写作:LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em,都是一样的意思。

. WIDTH是定义层的宽度,可以采用固定值,例如500px,也可以采用百分比,象这里的”60%”。要注意的是:这个宽度仅仅指你内容的宽度,不包含margin,border和padding。但在有些浏览器中不是这么定义的,需要你多试试。

6.2.      CSS2盒模型

自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层

。盒模型主要定义四个区域:内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。

CSS2盒模型的3D示意图

6.3.      辅助图片一律用背景处理

用XHTML+CSS布局,有一个技术一开始让你不习惯,应该说是一种思维方式与传统表格布局不一样,那就是:所有辅助图片都用背景来实现。类似这样:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

尽管可以用直接插在内容中,但这是不推荐的。这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一部分,它们可以用元素直接插在页面里,而其它的类似logo,标题图片,列表前缀图片都必须采用背景方式或者其他CSS方式显示。

这样做的原因有2点:

. 将表现与结构彻底相分离,用CSS控制所有的外观表现,便于改版。

. 使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。

7. 实例讲解

8. Chinanews网站重构实例讲解

9. 资源共享

9.1.    参考手册

. CSS 2 中文手册.chm

. 样式表手册.chm

. 样式表中文滤镜手册.chm

. 网页制作完全手册.chm

. DOM文档对象中文手册.chm

. script56cn.chm

9.2.      推荐书籍

. web标准的概念和实践推荐Zeldman的《网站重构–用web标准进行设计》

. CSS入门和进阶推荐Eric Meyer的《CSS权威指南》《More Eric Meyer on CSS》

《Photoshop 顶级密诀》视频教程下载

Photoshop 顶级密诀》(Photoshop Top Secret DVD 1-5)[ISO]

中文名称:Photoshop 顶级密诀
英文名称:Photoshop Top Secret DVD 1-5
资源类型:ISO
发行时间:2007年08月13日
地区:美国
语言:英语
类型:视频教程
电驴中有四张DVD,共19G。目前我才下载了两张,看了前面部分视频教程,感觉很不错,大家有兴趣可以去看看,不过先提醒一下,DVD的内容是全英文的,包括视频解说(老外的教程,有免费的下载已经不错了)。如果您觉得看视频不爽,你也可以去订购他的全彩书籍。。

官方地址:http://www.photoshoptopsecret.com/
电驴下载:http://lib.verycd.com/2007/08/13/0000159952.html

JavaScript控制网页播放器的一些相关函数及参数

相关文章网上也挺多的,但是感觉不好找,找到了也不是很实用的说,介绍了一大堆,对我们这种没什 么编程基础的人来说有些过于理论化了,本文主要介绍下JavaScript控制网页播放器的一些相关函数及参数并给相关实例及较详注解,当然由于本人知识所限,还请各位大侠指正。

<object classid=”clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6″ id=”wmp” >
<param name=”URL” value=”” />                          //媒体文件地址
<param name=”rate” value=”1″ />
<param name=”balance” value=”0″ />                   //声道0全声道,-100左声道,100右声道
<param name=”currentPosition” value=”0″ />
<param name=”playCount” value=”1″ />               //播放次数
<param name=”autoStart” value=”-1″ />               //是否自动播放-1是,0否
<param name=”currentMarker” value=”0″ />
<param name=”invokeURLs” value=”-1″ />
<param name=”volume” value=”50″ />                 //音量
<param name=”mute” value=”0″ />’);                   //是否静音-1是,0否
<param name=”uiMode” value=”none” />            //播放器模式full(默认)显示全部控件,none仅视频窗口,mini视频及一些常用控件,invisiblei不显示任何控件及视频窗口
<param name=”stretchToFit” value=”0″ />
<param name=”windowlessVideo” value=”0″ />
<param name=”enabled” value=”-1″ />’);
<param name=”enableContextMenu” value=”-1″ />
<param name=”fullScreen” value=”0″ />’);           //是否全屏
<param name=”enableErrorDialogs” value=”-1″ />//是否允许出错信息提示
</object>

JavaScript操作函数(wmp为播放机ID,注意区分大小写)

wmp.URL=””                            //播放媒体地址
wmp.controls.play()                  //开始播放
wmp.controls.stop()                  //停止播放
wmp.controls.pause()                //暂停播放
wmp.settings.mute=true | false   //控制是否静音
wmp.fullScreen=true | false        //控制是否全屏

获取播放机状态

wmp.playState                        //播放机状态,共有1-10个状态,具体如下

wmp.playState==1                //停止播放
wmp.playState==2                //暂停播放
wmp.playState==3                //正常播放
wmp.playState==4                //向前搜索
wmp.playState==5                //向后搜索
wmp.playState==6                //缓冲处理
wmp.playState==7                //等待反应
wmp.playState==8                //播放完毕
wmp.playState==9                //连接媒体
wmp.playState==10              //准备就绪

wmp.controls.currentPositionString    //取得媒体当前位置,以形如 06:01 的时间形式显示
wmp.controls.currentPosition             //取得媒体当前位置,以形如 300.001 的秒数形式显示,精确到毫秒
wmp.currentMedia.durationString      //取得媒体总长度,以形如 06:01 的时间形式显示
wmp.currentMedia.duration               //取得媒体总长度,以形如 300.001 的秒数形式显示,精确到毫秒

javascript 字符串处理全攻略

javascript 字符串处理
一、声明字符串:
var normal_monkey = “I am a monkey!<br>”;
document.writeln(“Normal monkey ” + normal_monkey);

var bold_monkey = normal_monkey.bold();
document.writeln(“Bold monkey ” + bold_monkey);

这里的声明: var bold_monkey = normal_monkey.bold();
和下面对声明是等同的:
var bold_monkey = “<b>” + normal_monkey + “</b>”;

第1个版本的声明看起来要简明得多。这里用到了字符串对象中
的bold对象,其他的字符串对象还有indexOf, charAt,
substring, 以及split, 这些方法可以深入字符串的组成结构。
首先我们研究一下indexOf。

2、indexOf
indexOf用于发现一系列的字符在一个字符串中等位置并告诉你子字符串的起始位置。如

果一个字符串中部包含该子字符串则indexOf返回returns “-1.”
例子:
var the_word = “monkey”;
//让我们从单词 “monkey”开始。
var location_of_m = the_word.indexOf(“m”);
//location_of_m(字母m的位置)将为0,因为字母m位于该字符串的起始位置。
var location_of_o = the_word.indexOf(“o”);
//location_of_o(字母o的位置)将为1。
var location_of_key = the_word.indexOf(“key”);
//location_of_key(key的位置)将为3因为子字符串“key”以字母k开始,而k

在单词monkey中的位置是3。
var location_of_y = the_word.indexOf(“y”);
//location_of_y)字母y的位置)是5。
var cheeky = the_word.indexOf(“q”);
//cheeky值是-1,因为在单词“monkey”中没有字母q。

indexOf更实用之处:
var the_email = prompt(“What’s your email address?”, “”);
var the_at_is_at = the_email.indexOf(“@”);
if (the_at_is_at == -1)
{
    alert(“You loser, email addresses must
    have @ signs in them.”);
}

这段代码询问用户的电子邮件地址,如果用户输入的电子邮件地址中不包含字符 则 提

示用户"@你输入的电子邮件地址无效,电子邮件的地址必须包含字符@。"

3、charAt
chatAt方法用于发现一个字符串中某个特定位置的字符。
这里是一个例子:
var the_word = “monkey”;
var the_first_letter = the_word.charAt(0);
var the_second_letter = the_word.charAt(1);
var the_last_letter = the_word.charAt(the_word.length-1);

the_first_letter(第1个字符)是”m”
the_second_letter(第2个字符)是”o”
the_last_letter(最后一个字符)是 “y”

注意利用字符串的length(长度)属性你可以发现在包含多少个字符。在本例中,

the_word是”monkey”,所以the_word.length是6。不要忘记在一个字符串中第1个字符的

位置是0,所以最后一个字符的位置就是length-1。所以在最后一行中用了

the_word.length-1。>>

4、子字符串(substring)
子字符串(substring)和charAt有些象,不同之处在于它能够从一个单词中抓取整个的

子字符串,而不只是字母,这里是其格式:

var the_substring = the_string.substring(from, to);

“From”指的是子字符串中第1个字母的位置,”to”有点奇特,它是该子字符串中比最后

一个位置大1的位置.使用这种神奇的方法你可以标记子字符串的起始和结束位置,用

“to”的位置减去”from”的位置就会得出该子字符串的长度:

var the_string = “monkey”;
var clergy = the_string.substring(0,4);
var tool = the_string.substring(3,6);

运行该段代码后变量clergy的值为”monk”; 变量tool的值为”key”。

子字符串常和indexOf一起使用,将字符串分成若干块.例如,
你可以从一个给定的URL中抽取出其域名:

var the_url = prompt(“What’s the URL?”,””);
var lead_slashes = the_url.indexOf(“//”);
var domain_start = lead_slashes + 2;
var without_resource = the_url.substring(domain_start, the_url.length);
var next_slash = without_resource.indexOf(“/”);
var domain = without_resource.substring(0, next_slash);

这段代码的意思是:如果你输入
http://www.webmonkey.com/javascript/index.html“;,则域名就是

“www.webmonkey.com” .如果这个方法对你来说有些麻烦,我将向你介绍如何使用split

方法简化其执行过程.但是首先我们作一些分析.

基本的技巧是将第1个斜杠和第2个斜杠之间的内容分离出来:
var the_url = prompt(“What’s the URL?”,””);
//这行代码向用户询问一个URL.假设用户输入了
http://www.webmonkey.com/javascript/index.html.”;
var lead_slashes = the_url.indexOf(“//”);
这行代码确定第一个双斜杠的位置.在本例中lead_slashes的值是5,因为双斜杠的位

置从5开始.

你可能会想,通常的URL都是以http://开始,所以双斜杠的位置肯定是在5开始,为什

么还要加入indexOf这一段多余的代码呢?但是问题的关键在于你不知道用户在填入URL

时是否一定填入http:,他们也许会不小心多键入了一个空格,也许他们所键入的URL在

一个加密服务器上,其URL是”https://www.whatever.com/“; .在编程你必须预料到种种

可能发生的问题.所以我们必须用indexOf方法确定双斜杠的确切的起始位置.

var domain_start = lead_slashes + 2;

这行代码用于计算该域名的第1个字母的起始位置.由于这里有一个双斜杠,所以域名

第1个字母的起始位置应该在双斜杠所在位置加2的位置.

var without_resource = the_url.substring(domain_start, the_string.length);

这段代码将域名起始位置往后的所有字符都提取出来.所以执行完这行代码后

without_resource是”www.webmonkey.com/javascript/index.html.”

var next_slash = without_resource.indexOf(“/”);

这行代码计算出该字符串中下一个斜杠的位置,而从该字符串起始位置到这个斜杠之间

的内容就是域名.在本例中下一个斜杠的位置是17。

var domain = without_resource.substring(0, next_slash);

最后一步是提取出该字符串起始位置到下一个斜杠之间的所有内容.在本例中使得域名

等同于”www.webmonkey.com”。

这样做确实很麻烦,利用split方法则可以使该过程容易很多.>>

5、分割方法(splitting method)
你可以使用split方法用限位器来分割一系列的名称,然后将其
放在一个数组中.例如:

var my_friends =”trixie,moxie,sven,guido,hermes”;

var friend_array =my_friends.split(“,”);

for (loop=0; loop < friend_array.length;loop++)
{    document.writeln(friend_array[loop] + ” is myfriend.<br>”);}

这段代码将字符串my_friends分割成包含5个元素的数组.JavaScript可以为你自动建

立一个数组,所以你无需使用new Array().

将字符串分割成数组之后,我们使用了循环语句写出每一个名称.我们可以利用split方

法简化前面所讲到的域名提取:

var the_url = prompt(“What’s the URL?”,””);
var first_split = the_url.split(“//”);
var without_resource = first_split[1];
var second_split = without_resource.split(“/”);
var domain = second_split[0];

这段代码简化了很多而且也更容易理解.我们来分析一些这段代码:

var the_url = prompt(“What’s the URL?”,””);

提示用户输入一个URL,假设用户输入
http://www.webmonkey.com/javascript/index.html“; .
var first_split = the_url.split(“//”);
将用户输入的字符串分割成两块:first_split[0]是”http:”,first_split[1]是

“www.webmonkey.com/javascript/index.html.”
var without_resource = first_split[1];
//提取出数组中的第2个元素,所以现在without_resource是

“www.webmonkey.com/javascript/index.html.”
var second_split = without_resource.split(“/”);
将without_resource分割成3块:www.webmonkey.com,javascript, 和index.html.现

在你可以看到split的用途了吧?

var domain = second_split[0];

现在我们提取出新数组中的第1个元素就可得出域名.