DW8.CN | 中国缔吧 中国缔吧，DreamWeaver中国区首选学习咨讯金牌站！—— 网页缔造者之吧 http://www.dw8.cn 28 June 2005 10:15:00 GMT +8 cn-zh http://www.dw8.cn/images/logo.gif http://www.dw8.cn/common/dw8.xml DW8.CN info@dw8.cn <![CDATA[DIV+CSS常用的网页布局代码]]> http://www.dw8.cn/dw8_4/494.asp DW8 2009-2-7 18:40:16 单行一列

以下是引用片段：

body { margin: 0px; padding: 0px; text-align: center; } 

#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列

以下是引用片段：

body { margin: 0px; padding: 0px; text-align: center;}
 
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 

#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

三行一列

以下是引用片段：

body { margin: 0px; padding: 0px; text-align: center; } 

#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 

#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 

#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

单行两列

以下是引用片段：

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } 

#bodycenter #dv1 {float: left;width: 280px;} 

#bodycenter #dv2 {float: right;width: 410px;}

两行两列

以下是引用片段：

#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} 

#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 

#bodycenter #dv1 { float: left; width: 280px;} 

#bodycenter #dv2 { float: right;width: 410px;}

三行两列

以下是引用片段：

#header{ width: 700px;margin-right: auto; margin-left: auto; } 

#bodycenter {width: 700px; margin-right: auto; margin-left: auto; } 

#bodycenter #dv1 { float: left;width: 280px;} 

#bodycenter #dv2 { float: right; width: 410px;} 

#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

单行三列

绝对定位

以下是引用片段：

#left { position: absolute; top: 0px; left: 0px; width: 120px; } 

#middle {margin: 20px 190px 20px 190px; } 

#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位一

xhtml:

以下是引用片段：

<div id="warp"> 

<div id="column"> 

<div id="column1">这里是第一列</div> 

<div id="column2">这里是第二列</div> 

<div class="clear"></div> 

</div> 

<div id="column3">这里是第三列</div> 

<div class="clear"></div> 

</div>

CSS:

以下是引用片段：

#wrap{ width:100%; height:auto;} 

#column{ float:left; width:60%;} 

#column1{ float:left; width:30%;} 

#column2{ float:right; width:30%;} 

#column3{ float:right; width:40%;} 

.clear{ clear:both;}

float定位二

xhtml:

以下是引用片段：

<div id="center" class="column"> 

<h1>This is the main content.</h1> 

</div> 

<div id="left" class="column"> 

<h2>This is the left sidebar.</h2> 

</div> 

<div id="right" class="column"> 

<h2>This is the right sidebar.</h2> 

</div>

CSS:

以下是引用片段：

body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;} 

.column {position: relative;float: left;} 

#center {width: 100%;} 

#left {width: 180px; right: 240px;margin-left: -100%;} 

#right {width: 130px;margin-right: -100%;}

两行三列

xhtml:

以下是引用片段：

<div id="header">这里是顶行</div> 

<div id="warp"> 

<div id="column"> 

<div id="column1">这里是第一列</div> 

<div id="column2">这里是第二列</div> 

<div class="clear"></div> 

</div> 

<div id="column3">这里是第三列</div> 

<div class="clear"></div> 

</div>

CSS:

以下是引用片段：

#header{width:100%; height:auto;} 

#wrap{ width:100%; height:auto;} 

#column{ float:left; width:60%;} 

#column1{ float:left; width:30%;} 

#column2{ float:right; width:30%;} 

#column3{ float:right; width:40%;} 

.clear{ clear:both;}

三行三列

xhtml:

以下是引用片段：

<div id="header">这里是顶行</div> 

<div id="warp"> 

<div id="column"> 

<div id="column1">这里是第一列</div> 

<div id="column2">这里是第二列</div> 

<div class="clear"></div> 

</div> 

<div id="column3">这里是第三列</div> 

<div class="clear"></div> 

</div> 

<div id="footer">这里是底部一行</div>

CSS:

以下是引用片段：

#header{width:100%; height:auto;} 

#wrap{ width:100%; height:auto;} 

#column{ float:left; width:60%;} 

#column1{ float:left; width:30%;} 

#column2{ float:right; width:30%;} 

#column3{ float:right; width:40%;} 

.clear{ clear:both;} 

#footer{width:100%; height:auto;}

PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！

]]> <![CDATA[DIV+CSS建立符合web标准网页的好处]]> http://www.dw8.cn/dw8_4/493.asp DW8 2008-12-29 18:43:44 使用DIV+CSS建立符合W3C标准网站对程序员是有非常多的益处的，我们看如下的八条优势。

一、使用div的方式进行程序的嵌套，特别是使用php这样的代码嵌套，可以减少出现像table中那样繁重的代码，对于页面嵌套可以减少因table代码而带来的问题。

二、使用div对于设计使用AJAX等的时候，可以减少Javascript代码对于页面控制时候的复杂度，因为使用table的时候，层次关系最起码有三层，table-tr-td以上，而使用div则基本上只有两层(div-div)的概念。

三、用div对于页面的定位更准确，因为使用div的代码的宽度高度等都使用css或者页面的style方式控制，即在需要修改一个框(box)的大小、位置时候，可以直接修改css的代码或者该标签的style代码即可实现。而几乎不用修改其他代码，但是使用table的情况下，则可能会因为table的位置出现变动，而影响到对整片代码的修改。

四、在页面效果来说，由于Firefox等浏览器再对table方面进行了很多的优化，才使得目前firefox在处理页面的输出时候可以这么接近IE的效果，但是在对于一些table的排版，用firefox 会存在一下莫名起码的以为等问题。这些问题在IE中可能不存在，但是在使用Firefox等其他引擎的浏览器就可能会出现了。

