《Dreamweaver8和Flash8案例教程》第3章框架、表格、层与网页布局.ppt

《《Dreamweaver8和Flash8案例教程》第3章框架、表格、层与网页布局.ppt》由会员分享，可在线阅读，更多相关《《Dreamweaver8和Flash8案例教程》第3章框架、表格、层与网页布局.ppt（162页珍藏版）》请在三一文库上搜索。

1、第3章 框架、表格、层与网页布局,3.1 【案例7】“操作系统比较”网页,3.1.1 学习目标 “操作系统比较”网页的显示效果如图3-1-1所示。该网页被分割成两个部分，网页的左半部分显示出网页的标题和各个页面的链接，单击其中一个链接，即可在网页的右半部分显示出相应的内容，如图3-1-2所示。通过本实例，介绍创建框架与编辑框架，以及在框架内插入HTML文件内容的方法。,图3-1-1 “操作系统比较”网页的显示效果,图3-1-2 单击不同链接后网页的显示效果,框架就是把一个网页页面分成几个单独的区域（即窗口），每个区域就像一个独立的网页，可以是一个独立的HTML文件。,因此，框架可以实现在一个网

2、页内显示多个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、钮，即可在页面内设置出相应的框架，如图3-1-5所示。,图3-1-5 “框架”快捷菜单,方法3：利用“修改”“框架页”“”菜单命令或利用“插入”“HTML”“框架”“”菜单命令，也可以创建框架。,建立了框架后，要增加框架的个数，可采用如下方法：将光标移到框架内，再单击“查看”“可视化助理”“框架边框”菜单选项，使该菜单选项左边有 。然后将鼠标指针移到框架的边缘处，当鼠标指针为“”或“”形状时，向鼠标指针箭头指示的方向拖曳鼠标，即可在水平或垂直方向增加一个框架。,（2）简单编辑框架 调整框架的大小：用鼠标拖曳框架线，即可调整框架的大小。 删除框架：用鼠标拖曳框架线，拖曳到另一条框架线或边框处，即

4、可删除该框架。,（3）设置框架集属性 单击框架的外边框后，可将“属性”栏变为框架集“属性”栏，如图3-1-6所示。改变总框架属性需要通过框架集“属性”栏来完成。,图3-1-6 框架集“属性”栏,“边框”下拉列表框：用来确定是否要边框。选择“是”选项是保留边框；选择“否”选项是不保留边框；选择“默认”选项，表示采用默认状态。通常是要保留边框。 “边框颜色”栏：用来确定边框的颜色。单击该按钮，可弹出颜色板，利用它可确定边框的颜色。也可在文本框中直接输入颜色数据。,“边框宽度”文本框：用来输入边框的宽度数值，其单位是像素。如果在该文本框内输入0，则没有边框。如果“查看”“可视化助理”“框架边框”菜单

5、命令被选中，则网页文档窗口内会显示辅助的边框线（不会在浏览器中显示）。,“值”文本框：用来确定网页左边分栏的宽度或上边分栏的高度。 “单位”下拉列表框：用来选择“值”文本框内数据的单位，单位有像素等。,（4）设置分栏框架属性 按住Alt键，单击分栏框架的内部后，可使“属性”栏变为分栏框架“属性”栏，如图3-1-7所示。分栏框架的框架“属性”栏中各选项的作用如下。,图3-1-7 分栏框架“属性”栏,“框架名称”文本框：用来输入分栏框架的名字。 “源文件”文本框：用来显示该分栏内HTML文件的路径和文件的名字。,“滚动”下拉列表框：用来选择分栏是否要滚动条。选择“是”选项，表示要滚动条；选择“否”

6、选项，表示不要滚动条；选择“自动”选项，表示根据分栏内是否能够完全显示出其中的内容来自动选择是否要滚动条；选择“默认”选项，表示采用默认状态。,“不能调整大小”复选框：如果选中该复选框，则不能用鼠标拖曳框架的边框线，调整分栏大小；如果没有选中该复选框，则可以用鼠标拖曳框架的边框线，调整分栏大小。 “边框”下拉列表框：用来确定是否要边框。当此处的设置与总框架“属性”栏的设置矛盾时，以此处设置为准。,（1）单击网页框架的某一个区域内部，使光标移到该框架内。 （2）然后可以像在没有框架的网页页面内输入文字和导入对象那样，在选中的框架区域内输入文字和导入对象。也可以单击“文件”“在框架中打开”菜单命令

