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

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。