网页设计-第9章-Dreamweaver的表格和网页版面设计

第9章Dreamweaver的表格和网页版面设计网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第1页。本章知识技能要点：表格在网页中的作用表格的创建与编辑利用表格对页面进行布局利用布局试图对页面进行布局Dreamweaver中框架的创建方法超链接框架目标的指定框架和框架页的基本操作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第2页。9.1网页中的表格表格是现代网页制作的一个重要组成部分。表格之所以重要是因为它不仅仅可以有传统意义上的用法，更重要的是时可以用于实现网页的精确排版和定位。在开始制作表格之前，首先对表格的各部分的名称做一个说明。如图示，一张表格横向叫行，纵向叫列。行列交叉部分叫做单元格。单元格中的内容和边框之间的距离叫填充。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第3页。9.1.1在网页中插入表格单击“插入”工具栏“常用”类别中的“表格”按钮。或者选择“插入”菜单下的“表格”命令，弹出“表格对话框”。在表格对话框中，“表格大小”栏：设置表格的外观，如行数、列数、单元格边距（填充）、单元格间距等等。“页眉”栏：设置表格的表头位置。“辅助功能”栏：设置表格标题等。设置完成之后，点击“确定”。9.1网页中的表格9.1.2向表格中添加数据向表格中添加数据时移动插入点的方法有：

>将插入点移动到下一个单元格：按Tab键。

>将插入点移动到上一个单元格：按Shift+Tab组合键。

