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

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