第5章网页版面的布局技术

第5章

网页版面的布局设计《电子商务网页设计》课件知识目标：掌握表格、框架、浮动框架、APDiv等布局网页元素的基本html标记；掌握Dreamweaver的网页布局元素的基本设置和基本操作技能目标：通过表格、框架、浮动框架、APDiv等布局方法设计网页能力目标：在实践的过程中，总结各种网页布局技术的优劣，选择合适的布局模式和方法应用于自己的作品，展示自身的创新能力本章教学目标网页版面的布局设计5.1使用表格布局网页5.2使用框架布局网页5.3使用APDiv布局网页Web标准5.4网页模板的使用5.1使用表格布局网页5.1.1创建表格5.1.2表格设置5.1.3嵌套表格Web标准5.1.4使用表格布局页面5.1.1创建表格表格是网页中一个关键的元素，是定位文字与图像的强大工具，表格是由行和列组成的，最小的单位是单元格，表格中包括单元格，单元格边距，单元格间距等概念。创建表格可以选择“插入记录＞表格”或单击工具栏上“常用”选项卡的按钮，都将打开如图5-1所示的“表格”对话框。图5-1“表格”对话框表格对话框各选项含义如下：

行数和列数：设置表格的行数（Rows）、列数（Columns）。

表格宽度：可以设置像素或百分比两种单位，百分比是表格相对于整个页面宽度或其上级容器宽度的百分比。当使用百分比作单位时，表格的宽度会随着浏览器窗口的宽度改变；当使用像素作单位时，表格的宽度是固定的，不会随着浏览器窗口的宽度改变。

边框粗细：表格边框的宽度，默认为1像素。无边框设置值为0。单元格边距：设定单元格文本内容和边线之间的距离值，代码为cellpadding。单元格间距：设定表格内相邻的单元格之间的距离，单位为像素，代码为cellspacing。页眉：可以选择一种作为新建表格的表头样式。被设置为页眉的单元格中的文字默认样式为黑体加居中。

标题：表格的标题。

对齐标题：设置标题和表格的位置关系，默认为顶部。案例5-1-1创建一个行数为3，列数为3的表格，设置宽度为500像素，单元格边距为20像素，间距为20像素。制作步骤（1）单击工具栏上“常用”选项卡的按钮，打开如图5-1所示的“表格”对话框。设置表格的行数为3，列数为3的表格，设置宽度为500像素，单元格边距为20像素，间距为20像素。（2）单击“确定”按钮，出现如图5-2所示的表格。从图中可以直观的理解单元格边距和单元格间距的概念。<tablewidth="500"hight="300"cellpadding="20"cellspacing="20"border="1"><tr><td>特产名称</td><td>特产价格</td><td>产地</td></tr><tr><td>核桃</td><td>100</td><td>汾阳</td></tr><tr><td>老陈醋</td><td>30</td><td>清徐</td></tr></table>图5-2案例5-1-1效果图及核心代码5.1.2表格设置1.选择表格选择整个表格：单击表格的外边框，或者把光标定位在任一单元格中，选择右键—“表格＞选择表格”即可。此时表格的周围出现一个黑色的框线和三个控制点，用鼠标拖动控制点，可以沿着不同的方向对表格进行缩放。选择不连续的单元格：按着【Ctrl】键，依次单击要选择的单元格。选择表格的一行或一列单元格：使用拖动的方法可以，还有就是将光标置于一行的最左边，当其变成指向右的箭头时单击，可以选中一行；或移到一列的最上边，当光标变成黑色加粗的箭头时单击，即可选中一列。选择表格的多行或多列单元格：按住【Ctrl】键，去依次选中要选择的各行或各列。选择Dreamweaver元素最直接的方法是使用标签选择器，用鼠标单击文档窗口状态栏中的标签选择器，单击标记名称即可，如单击<table>，即可选中表格；单击<td>，即可选中相关单元格。2.表格属性设置选中整个表格，“属性”面板显示如图5-3所示。行、列、宽、填充、间距和边框中值的设置同前。对齐：设置表格在浏览器中水平方向上的对齐方式，有默认、左、右、居中对齐四种。标记为align，默认状态为左对齐。：清除表格的行高、列宽。将表格中多余的高度、宽度删除，留下基础的表格高度、宽度。：表格宽度像素和百分比转换。将表格的宽度从百分比为单位转换为以像素为单位，或将表格的宽度从以像素为单位转换为以百分比为单位。图5-3“表格属性”面板3.单元格属性设置光标定位在任一单元格中，显示“单元格属性”面板，如图5-4所示。单元格属性面板的上半部分是文本属性，可以对单元格中文字的字体、链接等进行设置，第三章已经讲过，这里不再赘述。下半部分则是对单元格进行参数设置。单元格属性还包括“行”或“列”属性。

