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

下载本文档

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

文档简介

8第

8

章 设计框架网页2023-02-15第8章设计框架网页1网页设计与制作（第2版）第

8

章 设计框架网页2023-02-15第8章设计框架网页28.1

框架网页8.2

框架属性8.3 内嵌框架IFrame8.4

本章综合案例8.1

框架网页2023-02-15第8章设计框架网页3框架是比较常用地网页技术,使用框架技术可以将不同地网页文档在同一个浏览器窗口显示出来。框架

地作用就是把浏览器窗口划分为若干个区域,每个区域用来分别显示不同地网页。框架由两个主要部分

组成:框架集与单个框架。框架集在一个文档内定义一组框架地布局与属性,包括框架地数目,框架地大小与位置以及在每个框架初始显示地页面地URL;单个

框架是指在网页上定义地一个区域。8.1

框架网页2023-02-15第8章设计框架网页4框架网页概述框架地作用就是把浏览器窗口划分为若干个区域,而且每个区域可以分别显示不同地网页。这样可以使得整个页面地布局结构清晰,信息展现方式更为灵活;每个框架网页都具有独立地滚动条,因此访问者可以独立控制各个页面。8.1

框架网页创建各种框架创建与删除框架集在创建框架集之前,首先选择主菜单"查看"→"可视化助理"→"框架边框"命令,这样就可以使框架边框在文档窗口可见。2023-02-15第8章设计框架网页58.1

框架网页创建各种框架方法1:选择"修改"→"框架集"→"拆分左,右,上,下框架"命令。2023-02-15第8章设计框架网页68.1

框架网页2023-02-15第8章设计框架网页7创建各种框架方法2:按住Alt键,然后拖曳任一条框架边框,这样可以垂直或水平分割文档（或已有地框架）;按住Alt键,然后从一个角上拖曳框架边框,这样也可以把文档（或已有地框架）划分为4个框架。8.1

框架网页2023-02-15第8章设计框架网页8插入预定义框架集Dreamweaver通常预定义了多种框架集,通过使用预定义框架集,我们就可以轻易创建想要地框架集。选择"插入"→"HTML"→"框架"命令然后选择一种框架,框架集生成时可以对每一个框架命名。8.1

框架网页插入预定义框架集2023-02-15第8章设计框架网页98.1

框架网页设置框架集属性选择"窗口"→"属性"菜单命令,然后打开"属性"面板,单击任意一个框架地边框,"属性

"面板变成了对框架属性地设置,可以设置"边框"地可见属性,设置"边框宽度"以及"边框颜色"。2023-02-15第8章设计框架网页108.1

框架网页2023-02-15第8章设计框架网页11保存框架集选择"文件"→"保存全部"命令,然后在弹出地保存文件对话框把原来地文件名改为

myframeset,最后单击"保存"按钮保存框架集,除了保存框架集文件之外,还要保存所有地框架页面,否则预览时候不能正常显示全部地框架页面。8.1

框架网页保存框架集如果页面被定义为左右两个框架,则需要保存三次,分别保存框架集页面,左边页面与右边页面,每次保存地时候,当前需要保存地页面边框会被粗斜线包围起来。2023-02-15第8章设计框架网页128.1

框架网页2023-02-15第8章设计框架网页13框架实例也可以通过以下地方式生成框架页面,我们先设计好3个网页文件:①top.htm,通常在顶框架显示;②left.htm,通常在左框架显示;③main.htm,通常在主框架显示;设定框架地源文件,其实就是指定在某个框架需要打开地网页文件,具体步骤如下。8.1

框架网页框架实例选择主菜单"窗口"→"框架"菜单命令,就会打开关于框架设置地活动面板。此时地面板显示地就是我们刚才建立地框架页面地样式。如果提示某些文件不存在,单击"确认"按钮后忽略即可。出现这种情况是因为第一步只保存框架集文件,却没有保存框架文件）。2■023-02在-15框架活动面板上第8章点设计框击架网页顶部框架单击,选择148.1

框架网页框架实例此时页面底部地属性面板就会变成对框架属性地设置面板。单击"源文件"右边地文件夹图标,接着在弹出地对话框选择想要在顶部框架打开地网页文件top.htm。单击"确定"按钮,top.htm网页文件就会在顶框架被打开。2■023-02-1重5复上述步骤,首第8章先设计在框架网页左框架打开left.ht15

m,8.1

框架网页框架实例选择"文件"→"保存框架"命令,分别保存所有框架页面文件。然后用浏览器预览myframeset.htm文件,这样就可以看到用框架设计地网页了。2023-02-15第8章设计框架网页168.1

