第7章 表格使用与简单页面布局.pptx

网页设计与制作（微课版　第3 版）第 7 章表格使用与简单页面布局本书编写组7.1　创建表格7.2　设置表格及单元格的属性7.3　表格与单元格的具体操作7.4　表格的进一步操作7.5　扩展表格模式7.6综合实训案例7.77.87.9学习目标? 学会表格的创建方法；? 能够设置表格、行、列和单元格属性；? 能够设计表格样式。本章内容主要包括表格的创建、3种表格元素（表格、行和列、单元格）属性的设置、嵌套表格的使用。将表格应用于网页排版，不仅能够控制网页在浏览器窗口中的位置，还可以控制网页元素在网页中的显示位置。最后本章将介绍应用表格样式控制方面的知识。7.1 创建表格7.1.1 插入表格1．插入表格的方法常用的插入表格的方法有以下3种。● 在菜单栏中选择“插入”→“表格”命令，如图7-1所示。● 在“插入”面板中选择“常用”下的“表格”，如图7-2所示。● 按【Ctrl+Alt+T】组合键。2．嵌套表格?7.1 创建表格任务1： 插入一个3行3列的表格7.1 创建表格7.1.2 在表格中插入网页元素1．在表格中输入文本2．在表格中插入图像3．导入表格数据（1）导入表格式数据（2）导入Excel文档（3）导入Word文档4．导出Dreamweaver文档中的表格7. 2 设置表格及单元格的属性7.2.1 设置表格的属性选中表格后，在下方的“属性”面板中将显示该表格的基本属性，如果没有显示“属性”面板，可以在菜单栏中选择“窗口”→“属性”命令，打开“属性”面板。7. 2 设置表格及单元格的属性7.2.2 设置单元格的属性表是由一个个单元格组成的，所以对单元格的设置是对整个表格进行设置的重要操作。把光标定位在单元格中，将显示单元格“属性”面板7. 2 设置表格及单元格的属性任务3：制作蒲公英学校课程表7. 2 设置表格及单元格的属性任务3：制作蒲公英学校课程表要求如下。? 表格整体背景颜色为#D2E2EF，表格边框颜色为#B6C9D2。? 所有单元格居中对齐，字号为12像素。? 第一列和第二行字体加粗。? 第二行背景颜色设置为#B6C9D7，填写科目的单元格背景颜色设置为#E9F1F8。? 第一行设置行高为70像素，背景图像文件为bg1.jpg，字体为隶书、36像素、红色。? 在左上角单元格中插入图像，设置图像宽和高为70像素，并设置图像在单元格的对齐方式为居中对齐。? 最后一行设置行高为20像素，背景颜色为#B6C9D7，边框颜色为#0000FF。课程表效果如图7-17所示。7. 2 设置表格及单元格的属性任务4：制作一个简单的后台登录页面7. 2 设置表格及单元格的属性任务4：制作一个简单的后台登录页面要求如下：插入一个4行2列的表格，并设置宽度为400像素，边框为1像素，边距为13像素，居中对齐。设置背景图片，“不重复”，大小为100%。合并第一行的两个单元格，输入文本“后台登录系统”，设置字体为黑体，字号为24像素，字体颜色为RGBA（117，175，161，1）。 ? 第二、三行分别输入文本“用户名”和“密码”，并在右侧插入文本框。? 合并第四行的两个单元格，插入“登录”按钮和“注册”按钮。后台登录页面效果如图所示。7. 2 设置表格及单元格的属性任务4：制作一个简单的后台登录页面7. 2 设置表格及单元格的属性任务4：制作一个简单的后台登录页面7. 3 表格与单元格的具体操作7.3.1 选中表格的操作在计算机中进行操作时，要先选中需要处理的对象，对表格的操作也同样如此。对表格来说，其基本操作主要包括对表格行与列的操作。可以采取以下办法选中表格。● 将光标定位在某一单元格中，然后在菜单栏中选择“修改”→“表格”→“选择表格”命令。● 单击表格任意一条外框线，可以选中整个表格。● 将光标定位在一个单元格中，此时标签栏上显示出表格标签，单击<table>标签即可选中表格。● 将鼠标指针移动到表格的下边框，当鼠标指针尾部出现形状时，单击即可选中整个表格。● 将光标定位在单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“选择表格”命令。7. 3 表格与单元格的具体操作7.3.2 表格行与列的操作1．列的操作? 新建或打开一个网页，在其中插入一个表格，单击表格的边框，出现绿色标注。然后将鼠标指针移动到需要选择的列的下方，单击绿色标注中的三角按钮。在弹出的快捷菜单中选择“选择列”命令。经过以上操作，第一列的3个单元格边框都加粗了，说明该列已经被选中。2．行的操作? 将鼠标指针移到表格的第一行左侧边框上，当鼠标指针变成指向右侧的箭头时单击鼠标，说明该行已经被选中。7. 3 表格与单元格的具体操作7.3.2 表格行与列的操作3．删除行或列?选中需要删除的行或列，然后按D