Transcript 第8章框架

第8章 框架
8.1创建框架网页
8.2设置框架和框架集属性
8.3框架网页的选择
8.4在框架中设置链接
8.5创建完整的框架网页实例
8.1创建框架网页



8.1.1 使用内置框架创建网页
8.1.2 自定义创建框架网页
8.1.3 保存框架网页
8.1.1 使用内置框架创建网页



在Dreamweaver 8中有两种创建框架集的方法：从预定义的框架集
中选择；自己设计框架集。选择预定义的框架集将自动设置创建
布局所需的所有框架集和框架，它是迅速创建基于框架布局的最
简单的方法。创建预定义的框架集的具体操作步骤如下：
（1）选择菜单命令【文件》新建】，弹出【新建文档】对话框，
在对话框中选择【常规】选项卡中的【类别】选项区的【框架集】
选项，从【框架集】选项区中选择其中一种框架集，如图8-1所示。
（2）单击【创建】按钮，创建一个“上方固定，左侧嵌套”的框
架集，如图8-2所示。
8.1.2 自定义创建框架网页

（1）选择菜单命令【修改》框架页】，在子菜单中
选择拆分框架网页命令，选项有“拆分左框架”、
“拆分右框架”、“拆分上框架”、“拆分右框架”
四种，如图8-3所示。

（2）选择“拆分上框架”选项后，效果如图8-4所示。
8.1.3 保存框架网页


当编辑完框架和框架文件后，必须对框架及框架文件
进行保存。在Dreamweaver 8中保存框架及框架文件，
如果仅像保存普通文件一样保存框架，只会保存鼠标
所定位的框架内容，其余的框架内容将丢失，所以选
择一个适当的保存方法是非常重要的。具体步骤如下：
（1）选择菜单命令【文件》保存全部】，整个框架
边框会出现一个阴影框，同时会弹出“另存为”对话
框。因为阴影出现在整个框架集内侧，所以询问的是
框架集的文件名。将整个框架集命名为index.html，
如图8-5所示。
8.1.3 保存框架网页



（2）单击【保存】按钮，出现第二个“另存为”对话框，因为右
边框内侧出现阴影，如图8-6所示，所以询问的是右边框架的文件
名，将文件命名为right.html。
（3）单击【保存】按钮，出现第三个“另存为”对话框，因为左
边框内侧出现阴影，如图8-7所示，所以询问的是左边框的文件名，
将文件命名为left.html。
（4）单击【保存】按钮，出现第四个“另存为”对话框，因为顶
部框架内侧出现阴影，如图8-8所示，所以询问的是顶部框架的文
件名，将文件命名为top.html。
8.2设置框架和框架集属性



8.2.1 设置框架属性
8.2.2 设置框架集属性
8.2.3 改变框架的背景颜色
8.2.1 设置框架属性

使用框架属性面板可以设置框架的属性。在文档窗口中按住Alt键，然后
用鼠标单击一个框架，即可选中该框架。选中【窗口】属性】命令，打开
框架属性面板，如图8-9所示。

框架属性面板中各个选项参数如下：
框架名称：用来作为链接指向的目标；
源文件：确定框架的源文档，可以直接输入名字，或单击文本框右侧的按
钮查找并选取文件；
滚动：当框架内的内容显示不下的时候是否出现滚动条；
不能调整大小：限定框架尺寸，防止用户拖动框架边框；
边框：用来控制当前框架边框，包含“是”、“否”和“默认”3个选项；
边框颜色：设置与当前边框相邻的所有边框的边框颜色；
边界宽度：设置框架边框和内容之间的左右边距，以像素为单位；
边界高度：设置框架边框和内容之间的上下边距，以像素为单位。








8.2.2 设置框架集属性

要显示框架集的属性面板，首先单击框架的边框，选中框架集，此时“属
性”面板中将显示框架集的属性，如图8-10所示。

框架集属性面板中各个选项参数如下：
边框：设置是否有边框，包含“是”、“否”、和“默认”3个选项，选择
“默认”，将会由浏览器的设置来决定；
边框宽度：设置整个框架集的边框宽度，以像素为单位；
边框颜色：设置整个框架集的颜色；
行或列：“属性”面板中显示的是行或列，由框架集的结构决定；
单位：行、列尺寸的单位，包含“像素”、“百分比”和“相对”3个选项。





8.2.3 改变框架的背景颜色