图5-4单元格属性面板水平：设置单元格的水平对齐方式，有默认、左、右、居中对齐四种。垂直：设置单元格的垂直对齐方式，有默认、顶端、居中、底部、基线对齐五种。宽和高：可设置所选单元格的宽度和高度值。不换行：如果不允许单元格中的内容换行显示，可以选择此项。标题：将所选单元格设为标题单元格，此时字体默认居中、黑体。背景颜色：为单元格设置背景颜色。合并单元格：将选中的连续区域的单元格合并为一个单元格。拆分单元格：将一个单元格分成多个，与“合并单元格”是逆操作。4.表格基本操作插入行（列）：将光标定位于要插入行（列）的位置，选择右键—“表格＞插入行/插入列”，即可在当前行（列）的上（左）边插入一行（列）。插入多行（列）：将光标定位于要插入行（列）的位置，选择右键—“表格＞插入行或列…”，打开“插入行或列”对话框，如图5-5所示。

删除行（列）：将光标定位于要删除行（列）的位置，选择右键—“表格＞删除行”/“删除列”。图5-5“插入行或列”对话框小知识：设计网页时，在Dreamweaver中插入一个表格，若设置其“边框(Border)”为1，预览时其边框线较粗。对于不熟悉HTML语言的网页制作者，如何快速制作出细边线的表格呢？下面，介绍一个小技巧--巧用背景颜色和间距制作细边线表格。以制作一个4行3列、边框线为红色细线的表格为例：（1）在Dreamweaver的设计视图中插入一个4行3列的表格。（2）在“属性”面板中依照图5-6设置此表格的属性如下：边距(cellpadding)根据需要自行设置值(例如10)；间距(cellspacing)为1；边框(Border)为0，并设置其背景颜色(bgcolor)为红色。（3）选中此表格的所有单元格，在“属性”面板中设置所有单元格的属性如下：背景颜色为白色或红色以外的其他颜色。

