› 理论教育 ›运用AP元素技术进行页面布局

运用AP元素技术进行页面布局

时间：2023-10-29 理论教育 版权反馈
【摘要】：首页的制作主要是运用AP元素技术排版页面布局.启动Dreamweaver CS6，新建一个空白的HTML文件。图13-4 首页布局把光标定位在名为logo的AP元素内，单击“插入”浮动面板中“常用”面板上的“表格”图标按钮，设置表格行数为1，列数为2，宽度为100%，边框粗细为0。此时文档效果如图13-13所示。参照AP元素navigator的制作方法完成AP元素news。

运用AP元素技术进行页面布局

首页的制作主要是运用AP元素技术排版页面布局.

978-7-111-40982-3-Chapter13-8.jpg启动Dreamweaver CS6，新建一个空白的HTML文件。然后执行“修改”/“页面属性”命令，在弹出的“页面属性”对话框左侧的分类列表中选择“外观（CSS）”，并在右侧的面板中设置字体大小为14，文本颜色为#060。切换到“链接”页面，设置“链接颜色”为#333，“已访问链接”颜色为#600，“活动链接”颜色为#F30，“下划线样式”为“始终无下划线”，然后单击“确定”按钮关闭对话框。

978-7-111-40982-3-Chapter13-9.jpg执行“窗口”/“插入”菜单命令，打开“插入”浮动面板，然后切换到“布局”面板，单击该面板中的“绘制APDiv”图标按钮978-7-111-40982-3-Chapter13-10.jpg，按住Ctrl键在页面中绘制5个AP元素，并在属性面板上为每个AP元素命名，各个AP元素的效果及名字如图13-4所示。

978-7-111-40982-3-Chapter13-11.jpg

图13-4 首页布局

978-7-111-40982-3-Chapter13-12.jpg把光标定位在名为logo的AP元素内，单击“插入”浮动面板中“常用”面板上的“表格”图标按钮978-7-111-40982-3-Chapter13-13.jpg，设置表格行数为1，列数为2，宽度为100%，边框粗细为0。选中单元格，设置单元格内容水平“左对齐”，垂直“居中”。

978-7-111-40982-3-Chapter13-14.jpg将光标定位在第一行一列单元格中，单击“插入”浮动面板中“常用”面板上的插入图片图标978-7-111-40982-3-Chapter13-15.jpg。在弹出的插入图片对话框中选择需要的图片，然后单击“确定”按钮完成图片插入。用同样的方法在第二列单元格中插入图片。调整图片大小和AP元素尺寸，此时文件效果如图13-5所示。

978-7-111-40982-3-Chapter13-16.jpg在AP元素navigator内插入一张7行1列的表格，在表格的属性面板上设置宽为170像素，边框粗细为0，对齐方式为“居中对齐”，表格名称为t_1。

978-7-111-40982-3-Chapter13-17.jpg选中前5个单元格，在属性面板上设置单元格内容水平对齐和垂直对齐方式均为“居中”，单元格高度为50。

978-7-111-40982-3-Chapter13-18.jpg将光标定位在第一个单元格中，执行“插入”|“图像”命令，打开“选择文件”对话框。从对话框中选择预先制作好的导航按钮。然后单击“确定”按钮关闭对话框。用同样的方法插入其他4个导航按钮，此时的页面效果如图13-6所示。

接下来的步骤为导航按钮添加“交换图像”行为。当光标移到按钮上时，按钮上的文本颜色变为橙色。

978-7-111-40982-3-Chapter13-19.jpg

图13-5 插入logo

978-7-111-40982-3-Chapter13-20.jpg

图13-6 插入导航按钮后的效果

978-7-111-40982-3-Chapter13-21.jpg选中第一行单元格中的导航按钮，在属性面板上指定ID为“市场”，然后打开“行为”面板，单击“添加行为”按钮，在弹出的行为列表中选择“交换图像”行为，弹出“交换图像”对话框。单击“设定原始档为”文本框右侧的“浏览”按钮，选择要交换的图片，如图13-7所示。

单击“实时视图”按钮，即可预览交换图像行为效果，如图13-8所示。同理，为其他4个按钮添加交换图像行为。

