《电子商务网站建设与管理》-第6章网页表格和框架使用

6.1在Dreamweaver中使用表格6.1.1创建表格1.在网页中插入表格单击“插入”工具栏“常用”类别中的“表格”按钮，或者选择“插入”→“表格”命令，弹出“表格”对话框，设置所需选项后，单击“确定”按钮。2.向表格中添加数据移动插入点：（1）将插入点移动到下一个单元格：按Tab键。（2）将插入点移动到上一个单元格：按Shift+Tab组合键。（3）将插入点向上、下、左、右移动：按箭头键。3.导入外部数据选择“文件”→“导入”→“表格式数据”命令，或者选择“插入”→“表格对象”→“导入表格式数据”命令，弹出“导入表格式数据”对话框，指定要导入的数据文件、定界符及其他选项。下一页返回6.1在Dreamweaver中使用表格6.1.2表格的编辑与修改1.扩展表格模式选择“查看”→“表格模式”→“扩展表格模式”命令。2.选择表格（1）选择单元格。（2）选择行和列。（3）选择整个表格。3.添加、删除行或列（1）添加行。①当插入点位于表格的最后一个单元格中时，按Tab键会自动在表格的最后另外添加一行。下一页上一页返回6.1在Dreamweaver中使用表格②选择“修改”→“表格”→“插入行”命令，此时将在插入点所在行的上面添加一行。③如果要插入多行，可将插入点放置在与要插入的行相邻的行中，然后选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在“插入”选项组中单击“行”单选按钮，然后再指定要插入的行数和位置。（2）添加列。①在表格中添加一列：将插入点放置在要插入列右面一列中，然后选择“修改”→“表格”→“插入列”命令，或者将插入点放置在与要插入列相邻的列中，然后单击列标题菜单的箭头按钮，在弹出菜单中选择“左侧插入列”或“右侧插入列”命令。下一页上一页返回6.1在Dreamweaver中使用表格②同时在表格中插入多列：将插入点放置在与要插入的列相邻的列中，然后选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在“插入”选项组中单击“列”单选按钮，根据需要进行设置。（3）删除行或列。①在要删除的行或列中的任意单元格中单击，然后选择“修改”→“表格”→“删除行”或“删除列”命令。②选择完整的一行或一列，然后按Delete键或选择“编辑”→“清除”命令。下一页上一页返回6.1在Dreamweaver中使用表格4.调整表格大小（1）调整表格宽度：选择表格，拖动选择框右边的控制点。（2）调整表格高度：选择表格，拖动选择框底边的控制点。（3）同时调整表格的高度和宽度：选择表格拖动选择框右下角的控制点。（4）指定表格精确大小：在属性检查器的“宽”和“高”文本框输入数值，在其后的下拉列表框选择值的单位。5.调整行高和列宽（1）使用拖动方式。（2）使用属性检查器。下一页上一页返回6.1在Dreamweaver中使用表格6.设置单元格的宽度和高度选择要设置宽度或高度的单元格后，在单元格的属性检查器中的“宽”或“高”文本框中输入宽度值或高度值，然后按下Tab键或Enter键确认此值。7.合并与拆分单元格（1）合并单元格。选择连续的矩形单元格区域，然后选择“修改”→“表格”→“合并单元格”命令，或者单击属性检查器中的“合并单元格”按钮。（2）拆分单元格。在要拆分的单元格中单击，选择“修改”→“表格”→“拆分单元格”命令，弹出“拆分单元格”对话框，在“把单元格拆分”选项组中指定要将单元格拆分为行还是列，然后在“行数”或“列数”（当选择拆分为列时）数值框中输入所需数值。下一页上一页返回6.1在Dreamweaver中使用表格8.排序表格选择表格或单击任意单元格，然后选择“命令”→“排序表格”命令，弹出“排序表格”对话框，指定一个或两个条件，并设置所需选项后，单击“应用”或“确定”按钮。6.1.3表格的格式设置1.设置表格整体属性使用表格的属性检查器可设置表格的整体属性。2.设置行、列、单元格属性要设置行、列或单元格的属性，必须确保选中的是所需的行、列或单元格。选择了行、列或单元格后，属性检查器中显示相应的属性选项以及其中文本的属性选项可设置行、列或单元格的属性。下一页上一页返回6.1在Dreamweaver中使用表格3.设置表格边框颜色在属性检查器中的“边框颜色（边框）”文本框中输入颜色的RGB值。单击属性检查器中的“边框颜色”拾色器，在弹出的调色板中选择所需的颜色。4.设置表格背景更改表格或表格中行、列或单元格的背景颜色：确保正确选择了相应的目标，然后在相应属性检查器中的“背景颜色（背景）”调色板中选择一种颜色。使用图像作为表格或表格中行、列或单元格的背景：在相应元素的属性检查器中单击“背景图像”文本框右边的文件夹图标，弹出“选择图像源文件”对话框，浏览并选择所需的图像文件。下一页上一页返回6.1在Dreamweaver中使用表格5.套用表格样式选择所需表格后，选择“命令”→“格式化表格”命令，弹出“格式化表格”对话框，在左上角的列表框中选择表格设计方案，再在对话框的下半部进行自定义设置，然后单击“应用”或“确定”按钮。上一页返回6.2表格的布局视图6.2.1绘制布局表格和布局单元格在Dreamweaver8.0插入栏的下拉菜单中的“布局”类型，即可启动“布局”对象工具栏。首先必须单击“布局”切换到布局视图，才能激活“布局表格”和“布局单元格”按钮，如图6-2所示。单击“布局”切换到布局视图，如图6-3所示。在布局视图中，可以在页上绘制布局单元格和布局表格。当不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。单击插入栏“布局”分类中的“绘制布局单元格”按钮，如图6-4所示。将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。若要创建多个单元格而不用每次都单击“绘制布局单元格”按钮，请按住Ctrl键并拖动指针来创建每个布局单元格，如图6-5所示。下一页返回6.2表格的布局视图