图5-6表格参数最后，保存网页，按F12预览。怎么样，你已经成功设计了一个4行3列的红色细线表格！如图5-7所示。图5-7红色细线表格（3）将光标定位在此表格中，在“属性”面板设置此单元格的“背景颜色”为白色或红色以外的其他颜色。（4）根据需要插入一个嵌套表格，此例设为4行3列，设置此嵌套表格的“边框”为0，“边距”和“间距”可以根据需要设置或不设置，其它属性可不进行设置。如图5-8所示，外表格负责整体的排版，内表格的各个单元格中就可以插入文字、图片等其他网页元素了。图5-8嵌套表格嵌套表格就是在表格中再插入多个表格，可以多表格嵌套。比如，想要制作外边框线显示为细线，而内部单元格的分隔线不显示的效果，则可以配合使用嵌套表格。下面以表格外边框线为红色细线为例来说明操作方法：（1）在Dreamweaver的设计视图插入一个1行1列的表格。（2）在“属性”面板设置此表格的属性如下：“边距”根据需要自行设置，这里设为5像素；“间距”为1；“边框”为0；“背景颜色”为红色。5.1.3嵌套表格5.1.4使用表格布局页面最初表格的提出是为了规则的显示按行列排布的数据，但是，由于表格能将页面划分为任意矩形区域，很容易将页面上的可视化元素（如Flash、图像或文本段落等）整齐而美观地显示在某个区域，所以它成为传统最常用的一种页面布局工具。实际上，在Internet上的绝大多数网页都是用表格来辅助布局的。虽然用表格布局页面垃圾代码多，影响页面的下载时间，灵活性较差，难修改，但是它易于建立和方便排列有规律、结构均匀的内容和数据而且与绝大多数浏览器兼容，因此一直以来都是最常用的布局手段。案例5-1本节案例效果图和核心代码如图5-9所示。制作步骤（1）启动Dreamweaver，打开“文件面板”。如果没有站点，须按照案例3-1-2的操作步骤新建站点。（2）在文件面板中，用鼠标选择站点文件夹ncpshop，单击右键，新建一个空白文档,重命名为“ltable.html”。（3）双击打开该文件进行编辑。（4）点击“属性”面板中的“页面属性”按钮，打开如图5-10的对话框，在外观（CSS）选项卡中设置左边距和上边距都为“0px”。图5-9表格布局案例效果图图5-10“页面属性”设置（5）将光标定位在第一行，单击工具栏上“常用”选项卡的按钮，打开“表格”对话框，创建一个1行1列，870px宽，边框、填充、间距都为0的表格1，对齐方式为居中。（6）将光标定位在表格1中，单击工具栏上“常用”选项卡的按钮，打开“表格”对话框，创建一个5行、1列，边框、填充、间距都为0的表格2。（7）将光标定位在表格2的第一行，插入图片images/b2.jpg。（8）将光标定位在表格2的第二行，输入文字“首页”、“供求动态”、“网上商城”等，中间用空格分开，设置文字样式为“.style1”：16px。（9）将光标定位在表格2的第四行，选择“插入记录>HTML>水平线”。（10）将光标定位在表格2的第五行，输入文字“关于我们||产品目录||联系我们||友情链接||反馈问题||广告合作”，并为它们添加空链接。换行后，输入版权信息文字。文字都应用样式“.style1”。（11）将光标定位在表格2的第三行，插入一个1行3列的表格3，边框、填充、间距都为0，如图5-11所示。图5-11步骤11效果图（12）将光标定位在表格3的第一列中，插入一个11行1列的表格4，宽度200px，边框、填充、间距都为0。并设置第一行背景颜色为#00CC00。（13）将光标定位在表格3的第二列中，插入一个7行4列的表格5，宽度500px，边框、填充、间距都为0。（14）将光标定位在表格3的第三列中，插入一个4行1列的表格6，宽度170px，边框、填充、间距都为0。并设置第一行、第三行背景颜色为#00CC00。此时，布局图如图5-12所示。图5-12案例布局图（15）输入表格4中的文字，其中第一行文字：山西主要特色农产品，样式“.style2”，18px加粗。在第2、4、6、8、10行中分别输入文字“谷物类、杂豆类、块茎类、水果类、其它”，样式“.style3”，16px，颜色#00CC00。在第3、5、7、9、11行输入的文字直接应用样式“.style1”。如图5-13所示。（16）合并表格5中第一行的4个单元格，输入文字“热销产品”，应用样式“.style2”。在第2、4、6行的12个单元格中依次输入images文件夹中的图片1.jpg——12.jpg，图片大小均为宽100px，高100px。图5-13步骤15效果图图5-14步骤16效果图（17）在表格6的第1行、第3行，分别输入“最新供求、友情链接”，应用样式“.style2”。在第2行、第4行输入相关内容，应用样式“.style4”。（18）适当调整行高，让整个表格看起来更美观。（19）保存，预览。5.2使用框架布局网页5.2.1框架的概念5.2.2框架集的基本操作5.2.3浮动框架5.2.1框架的概念使用框架可以将浏览器窗口划分为多个区域，每个区域显示不同的网页，而且这些网页之间是相互独立的。也就是说它们都可以独立翻动，拥有各自的滚动条，就好像是把整个窗口分成了多个屏幕。这些独立的小窗口就是框架。经过合理的安排和组织后，网页会从视觉和功能上都更加吸引人。使用了框架的网页可以在有限的窗口中显示更多的内容，而且会把logo、导航条、主要内容分别放在不同的框架页面中。通常logo、导航、菜单所在的框架页面是固定的，而主框架页面是活动的，所以框架页面的超级链接目标与普通页面是不同的，这一点要特别注意。框架包括传统的框架集和浮动框架两种，它支持滚动条，方便导航，节省页面下载时间，但是兼容性不好，保存时不方便，应用范围有限，多用于小型商业网站、论坛、学习教程等。建议，不要使用太多的框架，不仅容易出问题，而且美观程度可能会降低。5.2.2框架集的基本操作框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置等。如图5-15所示是一个上方固定，左侧嵌套的框架集，有三个框架组成：一个框架横放在顶部，另一个较窄的框架位于左侧面，其余部分被一个大的框架占据。通常顶部为logo、banner的显示区，左侧为导航区，页面固定，其余部分来显示不同导航栏目所对应的内容，属于活动页面。图中将浏览器分割成三个不同的窗口区域，可以显示三个独立的HTML页面。框架由两部分组成：框架集frameset与框架frame所谓框架集frameset就是指定义网页框架结构与属性的HTML页面，用以定义整个网页窗口是如何划分的、框架的数目、尺寸及指定框架的页面的来源，以及其他一些可定义的属性的相关信息。框架集页面不会在浏览器中显示；它只是用来存放页面中框架如何显示的信息。图中框架集的HTML代码为:框架frame就是一个普通的HTML页面。上例中框架集网页包含有3个框架文件，分别是frame-1.htm，frame-2.htm，frame-3.htm。假如框架集文件保存为“frame-4.html”，将来浏览本页面，应该双击框架集文件“frame-4.html”。1.创建框架创建框架网页有两种方法：一是通过菜单中的命令来生成框架；二是插入一个预定义的框架。（1）通过菜单中的命令来创建框架的具体步骤如下：执行“文件＞新建”菜单命令，打开“新建文档”对话框，选择“示例中的页＞框架页＞上方固定，左侧嵌套”，单击“创建”按钮，如图5-16。图5-16“新建框架文档”对话框图5-17“框架标签”对话框（2）接着弹出如图5-17所示的对话框，为创建的框架指定标题，一般上面的框架名字默认为“topFrame”，左侧的框架名字默认为“leftFrame”，右侧的框架名字默认为“rightFrame”。可以使用默认名称，也可以重新起名字，但是名字要能望文生义，以免混淆。图5-18对话框（3）点击“确定”之外，框架文件就创建好了。除上述直接在页面上创建框架外，还可以通过“布局”工具栏的预定义框架来创建框架。在Dreamweaver中预设计了一些框架集，包括了最常用的几种框架方式，利用这些预定义框架可以更方便地设计网页布局。使用预定义框架创建框架的具体步骤如下：（1）在插入面板中选择“布局”项目，然后单击其中的框架图标，单击向下箭头，出现下拉菜单，在此给出了13种常用的框架结构，在其中选择一种合适的框架结构。如图5-18。（2）单击相应的框架图标后，会弹出如图5-17所示的对话框，确认框架名称后，点击“确定”。相应的框架图标便会出现在插入面板中，此时的文档编辑窗口出现创建的相应框架结构。2.选取框架与框架集在对框架或框架集进行操作之前，应该了解如何选择它们。图5-18常用框架结构有两种方法：（1）在文档窗口中选择框架或框架集。单击框架内部则选择框架，单击框架交界处则选择框架集。选中框架或框架集的标志是：周围出现虚线。图5-19“框架”面板（2）在框架面板中选择的方法。执行“窗口＞框架”命令打开框架面板，在框架面板中单击框架则选择框架，在框架面板中单击环绕框架集的边框则选择框架集。选中框架或框架集的标志是：周围出现黑线，如图5-19。3.设置框架集属性框架集属性用于控制框架的尺寸和框架集边界的颜色及宽度。选择框架集，可先在文档窗口框架交界处单击，出现框架组属性面板，如图5-20。框架集的各属性如下：