7、，弹出“选择HTML文件”对话框。利用它可将外部的HTML文件加载到选定的框架区域内。,2在框架内插入HTML文件内容,3.2.1 学习目标 “主流电脑配置单”网页的显示效果如图3-2-1所示。由于电脑的配置单有很强的条理性，所以在该网页中使用表格对网页中的数据进行排版。,3.2 【案例8】“主流电脑配置单”网页,图3-2-1 “主流电脑配置单”网页的显示效果,表格比较适合显示结构性比较强的内容，如值班表、课程表和考试安排表等。表格也是网页中经常使用的一个元件。 3.2.2 操作过程,1表格的基本操作 将光标移到需要插入表格的位置，单击“插入”（常用）面板内的“表格”按钮 ，弹出“表格”对话框

8、，如图3-2-2所示。,3.2.3 相关知识,（1）“表格”对话框内各选项的作用 “行数”和“列数”文本框：输入表格的行数和列数。 “表格宽度”文本框：输入表格的宽度值，其单位为像素或百分数。如果选择“百分比”，则表示表格占页面或它的母体容量宽度的百分比。,“边框粗细”文本框：输入表格边框的宽度数值，其单位为像素。当它的值为0时，表示没有表格线。 “单元格边距”文本框：输入的数值表示单元格之间两个相邻边框线（左与右、上和下边框线）间的距离。,“单元格间距”文本框：输入单元格内的内容与单元格边框间的空白数值，其单位为像素。这种空白存在于单元格内容的四周。 “页眉”栏：用来设置表格的页眉单元格。被

9、设置为页眉的单元格，其中的字体将被设置成居中和黑体格式。,“辅助功能”栏：“辅助功能”栏中各选项的作用如下。 “标题”文本框：设置表格的标题。 “对齐标题”列表框：设置标题与表格的位置关系，默认为表格的顶部。,“摘要”文本框：设置表格的摘要。 通过上述设置后，单击“确定”按钮，即可插入符合要求的表格，如图3-2-3所示。,图3-2-3 网页中的表格,（2）调整表格大小 调整整个表格的大小：单击表格的边框，选中该表格，此时表格右边、下边和右下角会出现3个方形的黑色控制柄。再用鼠标拖曳控制柄，即可调整整个表格的大小。,调整表格中行或列的大小：将鼠标指针移到表格线处，当鼠标指针变为双箭头横线或双箭头

10、竖线时拖曳鼠标，即可调整表格线的位置，从而调整表格行或列的大小。,（3）表格和单元格标签 表格标签：选中表格后，在表格的下面用绿色显示出了表格的宽度，如图3-2-3所示。单击下边的三角按钮，可以弹出“表格”快捷菜单。利用“表格”快捷菜单可以进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。,单元格标签：选中表格后，在表格标签的下面显示出了每一列单元格的标签，如图3-2-3所示。单击任意一个下三角按钮，可以弹出“单元格”快捷菜单，操作方法和“表格”快捷菜单基本相同。,（4）选择表格 选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、下边和右下角会出现3个方形黑色控制柄。

11、选择多个表格单元格：按住Ctrl键，同时依次单击所有要选择的表格单元格。,选择表格的一行或一列单元格：将鼠标移到一行的最左边或移到一列的最上边，当鼠标指针呈黑色箭头时单击，即可选中一行或一列。,选择表格的多行或多列单元格：按住Ctrl键，将鼠标依次移到要选择的各行或各列，当鼠标指针呈黑色箭头时单击，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的起始处，当鼠标指针呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。,单击表格的外边框，选中整个表格，此时表格的“属性”栏如图3-2-4所示。表格“属性”栏内各选项的作用如下。,2设置整个表格的属性,图3-2-4 表格的“属性”栏,“表格Id”下

