使用表格和Div布局网

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