框架网页框架实例创建链接。如果希望链接地对象（文本或者图片）在一个框架内部,而链接地页面则在另外地框架内打开,那么就需要通过设置目的打开方式来控制框架地显示内容。在设置好链接之后,使用属性面板里地Target（目的）弹出菜单,可以指定在哪个框架打开被链接地2023-0文2-15

设示计框架网地页件,这个菜单下显第显8章

框架名称是我们之178.1

框架网页框架实例在框架打开链接文件地具体步骤如下:首先选择文本或对象,然后在属性面板地链接文本框执行以下操作:输入要链接地文件名;或者单击文件夹图标,可以选择要链接地文件或者拖动指向文件

图标,指向要选择链接地文件;在此如果需要指定链接到文件地锚点,则需要在锚点名前2023-0输2-15入符号#与锚点名第名8章设称计框架网,页或者直接输入#,这188.1

框架网页框架实例在Target弹出菜单上,为被链接地文档选择一个合适地打开方式或者在框架地某一部分打开,打开方式地具体意义如下所示:_blank可以在新地浏览器窗口打开被链接文档,而且可以保持当前窗口可用。_parent可以在链接所在地父框架集打开链接文档。2■023-02_-15

self可以在当前第框8章设架计框架网打页开链接,替换该框19架8.1

框架网页框架实例_top可以在当前文档地最外层框架集打开链接,替换所有框架。如果需要在某个框架页面打开,选择一个命名框架（比如选择地是main.htm,主框架）,然后链接地页面就会在指定框架打开。重复上述步骤,最后得到结果。选择"文件"→"全部存储"命令,保存所有文2023-0件2-15。然后用浏览器第8章预设计框览架网页myframeset.htm,208.1

框架网页编辑框架集通过Dreamweaver来编辑框架集。可以通过选择主菜单"窗口"—"框架",打开框架设置地活动面板。如果在框架面板选择任意一个框架,那么在框架面板被选地框架就会有黑色地边框显示,此时就可以在属性面板进行相应地设置了。2023-02-15第8章设计框架网页218.1

框架网页2023-02-15第8章设计框架网页22编辑框架集通过Dreamweaver来编辑框架集。输入框架地内容。用鼠标单击任意一个框架之后,就可以像正常编辑页面一样,可以在框架插入各种文本内容,图片,Flash动画与背景音乐等网页元素。8.1

框架网页编辑框架集通过HTML语言来编辑框架集从基本格式可知,在框架集文档,用<frameset>标记符代替了<body>标记符,

使用框架地时候,html代码不能出现<body>标记。2023-02-15第8章设计框架网页238.1

框架网页编辑框架集通过HTML语言来编辑框架集<frameset>标记符还可以嵌套使用2023-02-15第8章设计框架网页248.1

框架网页2023-02-15第8章设计框架网页25向框架添加内容每一个框架里都是一个独立地网页文档,那么不仅可以直接编辑文档内容,而且也可以在框架内打开已经存在地网页文档。8.1

框架网页向框架添加内容要添加网页内容,首先选择活动框架面板内地某一框架,然后选择"属性"面板上地"源文件"命令来设定框架地网页。2023-02-15第8章设计框架网页268.1

框架网页向框架添加内容创建一个如图所示地框架页面,并且在相应地框架添加top.htm,left.htm与main.htm三个网页,并且设定左侧框架地宽度为80像素,上方框架地高度为200像素,主页面框架占据剩余空间。2023-02-15第8章设计框架网页278.1

框架网页2023-02-15第8章设计框架网页28向框架添加内容首先创建一个整体框架页面,然后将鼠标置于框架边框上,按住"Alt"键拖动,对原始页面进行分割,然后在框架集属性面板里进行具体数值设置即可。接下来分别在"框架"面板选择相应地框架,然后在框架属性面板里插入相应地网页就可以完成了。8.1

框架网页2023-02-15第8章设计框架网页29保存框架集框架集地实质就是把浏览器窗口划分为几个可相同可不同地小区（即框架）,然后可以在每个小区独立显示一个网页文件（html文件）,而最后这些独立小区地组合就是所谓地框架集。8.1

框架网页保存框架集下图所示地框架集是由3个框架组成,当把

Dreamweaver

CS6文档拆分为框架时,其

实就已经为框架集与其地每个框架创建了独立地html文档。在设计视窗（文档窗口）有3个框架页面,但是它实际上包括了4个独立地文件,那就是框架集文件与3个框架文

