实验四 框架、层和行为的综合应用.docVIP

实验四 框架、层和行为的综合应用 一、实验目的： 掌握框架布局网页的方法； 会在网页中插入层，并通过层的属性进行定位； 掌握行为的设置方法。 二、实验要求： 利用框架布局“上方框架”。 绘制层，并结合行为制作特效网页。 三、 实验内容： 框架布局案例“团立方商城”。 绘制层，并适当修改其属性。 添加行为“显示/隐藏层”。 添加行为“打开浏览器窗口”。 四、实践步骤： 新建本地站点，站点名称“Frame”，存放在“D:\SiteFrame\”下，导入所需素材。 新建框架集。选择菜单“文件”“新建”命令，类别选择“框架集”，框架集选择“上方固定”，单击“创建”按钮。在弹出的“框架标签辅助功能属性”对话框中，直接单击确定即可。 保存框架集和框架。单击框架集分割线，选中框架集，选择菜单“文件”“框架集另存为”命令保存框架集，名称为“index.html”，设置标题名称为“团立方商城”。分别定位光标在上方框架和下方框架进行保存，分别命名为“top.html”和“main.html”，标题名称分别为“top”和“main”。站点文件列表如图1所示。 图1 站点文件列表 4、设置框架集行高。选中框架集，在属性面板中设置行高“160px”。 5、设计“top.html”页面。 光标定位在top.框架中，选择属性面板中的“页面属性”，字体大小为“12px”，上边距为“0px”。 插入一个3行1列的表格，宽度为“700px”，表格背景颜色为“#ADDCED”，间距、填充和边框均为“0px”。 光标定位在“第一行”，在属性面板上设置高度为“56px”，背景图像为“image/88401.jpg”。 光标定位在“第二行”，插入图像“image/88402.jpg”。 光标定位在“第三行”，插入一个1行5列的表格，宽度100%，高度为“10px”，边框和填充均为“0px”，间距为“8px”，单元格背景颜色为“白色”。输入相应文本。最终效果如图2所示。 图2 第三行输入文本后效果 6、设计“main.html”页面。 光标定位在main框架中，选择属性面板中的“页面属性”，字体大小为“12px”，上边距为“0px”。 插入一个3行3列的表格，宽度为“700px”，表格背景颜色为“#ADDCED”，间距为“20px”，填充为“0px”。 设置每个单元格的背景颜色均为“白色”，在第一行和第二行中的每个单元格中插入一个单线表格，单线颜色为“#990000”，宽度和高度均为130px。 依次在每个单元格中（单线表格）插入相应图像，并设置每个单元格中图像水平方向“居中对齐”。在每张图像下方输入相应文字，并对“查看 收藏”设置为“加粗”，“购买”设置为加粗和红色。 合并第三行所有单元格。在第三行中插入一个2行1列的表格，宽度为“660px”，高度为“60px”，填充、间距和边框均为“0px”，背景颜色为“#302921”。在每一行中分别输入相应文字，文字颜色为“#A45D32”，加粗。 7、浏览器下预览效果。整体页面的最终效果如图3所示。 图3 最终页面效果图 添加“显示/隐藏层行为”。 光标定位在main框架中，绘制一个“层”，并拖动到适当位置，在属性面板中设置其宽度和高度均为“260px”。 在层中插入一张图像，如“88404.jpg”。 选中第二张图片，添加行为“显示/隐藏层”，设置如下图4所示。单击确定，设置事件为“onMouseOver”。 图4 设置层为显示 再次选中第二张图片，添加行为“显示/隐藏层”，设置如下图5所示。单击确定，设置事件为“onMouseOut”。 图5 设置层为隐藏 行为面板如图6所示。按F2键打开层面板，设置如下图7所示（注意眼睛为闭合状态）。 图6 行为面板设置行为后效果 图7 设置层默认为隐藏 浏览器下预览效果如图8所示，当鼠标放置在第二张图像上时，自动显示层，移开鼠标后，层被自动隐藏。其他图像可使用类似的方法分别设置“显示/隐藏层”行为。 图8 设置行为“显示/隐藏层”后效果图 添加“打开浏览器窗口”行为。 1）光标定位在main框架中，添加行为“打开浏览器窗口”，设置属性如图9所示，单击确定按钮。 图9 添加行为“打开浏览器窗口” 2）事件选择“onLoad”，如图10所示。 图10 添加行为事件 3）浏览器预览，当页面加载完成后，打开一个浏览器窗口，预览效果如图11所示。（注意：浏览器可能会自动阻止广告信息的页面，所以预览时可取消浏览器的阻止功能。） 图11 打开浏览器窗口效果