第4讲 表格处理.ppt

第四章　表格布局页面 4.1????表格的基本操作 4.2????使用表格的其他视图 4.3????应用实例1 4.4????应用实例2 4.5????应用实例3 第一节　表格基本操作 主要内容：（1） 理解单元格，表格，间距，填充，边框。（2）调整行和列的宽度、高度。（3）拆分和合并单元格。 （4）嵌套表格 　（5）制作细线表格。 （1）理解单元格，表格，间距，填充，边框。 居中｜插入一行一列表格，各项值如图： 插入表格： 插入表格： 插入表格： （2）调整行和列的宽度 鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。 （2）调整行和列的宽度 鼠标放在一行的左边，出现横向的箭头时，单击，就可以选中一行。在属性面板中可以设置所选行的宽和高。 （3）拆分和合并单元格 合并单元格：按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。 拆分单元格：在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。 拆分后的效果 （4）嵌套表格 嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。 实例制作：基本表格的制作 （5）制作流行表格 制作细线框表格：实质上是设置间距的大小和颜色。实例为便于观看效果，把间距设置为10。单元格填充和边框设置为0。单元格填充和边框不输入数值效果类似。 选中表格，设置表格的背景颜色为黑色。一个10象素宽的表格就做好了。实际上是把间距的颜色设置成了黑色。 将表格间距改为1后即做成细线表格 制作细线： 制作间隔表格 　　所谓间隔表格，就是单元格之间存在一定的距离，看上去，每个单元格自成一体。此时要用到前面所讲的嵌套表格。 操作方法如下： 插入2×2表格，边框粗细为0，单元格边距为1，单元格间距为4。 选择所有单元格，设置其背景色为“#0000ff”(此为间隔表格的边框色） 在每个单元格内插入1×1表格，宽高皆为100%，边框粗细为0，间距为0。 设置内嵌套表格背景色为白色“#FFFFFF” 实战演练　流行表格制作技巧 第二节　版式设计 主要内容： 几种常用的版式（分栏结构）， LOGO（标志）尺寸， Banner（横幅）尺寸， 导航栏类型， 导航菜单位置， 网页内容， 版权声明。 网页结构分析 这是一个主页的简单结构，由三个表格组成。 第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。 中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。 下面一个表格，一行一列，放版权声明。 常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构： 一、页眉区设计 几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。 LOGO: 167×71 导航栏形式 导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。 导航栏有 横排的 竖排的 也有两种都有的。 表格初始设置 做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。 用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。 完全下载一个表格的内容，才能在IE中显示出来。 如果页面文件小，可以只有一个表格放内容。 如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容，如图所示 第三节　布局视图的使用 在Dreamweaver MX中，可以在表格中添加内容，但是内容只是在表格的中间出现。这时需要从标准视图切换到布局视图，精确定位网页内容。 一、创建布局表格和布局单元格 在页上绘制布局单元格和布局表格。当您不在布局表格中绘制布局单元格时，Dreamweaver 会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。 单击插入栏“布局”分类中的“绘制布局单元格”按钮，拖动指针以创建布局单元格。Ctrl＋“绘制布局单元格”连续创建布局单元格。 单击插入栏“布局”分类中的“绘制布局表格”按钮, 拖动指针以创建布局单元格。Ctrl ＋ “绘制布局表格”绘制多个布局表格 。 绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。 二、在布局单元格中添加内容 绘制好布局之后，可以在布局单元格中插入文本、图像等内容。在布局表格的空白区域中不能插入内容。 当插入的内容较大时，布局单元格会自动延展以容纳这些内容，但是，周围单元格的大小会受到影响。 三、移动布局单元格和表格及调整它们的大