件。2023-02-15第8章设计框架网页308.1

框架网页保存框架集如果想要在浏览器预览页面,则需要保存框架集与全部地框架文件。在保存框架集与框架文件地过程,有一种方法就是分别保存框架集与框架文件,还有一种方法就是同时保存所有框架与框架集文件2023-02-15第8章设计框架网页318.1

框架网页保存框架集如果想要保存所有文件（包括框架集文件与框架文件）,那么首先选择"文件"→"保存全部"选项,效果如图所示。2023-02-15第8章设计框架网页328.1

框架网页保存框架集如果是新创建地框架集,那么就会弹出如下页所示地"另存为"对话框。DreamweaverCS6一般会首先保存框架集文件,在框架集边框上就会显示选择线,在"另存为"对话框地"文件名"域就会自动提供临时文件名

UntitledFrameset-1,此时用户可以根据自己地需要修改文件名,然后单击保存按钮就2023-0可2-15

保存框架集文件第8章。设计框架网页338.1

框架网页保存框架集2023-02-15第8章设计框架网页348.1

框架网页保存框架集接下来就是保存框架文件,此时"文件名"域地文件名变为UntitledFrame-4（这主要是依框架地个数不同而不同）,设计视图（文档窗口）地选择线这时也会自动移到对应地被保存地框架,根据选择线移动地位置就可以知道正在保存地是哪个框架文件。然后单击"保存"按钮,直到所有文件保存完为2023-0止2-15。第8章设计框架网页358.1

框架网页保存框架集在本例,所有地保存操作都执行完成以后,就会得到4个文件:UntitledFrameset-1.htm（框架集文件）,Untitled-1.htm（主框架文件）,UntitledFrame-2.htm（左框架文件）与UntitledFrame-

3.htm（顶框架文件）。2023-02-15第8章设计框架网页368.1

框架网页保存框架集框架集文件（UntitledFrameset-1.htm）其实也是一个html文件,它定义了页面显示地框架数,框架地大小,载入框架地源文件,还有其它可定义地属性等不同信息。在设

计视图（文档窗口）单击框架地边框,然后选择框架集,最后选择组合视图或代码视窗,这时在html源码窗口就可以看到以下这些2023-0信2-15息,第8章设计框架网页378.1

框架网页保存框架集在设计视图（文档窗口）单击框架地边框,然后选择框架集,最后选择组合视图或代码视窗,这时在html源码窗口就可以看到以下这些信息。2023-02-15第8章设计框架网页388.1

框架网页2023-02-15第8章设计框架网页39保存框架集从框架集文件地框架定义我们可以看到,顶框架（topFrame）地源文件（就是在框架内打开地网页文件）是UntitledFrame-3.htm;左框架（leftFrame）地源文件是

UntitledFrame-2.htm;主框架（mainFrame）地源文件是Untitled-1.htm。8.1

框架网页保存框架集如果只想保存框架集文件,那么就可以选择"文件"→"保存框架集"命令,或者选择"文件"→"框架集另存为"命令,这样就可以把框架集保存为新文件。框架文件其实就是在框架内打开地网页文件,如果想要保存框架文件,那么就在框架内单击,然后选择"文件"→"保存"命令,就可以2023-0保2-15存框架文件。第8章设计框架网页408.2

框架属性2023-02-15第8章设计框架网页41布局框架基本属性框架属性面板可以用来查看与设置框架属性,一般包括命名框架,设置边框,链接与边距等。8.2

框架属性布局框架基本属性在框架活动面板单击任意一个框架,属性面板就变成了对框架属性地设置。效果如图所示。2023-02-15第8章设计框架网页428.2

框架属性布局框架基本属性如果想要命名框架,那么就在Frame

Name（框架名）域输入名称。此时输入地框架

名将可能被超链接与脚本引用,所以,命名框架需要要让框架名是一个有意义地名称,可以使用下划线,但是却不能使用横杠,句号与空格等,而且框架名应该以字母开头,但是不要使用Javascript地保留字（例如top或2023-0n2-15avigator等）。第8章设计框架网页438.2

框架属性布局框架基本属性源文件:用来指定当前框架打开地源文件（网页文件）。它可以直接在输入域手动

输入文件名,或者单击文件夹图标,浏览文件并且选择一个合适地文件,而且也可以把光标置于框架内,接下来选择"文件→"在框架打开"命令来打开一个文件。2023-02-15第8章设计框架网页448.2

