文档介绍：第7章创建框架网页
教学提示和教学目标
框架网页的创建
改变框架属性
框架和框架集
教学提示和教学目标
教学提示:在一个网页中,有时候并不是所有的内容都需要改变,如网页的导航栏、网页标题部分是不需要改变的。如果在每个网页中都重复插入这些元素,就会浪费时间,在这种情况下使用框架就会解决以上问题。框架的作用主要用来增强网页的导航功能,对于那些每个页面都包含有相同的导航菜单的网站来说,利用框架可以把导航菜单条放到一个框架中,而把内容放到另外一个框架中,这样切换菜单时,菜单条的框架不做任何改变,而只改变内容框架部分。
教学目标:
掌握框架网页的创建
掌握框架的选择
掌握设置框架和框架集的属性
掌握编辑框架
框架网页的创建
框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。当在文件中建立框架时,Dreamweaver可以创建一个无标题的框架集文件,在每个框架中创建无标题文件,如果某个页面被划分成2个框架,它实际上包含的却是3个独立的文件:一个框架集文件和两个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。
创建框架
保存框架
创建框架
框架网页有两个主要部分Frameset(框架集)和Frames(框架)组成。框架集是在一个文档内定义一组框架结构的HTML网页,框架是每个单独的网页文档。创建框架集的具体操作步骤如下。
(1) 选择【文件】|【新建】命令,弹出【新建文档】对话框,。
(2) 在对话框中选择【常规】选项卡中的【框架集】选项,在【框架集】列表框中选择【上方固定,左侧嵌套】选项,。
(3) 单击【创建】按钮,创建一框架网页。
保存框架
当编辑完框架及框架文件后,必须对框架及框架文件进行保存,在Dreamweaver 8中保存框架及框架文件,如果像保存普通文件一样保存框架,只会保存鼠标所定位的框架内容,其余的框架内容将丢失,所以保存框架的方法是非常重要的。
(1) 选择【文件】|【保存全部】命令。
(2) 弹出【另存为】对话框,此时整个框架边框会出现一个阴影框,因为阴影出现在整个框架集内侧,所以询问的是框架集的名称,在【文件名】。
(3) 单击【保存】按钮,此时右边框架内出现虚线,提示保存右边的框架,在【文件名】。
(4) 单击【保存】按钮,此时左边框架内出现虚线,提示保存左边的框架,在【文件名】。
(5) 单击【保存】按钮,此时顶部框架内出现虚线,提示保存顶部的框架,在【文件名】。
(6) 单击【保存】按钮,整个框架保存完毕。
改变框架属性
在浏览中无法看到创建的框架,同时不能调整框架的大小,要改变这些属性,需要在【属性】面板中设置相应的选项。
设置框架属性
在框架中输入内容
设置框架属性
在对框架进行设置的时候,首先要选取所要进行属性设置的框架集,选中框架后,在【属性】面板中将显示框架的相关参数。
在框架【属性】面板中的可以进行如下设置。
【框架名称】:指定框架名称用来作为链接指向的目标。
【源文件】:确定框架的源文档,可以直接输入名字,或单击文本框右侧的按钮,查找并选取文件。也可以通过将鼠标指针置于框架内,选择【文件】|【在框架中打开】命令打开文件。
【滚动】:设置框架内的内容溢出的时候是否出现滚动条。
【不能调整大小】:限定框架尺寸,防止用户拖动框架边框。
【边框】:用来控制当前框架边框。有【是】、【否】、和【默认】三个选项。
【边框颜色】:设置与当前框架相邻的所有框架的边框颜色。
【边界宽度】:设置以像素为单位的框架边框和内容之间左右边距。
【边界高度】:设置以像素为单位的框架边框和内容之间上下边距。
在框架中输入内容
框架创建好以后,就可以添加内容了,每个框架的内部内容就是一个文档,可以直接往里边添加内容,也可以在框架内打开已经存在的文档。在框架中输入内容的具体操作步骤如下。
(1) 。
(2) 将鼠标指针置于顶部框架中,选择【修改】|【页面属性】命令,弹出【页面属性】对话框,在对话框中将【左边距】、【上边距】分别设置为0。
(3) 单击【确定】按钮,在顶部框架中输入内容。
(4) 同以上步骤,分别在左侧和右侧的框架中输入内容,。
(5) 保存文档,按F12键在浏览器中预览效果。
框架和框架集
在Dreamweaver中有两种创建框架集的方法,既可以从预定义的框架集中选择,也可以自定义框架集,选择预定义的框架集将自动