淡水河边的博客

翻译自：A CSS styled table 原文：http://veerle.duoh.com/com... 版权归原作者所有这个翻译的页面版权所有，授权蓝色理想。转载请注明出处

在前一段时间制作了CSS calendar，然后我就想用css制作一个table的模型，该模型遵循亲和力规则，而且有良好的视觉效果.

图：颜色的选择和搭配

这样做的好处是： 利用表格来装载数据，不言而喻是最好的，你可以很灵活的为每个单元格定义样式。下面是具体的做法

首先在photoshop设计一个效果出来，通过对各种颜色，小图标等的常识，做出了一个效果令人满意的效果图来。下一步呢，裁处下面三个图片来作为标题的背景图片，如果你对颜色的把握不是很好的话，这里给你提供一些调色工具

www.snook.ca/technical/col...

veerle.duoh.com/comments.php?id=108_0_2_20_C8

数据结构为

<table id="mytable" cellspacing="0" summary="The technical
specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
  <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
  <th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz</th>
  <th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>
  <th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th>
</tr>
<tr>
  <th scope="row" class="spec">Model</th>
  <td>M9454LL/A</td>
  <td>M9455LL/A</td>
  <td>M9457LL/A</td>
</tr>
...
可以看到我用了scope 属性来确保这个表格在无视觉效果的浏览器下展示出更好的效果，这个属性定义标题元素包含的标题内容是否为 行 (scope="col") 或 列(scope="row") 。下面是CSS的内容对于上面的标题，使用和背景来更好的区分出他们

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #6D929B;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
下面定义左侧的标题样式

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #B4AA9D;
}
这里的数据来自于MAC的technical specifications of each Power Mac G5|http://www.apple.com/power...下来定义普通的和重要的数据内容

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #6D929B;
}

td.alt {
background: #F5FAFA;
color: #B4AA9D;
}
至此，整个制作过程结束了

查看表格效果：http://www.blueidea.com/ar...

查看CSS文件：http://www.blueidea.com/ar...

译者的话：这个页面经我测试通过W3C标准严格型验证，而且兼容IE，Firefox，Opera等主流浏览器，对于大量数据，可以利用js实现行两种背景交替显示。

出处：蓝色理想
======================================
/* CSS Document */

body {
    font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    background: #E6EAE9;
}

a {
    color: #c75f3e;
}

#mytable {
    width: 700px;
    padding: 0;
    margin: 0;
}

caption {
    padding: 0 0 5px 0;
    width: 700px;    
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}

th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #C1DAD7;
    background: none;
}

td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    font-size:11px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}

td.alt {
    background: #F5FAFA;
    color: #797268;
}

th.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #fff url(images/bullet1.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #f5fafa url(images/bullet2.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}

网站要想成功注册，它起码应具备两个条件，一是网站本身要有较好的内容和设计，二是网站没有作弊行为。这里所谓的“作弊”，是指采用一些特殊的、有悖常规的网页设计手法，以期提高网站排名的行为。如何设计好网站，相关的资料很多，本文就不废话了。这里主要谈谈后者，即在提高网站排名的同时，如何避免被搜索引擎视为作弊而拒绝注册。 那么，在搜索引擎看来，哪些行为算作弊呢？这里罗列了一下，从中你可看到，现在有些人还视为“密技”的东西，其实已经过时了。

??堆砌页面关键字：为了增加某个词汇在网页上的出现频率，而故意重复它。这是有人常用的花招，不过，现在很多搜索引擎都能识破它。它们通过统计网页单词总数，判断某个单词出现的比例是否正常。一旦超过“内定标准”，就对你的网页说“ByeBye”了。

??放置隐形文本：所谓的“鬼页法”。为了增加关键字数量，网页中放一段与背景颜色相同的、包含密集关键字的文本，访客看不到，可搜索引擎却能找到，过去一度还真能提高网站排名，但现在，主要搜索引擎都能识别出来，照样玩不通了。

??安插微型文本：与“鬼页法”相似，只是文本更些?更分散、更隐蔽。但是，对于敏感的搜索引擎来说，仍然是枉费心机。

