- 1、本文档共5页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
实验四框架层和行为的综合应用
实验四 框架、层和行为的综合应用
一、实验目的:
掌握框架布局网页的方法;
会在网页中插入层,并通过层的属性进行定位;
掌握行为的设置方法。
二、实验要求:
利用框架布局“上方框架”。
绘制层,并结合行为制作特效网页。
三、 实验内容:
框架布局案例“团立方商城”。
绘制层,并适当修改其属性。
添加行为“显示/隐藏层”。
添加行为“打开浏览器窗口”。
四、实践步骤:
新建本地站点,站点名称“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 打开浏览器窗口效果
您可能关注的文档
- 实践技能辅助检查之普通X线影像诊断五心脏增大临床实践技能考试.docx
- 实验1一VFP中项目管理器的建立及操作.doc
- 实验1UHFISO18000-6C操作.docx
- 实验1MATLAB入门参考.doc
- 实验1多元函数微分学基础实验.doc
- 实验1网络协议分析工具Wireshark的使用.doc
- 实验1网络协议分析工具Wireshark的使用最新完整版.doc
- 实验21基尔霍夫定律与电位的实验报告.doc
- 实验1速度随时间的变化规律实验探究.doc
- 实验1声音录制处理及Audition软件的使用.doc
- 10《那一年,面包飘香》教案.docx
- 13 花钟 教学设计-2023-2024学年三年级下册语文统编版.docx
- 2024-2025学年中职学校心理健康教育与霸凌预防的设计.docx
- 2024-2025学年中职生反思与行动的反霸凌教学设计.docx
- 2023-2024学年人教版小学数学一年级上册5.docx
- 4.1.1 线段、射线、直线 教学设计 2024-2025学年北师大版七年级数学上册.docx
- 川教版(2024)三年级上册 2.2在线导航选路线 教案.docx
- Unit 8 Dolls (教学设计)-2024-2025学年译林版(三起)英语四年级上册.docx
- 高一上学期体育与健康人教版 “贪吃蛇”耐久跑 教案.docx
- 第1课时 亿以内数的认识(教学设计)-2024-2025学年四年级上册数学人教版.docx
文档评论(0)