978-7-111-40982-3-Chapter13-22.jpg将光标定位在表格的第6行，单击“插入”/“常用”面板上的插入图片图标978-7-111-40982-3-Chapter13-23.jpg。在弹出的插入图片对话框中选择需要的图片，然后单击“确定”按钮完成图片插入。这时文件效果如图13-9所示。

978-7-111-40982-3-Chapter13-24.jpg

图13-7 “交换图像”对话框

978-7-111-40982-3-Chapter13-25.jpg

图13-8 “交换图像”行为的效果

978-7-111-40982-3-Chapter13-26.jpg

图13-9 插入栏目图片

978-7-111-40982-3-Chapter13-27.jpg将光标定位在表格的第7行，单击右键，从上下文菜单中选择“表格”|“拆分单元格”命令，将单元格折分成5行。选中拆分后的单元格，设置单元格内容水平“左对齐”，垂直“居中”，单元格高度为25。

978-7-111-40982-3-Chapter13-28.jpg在各单元格中输入文本。选中输入的文本，在属性面板上单击978-7-111-40982-3-Chapter13-29.jpg按钮，然后单击“项目编号”按钮978-7-111-40982-3-Chapter13-30.jpg，为文本添加编号，此时文件效果如图13-10所示。

978-7-111-40982-3-Chapter13-31.jpg

图13-10 拆分单元格及输入文本

978-7-111-40982-3-Chapter13-32.jpg将光标置于AP元素time中，切换到“代码”视图，在中间插入如下JavaScript代码：

978-7-111-40982-3-Chapter13-33.jpg

978-7-111-40982-3-Chapter13-34.jpg

然后按F12功能键预览文档，如图13-11所示。

提示：使用JavaScript脚本，需熟悉JavaScript，也可以到网上下载现成的JavaScript程序。

978-7-111-40982-3-Chapter13-35.jpg

图13-11 页面显示时间

978-7-111-40982-3-Chapter13-36.jpg在AP元素content中插入3行2列的表格，在属性面板上将其命名为t_2，并将表格边框设置为0，表格宽度为100%。将光标定位在第一行一列的单元格中，执行“插入”/“表格”命令，嵌入一个6行2列的表格，在属性面板上将其命名为t_3。

978-7-111-40982-3-Chapter13-37.jpg选中嵌入的表格t_3的第一行单元格，在属性面板中设置其背景颜色为#CCCCCC。同理，设置第三行和第五行单元格的背景颜色。

978-7-111-40982-3-Chapter13-38.jpg选中嵌套表格t_3中的所有单元格，设置高度为30，单元格内容水平对齐方式为“左对齐”，垂直对齐方式为“居中”，并输入文本。然后在表格t_2第一行二列的单元格中插入宠物的图片，设置此单元格内容水平“居中对齐”，垂直“顶端”对齐。此时的页面效果如图13-12所示。

978-7-111-40982-3-Chapter13-39.jpg将光标定位在表格t_2第二行第一列单元格中，单击属性面板上的“拆分单元格”按钮978-7-111-40982-3-Chapter13-40.jpg，将此单元格拆分为两列。然后在拆分后的第一列单元格中输入文本，设置第二列单元格的背景颜色为#CCCCCC，并输入文本。

978-7-111-40982-3-Chapter13-41.jpg将光标定位在表格t_2第二行第二列单元格中，设置单元格内容水平和垂直对齐方式均为“居中”，并输入文本。

978-7-111-40982-3-Chapter13-42.jpg选定表格t_2第三行，单击右键，从上下菜单中选择“表格”|“合并单元格”命令，将第三行合并为一行。再次单击右键，选择“表格”|“拆分单元格”命令，将第三行拆分成两行。(www.daowen.com)

978-7-111-40982-3-Chapter13-43.jpg选中拆分后的两行单元格，在属性面板上设置单元格内容水平和垂直对齐方式均为“居中”，然后在第一行中插入一条水平线，在第二行中输入版权信息。此时文档效果如图13-13所示。

978-7-111-40982-3-Chapter13-44.jpg

图13-12 嵌入表格并插入内容