??网页重定向：使用META刷新标记、CGI程序、Java、Javas cript或其它技术，当用户点击一个链接时，自动跳到另一个网页。有人正是用这种方法，欺骗人们进入并不想去的地方。因此，有些搜索引擎（如Infoseek），对此类网页也很反感，一般不予登记。

??滥用Meta标记关键字：有人为增加关键字的出现次数，在语句中，重复关键字，或者加入与网站内容毫不相关的热门词汇。这种作弊行为，大部分搜索引擎也能识破。

??滥用门户网页：门户网页（也称“桥页”），是指为了获得好的排名，而专门针对各搜索引擎排序算法设计的网页。尽管今天，多数搜索引擎并不反对这种作法。但俗话说：“物极必反。”建立太多具有相近关键字的门户网页，会招致搜索引擎的反感而无法成功注册。

??连续注册：有人为加大保险系数，在一天之内，将一个网页重复提交给同一个搜索引擎，其实，这种作法适得其反。

??重复注册：有人以为，将一个网页简单复制成多个网页，然后，给它们安上不同的名字，并分别予以注册，会增大访问量，结果，搜索引擎会认为你在滥用它，而拒绝登记你的网站。

??偷换网页：是指一个网页成功注册并获得较好排名后，用另一个内容无关的网页（如产品广告）来替换它的行为。

??张冠李戴：上面提到的门户网页，只适用于Altavista这类自动登录的搜索引擎，如果提交给Yahoo这类人工分类的目录式搜索引擎，它就会认为你在作弊。

??突破页数限制：一些搜索引擎允许每个用户每天或每周提交的网页数量是有限制的。例如，Altavista每天允许10页；HotBot允许每天50页；Excite允许每周25页；Infoseek允许每天50页（但使用e-mail注册，没有页数限制）。请注意，这并不是说，搜索引擎每天或每周只能为你登录以上页数，而只是允许你提交的页数。还不明白？那就举个例吧，对于Excite而言，每周只允许你提交25页，如果你的网站有1000页，那该怎么办呢？就提交25页即可！余下的Excite会自己检查到，并将编入索引中。如果你强行突破这个限制，那么，搜索引擎就会认为你在作弊，反而不予注册。

??上面这些条款似乎很明显、很容易区分，但有时我们却可能不知不觉犯上。例如，你有一个网页，背景是白色，在这个网页上，你设计了一个表格，其背景为蓝色、文字为白色，这种设计应该说也是完全正常的，但如果你到搜索引擎Infoseek去注册，它却不理你。为什么呢？它认为你在作弊！在Infoseek看来，表格中的白色文本，实际是置于白色的网页背景上，也就是说，网页文本与背景颜色相同，这就符合“鬼页法”的作弊特征。而这一点，可能你自己根本没有意识到。还有一例，有时因设计需要，或者网站已迁移到其它地方，通常我们会用到网页重定向，但对于Infoseek等搜索引擎而言，这也是不可容忍的作弊行为。另外，Infoseek等搜索引擎还要求，不要在多个网页上布置指向同一个网页的链接。例如，很多人喜欢在各个网页放上“返回主页”的链接，其实就属于这种情况。这种司空见惯的设计，居然也被看成作弊，真是太苛刻了。不过，对此Infoseek在真正执行时，似乎也并不是很严格，一些这样设计的网页，它照样登录了（你也碰碰运气？）。总体上说，这些限制都是为了对付真正的作弊者，使搜索引擎的检索结果更加准确有效，但事实上，的确也错怪了一些好人。如果万一你碰上这种情况怎么办，搜索引擎到底会怎样处罚你呢？

??跟不少网主一样，笔者以前对此不甚了解，以为自己的某个网页违项，会导致整个网站被封杀。其实，事实并非如此！因为运作搜索引擎的人也知道，有时他们搜索引擎判定的“作弊”，实际是一种正常合法的设计，只是因为搜索引擎自身还不够“聪明”，无法准确判断是故意作弊，还是偶然巧合。所以，他们通常不会因为某网页象在作弊，就拒绝登记整个网站，而只是对有违规嫌疑的网页进行处罚——降低排名或不予登记，而其它的合法网页不会受到影响。此时，你只需将这个网页修改，并重新注册即可。除非你有意作弊，肆无忌惮违反上述多项规则，或者由于你提交的大量垃圾网页，对搜索结果造成明显不良影响，那么，你的整个网站将被永远踢出门外。当然，也有个别搜索引擎（如HotBot）政策更加宽松，甚至对故意作弊者，也没有永远拒绝登记的规定。只要它认为你没有攻击或侵害到它，一般不会删掉你整个网站的索引，不过，这个尺度掌握在人家手里，劝你还是别去试它的耐性。

