《创建框架网》PPT课件.ppt

Dreamweaver基础篇 DreamweaverDreamweaver -基础教案基础教案 Dreamweaver基础篇 Dreamweaver基础篇 第7章 创建框架网页 Dreamweaver基础篇 回顾 掌握表格的插入 掌握表格属性的设置 掌握选择表格的方法 掌握编辑表格和单元格 Dreamweaver基础篇 学习目标 了解框架网页概述 掌握创建框架和框架集 掌握框架和框架集的选择 掌握框架和框架集属性的设置 掌握完整的框架网页创建 掌握嵌入式框架的创建 掌握框架的使用技巧 Dreamweaver基础篇 7.1 框架网页概述 在Dreamweaver 8中，框架是一个非常重要的页面布局工具。它 可以把浏览器的窗口分割成若干相互独立又有联系的区域，在每个 区域中显示一个独立的网页文件，从而实现了一个网页内显示多个 HTML文件的目的。使用框架的优点在于可以把不同层次的网页中 的不改变的内容放在一个框架中，把不断改变的文档内容放在一个 框架中。框架技术可以被广泛的应用到网站导航和文档浏览中，方 便访问者对网页的浏览，减少访问者下载页面所需要的时间。 框架由框架集和框架组成。框架集就是框架的集合，它是在一 个文档内一组框架结构的HTML网页，定义了网页显示的框架数、 框架的大小、载入框架的网页源和其他可定义的属性等。框架是框 架集中显示的文档，每个框架实质上都是一个独立存在的HTML文 档。 Dreamweaver基础篇 7.2 创建框架和框架集 在Dreamweaver中预定义了多种框架集，可以很方便地创建想要的框 架网页。 创建框架集 选择预定义的框架集将自动设置创建布局所需要的所有框架集和框架，它 是迅速创建基于框架布局的最简单方法。创建框架集的具体操作步骤如下 。 1选择菜单中的【文件】|【新建】命令，打开【新建文档】对话框，在 对话框中选择【常规】选项卡中的【类别】|【框架集】|【上方固定，左 侧嵌套】选项。如图7-1： Dreamweaver基础篇 Dreamweaver基础篇 2.单击【创建】按钮，即可创建一上方固定，左侧嵌套的框架 网页。如图7-2：提示：还可以用以下两种方法创建框架网页 ： Dreamweaver基础篇 在【布局】插入栏中单击按钮，在弹出的菜单中选择【左侧和嵌套的 下方框架】选项，即可创建框架网页。如图7-3： 选择菜单中的【插入】|【HTML】|【框架】|【左侧及下方嵌套】命 令，即可创建框架网页。 Dreamweaver基础篇 插入预定义框架集 插入预定义框架集的具体操作步骤如下。 1标放置在头部框架中，选择菜单中的【修改】|【页面属性 】命令，打开【页面属性】对话框中将【左边距】设置为0像 素，【右边距】设置为0像素。如图7-4： Dreamweaver基础篇 2【确定】按钮。选中头部框架，在【属性】面板中单 击【源文件】文本框右侧的【浏览文件】按钮，打开【选 择HTML文件】对话框，在对话框中选择top1.htm。 3单击【确定】按钮，插入文件。 4将光标放置在左侧框架中，修改页面属性，在【属性 】面板中单击【源文件】文本框右侧的【浏览文件】按钮 ，在打开的【选择HTML文件】对话框中选择leftlhtm， 单击【确定】按钮，插入文件。 5将光标放置在右侧框架中，修改页面属性，在【属性 】面板中单击【源文件】文本框右侧的【浏览文件】按钮 ，在打开的【选择HTML文件】对话框中选择right.htm， 单击【确定】按钮，插入文件。 Dreamweaver基础篇 保存框架和框架集文件 在浏览器中预览框架集之前，必须保存框架集文件以及要在 框架中显示的所有文档。可以单独保存每个框架集文件和带 框架的文档，也可以同时保存框架集文件和框架中出现的所 有文档。保存框架和框架集文件的具体操作步骤如下。 1新建一上方固定，左侧嵌套的框架网页。选择菜单中的【 文件】|【保存全部】命令，打开【另存为】对话框，此时整 个框架集内侧出现阴影，所以询问的是框架集的名称，在【 文件名】文本框中输入index.htm。如图7-5： Dreamweaver基础篇 Dreamweaver基础篇 2单击【保存】按钮，打开第2个【另存为】对话框，因为右侧 框架内侧出现阴影，所示询问的是右侧框架的名称，在【文件名 】文本框中输入right.htm。如图7-6： Dreamweaver基础篇 3单击【保存】按钮，打开第3个【另存为】对话框，因为左 侧框架内侧出现阴影，所以询问的是左侧框架的名称，在【文 件名】丈本框中输入left.htm。如图7-7： Dreamweaver基础篇 4单击【保存】按钮，打开第4个【另存为】对话框，因为头部框架 内侧出现阴影，所示询问的是头部框架的名称，在【文件名】文本框 中输入top.htm。如图7-8： 5单击【保存】按钮，至此整个框架保存完毕。 Dreamweaver基础篇 7.3 选择框架和框架集 在【框架】面板中选择框架或框架集 在【框架】面板中选择框架或框架集的具体操作步骤如下 。 1.选择菜单中的【窗口】|【框架】命令，打开【框架】面 板，在面板中单击需要选择的框架，框架的边界就会被虚 线包围。如图7-9： Dreamweaver基础篇 提示：按组合键，打开【框架】面板。 Dreamweaver基础篇 2.在【框架】面板中单击框架集的边框，也可以选择整个框架集，框 架集的内侧出现虚线。如图7-10： Dreamweaver基础篇 在文档窗口中选择框架或框架集 在文档窗口中选择框架或框架集的具体操作步骤如下。 1将光标放置在要选择的框架中，按住键单击鼠标左 键，框架边框内侧出现虚线，即可选择该框架。 2将光标放置在任意框架中，按住键，当鼠标指针靠近 框架边线时，出现上下或左右箭头时，单击鼠标左键，框架集 内侧出现阴影，即可选中整个框架集。如图7-11： Dreamweaver基础篇 Dreamweaver基础篇 7.4 设置框架和框架集属性 设置框架属性 使用框架【属性】面板可以查看和设置大多数框架属 性。选中一个框架，选择菜单中的【窗口】|【属性】命 令，打开【属性】面板中显示选中的框架属性。 框架【属性】面板参数如下。如图7-12： Dreamweaver基础篇 【框架名称】：用于为当前框架命名。 【源文件】：确定框架的源文档，可以直接输入名字，或单击文本 框右边的固按钮查 找并选取文件。 【滚动】：当框架内的内容显示不下的时候是否出现滚动条，包括 【是】、【否】、【启动】和【默认】4个选项。 【不能调整大小】：限定框架尺寸，防止用户拖动框架边框。 【边界宽度】：设置以像素为单位的框架边框和内容之间的左右边 距。 【边界高度】：设置以像素为单位的框架边框和内容之间的上下边 距。 【边框】：用来控制当前框架边框，包括【是】、【否】和【默认 】3个选项。 【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。 Dreamweaver基础篇 设置框架集属性 选中框架集，打开【属性】面板，在【属性】面板中设置框架集的属性 。 框架集【属性】面板参数如下。如图7-13： 【边框】：设置是否有边框，包括【是】、【否】、【默认】3个选项。 选择【默认】选项，将由浏览器端的设置来决定。 【边框宽度】：设置整个框架集的边框宽度，以像素为单位。 【边框颜色】：用来设置整个框架集的边框颜色。 【行或列】：【属性】面板中显示的是行或列，是由框架集的结构而定 。 【单位】：行、列尺寸的单位，包括【像素】、【百分比】、【相对】3 个选项。 Dreamweaver基础篇 7.5 技巧提升 如何隐藏滚动条 在【属性】面板中设置【边框】和【滚动】都为【否】， 框架的边框是隐藏的，勾选【不能调整大小】复选框，即 可隐藏滚动条。 如何调整框架边框的粗细 选择整个框架集，打开框架集【属性】面板，将【边框 宽度】设置为0，则不显示边框，想要调整边框粗细，设 置【边框宽度】即可。 Dreamweaver基础篇 如何准确地选择所需的框架 在制作框架网页时，往往不能够准确地选择某个框架集， 对制作框架网页来说非常不方便，准确地选择所需的框架 的具体操作方法如下。 选择菜单中的【窗口】|【框架】命令，打开【框架】面板 ，在面板中单击想要选择的框架，框架的边界就会被虚线 包围。 如何调整框架大小 选中要调整大小的框架集，选择菜单中的【窗口】|【属性 】命令，打开【属性】面板，在面板的【行列选择范围】 显示框中单击左侧标签或顶部标签分别选定要调整框架所 在的行或列，然后在【值】文本框中输入数值，在后面的 下拉列表中选择【值】的单位。 Dreamweaver基础篇 如何实现单击一个链接改变两个框架中的内容 单击一个链接改变两个框架中的内容的具体操作步骤如下。 1.在左侧框架中选中图像，在【属性】面板中选择【矩形热点】 工具，在文字上面绘制热点。 2.选中热点，在【属性】面板中的【链接】文本框中输入 right1.htm，在【目标】下拉列表中选择mainFrame。 3.选中热点，选择菜单中的【窗口】|【行为】命令，打开【行 为】面板，在面板中单击按钮，在弹出的菜单中选择【转到 URL】选项。 4.打开【转到URL】对话框，在对话框中的【打开在】列表框中 选择【框架”topFrome”】，在URL文本框中输入toplhtm。 5.单击【确定】按钮，添加行为。 6.保存文档，按键在浏览器中预览效果。 Dreamweaver基础篇 怎样使框架集在不同的浏览器中正常显示 在为以百分比或者相对值指定大小的框架分配空间之前，先为以 像素为单位指定大小的框架分配空间。设置框架大小最常用的方 法是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相 对大小，这样在分配像素宽度后右侧框架就能够伸展，以占据所 有的剩余空间。 Dreamweaver基础篇 如何防止我的网页内容被放在其他网站的框架中显示 防止我的网页内容被放在其他网站的框架中显示的具体操作步骤 如下。 1切换到拆分视图，在与之间相应的位置输入 以下代码。 2在语句中输入代码onload=“checkframe()；”。 3保存文档，按键在浏览器中预览效果。 设置框架大小时，3种单位的优先级有何不同 其优先顺序从高到低依次为：像素、百分比、相对。如果将某个 框架大小以像素为单位进行了设置，然后又用其他单位设置了其 框架的大小，则DreamweaVer会首先保留当前以像素为单位所设 置的框架大小。 Dreamweaver基础篇 如何进行框架的嵌套 嵌套框架有以下两种方法。 将光标放置在需要进行嵌套操作的父框架中，然后选择菜单中的【 修改】|【框架页】命令，在弹出的子菜单中选择需要的操作，就可 以在父框架内嵌套所选格式