网页设计基础教程与上机指导第版使用表格.ppt
《网页设计基础教程与上机指导第版使用表格.ppt》由会员分享,可在线阅读,更多相关《网页设计基础教程与上机指导第版使用表格.ppt(17页珍藏版)》请在三一文库上搜索。
1、第5章 使用表格,教学提示和教学目标 5.1 插入表格 5.2 设置表格属性 5.3 表格的基本操作 5.4 用表格排列数据,教学提示和教学目标,教学提示:对于网页的排版布局来说,表格是不可缺少的工具,作为一名网页设计人员,表格运用的熟练与否直接影响到网页的美观程度。本章着重介绍表格的基本功能及其操作,从创建表格、编辑表格、修改表格、创建表格特效等各个方面作了详细的阐述,最后通过实例介绍表格在版面布局方面的应用。 教学目标: 掌握表格的插入 掌握表格的属性 掌握表格的基本操作 掌握表格排列数据 创建网页细线表格 创建网页圆角表格 利用表格布局网页,5.1 插 入 表 格,表格在网页中占有重要的
2、地位,它不但能够记载表单式的资料、规范各种数据、输入列表式的文字,而且利用它还可以排列文字和图像。只需通过设置表格的宽度和高度,以及彼此之间的比例大小等,就可以把不同的网页元素分别放置在不同的单元格中。 5.1.1 表格的基本概念 5.1.2 插入表格,5.1.1 表格的基本概念,在开始制作表格之前,我们先对表格的各部分名称(如图5.1所示)做简单介绍。 一张表格横排叫行,纵排叫列,行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫做边距。单元格和单元格之间的距离叫做间距。整张表格的边缘叫做边框。 选中整个表格,就出现表格的【属性】面板,可以在【属性】面板中输入参数。 选中单元格后【属
3、性】面板就发生相应变化,选择行或者列都属于选中单元格。,5.1.2 插入表格,在Dreamweaver 8中插入表格的方法很简单,具体操作步骤如下。 (1) 打开网页文档,将鼠标指针置于页面中要插入表格的位置,选择【插入】|【表格】命令,弹出【表格】对话框。 (2) 在对话框中输入【行数】、【列数】、【表格宽度】、【边框粗细】、【单元格边距】和【单元格间距】等,单击【确定】按钮,即可插入相应的表格,如图5.5所示。 在创建表格时应注意以下几个问题。 整个表格不要都套在一个表格里,尽量拆分成多个表格。 表格的嵌套层次尽量要少,最好嵌套表格不超过3层。 表格的结构尽量整齐。,5.2 设置表格属性,
4、在Dreamweaver 8中为了使创建的表格更加美观、醒目,需要对表格的属性(如表格的颜色、单元格的背景图像、背景颜色等)进行设置。 5.2.1 设置表格属性 5.2.2 设置单元格属性,5.2.1 设置表格属性,可以在表格【属性】面板中对表格的属性进行详细的设置。设置表格属性之前,首先要选中表格,出现如图5.6所示的表格【属性】面板。 在表格【属性】面板中可以进行如下设置。 【对齐】:设置表格的对齐方式,其下拉列表中包含四个选项,分别是【默认】、【左对齐】、【居中对齐】和【右对齐】。 【背景颜色】:设置表格的背景颜色。 【背景图像】:设置表格的背景图像。 【边框颜色】:设置表格的边框颜色。
5、 【填充】:设置单元格内容和单元格边界之间的像素数。 【间距】:设置相邻的单元格之间的像素数。 【边框】:设置表格边框的宽度。,5.2.2 设置单元格属性,将鼠标指针定位于单元格中,该单元格就处于选中状态,此时【属性】面板中显示出所有允许设置的单元格属性选项,如图5.7所示。 在单元格【属性】面板中可以进行如下设置。 【水平】:设置单元格中对象水平方向的对齐方式,其下拉列表框中包含四个选项,分别是【默认】、【左对齐】、【居中对齐】和【右对齐】。 【垂直】:设置单元格中对象垂直方向的对齐方式,其下拉列表框中包含五个选项,分别是【默认】、【顶端】、【居中】、【底部】和【基线】。 【宽与高】:设置单
6、元格的宽与高。 【不换行】:表示单元格的宽度将随文字长度的不断增加而加长。 【标题】:将当前单元格设置为标题行。 【背景】:设置表格的背景图像。 【边框】:设置表格边框的颜色。,5.3 表格的基本操作,在网页中,表格可用于网页的版面设计,如文字放在页面的某个位置,就可以使用表格,将文字放在表格的某个单元格中并设置表格的属性即可。使用表格可以清晰地显示网页元素的列表信息,从而使网页的可读性更好。 5.3.1 选择表格 5.3.2 添加行或列 5.3.3 删除行或列 5.3.4 合并单元格 5.3.5 拆分单元格,5.3.1 选择表格,可以通过以下几种方法选取整个表格。 单击表格上的任意一个边框线
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 基础教程 上机 指导 使用 表格
链接地址:https://www.31doc.com/p-3231902.html