>将插入点向上、下、左、右移动：按箭头键。网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第4页。9.1.3导入外部数据选择“文件”菜单→“导入”→“表格式数据”命令，或者选择“插入”菜单→“表格对象”→“导入表格式数据”命令，弹出“导入表格式数据”对话框，指定要导入的数据文件、定界符及其他选项。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第5页。9.1.4表格的编辑与修改：9.1.4.1选择单元格选择某一个单元格：单击单元格，然后单击文档窗口左下角标签选择器中的<td>标签；或者按住Ctrl键单击该单元格；或者单击单元格，然后选择“编辑”→“全选”命令。选择一个矩形单元格块：从一个单元格拖动到另一个单元格，或者单击一个单元格，然后按住Shift键单击另一个单元格。选择不相邻的多个单元格：按住Ctrl键，然后单击要选择的每一个单元格。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第6页。9.1.4.2选择行和列将指针指向行的左边缘，当指针变成选择箭头时单击可以选择此行，上下拖动则可选择多行。将指针指向列的上边缘，当指针变成选择箭头时单击可以选择此列，左右拖动则可以选择多列。此外，要选择一列，也可以在该列中单击，然后单击列标题菜单箭头，选择弹出菜单中的“选择列”命令。9.1.4.3选择整个表格单击任意单元格，然后在文档窗口左下角的标签选择器中单击<table>标签。单击表格的左上角、表格的顶边缘或底边缘的任意位置或者行或列的边框。单击任意单元格，然后选择“修改”→“表格”→“选择表格”命令。单击任意单元格，单击表格标题菜单，然后选择“选择表格”命令。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第7页。9.1.4.4添加、删除行或列1.添加行当插入点位于表格的最后一个单元格中时，按Tab键会自动在表格的最后另外添加一行。选择“修改”菜单→“表格”→“插入行”命令，此时将在插入点所在行的上面添加一行。如果要插入多行，可将插入点放置在与要插入的行相邻的行中，然后选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，如图9-6。在“插入”选项组中单击“行”单选按钮，然后再指定要插入的行数和位置。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第8页。2.添加列在表格中添加一列：将插入点放置在要插入列右面一列中，然后选择“修改”菜单→“表格”→“插入列”命令，或者将插入点放置在与要插入列相邻的列中，然后单击列标题菜单的箭头按钮，在弹出菜单中选择“左侧插入列”或“右侧插入列”命令。同时在表格中插入多列：将插入点放置在与要插入的列相邻的列中，然后选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在“插入”选项组中单击“列”单选按钮，然后根据需要进行设置。3.删除行或列在要删除的行或列中的任意单元格中单击，然后选择“修改”菜单→“表格”→“删除行”或“删除列”命令。选择完整的一行或一列，然后按Delete键或选择“编辑”→“清除”命令。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第9页。9.1.4.5调整表格大小和外观调整表格宽度或高度：选择表格，拖动选择框右边或底边的控制点。同时调整表格的高度和宽度：选择表格拖动选择框右下角的控制点。若要精确指定表格大小：选定表格，在属性检查器的“宽”和“高”文本框输入数值，在其后的下拉列表框选择值的单位。在表格的属性检查器中可以设置表格的背景颜色、背景图像、边框颜色等等属性。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第10页。9.1.4.6调整行高和列宽和外观使用拖动方式：改变一行的高度或一列的宽度：沿该行的下边框或该列的右边框移动指针，当指针变成一个行边框选择器后，向下（上）或向左（右）拖动。使用属性检查器：选择所需的行或列后，在行属性检查器中的“高”或“宽”文本框中输入行高值或列宽值，然后按下Tab键或Enter键应用该值。在表格的属性检查器中可以设置行或列的背景颜色、背景图像、边框颜色等等属性。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第11页。9.1.4.7设置单元格的宽度和高度和外观选择要设置宽度或高度的单元格后，在单元格的属性检查器中的“宽”或“高”文本框中输入宽度值或高度值，然后按下Tab键或Enter键确认此值。在表格的属性检查器中可以设置单元格的背景颜色、背景图像、边框颜色等等属性。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第12页。9.1.4.8合并与拆分单元格1.合并单元格选择连续的矩形单元格区域，然后后选择“修改”菜单→“表格”→“合并单元格”命令，或者单击属性检查器中的“合并单元格”按钮，可将所选择的多个单元格合并为一个单元格。2.拆分单元格在要拆分的单元格中单击，选择“修改”菜单→“表格”→“拆分单元格”命令，弹出“拆分单元格”对话框，如图9-11。在“把单元格拆分”选项组中指定要将单元格拆分为行还是列，然后在“行数”（当选择拆分为行时）或“列数”（当选择拆分为列时）数值框中输入所需数值。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第13页。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第14页。9.1.4.9排序表格选择表格或单击任意单元格，然后选择“命令”→“排序表格”命令，弹出“排序表格”对话框，如图。指定一个或两个条件，并设置所需选项后，单击“应用”或“确定”按钮。9.1网页中的表格网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第15页。9.2.1布局模式单击“插入”栏“布局”类中的“布局模式”按钮，进入布局模式。如图。在布局模式里，“插入”栏的“布局”中有两个可用的按钮,它们是“布局表格”按钮和“绘制布局单元格”按钮。此时，标准模式下的“表格”按钮和“绘制层”按钮均呈不可用状态。（在标准模式下，“布局表格”按钮和“绘制布局单元格”按钮是不可用的）。9.2用表格布局网页网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第16页。9.2用表格布局网页网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第17页。9.2.2绘制布局单元格在布局模式中单击“插入”工具栏“布局”类别中的“绘制布局单元格”按钮，然后将十字形指针移至工作区的空白处或布局表格内，按住鼠标左键拖动，即可绘制出一个布局单元格。按住Ctrl键可不必重复单击“绘制布局单元格”按钮而连续绘制出多个布局单元格。9.2.3绘制布局表格在布局模式下单击“插入”工具栏“布局”类别中的“布局表格”按钮，然后将十字形指针移至工作区，按住鼠标左键拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出多个布局表格。9.2用表格布局网页网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第18页。9.2.4更改布局表格和布局单元格的属性设置布局表格的属性——使用布局表格的属性检查器。如图:9.2用表格布局网页设置布局单元格的属性——使用布局单元格的属性检查器。如图:网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第19页。框架就是把一个浏览器窗口划分为若干个独立的子窗口，每一个窗口可分别载入不同的网页文件。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。在本教材的第三章中已经介绍了用HTML编写使用框架技术的网页，在这里介绍利用Dreamweaver8实现框架页面。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第20页。9.3.1新建框架集选择“文件”→“新建”，在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择合适的框架集，如图。点击“创建”，弹出“框架标签辅助功能属性”对话框。9.3框架网页的制作或者单击“插入”工具栏“布局”类别中的“框架”按钮，在弹出的下拉菜单中选择所需的框架类型，即可在页面上插入相应的框架。网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第21页。9.3.2创建嵌套框架先在页面中创建一个框架，将插入点置于要创建嵌套的框架区域，再次执行创建框架的操作。9.3.3为各个框架区命名选择“窗口”菜单→“框架”，弹出“框架”面板如图。从框架面板可知，系统对三个框架生成命名。左框架名为：leftFrame，上框架名为：topFrame，右框架名为：mainFrame。当然可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。9.3.4编辑框架页面对框架页面的编辑与对普通页面的编辑相同，包括输入文本、插入图像、添加表格和表单的方法都是相同的。此外，还有一种比较简便的编辑框架的方法，即先创建好整个框架集中各部分框架页面，然后将其直接拖动至框架集中对应的部分。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第22页。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第23页。9.3.5保存框架选择“文件”菜单点击“保存全部”。系统弹出“另存为”对话框。这时，文档的三个区域被周围一圈阴影线框围住。说明保存的是一个框架结构文件。按照惯例可以命名为index.htm。点击“确定”之后，又弹出了新一个“另存为”对话框，此时文档窗口左下方的区域被阴影线框围住。说明保存的是左下方区域的网页文档。点击“确定”之后，又弹出了新一个“另存为”对话框，此时文档窗口上方的区域被阴影线框围住。说明保存的是上方区域的网页文档。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第24页。9.3.6设置框架及框架集的属性设置框架集的属性：单击框架面板中框架的边框，选择框架集，然后在属性检查器中设置此框架集的属性。若要在网页中显示框架边框，一定要选择属性面板中的“边框”列表的值为“是”。然后方可设置边框的颜色和边框的粗细。如图。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第25页。设置框架的属性：单击框架面板中单击某一框架区域，即可在页面中选择此框架，然后可在属性检查器中设置其属性。这里可以：在“框架名称”处为框架更名；在“源文件“处为所选框架区域指定显示的网页文档：在“滚动”处设置浏览时是否显示滚动条：如果“不能调整大小”被勾选，浏览时各个区域的大小将不可调整“边界宽度”和“边界高度”指框架中的内容与其边框的空白间隙的大小。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第26页。9.3.7超链接框架目标的指定如果希望网页上的超级链接在指定的框架区域内显示，就要为这个超级链接指定目标框架。事项的方法是：选中这个超级链接对象（例如图示的文字“学习心得”），在属性面板上的“链接”栏里，指定所要链接的文档，在“目标”栏展开的下拉列表里，选择链接的文档在哪个框架区域里打开。如图所示。“目标”栏展开的下拉列表里后面的三项就是当前框架集文档所包含的三个框架区域的名称。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第27页。9.3框架网页的制作网页设计-第9章-Dreamweaver的表格和网页版面设计全文共35页，当前为第28页。9.4练习题1