网页设计基础教程与上机指导第版创建框架网.ppt

第7章 创建框架网页,教学提示和教学目标 7.1 框架网页的创建 7.2 改变框架属性 7.3 框架和框架集,教学提示和教学目标,教学提示：在一个网页中，有时候并不是所有的内容都需要改变，如网页的导航栏、网页标题部分是不需要改变的。如果在每个网页中都重复插入这些元素，就会浪费时间，在这种情况下使用框架就会解决以上问题。框架的作用主要用来增强网页的导航功能，对于那些每个页面都包含有相同的导航菜单的网站来说，利用框架可以把导航菜单条放到一个框架中，而把内容放到另外一个框架中，这样切换菜单时，菜单条的框架不做任何改变，而只改变内容框架部分。 教学目标： 掌握框架网页的创建 掌握框架的选择 掌握设置框架和框架集的属性 掌握编辑框架,7.1 框架网页的创建,框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，如果某个页面被划分成2个框架，它实际上包含的却是3个独立的文件：一个框架集文件和两个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。 7.1.1 创建框架 7.1.2 保存框架,7.1.1 创建框架,框架网页有两个主要部分Frameset（框架集）和Frames（框架）组成。框架集是在一个文档内定义一组框架结构的HTML网页，框架是每个单独的网页文档。创建框架集的具体操作步骤如下。 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框，如图7.1所示。 (2) 在对话框中选择【常规】选项卡中的【框架集】选项，在【框架集】列表框中选择【上方固定，左侧嵌套】选项，如图7.2所示。 (3) 单击【创建】按钮，创建一框架网页。,7.1.2 保存框架,当编辑完框架及框架文件后，必须对框架及框架文件进行保存，在Dreamweaver 8中保存框架及框架文件，如果像保存普通文件一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将丢失，所以保存框架的方法是非常重要的。 (1) 选择【文件】|【保存全部】命令。 (2) 弹出【另存为】对话框，此时整个框架边框会出现一个阴影框，因为阴影出现在整个框架集内侧，所以询问的是框架集的名称，在【文件名】文本框中输入index.html。 (3) 单击【保存】按钮，此时右边框架内出现虚线，提示保存右边的框架，在【文件名】文本框中输入right.html。 (4) 单击【保存】按钮，此时左边框架内出现虚线，提示保存左边的框架，在【文件名】文本框中输入left.html。 (5) 单击【保存】按钮，此时顶部框架内出现虚线，提示保存顶部的框架，在【文件名】文本框中输入top.html。 (6) 单击【保存】按钮，整个框架保存完毕。,7.2 改变框架属性,在浏览中无法看到创建的框架，同时不能调整框架的大小，要改变这些属性，需要在【属性】面板中设置相应的选项。 7.2.1 设置框架属性 7.2.2 在框架中输入内容,7.2.1 设置框架属性,在对框架进行设置的时候，首先要选取所要进行属性设置的框架集，选中框架后，在【属性】面板中将显示框架的相关参数。 在框架【属性】面板中的可以进行如下设置。 【框架名称】：指定框架名称用来作为链接指向的目标。 【源文件】：确定框架的源文档，可以直接输入名字，或单击文本框右侧的按钮，查找并选取文件。也可以通过将鼠标指针置于框架内，选择【文件】|【在框架中打开】命令打开文件。 【滚动】：设置框架内的内容溢出的时候是否出现滚动条。 【不能调整大小】：限定框架尺寸，防止用户拖动框架边框。 【边框】：用来控制当前框架边框。有【是】、【否】、和【默认】三个选项。 【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。 【边界宽度】：设置以像素为单位的框架边框和内容之间左右边距。 【边界高度】：设置以像素为单位的框架边框和内容之间上下边距。,7.2.2 在框架中输入内容,框架创建好以后，就可以添加内容了，每个框架的内部内容就是一个文档，可以直接往里边添加内容，也可以在框架内打开已经存在的文档。在框架中输入内容的具体操作步骤如下。 (1) 打开7.1.1节创建的框架文档。 (2) 将鼠标指针置于顶部框架中，选择【修改】|【页面属性】命令，弹出【页面属性】对话框，在对话框中将【左边距】、【上边距】分别设置为0。 (3) 单击【确定】按钮，在顶部框架中输入内容。 (4) 同以上步骤，分别在左侧和右侧的框架中输入内容，如图7.13所示。 (5) 保存文档，按F12键在浏览器中预览效果。,7.3 框架和框架集,在Dreamweaver中有两种创建框架集的方法，既可以从预定义的框架集中选择，也可以自定义框架集，选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架布局的最简单方法。 7.3.1 创建自定义框架集 7.3.2 嵌套框架集,7.3.1 创建自定义框架集,创建自定义框架集的具体操作步骤如下。 (1) 选择【修改】|【框架页】|【拆分上框架】命令，如图7.15所示。 (2) 选择该命令后，效果如图7.16所示。,7.3.2 嵌套框架集,在另一个框架集之内的框架集称作嵌套的框架网页，一个框架集文件可以包含多个嵌套的框架集，大多数使用框架的网页实际上都使用嵌套的框架，并且在Dreamweaver中大多数预定义的框架集也使用嵌套。如果在一组框架中，不同行或不同列中有不同