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

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