网页设计与制作之——框架结构

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

框架是什么,框架就好比我们的骨骼,支撑着整个网页,如果一个网页没了框架,那么就感觉像一盘散沙,因此为了更好的实现网页的效果,我们就要学会给网页制作一个框架,为了更好的理解什么是框架。我们画一张示意图来进行讨论。

这是一个左右型的框架,由三个网页文件组成的。首先外部的框架是一个文件,图中我们用index.htm命名。框架中左边命名为A,指向的是一个网页A.htm。右边命名为B,指向的是一个网页B.htm。

下面我们就来从头开始制作一个框架。

1、点“文件”菜单>新建,弹出“新建文档”对话框如下图:

或在插入栏>布局>选"框架:左框架"如下图:

Dreamweaver MX 2004生成一个空白的框架页面,如下图:

2、选择「窗口」菜单>“框架”,弹出“框架”面板如下图。从框架面板可知,系统对左右框架生成命名。左框架名为:leftFrame,右框架名为: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,*(请注意切换到英文状态下输入)

2)分别在“框架”面板中选择相应的框架,插入相应的网页

III 框架网页中的超级链接

要求:1)创建左侧框架网页

2)在左侧框架中设定三个超级链接,并链接对应的网页文件。网页将在MainFrame显示。默认显示“2004年经典对白”

3)左侧框架背景为灰色

4)框架集需要显示边框,宽度为3象素

Ⅳ利用已有网页制作框架网页

要求:按照样张所示,利用index文件夹中提供的四个网页,组成如图所示的框架网页

【参考习题】

1、创建一个顶部框架,TopFrame中显示新浪的首页,MainFrame显示163的首

页。两个框架需要显示滚动条,显示框架边框。效果如下图

2、利用素材中的16

3、sina的图片制作如下的框架网页。

框架本身就是一个网页文件,而所谓的导航(目录)和正文也都是另外独立的网页文件——也就是说,一个框架一般至少需要3个网页文件组成。

你用什么软件编写的?注意退出时的保存提示。

==

比如一个简单的目录框架网页名为INDEX.HTM,一般都包含left.htm(左边导航目录)和MAIL.HTM(右边主体内容)部分

INDEX.HTM网页关键代码应为

</p><p><body></p><p>框架是网页中经常使用的页面设计方式,框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域,实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作,让网站的结构更加清晰,而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一</p><p>个网站中页面相同的部分单独制作成一个页面,作为框架结构的一个子框架的内容给整个网站公用。</p><p>一个框架结构有两部分网页文件构成:</p><p>框架(Frame):框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。</p><p>框架集(Frameset):框架集也是一个网页文件,它将一个窗口通过行和列的方式分割成多个框架,框架的多少根据具体有多少网页来决定,每个框架中要显示的就是不同的网页文件。</p><p>一、创建框架</p><p>在创建框架集或使用框架前,通过选择“查看/可视化助理/框架边框”命令,使框架边框在文档窗口的设计视图中可见。</p><p>1、使用预制框架集</p><p>(1)、新建一个HTML文件,在快捷工具栏选择“布局”,单击“框架”按钮,在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。</p> </div> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/052230849.html" target="_blank">网页设计与制作第三章</a></li> <li><a href="/doc/0a10963146.html" target="_blank">80《动态网页设计与制作实用教程(第二版)》第11章PPT课件</a></li> <li><a href="/doc/0213858964.html" target="_blank">网页设计与制作使用教程第11章</a></li> <li><a href="/doc/2e10367128.html" target="_blank">网页设计与制作课件第11章</a></li> <li><a href="/doc/2b11855544.html" target="_blank">第10章网页设计与制作</a></li> <li><a href="/doc/372167876.html" target="_blank">《网页设计与制作》第三章:插入网页基本元素[1]</a></li> <li><a href="/doc/4e3955397.html" target="_blank">网页设计与制作各章习题</a></li> <li><a href="/doc/4610877339.html" target="_blank">网页设计与制作各章习题</a></li> <li><a href="/doc/5e876709.html" target="_blank">精品文档-新编Dreamweaver CS3动态网页设计与制作教程-第11章</a></li> <li><a href="/doc/5012445018.html" target="_blank">网页设计与制作教程第11章 光影世界前台页面</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0626406217.html" target="_blank">一切皆有可能 主题班会</a></li> <li><a href="/doc/0a26406218.html" target="_blank">变化点管理制度</a></li> <li><a href="/doc/0526406219.html" target="_blank">信念如磐 誓言无声——记奋战在一线的蚌埠公交集团“逆行者”们</a></li> <li><a href="/doc/0d2640622.html" target="_blank">奇台七中第三届校园文化艺术节活动方案(2014年5月)</a></li> <li><a href="/doc/0726406220.html" target="_blank">退休异地办理第三代社保卡流程</a></li> <li><a href="/doc/0126406221.html" target="_blank">小学守校合同书范例及多场景使用说明</a></li> <li><a href="/doc/0326406222.html" target="_blank">我崇拜的一个人六年级作文精选</a></li> <li><a href="/doc/0b26406223.html" target="_blank">大连市人民政府关于切实做好冬季城市供热工作的通知</a></li> <li><a href="/doc/0426406224.html" target="_blank">六年级下册语文作文我最崇拜的人</a></li> <li><a href="/doc/0626406225.html" target="_blank">《变化管理制度》</a></li> </ul> </div> </div> <script> var did = "d18635039"; var ext = 'doc'; var docId = '1q459cnr5vt6po1g26ixqv7r1rov70uh'; var totalPage = 20; const pageNum = '20'; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a>&nbsp;<a href="/tousu.html" target="_blank">侵权投诉</a> &nbsp;&copy;2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br> 本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈 </div> <script>foot()</script> </div> </body> </html>