绘制一个布局表格：单击插入栏“布局”分类中的“绘制布局表格”按钮，将鼠标指针放置在页上，然后拖动指针以创建布局表格。若要绘制多个布局表格而不必重复单击“绘制布局表格”按钮，请在单击“绘制布局表格”按钮时按住Ctrl键，如图6-6所示。绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。单击插栏“布局”分类中的“绘制布局表格”按钮。鼠标指针变为加号（+），指向现有布局表格的空白（灰色）区域，然后拖动指针以创建嵌套布局表格，如图6-7所示。转换到标准视图下的表格，如图6-8所示。下一页上一页返回6.2表格的布局视图6.2.2向布局单元格中添加内容

在布局模式中可以将文本、图像和其他内容添加到布局单元格中，就像在标准模式中一样。但在布局模式中不能向布局表格的空白（灰色）区域插入内容，因此在添加内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时，该单元格自动扩展。6.2.3调整布局表格和布局单元格1.调整布局单元格的大小具体步骤如下：（1）单击布局单元格的边框或者按住Ctrl键并单击布局单元格里的任何区域，在布局单元格的边框上会出现控制点。下一页上一页返回6.2表格的布局视图（2）拖动控制点就可以改变布局单元格的大小，或通过“属性”面板调整单元格的大小。2.调整布局表格的大小（1）单击状态栏上的表格标签，选中表格。（2）通过“属性”面板调整表格的大小，或拖动控制点调整大小。3.移动布局表格或布局单元格（1）选定布局单元格；（2）拖动布局单元格到页面上所需的地方，或者使用键盘上的方向键，按一下方向键可以移动1个像素的距离，如果同时按住Shift键，一次可以移动10个像素的距离。下一页上一页返回6.2表格的布局视图6.2.4设置布局表格和布局单元格的格式可以通过使用“属性”面板来更改布局单元格或表格的多种属性，包括宽度和高度、背景颜色以及单元格内容的对齐方式。选定布局表格，“属性”面板显示布局表格的参数，如图6-9所示。6.2.5使用间隔图间隔图是透明图，在浏览器里看不见，但它可以用来控制自动伸展表的间隔，使用间隔图能维持页面上设置的布局表格和布局单元格的宽度。在一列插入间隔图或设置一列自动伸展时会出现一个对话框，询问怎样建立间隔图文件。如果已经在Dreamweaver8.0的站点参数中建立了间隔图的话，该对话框就不会出现。下一页上一页返回6.2表格的布局视图在某一列中建立间隔图的步骤如下：（1）选定一列，宽度设为自动伸展，将弹出“选择占位图像”对话框，选择“创建占位图像文件。”单选按钮，单击“确定”按钮，如图6-10所示。（2）弹出如图6-11所示对话框，输入间隔图文件名。（3）单击“保存”按钮，间隔图就创建好了。要删除某一列的间隔图，可以在该列底部单击三角按钮，在弹出的菜单选择“删除间隔图像”命令。下一页上一页返回6.2表格的布局视图6.2.6在布局视图中设置对象属性1.给图像描边作用：增加图片的美观。简明步骤：选中一个图像，边框设置为1，就给图像加了一个像素的边框。选中页面中的一个图像在属性面板“边框”中填1，如图6-13所示。2.设置图文混排作用：如果没有设置图文混排，页面看起来很不美观。要使图像和文字在一起美观，必须设置好图文混排。简明步骤：选中图片，在属性面板中设置对齐方式为左对齐或者右对齐。采用默认设置时的图片和文字，选中图片，在属性面板中选择对齐方式为“左对齐”，如图6-14所示。下一页上一页返回6.2表格的布局视图3.给图片增加提示作用：使浏览者知道所选择图片项目的内容。简明步骤：选中一个图片，在属性面板的替代下拉栏，输入提示文字。选中一个图片。在属性面板的替代下拉栏，输入提示文字，如图6-15所示。4.创建图像地图作用：当点击一个图像的不同部分，可以链接到一个新的网页，也可以在当前窗口打开。简明步骤：选中目标图片→选择属性面板中的热点工具→用热点工具在图片中画出热点区域→在属性面板中输入链接地址，选择目标窗口打开方式。选中目标图片，选择属性面板中的矩形热点工具，如图6-17所示。用热工具在图片中画出热点区域，如图6-18所示。下一页上一页返回6.2表格的布局视图5.设置图像边距作用：设置图像边距，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其他图片产生一个边距。有时候设置边距为一个非0的数值可以起到美观的作用。但是有的时候输入数值为0的边距可以使用页面紧凑。简明步骤：选中一个图片，在属性面板中，给垂直边距和水平边距输入数值。6.给单元格设置颜色作用：可以对其内容进行多种颜色设置。简明步骤：选中单元格，在属性面板中，选择一种背景颜色。下一页上一页返回6.2表格的布局视图7.设置单元格的对齐方式作用：可以使单元格里的内容，从不同的地方开始。在“垂直”下拉栏选择顶端，输入的文字可以从最上面一行开始；选择中间，文字就从中间开始。在“水平”下拉栏选择“左对齐”，文字和单元格左对齐；选择“右对齐”，文字和单元格右对齐。简明步骤：选中一个单元格，在属性面板中的“水平”，“垂直”下拉栏选择一个参数。上一页返回6.3用框架布局页面