12、拉列表框：用来输入表格的名字。 “行”和“列”文本框：用来输入表格的行数与列数。 “宽”和“高”文本框：用来输入表格的宽度与高度值。它们的单位可利用其右边的下拉列表框来选择，其中的选项有“%”（百分数）和“像素”两种。,“填充”文本框：输入单元格内的内容与单元格边框间的空白数，单位为像素。 “间距”文本框：输入单元格之间两个相邻边框线间的距离。 “对齐”下拉列表框：该下拉列表框内有“默认”、“左对齐”、“居中对齐”和“右对齐”四个选项。,“边框”文本框：输入表格边框宽度，单位为像素点。 “背景颜色”按钮与文本框：用来设置表格的背景色。 “背景图像”文本框与文件夹按钮：单击文件夹按钮，可以弹出“

13、选择图像源文件”对话框，利用它可以给表格添加背景图像。,“边框颜色”矩形按钮与文本框：用来设置表格的边框线颜色。 6个按钮： 按钮用来清除行高，按钮用来清除列宽， 按钮用来将表格宽度的单位转换为像素， 按钮用来将表格宽度的单位改为百分比， 按钮用来将表格高度的单位转换为像素， 按钮用来将表格宽度的单位改为百分比。,“类”下拉列表框：用来设置表格的样式。 3设置表格单元格的属性 按住Ctrl键，单击表格中的单元格，选中几个单元格。此时“属性”栏变为表格单元格“属性”栏，如图3-2-5所示。,图3-2-5 表格单元格“属性”栏,在表格单元格“属性”栏中，上半部分用来设置单元格内文本的属性，它与文本

14、“属性”栏的选项基本一样。下半部分用来设置单元格的属性，各选项的作用如下。,“合并所选单元格”按钮 ：选中要合并的单元格，再单击 按钮，即可将选中的单元格合并（将图3-2-3所示表格左上角的2行3列单元格合并），其效果如图3-2-6所示。,图3-2-6 合并单元格后的效果,“拆分单元格”按钮 ：选中一个单元格，再单击 按钮，弹出“拆分单元格”对话框，如图3-2-7所示。选中“行”单选项，表示要拆分为几行；单击选中“列”单选项，表示要拆分为几列。在“列数”数字框内选择行或列的个数。再单击“确定”按钮即可。将图3-2-6所示的表格中左上角的单元格拆分为2列，其效果如图3-2-8所示。,图3-2-7

15、 “拆分单元格”对话框,图3-2-8 拆分单元格,“水平”和“垂直”下拉列表框：用来选择水平对齐方式和垂直对齐方式。 “宽”和“高”文本框：用来设置单元格的宽度与高度。 “不换行”复选框：如果选中该复选框，则当单元格内的文字超过单元格的宽度时，不换行，自动将单元格的宽度加大到刚好可以放下文字；没选中该复选框，则当单元格内的文字超过单元格的宽度时，自动换行。,“标题”复选框：如果选中该复选框，则单元格中的文字以标题的格式显示（粗体、居中）；如果没选中该复选框，则单元格中的文字以正文的形式显示。,“背景”按钮与文本框：单击上边的“背景”文件夹图标，可以弹出“选择图像源文件”对话框，利用该对话框可以

16、给表格单元格添加背景图像。下边的“背景颜色”矩形按钮与文本框用来设置表格单元格的背景色。当该文本框为空时，其设置与页面表格的“背景”设置一样。,“边框”按钮与文本框：用来设置表格单元格的双线条边框线的颜色。当该文本框为空的时候，其设置与表格的“边框”颜色一样。,3.3.1 学习目标 “CPU进化史”网页的显示效果如图3-3-1所示。该网页是使用层对网页中的内容进行布局的。层是一种可以插入各种网页对象，可以自由定位、精确定位和容易控制的容器，它实际上就是一个网页子页面。,3.3 【案例9】“CPU进化史”网页,在层中，可以嵌套其他的层，层可以重叠，可以控制对象的位置和内容，从而实现网页对象的重叠

