设计师的十条准则或者称之为妥协

1. Never engage in an argument or oppose the person who holds your cheque; he/she is probably more concerned about the outcome of your design than yourself.
永不与付款给你的人争论或对抗,他/她们肯定比你更关心设计后的结果。

2. Things are not design oriented; your design will first and foremost be used to deliver a message to the market for your client, before it is an item of personal artistic expression.
作品并非设计主导的,在为艺术家表达自己之前,你的设计首先及主要为你的客户用于传递一个市场信息。

3. Communicate patiently with your clients. Remember, they are not designers, so use their language to get your idea across.
要有耐性和你的客户沟通。紧记他们并非设计师,故须用他们的语言来阐述你的观点。

4. I believe there is meaning and a story behind your designs and works, but if you don’t put effort into telling me, how will I fully understand?
我相信每个你的设计和作品背后都有一个意思和故事,但你不用心去说明,我又如何可完全明白呢?

5. Respect the deadline; meeting it improves your credibility and will impact your career development.
尊重期限时间,做到将可改善你的可信任度和增进你的事业发展。

6. People prefer to talk to someone who is presentable, meaning clean and tidy. Stylish doesn’t have to mean unclean and untidy, do you catch my drift?
人们喜欢与注重外型的人倾谈,意思是清洁及整齐。型格并非是肮脏及混乱,你能领略我的意思吗?

7. Punctuality is important, it is important to anyone who is professional, which includes designers.
守时是十分重要的,特别是专业人员,专业人员包括设计师。

8. Never get angry during the price negotiation process, it’s just business and nothing to do with insulting your work. There is no reason for them to do so anyway, if you really think about it.
不要在讨论价钱过程中动怒,这只是商业而己,他们并非在羞辱你的作品。你要知道,他们并没有任何理由去做此事的。

9. Your reputation can be proved by business references or winning awards. Don’t forget to win more awards, because it is what customers believe in.
你的名气是来自商业推介或获取奖项。不要忘记去获取更多奖项,它会使顾客更相信你。

10. Never, ever, attempt to copy others’ designs for any reason at all. It is a death sentence to any designer.
无论任何理由,永不要企图抄袭别人的设计。这会是任何设计师死亡之路。

 

 

设计师有自己的想法,还得明白我们的生存来源

鼠标点击,文本框内灰色字体消失,输入字体颜色是黑色

 

<input name="textfield"type="text"value="点击添入标题"onfocus="if (value =='点击添入标题'){value =''}"onblur="if (value ==''){value='点击添入标题'}"/>

 

效果如左

 

 <input class="input" type="text" value="点击添入标题" onblur="if(this.value=='') this.value='点击添入标题'" onfocus="if(this.value =='点击添入标题' ) this.value=''">                     —————-兼容浏览器IE6-IE10

 改进版本二 输入字体颜色是黑色

1、<input type="text" value="点击填写标题"  onblur="if(this.value==''){this.value='点击填写标题';this.style.color='#999'}" onfocus="if(this.value=='点击填写标题'){this.value='';this.style.color='#000'}" style="color:#999"/>

2、<input type="text" value=" 请输入关键词" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999999">

 

 

CSS sprites 精灵图片

引言:

  提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

本文的目的不是阐述精灵图片如何让网页下载更快,而是介绍在创建精灵图片时的一些实战经验。

下面是一张精灵图片
CSS Spriting 不要等你完成所有工作后再开始使用CSS精灵

在网站全部完成后,你的CSS和图片也都已经创建好了,这时候你再使用CSS精灵,也就意味着你要返回重写CSS,并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片,这是非常痛苦和乏味的。如果在刚开始构建页面时就着手使用CSS精灵,那么一切都会变得简单。

按图片显示相反的方向放置图片

这一条有点难以理解,我是在创建一张大的精灵图片中途失败后才意识到它的。假如一张图片应该出现在一个元素的左边,如下图
appear-left
请将这张图片放在精灵的右边(看上面的示例精灵图片)。用这种方式处理后,当你用CSS移动背景图片时,不可能会有别的图片会(错误的)显示处理。

避免在CSS使用bottom或right定位

当定位CSS精灵中靠后的图片时,使用类似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初,这一切都能正常工作,但是,一旦你的CSS精灵宽度或高度增加时,你刚才使用的定位方式就发现了错误,因为图片相对右边或者底边的距离已经发生了变化。所以,请使用left和top来定位。

为每张图片留出足够空隙