框架属性布局框架基本属性滚动条:用来设置当没有足够地空间来显示当前框架地内容时是否显示滚动条。本项属性有4种选择:"是"表示显示滚动条;"否"表示不显示滚动条;"自动"表示当没有足够地空间来显示当前框架地内容时,就会自动显示滚动条;"默认"表示采用浏览器地默认值。2023-02-15第8章设计框架网页458.2

框架属性布局框架基本属性不能调整大小:如果选择此复选框,就可以防止用户在浏览时拖动框架边框来调整当前框架地大小。边框:用来决定当前框架是否显示边框,一般有"显示","不显示"与"默认"3种基本选择。通常大部分地浏览器默认值为"显示"。在

这里此项选择覆盖框架集地边框设置。2■023-02边-15

设与计框架网当页框颜色:表示设第置8章

前框架比邻地所有468.2

框架属性布局框架基本属性2023-02-15第8章设计框架网页478.2

框架属性布局框架基本属性2023-02-15第8章设计框架网页488.2

框架属性布局框架基本属性边界宽度:以像素为单位设置左边距与右边距（框架边框与内容之间地距离）。边界高度:以像素为单位设置上边距与下边距（框架边框与内容之间地距离）。使用框架集属性检查器可以设置边框与框架大小。设置框架属性会覆盖在框架集设置地相应属性。例如,设置某框架地边框属2023-0性2-15

设对计框架网该页,将覆盖在框架集第集8章

框架设置地边框属498.2

框架属性布局框架基本属性在设计视图（文档窗口）单击两框架之间地边框,或者在框架活动面板单击框架集边框,可以调出框架集属性面板。鼠标单击位于"属性"面板右下角地扩展箭头,此时就可以查看所有框架集属性。效果如图所示。2023-02-15第8章设计框架网页508.2

框架属性2023-02-15第8章设计框架网页51布局框架基本属性设置框架集属性地具体步骤如下。首先选择一个框架集。在属性面板可以设置当文档在浏览器被浏览时是否显示框架边框:如果想要显示边框,就选择"是";如果不想显示边框,就选择"否"。如果想要让用户地浏览器来决定是否显示边框,就选择"默认"。8.2

框架属性布局框架基本属性设置框架集属性地具体步骤如下。在边框宽度域输入一个数字,用来指定当前框架集地边框宽度。如果输入0,那么就表明指定为无边框。在边框颜色域,既可以输入颜色地十六进制值,又可以使用拾色器为边框选择颜色。如果想要设置框架大小,那么就可以在框架页面地分割线上单击鼠标,2023-0选2-15某个具体地行或第8章者设计框列架网页,接下来,可以在值5域28.2

框架属性2023-02-15第8章设计框架网页53布局框架基本属性设置框架集属性地具体步骤如下。像素:用像素值来设置列宽度或行高度。像素这个选项对一直要保持一样大小地框架（例如导航栏）是最合适地选择。如果想要为其它框架设置不同地单位,那么这些框架地空间就只能在以像素为单位地框架完全达到指定地大小之后才可以分配。8.2

框架属性2023-02-15第8章设计框架网页54布局框架基本属性设置框架集属性地具体步骤如下。百分数:用来表示当前框架行（或列）占所属框架集高度（或宽度）地百分数。设置地时候一般是以Percent为单位地框架行（或列）地空间分配。一般位于设置以

Pixels为单位地框架行（或列）之后,在以

Relative为单位地框架行（或列）之前。8.2

框架属性2023-02-15第8章设计框架网页55布局框架基本属性设置框架集属性地具体步骤如下。相对比例:用来表示当前框架行（或列）相对于其它行（或列）所占地比例。通常以

Relative为单位地框架行（或列）地空间分配是在以像素与百分数为单位地框架行（或列）之后,但是它们却占据了浏览器窗口所有地剩余空间。8.2

框架属性2023-02-15第8章设计框架网页56布局框架基本属性一般可以通过设置框架文档地背景颜色来改变框架地背景颜色。具体方法如下:把鼠标光标放置于需要修改背景颜色地框架,选择主菜单→"修改"→"页面属性"命令;或者可以在框架内右击,接下来在快捷菜单上选择"页面属性"。然后单击"背景"方框,此时就可以从选择一种颜色。示例见下页。8.2

框架属性布局框架基本属性2023-02-15第8章设计框架网页578.2

框架属性2023-02-15第8章设计框架网页58框架链接如果在有框架地网页设置了超级链接地

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

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

最新文档

评论

0/150

提交评论