第二项目单元表格设计课件

第二第二项目目单元表格元表格设计项目2 表格设计教学重点：熟练掌握表格、单元格的设计及相关属性设置。教学难点：掌握表格单元格的设计及属性设置，并能灵活应用表格及单元格设计网页布局，的应用教学目标：专业能力：掌握表格单元格设计及其属性设置，并学会应用表格单元格设置网页布局社会能力：独立思考、紧跟课堂教学培养服从意识方法能力：自学分析能力、及其创意意识教学内容：天津滨海职业学院信息工程系孙荣侠任务1 表格属性案例引入：案例引入：天津滨海职业学院信息工程系孙荣侠案例分析：案例分析：1、在dw8中打开页面2、整个页面布局是由5个表格组成 3、设置表格属性4、设置单元格属性5、掌握表格单元格标签应用：主要步骤：主要步骤：天津滨海职业学院信息工程系孙荣侠 上图中的表格由四个独立的表格组合而成，四个表格分别如下图中a、b、c、d所示。其中表a为一行八列，表b为两行一列，表d为一行四列，这三个表格制作过程相对比较简单，在此不再做具体讲解，仅以表c为例讲解具体制作过程。表a表b表c表d图 分解后的各个表格天津滨海职业学院信息工程系孙荣侠 表c的制作过程如下：（1）将光标放置在页面需要创建表格的位置，选择菜单“插入”“表格”。在插入表格对话框中输入行数和列数分别为4和3，即创建了一个四行三列的表格。如图1所示。（2）将第四行选中，单击右键，选择快捷菜单中的“表格”“合并单元格”，即将第四行中的三列合并为一列。如图2所示。图1 （43）的表格图2 合并单元格天津滨海职业学院信息工程系孙荣侠 （3）通过属性面板，分别设置各个单元格的宽度和高度。设置完后如图所示。图 设置单元格的宽度和高度天津滨海职业学院信息工程系孙荣侠 (4)选中表格，将属性面板中的间距和边框都设置为0，即页面中不显示边框。则该表格制作完毕，如图所示。图 设置完后的表格天津滨海职业学院信息工程系孙荣侠创建表格1 插入表格 在网页中插入表格，通常采用下几种方法：（1）将光标放置在页面需要创建表格的位置，选择菜单“插入”“表格”。如图1所示。图1 插入表格相关知识点：相关知识点：天津滨海职业学院信息工程系孙荣侠 （2）将光标放置在页面需要创建表格的位置，然后单击插入工具栏的普通面板上的表格按钮。如图2所示。若普通面板被关闭，则选择菜单“窗口”“插入”，即可出现普通面板。（3）将表格按钮从普通面板拖到页面上所需位置。图2 插入表格天津滨海职业学院信息工程系孙荣侠2 设置表格 完成插入表格的操作，即可出现对话框，提示你设置表格的格式，如图3所示。图3 插入表格对话框 行数：输入要插入表格的行数。列数：输入要插入表格的列数。单元格填充：输入单元格中内容同单元格内部边界之间的距离值。单元格上、下、左、右边距都等同。天津滨海职业学院信息工程系孙荣侠 单元格间距：输入单元格与单元格之间的距离值。宽度：输入宽度值，在右侧的下拉列表中，选择宽度单位，可以选择像素，以绝对的像素值来设置表格的宽度，则表格的大小不随浏览器窗口大小改变而改变；选择百分比，设置表格宽度同浏览器宽度的百分比，则表格的宽度将随浏览器窗口宽度而改变。边框：输入边框的宽度。如果不需要显示边框，则输入0。如上图设置完毕，单击确定按钮便可创建一个（34）的表格，如图4所示。并且此时插入表格对话框中的值将保留作为下一次插入表格时的默认值。图4 （34）的表格天津滨海职业学院信息工程系孙荣侠编辑表格1 添加和删除行和列1.添加行或列 在需要添加行的位置单击，选择菜单“修改”“表格”“插入行”命令。或者单击右键，从快捷菜单中选择“表格”“插入行”，则可以在光标当前所在行上面插入一行。在需要添加列的位置单击，选择菜单“修改”“表格”“插入列”。或者单击右键，从快捷菜单中选择“表格”“插入列”，便可以在光标当前所在位置“年龄”左面插入一列。【例1】在下图5-5所示的表格中第二行上插入一行，第二列后插入一列，具体步骤如下：图5 （43）的表格天津滨海职业学院信息工程系孙荣侠 单击第二行第三列，即内容为“19”的单元格，将光标放置到此处。选择菜单“修改”“表格”“插入行”命令，即在第二行上插入一行，如下左图6所示。选择菜单“修改”“表格”“插入列”命令，即在第三列前上插入一列，如下右图7所示。图5-6 插入行图5-7 插入列天津滨海职业学院信息工程系孙荣侠 可选择使用快捷菜单来实现该操作。单击插入单元行的下一行，在弹出的快捷菜单中选择“表格”“插入行”，即可在该行上插入一行；选择“表格”“插入列”，即可在该列左侧插入一列。行和列也可以同时添加。选择菜单“修改”“表格”“插入行或列”。或者单击右键，从快捷菜单中选择“表格”“插入行或列”，在出现的对话框中，输入要添加的行数和列数。如图8所示。图8 插入行或列 插入：可选择要插入行还是列。行数：若选择插入行，则输入或选择需要插入的行数；若选择插入列，则输入或选择需要插入的列数。天津滨海职业学院信息工程系孙荣侠位置：选择要插入的位置。选择插入行，则选择在当前行之上或在当前行之下插入，然后【确定】就可插入一行或多行；选择插入列，则选择在当前列之前或在当前列之后插入，然后【确定】就可插入一列或多列。注意，一次插入多行和多列，插入的位置可以自由选择。如果在表格最后一行后再添加一行那么只能用“插入行或列”这种方法。也可以在属性面板中直接增加表格的行数和列数。选中整个表格，在属性面板中增加行或列的值就可以添加行或列了，不过添加的位置是固定的，行只能添加在表格底端，列只能添加在表格右端。属性面板如图9所示。图9 添加行或列天津滨海职业学院信息工程系孙荣侠 【例2】在上图所示的表格中第四行下插入三行，第三列后插入两列，具体步骤如下：（1）将光标放置到该表格第四行、第三列的单元格中。在插入行或列对话框中先选择插入行，输入插入行数“3”，位置在所选行之下。设置完毕，单击确定，即可完成插入行的操作。（2）在插入行或列对话框中先选择插入列，输入插入列数“2”，位置在当前列之后。设置完毕，单击【确定】，即可完成插入列的操作。（3）也可在如图5-9的属性面板中输入行：7，列：5，也可实现该操作。完成该操作后的表格如图10所示。图10 添加行或列天津滨海职业学院信息工程系孙荣侠设置文档的页面属性文档的页面属性可以对页面的背景、文档的标题和页面的边界等进行设置。（1）页面上单击右键或者选择“修改”菜单中“页面属性”选项都可以打开“页面属性”对话框，如图所示。（2）“页面属性”对话框中的“标题”就是对网页的标题进行设置；“背景图像”设置网页背景图像，单击右侧的“浏览”按钮可以选择背景图像文件的地址，如图所示；“背景”设置背景颜色，如果已设置背景图片则不用设置。“文本”、“链接”、“访问过的链接”和“活动链接”均是设置相应项目的颜色。天津滨海职业学院信息工程系孙荣侠左边界：设置网页内容显示时距离左边界的起始位置边界宽度：设置网页内容显示的边界宽度顶部边界：设置网页内容显示时距离顶部边界的起始位置边界高度：设置网页内容显示的边界高度文档编码：设置网页文档的编码方式，默认值是简体中文，根据地区不同，可以选择其他文档编码方式重新载入：如果设置不理想，可以通过“重新载入”按钮，恢复到这之前设置保存过的状态。跟踪图象：通过“跟踪图象”旁边的“浏览”按钮，可以选择一个已经设计好的点阵图形图象透明度：拖动“图象透明度”旁的滑块，可以设置“跟踪图象”的透明度，数值越小越透明。天津滨海职业学院信息工程系孙荣侠任务2 单元格属性案例引入：案例引入：天津滨海职业学院信息工程系孙荣侠案例分析：案例分析：该网页布局是通过表格及表格平铺实现的，单元格属性的设置，在表格中插入表格可以设置单元格中内容的布局，插入水平线，电子邮件地址的链接主要步骤：1 插入一个1行10列的表格，居中对齐，设置单元格背景颜色2 插入一个1行4列的表格，居中对齐，宽度同上，设置单元格背景颜色3 插入一个表格（1行1列），输入文本，设置文本属性4 插入1行3列表格，宽度同上，第一列插入一个图像，第二列插入一个3行1列的表格，输入文本，设置文本颜色与对齐方式天津滨海职业学院信息工程系孙荣侠5 在第三个单元格中插入一个10行1列表格，输入文本，插入水平线6 插入一个1行1列表格，输入文本，设置文本属性，并设置电子邮件地址链接相关知识点：相关知识点：天津滨海职业学院信息工程系孙荣侠格式化表格1 设置表格格式 对表格的格式化操作，可以通过属性面板完成。选中整张表格，属性面板如图（A、B）所示。Dreamweaver 中的属性面板可以收放，点击右下角的按钮或可以收放面板。图 A 选中整张表格时的属性面板A（折叠时）图 B 选中整张表格时的属性面板B（展开时）天津滨海职业学院信息工程系孙荣侠2 设置表格名称 在属性面板左方的第一个文本框，即表格 Id（表格名称）文本框中，可以输入表格的名称。例如果该表格为一个课程表，则Id中输入“课程表”。3 设置表格整体格式 行、列：设置表格的行数和列数。宽、高：设置表格的宽度值和高度值。右侧的下拉列表框中，可以选择数值的单位。采用像素设置表格的宽度值和高度值，则表格的大小不随浏览器窗口的变化而变化。选择“%”（表示表格宽度或高度同浏览器窗口的宽度或高度成百分比），则表格大小随浏览器窗口变化而变化。通过选中表格，拖动表格边框上出现的控点，也可以改变表格的宽度和高度。且按住Shift键，拖动表格边框上的控点则可以保持表格的长宽比。对齐：设置表格在浏览器窗口水平方向上的对齐方式。天津滨海职业学院信息工程系孙荣侠4 设置表格中单元格格式 填充：设置单元格中内容同单元格内部边界之间的距离，单位为像素。间距：设置单元格与单元格之间的距离，单位为像素。如果这两项都未设置，则浏览器将单元格内部边距设置为1，而将单元格间距设置为2。图 显示表格虚拟边框5 设置表格的边框格式 边框：设置表格的边框宽度，单位为像素。如果将边框宽度设置为0，则不显示边框。为了操作方便，默认状态下，在编辑窗口中表格边框用虚线显示，如图所示。也可以自行设置是否显示表格虚拟边框，选择菜单“查看”“可视化助理”“表格边框”。边框颜色：设置整个边框的颜色。天津滨海职业学院信息工程系孙荣侠6 设置表格的背景 背景图像：设置表格的背景图像。输入背景图像的URL地址，或者点击后面的文件夹图标，打开选择图像源对话框，如图，选择背景图像。图 选择图像源天津滨海职业学院信息工程系孙荣侠 背景颜色：在该颜色井中，可以设置表格的背景颜色，如图所示。图 颜色井天津滨海职业学院信息工程系孙荣侠 7 清除表格的行高和列宽 在属性面板右下角有如下图所示的按钮，利用“清除行高”和“清除列宽”按钮，可以清除表格中的行高和列宽数值，从而使表格恢复为最原始的状态。图 清除行高和列宽按钮天津滨海职业学院信息工程系孙荣侠 单击“清除行高”按钮，可以清除表格中所有的行高值，包括为表格设置的行高值，为单元格设置的行高值等。单击“清除列宽”按钮，可以清除表格中所有的列宽值，包括为表格设置的列宽值，为单元格设置的列宽值等。图 清除行高和列宽如果表格中有内容，则表格的宽度和高度将调整为正好能够容纳其中的内容的大小。下图显示了清除行高和清除列宽的情形。还有一种方法完成清除表格的行高和列宽，选中表格，选择菜单“修改”“表格”“清除单元格高度”或者“清楚单元格宽度”命令即可。天津滨海职业学院信息工程系孙荣侠8 转换表格的宽度和高度 表格的宽度和高度都有两种设置方式，一种是设置绝对的像素值，这时表格的宽度或高度不随浏览器窗口的变化而变化；另一种是设置百分比数值，这时表格的宽度或高度与浏览器窗口大小成百分比，将随浏览器窗口大小变化而变化。这两种方法各有优缺点，使用表格的绝对宽度或高度，能够准确地保持单元格中数据的格式和位置，但是如果浏览器的窗口过小，则需要拖动浏览器的滚动条浏览表格，这不便于对表格的整体观察；而使用表格的相对宽度和高度，则能够保持在浏览器窗口中看到整个表格，但是随着浏览器窗口的变化，可能表格中内容的格式和位置也会发生变化，这在很多时候不利于对数据的查看。天津滨海职业学院信息工程系孙荣侠【例3】设置一个如图1所示的课程表。则属性面板设置如图2所示。图1 （56）的表格图2 属性面板的设置天津滨海职业学院信息工程系孙荣侠9 设置行、列和单元格的格式 对表格行、列和单元格的格式，也通过首先选中相应的表格元素，然后在属性面板上设置数据来完成。图 设置表格行、列和单元格格式时的属性面板选中表格中所需要设置的行、列或单元格后，属性面板如下图所示。属性面板的上半部分，会根据表格单元格中包含对象的不同而不同，而下半部分却是对表格行、列和单元格的设置区天津滨海职业学院信息工程系孙荣侠设置行、列或单元格中内容的对齐方式：水平：设置单元格内容在水平方向上相对单元格的对齐方式。可以从下拉列表中选择默认（通常是普通单元格左对齐，标题单元格居中对齐）、左对齐、居中对齐、右对齐。垂直：设置单元格内容在垂直方向上相对单元格的对齐方式。可以从下拉列表中选择默认（通常为中间对齐）、顶端、中间、底部、基线。设置行、列或单元格的宽度和高度：宽：在该文本框中，输入单元格的宽度值，可以是具体数字，表示为像素值；也可以输入百分数，如50%，表示单元格宽度为表格宽度的50%。高：在该文本框中，输入单元格的高度值，可以是具体数字，表示为像素值；也可以输入百分数，如30%，表示单元格高度为整个表格高度的30%。天津滨海职业学院信息工程系孙荣侠 另外还可以通过鼠标拖动边框来改变表格的行高和列宽。要改变行高，将鼠标移动到该行下方的边框上，当鼠标变为双箭头形状时拖动鼠标，将边框拖到需要的位置，释放鼠标，表格行高即被改变。要改变列宽，将鼠标移动到该列右方的边框上，当鼠标变为双箭头形状时拖动鼠标，将边框拖到需要的位置，释放鼠标，表格列宽即被改变。设置行、列或单元格的边框格式：边框：设置被选中的行、列或单元格的边框颜色。设置行、列或单元格的背景：背景：在该本框中输入单元格的背景图像文件的URL地址。或者打开后面的文件夹，选择背景图像。背景颜色：在颜色井中选择单元格的背景颜色。天津滨海职业学院信息工程系孙荣侠控制单元格中内容的换行方式：不换行：如果选中该复选框，在单元格中输入文本时，如果文本长度超过了单元格的宽度，则文本会自动换行，并且单元格的宽度保持不变。清除该复选框，在单元格中输入文本时，如果文本长度超过了单元格的宽度，则文本不自动换行，单元格的宽度将随之变宽。下图显示了单元格中输入文字过长时，不自动换行和自动换行的两种效果。不自动换行自动换行图 文字的不自动换行和自动换行天津滨海职业学院信息工程系孙荣侠10 设置标题单元格 标题：选中该复选框，则将所有选中的单元格设置为标题单元格；取消该复选框，则将所有选中的单元格设置为数据单元格。通常将表格的第一行和第一列中的单元格设置为标题单元格。如图所示，一般对于标题单元格，其内容都被加粗居中显示。选中第一行和第一列设置标题单元格图 设置标题单元格天津滨海职业学院信息工程系孙荣侠11 套用现有单元格的格式 除了上述介绍的手动设置表格和表格中各元素的格式外，Dreamweaver也提供了十几种表格设计风格，使用这些预置设计风格格式化表格，可以大大提高表格的设计效率。具体步骤如下：图 格式化表格对话框 （1）选中需要格式化的表格，然后选择菜单“命令”“格式化表格”。（2）在弹出的格式化表格对话框中，左上角的列表中显示各种设计方案，选择一种，右边就显示设计示例。如右图所示。天津滨海职业学院信息工程系孙荣侠行颜色：第一种：设定第一种颜色。第二种：设定第二种颜色。交错：设置表格行与行的颜色是否变化。：每行的背景颜色不改变每一行：每隔一行颜色发生变化每两行：每隔两行颜色发生变化每三行：每隔三行颜色发生变化每四行：每隔四行颜色发生变化第一行：设置第一行的参数。对齐方式：无、左对齐、居中、右对齐。文字样式：常规、粗体、斜体、加粗斜体。背景色：输入十六进制颜色代码。文本颜色：输入十六进制颜色代码。最左列：对齐方式和文字样式与第一行的设置一样。天津滨海职业学院信息工程系孙荣侠表格：边框：修改边框宽度，在边框域中输入一个值，如果不需要显示表格边框，则输入0即可。将所有属性套用至TD标注而不是TR标签选项：要将设计应用于表格单元（TD）标记而不是表格行（TR）标记，虽然应用于表格单元的格式优先于应用于表格行的格式，但是应用于表格行的格式将产生更清晰、更简洁的HTML源代码。单击【应用】或【确定】按钮即可对表格应用选定的设置。如下图所示。（选项设置见上图所示）。图 套用格式天津滨海职业学院信息工程系孙荣侠任务3 表格单元格属性 案例引入：案例引入：天津滨海职业学院信息工程系孙荣侠用表格设计网页布局，表格、单元格的属性设置，表格中嵌套表格的操作、图像的属性设置主要步骤：主要步骤：1 插入2行1列表格，输入文本，插入图像2 插入3行2列的表格，合并第一列，在第一列中插入一个8行2列的表格，插入图像，输入文本，设置相应属性3 在第二列的各行插入表格，分别输入文本、插入图像，设置图像与文本的对齐方式4 插入表格，设置对齐方式，输入文本及电子邮件链接相关知识点：相关知识点：案例分析：案例分析：天津滨海职业学院信息工程系孙荣侠插入水平线插入水平线 在文档中的当前位置插入水平线也可以使用菜单和插入面板两种方法插入。这里只介绍其中一种，使用“插入”菜单的方法，用户可以通过如下步骤操作：（1）打开“插入”菜单，选择“水平线”，如右图所示。（2）插入后如下图所示。天津滨海职业学院信息工程系孙荣侠创建创建Email链接链接 在网页上创建电子邮件链接，方便用户意见反馈。当浏览者单击电子邮件链接时，可打开浏览器默认的电子邮件处理程序，收件人邮件地址被电子邮件链接中指定的地址自动更新，无须浏览者手工输入。使用插入邮件链接命令创建电子邮件链接的操作步骤如下：1.使用菜单选项（1）选择主菜单中的“插入”选项中的“电子邮件链接”如图所示 天津滨海职业学院信息工程系孙荣侠（2）出现电子邮件对话框如图所示（3）单击“确定”安钮即可完成。设置后的页面显示如图天津滨海职业学院信息工程系孙荣侠2.用“插入面板”中的“常用”中的“电子邮件链接”（1）选择“插入面板”中的“常用”中的“电子邮件链接”如图所示（2）单击“电子邮件链接”按钮。以后的操作与上一种方法相同这里不在重复。3.使用“属性检查器”为对象加电子邮件链接。（1）选中所要链接的文本或图像如图所示。天津滨海职业学院信息工程系孙荣侠（2）在“链接”栏中输入邮箱地址mailto:如图所示（3）即对所选文本或图像建立完链接。天津滨海职业学院信息工程系孙荣侠小结：本项目主要介绍了表格单元格的设计及其相关属小结：本项目主要介绍了表格单元格的设计及其相关属性设置，让学生学会灵活应用表格单元格设计网页布局性设置，让学生学会灵活应用表格单元格设计网页布局实验：完成实验实验：完成实验2、3天津滨海职业学院信息工程系孙荣侠谢谢