五、就是输出的代码将更小。由于使用div进行页面代码的组织，而布局由CSS等文件进行控制，因此从输出的html中产生输出的代码要一般比使用table的页面少70%。从系统的负载上考虑，将会更好解决因为代码上面的损耗，对维护系统的稳定起到一定的帮助。

六、更方便搜索引擎的搜索，目前的搜索引擎只是对页面的代码进行分析，因此页面代码更小而且有语意页面，搜索引擎的效能会更高，用户的文字信息会更容易被搜索引擎进行收集，对于web网站来说被将会更容易被搜索引擎所引用。

七、无可避免，在页面的一些位置，我们还是依旧使用table方式表现，比如说一些商品列表，订单列表,提交表单等，我们依旧使用table的方式来实现，因为对于这样的表格表现形式，使用div实现时候还不太成熟。

八、最后W3C标准是目前网站开发的主流，作为专业的web开发团队，哪有理由不使用这种技术呢!

]]> <![CDATA[DIV+CSS相对Table的优势]]> http://www.dw8.cn/dw8_4/492.asp DW8 2008-12-28 18:52:55 代码臃肿：你至少需要写下<table><tr><td>这三个标签之后，才能开始真正的内容，另外，Table的各种标签中还包含了复杂的属性定义，而Div只需<div>一个标签。

页面渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。

不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。

可访问性差：屏幕朗读软件和盲文浏览器无法很好地理解Table中的内容。

不够语义（Semantic）：我们需要语义的Web。

第1条：代码臃肿

首先，Table里面唯一无法用CSS定义的属性只有Cellspacing，Cellpadding几个，其它属性都可以并且应当使用CSS，这样，剩下的，就是<table><tr><td>和<div>的对决，我相信一个动辄几十K大小的网页，即使使用了几十个Table，因此多出来的代码也可以忽略不计，那些埋怨Table代码臃肿的人其实该检查自己的编码习惯，能将Table写得十分臃肿的人，写Div相比也未必会简洁到哪里。

第2条：页面渲染性能问题

我使用一台2004年的笔记本电脑，1.6G的CPU与1G内存，这种配置下，看不出Table布局和Div布局在页面渲染上有任何速度差别，其实这点差别即使有，相对网络本身的延迟也可以忽略。

第3条：不利于搜索引擎优化

如果你尽可能使用CSS而不是Table的属性，前面说了，产生的代码和Div的差别也不会很大，搜索引擎会歧视<table>标签吗，这种说法的依据我至今并没有找到。

第4条：可访问性差

这是Table固有的缺陷，不过多数Div+CSS的拥趸似乎并不是基于这个原因才排斥Table。

第5条：不够语义

语义Web的含义要深远得多，并不是仅仅在Table和Div上纠缠，即使W3C，也并没有规定Table只能用来显示表格数据，很多在Table的语义上进行纠缠的人，其实不妨再等等HTML5，那才是真正的语义。

本文的目的不是让你丢弃Div投身Table，相反，如果Div能满足你的设计需要，Div仍是首选，但没必要避讳Table，否则会走入另外一个极端。很多使用Div无法简单实现的设计，仍可以使用Table，当然，不管使用什么，都应该用CSS将内容与修饰分离。Div+CSS和Table+CSS都是合法的设计，谁更简单就用谁。根据我的经验，当你能预见你的内容的格式，对你即将加入的内容有能力完全控制其显示格式时，应当使用Div+CSS；当你即将加入的内容是不固定的，你无法预见其格式，如果不想让页面坍塌，使用Table+CSS是一种保险的做法。

]]> <![CDATA[W3C与DIV+CSS对SEO的帮助]]> http://www.dw8.cn/dw8_4/491.asp DW8 2008-12-3 10:18:05 W3C网页设计标准是一种技术也是一种思想。

现在基本上很多高端的客户都会要求按照W3C标准来设计网站。在今年和去年这两年时间里，国内很多的门户网站都已经按照W3C标准对网站整体进行代码重构。

用W3C标准来设计网站,有个好处：提高用户体验,加快网页下载速度。按照W3C标准设计的网站,用户浏览速度比较快,因为网站的代码比较简洁。

有一部分的朋友说，做好DIV+CSS，网站优化就等于做好了80%的工作。思亿欧并不赞同这个观点。

在传统的表格与DVI+CSS对于排名的影响两者比较，思亿欧并没有觉得后者有什么优势可言。因为实际上用DIV+CSS来设计的网站,也并没有因此得到搜索引擎的特别的照顾。

但是使用DIV+CSS来设计网站,确实能够对SEO起到一些帮助。

例如:

一、减少使用表格

表格层层嵌套,确实对SEO与用户体验有不利的影响,这同时也影响网页的下载速度。

二、降低网页体积

上百K的网页，不利于SEO，不利于搜索引擎的蜘蛛爬行。DIV+CSS设计网页，能够让精简网页HTML代码，让网页体积变得更小。

三、重要信息优先让搜索引擎蜘蛛爬取

通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。

思亿欧的建议:对于是用DIV+CSS设计网站还是用表格来设计网站,可以根据自己的技术实力来决定。DIV+CSS设计的网站，这个和域名一样，并没有多少先天性的优势。

提升网站价值,重点是在于后天的培养。

]]> <![CDATA[CSS实用技巧18招]]> http://www.dw8.cn/dw8_4/490.asp DW8 2008-11-1 10:51:24 一.使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

二.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如:width: 100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:

div#content { }

fieldset.details { }

可以写成

#content { }

.details { }

这样可以节省一些字节。

五.默认值

通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样:

* {

margin:0;

padding:0;

}

六.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个class"update"

p {

margin:1em 0;

font-size:1em;

color:#333;

}

.update {

font-weight:bold;

color:#600;

}

这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《Calculating a selector’s specificity》了解更多。

八.多重class定义

一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有10 px的边框。