??作为一名网主，明白了哪些行为是作弊，你就应该在允许范围内，去探索如何获得较高排名，以增大网站访问量，让尽可能多的人知道你的产品、服务或了解你本人，只有这样，成功注册才有实际意义。

=====哪些行为会被百度搜索引擎认为是作弊====

以下行为都可能被认为是作弊
    -在网页源代码中任何位置，故意加入与网页内容不相关的关键词。
    -在网页源代码中任何位置，故意大量重复某些关键词。即使与网页内容相关的关键词，故意重复也被视为作弊行为。
    -在网页中加入搜索引擎可识别但用户看不见的隐藏文字。无论是使用同背景色文字、超小字号文字、文字隐藏层、还是滥用图片ALT等方法，都属于作弊行为。
    -故意制造大量链接指向某一网址的行为。
    -对同一个网址，让搜索引擎与用户访问到不同内容的网页（包括利用重定向等行为）。
    -作弊行为的定义是针对网站而不是网页的。一个网站内即使只有一个网页作弊，该网站也被认为是有作弊行为。
    -有链接指向作弊网站的网站，负连带责任，也会被认为是作弊（但是，作弊网站上链接指向的网站，不算作弊）。

我们经常收到一些初学网业制作的网友提出的问题，很多问题其实很简单，只要动脑筋想一想就可以解决了，但有的网友不喜欢多思考，一遇到问题想都不想就直接去问别人，这种学习方法可不太好。而本文的作者学到一种技巧后，他发现这种技巧在两种环境下显示的结果不同，这个时候比较两种环境中产生的源代码的区别无疑是解决问题最好的方法！他也正是这样做的，并最终解决了问题。本文涉及的问题并不算太难，但作者发现问题、解决问题的思路却很值得我们学习！
　　首先忠心感谢凌宇5942给我的帮助！在他的启迪下我发现了另一种实现flash透明背景的办法，愿与大家共同探讨

　　凌宇5942告知的解决办法：在flash的html发布选项中选windows mode/transparent windowless，发布为html，插入网页就可以得到透明的flash的效果。

　　不错，照这样的办法去做，便可以发布出带有透明flash的html页。但是它存在一个问题：所发布的flash动画只在与其同时发布的html页中显示透明效果，而如果用dreamweaver新建一个文件，再将其插入页面中，保存-->>f12预览我们会发现它又是不透明的了！这是怎么回事呢？

　　我仔细比较了用flash发布的html页和用dreamweaver制作的带有flash 动画的两个html页的源代码：

　　1.用flash发布的html页源代码：

<HTML>
<HEAD>
<TITLE>Movie2</TITLE>
</HEAD>
<BODY bgcolor="#000000">
<!-- URL's used in the movie-->
<!-- text used in the movie-->
<!--fdsaaaa aaaaaaa -->

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia...
/swflash.cab#version=5,0,0,0"
WIDTH=550 HEIGHT=400>
<PARAM NAME=movie value="Movie2.swf">
<PARAM NAME=quality value=high>
<PARAM NAME=wmode value=transparent>
<PARAM NAME=bgcolor value=#FFFFFF> <!--用flash导出后将背景改为黑色，其目的是便于观察透明效果-->
<EMBED src="Movie2.swf" quality=high wmode=transparent bgcolor=#FFFFFF WIDTH=550 HEIGHT=400 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/...
=ShockwaveFlash"></EMBED>
</OBJECT>

</BODY>
</HTML>

　　2.用dreamweaver制作的带有flash 动画的html页的源代码：

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body bgcolor="#000000" text="#000000"><!--背景亦为黑色，其目的是便于观察透明效果-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia...
/swflash.cab#version=5,0,0,0" width="550" height="400">
<param name=movie value="Movie2.swf">
<param name=quality value=high>
<embed src="Movie2.swf" quality=high pluginspage="http://www.macromedia.com/...
=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400">
</embed>
</object>
</body>
</html>