17、和立体化等特效，还可以实现网页的动画和交互。,图3-3-1 “CPU进化史”网页的显示效果,目前，WWW网页已经采用了动态超文本标记语言DHTML技术，它可以实现网页的多层化、立体化和动态化等特效，使网页更加生动活泼。Internet Explorer 4.0及以上的版本使用层的实现方法是CSS（层叠样式表）的层，它使用标记和来创建层和定位层，这是由万维网联盟指定的。,Netscape Navigator 4.0及以上的版本使用层的实现方法是Netscape的层，它使用标记和来创建层和定位层，这是由Netscape公司指定的。 3.3.2 操作过程,1设置层的默认属性和创建层 （1）设置层的默

18、认属性 单击“编辑”“首选参数”菜单命令，弹出“首选参数”对话框，再选中该对话框内“分类”列表框中的“层”列表项，这时“首选参数”对话框如图3-3-2所示。“首选参数”对话框内各个选项的作用如下。,3.3.3 相关知识,图3-3-2 “首选参数”对话框,“显示”下拉列表框：用来设置默认状态下层的可视度。可以选择“default”（浏览器的默认状态）、“inherit”（继承母体的可视度）、“visible”（可视）和“hidden”（隐藏）。,“宽”和“高”文本框：用来设置默认状态下插入层的宽度和高度，单位为像素。 “背景颜色”按钮与文本框：用来设置默认状态下插入层的背景颜色，默认值为透明。单

19、击 按钮可以弹出颜色板，利用它来选定颜色，也可以在文本框内输入颜色的代码。,“背景图像”文本框与“浏览”按钮：用来设置默认状态下插入层的背景图像。单击“浏览”按钮，可以弹出“选择图像源文件”对话框，利用它可以设定层的背景图像。 “嵌套”复选框：选择它后，可以在将层拖曳到其他层时实现嵌套。,“Netscape 4兼容性”复选框：选择它后，Dreamweaver会向HTML文件的标记中加入JavaScript函数，用来解决在Netscape 4.0浏览器中添加嵌入CSS层时可自动调整层的尺寸，避免异常问题的产生。,（2）在页面中创建层 单击“插入”（布局）面板中的“描绘层”按钮 ，将鼠标指针移到文

20、档窗口之中，这时鼠标指针变为十字线状态。再在页面内拖曳鼠标来创建层，如图3-3-3所示。用鼠标将“描绘层”按钮 拖曳到网页页面中，也可在页面光标处插入一个默认属性的层。,图3-3-3 在页面内创建一个层,将光标移到要插入层的位置，单击“插入”“布局对象”“层”,（1）选定层 在改变层的属性前应选定层，选中的层会在层矩形的左上角产生一个双矩形形状控制柄图标 ，同时在层矩形的四周产生8个方形控制柄。选定一个层的情况如图3-3-4所示。选定层的方法可以有多种，操作方法如下。,2层的基本操作,图3-3-4 选定一个层,单击层的边框线，即可选定该层。 单击层的内部，会在层矩形的左上角产生一个双矩形形状控

21、制柄图标 ，单击该控制柄图标 ，即可选定与它相对应的层。 按住Shift键，分别单击要选择的各个层的内部或边框线，可以选中多个层。,如果选定的是多个层，则只有一个层的方形控制柄是黑色实心的，其他选定的层的方形控制柄是空心的，如图3-3-5所示。,图3-3-5 选定多个层,（2）调整一个层或多个层的位置 用鼠标拖曳的方法：选中要调整大小的层，将鼠标移到层的方形控制柄处或双矩形形状控制柄图标 处，当鼠标指针变为四向箭头状时拖曳鼠标，即可调整层的位置。,用按键的方法：选中层后，每按一次“”或“”键，可使层向右或向左移动一个像素；每按一次“”或“”键，可使层向下或向上移动一个像素。,如果按住Shift