978-7-111-40982-3-Chapter13-45.jpg

图13-13 合并单元格并输入内容

978-7-111-40982-3-Chapter13-46.jpg选中版权信息中的“爱犬联盟宠物网站”，在属性面板上的“链接”文本框中输入#。即单击此文本，返回页面顶端。

978-7-111-40982-3-Chapter13-47.jpg参照AP元素navigator的制作方法完成AP元素news。至此，页面内容布局完成，效果如图13-14所示。

978-7-111-40982-3-Chapter13-48.jpg执行“窗口”|“AP元素”命令，打开AP元素管理面板，取消选中“防止重叠”复选框，然后单击AP元素content左侧的眼睛图标，使之闭眼，隐藏该AP元素。

978-7-111-40982-3-Chapter13-49.jpg执行“插入”|“布局对象”|“APDiv”命令，在AP元素content原来的位置绘制一个与content大小一样的AP元素，给AP元素取名为show。

978-7-111-40982-3-Chapter13-50.jpg执行“编辑”|“首选参数”菜单命令，在弹出的“首选参数”对话框中选择“AP元素”分类，勾选“嵌套，在APdiv中创建以后嵌套”选项，然后单击“确定”按钮关闭对话框。

978-7-111-40982-3-Chapter13-51.jpg将光标定位在AP元素show中，单击“布局”插入面板上的“绘制APdiv”按钮，然后拖动光标绘制一个AP元素，后绘制的AP元素将嵌套在AP元素show内，在属性面板上将绘制的子AP元素命名为pic1。

978-7-111-40982-3-Chapter13-52.jpg选择“插入”|“图像”命令，在AP元素pic1中插入图片，然后调整图片的大小。用同样的方法，绘制另一个子AP元素并插入图片，此时的页面效果如图13-15所示。

978-7-111-40982-3-Chapter13-53.jpg

图13-14 页面效果

978-7-111-40982-3-Chapter13-54.jpg

图13-15 嵌套AP元素后的效果

978-7-111-40982-3-Chapter13-55.jpg在AP元素show中嵌套一个AP元素，单击属性面板上的“居中对齐”按钮978-7-111-40982-3-Chapter13-56.jpg，然后选择“表单”插入面板上的“表单”按钮插入一张表单。

978-7-111-40982-3-Chapter13-57.jpg将光标定位在表单中，插入一个两行一列的表格，表格宽度为300像素，边框粗细为0。选中表格，在属性面板上的“对齐”下拉列表中选择“居中对齐”。

978-7-111-40982-3-Chapter13-58.jpg将光标定位在第一行单元格中，设置单元格内容水平对齐方式和垂直对齐方式均为“居中”，然后在单元格中输入文本“参赛报名表”。在属性面板上的“目标规则”下拉列表中选择“新CSS规则”，然后单击“编辑规则”按钮，在弹出的“新建CSS规则”对话框中设置选择器类型为“类”，选择器名称为.fontstyle，单击“确定”按钮打开规则定义对话框。设置字体为“华文行楷”，字体大小为24，且加粗。

978-7-111-40982-3-Chapter13-59.jpg将光标定位在第二行的单元格中，单击右键，执行“表格”|“拆分单元格”命令，将单元格折分成8行。选中拆分后的前7行单元格，在属性面板上设置水平对齐方式为“左对齐”，垂直对齐方式为“居中”，高度为30。然后在单元格中插入文本、文本域和文本区域，如图13-16所示。

978-7-111-40982-3-Chapter13-60.jpg

图13-16 插入表单对象

978-7-111-40982-3-Chapter13-61.jpg将第8行拆成两列，在第一列单元格中执行“插入”|“表单”|“按钮”命令，选中插入的按钮后，在属性面板中设置按钮名称为submit，值为“提交”，动作为“提交表单”。

978-7-111-40982-3-Chapter13-62.jpg将光标定位在第二列单元格中，执行“插入”|“表单”|“按钮”命令，选中插入的按钮后，在属性面板中设置按钮名称为reset，值为“重置”，动作为“重设表单”。

