实战Dreamweaver CS5 网页制作教程 第2版 教学课件 作者 刘天真 第8章 使用框架技术.pptVIP

8.* 第8章 使用框架技术 学习目标 能够理解框架和框架集的概念。 能够运用预设方式和自定义方式创建框架。 能够设置框架和框架集的属性。 能够删除和存储框架和框架集文件。 能够使用框架技术制作网页 8.1　案例制作：利用框架技术制作网站“绘声绘影” 8.2 新知解析 8.3 实战演练： Maya火星课堂 本章内容 8.1　案例制作：利用框架技术制作网站“绘声绘影” 通过本案例的操作，你将学会：如何建立框架和框架集 、如何设置框架和框架集的属性、如何设置框架面板 。 8.1　案例制作：利用框架技术制作网站“绘声绘影” 操作步骤： 1）定义站点。新建文件夹“hshy”，将素材文件夹“hshy”中所有文件和文件夹拷贝到“hshy”文件夹中。在Dreamweaver CS5中定义站点，站点名称为“绘声绘影”，本地站点文件夹为hshy文件夹。 2）新建网页文件，在“插入”面板“布局”选项卡中单击“框架”按钮 旁边的黑色小三角，在弹出菜单中选择“顶部和嵌套的左侧框架”命令，如图所示，会打开“框架标签辅助功能属性”窗口，点击“确定”按钮，此时文档窗口如图所示。 8.1　案例制作：利用框架技术制作网站“绘声绘影” 操作步骤： 3）单击文档窗口中横着的内部框架边框线，在“属性”面板中设“行”值为132，则定义了顶部框架的高度为132px，如图所示。 8.1　案例制作：利用框架技术制作网站“绘声绘影” 操作步骤： 4）再单击竖着的内部框架边框线，在“属性”面板中设“列”值为199，则定义了左部框架的宽度为199px，如图8-6所示。单击菜单“文件”→“框架集另存为”命令，将框架集保存为文件index.html。单击菜单“窗口”→“框架”打开框架面板，如图所示。 8.1　案例制作：利用框架技术制作网站“绘声绘影” 操作步骤： 5）在“框架”面板中单击顶部topFrame框架，则顶部框架被选中，在“框架”属性面板中将名称改为“logo”，源文件指定为“file/logo.html”，“滚动”设置为“否”，“属性”面板设置如图所示。 8.1　案例制作：利用框架技术制作网站“绘声绘影” 操作步骤： 6）在“框架”面板中单击左部leftFrame框架，则左部框架被选中，在框架“属性”面板中将名称改为“daohang”，源文件为“file/daohang.html”，“滚动”设置为“否”，“属性”面板设置如图所示。 8.1　案例制作：利用框架技术制作网站“绘声绘影” 操作步骤： 7）在“框架”面板中单击右部mainFrame框架，在框架“属性”面板中将名称改为main，源文件指定为file/xueximubiao.html，可以滚动，“属性”面板设置如图所示。 8.1　案例制作：利用框架技术制作网站“绘声绘影” 操作步骤： 8）此时框架的各部分将分别显示各自独立的网页。单击横向内部框架边框线，选中框架集，设网页的标题为“绘声绘影”。在index.html网页的左边框架中，选中文字“学习目标”，在“属性”面板中的“链接”文本框中输入“xueximubiao.html”，“目标”设为“main”。这样在浏览器中打开首页后，当单击超链接文字“学习目标”时，将在main框架中打开网页file/xueximubiao.html。 9）同理，分别为“制作过程”、“新知解析”、“创意设计”建立超链接，其对应的链接网页分别为zhizuoguocheng.html、xinzhijiexi.html、chuangyisheji.html，“目标”均为main。单击“文件”→“保存全部”命令，按F12预览效果。 1. 框架和框架集 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的文档。 框架集是文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的内容，但 noframes 部分除外，框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 8.2 新知解析 2. 嵌套的框架集 Dreamweaver CS5中可以直观、方便地进行框架的嵌套操作，有以下两种方法。 方法一：将插入点放置在需要进行嵌套操作的父框架内，依次单击菜单“修改”→“框架集”命令，在其弹出的4项子菜单中选择需要的操作，就可以在父框架内嵌套进所选格式的框架集。 方法二：将插入点放置在需要进行嵌套操作的父框架内，单击“插入”面板“布局”选项卡中的框架按钮，在弹出的菜单选项中选择一个预定义框架集，即会在原父框架内嵌套进一个所选的框架集。 8.2 新知解析 3. 创建框架和框架集 若要创建框