Dreamweaver MX网页设计与制作 教学课件 作者 曾立 第2章.ppt

《Dreamweaver MX网页设计与制作 教学课件 作者 曾立 第2章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Dreamweaver网页设计和制作第2章表格第2章表格布局技术2.1表格的基本操作2.2使用表格制作网页简介网页是由文字、图片、动画等静态和动态的一些网页元素构成的，如何合理地组织这些元素，使之整齐、美观，首先需要一个整体布局的概念，在DreamweaverMX中主要依靠表格的相互嵌套、合并、拆分来完成。本章主要介绍表格在网页布局中的应用。本章任务学会表格的建立与修改掌握表格的嵌套使用能够熟练地利用表格制作出一个布局整齐的网页2.1表格的基本操作插入表格在表格中添加内容从其他文档导入表格式数据嵌套表格在

2、网页设计中，页面布局是一个重要的部分。DreamweaverMX提供了多种方法来创建和控制网页布局，最普通的方法就是使用表格，使用表格可以简化页面布局设计过程、导入表格化数据、设计页面分栏及定位页面上的文本和图像等。插入表格的方法通过“插入”面板上的“表格”按钮选择“插入”菜单—“表格”命令在弹出的对话框中设置，表格的行和列设置表格的“宽度”（注意行和列的单位）设置表格的“边框”、“单元格填充”和“单元格间距”（特别强调“边框”、“单元格填充”和“单元格间距”之间的关系）“表格”属性行数：定义表格行的

3、数目。列数：定义表格列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比来定义该表格在浏览器中的显示宽度。边框粗细：指定表格边框的宽度（以像素为单位）。此时默认的边框粗细为没有，没有粗细并不代表粗细就为0，根据不同浏览器确定的粗细不同，若要确保浏览器不显示表格边框，需将边框粗细设置为“0”。若要在边框粗细设置为“0”时查看单元格和表格边框，可选择“查看”菜单—“可视化助理”—“表格边框”命令。“单元格填充”和“单元格间距”情况相同单元格边距：确定单元格边框和单元格内容之间相距的像素数。单元格间距：

4、确定相邻的表格单元格之间相距的像素数。如果没有明确指定单元格间距和单元格边距的值，则大多数浏览器按单元格边距设置为“1”，单元格间距设置为“2”显示表格。若要确保浏览器不显示表格中的边距和间距，大多数情况下将“单元格边距”和“单元格间距”设置为“0”。单元格边框与其中内容之间的空白，其默认值为1像素表格中每个单元格之间的距离，默认值为2像素表格中添加内容将光标定位在要插入对象的位置输入文本，或者选择“插入栏”的“常用”选项卡中单击对应的对象从其他文档导入表格式数据选择“文件”菜单—“导入”，可导入相应的数

5、据1、此时应准备些数据文件，比如文本文件、EXCLE、WORD……，让学生行行导入，然后老师再进行拓展。2、如果是EXCLE、WORD对象，会在网页中生成很多重复的代码，应选择“命令”菜单—清理WORD生成的HTML嵌套表格嵌套表格是指在一个表格的单元格中再插入一个表格。嵌套表格的宽度受所在单元格的宽度的限制，嵌套表格的编辑方法与表格相同。注意：当嵌套表格表格的宽度和高度超过外面表格时，应该采取的方法：1、调整外部表格的宽或者高2、调整嵌套表格的宽或者高，最佳方式为把嵌套表格的宽和高单位修改百分比。嵌套表

6、格的具体操作（1）将光标定位到要插入表格的单元格中。（2）在“插入栏”的“常用”选项卡中单击按钮，打开“插入表格”对话框。（3）根据实际需要分别在行数、列数、宽度和边框等项中指定嵌套表格的属性。（4）设置完成后单击按钮即可。表格基本操作选定操作单元格的合并及拆分插入或删除行或列单元格的选取单元格的选取分为单个单元格的选取和单元格区域的选取两种情况。单个单元格的选取方法很简单，只需将光标定位到要选取的单元格中即可。合并单元格（1）选取要合并的单元格区域（2）单击“属性”面板左下角的按钮，合并后的效果如拆分单

7、元格（1）将光标定位要拆分的单元格中。（2）单击“属性”面板中的按钮，打开“拆分单元格”对话框。（3）在“把单元格拆分”栏中选中单选项。表格属性设置表格属性的设置单元格属性设置表格属性的设置选取表格，展开“表格”属性面板设置对应的属性综合练习