.one{width:200px;background:#666;}

.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

Item 1>

Item 1

Item 1

这段代码的CSS定义是:

div#subnav ul { }

div#subnav ul li.subnavitem { }

div#subnav ul li.subnavitem a.subnavitem { }

div#subnav ul li.subnavitemselected { }

div#subnav ul li.subnavitemselected a.subnavitemselected { }

你可以用下面的方法替代上面的代码

Item 1

Item 1

Item 1

样式定义是:

#subnav { }

#subnav li { }

#subnav a { }

#subnav .sel { }

#subnav .sel a { }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如:

background:url("images

margin:0 auto;

}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

body {

text-align:center;

}

#wrap {

width:760px;

margin:0 auto;

text-align:left;

}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

@import url("main.css");

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法:

@import "main.css";

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {

}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {

}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧:

* html p {

declarations

}


2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSSHacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。

十七.调试技巧:层有多大?

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式:

selector1,

selector2 {

property:value;

}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。

]]> <![CDATA[《Dreamweaver CS3网站制作炫例精讲》书讯]]> http://www.dw8.cn/dw8_0/489.asp DW8 2008-10-30 8:49:18
http://www.phei.com.cn/bookshop/bookinfo.asp?bookcode=TP071250&booktype=main

本书内容简介：本书是一本介绍利用Dreamweaver软件进行网页制作、网站建设的书籍。Dreamweaver是工具，制作网页建设网站是目的。本书通过大量的网页实例让读者在掌握网页制作技巧的同时不知不觉理解并应用Dreamweaver的工具功能，这是本书的最大特点。

本书内容有三部分组成，分别是基础篇、提高篇和综合篇。基础篇主要是针对网页制作所需的基础技术作入门性讲解，通俗易懂能很快上手。提高篇则对于如何快速制作网页、如何融入最新网页制作技术作详细介绍，以确保读者在掌握基础的同时也能接触到网页制作的流行技术。对于综合篇，本书则通过介绍各类不同网站的建设作为每章的叙事蓝本，让读者深切体会到制作网页、建设网站的完整流程，同时也是对不同类型网站的建设体验。

本书重点推荐使用遵循Web标准的CSS布局方式进行网页的设计制作，并且本书介绍的就是通过Dreamweaver软件来进行的CSS布局。这是本书的又一特点也是最大亮点。

本书对于网页初学者建立新思维指明了方向，对于传统网页设计者转变新思维提供了借鉴，更重要的是对Dreamweaver各项功能进行了立体化的范例介绍，是适合初、中级网页设计爱好者们一本不错的书籍。

本书的特色:本书是一本介绍利用Dreamweaver软件进行网页制作、网站建设的书籍。Dreamweaver是工具，制作网页建设网站是目的。本书通过大量的网页实例让读者在掌握网页制作技巧的同时不知不觉理解并应用Dreamweaver的工具功能，这是本书的最大特点。本书重点推荐使用遵循Web标准的CSS布局方式进行网页的设计制作，并且本书介绍的就是通过Dreamweaver软件来进行的CSS布局，这是本书的又一特点也是最大亮点。


封面（是不是有点类似AI、CD之类的软件用书-_-!）


彩插


彩插


彩插


章节标题（每章节的人物剪影是一大特色：）


单页面（个人觉得版本设计的不错，谢谢设计编辑）


全页
]]> <![CDATA[纯CSS实现多列多模块等高布局]]> http://www.dw8.cn/dw8_4/488.asp DW8 2008-10-14 16:32:39 　　首先给大家看一个图：

　　以前我们在布局这种需要多列多模块，多列等高，一般会选择横着切一张背景图来进行模拟，这个也是没有办法的办法。

　　我们知道单纯的两列等高我们可以利用正内边距加负外边距来实现。padding-bottom:32767px; margin-bottom:-32767px;

　　这个方法的原理是事先通过正内边距来使其拥有足够高的布局控件，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。

　　习惯思维上，我们都是多列等高，然后把这几列都浮动。现在我们变换一下思路，直接使用不浮动的一列的时候，情况会怎样，我们发现，当一列不浮动搭配正内边距加负外边距，父元素溢出隐藏，它的高度跟还是由内在元素来决定，但是通过web developer toolbar我们可以看到它实际上已经占据了足够的高度空间。

　　同样的道理，定位也遵循这个规则。我们可以把两侧边框使用绝对定位来固定到两侧，因为绝对定位是不占布局空间的，那么我们需要一个文档流来对父元素进行占位。基本上父元素有多高，就显示绝对定位的元素多少内容，实际上这也就实现了一个等高。

　　知道了这个表现原理，那么我们上文的布局也就不难了，只需要把每列最后一个模块再进行正内边距加负外边距来进行空间占位就可以实现了！至于下边框，实际上另外一个容器从底下进行拼装实现的~！

　　下面放上全部代码：


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　上述代码在IE6,IE7,FIREFOX里皆能正常显示，但是在IE8 BETA1里面，似乎必须配合浮动，正内边距跟负外边距的多余空间才能被隐藏，希望正式版的IE8会修复这一点。如果想在IE8 BETA1里面正常显示，请大家把最后一个模块也进行浮动即可~！在此就不做演示了！

]]> <![CDATA[DreamWeaver CS4新特性之JavaScript]]> http://www.dw8.cn/dw8_0/487.asp DW8 2008-9-27 8:35:49
于是在官方下载了DreamWeaver CS4的PreRelease版来测试，解压和安装没有什么太多要说的，只是感觉比早先啊的DreamWeaver CS3的安装速度要快了不少，安装完毕，发现界面与之前相比有了一定的改变，如图（上图为DreamWeaver CS3，下图为DreamWeaver CS4）：





除了界面上的改变，该版本作为一个重要的里程碑版，还有许多更新，诸如：
  • 针对 Ajax 和 JavaScript 框架的代码提示
  • Adobe InContext Editing
  • HTML 数据集
  • Subversion® 集成
  • CSS 最佳做法
等，更多可以查看官方的fetures页。

