学生实验报告
广东科贸职业学院学生实验报告
姓名邝之泉 学号 34 系 信息工程系 专业 10软件2班 成绩
课程名称 网页制作 实验名称 框架和层 |
实验目的、要求 1、 理解网页制作中版面布局的概念。 2、 熟练掌握使用框架来进行版面布局的方法。 3、 掌握Iframe内嵌式框架的使用。 4、 理解层的概念。 5、 熟练掌握层在网页制作中层的使用方法和技巧。 |
主要设备、器材 电脑、Dreamweaver 软件 |
实验原理 框架和层都是网页版面布局的方法。使用框架(Frames)可以把网页分割成几个窗口，在每个窗口可打开一个独立的网页文件。 |
实验步骤/记录 一、建立一个左右分栏的框架。这是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，我们用index.htm命名；框架中左边命名为left，并将左边框架中打开的网页保存为A.htm；右边命名为maim，并将右边框架中打开的网页保存为是B.htm。然后在左边框架中建立一个5行一列的表格作为导航栏，每行内容为“网站首页、在线文章、图片欣赏、心情日记、我的像册”，分别链接到Y1.htm、Y2.htm、Y3.htm、Y4.htmY1.htm，Y5.htm文件。都在右边窗口打开。 操作步骤： 1、新建框架。点“文件”菜单>新建，弹出“新建文档”对话框：在插入栏>布局>选＂框架：左框架＂： Dreamweaver MX 2004生成一个空白的框架页面： 2、格式化框架和命名。选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。 3、保存框架集文件。用鼠标选中窗口中那条分隔线，选择“文件”菜单点击“保存框架页“，这时保存的是框架集文件，取名为index。 也可选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。 如何保存网页内容 4、保存框架（即在框架中新建或打开网页）。用鼠标点击左边框架中任一位置，选择“文件”菜单点击“保存框架页“，这时保存的是左边框架中打开的网页文件，取名为a。用鼠标点击右边框架中任一位置，选择“文件”菜单点击“保存框架页“，这时保存的是右边框架中打开的网页文件，取名为B。 也可选择“文件”菜单点击“保存全部”。系统弹出对话框。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构，保存的是一个框架结构文件，虚线笼罩在右边就是保存框架中右边网页。虚线笼罩在左边就是保存框架中左边的网页： 三个页面保存完毕。 5、在左边框架中输入导航栏内容。插入表5行1列表格，并输入内容，每行内容为“网站首页、在线文章、图片欣赏、心情日记、我的像册”。 6、实现按左边导航栏内容的超级链接，对应的页面出现在右边。在左边的页面中选择网站首页，在超级链接文件中打开Y1.htm文件。注意做好链接以后，要在目标栏中设置为main。 7、重复5和6步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。 8、保存全部，按F12预览网页。链接指向的页面出现在右边框架中。 二、Iframe的使用 1、插入Iframe框架： 单击“常用面板”中的“标签选择器”-----在打开的对话框左边区域展开“HTML标签”-------选中“页无素”-----在右边显示区域中选中“Iframe”标签， 2、Iframd中打开要显示的文件 单击“插入”-----在打开的对话框进行选择要在Iframd中显示的文件。其中源：是指在当前页面中所插入另一个网页文件名。 三、层的使用（略） 实验结果、分析与讨论 年 月 日 |
备注 |
指导教师签名： 年 月 日
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论