网页设计与制作教学课件邬锦霞第8章 框架.ppt

《网页设计与制作教学课件邬锦霞第8章 框架.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第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使用内置框架创建网页在Dreamweaver8中有两种创建框架集的方法：从预定义的框架集中选择；自己设计框架集。选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架布局的最简单的方法。创建预定义的框架集的具体操作步骤如下：（1）选择菜单命令【文件》新建】，弹出【新建文档】对话框，在对话框中选择【常规】

2、选项卡中的【类别】选项区的【框架集】选项，从【框架集】选项区中选择其中一种框架集，如图8-1所示。（2）单击【创建】按钮，创建一个“上方固定，左侧嵌套”的框架集，如图8-2所示。8.1.2自定义创建框架网页（1）选择菜单命令【修改》框架页】，在子菜单中选择拆分框架网页命令，选项有“拆分左框架”、“拆分右框架”、“拆分上框架”、“拆分右框架”四种，如图8-3所示。（2）选择“拆分上框架”选项后，效果如图8-4所示。8.1.3保存框架网页当编辑完框架和框架文件后，必须对框架及框架文件进行保存。在Dreamweaver8中保存框架及框架文件，如果仅像保存普通文件

3、一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将丢失，所以选择一个适当的保存方法是非常重要的。具体步骤如下：（1）选择菜单命令【文件》保存全部】，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框。因为阴影出现在整个框架集内侧，所以询问的是框架集的文件名。将整个框架集命名为index.html，如图8-5所示。8.1.3保存框架网页（2）单击【保存】按钮，出现第二个“另存为”对话框，因为右边框内侧出现阴影，如图8-6所示，所以询问的是右边框架的文件名，将文件命名为right.html。（3）单击【保存】按钮，出现第三个“另存为”对话框，因

4、为左边框内侧出现阴影，如图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所示。框架属性面板中各个选项参数如

5、下：框架名称：用来作为链接指向的目标；源文件：确定框架的源文档，可以直接输入名字，或单击文本框右侧的按钮查找并选取文件；滚动：当框架内的内容显示不下的时候是否出现滚动条；不能调整大小：限定框架尺寸，防止用户拖动框架边框；边框：用来控制当前框架边框，包含“是”、“否”和“默认”3个选项；边框颜色：设置与当前边框相邻的所有边框的边框颜色；边界宽度：设置框架边框和内容之间的左右边距，以像素为单位；边界高度：设置框架边框和内容之间的上下边距，以像素为单位。8.2.2设置框架集属性要显示框架集的属性面板，首先单击框架的边框，选中框架集，此时“属性”面板中将显示框架集

6、的属性，如图8-10所示。框架集属性面板中各个选项参数如下：边框：设置是否有边框，包含“是”、“否”、和“默认”3个选项，选择“默认”，将会由浏览器的设置来决定；边框宽度：设置整个框架集的边框宽度，以像素为单位；边框颜色：设置整个框架集的颜色；行或列：“属性”面板中显示的是行或列，由框架集的结构决定；单位：行、列尺寸的单位，包含“像素”、“百分比”和“相对”3个选项。8.2.3改变框架的背景颜色要改变边框中文档的背景颜色，可以改变其所在框架的背景颜色，具体步骤如下：（1）将光标置于需要改变背景颜色的框架中，如图8-11所示。（2）选择菜单命令【修改》页面属

7、性】，弹出【页面属性】对话框，在“外观”选项区的“背景颜色”文本框中输入说需要的背景颜色，如图8-12所示。（3）单击【确定】按钮，改变背景颜色，如图8-13所示。8.3框架网页的选择8.3.1选择一个框架在Dreamweaver8中，用户可以选择单个或整个框架，并对其进行操作。选择菜单命令【窗口》框架】，打开【框架】面板，在框架面板中单击需要选择的框架，该框架的边界就会被虚线包围，如图8-14所示。8.3.2选择框架集默认情况下，建立框架集时会自动选择整个框架作为操作对象，此时框架集中所有框架的边界都会被虚线所包围。将鼠标指针移动到整个边框位置的同时，按

8、住Alt键，当鼠标指针变成水平或者垂直双向箭头时，单击边框即可选中