第4章APDiv、框架与网页布局.ppt
《第4章APDiv、框架与网页布局.ppt》由会员分享,可在线阅读,更多相关《第4章APDiv、框架与网页布局.ppt(29页珍藏版)》请在三一文库上搜索。
1、,、,第 4 章,AP Div、框架与网页布局,4.1 【案例 17】“秦始皇兵马俑兵器介绍”网页 相关知识 1设置 AP Div 的默认属性 单击“编辑”“首选参数”命令,弹出“首选参数”对话框,再选择该对话框内“分类”列表框中的“AP 元素”选项,如图 4-1-3 所示。其中各个选项的作用如下: (1)“显示”下拉列表框:设置默认状态下 AP Div 的可视度。可以选择“default”(浏览器默认状态)“inherit” (继承母体可视度)、“visible”(可视)和“hidden”(隐藏)。 (2)“宽”和“高”文本框:设置默认状态下插入 AP Div 的宽度和高度,单位为像素。 (
2、3)“背景颜色”按钮与文本框:设置默认状态下插入 AP Div 的背景颜色,默认值为透明。单击 按钮可以 调出颜色面板,利用它来选中颜色;也可以在文本框内输入颜色的代码。 (4)“背景图像”文本框与“浏览”按钮:用来设置默认状态下插入 AP Div 的背景图像。单击“浏览”按钮, 可以弹出“选择图像源”对话框,从中可以设定 AP Div 的背景图像。 (5)“嵌套”复选框:选中它后,可以在将 AP Div 拖动到其他 AP Div 时实现嵌套。,(6)“Netscape 4 兼容性”复选框:选中它后,Dreamweaver 会向 HTML 文件的标记中加入 JavaScript 函数,用来解决
3、在 Netscape 4.0 浏览器中添加嵌入 CSSAP Div 时可自动调整 AP Div 的尺寸,避免异常问题产生。 2AP Div 的基本操作 (1)创建 AP Div 可以有以下三种方法: 单击“插入”(布局)栏内的“描绘 AP Div”按钮 ,在页面内拖动出一个矩形,即 可创建一个 AP Div,如图 4-1-4 所示。这时鼠标指针变为十字状态。 将“绘制 AP Div”按钮 拖动到网页页面中,也可在页面光标处插入一个默认属性的 AP Div。 将光标移到要插入 AP Div 的位置。单击“插入记录”“布局对象”“AP Div”命令,也可以在网页 内光标处创建一个 AP Div。,
4、图 4-1-4,创建一个 AP Div,(2)选中 AP Div:在改变 AP Div 的属性前应先选中 AP Div,选中的 AP Div 会在 AP Div 矩形的左上角产生 一个双矩形状控制柄图标 ,同时在 AP Div 矩形的四周产生八个黑色的方形控制柄。选中一个 AP Div 的效果如 图 4-1-5 所示。选中 AP Div 的方法有多种,操作方法如下: 单击 AP Div 的边框线,即可选中该 AP Div。 单击 AP Div 的内部,会在 AP Div 矩形的左上角产生一个双矩形状控制柄图标 ,单击该控制柄图标 , 即可选中与它相应的 AP Div。 按住【Shift】键,分
5、别单击要选择的各个 AP Div 的内部或边框线,即可选中多个 AP Div。 如果选中的是多个 AP Div,则只有一个 AP Div 的方形控制柄是黑色实心的,其他选中的 AP Div 的方形控 制柄是空心的,如图 4-1-6 所示。,图 4-1-5,选中一个 AP Div,图 4-1-6,选中多个 AP Div,(3)调整一个 AP Div 大小:改变一个 AP Div 大小的方法有三种,首先要选中该对象。, 鼠标拖动调整的方法:将鼠标移到 AP Div 的方形控制柄处,当鼠标指针变为双箭头状时拖动鼠标,即可,调整 AP Div 的大小。, 按键调整的方法:按住【Ctrl】键,同时按【】
6、或【】键,可使 AP Div 水平增加或减少一个像素;,每按【】或【】键一次,可使 AP Div 垂直增加或减少一个像素;按住【Ctrl+Shift】组合键的同时,按光,标移动键,可每次增加或减少五个像素。, 利用 AP Div“属性”栏设置:在其“属性”栏内的“宽”和“高”文本框内分别输入修改的数值(单位,是像素),即可调整 AP Div 的宽度和高度。,(4)调整多个 AP Div 大小的方法也有两种:, 命令方法:单击“修改”“排列顺序”“设成宽度相同”命令(见图 4-1-7),即可使选中的 AP Div,与最后选中的 AP Div(它的方形控制柄是黑色实心的)的宽度相同。, 利用 AP
7、 Div“属性”栏进行设置的方法:选中多个 AP Div 后,其“属性”栏变为多 AP Div“属性”栏。,在“宽”和“高”文本框内分别输入修改的数值(单位是像素),即可调整选中的多个 AP Div 的宽度和高度(单,位是像素)。,(5)设置多个 AP Div 的排列顺序和对齐可采用以下方法:, 命令的方法:选中多个 AP Div,单击“修改”“排列顺序”命令,可弹出它的下一级菜单,如图 4-1-7,所示。单击其中的一个命令,即可获得相应的对齐效果。 例如,选中多个 AP Div,单击“修改”“排列顺序”“对齐下缘”命令,即可将各 AP Div 以最后选中 的 AP Div(控制柄是实心)的下
8、边线为基准进行对齐,如图 4-1-8 所示。,图 4-1-7 “排列顺序”的下一级菜单,图 4-1-8,对齐下缘后的多个 AP Div, 按键调整的方法:按住【Ctrl】键,同时按光标移动键,即可将选中的多个 AP Div 对齐。按【】键可 右对齐,按【】键可左对齐,按【】键可下对齐,按【】键可上对齐。 利用 AP Div“属性”栏设置:选中多个 AP Div 后,在多 AP Div“属性”栏内的“左”或“上”文本框 内输入修改的数值,即可使多个 AP Div 的左边线或上边线以修改的数值对齐。 (6)调整 AP Div 的位置可以采用如下方法: 鼠标拖动调整的方法:将鼠标指针移到 AP Di
9、v 的边框上,当鼠标指针变为 形状时拖动,即可移动 AP Div。, 按键调整的方法:每按一次【】或【】键,可使 AP Div 向右或向左移动一个像素;每按一次【】 或【】键,可使 AP Div 向下或向上移动一个像素;如果按住【Shift】键的同时,按光标移动键,也可调整 AP Div 的位置,每次移动五个像素。 利用 AP Div“属性”栏进行设置的方法:选中要调整大小的 AP Div,在其单个 AP Div“属性”栏内的 “左”文本框中输入修改的数值(单位是像素),即可调整 AP Div 的水平位置;在“上”文本框内输入修改的数 值(单位是像素),可调整 AP Div 的垂直位置。 3A
10、P Div“属性”栏 AP Div“属性”栏有两种:一种是单 AP Div“属性”栏,这是在选中一个 AP Div 时出现的;另一个是多 AP Div“属性”栏,这是在选中多个 AP Div 时出现的。单 AP Div“属性”栏如图 4-1-9 所示,多 AP Div“属 性”栏如图 4-1-10 所示。从图中可以看出,多 AP Div“属性”栏内除了基本的属性设置选项外,还增加了关 于文本属性的设置选项。其中各选项的作用如下:,图 4-1-9,单 AP Div“属性”栏,图 4-1-10,多 AP Div“属性”栏,(1)“CSS-P 元素”下拉列表框:用来输入 AP Div 的名称,它会在
11、“AP 素材”面板中显示出来。该名称可以 在脚本中使用,例如通过脚本实现 AP Div 的显示或隐藏等。 (2)“左(L)”文本框用来确定 AP Div 在页面中的位置,单位为像素,其内的数据是 AP Div 左边线与页面 左边缘的间距。对于嵌套中的子 AP Div,“左(L)”文本框内的数据是相对于父 AP Div 的左边的位置。 (3)“上(T)”文本框内的数据是 AP Div 顶边线与页面顶边缘的间距。对于嵌套中的子 AP Div,是相对于 父 AP Div 的左边或顶端的位置。 (4)“宽”和“高”文本框:用来确定 AP Div 的大小,单位为像素。 (5)“Z 轴”文本框:用来确定
12、AP Div 的 Z 轴顺序,用来设置嵌套 AP Div 的重叠层次,值越大,越靠上方。 (6)“可见性”和“显示”下拉列表框:用来确定 AP Div 的可视性。它有“default”(默认,由浏览器决定, 大多数会继承它的父 AP Div 的可见性)、“inherit”(与其父 AP Div 的可视性相同)、“visible”(显示 AP Div,图 4-1-11,和其内对象,与其父 AP Div 无关)和“hidden”(隐藏 AP Div 和其内对象,与其父 AP Div 无关)四个选项。,(7)“背景图像”文本框与,按钮:用来确定 AP Div 的背景图案。,(8)“背景颜色”按钮与文
13、本框:用来确定 AP Div 的背景颜色。 (9)“标签”下拉列表框:用来选择 AP Div 的样式,其内有 DIV 和 SPAN 两个选项,这是 HTML 的两个标签。 (10)“溢出”下拉列表框:它决定了当 AP Div 中的内容超出 AP Div 的边界时的处理方法。它有“visible”(可 见,即根据图像大小自动调整 AP Div 的大小,使内容全部显示,为系统默认)、“hidden”(当图像超出 AP Div 的范围后,超出的部分不显示)、“Scroll”(当图像超出 AP Div 的范围后,加滚动条)和“Auto”(根据 AP Div 中的内容能否超出 AP Div 的范围,决定
14、是否加滚动条)四个选项。选择前三个不同选项后,在浏览器中的显示 效果如图 4-1-11 所示。注意:在网页页面设计视图窗口内显示的都与图 4-1-11(a)一样。,(a),(b),(c),在“溢出”下拉列表框中分别选择“Visible”、“Hidden”和“Scroll”后的不同效果,(11)“剪辑”选项组:用来确定 AP Div 的可见区域,即确定 AP Div 中的对象与 AP Div 边线的间距。“左”、,“上”、“右”和“下”四个文本框分别用来输入 AP Div 中的对象与 AP Div 的左边线、顶部边线、右边线和底部,边线的间距,单位为像素。,4.2 【案例 18】“不同亮度的图像
15、”网页,相关知识,1“AP 元素”面板和改变 AP Div 的重叠顺序,在“AP 元素”面板中,用户可以对 AP Div 的可视性、嵌套关系、显示顺序和相互覆盖性等属性进行设置。,单击“窗口”“AP Div”命令,即可调出“AP Div”面板,即 AP Div 监视器,如图 4-2-6(b)所示。,(1)显示 AP Div 的信息:在图 4-2-4 所示的“AP 元素”面板中有五个 AP Div,“名称”列,是各个 AP Div,的名称,“Z”列内的数据显示各 AP Div 的顺序,Z 值越高,显示越靠上。Z 值可以是负数,表示在网页下边,即,隐藏起来,网页的“Z 轴”数值为 0。,(2)选定
16、 AP Div:单击“AP 元素”面板中 AP Div 的名称,即可选中网页中相应的 AP Div。按住【Shift】键,同,时依次单击“AP 元素”面板中各个 AP Div 的名称,即可选中网页中相应的多个 AP Div。,(3)更改 AP Div 的名称:双击“名称”列中 AP Div 的名称,使此行名称处出现白色的矩形,如图 4-2-8,所示,即可输入 AP Div 的新名字。,(4)设定是否允许 AP Div 重叠:如果不选中“AP 元素”面板中的“防止重叠”复选框,则表示允许 AP Div 之间有重叠关系;如果选中“防止重叠”复选框,则表示不允许 AP Div 之间有重叠关系。 (5
17、)改变 AP Div 之间的嵌套关系:在 AP Div 中插入另一个 AP Div 叫做 AP Div 的嵌套。在 AP Div 的嵌套中, 子 AP Div 的属性决定于其父 AP Div 的属性。在选定父 AP Div 后,子 AP Div 也会被选定;在移动或复制父 AP Div 时, 子 AP Div 也会随之被移动或复制。 按住【Ctrl】键,同时拖动“AP 元素”面板中源 AP Div 的名称(“apDiv4”)到另一个 AP Div 名称之上(例如 “apDiv5”,可称为目标 AP Div),当目标 AP Div 名字(例如“apDiv5”)四周出现矩形框时释放鼠标左键,即可将
18、 源 AP Div 成为目标 AP Div 的子 AP Div。再按住【Ctrl】键,将“apDiv3”AP Div 拖动到“apDiv4”AP Div 之上, 然后释放鼠标左键,“apDiv3”AP Div 即可成为“apDiv4”AP Div 的子 AP Div。 “AP Div”面板如图 4-2-9 所示。,图 4-2-8,更改 AP Div 的名称,),按钮,使,由图 4-2-9 可以看出,“apDiv3”AP Div 是“apDiv4”AP Div 的子 AP Div,“apDiv4”AP Div 是“apDiv5” AP Div 的子 AP Div。父 AP Div 名称的左边有一
19、个 图标,单击该图标,可以使父 AP Div 收缩, 图标变为 图 标。再单击 图标,可使父 AP Div 的子 AP Div 展开, 图标变为 图标。 如果向左下方拖动子 AP Div 的名称,可以取消它与父 AP Div 的嵌套关系。 (6)改变 AP Div 的显示顺序:单击要更改显示顺序的 AP Div 的 Z 值(例如“apDiv3”,使它周围出现矩形 框,如图 4-2-10 所示,输入新的 Z 值。此外,在 AP Div 的“属性”栏内的“Z 轴”文本框内也可以改变 Z 值。,(7)设置 AP Div 的可视性:单击“AP 元素”面板内的,按钮列出现许多人眼图像,如图 4-2-11
20、,所示。“AP 元素”面板内的,按钮列显示的,图像(睁开的人眼图像),表示此行的 AP Div 可视(即可见的)。,图 4-2-9,AP Div 之间的嵌套,图 4-2-10,修改 Z 值,图 4-2-11,单击,按钮后效果,l,l,l,l,单击,图像,可使,图像消失,再单击原,图像处,会出现,图像,表示此行的 AP Div 是不可视的。,如果再单击,图像,可使它变为,图像,表示此行的 AP Div 又变为可视的。将“apDiv3”AP Div 变为不可视,后的“AP 元素”面板如图 4-2-12 所示。 2AP Div 与表格互相转换 (1)将 AP Div 转换为表格:单击“修改”“转换”
21、“将 AP Div 转换为表格”命令,弹出“将 AP Div 转换为表格”对话框,如图 4-2-13 所示。其内各选项的作用如下: “最精确”单选按钮:表示使用最高的精度转换。转换后的单元格位置基本不变,空白处会产生空的单元 格。 “最小:合并空白单元格”单选按钮:选中它后,会合并空白单元格。 文本框:选中“最小:合并空白单元格”单选按钮后,该文本框会变为有效,其内可输入数 值,单位为像素。当 AP Div 与 AP Div 的间距小于此值时,AP Div 转换为表格后会自动对齐,而不是以空 白单元格去补充,从而避免产生过多的表格和单元格。 “使用透明 GIFs”复选框:选中该复选框后,AP
22、Div 转换后的表格空白单元格用透明的 GIF 图像填充,以 保证在任何浏览器中都能正常显示。,l,l,l,l,l,“置于页面中央”复选框:选中该复选框后,转换后的表格在页面居中显示。不选中此复选框时,转换后 的表格居页面左上角显示。 “防止重叠”复选框:选中该复选框后,可防止 AP Div 重叠。 “显示 AP 元素面板”复选框:选中该复选框后,可显示“AP 元素”面板。 “显示网格”复选框:选中该复选框后,可显示网格。 “靠齐到网格”复选框:选中它后,可使网格吸附(捕捉)功能有效。 (2)将表格转换为 AP Div:由于 AP Div 的功能比表格的功能要强得多,所以将表格转换为 AP D
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- APDiv 框架 网页 布局
链接地址:https://www.31doc.com/p-2070444.html