这里我主要给您介绍一下关于JavaScript的部分新特性。

一、JavaScript代码外链。

我们知道，出于种种目的考虑，我们一般不在页面直接撰写JavaScript代码，而是将其放在外部的js文件中，这样做的好处，除了便于管理整个站点的JavaScript之外，还有助于多多借助客户端对js文件的缓存，减少很少改变的js文件的网络传输流量的浪费。

另外，出于多人协作和便于管理、便于敏捷变化和代码分层等原因，我们应该尽可能的做到结构-表现-行为的分离，在平常的代码编写中，你可能大量使用了诸如

<a onclick="alert_me('this is a link')" href="#">Click to alert me</a>

这样的代码，然而，这样做却是将行为耦合到了基本的代码结构中，我们提倡以添加事件的方式来将其完全分离到JavaScript代码中，这个操作也可以由DreamWeaver CS4来完成。

在DreamWeaver CS4中，则为我们提供了此功能，这个功能你可以在【Commands】->【Externalize JavaScript】中找到。

为了测试这两项特性，我们撰写了如下的代码：

< !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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alert_me(msg)
{
alert(msg);
}
</script>
</head>
<body>
<a href="#" onclick="alert_me('this is a link')">Click to alert me</a>
</body>
</html>

你可以看到，在这段代码中，不仅在页面中出现了JavaScript函数，而且还将行为直接绑定在了HTML标签中，这时使用【Commands】->【Externalize JavaScript】来打开DreamWeaver CS4为我们提供的工具，你可以看到，有两个选项，他们分别对应了只将页面中的JavaScript代码块分离为外部文件和与此同时分离HTML代码中的JavaScript，如图：





我们选择”Externalize JavaScript and attach unobtrusively”，即同时完成代码块和标签中代码的分离，命令执行完成后，页面的代码如下：

< !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=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Untitled-15.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="a1">Click to alert me</a>
</body>
</html>

这样，就自动化的完成了相应的工作。

二、JavaScript代码提示。

一直以来，开发JavaScript没有特别顺手的IDE，Aptana算是一款基于Ecplise的JavaScript开发工具，提供了代码高亮和代码提示功能，如今，DreamWeaver CS4也提供了此功能，当我们构建JavaScript内置对象时，它已经可以进行代码提示了，如图：



除此以外，DreamWeaver CS4 还提供了对代码错误的提示，当代码出现错误，将在窗口顶端有一个黄色的提示条，同时在代码左侧行号处标识，如图：



三、对第三方JavaScript库的支持。

上面提到的Aptana同时提供对多种JavaScript的第三方类库，如Prototype、jQuery、YUI、ExtJS等的支持，DreamWeaver CS4也同样提供了，我们首先引入一个Prototype库，然后通过输入new Ajax.，试图构建一个Ajax的应用，此时DreamWeave CS4给出了Ajax类成员方法的代码提示，如图：

]]> <![CDATA[DreamWeaver CS4功能介绍]]> http://www.dw8.cn/dw8_0/486.asp DW8 2008-9-24 12:56:27 实时视图新增功能

借助 Dreamweaver CS4 中新增的实时视图在真实的浏览器环境中设计网页, 同时仍可以直接访问代码。呈现的屏幕内容会立即反映出对代码所做的更改。

针对 Ajax 和 JavaScript 框架的代码提示

借助改进的 JavaScript 核心对象和基本数据类型支持, 更有效地编写 JavaScript。通过集成包括 jQuery、Prototype 和 Spry 在内的流行 JavaScript 框架, 充分利用 Dreamweaver CS4 的扩展编码功能。

全新用户界面

借助共享型用户界面设计, 在 Adobe Creative Suite® 4 的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。

相关文件和代码导航器

单击“相关文件”栏中显示的任何包含文件, 即可在“代码”视图中查看其源代码, 在“设计”视图中查看父页面。新增的代码导航器功能显示影响当前选定内容的 CSS 源代码, 并允许您快速访问它。

HTML 数据集

无需掌握数据库或 XML 编码即可将动态数据的强大功能融入网页中。Spry 数据集可以将简单 HTML 表中的内容识别为交互式数据源。

Adobe InContext Editing (预发布版)

在 Dreamweaver 中设计页面, 使最终用户能使用 Adobe InContext Editing 在线服务编辑他们的网页, 无需帮助或使用其它软件。* 作为 Dreamweaver 设计人员, 您可以限制对特定页面、特殊区域的更改权, 甚至可以自定格式选项。

Adobe Photoshop® 智能对象

将任何 Photoshop PSD 文档插入 Dreamweaver 即可创建出图像。智能对象与源文件紧密链接。无需打开 Photoshop 即可在 Dreamweaver 中更改源图像和更新图像。

CSS 最佳做法

无需编写代码即可实施 CSS 最佳做法。在“属性”面板中新建 CSS 规则, 并在样式级联中清晰、简单地说明每个属性的相应位置。

Subversion 集成

在 Dreamweaver 中直接更新站点和登记修改内容。Dreamweaver CS4 与 Subversion 软件紧密集成, 后者是一款开放源代码版本控制系统, 可以提供更强大的登记/注销体验。

Adobe AIR 创作支持新增功能

在 Dreamweaver 中直接创建基于 HTML 和 JavaScript 的 Adobe AIR 应用程序。在 Dreamweaver 中即可预览 AIR 应用程序。使 Adobe AIR 应用程序随时可与 AIR 打包及代码签名功能一起部署。

http://www.adobe.com/cn/products/dreamweaver/features/?view=topnew

]]> <![CDATA[CSS网页布局的意义与副作用]]> http://www.dw8.cn/dw8_4/484.asp DW8 2008-9-10 8:41:44 　　随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，52CSS.com也成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。

　　如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。

　　CSS网页布局的意义体现在如下方面：

　　一、使页面载入得更快

　　由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。