网页框架是Dreamweaver对页面局域控制的一个重要手段。网页框架方式与表格方式有些类似，都是通过单元格来安排页面元素的。利用框架设计的网页就是把网页页面划分成相对独立的若干个区域，每个区域都相当于一个独立的页面，这些页面既各自独立又相互依存。在一个浏览器窗口中用框架制作的网页能显示多个不同的HTML文档，就好像在一个浏览器窗口中平铺了几个子窗口，子窗口中分别显示不同的内容，从而使网页的版面更友好、结构更清晰。下一页返回6.3用框架布局页面

框架（Frames）技术是由框架集（Frameset）和框架（Frame）两部分组成。框架集顾名思义就是框架的集合，它定义了各框架的结构、数量、大小尺寸及装入框架中的页面文件名和路径等有关框架的属性，框架集并不在浏览器中显示，只是存储所属框架的有关信息，框架集中的全部框架文件构成一个网页页面。框架则是框架集的组成元素，框架的页面是整个网页页面的一部分，是—个矩形区域，它具有网页所有的属性和功能，与框架集中其他框架页面的关系是平等的。下一页上一页返回6.3用框架布局页面6.3.1创建框架和框架集在Dreamweaver8.0中创建框架集的方法有两种：一种是自己设计框架集；另一种是通过预先定义的框架集设置创建布局所需的框架集和框架。1.手动创建框架集在创建框架集之前，首先需要将框架的边框在设计框图中显示出来，显示框架边框可以通过单击菜单栏中的“查看”→“可视化助理”→“框架边框”命令完成。显示框架边框中，为了更方便地创建框架集，可以单击菜单栏中的“窗口”→“边框”命令展开“框架”面板，用于辅助创建框架集。手动创建框架集的具体操作方法如下。单击菜单栏中的“查看”→“可视化助理”→“框架边框”命令，在设计视图中将显示出框架的边框。下一页上一页返回6.3用框架布局页面（1）将鼠标移至框架的上边框或下边框向下或向上拖拽鼠标，可将页面垂直地分为两个框架；将鼠标移至框架的左边框或右边框处向右或向左拖拽鼠标，可将页面水平地分为两个框架。（2）如果继续拖拽边框可以继续分割出框架。（3）如果要删除其中的框架，只需将框架的边框线向外拖拽至区域外，即可将框架删除。2.插入预定义框架集在Dreamweaver8.0中提供了预先定义好的框架集，用户可以直接调用它们并进行操作。创建预定义的框架集有两种方法。（1）使用插入栏。要创建预定义的框架集并在某一框架中显示现有文档，请执行以下操作：下一页上一页返回6.3用框架布局页面将插入点放置在文档中，执行下列操作之一：①从“插入”→“HTML”→“框架”子菜单中选择预定义的框架集。②在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集。（2）使用“新建文档”对话框。①选择“文件”→“新建”。②在“新建文档”对话框中，选择“框架集”类别。③从“框架集”列表选择框架集。④单击“创建”。则框架集出现在文档中，并且如果已经在“首选参数”中激活了“框架标签辅助功能属性”对话框，那么该对话框也将出现。⑤如果出现“框架标签辅助功能属性”对话框，请为每个框架完成此对话框，然后单击“确定”按钮。下一页上一页返回6.3用框架布局页面3.创建嵌套框架集在另一个框架集之内的框架集称作嵌套的框架集。一个框架集文件可以包含多个嵌套的框架集。大多数使用框架的Web页实际上都使用嵌套的框架，并且在Dreamweaver中大多数预定义的框架集也使用嵌套。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套的框架集。例如，最常见的框架布局在顶行有一个框架（框架中显示公司的徽标），并且在底行有两个框架（一个导航框架和一个内容框架）。此布局要求嵌套的框架集：一个两行的框架集，在第二行中嵌套了一个两列的框架集。

