【8A文】DW网页布局(表格、布局表格).ppt

《【8A文】DW网页布局(表格、布局表格).ppt》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第4章构建网页布局使用表格使用布局表格4.1使用表格所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使其“各安其位”。此处表示未明确设置单元格的宽度此处显示了表格的宽度。如果只显示一个“▼”符号，表示未明确设置表格宽度4.1.1创建表格在Dreamweaver中创建表格的方法非常简单。确定插入点后，单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格。4.1.2选择表格和单

2、元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。要选择某个单元格，可首先将插入点放置在该单元格内，然后按【Ctrl＋A】组合键或单击“标签选择器”中对应的“”标签。要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头或时单击鼠标。4.1.3设置表格和单元格的属性选中表格后，使用属性面板可以修改表格的行、列、宽、高，以及填充、间距等。在单元格中单击，属性面板中将显示相应单元格的属性。1．设置表格和单元格的宽度与高度制作网页时，很多情况下都需要改变表格和单元格的宽度与高度，通过拖

3、动边框或在属性面板的“宽”和“高”文本框中直接输入数值，就可以非常方便地改变表格和单元格的宽度与高度。设置表格高度设置单元格“宽”和“高”2．为表格和单元格设置背景颜色及背景图像为表格和单元格设置背景颜色及背景图像的方法相当简单。将插入点置于单元格中单击“背景”文本框后的文件夹图标选择文件课堂练习1使用表格构建“火百合”主页布局在学习了表格的简单应用后，下面将结合表格与图像的应用来看一下“火百合”主页的具体制作方法。课堂练习2制作细线表格在Dreamweaver中，有多种方法可以制作细线表格，下面我们讲解一种最简单也是最常用的方法，就是通

4、过设置表格的间距和背景颜色来制作细线表格。4.1.4合并与拆分单元格1．合并单元格所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。拖动鼠标选中要合并的单元格单击“合并所选单元格，使用跨度”按钮2．拆分单元格拆分单元格表示将一个单元格拆分成多个单元格，下面继续在前面的文档中操作，也就是将前面合并的单元格拆分开来，具体操作如下。在要拆分的单元格中单击单击“拆分单元格为行或列”按钮打开“拆分单元格”对话框，设置各项参数后单击“确定”按钮4.1.5添加或删除行和列在使用表格布局网页时，往往需要在创建好的表格中添加或删除行和列。在要添加行或

5、列的单元格中单击鼠标右键，在弹出的快捷菜单中选择“表格”>“插入行或列”菜单在打开的“插入行或列”对话框中设置各项后单击“确定”按钮4.1.6格式化表格在使用表格显示数据信息时，为便于浏览者阅读，往往需要为单元格设置不同的背景颜色。常用的方法如下。选中表格后，选择“命令”>“格式化表格”菜单在“格式化表格”对话框中设置各项后，单击“确定”按钮课堂练习3制作嵌套表格所谓嵌套表格，就是在一个大表格的某个单元格里插入一个新的表格，我们看到的绝大多数网页都是由多个表格相互嵌套进行网页布局的。本节通过制作“lily”网站中的“产品展示”页面来看看嵌

6、套表格的应用和制作方法。课堂练习4制作圆角表格在浏览网页时，经常会看到圆角表格，这使得整个网页看起来更加柔和、美观。制作圆角表格的方法有很多，下面就以制作下图左侧的表格为例，具体讲解一下此类表格的制作方法。4.2使用布局表格布局网页4.2.1.模式简介及注意事项在dw中使用表格有以下3种模式：标准模式：具体内容添加和显示的模式。表格扩展模式：使用表格对页面进行布局的模式，也是传统模式。布局模式：使用布局表格对页面进行布局的模式，可以在添加内容前使用布局单元格和表格来对页面进行布局；也可以在布局模式中将文本、图像和其他内容添加到布局单元格中

7、，这和在标准模式中一样。布局模式同时具有表格和层的共同性质，继承了层的准确定位和可移动性，还继承了表格的行列属性。模式切换的操作方式：查看---表格模式----标准模式/布局模式/表格扩展模式。在不同模式下，工具栏的各个按钮作用不同。注意：只有在“设计”视图中才可切换到“布局”模式。在布局模式中不能像布局表格的空白区域插入内容，只能创建布局单元格，布局单元格才是承载具体内容的容器。4.2.2.绘制布局表格按住ctrl键可以绘制多个布局表格。4.2.3绘制布局单元格：按住ctrl键拖动可以连续绘制多个布局单元格。注意要点：如果页面已包含内容

8、，则只能在现有内容的下方空白区绘制新的布局表格。在一个布局表格中可创建多个布局单元格;布局单元格不能存在于布局表格之外;更不能在一个布局单元格中创建布局表格。也可以仅在准备添加内容时绘制每一个