　　二、降低流量费用

　　页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。

　　三、修改设计时更有效率

　　由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。

　　四、保持视觉的一致性

　　DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。

　　五、更好地被搜索引擎收录

　　由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。

　　六、对浏览者和浏览器更具亲和力

　　我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

　　说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用：

　　一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。

　　二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

　　三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。

　　四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

　　综合以上讨论的DIV+CSS优势和略势，我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0设计标准，这需要很长时间的学习和锻炼，欢迎您关注52CSS.com更新的文章。而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和体检，积累丰富的设计经验，才能很好的掌握这门技术。

]]> <![CDATA[定义列表+CSS制作的垂直菜单]]> http://www.dw8.cn/dw8_4/483.asp DW8 2008-8-27 10:00:26 <!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=utf-8" />
<meta http-equiv="content-language" content="gb2312" />
<title>dl,dt,dd制作的CSS垂直菜单</title>
<style type="text/css">
body {
  font-size: 12px;
  margin: 0;
}
#menu dl {
  margin: 0 auto;
  padding: 0 0 10px 0;
  width: 150px;
  background: #69c;
}
#menu dt {
  margin: 0;
  padding: 10px;
  background: #69c;
  color: #fff;
  font-size: 1.4em;
  font-weight: bold;
  border-bottom: 1px solid #fff;
}
#menu dd {
  margin: 0;
  padding: 0;
  background: #47a;
  color: #fff;
  font-size: 1em;
  border-bottom:1px solid #fff;
}
#gallery a, #gallery a:visited {
  display:block;
  padding:5px 5px 5px 20px;
  width:125px;
  background: #47a;
  color:#fff;
  text-decoration:none;
}
#gallery a:hover {
  background: #258;
  color:#9cf;
}
</style>
</head>

<body>
<div id="menu">
  <dl id="gallery">
    <dt>Gallery</dt>
    <dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>
    <dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>
    <dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>
    <dd><a href="#" title="William Turner">William Turner</a></dd>
    <dd><a href="#" title="John Constable">John Constable</a></dd>
    <dd><a href="#" title="Claude Monet">Claude Monet</a></dd>
  </dl>
</div>
</body>
</html>

]]> <![CDATA[用CSS控制浏览器的滚动条]]> http://www.dw8.cn/dw8_4/482.asp DW8 2008-8-26 8:46:22
1．overflow内容溢出时的设置

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2．scrollbar-3d-light-color立体滚动条亮边的颜色

scrollbar-arrow-color上下按钮上三角箭头的颜色

scrollbar-base-color滚动条的基本颜色

scrollbar-dark-shadow-color立体滚动条强阴影的颜色

scrollbar-face-color立体滚动条凸出部分的颜色

scrollbar-highlight-color滚动条空白部分的颜色

scrollbar-shadow-color立体滚动条阴影的颜色

以上七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。

使用以上的样式定义内容，我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式，第一组样式属性用于设定被设定对象是否显示滚动条，第二组样式属性则用于设置滚动条的颜色，要注意的本文涉及的样式属性都是ie才能支持的，第二组的样式属性只有ie5.5版本才能支持，所以请大家在调试的时候注意。

我们通过几个实例来讲解上述的样式属性：

1.让浏览器窗口永远都不出现滚动条

没有水平滚动条

<body style="overflow-x:hidden">

没有垂直滚动条

<body style="overflow-y:hidden">

没有滚动条

<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">

2.设定多行文本框的滚动条

没有水平滚动条

<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条

<textarea style="overflow-y:hidden"></textarea>

没有滚动条

<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>

或

<textarea style="overflow:hidden"></textarea>

3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色

<body style="scrollbar-base-color:red">

scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

加上一点特别的效果：

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

4.设定其他元素时，基本上一样，你最好是在样式表文件中定义好一个类，这样你就可以重复使用了。

.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}

将以上语句加入到样式表文件中或html头部的<style></style>当中，然后使用

<textarea class="coolscrollbar"></textarea>

快快行动，让你的主页马上酷起来。]]> <![CDATA[通过W3C XHTML1.0及CSS标准需要注意的九个问题]]> http://www.dw8.cn/dw8_4/481.asp DW8 2008-8-16 8:49:03 一、在 <div class=tzh>I am TZH!</div> 这段语句中有什么错误？
　　标点符号问题。这其实也是大家最容易忽视的问题，其实就是小小的两个引号，就造成了这个错误。虽然很多浏览器在不加引号的情况下仍然能正确识别渲染。但是这样想要通过严格的W3C XHTML国际标准是不可能的，请大家记住等号后面一定要接引号。正确写法：<div class="tzh">I am TZH!</div>

二、在 <SPAN class="tzh">TZH is me!</SPAN> 这段语句中有什么错误？
　　大小写注意。这和第一个问题一样，都是特别容易忽视的细节问题。在W3C标准中是绝对不允许大写的，其中我仍记得我在检测一段javascript代码的时候，由于为了让自己一目了然写出的onLoad也被判断成了错误，原因就是L不能大写。正确写法：<span class="tzh">TZH is me!</span>

三、在 <p>I am TZH!</p><br><p>TZH is me!</p> 这段语句中有什么错误？
　　<br />标签问题。对于强制换行标签<br />来说，很多新手都分不清它和<br>的区别，甚至在FCKeditor编辑器中有时都会时不时冒出个<br>来充当<br />。虽然同样很多浏览器都能自动纠错，将<br>作为<br />识别。但最好的编辑方法还是推荐大家使用Dreamweaver进行编辑，当你按下Ctrl+Enter，就会自动写上一个<br />。正确写法： <p>I am TZH!</p><br /><p>TZH is me!</p>