978-7-111-40982-3-Chapter13-63.jpg在最后一行表格中输入“注：请将宠物照片发送到”，然后选择“插入”|“电子邮件链接”命令，打开“电子邮件链接”对话框，在“文本”后输入“我们的邮箱”，然后键入邮箱地址，单击“确定”。

至此，AP元素Show中的内容布局完成，此时的效果图如图13-17所示。将光标移动到“我们的邮箱”上时显示为手形，表明其为链接文字。

接下来的步骤用于显示/隐藏AP元素，并设置状态栏文本。

978-7-111-40982-3-Chapter13-64.jpg选中“宠物Show”按钮，执行“窗口”|“行为”命令打开“行为”面板。单击“行为”面板上的978-7-111-40982-3-Chapter13-65.jpg按钮，在弹出菜单中执行“显示-隐藏元素”命令。在弹出对话框中选中AP元素“content”，单击“隐藏”，然后单击“确定”按钮。为刚绑定的行为选择OnClick事件。

978-7-111-40982-3-Chapter13-66.jpg

图13-17 “爱宠Show”页面效果

978-7-111-40982-3-Chapter13-67.jpg选中“宠物Show”按钮，单击“行为”面板上的978-7-111-40982-3-Chapter13-68.jpg按钮，在弹出菜单中执行“显示-隐藏元素”命令。在弹出对话框中选中AP元素“Show”，单击“显示”，然后单击“确定”按钮。为刚绑定的行为选择OnClick事件。

978-7-111-40982-3-Chapter13-69.jpg选中“宠物市场”按钮，执行“窗口”|“行为”命令打开行为面板。单击行为面板上的978-7-111-40982-3-Chapter13-70.jpg按钮，在弹出菜单中执行“显示-隐藏元素”命令。在弹出对话框中选中AP元素“content”，单击“显示”，然后单击“确定”按钮，为刚绑定的行为选择OnClick事件。

978-7-111-40982-3-Chapter13-71.jpg选中“宠物市场”按钮，单击行为面板上的978-7-111-40982-3-Chapter13-72.jpg按钮，在弹出菜单中执行“显示-隐藏元素”命令。在弹出对话框中选中AP元素“Show”，单击“隐藏”，然后单击“确定”按钮，为刚绑定的行为选择OnClick事件。

978-7-111-40982-3-Chapter13-73.jpg选中“宠物市场”按钮，单击行为面板上的978-7-111-40982-3-Chapter13-74.jpg按钮，在弹出菜单中执行“设置文本”|“设置状态栏文本”命令。在弹出对话框中键入消息内容“欢迎光临iDog宠物市场！”。然后单击“确定”按钮，为刚绑定的行为选择OnMouseOver事件。

978-7-111-40982-3-Chapter13-75.jpg选中“宠物Show”按钮，单击行为面板上的978-7-111-40982-3-Chapter13-76.jpg按钮，在弹出菜单中执行“设置文本”|“设置状态栏文本”命令。在弹出对话框中键入消息内容“欢迎参加至IN狗狗Show选美大赛！”，然后单击“确定”按钮，为刚绑定的行为选择OnMouseOver事件。

978-7-111-40982-3-Chapter13-77.jpg重复以上步骤处理其他按钮。

提示：可以把已经编辑好的AP元素隐藏起来，以方便当前AP元素的编辑。

978-7-111-40982-3-Chapter13-78.jpg选中AP元素logo中的图像，单击行为面板上的978-7-111-40982-3-Chapter13-79.jpg按钮，在弹出菜单中执行“设置文本”|“设置状态栏文本”命令，在弹出对话框中输入“欢迎光临iDog爱犬联盟宠物网！”。然后单击“确定”按钮，为刚绑定的行为选择OnLoad事件。

978-7-111-40982-3-Chapter13-80.jpg在AP元素面板中，将AP元素content设为显示，隐藏AP元素Show。

至此，网站首页和“宠物Show”对应的页面制作完成。保存文件之后按F12键可以在浏览器中预览页面效果。读者可以参照本例的制作步骤完成其他导航按钮对应的链接页面。

免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。

我要反馈

有关Dreamweaver CS6中文版标准实例教程的文章