Dreamweaver会根据需要自动嵌套框架集；如果在Dreamweaver中使用框架拆分工具，则就不需要考虑哪些框架将被嵌套、哪些框架不被嵌套这样的细节。

下一页上一页返回6.3用框架布局页面

有两种方法可在HTML中嵌套框架集：内部框架集可以与外部框架集在同一文件中定义，也可以在不同文件中单独定义。Dreamweaver中每个预定义的框架集均在同一文件中定义其所有框架集。6.3.2拆分框架（1）在框架页面中，将插入点放在边框上，出现双向箭头，如图6-36所示。（2）拖动边框，产生一个新的框架文件，如图6-37所示。（3）在属性面板上，为新框架命名，并且单击“浏览文件”，选择一个文件作为框架的“源文件”，如图6-38所示。（4）选择“文件”→“保存全部”。下一页上一页返回6.3用框架布局页面6.3.3设置框架与框架集属性（1）单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对话框。（2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在浏览器中可以调大小”复选框，则用户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。（3）在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。下一页上一页返回6.3用框架布局页面（4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。（5）单击“框架网页”按钮，则弹出“网页属性”对话框。（6）在“网页属性”对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。（7）单击“确定”按钮，关闭“网页属性”对话框，再单击“确定”按钮，关闭“框架属件”对话框，完成框架属性设置。下一页上一页返回6.3用框架布局页面6.3.4框架网页的超链接在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。（1）_blank在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。（2）_parent在显示链接的框架的上个框架集中打开链接的文档，同时替换整个框架集。（3）_self在当前框架中打开链接，同时替换该框架中的内容。（4）_top在当前浏览器窗口中打开链接的文档，同时替换所有框架。上一页返回6.4用“层”布局网页