四、 <h1>~tangzhehao~hey~</h1> 这段语句中有什么错误？
　　注意标签结束后面接的标点符号，很多标签结束后都不能接特殊标点符号，比如这里的"~"波浪号，但你要问，那叫我怎么用呢？那就使用ISO Latin-1字符集（ISO Latin-1 Character Set），在这里，查找到“~”波浪号相对应的字符集十进制编码是~，然后就用这个十进制编码代替~波浪号，记住最后的分号不能丢。在ISO Latin-1字符集中以已命名实体（Named entity）最优先，十进制编码（Decimal code）其次，也就是说，一个符号在同时有十进制编码和已命名实体的时候，优先选用已命名实体而不使用十进制编码。

五、在 <form id="54tzh"></form> 这段语句中有什么错误？
　　注意id和class特殊情况。W3C XHTML1.0 标准中规定，在id或class中，第一个字符是不能是数字的，必须是字母。正确写法：<form id="tzh45"></form>

六、在 <img src="logo.gif"> 这段语句中有什么错误？
　　<img>标签注意。W3C XHTML1.0 标准中规定，在<img>标签中，必须包括alt元素。正确写法：<img alt="Logo" src="logo.gif">

七、在<script language="JavaScript"> 这段语句中有什么错误？
　　<script>标签注意。W3C XHTML1.0 标准中规定，在<img>标签中，必须包括type元素。正确写法：<script language="JavaScript" type=text/javascript>

八、在<div><h1>I am TZH!</div></h1> 这段语句中有什么错误？
　　注意标签开始结束顺序对应。正确写法：<div><h1>I am TZH!</h1></div>

九、除了上面的之外，还需要注意哪些问题？
　　注意特殊套装。比如：<dl><dd><ul><li>等一些特殊标签，套装顺序中缺一不可。必须按照顺序将<dl><dd><ul><li>四个标签写完全。类似的还有许多。
　　注意未打开标签。所谓未打开来自于W3C检测，这类错误显示的错误是 is not open，翻译过来也就是未打开的意思。如果按照中文的意思来理解就是有首无尾或者有尾无首。通常这种错误出现的原因都是因为有一段代码在修改的时候被删除，而没有顾及到相对较远的结束或者开始标签。

]]> <![CDATA[CSS隔行换色]]> http://www.dw8.cn/dw8_4/480.asp DW8 2008-8-7 16:23:29 隔行换色的问题，其实很简单，解决办法无非一下几种：

1：背景图，如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。

2：expression
文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
注：本方法浏览器兼容度不够，不支持ff3。

3：class分别定义：
＜ul>
＜li class="bgcolor">...
＜li>...
＜li class="bgcolor">...
＜li>...
＜/ul>
实实在在的写法。

4：通过JS，看实例：

<!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=utf-8" />
<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function bgChange(){
  if(!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for(var i=0; i<tables.length; i++){
    var odd = false;
    trs = tables[i].getElementsByTagName("tr");
    for(var j=0; j<trs.length; j++){
      if(odd==true){
        trs[j].style.background = "#ccc";
        odd = false;
      }else{
        odd = true;
      }
    }
  }
}
window.onload = bgChange;
</script>
</head>
<body   >
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
</table>
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 184 ms, 9 Queries.</span>";
//]]>
</script></body>
</html>

]]> <![CDATA[css+js定义input_file元素的样式兼容FireFox]]> http://www.dw8.cn/dw8_4/479.asp DW8 2008-7-24 8:12:59 http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="keywords" content="关键字描述" />
<meta name="description" content="站点描述" />
<meta name="author" content="我们,we@126.com" />
<meta name="copyright" content="版权所有" />
<link rel="stylesheet" type="text/css" title="通用样式" href="***.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
<title>css+js定义input的file浏览按钮样式兼容FireFox</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体; padding:20px;}li{list-style:none;}
.clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.text{ border:1px solid #999;height:16px; width:300px; font-family:verdana; font-size:12px;padding-top:2px; float:left;margin-right: 5px;}
.file{ width:64px;overflow:hidden; background: url(/img/ll.png); height:20px; *vertical-align:3px; overflow:hidden; float:left;}
#file{ width:0; height:20px;margin-left: -154px;*margin-left:-3px; filter:alpha(opacity=0);-moz-opacity:.0;opacity:0.0; cursor:pointer;}
-->
</style>
</head>
<body>
<input id="text" class="text" type="text"/>
<span class="file"><input id="file" type="file" /></span>
<script type="text/javascript">
<!--
var file = document.getElementById("file");
var text = document.getElementById("text");
file.onchange = type;
function type()
{text.value = file.value;}
-->
</script>
</body>
</html>]]> <![CDATA[11个注意点保证CSS的渲染效率]]> http://www.dw8.cn/dw8_4/478.asp DW8 2008-7-15 9:14:15 1、十六进制的颜色值对位数与大小写

　　编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
　　* 不赞成 - color:#f3a;
　　* 建议用 - color:#FF33AA;

2、display与visibility的差异

　　他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
　　* 不赞成 - visibility:hidden;
　　* 建议用 - display:none;

3、border:none;与border:0;的区别

　　和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
　　* 不赞成 - border:0;
　　* 建议用 - border:none;

4、不宜过小的背景图片平铺

　　一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
　　* 不赞成 - 宽高8px以下的平铺背景图片
　　* 建议用 - 衡量适中体积及尺寸的背景图片

5、IE的滤镜

　　IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
　　* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
　　* 建议用，最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

　　*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
　　* 不赞成，使用*号通配符
　　* 不赞成，div span button b table等标签纳入通配符控制内外填充样式
　　* 建议用，有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

　　如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
　　* 不赞成 - button#backButton { }
　　* 不赞成 - .menu-left #newMenuIcon { }
　　* 建议用 - #backButton { }
　　* 建议用 - #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

　　降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。
　　* 不赞成 - treeitem[mailfolder="true"] > treerow > treecell { }
　　* 建议用 - .treecell-mailfolder { }

9、避免子孙选择符