正如你所看到文章中提供的例子精灵图片一样,许多小图片间都预留了很多空白。为什么不把图片挤得紧凑点让精灵图片尺寸更小点呢?因为使用元素的地方可能包含各种不同的内容,这些内容会导致容器变宽变高,预留了足够的空白的话,在容器大小发生变化时,可以避免其他的图片显示出来。

这有一个例子:
为每张图片留出足够空隙

每个列表都使用一个数字图片作为背景。看看上面的示例CSS精灵,你会发现这几张图片是交错排列的,这样处理后,不管怎么增加,其他的图片都不会显示出来。

不要担心CSS精灵的尺寸大小

如果你有机会以标准的web设计来设计你的网站,那么你必定要将把很多图片放到精灵图片上,并且为这些图片预览出合适的空隙,这很好。精灵图片中的空白空隙不会增加太多文件的体积,在addons.mozilla.org网站上使用的精灵图片尺寸是1,000×2,000,但它仅16.7kb!

原文Url:http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

相关阅读:http://www.alistapart.com/articles/sprites

起因:以前在某技术群问过——为什么淘宝之类的大型网站,小图标都在一张图上。

            记得当时的群友给的解答是因为路径一致,访问的时候就在一个图片上了。后来也有些疑惑,为什么有的图片另存就是一张一个,有的另存竟然是一张N个呢。前天才知道原来这是利用的css 精灵,和在一张图片上,利用xy轴的坐标来定位。减少文件体积、减少对服务器的请求次数,提高效率。

【转】【技术类】div滚动条属性及样式设置

     某次做活动面的时候需要滚动条是卡通的,不过后来还是用的默认的。但是找到了这个,有用到的可以借鉴。

     PS:在火狐浏览器中还是用的默认的滚动条,控件还是用默认的。

当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置滚动条相关的属性。

<style tyle="text/css">
.testDiv{
border-style: solid ;
border-width: 50px ;
border-color: pink ;

position: absolute ;
top:200px ;
left:300px ;
height:200px ;
width:300px ;

overFlow-x: scroll ;
overFlow-y: hidden ;

scrollBar-face-color: green;
scrollBar-hightLight-color: red;
scrollBar-3dLight-color: orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;

}

</style>

注:

1. overFlow:

visible 却省值,没有滚动条,根据内容自动扩撑区域的大小,即定义的区域无效
scroll 总是显示滚动条
hidden 没有滚动条,超出区域的内容不可见
auto 根据内容自动判断是否添加滚动条

2.滚动条颜色属性:

  face-color:滑块颜色
  hightlight-color:高亮颜色
  3dlight-color:三维光线颜色
  darkshadow-color:暗影颜色
  shadow-color:阴影颜色
  arrow-color:箭头颜色
  track-color:滑道颜色
base-color:滚动条的主要颜色,其中包含滚动按钮和滚动滑块

3.overFlow-x       overFlow-y

visible 却省值,没有滚动条,根据内容自动扩撑区域的大小,即定义的区域无效
scroll 总是显示滚动条
hidden 没有滚动条,超出区域的内容不可见
auto 根据内容自动判断是否添加滚动条

<div style="WIDTH: 120; HEIGHT: 140; BACKGROUND-COLOR: #0000C6; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
文字内容
</div>

<div style="WIDTH: 120; HEIGHT: 140;OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
文字内容
</div>

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF"&
gt;
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-

【转】【技术类】新手怎样学习Flash及as脚本编程?

        转载这个文章源自于在百度知道上搜索关于flash的东西。之后进入这个相关链接的博主,发现他那里就一精粹。虽然我想在里面看下他写的关于工作规划啥的。

一、写这个文章的起因:

        经常遇到很多人想学习Flash,但是不知道从何学起,有的朋友甚至对于学会了Flash,能做些什么也很疑惑。

        本人结合若干年Flash学习研究经验,给想学习Flash的朋友一些建议,也欢迎大家访问我的空间,http://hi.baidu.com/billypc给我留言。如转载本文,希望多多宣传本空间,谢谢。

       一般来说,Flash的学习主要有两个方向,一是专攻Flash动画,一是专攻Flash编程,当然也有动画和编程都学习的很到位的人,那是牛人。不过这里我主要分析一下Flash的这两种方向如何开始学习,如何快速掌握。

二、FAQs