边框：用于控制当前框架集边界显示。有三个选项：选择“是”选项，显示框架边界；选择“否”选项，不显示框架边界；选择“默认”选项，让浏览器决定使用哪种效果显示框架边界。其代码为“Border=”。边框宽度：在文本框中指定当前框架集的边界宽度，其代码为BorderWidth。边框颜色：设置当前框架集中所有框架的边界颜色，其代码为BorderColor。值：在该文本框中指定框架集选定行或列的尺寸。单位：在该下拉列表中指定框架集选定的行或列的尺寸值的单位是一个固定不变的值、还是占框架集的百分比、还是一个相对于浏览器窗口的尺寸值。图5-20框架集属性面板行列选定范围：右面的图用于显示选定的是行或是列，图中显示为深灰色的部分是选定的列（或是行），浅灰色的部分是没有选中的列（或是行）。4.设置框架属性选择框架：按“Alt”键，单击文档窗口某一框架或在框架集属性面板中单击某一框架，所选框架周围出现虚线，此时属性面板变为框架属性，此时可设置所选框架的属性。框架属性用于定义框架名、源文件、滚动条以及单个框架尺寸的调整。如图5-21。图5-21框架属性面板框架名称：在下面的文本框中给框架命名，用于确定目标框架的框架名。框架名应该是一个单词，允许使用下划线“_”；但是不允许使用连字符“-”、句点“.”及空格。源文件（Src）：在文本框中指定框架网页的源文件，可以输入文件名或单击文件夹图标选定一个文件。图5-21框架属性面板边框：用于控制当前框架是否需要显示边界，这里的设置将忽略框架集定义的边界设置，代码为Border。滚动：用于指定当前框架是否需要显示滚动条，代码为Scroll。不能调整大小：选中该复选框可以禁止在浏览器调整当前框架的尺寸，并且禁止拖动框架的边界。边框颜色：设置当前框架所有边界颜色。这一设置将忽略框架集边界颜色的设置，代码为BorderColor。边界宽度：设置框架内的内容与左右边框线之间的距离，以像素为单位，代码为MarginWidth。边界高度：设置框架内的内容与上下边框线之间的距离，以像素为单位，代码为MarginHeight。5.调整框架尺寸在文档窗口中拖动框架的边界，可以近似地设置框架的尺寸；设置框架集属性面板，可以准确定义框架的尺寸，指定浏览器如何精确的分配各框架所占用的空间。设置框架尺寸的操作方法如下：用鼠标单击欲设置的框架尺寸的两框架的共有边框，出现双向箭头，打开框架集属性面板，如图5-17。在框架集属性面板中，单击属性面板右侧图框中的区域，选定框架集中的行或列，就可以在“值”和“单位”下的文本框中设置其尺寸。首先在“单位”文本框中设置单位，“单位”的设置有三项：像素：这个选项将选定的行或列的尺寸设置为一个绝对值，当需要框架始终保持统一尺寸时，这个选项是最佳选择。如果将页面中的框架单位设置为另外的选项，在调整浏览器窗口的尺寸时，将首先保证以像素为单位的框架尺寸。相对：这个选项用于指定当前框架与框架体中其他框架所占用的浏览器窗口空间的比例值。百分比：这个选项用于指定当前框架占用框架集空间百分比值。以Percent为单位指定的框架在分配框架座空间时，仅次于像素为单位指定的框架，却优先于以相对为单位指定的框架。6.设置框架链接的目标在框架中加入链接即可实现在框架中轻松的跳转，通过链接可改变另一个框架的内容。设置框架链接的目标操作方法如下：（1）按住【Alt】键，单击一个框架，将其选取。（2）在框架属性面板中为选定的框架命名。（3）重复前两步的操作，完成对框架集中所有框架的命名。（4）选定框架中的文本对象，然后在属性面板中的“链接”文本框输入链接的文件名，或者单击该框右侧的“浏览文件”按钮，选择要链接的文件。（5）然后在“目标”下拉列表中选择一个目标框架名，默认的有：_blank：浏览器重新打开一个新的空白窗口，显示文档。_parent：在框架集窗口的父级窗口中显示_self：自身框架窗口显示。_top：在框架集中打开文档,其他的消失。还有一些在第（2）步属性面板中为框架命名了的框架名称：mainframe，leftframe，topframe等。7.保存框架网页框架网页编辑完成后，就要保存框架，保存框架步骤如下：（1）单击“文件＞保存全部”或者是“文件＞框架集另存为”命令；此时会弹出一个“另存为”对话框，同时文档窗口中最外APDiv的边框显示为有阴影，表示当前要保存的是框架集文件，如图5-22。（2）选择一个适当的位置，输入文件名，单击保存按钮，此时框架集保存完成。（3）接着系统又会弹出一个“另存为”对话框，同时文档窗口中相应框架的边框显示为有阴影，表示当前要保存的是有阴影框架文件，如图5-23。同上选择一个适当的位置，输入文件名，单击保存按钮。（4）重复第（3）步，逐个保存所有框架，逐个给文件命名即可。直到保存完所有的框架。图5-22保存框架集文件图5-23保存有阴影框架文件案例5-2-2使用框架制作本节案例，如图5-24，核心代码如下：图5-24保存有阴影框架文件制作步骤（1）启动Dreamweaver，“文件面板”默认站点为上次定义的站点。如果没有站点，须按照案例3-1-2的操作步骤新建站点。（2）执行“文件＞新建”菜单命令，打开“新建文档”对话框，选择“示例中的页＞框架页＞上方固定，左侧嵌套”，单击“创建”按钮，如图5-16。（3）弹出如图5-17所示的对话框，点击“确定”。三个框架的名字分别默认为“topFrame”、“leftFrame”、“mainFrame”。（4）将光标定位于“topFrame”框架内，创建一个一行两列的表格，边框为1，边框颜色为“#FFCC00”，并且分别插入“images”文件夹中的“logo2.jpg”、“banner.gif”。如图5-25所示。（5）将光标定位于“leftFrame”中，创建一个5行1列的表格，边框为1，边框颜色为“#FFCC00”，在单元格中分别插入文字“首页”、“核桃”、“红枣”、“老陈醋”、“莜麦”，字体样式“#669933”，48px。如图5-26。图5-25topFrame显示内容图5-26leftFrame显示内容图5-27mainFrame显示内容（6）将光标定位于“mainFrame”中，创建一个1行1列的表格，边框为1，边框颜色为“#FFCC00”，在单元格中输入“案例3-3-4”的内容，如图5-27。（7）保存框架集为“frame.html”，其余框架文件分别为“top.html”、“left.html”、“main.html”。（8）使用框架集和框架属性面板，调整各框架的内容。（9）选中“首页”，在属性面板中设置链接文件为“right.html”，目标为“mainFrame”。（10）选中“核桃”，在属性面板中设置链接文件为“hetao1.html”，目标为“mainFrame”。（11）保存，预览。5.2.3浮动框架框架集是把整个窗口划分成两个或者两个以上的子窗口，如果是n个窗口的话，将来就需要保存成n+1个文件，比较麻烦。浮动框架是在一个网页的局部显示另外一个网页，保存起来也非常方便。浮动框架可以在空白页面中创建，也可以在表格中创建。创建方式有两种：一种是直接在代码视图中添加；另外一种是单击“布局”工具栏中的按钮，会在代码视图中添加一对iframe标记（“<iframe></iframe>”），但还是要在代码中来添加，其语法为：其中各属性的含义如下：name：为浮动框架指定名称。src：浮动框架中初始显示的网页文件的位置。width：浮动框架的宽度。height：浮动框架的高度。frameborder：浮动框架的边框值。浮动框架的修改和删除也是通过修改代码来实现的。一般使用浮动框架都是将导航条或主菜单显示在大的页面上，而将变化的内容都通过浮动框架来显示，这样就可以在同一个窗口看到不同的内容。所以在设置链接时一定要注意：不同的菜单所链接的文件肯定是不一样的，但是“目标”都要选择浮动框架的“name”。比如前面代码中iframe的name为“main”，那么将来“目标”文本框中就应该输入“main”，才能将被链接文件的内容显示在iframe里。案例5-2-3本节的效果图如图5-24所示，核心代码如下：制作步骤（1）启动Dreamweaver，“文件面板”默认站点为上次定义的站点。如果没有站点，须按照案例3-1-2的操作步骤新建站点。（2）在文件面板中，用鼠标选择站点文件夹ncpshop，单击右键，新建一个空白文档,重命名为“ltable.html”。（3）双击打开该文件进行编辑。（4）点击“属性”面板中的“页面属性”按钮，打开如图5-28的对话框，并按图中进行设置背景色为“#FFFFCC”，左边距和上边距都为“0px”。（5）将光标定位在第一行，单击工具栏上“常用”选项卡的按钮，打开“表格”对话框，创建一个1行1列，770px宽，居中，填充、间距都为0的表格1。图5-28“页面属性”设置（6）将光标定位在表格1中，单击工具栏上“常用”选项卡的按钮，打开“表格”对话框，创建一个6行、2列的表格2。（7）选中整个表格2，设置“属性”面板中“对齐方式”为“居中对齐”，“填充”和“间距”值都为0，“边框”为1，并在“代码”视图中<table>标记里添加“bordercolor="#FFCC66"bgcolor="#FFFFFF"”，为其设置表格背景色和边框线的颜色。（8）选中除第一行、第一列之外的所有单元格，选择右键—“表格＞合并单元格”或者单击“属性”面板上左下角的按钮将其合并。（9）光标定位于第一行的第一个单元格，单击“常用”工具栏上按钮，插入图片“logo2.jpg”,宽185高125。（10）光标定位于第一行的第二个单元格，单击“常用”工具栏上按钮，插入图片“banner.gif”,宽585高125。此时表格如图5-29所示。图5-29表格布局效果图（11）将光标定位在第二行第一个单元格，输入“首页”，大小48px，颜色#669933，水平对齐方式为居中。（12）在第一列的剩余单元格中，分别输入文字“核桃”、“红枣”、“老陈醋”、“莜麦”，文字样式同“首页”。（13）将光标定位在第二列第二个单元格中，选择“代码”视图，在光标所在位置输入核心代码，其中“techantu.html”是第三章“案例3-3-3”制作的页面。此时设计视图中看到的效果如图5-30所示。（14）选择“设计”视图，选中“首页”在属性面板中为其添加链接“techantu.html”，目标为“main”。（15）选中“核桃”在属性面板中为其添加链接“hetao1.html”，目标为“main”。（16）保存，预览。图5-30添加了iframe的文件5.3使用APDiv布局网页5.3.1APDiv的概念5.3.2创建AP

