网站建设(3) - iLeichun

当前位置：首页 > 网站建设

9个提高网页设计水平的方法

分类:网站建设来源:网络时间:2012-2-20 22:17:34

一、想法

网页设计师必须善于思考，对设计主张自己的想法和理解，这是最重要的。别担心你的想法有多“烂”，没有人能一下子做好的，但你完全可以做好你的习惯和态度。学会大胆地摸索和尝试自己的想法，懂得借鉴，追求属于自己的创意。但是如果在设计时不动脑筋地套网页模板，套素材，甚至是盲目模仿和抄袭，那简直是在摧残你的创造力，滋养你的惰性，这样永远无法进步，而且以后想进步也非常困难。

二、欣赏

欣赏别人的作品，尤其是优秀作品，培养艺术鉴赏能力，这对于提高设计水平是必须的。看的时候不要走马观花，需要结合专业知识边看边想，仔细研究作品中值得学习的地方。但有人会抱怨要看作品自己却没有多少设计类书籍，上网找大量并且是自己需要的网页设计作品和设计资源又很浪费时间和精力，这里你建议去找汇集网络上所有优秀网页设计资源的网站，这样可以省下很多时间和精力去提高学习效率。

反复地欣赏优秀的网站作品。温故而知新，设计也是如此。收藏自己认为比较好的网页，过段时间再看看这些作品，往往会比第一次有更大的收获。

经常看看自己的作品。经常看看自己的过去设计的作品，你就会了解自己水平是否有所提高，同时也会有更多的设计体会。

三、练习

反复地大量地练习。如果缺乏练习，就算有足够的设计天赋也是无法提高网页设计水平。只有不断地练习，反复地练习，才能迅速提高设计能力，做得越多，提高得越快，这个是没有什么捷径可走的，必须踏踏实实地来。当然如果练习的时候不思考只会事倍功半，就像学画一样，不光要用笔画，更需要动脑。

四、审问自己

自己的作品能打动自己就是好作品吗？其实对自己作品满意并不是件好事。尤其是初学者对设计以及自身能力缺乏足够的认识往往会犯“自恋”的毛病，过于满意自己的设计，总以为自己设计得很完美，没有比这更好的，却不知自己设计得有多糟糕。相反，当你水平真正到达一定高度的时候，你对自己的设计就会有一个比较客观全面的认识，也就不会轻易满意自己的设计了。因此要学会审问自己，虚心向人求教，就会少走很多弯路。当你对自己的设计感到很满意的时候，记得审问自己，真的有那么好吗？

五、多问

学会交流，不懂就问。虽然大部分网页设计师性格都不太外向，但懂得如何与人沟通交流还是每个设计师必须掌握的课程。网页设计不是闭门造车，设计师不仅需要和客户交流，还需要和同事同学交流，当然也需要利用网络与其他设计师交流，只有善于交流的设计师才能更好更快地提高自己。

六、知识积累

网页设计师要掌握相关的专业理论知识，多看专业理论知识以查漏补缺。同时更需要学习各种各样的知识。拥有丰富的知识，你大脑里的“素材”就越多，它们都将可能参与到你的设计里，你的设计才会生动饱满，富有思想内涵。所以知名的设计大师们往往都是全才，他们不仅精通设计，更精通其他很多领域。

设计师需要懂得体会生活，了解世界。这需要实际调查和切身体会。否则你的设计就会容易脱离生活，失去感染力，因为设计源于生活并服务于生活。同时设计师需要了解世界，以增长更多的见识，保持最新的思想观念。一个思想落后、孤陋寡闻的设计师无论设计经验有多丰富，他的作品总会显得蹩脚和庸俗不堪。

当然，要想有丰富的知识和见识都需要你在平时生活中主动去注意和积累。

七、勤奋

设计师并不是一个轻松的职业，需要勤奋自学，优秀设计师大部分都是“自学成才”。如果平时没有抽时间主动去自我提高的话，那你的网页设计水平很难提高，甚至不进则退。因此建议在学习或工作之余，多多花时间在设计上，这样才能更迅速提高你的网页设计水平。

八、久

设计不是一朝一夕就能成功的，只有做久了才能拥有出色的设计水平和宝贵的设计经验。既然选择了设计师这个职业，就要有耐心，努力做得出色。虽然会遇到很多辛酸苦累，困难挫折，但不要退缩与放弃，没有这些，你的设计能力如何成长，你的经验如何获得？所以你需要做的是忘掉它们，朝前看，自信地坚持走下去，你的脚步总有一天会踏上平坦的道路，到那时，成功就在你面前向你招手微笑。

九、德

设计师的道德品质不仅会体现在生活中的每个细节，而且还会渗入到网页里，这也许就是对“设计为人”更深的一种诠释。如果一个设计师思想道德狭隘的话，那么迟早会扼杀掉自己艺术细胞，堵塞自己的艺术之路，因为艺术是从生活中提炼出来的，是人们所追求的真纯善美。设计师应该要拥有广阔的胸襟，才能拥有广阔的设计空间与灵感空间，你的设计之路才会走得更远更通畅。

阅读全文>>

浏览(8664) | 评论(0)

网站建设的26条定律

分类:网站建设来源:网络时间:2011-11-24 22:48:45

转自http://bbs.51.la

1.250定律
拉德认为：每一位顾客身后，大体有250名亲朋好友。如果您赢得了一位顾客的好感，就意味着赢得了250个人的好感；反之，如果你得罪了一名顾客，也就意味着得罪了250 名顾客。在你的网站访客中，一个访客可能可以带来一群访客，任何网站都有起步和发展的过程，这个过程中此定律尤其重要。

