5.1 表格 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

网页设计与制作 第05章 Dreamweaver CS5高级应用 本章内容 表格 超链接 框架 使用Div+CSS布局页面 表单 2 网页设计与制作 5.1 表格 5.1.1 表格基本操作 本节将结合“学院新闻”的实现，为大家介绍表格基本操作过程，如图所示。 3 网页设计与制作 5.1.1 表格基本操作 1．插入表格 在文档窗口中，将光标放在需要创建表格的位置，单击“插入”面板中“常用”分类的“表格”图标，或者选择“插入”｜“表格”命令，弹出“表格”对话框。 2．选择表格 在网页中插入表格后，可以对该表格进行编辑，编辑的对象包括表格、行、列、单元格，而编辑这些对象之前应该先选定对象。 4 网页设计与制作 3．调整表格的大小 （1）调整表格的大小。 选取整个表格后，将鼠标放在表格边框周围的黑色小方块上，鼠标变为双箭头后按住鼠标左键拖动即可改变表格大小。 当调整整个表格的大小时，表格中的所有单元格按比例更改大小。如果表格的单元格指定了明确的宽度或高度，则调整表格大小将更改“文档”窗口中单元格的可视大小，但不更改这些单元格的指定宽度和高度。 （2）调整行高和列宽。 把鼠标放在需要调整列的边框处，鼠标变为 时按住鼠标左键拖动即可改变行或列的大小。当前列宽改变时相邻列的宽度也更改了，因此实际上调整了两列的大小，而表格的总宽度不改变。可视化反馈将显示如何对列进行调整。 4．向表格填加内容 5 网页设计与制作 5 5．插入行或列 （1）插入单行或单列。 单击一个单元格，选择“插入”｜“表格对象”，在子菜单中选择插入行或插入列。 单击一个单元格，选择“修改”｜“表格”｜“插入行”或“修改”｜“表格”｜“插入列”命令。 右击要插入行或列的任一单元格，然后选择“表格”｜“插入行”或“表格”｜“插入列”命令。 单击列标题菜单，然后选择“左侧插入列”或“右侧插入列”。 （2）插入多行或多列。 单击一个单元格，选择“修改”｜“表格”｜“插入行或列”命令，弹出“插入行或列”对话框，在其中选择“行”或“列” ，然后在“插入行或列”对话框内设置需要插入的行或列的数目。最终效果如图所示。 6 网页设计与制作 6. 删除行或列 选择要删除的行或列，在行或列的范围内右击，在弹出的快捷菜单中选择“表格”｜“删除列”或“表格”｜“删除行”命令。 选择完整的一行或列，然后选择“编辑”｜“清除”命令或按Delete键。 7．拆分和合并单元格 （1）拆分单元格。 右击要拆分的单元格，在弹出的快捷菜单中选择“表格”｜“拆分单元格”命令，弹出“拆分单元格”对话框，在其中设置将单元格拆分成多行或多列。 （2）合并单元格。 选中要合并的多个单元格，右击并选择“表格”｜“合并单元格”命令，或者单击属性面板中的“合并”按钮 。 7 网页设计与制作 8．设置表格属性 （1）表格ID：设置表格的名称，该名称通常在编写代码时用到，一般不需要设定。 （2）行和列：表格中行和列的数目，可修改两个文本框的数值来改变表格的行数或列数。 （3）宽和高：是以像素为单位或按占浏览器窗口宽度的百分比计算的表格宽度和高度。通常不需要设置表格的高度。 （4）填充：填充即单元格边距是单元格内容和单元格边框之间的距离。如果将填充值设为5，得到如图5- 15所示的效果，看上去间距变大。 8 网页设计与制作 8 （5）间距：间距即单元格间距是相邻的单元格之间的距离。如果将间距设为5，得到如图所示效果。 （6）对齐：确定表格相对于同一段落中其他元素（如文本或图像）的显示位置。 （7）边框：指定表格边框的宽度，以像素为单位。 （8）清除列宽和 清除行高按钮：从表格中删除所有明确指定的行高或列宽。 （9）将表格宽度在像素和百分比之间转换。 9 网页设计与制作 9．设置单元格属性 把光标移动到某个单元格或选择若干单元格，可以利用单元格“属性”面板对这个单元格的属性进行设置。例如选中日期所在的所有单元格，属性面板如图所示。 水平：用来设置单元格内元素的水平排版方式：居左、居右、居中。将日期信息居右显示。如图所示。 10 网页设计与制作 10．CSS风格设置 步骤1：给“学院新闻”所在单元格设置文字大小、边框颜色等。使用类名选择器，名为news_title。在“.newstitle的CSS规则定义”面板中，“font-family”值为“宋体”，“font-size”值为24像素，“font-weight”为bold，“line-height”值为25像素。“边框”分类对话框中，在“style”属性选择实线（solid），“width”属性除左边框为6像素外，其他均为1像素，“color”为#90ABC6。 步骤2：给所用新闻列表设置字体大小风格，设置类名选择器，类名为“news_list”，将“font-size”为1