第4章网页布局41表格.ppt

引言 所谓“网页布局”，就是给将要出现在网页中的所有元素进行定位。 网页的具体布局还与网页内容、网页风格、网页大小等因素有关。 本章学习目标 通过学习表格、框架和层等方面的知识，掌握网页的排版和布局。 表格通常用于以行列形式来组织文字、图像、数字等数据，方便用户浏览。 为了简化使用表格进行页面布局的过程， Dreamweaver还提供了“布局”模式。在“布局”模式中，可以使用布局表格和布局单元格来设计网页。 框架和层也是网页布局的工具。 本章内容 4.1 表格应用和操作 4.1.1 表格的三种视图模式 4.1.2 表格的基本操作 4.1.3 实践与练习：表格制作与使用 4.1.4 布局表格 4.1.1 表格的三种视图模式 标准模式：此模式下的表格又称HTML表格，显示的表格内容是最接近浏览器中预览的模式。这种方式在网页设计时被广泛使用，成为一种网页设计排版的基本工具。 扩展模式：在此视图下，加粗显示表格的边框线，间距也变得比较宽，非常有利于文本光标的定位操作，便于选择表格中比较细小的单元格和内容，方便编辑。 布局模式：是为了方便用户绘制网页布局而设计的。标准模式是通过插入行、列的方式插入表格。此模式下可方便创建网页布局。 4.1.2 表格的基本操作 1.HTML表格的作用 HTML表格通常有两种用途： 用于网页布局，通过调整表格的高度、宽度、比例等属性来定位页面元素。 注意：表格用于布局的时候，通常会将边框线设为0像素，这时在浏览器中浏览网页时将不会显示表格的边框。 具备传统表格存放和规划数据的功能，显示按行、列排版的数据。 4.1.2 表格的基本操作 2. 插入表格 选择【插入?表格】菜单或　“常用?表格”按钮 表格宽度：用来设置表格的宽度，右侧的下拉列表框用来设置宽度的单位，有两个选项:百分比和像素。若选择百分比，则表格的宽度会随浏览器窗口的大小而改变。 边框粗细：设置表格的边框的宽度，默认为1，设置为0时不显示表格线 单元格边距：又称为“填充”，用来设置单元格内对象距单元格边缘的距离。 单元格间距：设置相邻单元格之间的距离。 页眉：用来设置行标题、列标题样式(居中加粗显示) 标题：提供一个显示在表格外的表格标题，设置后自动生成 摘要：描述表格的说明，不显示在浏览器中 4.1.2 表格的基本操作 4.1.2 表格的基本操作 注意： 当对表格进行格式设置时，可设置整个表格或表格中所选行、列或单元格的属性。 如果将表格、行列、单元格的某个属性值设置为不同的值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。 4.1.2 表格的基本操作 4. 选择表格和单元格 选择整个表格对象：单击表格中的任意单元格，在状态栏中的标签选择器中选择 table标签 选择行或列：单击单元格并拖动，从而选择行或列，此操作可以选择多行或多列 选择单个单元格：单击单元格，在状态栏中的标签选择器中选择td标签 选择多个不连续的单元格：单击某个单元格，按住ctrl键，单击还需要选择的单元格 4.1.2 表格的基本操作 5. 拆分与合并单元格 单线表格的制作 ①创建一个表格。设置表格的行、列数(如3行3列)，边框为0，间距为1。根据需要调整表格的大小。 ②选择表格，为表格添加一种背景颜色(即边线颜色)，比如黑色。 ③选中所有单元格，为单元格添加与页面背景相同的颜色(通常为白色)。 ④保存文件，按下F12键，在浏览器中显示效果。 单线表格实际上设置了表格间距的颜色，然后把间距值设置为最小。表格边线实质上是表格间距 隔离边框的制作 插入表格。插入一个1行3列的表格，把【边框】设定为0，【间距】设定为2，【填充】设定为1。 设置单元格背景色。同时选中3个单元格对象。在【属性】面板中将其【背景颜色】设定为“红色” 插入表格。在3个单元格的每一个中插入1×1表格,【边框】、【间距】和【填充】全部设定为0，【宽度】设定为100%。形成“嵌套”表格形式 。 注意：在单元格中插入表格前，最好先将单元格内容的定位属性“水平”和“垂直”位置分别设定为left和top 设置表格背景色。将每个嵌入表格背景颜色均设定为网页背景色，例如“白色”。 练习(ex4_1_2.htm)：制作“旅游行程表”双线表格 本例着重练习在Dreamweaver?8中创建一个“旅游行程表”，通过对表格的边框及边框颜色的设置来创建双线表格。 练习(ex4_1_3.htm)套用设计方案制作“会议议程表” 本例着重练习在Dreamweaver?8中创建一个“会议议程表”，通过对表格执行“格式化表格”命令，套用设计方案。 练习(ex4_1_4.htm)：制作“绿叶乡舟”网页顶部 本例着重练习在Dreamweaver?8中创建复杂的表格。主要通过拆分单