网设计与制作之-框架结构_第1页
网设计与制作之-框架结构_第2页
网设计与制作之-框架结构_第3页
网设计与制作之-框架结构_第4页
网设计与制作之-框架结构_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。我们画一张示意图来进行讨论。第港城芾B第港城芾BWWW.TH7.CM■M匚工二।,匚BlhtmAB这是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页儿卜加。右边命名为B，指向的是一个网页B.htm。下面我们就来从头开始制作一个框架。上方固定上方固定,下方固定上方固定，右例俄套上方固定，左测嵌套下方固定下方固定，右恻嵌套下方固定.左何嵌E右州固定右恻囿定，上方幌建右Ml固定，下方嵌套垂直推分1上方固定上方固定,下方固定上方固定，右例俄套上方固定，左测嵌套下方固定下方固定，右恻嵌套下方固定.左何嵌E右州固定右恻囿定，上方幌建右Ml固定，下方嵌套垂直推分1、点“文件”菜单〉新建，弹出“新建文档”对话框如下图:常规模版类别槌架集茎本贯动/页横柜页耳性CSS群式表板架集页面建计CSS）贞囱设计页面谀汁（有辅助功能的了□□□□□□□□□□□□□□□左恻密定左例固定.上方嵌套左恻固定.下方微言水平振分小国定的左韧娠架垂直折分的桁述大页

卷用架或在插入栏＞布局＞选”框架：左框架"如下图:文件理）编辑查看⑪插入（X）修改迪）文布局/BB文件理）编辑查看⑪插入（X）修改迪）文布局/BB蔡nwy.w.v.-.标推扩展布局■lacro>e(Drea>Teaver2004-［无标题文档(UntitledFra>eset-9DreamweaverMX2004生成一个空白的框架页面，如下图:2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：1^1皿好1^，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。

3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是个框架结构文件。我们按照惯例都命名为index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）虚线笼罩在右边就是保存框架中右边网页。（如下图）

虚线笼罩在左边就是保存框架中左边的网页：（如下图）三个页面保存完毕。

4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。（如下图）6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。更多Dreamweaver教程请继续访问建站学的Dreamweaver教程专区。实验七框架结构【实验目的】：通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。t实验要求】：.掌握应用框架设计网页布局的方法；.掌握创建、编辑框架网页及设置框架属性的方法；.掌握链接框架网页的方法。

【基本操作】创建框架结构：在插入面板中找到布局选项，在其中选择下图所示的图标，并选择相应的框架结构选择框架窗口出帮助凹4插入9-4雇性®Ctrl-FZCtrl-H=3।匚谢样式©Shift-H=115层①F214行为回Shift-H=3- 代码片断西Shift-H=91参考⑤Shift-H=l数据库⑥Ctrl+Shift-H=10绑定伊Ctrl-FlO服务器行为⑪Ctrl-H=9蛆件囱Ctrl-H=7文件⑤F8资源®FU4标签检查器①F9结果因F7历史记录但iShift好1口Shift-H=21）首先从“窗口”菜单中打开“框架”面板2）然后在“框架”面板中选择某一个框架，如下图所示

添加网页内容选择某一框架后，点击“属性”-“源文件”以设定框架的网页t实验内容】：I创建一个左侧框架页，并在相应的框架中添加FrameA和FrameB两个网页，构成如下图所示的网页要求：1）设定LeftFrame的宽为400像素2）设定两个框架均出现滚动条II创建一个如下图所示的三栏框架页，并在相应的框架中添加FrameA、FrameB和

FrameC三个网页，构成如下图所示的网页。1）三栏分别命名为LeftFramgMidFrame、RightFrame2）三栏的宽度为200像素、300像素、504像素操作步骤：1）创建一个左侧框架网页，选定整个框架之后（选定整个框架参见P110），点击切换到拆分视图，将Frameset标记符中的Cols属性修改为：200，300，*（请注意切换到英文状态下输入）<framesetrows="*"cols="200,300,*“>2）分别在“框架”面板中选择相应的框架，插入相应的网页III框架网页中的超级链接要求：1）创建左侧框架网页

2）在左侧框架中设定三个超级链接，并链接对应的网页文件。网页将在MainFrame显示。默认显示“2004年经典对白”3）左侧框架背景为灰色4）框架集需要显示边框，宽度为3象素IV利用已有网页制作框架网页常规设置右边网页客户服势中心论坛日志音理初始信息设置常规设置右边网页客户服势中心论坛日志音理初始信息设置论坛管理盥＞新浪网

9jn&.

