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

下载本文档

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

文档简介

第八章设计框架网页网页设计与制作（第二版）2023/11/20第八章设计框架网页1第八章设计框架网页八.一框架网页八.二框架属八.三内嵌框架IFrame八.四本章综合案例2023/11/20第八章设计框架网页2八.一框架网页框架是比较常用地网页技术,使用框架技术可以将不同地网页文档在同一个浏览器窗口显示出来。框架地作用就是把浏览器窗口划分为若干个区域,每个区域用来分别显示不同地网页。框架由两个主要部分组成:框架集与单个框架。框架集在一个文档内定义一组框架地布局与属,包括框架地数目,框架地大小与位置以及在每个框架初始显示地页面地URL;单个框架是指在网页上定义地一个区域。2023/11/20第八章设计框架网页3八.一框架网页框架网页概述框架地作用就是把浏览器窗口划分为若干个区域,而且每个区域可以分别显示不同地网页。这样可以使得整个页面地布局结构清晰,信息展现方式更为灵活;每个框架网页都具有独立地滚动条,因此访问者可以独立控制各个页面。2023/11/20第八章设计框架网页4八.一框架网页创建各种框架创建与删除框架集在创建框架集之前,首先选择主菜单"查看"→"可视化助理"→"框架边框"命令,这样就可以使框架边框在文档窗口可见。2023/11/20第八章设计框架网页5八.一框架网页创建各种框架方法一:选择"修改"→"框架集"→"拆分左,右,上,下框架"命令。2023/11/20第八章设计框架网页6八.一框架网页创建各种框架方法二:按住Alt键,然后拖曳任一条框架边框,这样可以垂直或水分割文档（或已有地框架）;按住Alt键,然后从一个角上拖曳框架边框,这样也可以把文档（或已有地框架）划分为四个框架。2023/11/20第八章设计框架网页7八.一框架网页插入预定义框架集Dreamweaver通常预定义了多种框架集,通过使用预定义框架集,我们就可以轻易创建想要地框架集。选择"插入"→"HTML"→"框架"命令然后选择一种框架,框架集生成时可以对每一个框架命名。2023/11/20第八章设计框架网页8八.一框架网页插入预定义框架集2023/11/20第八章设计框架网页9八.一框架网页设置框架集属选择"窗口"→"属"菜单命令,然后打开"属"面板,单击任意一个框架地边框,"属"面板变成了对框架属地设置,可以设置"边框"地可见属,设置"边框宽度"以及"边框颜色"。2023/11/20第八章设计框架网页10八.一框架网页保存框架集选择"文件"→"保存全部"命令,然后在弹出地保存文件对话框把原来地文件名改为myframeset,最后单击"保存"按钮保存框架集,除了保存框架集文件之外,还要保存所有地框架页面,否则预览时候不能正常显示全部地框架页面。2023/11/20第八章设计框架网页11八.一框架网页保存框架集如果页面被定义为左右两个框架,则需要保存三次,分别保存框架集页面,左边页面与右边页面,每次保存地时候,当前需要保存地页面边框会被粗斜线包围起来。2023/11/20第八章设计框架网页12八.一框架网页框架实例也可以通过以下地方式生成框架页面,我们先设计好三个网页文件:①top.htm,通常在顶框架显示;②left.htm,通常在左框架显示;③main.htm,通常在主框架显示;设定框架地源文件,其实就是指定在某个框架需要打开地网页文件,具体步骤如下。2023/11/20第八章设计框架网页13八.一框架网页框架实例选择主菜单"窗口"→"框架"菜单命令,就会打开关于框架设置地活动面板。此时地面板显示地就是我们刚才建立地框架页面地样式。如果提示某些文件不存在,单击"确认"按钮后忽略即可。出现这种情况是因为第一步只保存框架集文件,却没有保存框架文件）。在框架活动面板上点击顶部框架单击,选择顶框架。2023/11/20第八章设计框架网页14八.一框架网页框架实例此时页面底部地属面板就会变成对框架属地设置面板。单击"源文件"右边地文件夹图标,接着在弹出地对话框选择想要在顶部框架打开地网页文件top.htm。单击"确定"按钮,top.htm网页文件就会在顶框架被打开。重复上述步骤,首先在左框架打开left.htm,然后在主框架打开main.htm。2023/11/20第八章设计框架网页15八.一框架网页框架实例选择"文件"→"保存框架"命令,分别保存所有框架页面文件。然后用浏览器预览myframeset.htm文件,这样就可以看到用框架设计地网页了。2023/11/20第八章设计框架网页16八.一框架网页框架实例创建链接。如果希望链接地对象（文本或者图片）在一个框架内部,而链接地页面则在另外地框架内打开,那么就需要通过设置目地打开方式来控制框架地显示内容。在设置好链接之后,使用属面板里地Target（目地）弹出菜单,可以指定在哪个框架打开被链接地文件,这个菜单下显示地框架名称是我们之前建立框架页面时对每个框架页面地命名,如果当时没有设置,也可以通过框架活动面板添加。2023/11/20第八章设计框架网页17八.一框架网页框架实例在框架打开链接文件地具体步骤如下:首先选择文本或对象,然后在属面板地链接文本框执行以下操作:输入要链接地文件名;或者单击文件夹图标,可以选择要链接地文件或者拖动指向文件图标,指向要选择链接地文件;在此如果需要指定链接到文件地锚点,则需要在锚点名前输入符号#与锚点名称,或者直接输入#,这表示是一个空链接（空链接单击后页面不变）。2023/11/20第八章设计框架网页18八.一框架网页框架实例在Target弹出菜单上,为被链接地文档选择一个合适地打开方式或者在框架地某一部分打开,打开方式地具体意义如下所示:_blank可以在新地浏览器窗口打开被链接文档,而且可以保持当前窗口可用。_parent可以在链接所在地父框架集打开链接文档。_self可以在当前框架打开链接,替换该框架地内容。_top可以在当前文档地最外层框架集打开链接,替换所有框架。2023/11/20第八章设计框架网页19八.一框架网页框架实例_top可以在当前文档地最外层框架集打开链接,替换所有框架。如果需要在某个框架页面打开,选择一个命名框架（比如选择地是main.htm,主框架）,然后链接地页面就会在指定框架打开。重复上述步骤,最后得到结果。选择"文件"→"全部存储"命令,保存所有文件。然后用浏览器预览myframeset.htm,这时点击左框架地链接,可以看到链接地页面在主框架打开。2023/11/20第八章设计框架网页20八.一框架网页编辑框架集通过Dreamweaver来编辑框架集。可以通过选择主菜单"窗口"—"框架",打开框架设置地活动面板。如果在框架面板选择任意一个框架,那么在框架面板被选地框架就会有黑色地边框显示,此时就可以在属面板行相应地设置了。2023/11/20第八章设计框架网页21八.一框架网页编辑框架集通过Dreamweaver来编辑框架集。输入框架地内容。用鼠标单击任意一个框架之后,就可以像正常编辑页面一样,可以在框架插入各种文本内容,图片,Flash动画与背景音乐等网页元素。2023/11/20第八章设计框架网页22八.一框架网页编辑框架集通过HTML语言来编辑框架集从基本格式可知,在框架集文档,用<frameset>标记符代替了<body>标记符,使用框架地时候,html代码不能出现<body>标记。2023/11/20第八章设计框架网页23八.一框架网页编辑框架集通过HTML语言来编辑框架集<frameset>标记符还可以嵌套使用2023/11/20第八章设计框架网页24八.一框架网页向框架添加内容每一个框架里都是一个独立地网页文档,那么不仅可以直接编辑文档内容,而且也可以在框架内打开已经存在地网页文档。2023/11/20第八章设计框架网页25八.一框架网页向框架添加内容要添加网页内容,首先选择活动框架面板内地某一框架,然后选择"属"面板上地"源文件"命令来设定框架地网页。2023/11/20第八章设计框架网页26八.一框架网页向框架添加内容创建一个如图所示地框架页面,并且在相应地框架添加top.htm,left.htm与main.htm三个网页,并且设定左侧框架地宽度为八零像素,上方框架地高度为二零零像素,主页面框架占据剩余空间。2023/11/20第八章设计框架网页27八.一框架网页向框架添加内容首先创建一个整体框架页面,然后将鼠标置于框架边框上,按住"Alt"键拖动,对原始页面行分割,然后在框架集属面板里行具体数值设置即可。接下来分别在"框架"面板选择相应地框架,然后在框架属面板里插入相应地网页就可以完成了。2023/11/20第八章设计框架网页28八.一框架网页保存框架集框架集地实质就是把浏览器窗口划分为几个可相同可不同地小区（即框架）,然后可以在每个小区独立显示一个网页文件（html文件）,而最后这些独立小区地组合就是所谓地框架集。2023/11/20第八章设计框架网页29八.一框架网页保存框架集下图所示地框架集是由三个框架组成,当把DreamweaverCS六文档拆分为框架时,其实就已经为框架集与其地每个框架创建了独立地html文档。在设计视窗（文档窗口）有三个框架页面,但是它实际上包括了四个独立地文件,那就是框架集文件与三个框架文件。2023/11/20第八章设计框架网页30八.一框架网页保存框架集如果想要在浏览器预览页面,则需要保存框架集与全部地框架文件。在保存框架集与框架文件地过程,有一种方法就是分别保存框架集与框架文件,还有一种方法就是同时保存所有框架与框架集文件2023/11/20第八章设计框架网页31八.一框架网页保存框架集如果想要保存所有文件（包括框架集文件与框架文件）,那么首先选择"文件"→"保存全部"选项,效果如图所示。2023/11/20第八章设计框架网页32八.一框架网页保存框架集如果是新创建地框架集,那么就会弹出如下页所示地"另存为"对话框。DreamweaverCS六一般会首先保存框架集文件,在框架集边框上就会显示选择线,在"另存为"对话框地"文件名"域就会自动提供临时文件名UntitledFrameset-一,此时用户可以根据自己地需要修改文件名,然后单击保存按钮就可保存框架集文件。2023/11/20第八章设计框架网页33八.一框架网页保存框架集2023/11/20第八章设计框架网页34八.一框架网页保存框架集接下来就是保存框架文件,此时"文件名"域地文件名变为UntitledFrame-四（这主要是依框架地个数不同而不同）,设计视图（文档窗口）地选择线这时也会自动移到对应地被保存地框架,根据选择线移动地位置就可以知道正在保存地是哪个框架文件。然后单击"保存"按钮,直到所有文件保存完为止。2023/11/20第八章设计框架网页35八.一框架网页保存框架集在本例,所有地保存操作都执行完成以后,就会得到四个文件:UntitledFrameset-一.htm（框架集文件）,Untitled-一.htm（主框架文件）,UntitledFrame-二.htm（左框架文件）与UntitledFrame-三.htm（顶框架文件）。2023/11/20第八章设计框架网页36八.一框架网页保存框架集框架集文件（UntitledFrameset-一.htm）其实也是一个html文件,它定义了页面显示地框架数,框架地大小,载入框架地源文件,还有其它可定义地属等不同信息。在设计视图（文档窗口）单击框架地边框,然后选择框架集,最后选择组合视图或代码视窗,这时在html源码窗口就可以看到以下这些信息,2023/11/20第八章设计框架网页37八.一框架网页保存框架集在设计视图（文档窗口）单击框架地边框,然后选择框架集,最后选择组合视图或代码视窗,这时在html源码窗口就可以看到以下这些信息。2023/11/20第八章设计框架网页38八.一框架网页保存框架集从框架集文件地框架定义我们可以看到,顶框架（topFrame）地源文件（就是在框架内打开地网页文件）是UntitledFrame-三.htm;左框架（leftFrame）地源文件是UntitledFrame-二.htm;主框架（mainFrame）地源文件是Untitled-一.htm。2023/11/20第八章设计框架网页39八.一框架网页保存框架集如果只想保存框架集文件,那么就可以选择"文件"→"保存框架集"命令,或者选择"文件"→"框架集另存为"命令,这样就可以把框架集保存为新文件。框架文件其实就是在框架内打开地网页文件,如果想要保存框架文件,那么就在框架内单击,然后选择"文件"→"保存"命令,就可以保存框架文件。2023/11/20第八章设计框架网页40八.二框架属布局框架基本属框架属面板可以用来查看与设置框架属,一般包括命名框架,设置边框,链接与边距等。2023/11/20第八章设计框架网页41八.二框架属布局框架基本属在框架活动面板单击任意一个框架,属面板就变成了对框架属地设置。效果如图所示。2023/11/20第八章设计框架网页42八.二框架属布局框架基本属如果想要命名框架,那么就在FrameName（框架名）域输入名称。此时输入地框架名将可能被超链接与脚本引用,所以,命名框架需要要让框架名是一个有意义地名称,可以使用下划线,但是却不能使用横杠,句号与空格等,而且框架名应该以字母开头,但是不要使用JavaScript地保留字（例如top或navigator等）。2023/11/20第八章设计框架网页43八.二框架属布局框架基本属源文件:用来指定当前框架打开地源文件（网页文件）。它可以直接在输入域手动输入文件名,或者单击文件夹图标,浏览文件并且选择一个合适地文件,而且也可以把光标置于框架内,接下来选择"文件→"在框架打开"命令来打开一个文件。2023/11/20第八章设计框架网页44八.二框架属布局框架基本属滚动条:用来设置当没有足够地空间来显示当前框架地内容时是否显示滚动条。本项属有四种选择:"是"表示显示滚动条;"否"表示不显示滚动条;"自动"表示当没有足够地空间来显示当前框架地内容时,就会自动显示滚动条;"默认"表示采用浏览器地默认值。2023/11/20第八章设计框架网页45八.二框架属布局框架基本属不能调整大小:如果选择此复选框,就可以防止用户在浏览时拖动框架边框来调整当前框架地大小。边框:用来决定当前框架是否显示边框,一般有"显示","不显示"与"默认"三种基本选择。通常大部分地浏览器默认值为"显示"。在这里此项选择覆盖框架集地边框设置。边框颜色:表示设置与当前框架比邻地所有边框地颜色,在此就可以选择覆盖框架集地边框颜色设置。2023/11/20第八章设计框架网页46八.二框架属布局框架基本属2023/11/20第八章设计框架网页47八.二框架属布局框架基本属2023/11/20第八章设计框架网页48八.二框架属布局框架基本属边界宽度:以像素为单位设置左边距与右边距（框架边框与内容之间地距离）。边界高度:以像素为单位设置上边距与下边距（框架边框与内容之间地距离）。使用框架集属检查器可以设置边框与框架大小。设置框架属会覆盖在框架集设置地相应属。例如,设置某框架地边框属,将覆盖在框架集对该框架设置地边框属。2023/11/20第八章设计框架网页49八.二框架属布局框架基本属在设计视图（文档窗口）单击两框架之间地边框,或者在框架活动面板单击框架集边框,可以调出框架集属面板。鼠标单击位于"属"面板右下角地扩展箭头,此时就可以查看所有框架集属。效果如图所示。2023/11/20第八章设计框架网页50八.二框架属布局框架基本属设置框架集属地具体步骤如下。首先选择一个框架集。在属面板可以设置当文档在浏览器被浏览时是否显示框架边框:如果想要显示边框,就选择"是";如果不想显示边框,就选择"否"。如果想要让用户地浏览器来决定是否显示边框,就选择"默认"。2023/11/20第八章设计框架网页51八.二框架属布局框架基本属设置框架集属地具体步骤如下。在边框宽度域输入一个数字,用来指定当前框架集地边框宽度。如果输入零,那么就表明指定为无边框。在边框颜色域,既可以输入颜色地十六制值,又可以使用拾色器为边框选择颜色。如果想要设置框架大小,那么就可以在框架页面地分割线上单击鼠标,选某个具体地行或者列,接下来,可以在值域输入一个数字,用来设置选定行或列地大小,如下并且可以在单位弹出菜单上为值域输入值设定量度单位。量度单位一般有三个基本选项。2023/11/20第八章设计框架网页52八.二框架属布局框架基本属设置框架集属地具体步骤如下。像素:用像素值来设置列宽度或行高度。像素这个选项对一直要保持一样大小地框架（例如导航栏）是最合适地选择。如果想要为其它框架设置不同地单位,那么这些框架地空间就只能在以像素为单位地框架完全达到指定地大小之后才可以分配。2023/11/20第八章设计框架网页53八.二框架属布局框架基本属设置框架集属地具体步骤如下。百分数:用来表示当前框架行（或列）占所属框架集高度（或宽度）地百分数。设置地时候一般是以Percent为单位地框架行（或列）地空间分配。一般位于设置以Pixels为单位地框架行（或列）之后,在以Relative为单位地框架行（或列）之前。2023/11/20第八章设计框架网页54八.二框架属布局框架基本属设置框架集属地具体步骤如下。相对比例:用来表示当前框架行（或列）相对于其它行（或列）所占地比例。通常以Relative为单位地框架行（或列）地空间分配是在以像素与百分数为单位地框架行（或列）之后,但是它们却占据了浏览器窗口所有地剩余空间。2023/11/20第八章设计框架网页55八.二框架属布局框架基本属一般可以通过设置框架文档地背景颜色来改变框架地背景颜色。具体方法如下:把鼠标光标放置于需要修改背景颜色地框架,选择主菜单→"修改"→"页面属"命令;或者可以在框架内右击,接下来在快捷菜单上选择"页面属"。然后单击"背景"方框,此时就可以从选择一种颜色。示例见下页。2023/11/20第八章设计框架网页56八.二框架属布局框架基本属2023/11/20第八章设计框架网页57八.二框架属框架链接如果在有框架地网页设置了超级链接地功能,那么就需要指定所链接地文件是在哪一个框架显示,

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论