　　子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。
　　* 不赞成 - treehead treerow treecell { }
　　* 好一点，但还是不行(参照下一条) - treehead > treerow > treecell { }

10、标签类中不要包含子选择符

　　不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下）
　　* 不赞成 - treehead > treerow > treecell { }
　　* 建议用 - .treecell-header { }

11、留意所有子选择符的使用

　　小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。
　　* 不赞成 - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

　　请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。
　　* 建议用 - .tree-folderpane-icon[IsImapServer="true"] { } ]]> <![CDATA[CSS使未知高宽的图片实现垂直居中]]> http://www.dw8.cn/dw8_4/477.asp DW8 2008-7-10 17:01:13 在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。

直接上CSS代码：

#pic { 
    width:300px; 
    height:300px; 
    background-color:green; 
    border:6px solid #ccc; 
    text-align:center; 
    position:relative; 
    display:table-cell; 
    vertical-align:middle; 
} 
#pic p { 
    *position:absolute; 
    top:50%; 
    left:50%; 
} 
#pic p img { 
    *position:relative; 
    top:-50%; 
    left:-50%; 
} 

#pic是容器，里面放一个p容器，该容器采用绝对定位，最后插入图片，图片采用相对定位。

这里用到了一个hack,*只有IE浏览器可以识别，Firefox不认识

]]> <![CDATA[做站过程中应避免的43个错误]]> http://www.dw8.cn/dw8_6/476.asp DW8 2008-7-4 9:20:09
1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向，他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2. 让网站易于速读。因特网不是书，因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作，我不得不迅速读完所有内容。 项目符号、标题、副标题、列表，这些都能帮助读者迅速找到他想要的内容。

3. 不要使用难于阅读的花哨字体。当然，某些字体可以让网站精彩纷呈。 不过它们容易阅读吗？如果你的主要目的是传递信息并让读者阅读， 你应该让阅读过程舒服些。

4. 不要用小字体。如上一条所述，你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能，但如果必须放大才能看清一个网站的话， 我就再也不会去访问它了。

5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。 原因很简单，在新窗口中打开外部链接，用户就不必离开我的网站。 错！让用户决定如何打开链接，否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站，在必要的时候他们会回来的。

6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。 如果你改变窗口大小，你会在他们面前失去信用。

7. 不必要时不要让用户注册。直白地讲，我上网是为了获取信息，不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息，除非特别必要（比如你 能提供的消息非常有价值）。

8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。

9. 不要过多使用Flash。Flash不仅会增加网站的读取时间， 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。

10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐，结果他们失败了。 记住，永远不要使用音乐。

11. 当你必须使用声音时，让用户启动它。有时你必须使用声音文件， 比如你要给用户发送一份演讲，或者你的教程包含声音。这没问题，但要让用户来控制， 让用户点击“播放”按钮，别在打开网页的瞬间播放声音。

12. 不要让标志弄乱你的网站。社交网络和社区的标志会让你的网站看起来十分不专业。 就算是奖章和荣誉等标志也应当放到“关于我们”页面上。

13. 不要使用“点击进入”页面。用户访问到内容的步骤越少越好。

14. 注意要留下联系方式。最差的莫过于网站没有留下联系方式的了。 不仅对访问者不友好，而且对你也没好处，你会错过珍贵的反馈信息。

15. 不要影响“后退”按钮的动作。这是网站可用性的最基本的理念。 在任何情况下都不能影响“后退”按钮的动作。比如，打开新窗口会破坏它， 某些Javascript链接也会破坏它。

16. 不要用闪烁的文字。除非你的访问者来自1996年，否则别用闪烁文字。

17. 避免复杂的URL结构。一个简单的基于关键字的URL结构不仅能提高你的搜索引擎排名， 还能让访问者在访问之前了解网页内容。

18. 用CSS布局，不要使用表格。HTML表格曾经被用于页面布局， 但没有必要拘泥于此，尤其是在CSS诞生之后。CSS更快、更稳定， 并能提供更多的特性。

19. 保证用户可以搜索整个网站。搜索引擎带来因特网革命的原因，就是 它使得信息查找变得十分容易。别在你的网站上唱反调。

20. 避免使用下拉菜单。用户应当直观地看到所有导航选项。 下拉菜单会造成混乱，并且会隐藏访问者真正要找的信息。

21. 使用文字做导航栏。文字导航不仅速度快，而且更稳定。 例如，有些用户上网时会关闭图片。

22. 如果需要链接到PDF文档，一定要注明。你一定有过点击链接之后， 浏览器就像死掉一样等待Acrobat Reader启动，只为了打开一个（你不想看的）PDF？ 这是个不小的麻烦，因此一定要在指向PDF的链接旁特别说明，使用户可以采取相应措施。

23. 不要用多种版本让访问者迷惑。你想用哪种带宽？56Kbps？128Kbps？Flash版还是HTML版？ 嗨，我只想快点看到内容！

24. 不要在内容中混合广告。在内容中混合广告（如Adsense）也许会增加短期内的广告点击率， 但从长远角度来看，这会减少网站的人气。愤怒的用户会离开的。

25. 使用简单的导航结构。过犹不及。这个规则通常适用于人和选择上。 确保你的网站的导航结构单纯简洁。你不想让用户在查找信息时遇到麻烦吧？

26. 避免内容介绍。别强迫用户在访问到真正内容之前看某些东西。 这很令人愤怒，除非你提供的信息是用户必须的，否则他不会等下去。

27. 不要使用FrontPage。这一点也适用于其他廉价的HTML编辑器。 它们让页面设计变得更方便，但其输出结果将会非常低级，不兼容不同的浏览器， 并且会包含错误。

28. 保证你的网站兼容大部分浏览器。浏览器并不完全相同，在解释CSS和其他 语言的方法也相差甚远。不管你是否愿意，你应当让网站兼容市面上的常用浏览器， 否则你会永远地失去部分读者。