　　请仔细比较分析两段代码的<object>标记中的<embed>标记，我们发现其中的不同之处：前者有参数wmode=transparent而后者却没有，这就是影响flash是否透明的关键之所在！

　　请想一下dreamweaver的有关flash的属性面板，是否对parameter有印象呢？大家是否知道它的用处呢？

　　现在让我们用dreamweaver来做透明效果：选中刚才已插入的flash动画，右击鼠标选择properties调出属性面板后，再单击parameter按钮，在弹出的对话框中点击加号图标，在左侧的parameter中键入wmode在右侧的value框内键入transparent点击ok,按f12进行预览,ok!我们所要的透明效果就出现了！

　　先不要激动，我们把这一技巧推广，它是否能对任何的按flash默认设置（即不对windows mode/transparent windowless进行修改）的动画都奏效呢？经过我的实验证明它是普遍试用的。也就是说在dreamweaver中插入任何一个flash动画后，对其进行properties→parameter→wmode→value=transparent设置都可以实现flash的透明背景效果。

　　其实关于dreamweaver中flash动画的parameter除了wmode外还有很多种，请大家在以后的学习中多注意，多交流！

来 源：天极网

作者：龙族酷少　　文档类型：原创　来自：闪客帝国

     这些是以前整理的，现在发上来，希望对新手有所帮助……响应键盘的方法作为AS中的一个重要组成部分，在如今已经越来越广泛使用，尤其是在 FLASH游戏制作中，如果缺少了响应键盘的方法，那是不可能的，而响应键盘的方法也就是 主要的四种，分别是：

1、利用按钮进行检测
2、利用KEY对象
3、利用键盘侦听的方法
4、利用影片剪辑的keyUp和keyDown事件来实现响应键盘

只有熟练掌握了这些方法，然后加以变通的话，就会得到很多意想不到的效果， 下面我就结合理论和自己的想法简要的介绍一下。

第一种响应键盘的方法：利用按钮进行检测来实现响应键盘在按钮的on事件处理函数中不但可以对鼠标事件作出响应，而且可以对键盘事件作出响应。 如在按钮的动作面板中加入如下所示的代码，在敲击键盘上的X键时输出窗口中将提示： X is pressed
在按钮上加上：

on (keyPress "x") {
trace("X is pressed");
}
但是要注意的是：检测键盘上的字母键时，字母都应为小写。如果要检测键盘中的特殊键， Flash中有一些专门的代码来表示它们，下面列出了一些常用的功能键的表示代码：

<Left> <Right> <Up> <Down> <Space <Home> <End> <Insert> <PageUp> <PageDown><Enter> <Delete> <Backspace> <Tab> <Escape>

如要检测键盘上的<Left>键，可以使用下面的ActionScript：

on (keyPress "<Left>") {
trace("Left is pressed");
}
  另外，你可以在一个按钮中加入若干个on函数，也可以在一个on函数中结合多种事件，这使 您可以为按钮定义自己熟悉常用的快捷键，如下所示：

on (release, keyPress "<Left>") {
_root.myMC.prevFrame();
}
on (release, keyPress "<Right>") {
_root.myMC.nextFrame();
}
上面的第一个语句实现单击按钮或按键盘上的左方向键，控制影片剪辑myMC回退1帧，而上面的第二个语句实现单击按钮或按键盘上的右方向键，控制影片剪辑myMC前进1帧。

最后给出实例原文件：方法1.fla

方法二

第二种响应键盘的方法：利用Key对象来实现响应键盘的操作

利用按钮检测按键动作很有效，但是并不利于检测持续按下的键，所以不适合于制作某些通过键盘控制的游戏。

这时，您就需要用到Key对象。Key对象包含在动作面板的“对象”/“影片”目录下面，它由Flash内置的一系列方法、常量和函数构成。使用Key对象可以检测某个键是否被按下，如要检测左方向键是否被按下，可以使用如下ActionScript：