成都守阵雨首页I新闻财姓I娱乐I宽频I女性论坛管理盥＞新浪网

9jn&.

成都守阵雨首页I新闻财姓I娱乐I宽频I女性I房产I旅游I游戏I军事I论坛I企业I短信爱问I体育科技I音乐Ity|育儿|京居|法治|星座|上海|圈子|城市|彩铃”邮箱I博客手机I国库I理财I饮食I汽车I名品I教育I广东I高尔夫I黄页I彩信天气I播客I数码I读书I家电I健康IF1I商城IU匚I搜索IiGweI分类I聊天和弋〜1FIT公园环抱丽都东靖褐石封顶了! 万科板楼50万起售半山别墅培中华御景・盛世国宅独栋总部集群 万城华府典藏公开望京公寓的新交通银行iA股专栏I关闭广注册通行证I邮箱用户名鳖K新闻I体育IWBA|娱乐|明星|财经|科技|汽车|手机|宜人|旅游|游我|探索|图片|，弼易NetEase3G邮箱军事|奥运|英超|电卸|商业|证券|基金|车型|数码|时尚|情爱|招聃|拍卖|杂志|论坛版面添加I管理

论坛权限管理

合并论坛数据

更新论坛数据联盟论坛添加I管理

发布论坛公告I管理

论坛门派营理隐私保护版权所有DCopyright2003吉林伍陆柒扬股份有限公司要求：按照样张所示，利用index文件夹中提供的四个网页，组成如图所示的框架网页【参考习题】1、创建一个顶部框架，TopFrame中显示新浪的首页，MainFrame显示163的首页。两个框架需要显示滚动条，显示框架边框。效果如下图注册通行证登录名| 密码| |免费邮箱二］登录|忘记密码免费邮箱VIP邮箱企业邮箱设为首页2、利用素材中的163、sina的图片制作如下的框架网页。框架本身就是一个网页文件，而所谓的导航（目录）和正文也都是另外独立的网页文件一一也就是说，一个框架一般至少需要3个网页文件组成。你用什么软件编写的？注意退出时的保存提示。比如一个简单的目录框架网页名为INDEX.HTM，一般都包含left.ht（左边导航目录）和MAIL.HTM（右边主体内容）部分INDEX.HTM网页关键代码应为<framesetcols="150,*“><framename="contents"target="main'Src="left.htm”><framename="main"src="main.htm”><noframes><body>框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面,作为框架结构的一个子框架的内容给整个网站公用。一个框架结构有两部分网页文件构成：

框架作好00）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。框架集下加0050口：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。一、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。1、使用预制框架集（1）、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。标准布局06.html布局▼标准布局06.html布局▼口口图口左侧框架□］右侧框架m顶部框架□底部框架乌下方和嵌套的左侧框架□下方和嵌套的右侧框架口左侧和嵌套的下方框架口右侧和嵌套的下方框架□上方和下方框架旧左侧和嵌套的顶部框架Eli右侧和嵌套的上方框架顶部和浇套的左侧框架DI顶部和浇套的左侧框架DI上方和嵌套的右幽框架（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的框架后，在目标下拉菜单中，还会出现021演血00、leftFrame、topFrame选项：mainFrame放到名为mainFrame的框架中。leftFrame放到名为leftFrame的框架中。topFrame放到名为topFrame的框架中。我做了一个HTML文件，是Frame结构的，左边是超链接，但是链接的是一个网页文件'1我想点击该链接后，网页文件'打开的网页'出现在右边，该怎么写？注意：超链接的是一个网页文件”并非超链接地址”（可以用Javascript能不能详细一点啊？我的左边页面写的是：<ahref=〃e:\Web\1.html〃target=〃right〃>aaaaa</a><ahref=〃e:\Web\2.html〃>bbbbbb</a>如果用JS怎么写？麻烦看清楚啊！我的a链接的不是一个超链接，实际上是一个文件，怎么还回答超链接，超链接的target你们不用说我都会。真是无语了！垂直分栏<html><framesetcols="25%,50%,25%”><framesrc="frame_a.htm”><framesrc="frame_b.htm”><framesrc="frame_c.htm”></frameset></html>水平分栏<html><framesetrows="25%,50%,25%”><framesrc="frame_a.htm”><framesrc="frame_b.htm”><framesrc="frame_c.htm”></frameset></html>如何使用<noframes>标签：<html><framesetcols="25%,50%,25%”><framesrc="frame_a.htm”><framesrc="frame_b.htm”><framesrc="frame_c.htm”><noframes><body>Yourbrowserdoesnothandleframes!</body></noframes></frameset></html

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论