网页设计与制作邬锦霞电子教案 第8章 框架.pptVIP

第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 选择框架集 默认情况下，建立框架集时会自动选择整个框架作