2.达维多定律
达维多认为，一个企业要想在市场上总是占据主导地位，那么就要做到第一个开发出新产品，又第一个淘汰自己的老产品。国内网站跟风太严重，比如前段时间的格子网，乞讨网，博客网，一个成功了，大家一拥而上。但实际效果是，第一个出名的往往最成功，所以在网站的定位上，要动自己的脑筋，不是去捡人家剩下的客户。同理，买人家出售的数据来建站效果是很糟糕的。

3.木桶定律
水桶定律是指，一只水桶能装多少水，完全取决于它最短的那块木板。这就是说任何一个组织都可能面临的一个共同问题，即构成组织的各个部分往往决定了整个组织的水平。注意审视自己的网站，是速度最糟糕？美工最糟糕？宣传最糟糕？你首先要做的，不是改进你最强的，而应该是你最薄弱的。

4.马太效应
《新约》中有这样一个故事，一个国王远行前，交给三个仆人每人一锭银子，吩咐他们：“你们去做生意，等我回来时，再来见我。”国王回来时，第一个仆人说： “主人，你交给我们的一锭银子，我已赚了10锭。”于是国王奖励他10座城邑。第二个仆人报告说：“主人，你给我的一锭银子，我已赚了5锭。” 于是国王例奖励了他5座城邑。第三个仆人报告说：“主人，你给我的一锭银子，我一直包在手巾里存着，我怕丢失，一直没有拿出来。”于是国王命令将第三个仆人的一锭银子也赏给第一个仆人，并且说：“凡是少的，就连他所有的也要夺过来。凡是多的，还要给他，叫他多多益善。”这就是马太效应。在同类网站中，马太效应是很明显的。一个出名的社区，比一个新建的社区，更容易吸引到新客户。启示是，如果你无法把网站做大，那么你要做专。作专之后再做大就更容易。

5.手表定理
手表定理是指一个人有一只表时，可以知道现在是几点钟，而当他同时拥有两只表时却无法确定。
一个网站，你只需要关注你特定的用户群需求。不要在意不相干人的看法。

6.不值得定律
不值得定律：不值得做的事情，就不值得做好不要过度seo，如果你不是想只做垃圾站。不要把时间浪费在美化再美化页面，优化再优化程序，在你网站能盈利后，这些事情可以交给技术人员完成。

7.彼得原理
劳伦斯.彼得认为：在各种组织中，由于习惯于对在某个等级上称职的人员进行晋升提拔，因而雇员总是趋向于晋升到其不称职的地位。
不要轻易改变自己网站的定位。如博客网想变门户，盛大想做娱乐，大家拭目以待吧。

8.零和游戏原理
当你看到两位对弈者时，你就可以说他们正在玩“零和游戏”。因为在大多数情况下，总会有一个赢，一个输，如果我们把获胜计算为得1分，而输棋为-1分，那么，这两人得分之和就是：1+（-1）=0 不要把目光一直盯在你的竞争网站上，不要花太多时间抢它的访客。我们把这些时间用来寻找互补的合作网站，挖掘新访客。

9.华盛顿合作规律
华盛顿合作规律说的是：一个人敷衍了事，两个人互相推诿，三个人则永无成事之日。
如果你看准一个方向，你自己干，缺人手就招。不要轻易找同伴一起搞网站，否则你会发现，日子似乎越过越快了，事情越做越慢了。

10.邦尼人力定律
一个人一分钟可以挖一个洞，六十个人一秒种却挖不了一个洞。合作是一个问题，如何合作也是一个问题。你需要有计划。

11.牛蛙效应
把一只牛蛙放在开水锅里，牛蛙会很快跳出来；但当你把它放在冷水里，它不会跳出来，然后慢慢加热，起初牛蛙出于懒惰，不会有什么动作，当水温高到它无法忍受的时候，想出来，但已经没有了力气。如果你是soho，注意关注你的财务。不要等到没钱了再想怎么挣，你会发现那时候挣钱更难。

12.蘑菇管理
蘑菇管理是许多组织对待初出茅庐者的一种管理方法，初学者被置于阴暗的角落（不受重视的部门，或打杂跑腿的工作），浇上一头大粪（无端的批评、指责、代人受过），任其自生自灭（得不到必要的指导和提携）。做网站毕竟要遭遇这样的阶段，搜索引擎不理你，友情链接找不到，访客不上门。这是磨练。

13.奥卡姆剃刀定律
如无必要，勿增实体。
把网站做得简单，再简单，简单到非常实用，而不是花俏。google的首页为什么比雅虎好？

14.巴莱多定律(Paredo 也叫二八定律)
你所完成的工作里80%的成果，来自于你20%的付出；而80%的付出，只换来20%的成果。
随时衡量你所做的工作，哪些是最有效果的。

15.马蝇效应
林肯少年时和他的兄弟在肯塔基老家的一个农场里犁玉米地，林肯吆马，他兄弟扶犁，而那匹马很懒，慢慢腾腾，走走停停。可是有一段时间马走得飞快。林肯感到奇怪，到了地头，他发现有一只很大的马蝇叮在马身上，他就把马蝇打落了。看到马蝇被打落了，他兄弟就抱怨说：”哎呀，你为什么要打掉它，正是那家伙使马跑起来的嘛！” 在你心满意足的时候，去寻找你的马蝇。没有firefox，不会有ie7，firefox就是微软的马蝇之一。马蝇不可怕，怕的是会一口吃掉你的东西，像 ie当初对网景干的那样。

