2022年DreamweaverCS自学教程-框架结构 .pdf

第六课框架结构6-1 创建框架第 6 章 框架一、什么是框架？一个框架就是一个区域，可以单独打开一个HTML 文档。多个框架就把浏览器窗口分成不同的区域，每个区域显示不同的HTML 文档。多个框架就组成一个框架集 。这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架集是一个文件，图中我们用index.htm 命名。框架中左边命名为L，指向的是一个网页A.htm 。右边命名为R，指向的是一个网页B.htm。 1、框架结构的设置：新建一个页面，然后在布局中设置框架的结构名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 11 页 - - - - - - - - - 2、多个框架就组成一个框架集。每个框架集结构是由多个网页文件组成的。点击每个框架结构分别显示独立的名字，点击框架边框线则显示框架集的名字。拖动即可调整框架宽度3、如果设计框架集时看不到边框，可以点击“查看可视化助力框架边框”，使其显示出来。4、单击每个框架， 可以从下面属性面板中进行设置，与单个页面的编辑的方式相同。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 11 页 - - - - - - - - - 5、保存框架集的时候，需要把框架集的每个框架结构分别保存成独立的网页。框架集保存框架保存保存后的站点目录文件6-2 框架实例：电子书1 三、实例：网页书知识点：1、框架的作用1做网页的布局，将网页分成不同的部分2简化网页的编写：网页之间相同的内容只需要编写一次3加快网页的浏览：每次网页只更新那个变化的框架内容2、设置框架和框架集的属性1）框架集选中框架集：鼠标单击框架的边框，虚线显示的部分就是选中的框架集设置框架集属性：边框，边框宽度，边框颜色行：值，单位（像素，百分比，相对）2）框架选中框架：框架面板中单击要设置的框架或者按住【alt】键，在框架窗口内单击设置框架属性：框架名称，源文件，边框，滚动，不能调整大小边框颜色，边界宽度，边界高度。3、设置框架中的链接名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 11 页 - - - - - - - - - 1、新建框架的一种方法：“文件新建示例中的页框架页”2、图片和文字在横向上居中对齐，一般采用对齐方式中的“绝对居中”3、边框的各种属性可以在下方的属性面板进行设置名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 11 页 - - - - - - - - - 6-3 框架实例：电子书2 框架的链接1、设计好需要在框架网页中链接的网页2、添加链接，在属性面板中设置好“目标”项，要区分框架板块的名称。注：框架集中的框架都有一个系统默认设置的名称，从窗口中可打开框架面板查看名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 11 页 - - - - - - - - - 框架的系统默认名等属性可以在下方属性面板修改点击框架集的边框和点击“框架”视图会出现的不同的属性视图框架中添加链接时，设置“目标”项时会影响到在哪一个框架中打开链接的网页名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 11 页 - - - - - - - - - 6-4 框架集和框架属性设置1、点击框架集的边框，在下方的属性面板设置框架的边框等属性框架集内的设置需要切换结构分别设置2、修改框架属性时会涉及到多个边框，可以选择“保存全部”一次性保存3、点击“框架”视图，框架“滚动”的设置。设置滚动的作用是成网页滚动条，以显示全部网页内容。通常我们会设置成“自动”，内容多时会自动生成滚动条，内容少时没有滚动条。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 11 页 - - - - - - - - - 6-5 自定义框架集四、自定义框架集如果框架集不满足我们的需要时，我们需要自己建立框架。看例子：1、 拆分方法：1拖动编辑窗口的边框：鼠标置于编辑窗口的边框，变成或者时拖动。2拖动窗口中的框架边框：按住【Alt 】键，鼠标变成或者时拖动。注意：当指向拖动一小段边框时，先选中当前框架，再拖动。例如：2、框架的删除方法：拖动不需要的边框和别的边框合并，或者拖到编辑窗口外。1、拖动编辑窗口的边框建立一个新框架，拖到编辑窗口外删除框架。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 11 页 - - - - - - - - - 2、按住 Alt 键，拖动框架边框，可以复制边框线，建立新的边框结构6-6 页中页 IFRAME IFRAME 元素也就是文档中的文档，或者好像浮动的框架(FRAME)。 Name 框架的名字Src 链接的源文件Frameborder 框架的边框设置Scrolling 滚动条设置1、点击“布局 IFRAME ”自动切换你到拆分视图，以方便修改代码设置属性2、IFRAME 窗口属性修改窗口宽度设置名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 11 页 - - - - - - - - - 窗口高度设置添加链接3、一个实例：变化显示效果先做好两个网页在网页中加入 IFRAME代码中按空格键，设置IFRAME 的高度和宽度代码中按空格键，设置一个IFRAME 链接名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 11 页 - - - - - - - - - 代码中按空格键，滚动条设置代码中按空格键，边框设置代码中按空格键，给IFRAME 添加一个名字，以方便设置作为链接跳转的目标添加一个链接，链接的目标要与IFRAME 的名字一致保存，预览名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 11 页 - - - - - - - - -