学生实验报告
广东科贸职业学院学生实验报告
姓名邝之泉 学号 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小时内删除。
发表评论