要改变边框中文档的背景颜色，可以改变其所在框架的背景颜色，
具体步骤如下：
（1）将光标置于需要改变背景颜色的框架中，如图8-11所示。
（2）选择菜单命令【修改》页面属性】，弹出【页面属性】对话框，
在“外观”选项区的“背景颜色”文本框中输入说需要的背景颜色，
如图8-12所示。
（3）单击【确定】按钮，改变背景颜色，如图8-13所示。
8.3框架网页的选择




8.3.1 选择一个框架
在Dreamweaver 8中，用户可以选择单个或整个框架，并对其进行操作。
选择菜单命令【窗口》框架】，打开【框架】面板，在框架面板中单击
需要选择的框架，该框架的边界就会被虚线包围，如图8-14所示。
8.3.2 选择框架集
默认情况下，建立框架集时会自动选择整个框架作为操作对象，此时框
架集中所有框架的边界都会被虚线所包围。将鼠标指针移动到整个边框
位置的同时，按住Alt键，当鼠标指针变成水平或者垂直双向箭头时，单
击边框即可选中整个框架集。如图8-15所示。
8.4在框架中设置链接



利用框架结构可以把导航条固定在页面的顶部或者右边。在任何
时候，用户都可以直接选择顶部或右边的导航内容，切换到自己
想要浏览的内容。要在一个框架中使用链接打开另一个框架中的
文档，必须设置链接目标。在框架中设置链接的具体步骤如下：
（1）选中需要设置链接的对象，如图8-16所示。
（2）选择菜单命令【窗口》属性】，打开“属性”面板，在“链
接”文本框中选择要链接的对象文件，单击【目标】下拉列表，
在弹出的菜单中选择“mainFrame”选项，如图8-17所示。
8.5创建完整的框架网页实例




前面已经介绍了制作各种构造的框架文档的方法和有关框架文档
的基本功能，下面将利用前面讲的知识来制作一个完整的框架网
页。
（1）选中菜单命令【文件》新建】，弹出“新建文档”对话框，
在“常规”选项卡中的“类别”选项区选择“框架集”选项，在
右边的选项区中选择“上方固定，左侧嵌套”选项，如图8-18所
示。
（2）单击【创建】按钮，新建一个框架网页，如图8-19所示。
（3）将光标置于顶部框架中，选择菜单命令【插入>表格】，弹
出“表格”对话框，在“行数”和“列数”中分别输入2和1，表
格宽度设置为100%。如图8-20所示。
8.5创建完整的框架网页实例




（4）单击【确定】按钮，插入一个2行1列的表格，如图8-21所示。
（5）将光标置于第一行单元格中，选择【插入》图像】命令，弹
出“选择图像源文件”对话框，在对话框中选择Mysite/top2.jpg，
如图8-22所示，单击“确定”即可将图片插入表格。
（6）将光标置于第二行单元格中，选择【插入》导航条】命令，
弹出“插入导航条”对话框，在对话框中填入项目名称及相应的
图像，如图8-23所示。
（7）单击【确定】按钮，即可插入导航条，如图8-24所示。
8.5创建完整的框架网页实例




（8）将光标置于左侧的框架内，选择菜单命令【插入》表格】，
弹出“插入表格”对话框，设置插入行数和列数分别为4与2，宽
度设为100%，如图8-25所示，单击“创建”按钮，完成插入表格。
（9）合并第1行表格，并在此行直接输入“学校论坛登录”，设
置对齐方式为居中，并设置单元格的背景颜色。
（10）在第2、3行的第1列分别输入用户名和密码，并设置为右对
齐，然后分别在第2列插入2个文本字段。
（11）在第4行放置2个表单按钮，分别设置为会员登录和重置，
操作完毕后，登录界面如图8-26所示。
8.5创建完整的框架网页实例





（12）在会员登录框下插入一条水平线。
（13）继续在水平线下方插入一个2行1列的表格，宽度设为100%，
居中对齐。
（14）在表格第1行输入“图片欣赏”，然后在第2行插入一个图
片，并设置相应的宽度和高度，如图8-27所示。
（15）单击菜单命令【插入】表格】，在右侧边框插入一个4行2
列的表格，设置宽度为100%，并在表格的第1列分别插入不同的
图片，然后在第2列输入相应的文字，如图8-28所示。
（16）选择【文件》保存全部】，保存所有的框架和网页，然后
按F12键浏览网页，效果如图8-29所示。