16.最高气温效应
每天最热总是下午2 时左右，我们总认为这个时候太阳最厉害，其实这时的太阳早已偏西，不再是供给最大热量的时候了。此时气温之所以最高，不过是源于此前的热量积累。
你今天的网站流量，是你一个星期或更长时间前所做的事带来的。

17.超限效应(溢出效应)
刺激过多、过强和作用时间过久而引起心理极不耐烦或反抗的心理现象，称之为“超限效应”。别到别人论坛里发太多广告。别在自己网站上放太多广告。别在自己的论坛里太多地太明显地诱导话题。

18.懒蚂蚁效应
生物学家研究发现，成群的蚂蚁中，大部分蚂蚁很勤劳，寻找、搬运食物争先恐后，少数蚂蚁却东张西望不干活。当食物来源断绝或蚁窝被破坏时，那些勤快的蚂蚁一筹莫展。“懒蚂蚁”则“挺身而出”，带领众伙伴向它早已侦察到的新的食物源转移。不要把注意力仅仅放在一个网站上，即使这个网站现在为你带来一切。你要给自己一些时间寻找新的可行的方向，以备万一。

19.长尾理论
ChrisAnderson认为，只要存储和流通的渠道足够大，需求不旺或销量不佳的产品共同占据的市场份额就可以和那些数量不多的热卖品所占据的市场份额相匹敌甚至更大。对于搜索引擎，未必你需要一个热门词排在第一位，如果有一千个冷门词排在第一位，效果不但一样，还会更稳定更长远。

20.破窗理论
栋建筑上的一块玻璃，又没有及时修好，别人就可能受到某些暗示性的纵容，去打碎更多的玻璃。管理论坛时，如果你发现第一个垃圾贴，赶紧删掉他吧。想想：落伍现在为什么那么多××贴？现在控制比最初控制难多了。

21.“羊群效应”，又称复制原则(Copy Strategy)
一个羊群(集体)是一个很散乱的组织，平时大家在一起盲目地左冲右撞。如果一头羊发现了一片肥沃的绿草地，并在那里吃到了新鲜的青草，后来的羊群就会一哄而上，争抢那里的青草，全然不顾旁边虎视眈眈的狼，或者看不到其它地方还有更好的青草。
不要轻易跟风，保持自己思考的能力。

22.墨菲定律
如果坏事情有可能发生，不管这种可能性多么小，它总会发生，并引起最大可能的损失。
除非垃圾站，否则不要作弊，对搜索引擎不要，对广告也不要。

23.光环效应
人们对人的某种品质或特点有清晰的知觉，印象比较深刻、突出，这种强烈的知觉，就像月晕形式的光环一样，向周围弥漫、扩散，掩盖了对这个人的其他品质或特点的认识。
不要轻易崇拜一个人或者公司、一个概念、一种做法。

24.蝴蝶效应
一只亚马逊河流域热带雨林中的蝴蝶，偶尔扇动几下翅膀，两周后，可能在美国德克萨斯州引起一场龙卷风。
不管你做什么，网站或者其他，你都应该关注新闻。机遇或者灾难可能就在那。

25.阿尔巴德定理
一个企业经营成功与否，全靠对顾客的要求了解到什么程度。我赞同别人的点评：看到了别人的需要，你就成功了一半；满足了别人的需求，你就成功了全部。尤其是做网站。

26.史密斯原则
如果你不能战胜他们，你就加入到他们之中去。
不要试图做孤胆英雄。如果潮流挡不住，至少，你要去思考为什么。

阅读全文>>

浏览(9304) | 评论(0)

HTML4和HTML5的10个区别

分类:网站建设来源:网络时间:2011-11-21 22:58:54

HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站。如果你同时使用HTML4和HTML5的话，你会发现用HTML5从头构建，比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆HTML4，它们还是有很多相似之处，但是它们也有一些关键的不同。本文就列出了它们之间10个关键的不同之处。

1. HTML5 标准还在制定中
首先要注意的是，HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变。HTML4已经10多年了，不会有任何改变了。

2. 简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写<!doctype html>就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。

3. <canvas>标签替代Flash
Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能，但是很快<canvas>就会让 Flash看起来老土，哈哈！

4. 新增 <header> 和 <footer> 标签
HTML5设计的一个原则是更好的体现网站的语义性，所以增加了<header>和<footer>这样的标签，用来明确表示网页的结构。

5. 新增 <section> 和 <article> 标签
与<header>, <footer>类似，<section>和<article>也有利于清晰化网页的结构，更有利于SEO。

6. 新增 <menu> 和 <figure> 标签
<menu>可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。<figure>标签使得网页文字和图片的排版更专业。

7. 新增 <audio> 和 <video> 标签
这两个标签可能是HTML5里面最有用的两个标签了。顾名思义，这两个标签是用来播放音频和视频的。

8. 全新的表单
HTML5对 <form> 和 <forminput> 标签进行了大量修改，添加了很多新的属性，也修改了很多属性。

9. 删除 <b> 和 <font> 标签
这个改进我还无法理解。我不认为删除这两个标签对代码的改进有很大的帮助。官方的解释是应该用CSS来替代这两个标签。但我还是觉得对于简单的文本，这两个标签还是很方便的。

10. 删除 <frame>, <center>, <big> 标签
我已经记不得上次是什么时候使用这些标签了。

