静态网页表格与布局课件.ppt

《静态网页表格与布局课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、表格与布局本章主要内容创建表格设置表格属性编辑表格页面布局创建布局表格创建布局单元格8/30/20211西南科技大学天府学院表格是网页组成的框架，如图示例表格进行数据的组织，数据的显示非常有条理性：那么，是不是一个没有数据的网页就不会用到表格了呢？8/30/20212西南科技大学天府学院在网页中，表格应用更多的是对网页的布局进行规划！通过使用表格将图片、文本及动画等各种对象在网页中的位置进行规划，从而使整个页面的效果多而不乱，整齐有序！8/30/20213西南科技大学天府学院可见，表格的布局作用就是对网页的

2、框架进行规划，然后便于在网页中添加对象，实现预定义的效果。如图：一幅将各种网页的组成对象集合的布局表格8/30/20214西南科技大学天府学院一、创建表格1、选取或者在“查看”菜单中选取2、选择或者“插入”菜单中选择3、插入表格对话框8/30/20215西南科技大学天府学院单元格边距(填充)：确定单元格边框和单元格内容之间的像素数。P163单元格间距：确定相邻的单元格之间的像素数。页眉：表示设置表格内标题的四种形式。注意：像素是相对于显示器的，而百分比是相对于浏览器的8/30/20216西南科技大学天府学院

3、在“辅助功能”部分指定以下选项：标题：提供了一个显示在表格外的表格标题。对齐标题：指定表格标题相对于表格的显示位置。摘要：给出了表格的说明。8/30/20217西南科技大学天府学院二、设置表格属性提示：若要确保浏览器不显示表格边框，请将“边框”设置为0。若要在边框设置为0时查看单元格和表格边框，请选择“查看”→“可视化助理”→“表格边框”。8/30/20218西南科技大学天府学院表格属性：填充:3、间距:0、边框:6

4、ercolordark=“#3333ff”(深蓝色)表格属性：填充:3、间距:0、边框:1表格属性：填充:3、间距:5、边框:1设置背景色、边框色不同样式的表格8/30/20219西南科技大学天府学院三、编辑表格增加行或列同时增加多行或多列删除行和列在DW中跟Excel操作相同！8/30/202110西南科技大学天府学院选择表格元素选定整个表格(3种)1、将光标放在表格的右边和下边的外边框线上，单击鼠标；2、光标放在任一单元格，鼠标单击视图窗口底部的

5、【表格】→【选择表格】菜单；8/30/202111西南科技大学天府学院单元格的基本操作选定单元格选择一个单元格；选择连续的单元格：按住Shift键的同时单击鼠标；选择多个不连续的单元格：按住Ctrl键的同时单击鼠标；8/30/202112西南科技大学天府学院单元格的基本操作合并和拆分单元格选取或选择在DW中可以复制、粘贴与清除单元格内容跟Excel操作相同！8/30/202113西南科技大学天府学院表格的格式化使用单元格属性面板对整个表格的格式化，主要通过属性面板来完成。如图：8/30/202114西南科技

6、大学天府学院表格的套用格式对表格进行格式化，还可以应Dreamweaver8中预置的表格格式，其中包含右十几种非常实用的格式：选择“命令”---“格式化表格”注意：只有简单的表格才能使用预先设置的设计进行格式设置。不能使用这些设计对包含合并单元格、列组或任何其他表格的表格进行格式设置。8/30/202115西南科技大学天府学院排序表格在Dreamweaver8中可以对表格的数据进行排序。具体步骤：选择菜单【命令】→【排序表格】，弹出排序表格对话框，如图：8/30/202116西南科技大学天府学院表格应用实

7、例练习1(example3-1)：练习2(example3-2)书上P169-1718/30/202117西南科技大学天府学院四、页面布局绘制布局单元格和表格首先要将文档的视图模式设置成为布局视图提示：布局单元格之间不能相互重叠，同样布局表格之间也不能相互重叠。在绘制布局表格和单元格时，会自动激活绘制区域的靠齐特性，默认状态下，最小的靠齐网格是8像素，因此很容易绘制出排列整齐的表格或单元格。如果希望在绘制表格或单元格时精确到8像素以下，则可以在绘制时按住Alt键。8/30/202118西南科技大学天府学院

8、注意事项一个嵌套表格不能大于存放它的表格。如果希望往布局表格中添加布局单元格，只能添加在灰色区域中，因为单元格是不能相互覆盖的。如果您尝试在现有内容下面绘制布局表格但是出现禁止绘制鼠标指针，请调整“文档”窗口的大小以使现有内容底部和窗口底部之间产生更多的空白空间。8/30/202119西南科技大学天府学院布局单元格和表格的基本操作创建布局表格和单元格后，可以根据页面布局的需要对它们进行各种操作。布局表格和布局单元