22、键的同按光标移动键，也可调整层的位置，每次移动5个像素。 利用层“属性”栏进行设置的方法：选中要调整大小的层，在其单个层“属性”栏内的“左”文本框中输入修改数值（单位是像素），即可调整层的水平位置；在“上”文本框内输入修改数值（单位是像素），即可调整层的垂直位置。,（3）改变一个层的大小 改变一个层的大小有3种方法，操作方法如下所述。 用鼠标拖曳的方法：选中要调整大小的层，将鼠标移到层的方形控制柄处，当鼠标指针变为双箭头状时拖曳鼠标，即可调整层的大小。,选中要调整大小的层，用按键调整的方法：按住Ctrl键，同时按“”或“”键，可使层在水平方向增加或减少一个像素；每按一次“” 或“”按键，可使层

23、在垂直方向增加或减少一个像素。,按住Ctrl+Shift键的同时，按光标移动键，可每次增加或减少5个像素。 利用层“属性”栏进行设置的方法：选中要调整大小的层，在其“属性”栏内的“宽”文本框内输入修改数值（单位是像素），即可调整层的宽度；在“高”文本框内输入修改数值（单位是像素），即可调整层的高度。,（4）同时调整多个层的大小 同时调整多个层的大小是使多个层的宽度相等或高度相同，其方法如下。,用菜单命令的方法：选中多个层后，单击“修改”“排列顺序”“设成宽度相同”菜单命令，即可使选中的层宽度相等，其宽度与最后选中的层（它的方形控制柄是黑色实心的）的宽度一样。如果单击“修改”“排列顺序”“设成高

24、度相同”菜单命令，即可使选中的层高度相等，其高度与最后选中的层的高度一样。,利用层“属性”栏进行设置的方法：选中多个层后，其“属性”栏变为多层“属性”栏。在其多层“属性”栏内的“宽”文本框内修改数值（单位是像素），即可调整多个层的宽度；在“高”文本框内修改数值（单位是像素），即可调整多个层的高度。,（5）对齐多个层 用菜单命令的方法：选中多个层后，单击“修改”“排列顺序”菜单命令，可弹出它的下一级菜单，如图3-3-6所示。单击其中一个菜单命令，即可获得相应的对齐效果。,图3-3-6 “对齐”菜单的下一级菜单,例如，单击“修改”“排列顺序”“右对齐”菜单命令，即可将选中的多个层以最后选中的层（它

25、的方形控制柄是黑色实心的）的右边线为基准对齐，如图3-3-7所示。,图3-3-7 右对齐后的多个层,用按键的方法：选中多个层后，在按住Ctrl键的同时按光标移动键，即可将多个层对齐。按“”键可右对齐，按“”键可左对齐，按“”键可下对齐，按“”键可上对齐。例如，按Ctrl+“”键，即可将选中的多个层以最后选中的层的左边线对齐。,利用层“属性”栏进行设置的方法：选中多个层后，在其多层“属性”栏内的“左”或“上”文本框内输入修改数值，即可使多个层的左边线或上边线以修改的数值对齐。,利用“层”面板可以对层的可视性、嵌套关系、显示顺序和相互覆盖等属性进行设置。单击“窗口”“层”菜单命令，即可弹出“层”面

26、板，即层监视器，如图3-3-8所示。,3利用“层”面板设置层的属性,图3-3-8 “层”面板,（1）显示层的信息与选定层 显示层的信息：图3-3-8所示的“层”面板中有2个层，“名称”栏给出了各个层的名字：“Layer1”、“Layer2”，“Z”栏内的数据给出了各层的显示顺序，Z值越高，显示越靠上。Z值可以是负数，表示在网页下边，即隐藏起来，网页的“Z轴”数值为0。,选定层：单击“层”面板中层的名字，即可选中相应的层。按住Shift键，同时依次单击“层”面板中各个层的名字，即可选中多个层。,（2）更改层的名称和是否允许层重叠 更改层的名称：双击“名称”栏内层的名字，使此行名字处出现白色的矩形

