基于层与框架网页布局实验设计与实现.pdfVIP

实验六层和框架

班级：网络班学号：112208206119：

【实验目的】

掌握网页中层和框架的操作和排版。

【实验要求】

1、掌握层的布局操作；

2、掌握框架的布局操作。

【实验内容与步骤】

用素材“练习案例-产品设计”进行练习层的基本操作,最终效果参考“练习案例-最终效果产品设

计”。

1、为“练习案例-产品设计”创建相应站点。

2、绘制一个层后，使用层【属性】面板中的【宽】和【高】将其大小设置为81*77，然后通过和

粘贴得到其它大小相同的层。

3、利用层【属性】面板的【背景颜色】，为文字层添加灰色背景。

4、利用文字【属性】面板的【大小】和【颜色】，设置上部文字大小12pt，颜色黑色；下部文字大

小为16pt，颜色白色。

利用素材“练习案例-美容与化妆”练习框架布局，最终效果参考“练习案例-最终效果美容与化

妆”。

1、为“练习案例-美容与化妆”创建相应站点。

2、新建“上方固定，左侧嵌套”结构的框架，将上方框架命名为top，左侧框架命名为left，右侧

框架命名为main。

3、设置框架top高度为307px，框架main的宽度为250px。

4、将框架集文件保存为index1.html后，为框架top设置源文件top.html，为框架left设置源文

件left.html，为框架main设置源文件caizhuang.html。

5、在文字“首页”上设置超级index.html，目标为_top；在文字“护肤宝典”上设置链

接文件为hufu.html，在文字“彩妆攻略”上设置文件为caizhuang.html，在文字“美发

达人”和“物语”上设置空，目标为_main。

6、在网页index.html中的文字“欢迎进入美容与化妆…”上设置文档index1.html，进

入主框架页面。

【实验心得与体会】

在这次实验中，我学到很多东西，加强了我的动手能力，加强了懂代

码的能力，并且培养了我的独立思考能力。这次实验，我掌握网页中层和框架

的操作和排版，掌握层和框架的布局操作。我把Web编程基础这门课的一些理

论知识与实践相结合，更加深刻了我对Web编程基础这门课的认识，巩固了我

的理论知识。