层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。层的出现使网页从二维平面拓展到三维，可以使页面上元素进行重叠和复杂的布局。改变层在网页中的位置，使可实现层中网页元素位置的改变，实际上层的应用技术也是一种网页元素的定位技术，利用层能够精确地对网页页面元素定位。设计者可以控制多个层的叠放次序、显示或隐藏层。将层与时间线配合着使用，可以很方便地设计出动态页面效果；将层与行为配合着使用还可以方便地制作出滚动字幕、下拉式菜单等页面效果。首先，我们来制作一个层，如图6-40所示。下一页返回6.4用“层”布局网页1.插入层（1）在“窗口”菜单选“层”，或点“插入”菜单→“布局对象”，选“层”。（2）在页面中显示一个层。（3）通过周围的黑色调整柄拖动控制层的大小。（4）拖动层左上角的选择柄可以移动层的位置。（5）单击层标记可以选中一个层。（6）在层中可以插入其他任何元素，包括图片文字链接表格等。一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过“窗口”菜单选“层”打开，如图6-41所示。下一页上一页返回6.4用“层”布局网页2.层和表格之间转换由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。DreamweaverMX2004可以使用层来创建自己的布局，然后将它们转换为表格。在转换为表格之前，要确保层没有重叠。请执行以下操作：选择“修改”→“转换”→“层到表格”。即可显示“转换层为表格”对话框，如图6-43所示。选择所需的选项，单击“确定”按钮。若要将表格转换为层，请选择“修改”→“转换”→“表格到层”。即可显示“转换表格为层”对话框，如图6-44所示。选择所需的选项，单击“确定”按钮。下一页上一页返回6.4用“层”布局网页6.4.1插入普通层和嵌套层在网页中创建—个新层可以通过“对象”面板或使用菜单命令来插入层。在创建好的层中可以继续创建层，来实现层的嵌套。创建层的操作步骤如下：（1）打开“对象”面板，单击“插入层”按钮，此时光标变为“十”字形。（2）在页面上选择插入层的位置，然后拖动鼠标便可创建一个层。此时在网页编辑器窗口中出现一个层和一个层的标记，而在光标所在位置上建立了一个默认属性的层。（3）将光标移到已建好的层中，然后选择“插入”→“层”命令，可在已建好的层中插入一个嵌套层。下一页上一页返回6.4用“层”布局网页6.4.2激活和选中层一个层在被激活后，才能将文本、图像、表格、多媒体等网页元素插入到层中，单击层中任意位置，就可激活层。此时光标在层中闪烁，层的左上角出现选择柄，边框线由灰色变为黑色。选中层后，才能对层设置属性和进行调整、移动等操作。6.4.3调整、移动和对齐层1.调整层大小的方法（1）选中需要调整的层，此时在层的边框四周出现8个黑色活动块，用鼠标拖拽某个活动块，即可调整层的大小。（2）打开属性面板，然后选中需要调整的层，在属性面板的W和H两个文本框中分别输入层的宽度和高度尺寸，可精确调整该层的尺寸。下一页上一页返回6.4用“层”布局网页2.移动层的两种方法（1）用鼠标移动层时，可将光标移到层左上角的选择柄上，或将鼠标移到层的边框线上，当鼠标指针变成十字状4个箭头时，拖动鼠标即可移动该层。（2）选中要移动的层，打开属性面板设置层左上角的坐标，也就是设置该面板中的L和T值，便可精确移动这个层的位置。3.对齐层的方法先选中多个要对齐的层，选择“调整”→“对齐”命令的下一级菜单中的“左边”、“右边”、“顶部”、“底部”命令，可对齐选中的层。选择“保持同一宽度”和“保持同一高度”命令，可使选中的层具有相同的宽度和高度。下一页上一页返回6.4用“层”布局网页6.4.4设