阅读全文>>

浏览(8267) | 评论(0)

CSS实现兼容性的渐变背景

分类:网站建设来源:网络时间:2011-11-21 22:27:25

一、有点俗态的开场白

要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。

本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。

二、IE浏览器下的渐变背景

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码：

filter: progid:DXImageTransform.Microsoft.gradient

(startcolorstr=red,endcolorstr=blue,gradientType=1);

相关说明：
上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。

上面代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用：

filter:alpha(opacity=100 finishopacity=0 style=1

startx=0,starty=5,finishx=90,finishy=60)

其中各个参数的含义如下：
opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。

综合上述，实现IE下含透明度变化红蓝垂直渐变的代码如下：

.gradient{     width:300px;     height:150px;     filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,

          finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient

          (startcolorstr=red,endcolorstr=blue,gradientType=1);     -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,

          finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient

          (startcolorstr=red,endcolorstr=blue,gradientType=1); }  <div class="gradient"></div>

结果如下图：

IE6下含半透明的渐变背景效果张鑫旭-鑫空间-鑫生活

三、Firefox浏览器下的渐变背景

对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性，-moz-linear-gradient属性，在之前文章我详细介绍了Firefox3.6下渐变背景的实现。这里我就不再具体讲述了，对于本文开头提到的要实现的效果的实现可以参见下面的代码：

.gradient{     width:300px;     height:150px;     background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); }  <div class="gradient"></div>

此段代码在Firefox3.6浏览器下的效果是：

Firefox3.6下含半透明的渐变背景效果张鑫旭-鑫空间-鑫生活

四、chrome/Safari浏览器下的渐变背景实现

对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法，css-gradient，具体为-webkit-gradient，使用语Firefox浏览器是有一些差异。具体使用就不详述了，参见下面的代码：