27、，如图3-3-9所示。此时即可输入层的新名字。,图3-3-9 更改层的名称,设定是否允许层重叠：如果不选中“防止重叠”复选框，则表示允许层之间有重叠关系；如果选中“防止重叠”复选框，则表示不允许层之间有重叠关系。,（3）改变层之间的嵌套关系和层的显示顺序 在层中插入层叫做层的嵌套。在层的嵌套中，子层的属性决定于其父层的属性。在选定父层后，子层也会被选定；在移动或复制父层时，子层也会随之被移动或复制。,改变层之间的嵌套关系：按住Ctrl键，同时用鼠标拖曳选中的层名字（例如“Layer3”）到另一个层名字上（例如“Layer1”，可称为目标层），当该层名字四周出现矩形框时松开鼠标左键，即可使选中的

28、层成为目标层的子层。再按住Ctrl键，将“Layer2”层拖曳到“Layer3”层之上，然后松开鼠标左键，此时的“层”面板如图3-3-10所示。,图3-3-10 改变层之间的嵌套关系,由图3-3-10可以看出，“Layer3”层是“Layer1”层的子层，“Layer2”层是“Layer3”层的子层。父层名字的左边有一个 图标，单击它，可以使它的子层名字收缩起来， 图标变为图标 。再单击图标 ，又可使父层的子层展开显示， 图标变为图标 。,改变层的显示顺序：单击要更改显示顺序的层的Z值（例如“Layer2”），使它周围出现矩形框，如图3-3-11所示，再输入新的Z值。,图3-3-11 选中层的

29、Z值,（4）设置层的可视性 单击“层”面板内的 按钮，使 按钮列出现许多人眼图像，如图3-3-12所示。 “层”面板内的 按钮列显示的 图像（睁开的人眼图像）表示此行的层是可视的（即可见的）。默认状态下，所有层都是可视的。,图3-3-12 单击,按钮后的“层”面板,单击 图像，可使 图像消失，再单击原 图像处，会出现 图像，表示此行的层是不可视的。如果再单击 图像，可使它变为 图像，表示此行的层变为可视。 将“Layer3”层变为不可视后，“层”面板内的显示情况如图3-3-13所示。,图3-3-13 将“Layer3”层变为不可视,层“属性”栏有两种，一种是单层“属性”栏，这是在选中一个层时出

30、现的；另一种是多层“属性”栏，这是在选中多个层时出现的。单层“属性”栏如图3-3-14所示，多层“属性”栏如图3-3-15所示。可以看出，多层“属性”栏内除了基本的属性设置选项外，增加了关于文本属性的设置选项。“属性”栏中各个选项的作用如下。,4利用层“属性”栏设置层的属性,图3-3-14 单层“属性”栏,图3-3-15 多层“属性”栏,（1）“层编号”下拉列表框：用来输入层的名称，它会在“层”面板中显示出来。 （2）“左”和“上”文本框：用来确定层在页面中的位置，单位为像素。“左”文本框内的数据是层左边线与页面左边缘的间距，“上”文本框内的数据是层顶边线与页面顶边缘的间距。对于嵌套中的子层，

31、是相对于父层的位置。,（3）“宽”和“高”文本框：用来确定层的大小，单位为像素。 （4）“Z轴”文本框：用来确定层的显示顺序，数值越大，显示越靠上。 （5）“显示”列表框：用来确定层的可视性。它有“默认”、“可见”、“隐藏”和“与父层的可视性相同”4个选项。,（6）“背景图像”文本框与 按钮：用来确定层的背景图案。 （7）“背景颜色”按钮与文本框：用来确定层的背景颜色。 （8）“标签”列表框：用来确定标记方式。,（9）“溢出”列表框：它决定了当层中的内容超出层的边界时的处理方法。它有“Visible”（可见，即根据层中的内容自动调整层的大小，为系统默认）、“Hidden”（剪切）、“Scrol

