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

下载本文档

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

文档简介

第8章设计框架网页网页设计与制作（第2版）2026/7/9第8章设计框架网页1第8章设计框架网页8.1框架网页8.2框架属性8.3内嵌框架IFrame8.4本章综合案例2026/7/9第8章设计框架网页28.1框架网页框架是比较常用的网页技术，使用框架技术可以将不同的网页文档在同一个浏览器窗口中显示出来。框架的作用就是把浏览器窗口划分为若干个区域，每个区域用来分别显示不同的网页。框架由两个主要部分组成：框架集和单个框架。框架集在一个文档内定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL；单个框架是指在网页上定义的一个区域。2026/7/9第8章设计框架网页38.1框架网页框架网页概述框架的作用就是把浏览器窗口划分为若干个区域，而且每个区域可以分别显示不同的网页。这样可以使得整个页面的布局结构清晰，信息展现方式更为灵活；每个框架网页都具有独立的滚动条，因此访问者可以独立控制各个页面。2026/7/9第8章设计框架网页48.1框架网页创建各种框架创建和删除框架集在创建框架集之前，首先选择主菜单“查看“→“可视化助理”→“框架边框”命令，这样就可以使框架边框在文档窗口中可见。2026/7/9第8章设计框架网页58.1框架网页创建各种框架方法1：选择“修改”→“框架集”→“拆分左、右、上、下框架”命令。2026/7/9第8章设计框架网页68.1框架网页创建各种框架方法2：按住Alt键，然后拖曳任一条框架边框，这样可以垂直或水平分割文档（或已有的框架）；按住Alt键，然后从一个角上拖曳框架边框，这样也可以把文档（或已有的框架）划分为4个框架。2026/7/9第8章设计框架网页78.1框架网页插入预定义框架集Dreamweaver通常预定义了多种框架集，通过使用预定义框架集，我们就可以轻易创建想要的框架集。选择“插入”→“HTML”→“框架”命令然后选择一种框架，框架集生成时可以对每一个框架命名。2026/7/9第8章设计框架网页88.1框架网页插入预定义框架集2026/7/9第8章设计框架网页98.1框架网页设置框架集属性选择“窗口”→“属性”菜单命令，然后打开“属性”面板，单击任意一个框架的边框，“属性”面板变成了对框架属性的设置，可以设置“边框”的可见属性，设置“边框宽度”以及“边框颜色”。2026/7/9第8章设计框架网页108.1框架网页保存框架集选择“文件”→“保存全部”命令，然后在弹出的保存文件对话框中把原来的文件名改为myframeset，最后单击“保存”按钮保存框架集，除了保存框架集文件之外，还要保存所有的框架页面，否则预览时候不能正常显示全部的框架页面。2026/7/9第8章设计框架网页118.1框架网页保存框架集如果页面被定义为左右两个框架，则需要保存三次，分别保存框架集页面、左边页面和右边页面，每次保存的时候，当前需要保存的页面边框会被粗斜线包围起来。2026/7/9第8章设计框架网页128.1框架网页框架实例也可以通过以下的方式生成框架页面，我们先设计好3个网页文件：①top.htm，通常在顶框架显示；②left.htm，通常在左框架显示；③main.htm，通常在主框架显示；设定框架的源文件，其实就是指定在某个框架中需要打开的网页文件，具体步骤如下。2026/7/9第8章设计框架网页138.1框架网页框架实例选择主菜单“窗口”→“框架”菜单命令，就会打开关于框架设置的活动面板。此时的面板显示的就是我们刚才建立的框架页面的样式。如果提示某些文件不存在，单击“确认”按钮后忽略即可。出现这种情况是因为第一步只保存框架集文件，却没有保存框架文件）。在框架活动面板上点击顶部框架中单击，选择顶框架。2026/7/9第8章设计框架网页148.1框架网页框架实例此时页面底部的属性面板就会变成对框架属性的设置面板。单击“源文件”右边的文件夹图标，接着在弹出的对话框中选择想要在顶部框架中打开的网页文件top.htm。单击“确定”按钮，top.htm网页文件就会在顶框架中被打开。重复上述步骤，首先在左框架中打开left.htm，然后在主框架中打开main.htm。2026/7/9第8章设计框架网页158.1框架网页框架实例选择“文件”→“保存框架”命令，分别保存所有框架页面文件。然后用浏览器预览myframeset.htm文件，这样就可以看到用框架设计的网页了。2026/7/9第8章设计框架网页168.1框架网页框架实例创建链接。如果希望链接的对象（文本或者图片）在一个框架内部，而链接的页面则在另外的框架内打开，那么就需要通过设置目标打开方式来控制框架的显示内容。在设置好链接之后，使用属性面板里的Target（目标）弹出菜单，可以指定在哪个框架中打开被链接的文件，这个菜单下显示的框架名称是我们之前建立框架页面时对每个框架页面的命名，如果当时没有设置，也可以通过框架活动面板添加。2026/7/9第8章设计框架网页178.1框架网页框架实例在框架中打开链接文件的具体步骤如下：首先选择文本或对象，然后在属性面板的链接文本框执行以下操作：输入要链接的文件名；或者单击文件夹图标，可以选择要链接的文件或者拖动指向文件图标，指向要选择链接的文件；在此如果需要指定链接到文件中的锚点，则需要在锚点名前输入符号#和锚点名称，或者直接输入#，这表示是一个空链接（空链接单击后页面不变）。2026/7/9第8章设计框架网页188.1框架网页框架实例在Target弹出菜单上，为被链接的文档选择一个合适的打开方式或者在框架的某一部分打开，打开方式的具体含义如下所示：_blank可以在新的浏览器窗口中打开被链接文档，而且可以保持当前窗口可用。_parent可以在链接所在的父框架集中打开链接文档。_self可以在当前框架打开链接，替换该框架中的内容。_top可以在当前文档的最外层框架集中打开链接，替换所有框架。2026/7/9第8章设计框架网页198.1框架网页框架实例_top可以在当前文档的最外层框架集中打开链接，替换所有框架。如果需要在某个框架页面中打开，选择一个命名框架（比如选择的是main.htm，主框架），然后链接的页面就会在指定框架中打开。重复上述步骤，最后得到结果。选择“文件”→“全部存储”命令，保存所有文件。然后用浏览器预览myframeset.htm，这时点击左框架的链接，可以看到链接的页面在主框架中打开。2026/7/9第8章设计框架网页208.1框架网页编辑框架集通过Dreamweaver来编辑框架集。可以通过选择主菜单“窗口”—“框架”，打开框架设置的活动面板。如果在框架面板中选择任意一个框架，那么在框架面板中被选中的框架就会有黑色的边框显示，此时就可以在属性面板中进行相应的设置了。2026/7/9第8章设计框架网页218.1框架网页编辑框架集通过Dreamweaver来编辑框架集。输入框架中的内容。用鼠标单击任意一个框架之后，就可以像正常编辑页面一样，可以在框架中插入各种文本内容、图片、Flash动画和背景音乐等网页元素。2026/7/9第8章设计框架网页228.1框架网页编辑框架集通过HTML语言来编辑框架集从基本格式中可知，在框架集文档中，用<frameset>标记符代替了<body>标记符，使用框架的时候，html代码中不能出现<body>标记。2026/7/9第8章设计框架网页238.1框架网页编辑框架集通过HTML语言来编辑框架集<frameset>标记符还可以嵌套使用2026/7/9第8章设计框架网页248.1框架网页向框架中添加内容每一个框架里都是一个独立的网页文档，那么不仅可以直接编辑文档内容，而且也可以在框架内打开已经存在的网页文档。2026/7/9第8章设计框架网页258.1框架网页向框架中添加内容要添加网页内容，首先选择活动框架面板内的某一框架，然后选择“属性”面板上的“源文件”命令来设定框架的网页。2026/7/9第8章设计框架网页268.1框架网页向框架中添加内容创建一个如图所示的框架页面，并且在相应的框架中添加top.htm、left.htm和main.htm三个网页，并且设定左侧框架的宽度为80像素，上方框架的高度为200像素，主页面框架占据剩余空间。2026/7/9第8章设计框架网页278.1框架网页向框架中添加内容首先创建一个整体框架页面，然后将鼠标置于框架边框上，按住“Alt”键拖动，对原始页面进行分割，然后在框架集属性面板里进行具体数值设置即可。接下来分别在“框架”面板中选择相应的框架，然后在框架属性面板里插入相应的网页就可以完成了。2026/7/9第8章设计框架网页288.1框架网页保存框架集框架集的实质就是把浏览器窗口划分为几个可相同可不同的小区（即框架），然后可以在每个小区中独立显示一个网页文件（html文件），而最后这些独立小区的组合就是所谓的框架集。2026/7/9第8章设计框架网页298.1框架网页保存框架集下图所示的框架集是由3个框架组成，当把DreamweaverCS6文档拆分为框架时，其实就已经为框架集和其中的每个框架创建了独立的html文档。在设计视窗（文档窗口）中有3个框架页面，但是它实际上包括了4个独立的文件，那就是框架集文件和3个框架文件。2026/7/9第8章设计框架网页308.1框架网页保存框架集如果想要在浏览器中预览页面，则必须保存框架集和全部的框架文件。在保存框架集和框架文件的过程中，有一种方法就是分别保存框架集和框架文件，还有一种方法就是同时保存所有框架和框架集文件2026/7/9第8章设计框架网页318.1框架网页保存框架集如果想要保存所有文件（包括框架集文件和框架文件），那么首先选择“文件“→“保存全部”选项，效果如图所示。2026/7/9第8章设计框架网页328.1框架网页保存框架集如果是新创建的框架集，那么就会弹出如下页所示的“另存为”对话框。DreamweaverCS6一般会首先保存框架集文件，在框架集边框上就会显示选择线，在“另存为”对话框的“文件名”域就会自动提供临时文件名UntitledFrameset-1，此时用户可以根据自己的需要修改文件名，然后单击保存按钮就可保存框架集文件。2026/7/9第8章设计框架网页338.1框架网页保存框架集2026/7/9第8章设计框架网页348.1框架网页保存框架集接下来就是保存框架文件，此时“文件名”域中的文件名变为UntitledFrame-4（这主要是依框架的个数不同而不同），设计视图（文档窗口）中的选择线这时也会自动移到对应的被保存的框架中，根据选择线移动的位置就可以知道正在保存的是哪个框架文件。然后单击“保存”按钮，直到所有文件保存完为止。2026/7/9第8章设计框架网页358.1框架网页保存框架集在本例中，所有的保存操作都执行完成以后，就会得到4个文件：UntitledFrameset-1.htm（框架集文件）、Untitled-1.htm（主框架文件）、UntitledFrame-2.htm（左框架文件）和UntitledFrame-3.htm（顶框架文件）。2026/7/9第8章设计框架网页368.1框架网页保存框架集框架集文件（UntitledFrameset-1.htm）其实也是一个html文件，它定义了页面显示的框架数、框架的大小、载入框架的源文件，还有其他可定义的属性等不同信息。在设计视图（文档窗口）中单击框架的边框，然后选择框架集，最后选择组合视图或代码视窗，这时在html源码窗口中就可以看到以下这些信息，2026/7/9第8章设计框架网页378.1框架网页保存框架集在设计视图（文档窗口）中单击框架的边框，然后选择框架集，最后选择组合视图或代码视窗，这时在html源码窗口中就可以看到以下这些信息。2026/7/9第8章设计框架网页388.1框架网页保存框架集从框架集文件的框架定义中我们可以看到，顶框架（topFrame）的源文件（就是在框架内打开的网页文件）是UntitledFrame-3.htm；左框架（leftFrame）的源文件是UntitledFrame-2.htm；主框架（mainFrame）的源文件是Untitled-1.htm。2026/7/9第8章设计框架网页398.1框架网页保存框架集如果只想保存框架集文件，那么就可以选择“文件”→“保存框架集”命令，或者选择“文件”→“框架集另存为”命令，这样就可以把框架集保存为新文件。框架文件其实就是在框架内打开的网页文件，如果想要保存框架文件，那么就在框架内单击，然后选择“文件”→“保存”命令，就可以保存框架文件。2026/7/9第8章设计框架网页408.2框架属性布局框架基本属性框架属性面板可以用来查看和设置框架属性，一般包括命名框架、设置边框、链接和边距等。2026/7/9第8章设计框架网页418.2框架属性布局框架基本属性在框架活动面板中中单击任意一个框架，属性面板就变成了对框架属性的设置。效果如图所示。2026/7/9第8章设计框架网页428.2框架属性布局框架基本属性如果想要命名框架，那么就在FrameName（框架名）域输入名称。此时输入的框架名将可能被超链接和脚本引用，所以，命名框架必须要让框架名是一个有意义的名称，可以使用下划线，但是却不能使用横杠、句号和空格等，而且框架名应该以字母开头，但是不要使用JavaScript的保留字（例如top或navigator等）。2026/7/9第8章设计框架网页438.2框架属性布局框架基本属性源文件：用来指定当前框架中打开的源文件（网页文件）。它可以直接在输入域中手动输入文件名，或者单击文件夹图标，浏览文件并且选择一个合适的文件，而且也可以把光标置于框架内，接下来选择“文件→“在框架中打开”命令来打开一个文件。2026/7/9第8章设计框架网页448.2框架属性布局框架基本属性滚动条：用来设置当没有足够的空间来显示当前框架的内容时是否显示滚动条。本项属性有4种选择：“是”表示显示滚动条；“否”表示不显示滚动条；“自动”表示当没有足够的空间来显示当前框架的内容时，就会自动显示滚动条；“默认”表示采用浏览器的默认值。2026/7/9第8章设计框架网页458.2框架属性布局框架基本属性不能调整大小：如果选择此复选框，就可以防止用户在浏览时拖动框架边框来调整当前框架的大小。边框：用来决定当前框架是否显示边框，一般有“显示”、“不显示”和“默认”3种基本选择。通常大部分的浏览器默认值为“显示”。在这里此项选择覆盖框架集的边框设置。边框颜色：表示设置与当前框架比邻的所有边框的颜色，在此就可以选择覆盖框架集的边框颜色设置。2026/7/9第8章设计框架网页468.2框架属性布局框架基本属性2026/7/9第8章设计框架网页478.2框架属性布局框架基本属性2026/7/9第8章设计框架网页488.2框架属性布局框架基本属性边界宽度：以像素为单位设置左边距和右边距（框架边框与内容之间的距离）。边界高度：以像素为单位设置上边距和下边距（框架边框与内容之间的距离）。使用框架集属性检查器可以设置边框和框架大小。设置框架属性会覆盖在框架集中设置的相应属性。例如，设置某框架的边框属性，将覆盖在框架集中对该框架设置的边框属性。2026/7/9第8章设计框架网页498.2框架属性布局框架基本属性在设计视图（文档窗口）中单击两框架之间的边框，或者在框架活动面板中单击框架集边框，可以调出框架集属性面板。鼠标单击位于“属性”面板右下角的扩展箭头，此时就可以查看所有框架集属性。效果如图所示。2026/7/9第8章设计框架网页508.2框架属性布局框架基本属性设置框架集属性的具体步骤如下。首先选择一个框架集。在属性面板中可以设置当文档在浏览器中被浏览时是否显示框架边框：如果想要显示边框，就选择“是”；如果不想显示边框，就选择“否”。如果想要让用户的浏览器来决定是否显示边框，就选择“默认”。2026/7/9第8章设计框架网页518.2框架属性布局框架基本属性设置框架集属性的具体步骤如下。在边框宽度域中输入一个数字，用来指定当前框架集的边框宽度。如果输入0，那么就表明指定为无边框。在边框颜色域中，既可以输入颜色的十六进制值，又可以使用拾色器为边框选择颜色。如果想要设置框架大小，那么就可以在框架页面的分割线上单击鼠标，选中某个具体的行或者列，接下来，可以在值域输入一个数字，用来设置选定行或列的大小，如下并且可以在单位弹出菜单上为值域中输入值设定量度单位。量度单位一般有3个基本选项。2026/7/9第8章设计框架网页528.2框架属性布局框架基本属性设置框架集属性的具体步骤如下。像素：用像素值来设置列宽度或行高度。像素这个选项对一直要保持一样大小的框架（例如导航栏）是最合适的选择。如果想要为其他框架设置不同的单位，那么这些框架的空间就只能在以像素为单位的框架完全达到指定的大小之后才可以分配。2026/7/9第8章设计框架网页538.2框架属性布局框架基本属性设置框架集属性的具体步骤如下。百分数：用来表示当前框架行（或列）占所属框架集高度（或宽度）的百分数。设置的时候一般是以Percent为单位的框架行（或列）的空间分配。一般位于设置以Pixels为单位的框架行（或列）之后，在以Relative为单位的框架行（或列）之前。2026/7/9第8章设计框架网页548.2框架属性布局框架基本属性设置框架集属性的具体步骤如下。相对比例：用来表示当前框架行（或列）相对于其他行（或列）所占的比例。通常以Relative为单位的框架行（或列）的空间分配是在以像素和百分数为单位的框架行（或列）之后，但是它们却占据了浏览器窗口所有的剩余空间。2026/7/9第8章设计框架网页558.2框架属性布局框架基本属性一般可以通过设置框架中文档的背景颜色来改变框架的背景颜色。具体方法如下：把鼠标光标放置于需要修改背景颜色的框架中，选择主菜单→“修改”→“页面属性”命令；或者可以在框架内右击，接下来在快捷菜单上选择“页面属性”。然后单击“背景”方框，此时就可以从中选择一种颜色。示例见下页。2026/7/9第8章设计框架网页568.2框架属性布局框架基本属性2026/7/9第8章设计框架网页578.2框架属性框架链接如果在有框架的网页中设置了超级链接的功能，那么就必须指定所链接的文件是在哪一个框架中显示，此时就需要用到<frame>标记符中name

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

温馨提示

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

最新文档

评论

0/150

提交评论