第3章 框架、表格、层与网页布局.ppt

第第3 3章章 框架、表格、层与网页布局框架、表格、层与网页布局 【案例案例7 7】“操作系统比较操作系统比较”网页网页 3.1【案例案例8 8】“主流电脑配置单主流电脑配置单”网页网页3.2【案例案例9 9】“CPU“CPU进化史进化史”网页网页3.3【案例案例1010】“电脑展示电脑展示”网页网页3.43.1 3.1 【案例案例7 7】“操作系统比较操作系统比较”网网页页3.1.1学习目标学习目标“操作系统比较操作系统比较”网页的显示效果如图网页的显示效果如图3-1-1所示。该网页被分割成两个部分，网所示。该网页被分割成两个部分，网页的左半部分显示出网页的标题和各个页页的左半部分显示出网页的标题和各个页面的链接，单击其中一个链接，即可在网面的链接，单击其中一个链接，即可在网页的右半部分显示出相应的内容，如图页的右半部分显示出相应的内容，如图3-1-2所示。通过本实例，介绍创建框架与编辑所示。通过本实例，介绍创建框架与编辑框架，以及在框架内插入框架，以及在框架内插入HTML文件内容文件内容的方法。的方法。图图3-1-1 “操作系统比较操作系统比较”网页的显示效果网页的显示效果图图3-1-2 单击不同链接后网页的显示效果单击不同链接后网页的显示效果框架就是把一个网页页面分成几个单框架就是把一个网页页面分成几个单独的区域（即窗口），每个区域就像一个独的区域（即窗口），每个区域就像一个独立的网页，可以是一个独立的独立的网页，可以是一个独立的HTML文文件。件。因此，框架可以实现在一个网页内显因此，框架可以实现在一个网页内显示多个示多个HTML文件的效果。文件的效果。对于一个有对于一个有n个区域的框架网页来说，个区域的框架网页来说，每个区域有一个每个区域有一个HTML文件，整个框架结文件，整个框架结构也是一个构也是一个HTML文件，因此该框架网页文件，因此该框架网页是一个是一个HTML文件集，它有文件集，它有n+1个个HTML文件。文件。3.1.2操作过程操作过程1创建框架与编辑框架创建框架与编辑框架（1）创建框架）创建框架方法方法1：单击：单击“文件文件”“新建新建”菜单命菜单命令，打开令，打开“新建文档新建文档”对话框，如图对话框，如图3-1-4所示。所示。单击该对话框左边单击该对话框左边“类别类别”栏中的栏中的“框架集框架集”选项，再选中该对话框右边选项，再选中该对话框右边“框架集框架集”栏内的一种框架选项。然后单击栏内的一种框架选项。然后单击“创建创建”按钮，即可创建有框架的网页。按钮，即可创建有框架的网页。3.1.3相关知识相关知识图图3-1-4 在页面内创建上下两个框架在页面内创建上下两个框架 方法方法2：单击：单击“插入插入”（布局）面板的（布局）面板的“框架框架”快捷菜单中的一个按钮，即可在页快捷菜单中的一个按钮，即可在页面内设置出相应的框架，如图面内设置出相应的框架，如图3-1-5所示。所示。图图3-1-5 “框架框架”快捷菜单快捷菜单方法方法3：利用：利用“修改修改”“框架页框架页”“”菜单命令或利用菜单命令或利用“插入插入”“HTML”“框架框架”“”菜菜单命令，也可以创建框架。单命令，也可以创建框架。建立了框架后，要增加框架的个数，建立了框架后，要增加框架的个数，可采用如下方法：将光标移到框架内，再可采用如下方法：将光标移到框架内，再单击单击“查看查看”“可视化助理可视化助理”“框架框架边框边框”菜单选项，使该菜单选项左边有菜单选项，使该菜单选项左边有。然后将鼠标指针移到框架的边缘处，当。然后将鼠标指针移到框架的边缘处，当鼠标指针为鼠标指针为“”或或“”形状时，向鼠标形状时，向鼠标指针箭头指示的方向拖曳鼠标，即可在水指针箭头指示的方向拖曳鼠标，即可在水平或垂直方向增加一个框架。平或垂直方向增加一个框架。（2）简单编辑框架）简单编辑框架调整框架的大小：用鼠标拖曳框架线，调整框架的大小：用鼠标拖曳框架线，即可调整框架的大小。即可调整框架的大小。删除框架：用鼠标拖曳框架线，拖曳到删除框架：用鼠标拖曳框架线，拖曳到另一条框架线或边框处，即可删除该框架。另一条框架线或边框处，即可删除该框架。（3）设置框架集属性）设置框架集属性单击框架的外边框后，可将单击框架的外边框后，可将“属性属性”栏变为框架集栏变为框架集“属性属性”栏，如图栏，如图3-1-6所示。所示。改变总框架属性需要通过框架集改变总框架属性需要通过框架集“属性属性”栏来完成。栏来完成。图图3-1-6 框架集框架集“属性属性”栏栏“边框边框”下拉列表框：用来确定是否要下拉列表框：用来确定是否要边框。选择边框。选择“是是”选项是保留边框；选择选项是保留边框；选择“否否”选项是不保留边框；选择选项是不保留边框；选择“默认默认”选项，表示采用默认状态。通常是要保留选项，表示采用默认状态。通常是要保留边框。边框。“边框颜色边框颜色”栏：用来确定边框的颜色。栏：用来确定边框的颜色。单击该按钮，可弹出颜色板，利用它可确单击该按钮，可弹出颜色板，利用它可确定边框的颜色。也可在文本框中直接输入定边框的颜色。也可在文本框中直接输入颜色数据。颜色数据。“边框宽度边框宽度”文本框：用来输入边框的文本框：用来输入边框的宽度数值，其单位是像素。如果在该文本宽度数值，其单位是像素。如果在该文本框内输入框内输入0，则没有边框。如果，则没有边框。如果“查看查看”“可视化助理可视化助理”“框架边框框架边框”菜单菜单命令被选中，则网页文档窗口内会显示辅命令被选中，则网页文档窗口内会显示辅助的边框线（不会在浏览器中显示）。助的边框线（不会在浏览器中显示）。“值值”文本框：用来确定网页左边分栏文本框：用来确定网页左边分栏的宽度或上边分栏的高度。的宽度或上边分栏的高度。“单位单位”下拉列表框：用来选择下拉列表框：用来选择“值值”文本框内数据的单位，单位有像素等。文本框内数据的单位，单位有像素等。（4）设置分栏框架属性）设置分栏框架属性按住按住Alt键，单击分栏框架的内部后，键，单击分栏框架的内部后，可使可使“属性属性”栏变为分栏框架栏变为分栏框架“属性属性”栏，栏，如图如图3-1-7所示。分栏框架的框架所示。分栏框架的框架“属性属性”栏中各选项的作用如下。栏中各选项的作用如下。图图3-1-7 分栏框架分栏框架“属性属性”栏栏“框架名称框架名称”文本框：用来输入分栏框文本框：用来输入分栏框架的名字。架的名字。“源文件源文件”文本框：用来显示该分栏内文本框：用来显示该分栏内HTML文件的路径和文件的名字。文件的路径和文件的名字。“滚动滚动”下拉列表框：用来选择分栏是下拉列表框：用来选择分栏是否要滚动条。选择否要滚动条。选择“是是”选项，表示要滚选项，表示要滚动条；选择动条；选择“否否”选项，表示不要滚动条；选项，表示不要滚动条；选择选择“自动自动”选项，表示根据分栏内是否选项，表示根据分栏内是否能够完全显示出其中的内容来自动选择是能够完全显示出其中的内容来自动选择是否要滚动条；选择否要滚动条；选择“默认默认”选项，表示采选项，表示采用默认状态。用默认状态。“不能调整大小不能调整大小”复选框：如果选中该复选框：如果选中该复选框，则不能用鼠标拖曳框架的边框线，复选框，则不能用鼠标拖曳框架的边框线，调整分栏大小；如果没有选中该复选框，调整分栏大小；如果没有选中该复选框，则可以用鼠标拖曳框架的边框线，调整分则可以用鼠标拖曳框架的边框线，调整分栏大小。栏大小。“边框边框”下拉列表框：用来确定是否要下拉列表框：用来确定是否要边框。当此处的设置与总框架边框。当此处的设置与总框架“属性属性”栏栏的设置矛盾时，以此处设置为准。的设置矛盾时，以此处设置为准。（1）单击网页框架的某一个区域内部，）单击网页框架的某一个区域内部，使光标移到该框架内。使光标移到该框架内。（2）然后可以像在没有框架的网页页）然后可以像在没有框架的网页页面内输入文字和导入对象那样，在选面内输入文字和导入对象那样，在选中的框架区域内输入文字和导入对象。中的框架区域内输入文字和导入对象。也可以单击也可以单击“文件文件”“在框架中打在框架中打开开”菜单命令，弹出菜单命令，弹出“选择选择HTML文文件件”对话框。利用它可将外部的对话框。利用它可将外部的HTML文件加载到选定的框架区域内。文件加载到选定的框架区域内。2在框架内插入在框架内插入HTML文件内容文件内容 3.2.1学习目标学习目标“主流电脑配置单主流电脑配置单”网页的显示效果如网页的显示效果如图图3-2-1所示。由于电脑的配置单有很强的所示。由于电脑的配置单有很强的条理性，所以在该网页中使用表格对网页条理性，所以在该网页中使用表格对网页中的数据进行排版。中的数据进行排版。3.2 3.2 【案例案例8 8】“主流电脑配置单主流电脑配置单”网页网页图图3-2-1 “主流电脑配置单主流电脑配置单”网页的显示效果网页的显示效果表格比较适合显示结构性比较强的内表格比较适合显示结构性比较强的内容，如值班表、课程表和考试安排表等。容，如值班表、课程表和考试安排表等。表格也是网页中经常使用的一个元件。表格也是网页中经常使用的一个元件。3.2.2操作过程操作过程1表格的基本操作表格的基本操作将光标移到需要插入表格的位置，单击将光标移到需要插入表格的位置，单击“插入插入”（常用）面板内的（常用）面板内的“表格表格”按钮按钮，弹出，弹出“表格表格”对话框，如图对话框，如图3-2-2所示。所示。3.2.3相关知识相关知识（1）“表格表格”对话框内各选项的作对话框内各选项的作用用“行数行数”和和“列数列数”文本框：输入表格文本框：输入表格的行数和列数。的行数和列数。“表格宽度表格宽度”文本框：输入表格的宽度文本框：输入表格的宽度值，其单位为像素或百分数。如果选择值，其单位为像素或百分数。如果选择“百分比百分比”，则表示表格占页面或它的母体，则表示表格占页面或它的母体容量宽度的百分比。容量宽度的百分比。“边框粗细边框粗细”文本框：输入表格边框的文本框：输入表格边框的宽度数值，其单位为像素。当它的值为宽度数值，其单位为像素。当它的值为0时，时，表示没有表格线。表示没有表格线。“单元格边距单元格边距”文本框：输入的数值表示文本框：输入的数值表示单元格之间两个相邻边框线（左与右、上单元格之间两个相邻边框线（左与右、上和下边框线）间的距离。和下边框线）间的距离。“单元格间距单元格间距”文本框：输入单元格内文本框：输入单元格内的内容与单元格边框间的空白数值，其单的内容与单元格边框间的空白数值，其单位为像素。这种空白存在于单元格内容的位为像素。这种空白存在于单元格内容的四周。四周。“页眉页眉”栏：用来设置表格的页眉单元栏：用来设置表格的页眉单元格。被设置为页眉的单元格，其中的字体格。被设置为页眉的单元格，其中的字体将被设置成居中和黑体格式。将被设置成居中和黑体格式。“辅助功能辅助功能”栏：栏：“辅助功能辅助功能”栏中各栏中各选项的作用如下。选项的作用如下。“标题标题”文本框：设置表格的标题。文本框：设置表格的标题。“对齐标题对齐标题”列表框：设置标题与表格列表框：设置标题与表格的位置关系，默认为表格的顶部。的位置关系，默认为表格的顶部。“摘要摘要”文本框：设置表格的摘要。文本框：设置表格的摘要。通过上述设置后，单击通过上述设置后，单击“确定确定”按钮，按钮，即可插入符合要求的表格，如图即可插入符合要求的表格，如图3-2-3所示。所示。图图3-2-3 网页中的表格网页中的表格（2）调整表格大小）调整表格大小调整整个表格的大小：单击表格的边框，调整整个表格的大小：单击表格的边框，选中该表格，此时表格右边、下边和右下选中该表格，此时表格右边、下边和右下角会出现角会出现3个方形的黑色控制柄。再用鼠标个方形的黑色控制柄。再用鼠标拖曳控制柄，即可调整整个表格的大小。拖曳控制柄，即可调整整个表格的大小。调整表格中行或列的大小：将鼠标指针调整表格中行或列的大小：将鼠标指针移到表格线处，当鼠标指针变为双箭头横移到表格线处，当鼠标指针变为双箭头横线或双箭头竖线时拖曳鼠标，即可调整表线或双箭头竖线时拖曳鼠标，即可调整表格线的位置，从而调整表格行或列的大小。格线的位置，从而调整表格行或列的大小。（3）表格和单元格标签）表格和单元格标签表格标签：选中表格后，在表格的下面表格标签：选中表格后，在表格的下面用绿色显示出了表格的宽度，如图用绿色显示出了表格的宽度，如图3-2-3所所示。单击下边的三角按钮，可以弹出示。单击下边的三角按钮，可以弹出“表表格格”快捷菜单。利用快捷菜单。利用“表格表格”快捷菜单可快捷菜单可以进行选择表格、清除表格列的宽度、左以进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。侧插入列和右侧插入列等操作。单元格标签：选中表格后，在表格标签单元格标签：选中表格后，在表格标签的下面显示出了每一列单元格的标签，如的下面显示出了每一列单元格的标签，如图图3-2-3所示。单击任意一个下三角按钮，所示。单击任意一个下三角按钮，可以弹出可以弹出“单元格单元格”快捷菜单，操作方法快捷菜单，操作方法和和“表格表格”快捷菜单基本相同。快捷菜单基本相同。（4）选择表格）选择表格选择整个表格：单击表格的外边框，可选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、下边和右选中整个表格，此时表格右边、下边和右下角会出现下角会出现3个方形黑色控制柄。个方形黑色控制柄。选择多个表格单元格：按住选择多个表格单元格：按住Ctrl键，同时键，同时依次单击所有要选择的表格单元格。依次单击所有要选择的表格单元格。选择表格的一行或一列单元格：将鼠标选择表格的一行或一列单元格：将鼠标移到一行的最左边或移到一列的最上边，移到一行的最左边或移到一列的最上边，当鼠标指针呈黑色箭头时单击，即可选中当鼠标指针呈黑色箭头时单击，即可选中一行或一列。一行或一列。选择表格的多行或多列单元格：按住选择表格的多行或多列单元格：按住Ctrl键，将鼠标依次移到要选择的各行或各列，键，将鼠标依次移到要选择的各行或各列，当鼠标指针呈黑色箭头时单击，即可选中当鼠标指针呈黑色箭头时单击，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列。还可以将鼠标移到要选择的多行或多列的起始处，当鼠标指针呈黑色多行或多列的起始处，当鼠标指针呈黑色箭头时，拖曳鼠标也可选择多行或多列单箭头时，拖曳鼠标也可选择多行或多列单元格。元格。单击表格的外边框，选中整个表格，单击表格的外边框，选中整个表格，此时表格的此时表格的“属性属性”栏如图栏如图3-2-4所示。表所示。表格格“属性属性”栏内各选项的作用如下。栏内各选项的作用如下。2设置整个表格的属性设置整个表格的属性图图3-2-4 表格的表格的“属性属性”栏栏“表格表格Id”下拉列表框：用来输入表格的下拉列表框：用来输入表格的名字。名字。“行行”和和“列列”文本框：用来输入表格文本框：用来输入表格的行数与列数。的行数与列数。“宽宽”和和“高高”文本框：用来输入表格文本框：用来输入表格的宽度与高度值。它们的单位可利用其右的宽度与高度值。它们的单位可利用其右边的下拉列表框来选择，其中的选项有边的下拉列表框来选择，其中的选项有“%”（百分数）和（百分数）和“像素像素”两种。两种。“填充填充”文本框：输入单元格内的内容文本框：输入单元格内的内容与单元格边框间的空白数，单位为像素。与单元格边框间的空白数，单位为像素。“间距间距”文本框：输入单元格之间两个文本框：输入单元格之间两个相邻边框线间的距离。相邻边框线间的距离。“对齐对齐”下拉列表框：该下拉列表框内下拉列表框：该下拉列表框内有有“默认默认”、“左对齐左对齐”、“居中对齐居中对齐”和和“右对齐右对齐”四个选项。四个选项。“边框边框”文本框：输入表格边框宽度，文本框：输入表格边框宽度，单位为像素点。单位为像素点。“背景颜色背景颜色”按钮与文本框：用来设置按钮与文本框：用来设置表格的背景色。表格的背景色。“背景图像背景图像”文本框与文件夹按钮：单文本框与文件夹按钮：单击文件夹按钮，可以弹出击文件夹按钮，可以弹出“选择图像源文选择图像源文件件”对话框，利用它可以给表格添加背景对话框，利用它可以给表格添加背景图像。图像。“边框颜色边框颜色”矩形按钮与文本框：用来矩形按钮与文本框：用来设置表格的边框线颜色。设置表格的边框线颜色。6个按钮：个按钮：按钮用来清除行高，按钮用按钮用来清除行高，按钮用来清除列宽，来清除列宽，按钮用来将表格宽度的单按钮用来将表格宽度的单位转换为像素，位转换为像素，按钮用来将表格宽度的按钮用来将表格宽度的单位改为百分比，单位改为百分比，按钮用来将表格高度按钮用来将表格高度的单位转换为像素，的单位转换为像素，按钮用来将表格宽按钮用来将表格宽度的单位改为百分比。度的单位改为百分比。“类类”下拉列表框：用来设置表格的样下拉列表框：用来设置表格的样式。式。3设置表格单元格的属性设置表格单元格的属性按住按住Ctrl键，单击表格中的单元格，键，单击表格中的单元格，选中几个单元格。此时选中几个单元格。此时“属性属性”栏变为表栏变为表格单元格格单元格“属性属性”栏，如图栏，如图3-2-5所示。所示。图图3-2-5 表格单元格表格单元格“属性属性”栏栏在表格单元格在表格单元格“属性属性”栏中，上半部栏中，上半部分用来设置单元格内文本的属性，它与文分用来设置单元格内文本的属性，它与文本本“属性属性”栏的选项基本一样。下半部分栏的选项基本一样。下半部分用来设置单元格的属性，各选项的作用如用来设置单元格的属性，各选项的作用如下。下。“合并所选单元格合并所选单元格”按钮按钮：选中要合：选中要合并的单元格，再单击并的单元格，再单击按钮，即可将选中按钮，即可将选中的单元格合并（将图的单元格合并（将图3-2-3所示表格左上角所示表格左上角的的2行行3列单元格合并），其效果如图列单元格合并），其效果如图3-2-6所示。所示。图图3-2-6 合并单元格后的效果合并单元格后的效果“拆分单元格拆分单元格”按钮按钮：选中一个单元：选中一个单元格，再单击格，再单击按钮，弹出按钮，弹出“拆分单元格拆分单元格”对话框，如图对话框，如图3-2-7所示。选中所示。选中“行行”单单选项，表示要拆分为几行；单击选中选项，表示要拆分为几行；单击选中“列列”单选项，表示要拆分为几列。在单选项，表示要拆分为几列。在“列数列数”数字框内选择行或列的个数。再单击数字框内选择行或列的个数。再单击“确定确定”按钮即可。将图按钮即可。将图3-2-6所示的表格中所示的表格中左上角的单元格拆分为左上角的单元格拆分为2列，其效果如图列，其效果如图3-2-8所示。所示。图图3-2-7 “拆分单元格拆分单元格”对话框对话框 图图3-2-8 拆分单元格拆分单元格“水平水平”和和“垂直垂直”下拉列表框：用来选下拉列表框：用来选择水平对齐方式和垂直对齐方式。择水平对齐方式和垂直对齐方式。“宽宽”和和“高高”文本框：用来设置单元格文本框：用来设置单元格的宽度与高度。的宽度与高度。“不换行不换行”复选框：如果选中该复选框，复选框：如果选中该复选框，则当单元格内的文字超过单元格的宽度时，则当单元格内的文字超过单元格的宽度时，不换行，自动将单元格的宽度加大到刚好可不换行，自动将单元格的宽度加大到刚好可以放下文字；没选中该复选框，则当单元格以放下文字；没选中该复选框，则当单元格内的文字超过单元格的宽度时，自动换行。内的文字超过单元格的宽度时，自动换行。“标题标题”复选框：如果选中该复选框，复选框：如果选中该复选框，则单元格中的文字以标题的格式显示（粗则单元格中的文字以标题的格式显示（粗体、居中）；如果没选中该复选框，则单体、居中）；如果没选中该复选框，则单元格中的文字以正文的形式显示。元格中的文字以正文的形式显示。“背景背景”按钮与文本框：单击上边的按钮与文本框：单击上边的“背景背景”文件夹图标，可以弹出文件夹图标，可以弹出“选择图像选择图像源文件源文件”对话框，利用该对话框可以给表对话框，利用该对话框可以给表格单元格添加背景图像。下边的格单元格添加背景图像。下边的“背景颜背景颜色色”矩形按钮与文本框用来设置表格单元矩形按钮与文本框用来设置表格单元格的背景色。当该文本框为空时，其设置格的背景色。当该文本框为空时，其设置与页面表格的与页面表格的“背景背景”设置一样。设置一样。“边框边框”按钮与文本框：用来设置表格按钮与文本框：用来设置表格单元格的双线条边框线的颜色。当该文本单元格的双线条边框线的颜色。当该文本框为空的时候，其设置与表格的框为空的时候，其设置与表格的“边框边框”颜色一样。颜色一样。3.3.1学习目标学习目标“CPU进化史进化史”网页的显示效果如图网页的显示效果如图3-3-1所示。该网页是使用层对网页中的内容所示。该网页是使用层对网页中的内容进行布局的。层是一种可以插入各种网页进行布局的。层是一种可以插入各种网页对象，可以自由定位、精确定位和容易控对象，可以自由定位、精确定位和容易控制的容器，它实际上就是一个网页子页面。制的容器，它实际上就是一个网页子页面。3.3 3.3 【案例案例9 9】“CPU“CPU进化史进化史”网网页页在层中，可以嵌套其他的层，层可以在层中，可以嵌套其他的层，层可以重叠，可以控制对象的位置和内容，从而重叠，可以控制对象的位置和内容，从而实现网页对象的重叠和立体化等特效，还实现网页对象的重叠和立体化等特效，还可以实现网页的动画和交互。可以实现网页的动画和交互。图图3-3-1 “CPU进化史进化史”网页的显示效果网页的显示效果目前，目前，WWW网页已经采用了动态超网页已经采用了动态超文本标记语言文本标记语言DHTML技术，它可以实现技术，它可以实现网页的多层化、立体化和动态化等特效，网页的多层化、立体化和动态化等特效，使网页更加生动活泼。使网页更加生动活泼。InternetExplorer4.0及以上的版本使用层的实现方法是及以上的版本使用层的实现方法是CSS（层叠样式表）的层，它使用标记（层叠样式表）的层，它使用标记和和来创建层和定位层，这是来创建层和定位层，这是由万维网联盟指定的。由万维网联盟指定的。NetscapeNavigator4.0及以上的版本及以上的版本使用层的实现方法是使用层的实现方法是Netscape的层，它使的层，它使用标记用标记和和来创建层和来创建层和定位层，这是由定位层，这是由Netscape公司指定的。公司指定的。3.3.2操作过程操作过程1设置层的默认属性和创建层设置层的默认属性和创建层（1）设置层的默认属性）设置层的默认属性单击单击“编辑编辑”“首选参数首选参数”菜单命菜单命令，弹出令，弹出“首选参数首选参数”对话框，再选中该对话框，再选中该对话框内对话框内“分类分类”列表框中的列表框中的“层层”列表列表项，这时项，这时“首选参数首选参数”对话框如图对话框如图3-3-2所所示。示。“首选参数首选参数”对话框内各个选项的作对话框内各个选项的作用如下。用如下。3.3.3相关知识相关知识图图3-3-2 “首选参数首选参数”对话框对话框“显示显示”下拉列表框：用来设置默认状下拉列表框：用来设置默认状态下层的可视度。可以选择态下层的可视度。可以选择“default”（浏览器的默认状态）、（浏览器的默认状态）、“inherit”（继（继承母体的可视度）、承母体的可视度）、“visible”（可视）（可视）和和“hidden”（隐藏）。（隐藏）。“宽宽”和和“高高”文本框：用来设置默认文本框：用来设置默认状态下插入层的宽度和高度，单位为像素。状态下插入层的宽度和高度，单位为像素。“背景颜色背景颜色”按钮与文本框：用来设置按钮与文本框：用来设置默认状态下插入层的背景颜色，默认值为默认状态下插入层的背景颜色，默认值为透明。单击透明。单击按钮可以弹出颜色板，利按钮可以弹出颜色板，利用它来选定颜色，也可以在文本框内输入用它来选定颜色，也可以在文本框内输入颜色的代码。颜色的代码。“背景图像背景图像”文本框与文本框与“浏览浏览”按钮：按钮：用来设置默认状态下插入层的背景图像。用来设置默认状态下插入层的背景图像。单击单击“浏览浏览”按钮，可以弹出按钮，可以弹出“选择图像选择图像源文件源文件”对话框，利用它可以设定层的背对话框，利用它可以设定层的背景图像。景图像。“嵌套嵌套”复选框：选择它后，可以在将复选框：选择它后，可以在将层拖曳到其他层时实现嵌套。层拖曳到其他层时实现嵌套。“Netscape4兼容性兼容性”复选框：选择它后，复选框：选择它后，Dreamweaver会向会向HTML文件的文件的标记中加入标记中加入JavaScript函数，用来解决在函数，用来解决在Netscape4.0浏览器中添加嵌入浏览器中添加嵌入CSS层时可层时可自动调整层的尺寸，避免异常问题的产生。自动调整层的尺寸，避免异常问题的产生。（2）在页面中创建层）在页面中创建层单击单击“插入插入”（布局）面板中的（布局）面板中的“描绘描绘层层”按钮按钮，将鼠标指针移到文档窗口之，将鼠标指针移到文档窗口之中，这时鼠标指针变为十字线状态。再在中，这时鼠标指针变为十字线状态。再在页面内拖曳鼠标来创建层，如图页面内拖曳鼠标来创建层，如图3-3-3所示。所示。用鼠标将用鼠标将“描绘层描绘层”按钮按钮拖曳到网页拖曳到网页页面中，也可在页面光标处插入一个默认页面中，也可在页面光标处插入一个默认属性的层。属性的层。图图3-3-3 在页面内创建一个层在页面内创建一个层将光标移到要插入层的位置，单击将光标移到要插入层的位置，单击“插插入入”“布局对象布局对象”“层层”（1）选定层）选定层在改变层的属性前应选定层，选中的在改变层的属性前应选定层，选中的层会在层矩形的左上角产生一个双矩形形层会在层矩形的左上角产生一个双矩形形状控制柄图标状控制柄图标，同时在层矩形的四周产，同时在层矩形的四周产生生8个方形控制柄。选定一个层的情况如图个方形控制柄。选定一个层的情况如图3-3-4所示。选定层的方法可以有多种，操所示。选定层的方法可以有多种，操作方法如下。作方法如下。2层的基本操作层的基本操作 图图3-3-4 选定一个层选定一个层 单击层的边框线，即可选定该层。单击层的边框线，即可选定该层。单击层的内部，会在层矩形的左上角产单击层的内部，会在层矩形的左上角产生一个双矩形形状控制柄图标生一个双矩形形状控制柄图标，单击该，单击该控制柄图标控制柄图标，即可选定与它相对应的层。，即可选定与它相对应的层。按住按住Shift键，分别单击要选择的各个层键，分别单击要选择的各个层的内部或边框线，可以选中多个层。的内部或边框线，可以选中多个层。如果选定的是多个层，则只有一个层如果选定的是多个层，则只有一个层的方形控制柄是黑色实心的，其他选定的的方形控制柄是黑色实心的，其他选定的层的方形控制柄是空心的，如图层的方形控制柄是空心的，如图3-3-5所示。所示。图图3-3-5 选定多个层选定多个层（2）调整一个层或多个层的位置）调整一个层或多个层的位置用鼠标拖曳的方法：选中要调整大小的用鼠标拖曳的方法：选中要调整大小的层，将鼠标移到层的方形控制柄处或双矩层，将鼠标移到层的方形控制柄处或双矩形形状控制柄图标形形状控制柄图标处，当鼠标指针变为处，当鼠标指针变为四向箭头状时拖曳鼠标，即可调整层的位四向箭头状时拖曳鼠标，即可调整层的位置。置。用按键的方法：选中层后，每按一次用按键的方法：选中层后，每按一次“”或或“”键，可使层向右或向左移键，可使层向右或向左移动一个像素；每按一次动一个像素；每按一次“”或或“”键，键，可使层向下或向上移动一个像素。可使层向下或向上移动一个像素。如果按住如果按住Shift键的同按光标移动键，键的同按光标移动键，也可调整层的位置，每次移动也可调整层的位置，每次移动5个像素。个像素。利用层利用层“属性属性”栏进行设置的方法：选栏进行设置的方法：选中要调整大小的层，在其单个层中要调整大小的层，在其单个层“属性属性”栏内的栏内的“左左”文本框中输入修改数值（单文本框中输入修改数值（单位是像素），即可调整层的水平位置；在位是像素），即可调整层的水平位置；在“上上”文本框内输入修改数值（单位是像文本框内输入修改数值（单位是像素），即可调整层的垂直位置。素），即可调整层的垂直位置。（3）改变一个层的大小）改变一个层的大小改变一个层的大小有改变一个层的大小有3种方法，操作方种方法，操作方法如下所述。法如下所述。用鼠标拖曳的方法：选中要调整大小的用鼠标拖曳的方法：选中要调整大小的层，将鼠标移到层的方形控制柄处，当鼠层，将鼠标移到层的方形控制柄处，当鼠标指针变为双箭头状时拖曳鼠标，即可调标指针变为双箭头状时拖曳鼠标，即可调整层的大小。整层的大小。选中要调整大小的层，用按键调整的方选中要调整大小的层，用按键调整的方法：按住法：按住Ctrl键，同时按键，同时按“”或或“”键，可使层在水平方向增加或减少一个像键，可使层在水平方向增加或减少一个像素；每按一次素；每按一次“”或或“”按键，可使按键，可使层在垂直方向增加或减少一个像素。层在垂直方向增加或减少一个像素。按住按住Ctrl+Shift键的同时，按光标移动键的同时，按光标移动键，可每次增加或减少键，可每次增加或减少5个像素。个像素。利用层利用层“属性属性”栏进行设置的方法：选栏进行设置的方法：选中要调整大小的层，在其中要调整大小的层，在其“属性属性”栏内的栏内的“宽宽”文本框内输入修改数值（单位是像文本框内输入修改数值（单位是像素），即可调整层的宽度；在素），即可调整层的宽度；在“高高”文本文本框内输入修改数值（单位是像素），即可框内输入修改数值（单位是像素），即可调整层的高度。调整层的高度。（4）同时调整多个层的大小）同时调整多个层的大小同时调整多个层的大小是使多个层的同时调整多个层的大小是使多个层的宽度相等或高度相同，其方法如下。宽度相等或高度相同，其方法如下。用菜单命令的方法：选中多个层后，单用菜单命令的方法：选中多个层后，单击击“修改修改”“排列顺序排列顺序”“设成宽度设成宽度相同相同”菜单命令，即可使选中的层宽度相菜单命令，即可使选中的层宽度相等，其宽度与最后选中的层（它的方形控等，其宽度与最后选中的层（它的方形控制柄是黑色实心的）的宽度一样。如果单制柄是黑色实心的）的宽度一样。如果单击击“修改修改”“排列顺序排列顺序”“设成高度设成高度相同相同”菜单命令，即可使选中的层高度相菜单命令，即可使选中的层高度相等，其高度与最后选中的层的高度一样。等，其高度与最后选中的层的高度一样。利用层利用层“属性属性”栏进行设置的方法：选栏进行设置的方法：选中多个层后，其中多个层后，其“属性属性”栏变为多层栏变为多层“属属性性”栏。在其多层栏。在其多层“属性属性”栏内的栏内的“宽宽”文本框内修改数值（单位是像素），即可文本框内修改数值（单位是像素），即可调整多个层的宽度；在调整多个层的宽度；在“高高”文本框内修文本框内修改数值（单位是像素），即可调整多个层改数值（单位是像素），即可调整多个层的高度。的高度。（5）对齐多个层）对齐多个层用菜单命令的方法：选中多个层后，单用菜单命令的方法：选中多个层后，单击击“修改修改”“排列顺序排列顺序”菜单命令，可菜单命令，可弹出它的下一级菜单，如图弹出它的下一级菜单，如图3-3-6所示。单所示。单击其中一个菜单命令，即可获得相应的对击其中一个菜单命令，即可获得相应的对齐效果。齐效果。图图3-3-6 “对齐对齐”菜单的下一级菜单菜单的下一级菜单 例如，单击例如，单击“修改修改”“排列顺序排列顺序”“右对齐右对齐”菜单命令，即可将选中的菜单命令，即可将选中的多个层以最后选中的层（它的方形控制柄多个层以最后选中的层（它的方形控制柄是黑色实心的）的右边线为基准对齐，如是黑色实心的）的右边线为基准对齐，如图图3-3-7所示。所示。图图3-3-7 右对齐后的多个层右对齐后的多个层用按键的方法：选中多个层后，在按住用按键的方法：选中多个层后，在按住Ctrl键的同时按光标移动键，即可将多个键的同时按光标移动键，即可将多个层对齐。按层对齐。按“”键可右对齐，按键可右对齐，按“”键可左对齐，按键可左对齐，按“”键可下对齐，按键可下对齐，按“”键可上对齐。例如，按键可上对齐。例如，按Ctrl+“”键，键，即可将选中的多个层以最后选中的层的左即可将选中的多个层以最后选中的层的左边线对齐。边线对齐。利用层利用层“属性属性”栏进行设置的方法：选栏进行设置的方法：选中多个层后，在其多层中多个层后，在其多层“属性属性”栏内的栏内的“左左”或或“上上”文本框内输入修改数值，即文本框内输入修改数值，即可使多个层的左边线或上边线以修改的数可使多个层的左边线或上边线以修改的数值对齐。值对齐。利用利用“层层”面板可以对层的可视性、面板可以对层的可视性、嵌套关系、显示顺序和相互覆盖等属性进嵌套关系、显示顺序和相互覆盖等属性进行设置。单击行设置。单击“窗口窗口”“层层”菜单命令，菜单命令，即可弹出即可弹出“层层”面板，即层监视器，如图面板，即层监视器，如图3-3-8所示。所示。3利用利用“层层”面板设置层的属性面板设置层的属性图图3-3-8 “层层”面板面板（1）显示层的信息与选定层）显示层的信息与选定层显示层的信息：图显示层的信息：图3-3-8所示的所示的“层层”面面板中有板中有2个层，个层，“名称名称”栏给出了各个层的栏给出了各个层的名字：名字：“Layer1”、“Layer2”，“Z”栏栏内的数据给出了各层的显示顺序，内的数据给出了各层的显示顺序，Z值越高，值越高，显示越靠上。显示越靠上。Z值可以是负数，表示在网页值可以是负数，表示在网页下边，即隐藏起来，网页的下边，即隐藏起来，网页的“Z轴轴”数值为数值为0。选定层：单击选定层：单击“层层”面板中层的名字，面板中层的名字，即可选中相应的层。按住即可选中相应的层。按住Shift键，同时依键，同时依次单击次单击“层层”面板中各个层的名字，即可面板中各个层的名字，即可选中多个层。选中多个层。（2）更改层的名称和是否允许层重）更改层的名称和是否允许层重叠叠更改层的名称：双击更改层的名称：双击“名称名称”栏内层的栏内层的名字，使此行名字处出现白色的矩形，如名字，使此行名字处出现白色的矩形，如图图3-3-9所示。此时即可输入层的新名字。所示。此时即可输入层的新名字。图图3-3-9 更改层的名称更改层的名称设定是否允许层重叠：如果不选中设定是否允许层重叠：如果不选中“防防止重叠止重叠”复选框，则表示允许层之间有重复选框，则表示允许层之间有重叠关系；如果选中叠关系；如果选中“防止重叠防止重叠”复选框，复选框，则表示不允许层之间有重叠关系。则表示不允许层之间有重叠关系。（3）改变层之间的嵌套关系和层的）改变层之间的嵌套关系和层的显示顺序显示顺序在层中插入层叫做层的嵌套。在层的在层中插入层叫做层的嵌套。在层的嵌套中，子层的属性决定于其父层的属性。嵌套中，子层的属性决定于其父层的属性。在选定父层后，子层也会被选定；在移动在选定父层后，子层也会被选定；在移动或复制父层时，子层也会随之被移动或复或复制父层时，子层也会随之被移动或复制。制。改变层之间的嵌套关系：按住改变层之间的嵌套关系：按住Ctrl键，同键，同时用鼠标拖曳选中的层名字（例如时用鼠标拖曳选中的层名字（例如“Layer3”）到另一个层名字上（例如）到另一个层名字上（例如“Layer1”，可称为目标层），当该层名，可称为目标层），当该层名字四周出现矩形框时松开鼠标左键，即可字四周出现矩形框时松开鼠标左键，即可使选中的层成为目标层的子层。再按住使选中的层成为目标层的子层。再按住Ctrl键，将键，将“Layer2”层拖曳到层拖曳到“Layer3”层之上，然后松开鼠标左键，层之上，然后松开鼠标左键，此时的此时的“层层”面板如图面板如图3-3-10所示。所示。图图3-3-10 改变层之间的嵌套关系改变层之间的嵌套关系 由图由图3-3-10可以看出，可以看出，“Layer3”层是层是“Layer1”层的子层，层的子层，“Layer2”层是层是“