32、l”（加滚动条）和“Auto”（自动，根据层中的内容能否在层中放得下，决定是否加滚动条）4个选项。,选择前3个不同选项后，浏览器中的效果如图3-3-16、图3-3-17和图3-3-18所示。注意：在网页页面编辑窗口内显示的都与图3-3-16一样。,图3-3-16 选择“Visible”,图3-3-17 选择“Hidden”,图3-3-18 选择“Scroll”,（10）“剪辑”栏：用来确定层的可见区域，即确定层中的内容与层边线的间距。“左”、“上”、“右”和“下”4个文本框分别用来输入层中的内容与层的左边线、顶部边线、右边线和底部边线的间距，单位为像素。,3.4.1 学习目标 “电脑展示”网页

33、的显示效果如图3-4-1所示。在该网页的制作过程中，使用了“布局”操作。网页布局的作用是在插入对象以前先对网页进行区域分割，也就是设计网页中的文字、图像与动画等对象如何安排。,3.4 【案例10】“电脑展示”网页,网页布局可以使用框架、层或表格，使用最多的是表格。常规的方法是插入表格，但是需要进行表格的合并和拆分等调整。,图3-4-1 “电脑展示”网页的显示效果,Dreamweaver 8中的“布局”栏有两个工具，即“布局表格”和“布局单元格”。利用它们可以方便地对网页进行布局操作。 3.4.2 操作过程,1“布局”栏中按钮的作用 在网页设计中，网页的布局是非常重要的，也就是网页中的文字、图像

34、与动画等对象如何安排。通常在插入对象以前，先进行区域分割。,3.4.3 相关知识,区域的分割可以使用框架、层或表格，使用最多的是表格。常规的方法是插入表格，但是这样会需要进行表格的合并和拆分等调整。Dreamweaver 8提供了“布局”栏的两个按钮；“布局表格”按钮 和“绘制布局单元格”按钮 ，利用它们可以方便地制作出网页布局的表格。这两个按钮的作用如下。,（1）“布局表格”按钮的作用 单击按下“布局视图”按钮 ，即可进入网页的“布局视图”状态（开始时是“标准模式”状态）。同时，“布局”栏中的按钮变为有效。,单击“布局”栏中的“布局表格”按钮 ，再用鼠标在设计窗口内拖曳，即可绘制出一个绿色线

35、条的表格，如图3-4-2所示。,图3-4-2 单击,按钮后绘制的布局表格,（2）“绘制布局单元格”按钮的作用 在绘制表格后，单击“布局”栏中的“绘制布局单元格”按钮 ，再用鼠标在设计窗口内拖曳，即可绘制出一个单元格。重复上述过程，最终效果如图3-4-3所示。,图3-4-3 单击,按钮后绘制的布局单元格,如果没有绘制布局表格就绘制布局单元格，则会自动产生一个布局表格。注意：不可以在布局单元格内绘制布局表格和布局单元格。,（1）网页布局的调整 选中布局表格：单击布局表格内部或它的标签 ，即可选中布局表格。选中的布局表格的四周会出现3个控制柄和布局表格宽度标注，如图3-4-2所示。,2网页布局的调整

36、与设置,调整布局表格的大小与位置：用鼠标拖曳布局表格的标签，即可改变布局表格的位置；用鼠标拖曳布局表格的绿色控制柄，即可改变布局表格的大小。注意：不能将布局表格调整到比其中的单元格还小，也不能将布局表格移到其他布局表格之上。,选中布局单元格：将鼠标指针移到布局单元格的蓝色线条处，布局单元格的线条会变为红色，此时单击布局单元格的线条，即可选中布局单元格。选中的布局单元格四周会有8个控制柄，如图3-4-3所示。,调整单元格的大小与位置：选中单元格后，用鼠标拖曳单元格线条，即可改变单元格的位置；用鼠标拖曳单元格的控制柄，即可改变单元格的大小。注意：不能将单元格移出所在的布局表格，也不能将单元格移到其

37、他单元格之上。,（2）布局表格的“属性”栏 选中布局表格后，即可弹出布局表格的“属性”栏，它与表格的“属性”栏不一样，如图3-4-4所示。布局表格“属性”栏内各选项的作用如下。,图3-4-4 网页布局表格的“属性”栏,“宽”栏：它有两个单选项，即“固定”和“自动伸展”。选中“固定”单选项后，还需要在其文本框内输入布局表格的宽度数值（单位为像素）。 “高”文本框：在其内输入布局表格的高度数值（单位为像素）。 “背景颜色”按钮与文本框：用来确定布局表格的背景颜色。,“填充”文本框：用来确定布局表格内布局单元格中插入的对象距边线的距离（单位为像素）。该值为0时，如图3-4-5所示；该值为15时，如图