29. 保证在链接上添加有意义的文字。以前我经常犯这个错误。告诉人们“点击这里”很容易， 但这没有效果。要保证链接文字有意义。它使得访问者知道点击链接之后将出现什么， 也能为链接指向的外部站点带来SEO效果。

30. 不要在状态栏中隐藏链接。用户还必须能在状态栏中看到链接指向哪里。 如果你隐藏了链接（即使是由于其他原因），那么你也会丧失信誉。

31. 使链接可见。访问者应能轻易识别出哪些能点击，哪些不能。 确保链接的颜色有强烈的对比（标准的蓝色通常是最好的）。可能的话， 最好加上下划线。

32. 不要在普通文本上添加下划线或者颜色。除非特别需要，否则不要为普通文字添加下划线。 就像用户需要识别哪些能点击一样，他们不应当将本不能点击的文字误认为能够点击。

33. 改变访问过的链接的颜色。这一点对于提高网站可用性非常重要。 改变访问过的链接颜色有助于用户在网站中定位，确保他们不会不经意地 访问同一页面两次。

34. 不要使用动态GIF。除非你有需要动画的广告条，否则避免使用动态GIF。 它会使网站看上去很业余，并且会分散访问者的注意力。

35. 给图像添加ALT和TITLE属性。ALT和TITLE不仅会带来SEO效果，而且 对盲人有很大帮助。

36. 不要用令人不快的颜色。如果用户连续阅读10分钟后觉得头疼， 那么你最好选择别的配色方案。根据你的目的决定设计（例如，创造一种氛围 使得用户将注意力放在网站内容上，等等）。

37. 不要弹出窗口。这一点涉及任何种类的弹出窗口。即使用户要求使用， 弹出窗口也不宜使用，因为它会被弹出窗口拦截功能阻拦。

38. 不要使用Javascript做链接。远离那些点击之后执行一小段Javascript的链接， 它们经常给用户带来麻烦。

39. 在页面底部放置有意义的链接。访问者在找不到所需信息时通常会滚动到页面最底端。 作为最后的手段，你应当在页面底部放一个“联系我们”页面的链接。

40. 避免网页过长。如果用户老是需要滚动才能看到内容，他通常会采取的做法是 跳过它们。如果你的网站正好如此，那么应当缩短内容并优化导航结构。

41. 禁止使用水平滚动条。虽然垂直滚动条可以接受，但水平滚动条却远非如此。 现在的流行分辨率是1024×768，要确保网站能容纳在其中。

42. 禁止出现拼写或语法错误。这不是网站设计的错，但却是影响网站整体质量的重要因素。 确保链接和文字中没有拼写或语法错误。

43. 如果你使用图片认证，要保证能看清其字符。有些网站将图片认证作为对抗垃圾评论的方法， 或是在注册表单上使用。其中有个问题就是，用户经常需要叫上全家人来讨论图片上到底是什么字母。]]> <![CDATA[掌握CSS布局网页技巧的完全学习手册]]> http://www.dw8.cn/dw8_4/475.asp DW8 2008-6-17 16:36:47 你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。 当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

结构化HTML

我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。

外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。

开始思考

首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。

如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：

标志和站点名称

主页面内容

站点导航(主菜单)

子菜单

搜索框

功能区(例如购物车、收银台)

页脚(版权和有关法律声明)

我们通常采用DIV元素来将这些结构定义出来，类似这样：

＜div id="header"＞＜/div＞

＜div id="content"＞＜/div＞

＜div id="globalnav"＞＜/div＞

＜div id="subnav"＞＜/div＞

＜div id="search"＞＜/div＞

＜div id="shop"＞＜/div＞

＜div id="footer"＞＜/div＞

这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。

根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

使用选择器是件美妙的事

id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。

另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。

一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.)

良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。

亲自实践一下结构化

上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：

＜div id="navcontainer"＞

＜div id="globalnav"＞

＜ul＞a list＜/ul＞

＜/div＞

＜div id="subnav"＞

＜ul＞another list＜/ul＞

＜/div＞

＜/div＞

嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。

用CSS替换传统方法

下面的列表将帮助你用CSS替换传统方法：

HTML属性以及相对应的CSS方法

HTML属性

CSS方法说明

align="left"

align="right" float: left;

float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等

当你使用float属性，必须给这个浮动元素定义一个宽度。

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:visited: #339;

a:hover: #999;

a:active: #00f;

在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。

bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。

bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left

border="3"cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。

你可以使用 table, td or th 这些选择器.

如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;

＜br clear="left"＞

＜br clear="right"＞

＜br clear="all"＞

clear: left;

clear: right;

clear: both;

许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.

cellpadding="3"

vspace="3"

hspace="3" padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。

align="center" text-align: center;

margin-right: auto; margin-left: auto;

Text-align 只适用于文本.

象div，p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中

一些令人遗憾的技巧和工作环境

由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。

]]> <![CDATA[CSS常用属性代码简化]]> http://www.dw8.cn/dw8_4/474.asp DW8 2008-6-6 9:46:00 margin
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
代码简化为：margin:1px

margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;
代码简化为：margin:1px 2px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
代码简化为：margin:1px 2px 3px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
代码简化为：margin:1px 2px 3px 4px
当属性值是0的时候单位可以不写如：0px 直接就写成0
 
padding
padding的书写方法和margin一样，在此就不多叙述
 
border
border-width:1px;
border-style:solid;
border-color:#000000;
代码简化为：border:1px solid #000

background
background-color:#CCFFFF;
background-image:url(图片路径);
background-repeat:repeat-x;
background-position:5px 4px;
代码简化为：background:#CFF url(图片路径)  repeat-x 5px 4px

font
font-size:26px;
font-weight:bold;
font-family: “宋体”;
代码简化为：font:26px bold “宋体”

color属性值
color:#000000;
color:#ff0000;
代码简化为：color:#000, color:#f00

]]>