table可以设置width:100%这样你的table就不会改变了。
或最简单的就是给table设置一个固定宽度。
<div class="Bg"><table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="TdBtn" onmouseover="this.className='TdBtn_hover'" onmouseout="this.className='TdBtn'">首页</td>
<td class="TdBtn" onmouseover="this.className='TdBtn_hover'" onmouseout="this.className='TdBtn'">本馆概况</td>
<td class="TdBtn" onmouseover="this.className='TdBtn_hover'" onmouseout="this.className='TdBtn'">电子资源</td>
<td class="TdBtn" onmouseover="this.className='TdBtn_hover'" onmouseout="this.className='TdBtn'">公共检索</td>
<td class="TdBtn" onmouseover="this.className='TdBtn_hover'" onmouseout="this.className='TdBtn'">随书光盘</td>
<td class="TdBtn" onmouseover="this.className='TdBtn_hover'" onmouseout="this.className='TdBtn'">新书推荐</td>
</tr>
</table>
</div>
样式如下
.Bg{background-image:url(images/bg.png)width:663pxheight:51px}
.TdBtn_hover{font:bold 16px Arial, Helvetica, sans-serifcolor:#fffline-height:51pxtext-align:centercursor:hand}
.TdBtn{font:bold 16px Arial, Helvetica, sans-serifcolor:#000line-height:51pxtext-align:center}
上面的文字我是直接用样式“TdBtn_hover”“TdBtn”写的效果，你原图上的那种效果还得用图片做，你可以把样式内的东西替换成背景图片，如：
.TdBtn_hover{ background:url(效果图片)cursor:hand}
.TdBtn{ background:url(默认图片)}
CSS好比衣服 同一个人CSS的不同 装扮也就不同模板好比骨架 骨架的不同 人的形状就不同 有高矮胖瘦之分
CSS是定义网页各种元素 字体、颜色等
模板是定义网页框架 什么地方放什么东西 是人家做好的样板
层的概念：
层是一种HTML页面元素,是指具有绝对或者相对位置的DIV标签.
通过 Dreamweaver，您可以使用层来设计页面的布局。您可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。您可以在一个层中放置背景图像，然后在该层的前面放置第二个层，它包含带有透明背景的文本。
利用层可以非常灵活地放置内容。但是，使用旧版本的 Web 浏览器的站点访问者查看层时可能会遇到麻烦。若要确保所有人都能够查看您的 Web 页，可以使用层设计页面布局，然后将层转换为表。有关更多信息，请参见将层转换为表格。但是，如果您所面对的访问者很可能使用某种最新的浏览器，则可以完全用层来设计布局，而无需将层转换为表格
DIV的意思是区块标签。
如果已经给 div 标签分配了绝对位置（也就是规定了这个DIV标签的样式），它就可充当一个 Dreamweaver 层。
框架的弊端和作用有以下几点
1、增强网页的导航功能
2、整个浏览空间变小，让人感觉缩手缩脚
3、容易在每个框架中产生滚动条，给浏览造成不便
表格用于布局，用表格来布局表单里面的数据，如果你有数据提供给后台程序，比如一个输入框，文本框等，这些元素通常要放到一个表单，这样才可以完成数据的提交.
