2．在表格内添加元素

    表格建立之后就可以向表格内添加元素了，如图像，文本和表格等，方法如同在文档中操作一样。添加文本，表格会随着增多而自动增高；在单元格中添加图像时，如果单元格的尺寸小于图像的尺寸，单元格会自动增高或增宽；在单元格中插入表格的时候，单元格中的表格叫做内嵌入式表格，内嵌表格中的单元格可以再分成多行或多列，并且可以无限制的插入，不过内嵌的表格越多，浏览器下载时间越长，所以内嵌表格最好不要超过三层。

3．编辑表格

（1）选择表格
   最常用的选择表格的方法有以下四种：

—用鼠标点击表格左上角边框，选中表格；
—将光标放在表格中的任意处，然后在菜单栏【修改】/【表格】中选定【选中表格】命令；
—拖动鼠标从表格左上角至右下角，选中所有单元格，然后在菜单栏【编辑】中选择【全选】命令；
—单击表格任意处，然后在状态栏选择<Table>标签。这是最简单的方法。如图3．64所示。

图3．64    在状态栏选择<Table>标签

表格被选中后的状态如图3．65所示。

图3．65  表格被选中后的状态

（2）更改表格尺寸
    上图中表格边框上的黑色方块叫做拖放手柄，鼠标移动到拖放手柄上出现双向箭头光标的时候即可拖动至合适的尺寸。当然要精确定义表格的尺寸还是要在选中表格后的属性栏中设定，如图3．66所示。

图3．66    表格后的属性栏

【表格ID】用于编程和行为中使用；
【背景颜色】打开调色板选中颜色，即可指定表格的背景色；
【背景图像】给出图像的路径和文件名即可指定表格的背景图像；
注：如果既指定背景图像又指定背景颜色，则图像部分会遮挡住背景颜色。除非它是一个透明的GIF图像；
【边框颜色】打开混色器面板选中颜色，即可指定表格边框颜色。

（3）选定多个单元格

    按下键盘的【Ctrl】键用鼠标击单元格即可选中该单元格，继续点击即可选中其他单元格。下图第一行显示的是单元格被选中的状态，第三行显示的是选中了两个单元格的状态，如图3．67所示。

图3．67    选定多个单元格

（4）拆分/合并单元格

    选中单元格可以合并，例如上图中第三行的两个单元格，选中后选择【修改】/【表格】菜单的【合并单元格】命令即可，如图3．68所示。

   图3．68   合并单元格

选中一个单元格后选中【修改】/【表格】菜单的【拆分单元格】命令，打开如图3．69所示的对话框，可选择拆分为多行多列。

图3．69   拆分单元格对话框

（5）插入行或列

将设计布局改为【布局】模式，红色标记出的功能按钮即为插入按钮，鼠标移动到按钮上停留时会有文本提示，如图3．70所示，选中单元格后点击插入按钮插入行列。

图3．70    7.ASP运行结果

3.4.11  层

在众多网页制作软件中， Dreamweaver MX 独有层的功能。Dreamweaver MX 的层可以用来精确定位网页元素；层可以通过时间轴来移动或者变换位置，实现动画效果；层还转换为表格，为不支持层的浏览器提供解决方法。

建立层的的方法很简单，打开Dreamweaver MX，新建一个HTML文档，选择“布局” 格式，在菜单栏选择【插入】/【布局对象】/【层】，此时在文档窗口就能看到建立了一个层，如图3．71所示。

图3．71  建好的层

    鼠标点击层可以选中层，层选中之后，可以在如图3．72所示的属性面板里面查看和设置各种参数。

图3．72  层的属性面板

【层编号】层的名称；

【左】（上）层与浏览器窗口左边（上边）的距离；

【宽】（高）层的宽度和高度；

【Z轴】除了屏幕的X、Y轴，逻辑上增加了一个垂直于屏幕的Z轴，其数值代表垂直平面的方向上层的序号；

【可见性】层的可见性；

default-默认

inherit-继承

visible-可见

hidden-隐藏

【背景图像】（颜色）用来设置层的背景图像和颜色；