if (Key.isDown(Key.LEFT)) {
trace("The left arrow is down");
}
函数Key.isDown返回一个布尔值，当该数中的参数对应的键被按下时返回true，否则返回false。常量Key.LEFT代表键盘上的左方向键。当左方向键被按下时，该函数返回true。
Key对象中的常量代表了键盘上相应的键，下面列出了一些基本的常量：
一些功能键的表示：
Key.BACKSPACE Key.ENTER Key.PGDN
Key.CAPSLOCK Key.ESCAPE Key.RIGHT
Key.CONTROL Key.HOME Key.SHIFT
Key.DELETEKEY Key.INSERT Key.SPACE
Key.DOWN Key.LEFT Key.TAB
Key.END Key.PGUP Key.UP
以上是键盘上的功能键，那么如何表示键盘上的字母键呢？
Key对象提供了一个函数Key.getCode来实现这一功能，如下所示：

if (Key.isDown(Key.getCode("x"))) {
trace("X is pressed");
}
上面脚本的意思就是，利用Key.getCode函数来告诉系统你是否按下了x键，如果按下了x键以后，函数Key.isDown则会返回true,在输出窗口就会输出X is pressed。

最后给出实例原文件：方法2.fla

方法三

第三种响应键盘的方法：利用键盘侦听的方法来实现响应键盘（个人习惯用这种方法）

假设在影片剪辑的onClipEvent(enterFrame)事件处理函数中检测按键动作，而影片剪辑所在的时间轴较长，或计算机运算速度较慢，就有可能出现这种情况：即当在键盘上按下某个键时还未来得及处理onClipEvent(enterFrame)函数，那么按键动作将被忽略，这样的话，很多你想要的效果就会无法实现了。

另外，还有一个需要解决的问题就是，在某些游戏（如射击）中，我们需要按一次键就执行一次动作（发射一发子弹），即使长时间按住某个键不放也只能算作一次按键，而Key对象并不能区别是长时间按住同一个键还是快速地多次按键。

所以如果要解决这个问题，就需要用到键盘侦听的方法。你可以使用 “侦听器（listener）”来侦听键盘上的按键动作。
要使用侦听器之前，首先需要创建它，你可以使用如下所示的命令来告诉计算机你需要侦听某个事件：

Key.addListener(_root);
Key.addListener命令将 主时间轴 或 某个影片剪辑 作为它的参数，当侦听的事件发生时，可以用这个参数指定的对象来响应该事件。
上面的代码指定主时间轴来响应该事件。要让主时间轴对该事件作出响应，还需要设置一个相应的事件处理函数，否则设置侦听器就没有什么意义了。
键盘侦听的事件处理函数有两个：onKeyUp和onKeyDown，如下所示：

Key.addListener(_root);
_root.onKeyUp = function() {
trace(Key.getAscii());
};
//代码的意思是，当按下一个键并释放后，输出窗口将输出你按下的那个键的Ascii码
当然，你也可以使用影片剪辑作为侦听键盘的对象，只需要使用影片剪辑的路径代替_root作为Key.addListener命令的参数就可以了。
比如下面代码：

Key.addListener(_root.mc);
_root.mc.onKeyUp = function() {
trace(Key.getAscii());
};
//代码的意思是，当按下一个键并释放后，输出窗口将输出你按下的那个键的Ascii码,意思差不多，但是键盘侦听对象不同，一个是影片mc,一个是主时间轴。

最后给出实例原文件：方法3.fla

方法四

第四种响应键盘的方法：利用影片剪辑的keyUp和keyDown事件来实现响应键盘

最后一种方法很容易被忽视，但是也有一定的应用价值，最重要的是把概念弄清楚。
影片剪辑包含两个与键盘相关的事件keyUp和keyDown，使用它们也可以实现对按键事件的响应
例如下面的代码：

onClipEvent (keyDown) {
trace(Key.getAscii());
}
//当按下键盘上的一个键的时候，输出窗口将输出按下的这个键的Ascii码值。

函数Key.getAscii表示返回与按键相对应的ASCII码，其中 ASCII码是一个整数，键盘上的每个字符对应一个ASCII码，如字母A对应的ASCII码为65，B对应的ASCII码为66，a对应的ASCII码为97, b对应的ASCII码为98，+ 对应的ASCII码为43等。需要注意的是：只有字符键才有ASCII码，键盘上的功能键是没有ASCII码的。