.gradient{
    width:300px;
    height:150px;
    background:-webkit-gradient(linear, 0 0, 0 bottom,
from(#ff0000), to(rgba(0, 0, 255, 0.5))); }  <div class="gradient"></div> 

此段代码在Safari 4浏览器下的效果是：

Safari下含半透明的渐变背景效果张鑫旭-鑫空间-鑫生活

补充于2011-04-07
Opera11也支持了CSS3渐变。其用法与Firefox一致，需要使用-o-的前缀。另外，Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。

五、综合 – 兼容性的渐变背景效果

JavaScript判断浏览器类型与版本

分类:网站建设来源:网络时间:2011-11-10 0:09:12

/**
* @deprecated 获取浏览器类型,调用getOS();
* @return 浏览器名字
*
*/
function getOS()
{
if(navigator.userAgent.indexOf("MSIE")>0)
{
   return "MSIE";
}
else if(isFirefox = navigator.userAgent.indexOf("Firefox")>0)
{
   return "Firefox";
}
else if(isSafari = navigator.userAgent.indexOf("Safari")>0)
{
   return "Safari";
}
else if(isCamino = navigator.userAgent.indexOf("Camino")>0)
{
   return "Camino";
}
else if(isMozilla = navigator.userAgent.indexOf("Gecko/")>0)
{
   return "Gecko";
}
else
{
   return "";
}
}

function versionNumber()
{
return parseFloat(navigator.appVersion);
}

var isFirefox2 = navigator.userAgent.indexOf("Firefox")>0 && parseFloat(navigator.appVersion) == 2;
var isFirefox3 = navigator.userAgent.indexOf("Firefox")>0 && parseFloat(navigator.appVersion) == 3;

var isIE6 = navigator.userAgent.indexOf("MSIE")>0 && parseFloat(navigator.appVersion) == 6;
var isIE7 = navigator.userAgent.indexOf("MSIE")>0 && parseFloat(navigator.appVersion) == 7;
第一种，只区分浏览器，不考虑版本

//调用上面的函数

if(myBrowser()=="IE"){alert("IE");}
if(myBrowser()=="FF") {alert("Firefox");}
if(myBrowser()=="Opera"){alert("Opera");}
if(myBrowser()=="Safari") {alert("Safari");}

//下面这两句是显示 navigator.userAgent 信息以方便理解
var userAgent = navigator.userAgent;
document.write(userAgent);
</script>
</head>

第二种，区分浏览器，并考虑IE5.5 6 7 8

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 判断浏览器</title>
<script type="text/javascript">
function myBrowser(){
var isFF = userAgent.indexOf("Firefox") > -1 ; //判断是否Firefox
var isSafari = userAgent.indexOf("Safari") > -1 ; //判断是否Safari

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera ; //判断是否IE

if(isIE){
   var IE5 = IE55 = IE6 = IE7 = IE8 = false;
   var reIE = new RegExp("MSIE (d+.d+);");
   reIE.test(userAgent);
   var fIEVersion = parseFloat(RegExp["$1"]);

   IE55 = fIEVersion == 5.5 ;
   IE6 = fIEVersion == 6.0 ;
   IE7 = fIEVersion == 7.0 ;
   IE8 = fIEVersion == 8.0 ;

   if(IE55){ return "IE55"; }
   if(IE6){ return "IE6"; }
   if(IE7){ return "IE7"; }
   if(IE8){ return "IE8"; }
}//isIE end

if(isFF){ return "FF"; }
if(isOpera){ return "Opera"; }

}//myBrowser() end

//调用上面的函数

if(myBrowser()=="FF") {alert("Firefox");}
if(myBrowser()=="Opera"){alert("Opera");}
if(myBrowser()=="Safari") {alert("Safari");}

if(myBrowser()=="IE55"){alert("IE5.5");}
if(myBrowser()=="IE6") {alert("IE6");}
if(myBrowser()=="IE7"){alert("IE7");}
if(myBrowser()=="IE8") {alert("IE8");}

//下面这两句是显示 navigator.userAgent 信息以方便理解
var userAgent = navigator.userAgent;
document.write(userAgent);
</script>
</head>

阅读全文>>

浏览(8505) | 评论(0)

PHP/ASP/JSP/ASP.NET/CGI的301重定向代码

分类:网站建设来源:网络时间:2011-3-12 20:26:07

301重定向不但可以在Apache服务器或者IIS中配置，也可以使用代码的形式来做301重定向，而且方法很简单，这里icech整理了一个各种语言编写的301重定向代码给大家，各取所需吧！

PHP 301 重定向代码

301重定向也可以在php文件中通过加入php header来实现，代码如下：

    <?php
    header("HTTP/1.1 301 Moved Permanently");
    header("Location: http://farlee.info/newpage.html");
    exit();
    ?>

ASP 301 重定向代码

    <%@ Language=VBScript %>
    <%
    Response.Status="301 Moved Permanently"
    Response.AddHeader "Location", http://farlee.info
    %>

ASP.NET 301 重定向代码

ColdFusion 301 重定向代码

<.cfheader statuscode="301" statustext="Moved permanently">
<.cfheader name="Location" value="http://farlee.info/newpage.html">

CGI Perl下的301转向代码

$q = new CGI;
print $q->redirect("http://farlee.info");

JSP下的301转向代码

    <%
    response.setStatus(301);
    response.setHeader( "Location", "http://farlee.info" );
    response.setHeader( "Connection", "close" );
    %>

文章来源：侠客站长站(www.xkzzz.com) 详文参考：http://www.xkzzz.com/zz/netbc/php/201009/22-56332.html

阅读全文>>

浏览(7314) | 评论(0)

20个网页制作技巧

分类:网站建设来源:网络时间:2011-2-15 22:30:06

1）怎样将 Dreamweaver 集成到 IE 浏览器？

　　Dreamweaver 安装程序会在上下文选单增加一个“ Edit with Dreamweaver ”命令，我们还可以修改 Windows 的注册表使它与 IE 集成。就象 MS Word 、 Frontpage 和 Notepad 一样，通过 IE 工具栏的编辑按钮来调用 Dreamweaver 打开当前网页。

　　将下面文本的最后一行要改为你自己的 Dreamweaver 安装路径，把它们保存为一个 *.reg 文件，双击它将信息添加到注册表即可。

　　REGEDIT4
　　[HKEY_CLASSES_ROOT.htmOpenWithListDreamweaver]
　　[HKEY_CLASSES_ROOT.htmOpenWithListDreamweavershell]
　　[HKEY_CLASSES_ROOT.htmOpenWithListDreamweavershelledit]
　　[HKEY_CLASSES_ROOT.htmOpenWithListDreamweavershelleditcommand]
　　@="C:Program filesMacromediaDreamweaver 3dreamweaver.exe %1"

　　如果要设置为 IE 缺省的编辑器，打开 IE 的“Internet 选项”，在程序标签指定。

　　2）为了使用某些脚本，经常要为图形或文本加上空链接，但是浏览时点击有空链接的对象时，会跳到页面的顶端，如何避免？

　　因为浏览器以为链接到同一页，可它又找不到定义的书签（ anchor ），于是停留在页面的顶端。用“ javascript:void(null) ”替换空链接的“ # ”，解决这个问题。

　　3）使用 CSS 、层的时候，在不同浏览器的效果不一样，有时甚至出现错位现象，怎样解决？

　　在对不同浏览器的兼容方面， Dreamweaver 作得不错，但绝不意味用 Dreamweaver 作出的网页在 IE 和 Netscape 中完全一样。通常情况下，用不同的浏览器浏览同一个网页的外观不可能完全一样，这是不同厂家的浏览器本身决定的。

　　一般要尽量注意以下问题：

　　不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内；

　　内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式；

　　有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。对于只有几个像素宽度或高度的层，改用图片来实现；

　　避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。

　　4）为何从别的文档拷贝文本到 Dreamweaver ，所有的段落会挤成一团，而在 Dreamweaver 内部又带有格式代码？

　　Dreamweaver 复制和粘贴文本有二种类别，标准的方式将对象连同对象的属性一起复制，把剪贴板的内容作为 HTML 代码；另一种方式仅复制或粘贴文本，复制时忽视 html 格式，粘帖时则把 html 代码作为文本粘贴。多按一个“ Shift ”（ Ctrl+Shift+C/Ctrl+Shift+V ）键即按后一种方式操作。

　　5）为什么网页用 IE 浏览正常，用 Netscape Navigator 却不符合要求甚至出错，而且在 Dreamweaver 的文档窗口老是修改不好？

　　请检查代码。因为用所见所得编辑器反复修改页面的某些部分，有时会留下一些多余的代码，比如多余的链接，这些代码在 Dreamweaver 的文档窗口看不到， IE 会忽视它们。但是 Netscape Navigator 对代码要求更严格，预览时就出现不可思议的现象。

　　6）在 Netscape Navigator 中，有些书签（ anchor ）不起作用，有些好象消失了？

　　Netscape Navigator 的书签是大小写敏感的。在 Navigator 中，多层嵌套的表格里面的书签会丢失，把书签放到表格外面。

　　7） Dreamweaver 文档窗口布满了各种各样的面板，为了编辑文档，不得不扒开一个个空隙，太累，如何是好？

　　一个 800X600 分辩率的屏幕对于 Dreamweaver 来说确实小了些，不过即便是 1024X768 ，也放不下所有的面板。关键是好好组织。

　　关闭那些在编辑中暂时用不到的面板，把常用的面板放在一起，节省屏幕空间；

　　除非现在要用，否则关闭“ HTML Source Inspector ”，它除开占用屏幕空间，还占用相当的系统资源；

　　按 F4 隐藏所有打开的面板，一览文档的全貌，再按一下，显示面板；

　　在“ Windows ”选单有个“ Arrange Floating Palettes ”命令，使用这个命令将所有打开的面板放在窗口四周，并互不重叠。

　　多用快捷键并熟练掌握是很好的提高工作效率的方法。

　　当添加不可见的对象时，Dreamweaver会在文档窗口的页面顶部加上相应的图标，如果图标太多，可能妨碍编辑。可以按“Ctrl+Shift+I ”（主选单 View　Invisible Elements ）来隐藏和显示它们。也可以设定不出现这些图标，不过不建议这样作，因为它们能帮助选择对象，便于编辑。

　　8） Head 对象面板只能添加内容，能在文档窗口修改 < head> 标记的内容吗？

　　可以。有一种非常直观的方式，按“ Ctrl+Shift+W ”（主选单 View　Head Content ），在文档窗口主选单栏下出现一行图标，点击这些图标修改。

　　9）如何选择表格、层里面那些非常小的，比如 1X1px 的图片？

　　在表格的单元格中点击，然后按下“ Shift ”键，用箭头键移动即可选择。

　　也可先选定表格单元（按下 Ctrl 键，用鼠标点击相应单元）或者层，然后在“ HTML Source Inspector ”面板中选择高亮代码中的 < img src="..."> ，返回文档窗口，图片即被选择。

10）怎样编辑一个框架系的名字（Title）？
　　按“ Ctrl+F10 ”打开“ Frames ”面板，点击最外面的框，按“ Ctrl+J ”（主选单 Modify　Page Properties ）。

　　11）如何改变“behaviors”的缺省事件？
　　事件设定文件放在 Dreamweaver 安装目录下的“ ConfigurationBehaviorsEvents ”文件夹，比如对于 4.0 以上版本浏览器，打开文件“ 4.0 and Later Browsers.htm ”。
< A onClick="*" onDblClick="" onKeyDown="" onKeyPress="" onKeyUp="" onMouseDown="" onMouseOut="" onMouseOver="" onMouseUp="">

　　将“ onClick="*" ”中的“*”移到“ onMouseOver="" ”中，改为： < A onClick="" onDblClick="" onKeyDown="" onKeyPress="" onKeyUp="" onMouseDown="" onMouseOut="" onMouseOver="*" onMouseUp="">
　　重新启动 Dreamweaver ，该类缺省事件即变为“onMouseOver ”。其他类推。

　　12）在打开一个页面时，同时打开一个小窗口，用 Dreamweaver 能够实现吗？
　　能，不用写一行代码。在“ behaviors ”面板使用内置的“ Open Browser Window ”脚本，设定页面、窗口大小、属性。如图：

　　13）插入表格时，在表格单元中老是有个空格（ < td> < /td> ），怎样才能不让它产生？

　　这是 Dreamweaver 自动生成的，不要删除它。如果表格单元里没有任何东西， Netscape Navigator 将不显示该单元。

　　14）模板文档的 < head> 标记里，除了网页主题外不能编辑，怎样才能将 behaviors 加入到基于该模板的网页？

　　用“ HTML Source inspector ”面板在模板文档的“ < /head> ”前加入可编辑标记，如下：
　　< !-- #BeginEditable "Javascript" -->
　　< script language="JavaScript">
　　< /script>
　　< !-- #EndEditable -->

　　15）在合作开发和管理网站时，使用 Dreamweaver 的登记/检查系统，是否为远程服务器的网站的相关文件加上了不同的访问权限？

　　check in/check out 是 Dreamweaver 内部使用的一种管理机制，它与文件的属性无关。“ check out ”意味着该文件正被我使用，别人不能编辑它；“ check in ”则表示该文件可以被别的同事 check out 及编辑，本地的文件就会变成只读，防止自己改变它的内容。

　　Dreamweaver 通过在本地和远程服务器上产生相应的 “.lck” 文件来实现 check in/check out 功能，这些文件在“ Site ”窗口不显示， Dreamweaver 能够读这些文件，它只对 Dreamweaver 有效。并没有为文件加上什么属性。如果用别的 Ftp 工具和编辑器，仍旧可以打开它们。

　　16）作网页时，鼠标飞舞，经常改变了设置好的图片的大小。能够不重新查看图片就纠正吗？

　　如果图片的大小不符，在属性面板，它的值会变成显目的粗体。按面板上的“ Refresh ”按钮，就可恢复成真实大小。

　　17）如何才能单击一个链接，同时改变多个框架？

　　最直接的方法就是为该链接建立一个框架系。

　　用 Dreamweaver 的“ Go to URL ” behavior 更简单。对话框显示所有的框架，在下面的“ URL ”栏填入相应的页面就是。

18）想给文本加上 behavior ，可是 behavior 面板上的项目都是灰暗的，不可选的，怎么办？

　　以前遇到这种情况，我一般在文本旁边插入一张图片，把需要的 behavior 加在图片上。然后再编辑代码，移到文本上，并去掉图片。

　　上面的作法较繁琐，便捷的方式是将文本链接到“ javascript:void(null) ”，那些 behavior 就老老实实显露出来了。

　　19）把使用了 behaviors 的层放进 Library 时， Dreamweaver 不让层的 behaviors 跟着走，怎么办？
　　用模板来作。

　　20）检查 Flash 插件并重定向的脚本有时不正常，还有别的方法吗？

　　制作 Flash 网页时，人们习惯使用 Dreamweaver 的“ check plugin” behavior 来重定向。但是有时它会错报，明明安装了插件，却说没有。下面介绍一种稳妥的方法来重定向。

　　制作一个新的首页作为重定向的页面。用“ head ”对象面板的“ Insert Refresh ”定向到未使用 Flash 技术的网页，如图。它会在页面头部加上如下代码： < meta http-equiv="refresh" content="4;URL=noflash.htm">

　　另作一个很小的 Flash 影片，在第一帧加上一个“ Get url ”行为，指向使用 Flash 技术的页面。把这个小影片嵌入到用来定向的首页。

阅读全文>>

浏览(7287) | 评论(0)

DIV+CSS与table布局的比较

分类:网站建设来源:网络时间:2011-2-15 22:26:10

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

DIV
CSS单元的位置和层次-div标签

我们都知道，在网页上利用HTML定位文字和图像是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图像，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。

而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！

Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。
● 1．使用 DIV 标签（div）

当我们使用 CSS-P 的时候，我们主要把它用在 DIV（division）tag 上。当你把文字，图像，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。

使用 DIV 的方法跟使用其他 tag 的方法一样：

如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用 <P></P> 是一样的。

但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它，比如说移动它或改变它的一些性质等等。

This is a truck

</DIV>

给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。

Inline CSS：Inline 是最常用的方法。

This is a truck .

</DIV>

External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。

</STYLE>

<DIV ID="truck">This is a truck .</DIV>

Cross-Browser CSS 性质：

我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作，所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。

position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。

left 相对于窗口左边的位置

top 相对于窗口上边的位置

width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。

height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。

clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。

clip:rect(top,right,bottom,left);

visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。

z-index DIV tag 的立体位置。值越大 DIV 的位置越高。

background-color DIV 背景的颜色。

layer-background-color Netscape 的 DIV 背景颜色。

background-image DIV 的背景图像。

layer-background-image Netscape 的 DIV 的背景图像。

● 2．绝对定位和相对定位（position）

绝对定位：

定位属性将是网虫们打开幸福之门的钥匙：

H4 { position: absolute; left: 100px; top: 43px }

这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。

左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。

你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图像、QUICKTIME电影等等。

相对定位：

绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：

I { position: relative; left: 40px; top: 10px }

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。

除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。

● 3．定位单元的控制（width、height、visiblility）

除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。

宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。

宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图像。你可以通过宽度设置人为地拉宽或压缩图像。

高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

这里我用了“理论上讲”，因为有些浏览器不支持高度属性。

可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。

H4 { visibility: hidden }

选项：

visible 使要素可以被看见

hidden 使要素被隐藏

inherit 指它将继承母体要素的可视性设置。

值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。

当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图像周围，那么，其显示效果将是文字包围着一块空白区域。此新闻

这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图像只在鼠标滑过时才显示。

● 4．单元层次（z-index）

特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。

该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图像设定z-index。（对于Communicator，最好将 <IMG>标签包在<SPAN>或 <DIV>标签内，然后将z-index应用到<SPAN>或 <DIV>。）

● 5．剪辑绝对定位单元（clip）

绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实线文本“划入”和图像渐显等显示特征。

在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为 auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框：

clip : rect(top,right.bottom,left) ;

其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。取值为 auto 意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。

● 6．控制单元溢出（overflow）

固定绝对或相对定位单元的 width 和 height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出：值 none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。

和webpage打交道起页面布局就一直是我关注的内容，从早期table构架页面到DIV再到DIV＋Table，可以说我们的需求一直在变，但是目的一直没有改变。为什么这么说，很明显从简单到复杂，再从复杂到简单；从简单运用到复杂运用；一切都是围绕需求性来做的。很多开发设计人员在从事页面布局开发的时候都要考虑到几点：布局是否合理，结构是否紧凑，是否有充分的扩展性，可读性是否强。而合理使用Table和DIV来构架我们的web是我们探讨的一个重要问题。对此要从几个不同的方位来看待：

一. 定位
首先，严格意义来说，table和div都是可用合理的布局方法，你不能否认table的价值，或者div只有优点没有缺点。可以说web架构即可以使用table也可以div。那么关键就是你对你的web需求的定位。

我们需要考虑到web页面给我们的site会带来多大的影响。如我们的site针对的海量的访问，海量的数据，（当然cache问题这里不讨论）那么在构架上通常会减少table使用量，尤其是大量的循环的时候，当然table也是有用的。对于复杂的site来说，div+css有时候很难准确定义出我们所表达的内容这时候table就是很好的选择。这也是开发前要考虑的问题，在要达到开发目的的同时保证所需要的成本。同样用div+css来实现一个结构复杂的page时往往不如用一个table就能简单得搞定。

二. 特性
table和div有其各自得特征。这也意味着他们价值取向有不同，对于开发设计的人员来说很重要的。

table可以很容易建立起结构化的界面，通过table自身的参数定义，我们能把页面布局很快定义成我们所需要的效果。当然css的配合就可以相对减少。缺点就是扩展性和可读性相对较差，扩展性差表现在维护和修正上面，一个复杂的table布局的site，她的海量页面在随着需求变化下，开发人员将一筹莫展，大量的修改需求会把web的界面开发工作彻底粉碎。可读性差，这个也是相对来说，来看个例子：我们用同一效果table和div来显示一个 page

－－－－table－－－－
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3" bgcolor="#FF0000"> </td>
<td> </td>
<td rowspan="3" bgcolor="#0000FF"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
－－－－table－－－－

－－－－div 1－－－－
<div style="width:100px;background-color:red;"></div>
<div style="width:100px;background-color:white;">
<div></div>
<div></div>
<div></div>
</div>
<div style="width:100px;background-color:blue;"></div>
－－－－div 1－－－－

－－－－div 2－－－－
<div style="display:inline-table; width:300px;">
<div style="float:left; width:200px; clear:left">
<div style="display:inline-table;">
<div style="float:left;clear:left;width:100px; background-color:red;"></div>
<div style="float:right; clear:right; width:100px;">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div style="float:right; width:100px; clear:right; background-color:blue;"></div>
</div>

－－－－div 2－－－－
...

table在表现上更加“严谨”，有局限性。在表现复杂的结构时会非常难懂。往往我们的website的程序内容又十分庞大，对开发人员来说要把代码马上从头脑中有清晰的轮廓十分不易。

div呢，在html语法中我们知道div的含有和作用，如果用它来实现布局页面的话，几乎完全要靠css来支撑，可以说div不能单独使用，尤其是针对性强的web，给用户视觉上的效果要求十分严格，div的使用要配合专业的css参数来实现。从前面的例子可以看出div布局更加灵活，能简单也能够复杂。相同的显示效果在css和div的配合上可以产生不同的搭配方式。扩展性强是她的优点，开发设计人员只要对相应的css做调整就能让布局焕然一新，这点是table远远不及的。但在对结构相对复杂的局部，往往div+css开发难度高，一个简单效果div和css要写半天，这点table就好很多了，用dw之类的所见即所得的软件下我们可以轻易做出用div+css写半天才能做出的东西。

阅读全文>>

浏览(8410) | 评论(0)

什么是Web2.0啊

分类:网站建设来源:网络时间:2010-10-23 15:15:26

业内普遍的一种说法是，微内容是Web2.0的一个关键词。其中，微内容包括个人所形成的任何数据:比如一则网志、一个评论、一幅图片、收藏的书签、喜好的音乐列表、想结交的朋友等等。这些微内容，充斥在了人们的生活、工作和学习的方方面面。而Web2.0重点要解决的正是对这些微内容的重新发现和利用。于是，我们看到了这样的现象，只要是和微内容相关的技术和架构，都是以Web2.0为名义的。

也有人这么界定，Web2.0是相对Web1.0的新的一类互联网应用的统称。并且由此断言，由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。就目前的发展情况而言，Web2.0是以 Flickr、Craigslist、Linkedin、Tribes、Ryze、 Friendster、Del.icio.us、43Things.com等网站为代表，以Blog、TAG、SNS、RSS、wiki等应用为核心，依据六度分隔、xml、ajax等新理论和技术实现的互联网新一代模式。

无论怎样的注脚，我们都不难发现，这个Web2.0的概念，在很大程度上并不是从技术创新角度出发的，或者说与技术没有很大的相关性。如果从应用的角度看，Web2.0或许更好理解一些，它就像一个带着光芒的大筐，凡是于以往集中式互联网不同的模式或者技术，都可以框在其中。

Web1.0到Web2.0的转变，具体的说，从模式上是从读向写、信息共同创造的一个改变;从基本结构上说，则是是由网页向发表/展示工具演变;从工具上，是由互联网浏览器向各类浏览器、rss阅读器等内容发展;运行机制上，则是自“Client Server”向“Web Services”的转变;由此，互联网内容的缔造者也由专业人士向普通用户拓展。说白了，Web2.0的精髓就是以人为本，提升用户使用互联网的体验。这样远大的理想，这样庞大的范畴，也难怪新锐们凡是都要以Web2.0为名义了。

阅读全文>>

浏览(7295) | 评论(0)

Firefox常用web开发插件

分类:网站建设来源:网络时间:2010-9-13 19:51:19

　　Web Developer

　　以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当前所浏览的网页。

　　说明：超强的web分析工具，开发人员必装

点击这里进入下载

　　Firebug

　　Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等，但FireBug最吸引我的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari），简直难以置信。除此之外，其他功能还很强大。比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。

　　说明：查看，编辑，Debug页面的CSS,HTML,JavaScript。超强的开发调试的工具，开发人员必装。

点击这里进入下载

　　View Source Char

　　画一个 Color-Coded 的图表的 Web 页的源代码。

　　说明：显示非常好看的源码,分级缩进,不同颜色区分。

点击这里进入下载

　　Tamper Data

　　Tamper Data 的真实含义，即“篡改数据”（或者说定制 HTTP 请求）：截取浏览器发出的每一个 HTTP 请求，提示我们选择是要进行定制，还是不做定制而直接提交请求，还是终止当前被截取的请求，然后根据我们的选择决定是打开定制窗口，还是直接向 WEB 服务器提交请求，还是终止当前的请求。

说明：查看 firefox收发请求的 header,特别是在发出请求前,可以修改 header。

点击这里进入下载