【溢出】设置当层内的内容超过层的大小时的显示方式；

visible：层将向右向下扩大以显示层内的全部内容

hidden:只显示层尺寸以内的内容

scroll:不改变层的大小，但增加滚动条，不管层的尺寸时候够大都会显示滚动条

auto:只有在层不够大的时候才出项滚动条

【剪辑】用于指定层的哪一部分是可见的；

因为层在网页中可以随意拖动摆放，因此经常用于定位网页元素，大家可以自己动手体会层的使用。

3.4.12  CSS

我们可能都有这样的体验，如果设置浏览器中字体的大小，网页中的字体就会随之改变。这固然会给一些有特殊需要的用户带来方便，但同时也给网页的布局带来负面影响－－网页的版面会随着字体的改变而变的面目全非。但一个好的网页，却不受浏览器字体设置的影响，网页中的文本等始终保持原有的外观，这就是CSS的作用。

    CSS是Cascading Style Sheets（层叠样式表单）的简称。它允许在HTML文档中加入样式（如字体类型、颜色、大小等等）。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTML调用。CSS在当前的网页设计中已经成为不可缺少的技术，例如我们现在最常见的去除链接文字的下划线就是CSS最简单的应用。

    Dreamweaver是最早将CSS的应用于网页的工具。通过直观的界面，设计者可以定义超过70种不同的CSS设置，这些设置可以影响到网页中的任何元素，从文本的间距到类似于多媒体的转换，可以随时创建自己的样式单，然后在任何时候连接调用它。

    CSS也是以代码形式出现的，编写好的CSS代码，在网页的HTML中以<style>标签形式出现，在网页中使用CSS有三种方式：

—外部文件方式：即用任何一种文本编辑工具将编辑好的CSS代码保存为***.css的文件，然后在网页的文档头加入代码<Link Rel="stylesheet" Href="***.css" Type="text/css"> 凡是在网页文档头加入了这行代码的网页都将按照CSS格式显示。这种方式一般主要在使整站风格统一时使用。

—内部文档头格式：它是将CSS风格网页的文件头之间，应用的范围仅在该文档。这种方式主要在确定某个页面风格时使用。

—直接插入式：这种方法是在每一个HTML标签后直接书写CSS属性。在对页面的某一个标签进行调整时使用这种方式。

    要建立CSS样式，请在【窗口】菜单选择【CSS样式】，然后点击右下角的【新建样式表】按钮，出现如图3．73的对话框，各部分解释如下：

图3．73    新建样式表对话框

【名称】为新建的样式命名，必须以“.”开头，以英文字母命名；

【选择器类型】 类、标签、高级三项，请根据需要选择；

【定义在】选择“新建样式表文件”按下“确定”后弹出对话框，要求将样式保存为样式表文件，供“外部文件方式”使用；选择“仅对该文档”定义只能用于该文档的样式。

    下面我们通过一个实例来体会一下样式表的作用。我们建立一个名为“.mycss”的样式表，字体为“宋体”，字号为24点，颜色为“红色”，背景颜色为“蓝色”。方法如下：

1．新建一个HTML文档，点击【CSS样式】面板右下角的【新建样式表】按钮，在出现的对话框的名称栏中输入“.mycss”，其它默认。点击“确定”按钮后弹出“保存”对话框，输入样式名“1.css”，打开如图3．74所示的对话框。

图3．74  样式表设置对话框

     2．在【分类】中选择【类型】设置字体“宋体”，大小“24”像素，颜色“红色”后按下【应用】按钮；

    3．在【分类】中选择【背景】设置背景颜色后点击【确定】，.mycss样式表建立完毕。

    此时在属性面板（如图3．75所示）样式中选择“mycss”样式然后输入文本，你会发现文本的字体自动为“宋体”，字号为24点，颜色为“红色”，背景颜色为“蓝色”。

图3．75  样式表属性面板

    回到【CSS样式】面板，选中“.mycss”然后单击右下脚的“编辑样式”按钮，可以对刚才设定的样式进行更改。