如果我想在输出窗口中输出与按键相对应的字符，那怎么办？
这时候，你可以使用String对象的fromCharCode函数将ASCII码转换成字符，如将上例的代码改成如下所示：

onClipEvent (keyDown) {
trace(String.fromCharCode(Key.getAscii()));
};
//意思就是说，当按下键盘的一个键，输出按下的这个键相对应的字符，当然除了功能键。

关于String对象的详细解释，大家可以查看动作面板的“对象”/“核心”目录下面。

最后给出实例原文件：http://www.blueidea.com/ar...

Flash 影片的默认质量是高,其实还可以更高[也更耗资源].

AS 控制方法:
_quality = "best";

或者在发布向导中的HTML标签Quality项选择Best.

这样图片就不抖了


出处：DengJie.com
[smile]

经过一阵研究与借鉴他人经验，得出以下结论：

一、常出现的问题
当你的表格选居中的时候又插入了层（插入层方法1：object->draw layer）的时候（800*600），分辨率一旦变大、窗口最大化之后，层就错位了，而如果使用菜单(插入层方法2：Insert->Layer)插入层的时候，这个层就会与它的上级元素相对定位，但是一旦在Dreamweaver中用移动工具动了它，它就会马上变成绝对定位，不会再与上级元素相对定位了。

二、思想：

通过object面板置入的层是绝对定位的层，这个绝对定位指的是层的左上角与浏览器窗口内部的左部、顶部距离，代码中的写法是left与top。
通过菜单置入的层是相对定位的层，这个相对定位指的是层与它的上级元素的距离（它的上级元素的左上角），由于这个div中不再有left与top的属性，所以浏览器把它的位置定为与它的上级元素相同

（总结一：只要去掉层的left与top属性就可以相对定位！）



三、深入思想：

现在层已经相对定位了，可是只是这样还完全不能满足要求，因为很多时候不能把表格设定得那样准确，否则会把表格搞得很麻烦，把代码搞得很大很大。
如果在上面说做出的相对定位的层的基础上再做一个层对它相对定位，不就解决问题了吗？
这就涉及到了父层与子层的问题（由于它是层的基础，在书与网上教程中就可以看到，这里不再阐述），父层相对于某点定位，而子层相对于父层定位，就可以达到层的相对定位这个目标了

四、具体制作（只介绍最简单的方法，对代码熟的朋友可以手敲的）：

先在页面内插入表格（可以设居中，表格就居中了，否则几乎无意义），鼠标在某单元格内点一下，让光标在此闪动，然后通过菜单插入一个层，这个层就相对与这个单元格定位了。插入一个层之后，不要动它，而且也永远不要动，但是可以更改它的大小，比如把它的高与宽都改成"0"，让它不再影响你对其他内容的编辑，否则，这个层的left与top属性出现之后就成了绝对定位了，变成绝对定位后你可以把它的left与top属性去掉，就恢复成相对定位了。变成"0"之后，有时子层会看不见，可以按[f11]键点它恢复编辑。
现在光标在这个层内闪动，再通过菜单插入子层，这时子层与父层重叠，你可以随意移动它，不管怎么动，它都是相对与父层定位。
好了，一个相对定位的层（子层）做好了，你可以在里面随意添加内容了，也可以改变它的尺寸、位置、背景等所有属性，但是不要动left与top属性，因为它是相对于父层的左上角定位的。

下面给出父层与子层在Dreamweaver中的属性面板：

父层：



子层：


五、技巧：

先插入一个表格，在其中一个单元格中插入父层，可以把它定得小一点，比如说20象素宽、10象素高，这样它就不会盖住下面的链接，也不影响子层的相对定位。
如果要用778象素宽定义表格，可以把父层插入到表格的第一行第一个单元格中，这样就可以在所有层制作完后插入父层了！对代码熟的朋友就可以手敲父层而不必再去调整子层的位置了。

六、结束语：

欢迎转载、欢迎批评，欢迎大家前来交流，转载请注明出处（DW插件站）与作者（赛扬 oicq:819929），谢谢!