Div5.3.3APDiv的基本操作Web标准5.3.4设置APDiv属性5.3.1APDiv的概念APDiv和表格一样，可以用来放置各种网页元素。但是它最大的特点在于可以精确的定位，放置在页面的任意位置，随意布置页面布局，在三维空间里重叠排放网页元素，并根据需要控制元素的显示顺序，让其显示或隐藏。默认情况下：Dreamewaver创建APDiv使用DIV标记。5.3.2创建APDiv1.创建普通的APDiv创建APDiv有以下几种方法：（1）使用插入面板。在插入面板中选择“布局”项目，然后单击其中的“绘制APDiv”按钮，鼠标变为十字型，在文档窗口中拖动鼠标画出一个矩形区域，如图5-31所示。（2）使用菜单命令。把光标置于文档窗口中，执行“插入＞布局对象＞APDiv”命令，就可以插入一个默认APDiv。（3）此外还可以把“插入”面板中的“绘制APDiv”按钮拖到文档窗口中，也可以插入一个默认APDiv。默认大小可以在“首选参数”中设定。要绘制多个APDiv，可单击插入面板中“绘制APDiv”按钮，按住【Ctrl】键，在文档窗口中即可连续绘制。2.创建嵌套APDiv嵌套APDiv是就是指在APDiv中再插入一个APDiv。嵌套APDiv（父）和被嵌入的APDiv（子）可以一起被移动，并且可继续嵌入其它的APDiv。具体操作步骤如下：把光标置于某APDiv内，执行“插入＞布局对象＞APDiv”菜单命令，或者把“插入”面板中的“绘制APDiv”按钮拖到APDiv内，即可创建嵌套APDiv。注意：嵌套APDiv要和APDiv重叠相区分。它们的位置关系看起来可能是一样的，但是嵌套APDiv的本质不是一个APDiv位于另一个APDiv内，而是一APDiv的html代码嵌套在另一APDiv的html代码中。或者，一个被嵌入的APDiv可随它的父APDiv移动而移动，并继承父APDiv的可见性（可以用这种移动的方法来判断两个或多个APDiv是否是嵌套APDiv）。图5-31创建APDiv图5-32在APDiv内插入图像、文字5.3.3APDiv的基本操作1.选择APDiv要选择单个APDiv，在文档窗口可单击它的选择手柄或