问:学习flash做动画需不需要美术基础啊?
答:
        首先,要说明的是,Flash动画也分为几种。

        最重要的应用就是做动画片,比如早期的ShowGood三国,小小,现在的小破孩系列,开心驿站系列,燕尾蝶等。这些都是动画片制作,这一类的flash需要有很好的美术功底,需要有诸如手绘,视觉感,镜头感等相关的专业知识。这一类的动画制作基本上需要美术和动画的专业知识。而Flash只是作为一个动画制作的工具而已,一个动画片在从开始到结束,更多的需要的是美术及动画方面的专业知识。

       另一类应用是Flash广告和Flash特效,这一类Flash大量应用于网络,从网站主页Flash动画,到网站内部的一些广告,一些吸引眼球的效果,都属于这一类应用。一般学习Flash的人,基本上都在做这样的东西。包括一些初学者在内,都认为这就是Flash,其实这只是Flash最简单的应用。制作这一类的Flash一般需要一些创意,有一定的视觉感,有美术基础的人会更加得心应手。有时候会需要掌握一些基础的flash as,比如制作flash菜单,flash跳转效果等。

       Flash在动画的制作过程中,主要扮演的是工具的角色,是目前动画制作中效率比较高的工具之一,而一个好的动画,并不依赖于你用什么工具,而依赖于你的专业程度。专业知识越扎实,创意越新颖,做出的动画就越好。而工具的学习仅仅是第一步。


问:我也不知道应该学习哪个方向,动画和编程哪个好学啊?
答:
       学做动画,和学做编程,这样两个方向,其实不仅仅是做什么的不同,也是思维方式的不同。

       一般来说,做动画受视觉因素影响,而编程主要受逻辑思维影响。从很宽泛的角度上来说,学动画,就是学感觉,学新思维。而学编程,就是学逻辑,学思维方式。美学不仅仅是能感觉到,还是一种创意思维,是感性的。而程序逻辑则完全是一种逆向思维,是理性的。

       一般情况下,逻辑思维可以通过培训等,在短时间内锻炼出来,所以编程应该来说是人人都能学会的,而且是可以通过死记硬背在短时间内速成的。

       而感性思维,或者说创造性思维,是很难一下子就养成的,就像我们学画画,没有个一年半载,根本画不出什么好的东西,而且很多画画好的都是从小开始培养的。所以学动画短时间内很难有一些突破,仅仅只能停留在一个较低的层面上,这也就是为什么很多人只会做flash广告,而做不了大于3分钟的动画,或者说做不出高质量的动画的原因了。

        但是从入门的角度上来看,会用flash的人,一般都能从事简单flash动画的制作,其实这主要是依靠了FLASH这款工具的强大,并非代表着做动画很简单,或者你很聪明,一下子就学会了,入门也许很简单,但是越想提高一个层次就越困难,比如学会FLASH没多久,就会做flash主页,flash广告等,那是因为这个没有什么难度,所以综合看来,我认为,如果想在短时间内,从事flash工作的话,可以先掌握flash的应用,能制作简单flash动画,然后学习编程,短期内会很有效果。从长期来看,学习一些美术基础,对做动画会大有帮助。


问:我最近想去学flash制作,在网上找了找,发现有很多制作软件,如flash MX,flash MX2004和flash cs3 Pro,哪款比较好啊?
答:
       2000年 flash 5.0
       2002年 flash mx (就是flash 6.0)
       2004年 flash mx2004 (就是flash 7.0)
       2005年 flash 8.0
       2006年 flash cs3 (就是flash 9.0)
       2008年 flash cs4 (就是flash 10.0)

       目前的最新版本是flash cs4 功能非常强大,不仅支持骨骼动画,还支持3维等等,verycd上有视频教程,可以去学习一下。

      不过初学的话,个人建议你从flash cs3开始,以便今后玩flash cs4,因为他们的操作性很相似,Flash 8现在虽然还是很多人在用,但是已经渐渐被新软件的新功能所取代。

      FLASH CS3的好用之处::

      1.cs3是ADOBE收购micromedia后的大作,无论从动画设计上,还是程序语言上都有质的飞跃。比如钢笔功能更加强大,超级强大的绘图功能,这些都让矢量图制作者提高了效率,使用更方便。

      2.FLASH CS3引入了面向对象的AS3语言,使得AS不在是一个简简单单的脚本语言,而摇身变成一种强大的高级程序语言。另外,FLASH CS3也全面支持AS之前的版本,从AS1到AS2均支持。

     3.作为初学者,因为没有基础,不存在用惯一个版本的软件,用新版本时要重新熟悉的问题,所以应尽量选择最新版本的软件进行学习,因为时代是在进步的,老版本的软件,学完了也就淘汰了,再学新的,还得重新熟悉界面及操作习惯。

     4.目前由于flash cs4 10月份刚刚推出,目前CS4的教材并不多也不系统,所以建议以FLASH CS3作为学习的开始,而且FLASH CS4的界面和CS3差不多,只是加了些新功能。


