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