利用表格设计和制作网.pptVIP

中国计划出版社网页制作精品课程中国计划出版社网页制作精品课程中国计划出版社网页制作精品课程第3章利用表格设计和制作网页3.1表格网页实例3.2利用DreamweaverMX编辑网页表格3.3利用HTML编辑网页表格3.4表格的应用技巧在网页的设计制作中，表格（Table）是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版。表格化的页面在不同平台、不同分辨率的浏览器里都能显示出原有的布局和对齐。图4-1所示的是“天使部落”网页利用表格进行布局的页面效果。3.1表格网页实例图4-1“天使部落”主页3.2利用DreamweaverMX

编辑网页表格3.2.1创建表格行（Row）：表格在水平方向上的组成元素。表格主要由以下3个基本元素组成。添加标题列（Column）：表格在竖直方向上的组成元素。添加标题单元格（Cell）：表格中的最小的独立存放数据的区域。01另外，还有以下几个概念需要掌握。02边框（Border）：单元格四周的界线标志。03表格间距（Cellspace）：定义内部表格线的宽度。04表格间隙（Cellpad）：相邻的单元格之间的间隙。01在DreamweaverMX中，创建表格有以下4种方式。单击此处添加小标题02执行主菜单中的“插入”→“表格”命令。单击此处添加小标题03按组合键Ctrl+Alt+T。单击此处添加小标题04单击插入面板上“常用”选项卡中的“插入表格”按钮。单击此处添加小标题05单击插入面板上“表格”选项卡中的“插入表格”按钮。单击此处添加小标题图3-2“插入表格”对话框使用上述4种方式中任意一种方法都将打开如图3-2所示的“插入表格”对话框。添加标题对话框中各选项含义如下。01添加标题行数：初次指定表格的总行数。02添加标题列数：初次指定表格的总列数。03添加标题单元格填充：指定单元格的大小，以像素为单位。04添加标题单元格间距：指定单元格之间的距离，以像素为单位。05宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。图3-4利用“属性”面板调整表格的大小3.2.2表格的编辑修改表格调整表格的大小调整行高、列宽添加标题合并单元格添加标题拆分单元格添加标题表格的嵌套添加标题表格的复制添加标题删除表格添加标题增加或减少行、列跨度添加标题单击此处添加小标题在表格中输入文字和图像单击此处添加小标题向表格中输入的内容主要是文字和图片两种形式。单击此处添加小标题在表格中输入文字单击此处添加小标题在表格中插入图像设置表格属性表格整体属性设置图3-11表格“属性”面板2．行、列和单元格属性设置图3-12表格的行、列和单元格“属性”面板3.2.4表格的排序在表格的应用中，常要对表格中的一组数据进行排序。在DreamweaverMX中可以实现按数字的排序和按字母的排序。3.2.5表格的格式化DreamweaverMX为表格提供了17种表格格式模板，可以从中选择一种方案快速应用到用户设计的表格中。图4-14“格式化表格”对话框中国计划出版社网页制作精品课程中国计划出版社网页制作精品课程中国计划出版社网页制作精品课程