38、3-4-6所示。,图3-4-5 “填充”值为0,图3-4-6 “填充”值为15,“间距”文本框：用来确定布局表格内各布局单元格与空图像之间的间距（单位为像素）。该值为0时，如图3-4-5所示；该值为15时，如图3-4-7所示。,图3-4-7 “间距”值为15,“清除行高”按钮 ：单击该按钮可清除行高。 “宽度一致”按钮 ：使单元格宽度一致，创建宽度相同的单元格。 “删除间隔图像”按钮 ：删除所有的间隔图像。它在添加间隔图像后才会有效。 “删除嵌套”按钮 ：删除嵌套在布局表格内的选中的布局表格。,（3）布局表格和布局单元格菜单 单击选中布局表格，再单击总宽度标注右边的箭头，可弹出布局表格菜单，如

39、图3-4-8所示。单击单元格宽度标注右边的箭头，可弹出布局单元格菜单，如图3-4-9所示。各菜单命令的作用如下。,图3-4-8 布局表格菜单,图3-4-9 布局单元格菜单,“清除所有高度”：单击它后，可将布局表格内的单元格的高（单元格顶部与布局表格顶端的间距）清除。如果布局表格内没有单元格，则自动建立充满布局表格的单元格。 “使所有宽度一致”：使所有布局单元格的宽度一样。 “移除所有分隔符图像”：删除所有的间隔图像。,“删除嵌套”：删除选中的布局表格中的间隔图像。 “列设置为自动伸展”：使选中的布局单元格的列自动适应布局表格的宽度。,“添加间隔图像”：在选中的布局单元格内添加间隔图像。间隔图像

40、是透明图，在浏览器中是看不见的，但它可以用来控制自动伸展表的间隔。间隔图像会维持页面上已经设置的表格和单元格的宽度。,（4）布局单元格的“属性”栏 选中布局单元格后，即可弹出布局单元格的“属性”栏，如图3-4-10所示。布局单元格“属性”栏内前面没有提到的各选项的作用如下。,图3-4-10 布局单元格的“属性”栏,“水平”下拉列表框：用来确定布局单元格内对象在水平方向的对齐方式，它有4个选项，分别为“默认”（一般为左对齐）、“左对齐”、“居中对齐”和“右对齐”。,“垂直”下拉列表框：用来确定布局单元格内对象在垂直方向的对齐方式，它有5个选项，分别为“默认”（一般为居中）、“顶端”、“中间”、“

41、底部”和“基线”。 “不换行”复选框：选中它后，可取消外框线。,（5）自动伸展 布局视图给网页设计者提供了两种表的宽度，即指定宽度和自动伸展。每个表的宽度都会显示在表顶部的页眉显示区中。指定宽度是一个明确的数字（例如160像素），设置指定宽度会影响同一列的其他单元格或表。,自动伸展是根据窗口的大小调整宽度。如果使用自动伸展的话，不论浏览器的窗口设置为多大，设计的版面都会充满整个浏览器的窗口。在一个版面中只，有一列可以自动伸展。,设置自动伸展宽度：单击需要设置自动伸展的表顶部的下三角按钮，再单击布局表格菜单中的“列设置为自动伸展”。另外，也可以选择要操作的列，再选中“属性”面板中的“自动伸展”单选项。,当某一列被设置为自动伸展后，Dreamweaver会插入间隔图到指定宽度的列以控制版面。在浏览器里是看不到间隔图的，但它可以用来控制间距。,设置指定宽度：并不是所有的列都适合于自动伸展宽度，有时需要精确指定列的宽度，可单击“属性”面板的“固定”文本框中，然后输入数值。如果输入的数值小于内容的宽度，Dreamweaver会自动设置宽度到正确的大小。,