问:怎样学会flash编程,要有什么基础,要学c语言吗,哪里有教程啊?该怎么学啊??

答:
        如果你只是了解一下,网上的视频教程很多,可以去看一看。

        但是如果你是很想学会,那么我建议你,要学习一门知识,就必须看系统的教材。因此不推荐看视频教程,网上的视频教程虽然很多,但是都很难系统性的教会你代码的结构、编程的思想。所以我的建议是买书学习。最好不要看电子书,个人觉得,看电子书的人,都喜欢跳着看,这样

【转】DIV CSS网页布局中易出现的问题

这是我在别人博客里面看到的,感觉比较有用就转了过来。以前写内嵌的时候,直接就写<style=“padding:30px 0 10px 20px;”>根本就没有写过< style type=“padding:30px 0 10px 20px;”>.

也许有很多东西来自于不经意间

DIV CSS网页布局中易出现的问题.应用Div+CSS网页布局,制作符合web标准的网站,容易出现的一些问题。

一.CSS校验的问题

我们设计的网页,都希望符合XHTML标准,CSS通过W3C的校验。有些未通过CSS2.0校验,主要校验错误都是:“Line : 0 font-family: 建议你指定一个种类族科作为最后的选择”
W3C建议字体定义的时候,最后以一个类别的字体结束,而不要以单独某个字体结束。例如"sans-serif"就可以保证在不同操作系统下,网页字体都能被显示。

虽然多数人都在body标签上定义了"sans-serif",但在其它的id或class中再次定义字体时漏了sans-serif,被认为校验不通过。这个错误不是很严重,只要稍加注意就可以避免。

二.CSS的书写建议

给CSS文件加注释。注释会为你今后的维护带来方便,建议尽可能给CSS文件加注释,不要担心增加少量的字节。 尽量简写CSS语法。比如颜色值"#FFFFFF"可以简写成"#FFF";"padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px"可以简写为"padding:30px 0 10px 20px;"。在定义技巧上有更多的节省技巧,随着对CSS应用的熟练,你会不断发现更好的办法。

三.XHTML校验的问题

往往大家对CSS的校验比较注意,但在XHTML符合标准方面有点忽视,出现很多低级错误。主要问题罗列如下:

◎target="_blank",这个语法在HTML4.0里是正确的,在XHTML1.0里是不允许使用的。解决的办法之一是写成target="new",另外一个办法是用js处理所有的target;
◎样式表最好不要内嵌,将样式表文件独立出来易于维护。如果内嵌<style>一定要写成<style type="text/css">,其中的type不能忽略,否则XHTML无法判断你的style作用在什么方面。
◎<br>必须写成<br />,XHTML要求所有的标签必须关闭,不成对的标签直接在后面加" /"。
◎重复使用同一ID。一个ID在XHTML中只能使用1次,如果需要多次引用样式,应该使用class。
◎Flash的嵌入方法错误。<embed>最早是Netscape的私有标签,即使后来为IE所支持,但始终没有被W3C承认,在HTML4.0没有<embed>这个标签。W3C主张的是采用<object>标签。为了解决不同浏览器的兼容,有一个变通的解决方法是2个标签都采用。

完整的示例代码如下(flash背景为透明):

<object
classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="300" height="100">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="SRC" value="test.swf">
<embed src="test.swf" wmode="transparent" quality="high"
pluginspage="Flash">http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="300" height="100">
</embed>
</object>

但直接写在XHTML中依然不可以,我们现在只能通过把上面代码写在flash.js文件里,然后再调用来骗过校验。

<script type="text/javascript" src="flash.js"></script>

关于flash是否符合标准,是一个存在争议的问题。

◎类似id=header class=title代码都应该写成id="header" class="title"。给属性值加引号是最XHTML基本的语法规则。

四.兼容的问题

有些网站在IE6.0、Mozilla Firefox1.0、Opera 7.12中浏览发生变形和错位。
在IE里居中,但Mozilla里没有。在IE中设置body {TEXT-ALIGN: center;}就已经可以居中了,但在Mozilla中必须对需要居中的层再加入以下样式设置:MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

超出宽度。在Mozilla里看正常的页面,在IE里因为超出宽度而变形,并排的层移到下面去了。这个情况是因为IE和Mozilla对盒模型解释不同造成的,有很多解决办法,比如"!important"方法。

web标准和CSS布局已经被越来越多的设计师了解和掌握。CSS布局经过一段时间的消化理解和应用,会有更多技术美观兼顾的网页涌现。