网页设计与制作之框架结构Word格式文档下载.docx
- 文档编号:15022103
- 上传时间:2022-10-26
- 格式:DOCX
- 页数:15
- 大小:640.44KB
网页设计与制作之框架结构Word格式文档下载.docx
《网页设计与制作之框架结构Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《网页设计与制作之框架结构Word格式文档下载.docx(15页珍藏版)》请在冰豆网上搜索。
mainFrame,当然您可以通过框架属性面板对框架重新命名,了解这一点非常重要。
创建超级链接时,要依据它正确控制指向的页面。
3、保存框架。
选择“文件”菜单点击“保存全部”。
系统弹出对话框。
这时,保存的是一个框架结构文件。
我们按照惯例都命名为index.htm。
保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。
(下图)
虚线笼罩在右边就是保存框架中右边网页。
(如下图)
虚线笼罩在左边就是保存框架中左边的网页:
三个页面保存完毕。
4、下面我们要实现按左边的超级链接,对应的页面出现在右边。
在左边的页面中做上超级链接。
指向一个已经存在的页面。
注意做好链接以后,要在目标栏中设置为mainFrame。
6、设置完毕,保存全部,按F12预览网页。
链接指向的页面出现在右边框架中。
7、重复以上步骤,把左框架所有的链接做完,一个简单的网站导航结构创建完成。
更多Dreamweaver教程请继续访问建站学的Dreamweaver教程专区。
实验七框架结构
【实验目的】:
通过本实验,使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。
【实验要求】:
1.掌握应用框架设计网页布局的方法;
2.掌握创建、编辑框架网页及设置框架属性的方法;
3.掌握链接框架网页的方法。
【基本操作】
创建框架结构:
在插入面板中找到布局选项,在其中选择下图所示的图标,并选择相应的框架结构
选择框架
1)首先从“窗口”菜单中打开“框架”面板
2)然后在“框架”面板中选择某一个框架,如下图所示
添加网页内容
选择某一框架后,点击“属性”-“源文件”以设定框架的网页
【实验内容】:
Ⅰ创建一个左侧框架页,并在相应的框架中添加FrameA和FrameB两个网页,构成如下图所示的网页
要求:
1)设定LeftFrame的宽为400像素
2)设定两个框架均出现滚动条
II创建一个如下图所示的三栏框架页,并在相应的框架中添加FrameA、FrameB和FrameC三个网页,构成如下图所示的网页。
1)三栏分别命名为LeftFrame、MidFrame、RightFrame
2)三栏的宽度为200像素、300像素、504像素
操作步骤:
1)创建一个左侧框架网页,选定整个框架之后(选定整个框架参见P110),点击切换到拆分视图,将Frameset标记符中的Cols属性修改为:
200,300,*(请注意切换到英文状态下输入)
<
framesetrows="
*"
cols="
200,300,*"
>
2)分别在“框架”面板中选择相应的框架,插入相应的网页
III框架网页中的超级链接
要求:
1)创建左侧框架网页
2)在左侧框架中设定三个超级链接,并链接对应的网页文件。
网页将在MainFrame显示。
默认显示“2004年经典对白”
3)左侧框架背景为灰色
4)框架集需要显示边框,宽度为3象素
Ⅳ利用已有网页制作框架网页
按照样张所示,利用index文件夹中提供的四个网页,组成如图所示的框架网页
【参考习题】
1、创建一个顶部框架,TopFrame中显示新浪的首页,MainFrame显示163的首页。
两个框架需要显示滚动条,显示框架边框。
效果如下图
2、利用素材中的163、sina的图片制作如下的框架网页。
框架本身就是一个网页文件,而所谓的导航(目录)和正文也都是另外独立的网页文件——也就是说,一个框架一般至少需要3个网页文件组成。
你用什么软件编写的?
注意退出时的保存提示。
==
比如一个简单的目录框架网页名为INDEX.HTM,一般都包含left.htm(左边导航目录)和MAIL.HTM(右边主体内容)部分
INDEX.HTM网页关键代码应为
framesetcols="
150,*"
>
framename="
contents"
target="
main"
src="
left.htm"
main.htm"
noframes>
body>
框架是网页中经常使用的页面设计方式,框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域,实现在一个浏览器窗口中显示多个HTML页面。
使用框架可以非常方便的完成导航工作,让网站的结构更加清晰,而且各个框架之间决不存在干扰问题。
利用框架最大的特点就是使网站的风格一致。
通常把一个网站中页面相同的部分单独制作成一个页面,作为框架结构的一个子框架的内容给整个网站公用。
一个框架结构有两部分网页文件构成:
框架(Frame):
框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。
框架集(Frameset):
框架集也是一个网页文件,它将一个窗口通过行和列的方式分割成多个框架,框架的多少根据具体有多少网页来决定,每个框架中要显示的就是不同的网页文件。
一、创建框架
在创建框架集或使用框架前,通过选择“查看/可视化助理/框架边框”命令,使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集
(1)、新建一个HTML文件,在快捷工具栏选择“布局”,单击“框架”按钮,在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
(2)、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动,直至合适的位置,这样顶部和嵌套的左侧框架就完成了。
2、鼠标拖动创建框架
(1)、新建普通网页,命名后将其打开。
(2)、把鼠标放到框架边框上,出现双箭头光标时拖拽框架边框,可以垂直或水平分割网页。
二、、保存框架
每一个框架都有一个框架名称,可以用默认的框架名称,也可以在属性面板修改名称,我们采用系统默认的框架名称topFrame(上方)、leftFrame(左侧)、mainFrame(右侧)。
选择菜单栏>
文件>
保存全部,将框架集保存为index.html,上方框架保存为07.html,左侧框架保存为08.html,右侧框架保存为09.html。
这个步骤虽然简单,但是很关键,只有将总框架集和各个框架保存在本地站点根目录下,才能保证浏览页面时显示正常。
三、编辑框架式网页
虽然框架式网页把屏幕分割成几个窗口,每个框架(窗口)中放置一个普通的网页,但是编辑框架式网页时,要把整个编辑窗口当作一个网页来编辑,插入的网页元素位于哪个框架,就保存在哪个框架的网页中。
框架的大小可以随意修改。
1、改变框架大小
用鼠标拖拽框架边框可随意改变框架大小。
2、删除框架
用鼠标把框架边框拖拽到父框架的边框上,可删除框架。
3、设置框架属性
设置框架属性时,必须先选中框架。
选择框架方法如下:
窗口>
框架,打开框架面板,单击某个框架,即可选中该框架。
在编辑窗口某个框架内按住Alt键并单击鼠标,即可选择该框架。
当一个框架被选择时,它的边框带有点线轮廓
2.设置框架属性
选中框架,在属性面板上可以设置框架属性:
框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。
需要注意的是:
1、框架是不可以合并的。
2、在创建链接时要用到框架名称,所以我们要很清楚的知道每个框架对应的框架名。
四、在框架中使用超级链接
在框架式网页中制作超级链接时,一定要设置链接的目标属性,为链接的目标文档指定显示窗口。
链接目标较远(其他网站)时,一般放在新窗口,在导航条上创建链接时,一般将目标文档放在另一个框架中显示(当页面较小时)或全屏幕显示(当页面较大时)。
“目标”下拉菜单中的选项:
*_blank放在新窗口中。
*_parent放到父框架集或包含该链接的框架窗口中。
*_self放在相同窗口中(默认窗口无须指定)。
*_top放到整个浏览器窗口并删除所有框架。
在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后,在目标下拉菜单中,还会出现mainFrame、leftFrame、topFrame选项:
*mainFrame放到名为mainFrame的框架中。
*leftFrame放到名为leftFrame的框架中。
*topFrame放到名为topFrame的框架中。
我做了一个HTML文件,是Frame结构的,左边是超链接,但是链接的是一个“网页文件”,我想点击该链接后,“网页文件”打开的“网页”出现在右边,该怎么写?
注意:
超链接的是一个“网页文件”,并非“超链接地址”。
(可以用Javascript)
能不能详细一点啊?
我的左边页面写的是:
ahref="
e:
\Web\1.html"
right"
aaaaa<
/a>
\Web\2.html"
bbbbbb<
如果用JS怎么写?
麻烦看清楚啊!
我的a链接的不是一个超链接,实际上是一个文件,怎么还回答超链接,超链接的target你们不用说我都会。
真是无语了!
垂直分栏
html>
25%,50%,25%"
<
framesrc="
frame_a.htm"
frame_b.htm"
frame_c.htm"
/frameset>
/html>
水平分栏
如何使用<
标签:
Yourbrowserdoesnothandleframes!
/body>
/noframes>
frame标签
∙<
frame>
标签定义了每个框架中放入什么文件。
下面这个例子中,有一个两列的分栏。
第一个被设置成窗口宽度的25%,第二个被设置成窗口宽度的75%。
页面“frame_a.htm”被放在第一个分栏中,“frame_b.htm”被放在第二个分栏中。
25%,7
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 框架结构