第五章 使用表格和Div布局网页.ppt

第五章 使用表格和Div布局网页 1、创建与编辑表格 2、创建AP 3、编辑AP Div 第五章 使用表格和Div布局网页 5.1表格 一、布局表格 在网页的设计中，非常重要的一点就是网页的布局，也就是网页中的文字、图像与动画等对象如何安排 通常在插入对象以前先进行区域分割。区域分割可以使用框架、层或表格，使用最多的是表格。 第五章 使用表格和Div布局网页 在DW8“布局”栏提供了“布局表格”和“绘制布局单元格”两个布局工具。使用它们可以方便地制作出网页布局的表格。布局工具栏，如下图所示： 第五章 使用表格和Div布局网页 1、创建布局表格 2、创建布局单元格 如果没有绘制布局表格就绘制布局单元格，则会自动产生一个布局表格。 第五章 使用表格和Div布局网页 注意： （1）不可以在布局单元格内绘制布局表格和布局单元格。 （2）不能将单元格移出所在的布局表格，也不能将单元格移到其他单元格之上。 (3)当一个行划分了若干单元格时，必须先用布局表格，后用布局单元格 第五章 使用表格和Div布局网页 3、布局表格属性 第五章 使用表格和Div布局网页 4、布局单元格属性 第五章 使用表格和Div布局网页 布局表格菜单和布局单元格菜单： 第五章 使用表格和Div布局网页 清除所有高度：可以将布局表格内的单元格的高（即单元格顶部与布局表格顶部的间距）清除。如果布局表格内没有单元格，则自动建立充满布局表格的单元格。 第五章 使用表格和Div布局网页 使所有宽度一致：使所有布局单元格的宽度一样 移除所有分隔符图像：删除所有的间隔图像 第五章 使用表格和Div布局网页 删除嵌套：删除选中的布局表格中的间隔图像。 列设置为自动伸展：使选中的布局单元格的列自动适应布局表格的宽度。 第五章 使用表格和Div布局网页 添加间隔图像：在选中的布局单元格内添加间隔图像。间隔图像是透明图，在浏览器中是看不见的，但它可以用来控制自动伸展表的间隔。间隔图像会维持页面上已经设置的表格和单元格的宽度。 第五章 使用表格和Div布局网页 如何加快表格布局网页加载的速度？ 要加快表格布局网页加载的速度，可以在表格标签中添加tbody及tbody实现，代码如下： 第五章 使用表格和Div布局网页 table width=80% border=0 cellpadding=0 cellspacing=0 tbody tr td/td /tr /tbody /table 第五章 使用表格和Div布局网页 例题1： 如图所示，制作该网页 要求：1、采用布局网页方式布局 2、导航栏的宽度保持一致 3、页面设计美观、合理 第五章 使用表格和Div布局网页 第五章 使用表格和Div布局网页 例题2：利用表格布局制作网页 要求： 1、表格第一行：左边为登陆，右边为设为主页和收藏 2、表格第二行：主题和LOGO放置区 3、表格第三行：高度为30像素、宽度为100%、红色的线条 4、表格第四行：左边为导航区，右边为内容显示区 5、表格第五行：为图像滚动特效，图像向右滚动 6、表格第六行：版权声明区域 第五章 使用表格和Div布局网页 作业：利用表格布局制作网页 要求： 1、表格第一行：主题和LOGO放置区 2、表格第二行：高度为30像素、宽度为100%、红色的线条 3、表格第三行：为导航栏 4、表格第四行：左边上半部分为登陆、下半部分为友情链接，右边为内容显示区 5、表格第五行：为图像滚动特效，图像向右滚动 6、表格第六行：版权声明区域 例题3：页面导航栏使用FLASH导航 例题4：页面导航栏使用FLASH文本导航 第五章 使用表格和Div布局网页 5.2 创建Div Div是网页布局中一个非常重要的对象。在DW中主要包括Div标签及Ap Div两种对象。 第五章 使用表格和Div布局网页 Div标签和Ap Div严格意义上说是相同的对象，即都是div标签，但由于采用了不同的CSS样式定义，两者在外观及属性上有了不同的表现。 第五章 使用表格和Div布局网页 AP Div是灵活性最大的网页元素，具有可移植性，可以在网页内任意移动，也可以在任意位置创建，可重叠或设置是否显示，因此AP Div常在网页中实现一些特殊功能，如制作弹出菜单、漂浮图像等。 第五章 使用表格和Div布局网页 Div标签默认状态下不能移动，也不具有重叠属性，因此常用于网页布局。 第五章 使用表格和Div布局网页 创建AP Div 层(AP Div)可以精确定位的网页元素。 层是一个可以容纳文本、图像等网页元素的容器，是一个可以单独编辑处理的对象，是一