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

《网页设计基础教程与上机指导第版创建框架网页.ppt》由会员分享，可在线阅读，更多相关《网页设计基础教程与上机指导第版创建框架网页.ppt（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、http:/网页设计基础教程与上机指导第版创建框架网页 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示：在一个网页中，有时候并不是所有的内容都需要改教学提示：在一个网页中，有时候并不是所有的内容都需要改变，如网页的导航栏、网页标题部分是不需要改变的。如果在变，如网页的导航栏、网页标题部分是不需要改变的。如果在每个网页中都重复插入这些元素，就会浪费时间，在这种情况每个网页中都重复插入这些元素，就会浪费时间，在

2、这种情况下使用框架就会解决以上问题。框架的作用主要用来增强网页下使用框架就会解决以上问题。框架的作用主要用来增强网页的导航功能，对于那些每个页面都包含有相同的导航菜单的网的导航功能，对于那些每个页面都包含有相同的导航菜单的网站来说，利用框架可以把导航菜单条放到一个框架中，而把内站来说，利用框架可以把导航菜单条放到一个框架中，而把内容放到另外一个框架中，这样切换菜单时，菜单条的框架不做容放到另外一个框架中，这样切换菜单时，菜单条的框架不做任何改变，而只改变内容框架部分。任何改变，而只改变内容框架部分。n教学目标：教学目标：掌握框架网页的创建掌握框架网页的创建掌握框架的选择掌握框架的选择掌握设置框

3、架和框架集的属性掌握设置框架和框架集的属性掌握编辑框架掌握编辑框架http:/7.1 框架网页的创建框架网页的创建n框架的作用就是把浏览器窗口划分为若干个区域，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。当在文件中每个区域可以分别显示不同的网页。当在文件中建立框架时，建立框架时，Dreamweaver可以创建一个无标可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，题的框架集文件，在每个框架中创建无标题文件，如果某个页面被划分成如果某个页面被划分成2个框架，它实际上包含的个框架，它实际上包含的却是却是3个独立的文件：一个框架集文件和两个框架个独立的文件

4、：一个框架集文件和两个框架内容文件。框架内容文件包含了将出现在页面框内容文件。框架内容文件包含了将出现在页面框架中的内容。架中的内容。n7.1.1 创建框架创建框架n7.1.2 保存框架保存框架http:/7.1.1 创建框架创建框架n框架网页有两个主要部分框架网页有两个主要部分Frameset（框架集）和（框架集）和Frames（框（框架）组成。框架集是在一个文档内定义一组框架结构的架）组成。框架集是在一个文档内定义一组框架结构的HTML网页，框架是每个单独的网页文档。创建框架集的具体操作步网页，框架是每个单独的网页文档。创建框架集的具体操作步骤如下。骤如下。(1)选择【文件】选择【文件】|

5、【新建】命令，弹出【新建文档】对话框，如图【新建】命令，弹出【新建文档】对话框，如图7.1所示。所示。(2)在对话框中选择【常规】选项卡中的【框架集】选项，在【框架集在对话框中选择【常规】选项卡中的【框架集】选项，在【框架集】列表框中选择【上方固定，左侧嵌套】选项，如图】列表框中选择【上方固定，左侧嵌套】选项，如图7.2所示。所示。(3)单击【创建】按钮，创建一框架网页。单击【创建】按钮，创建一框架网页。http:/7.1.2 保存框架保存框架n当编辑完框架及框架文件后，必须对框架及框架文件进行保存，当编辑完框架及框架文件后，必须对框架及框架文件进行保存，在在Dreamweaver 8中保存框

6、架及框架文件，如果像保存普通中保存框架及框架文件，如果像保存普通文件一样保存框架，只会保存鼠标所定位的框架内容，其余的文件一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将丢失，所以保存框架的方法是非常重要的。框架内容将丢失，所以保存框架的方法是非常重要的。(1)选择【文件】选择【文件】|【保存全部】命令。【保存全部】命令。(2)弹出【另存为】对话框，此时整个框架边框会出现一个阴影框，因弹出【另存为】对话框，此时整个框架边框会出现一个阴影框，因为阴影出现在整个框架集内侧，所以询问的是框架集的名称，在【文件为阴影出现在整个框架集内侧，所以询问的是框架集的名称，在【文件名】文本框中输入名

7、】文本框中输入index.html。(3)单击【保存】按钮，此时右边框架内出现虚线，提示保存右边的框单击【保存】按钮，此时右边框架内出现虚线，提示保存右边的框架，在【文件名】文本框中输入架，在【文件名】文本框中输入right.html。(4)单击【保存】按钮，此时左边框架内出现虚线，提示保存左边的框单击【保存】按钮，此时左边框架内出现虚线，提示保存左边的框架，在【文件名】文本框中输入架，在【文件名】文本框中输入left.html。(5)单击【保存】按钮，此时顶部框架内出现虚线，提示保存顶部的框单击【保存】按钮，此时顶部框架内出现虚线，提示保存顶部的框架，在【文件名】文本框中输入架，在【文件名】

8、文本框中输入top.html。(6)单击【保存】按钮，整个框架保存完毕。单击【保存】按钮，整个框架保存完毕。http:/7.2 改变框架属性改变框架属性n在浏览中无法看到创建的框架，同时不能调整在浏览中无法看到创建的框架，同时不能调整框架的大小，要改变这些属性，需要在【属性框架的大小，要改变这些属性，需要在【属性】面板中设置相应的选项。】面板中设置相应的选项。n7.2.1 设置框架属性设置框架属性n7.2.2 在框架中输入内容在框架中输入内容http:/7.2.1 设置框架属性设置框架属性n在对框架进行设置的时候，首先要选取所要进行属性设置的框架集，在对框架进行设置的时候，首先要选取所要进行属

9、性设置的框架集，选中选中框架后，在框架后，在【属性属性】面板中将显示框架的相关参数。面板中将显示框架的相关参数。n在框架【属性】面板中的可以进行如下设置。在框架【属性】面板中的可以进行如下设置。【框架名称】：指定框架名称用来作为链接指向的目标。【框架名称】：指定框架名称用来作为链接指向的目标。【源文件】：确定框架的源文档，可以直接输入名字，或单击文本框右【源文件】：确定框架的源文档，可以直接输入名字，或单击文本框右侧的按钮，查找并选取文件。也可以通过将鼠标指针置于框架内，选择侧的按钮，查找并选取文件。也可以通过将鼠标指针置于框架内，选择【文件】【文件】|【在框架中打开】命令打开文件。【在框架中

10、打开】命令打开文件。【滚动】：设置框架内的内容溢出的时候是否出现滚动条。【滚动】：设置框架内的内容溢出的时候是否出现滚动条。【不能调整大小】：限定框架尺寸，防止用户拖动框架边框。【不能调整大小】：限定框架尺寸，防止用户拖动框架边框。【边框】：用来控制当前框架边框。有【是】、【否】、和【默认】三【边框】：用来控制当前框架边框。有【是】、【否】、和【默认】三个选项。个选项。【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。【边界宽度】：设置以像素为单位的框架边框和内容之间左右边距。【边界宽度】：设置以像素为单位的框架边框和内容之间左右边距。

11、【边界高度】：设置以像素为单位的框架边框和内容之间上下边距。【边界高度】：设置以像素为单位的框架边框和内容之间上下边距。http:/7.2.2 在框架中输入内容在框架中输入内容n框架创建好以后，就可以添加内容了，框架创建好以后，就可以添加内容了，每个框架的内部内容就是一个文档，可每个框架的内部内容就是一个文档，可以直接往里边添加内容，也可以在框架以直接往里边添加内容，也可以在框架内打开已经存在的文档。在框架中输入内打开已经存在的文档。在框架中输入内容的具体操作步骤如下。内容的具体操作步骤如下。(1)打开打开7.1.1节节创建的框架文档。创建的框架文档。(2)将鼠标指针置于顶部框架中，选择将鼠标

12、指针置于顶部框架中，选择【修改】【修改】|【页面属性】命令，弹出【页【页面属性】命令，弹出【页面属性】对话框，在对话框中将【左边面属性】对话框，在对话框中将【左边距】、【上边距】分别设置为距】、【上边距】分别设置为0。(3)单击【确定】按钮，在顶部框架中单击【确定】按钮，在顶部框架中输入内容。输入内容。(4)同以上步骤，分别在左侧和右侧的同以上步骤，分别在左侧和右侧的框架中输入内容，如图框架中输入内容，如图7.13所示。所示。(5)保存文档，按保存文档，按F12键在浏览器中预览键在浏览器中预览效果。效果。http:/7.3 框架和框架集框架和框架集n在在Dreamweaver中有两种创建框架集

13、的方法，中有两种创建框架集的方法，既可以从预定义的框架集中选择，也可以自定既可以从预定义的框架集中选择，也可以自定义框架集，选择预定义的框架集将自动设置创义框架集，选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建布局所需的所有框架集和框架，它是迅速创建基于框架布局的最简单方法。建基于框架布局的最简单方法。n7.3.1 创建自定义框架集创建自定义框架集n7.3.2 嵌套框架集嵌套框架集http:/7.3.1 创建自定义框架集创建自定义框架集n创建自定义框架集的具体操作步骤如下。创建自定义框架集的具体操作步骤如下。(1)选择【修改】选择【修改】|【框架页】【框架页】|【拆分

14、上框架】命令，如【拆分上框架】命令，如图图7.15所示。所示。(2)选择该命令后，效果如图选择该命令后，效果如图7.16所示。所示。http:/7.3.2 嵌套框架集嵌套框架集n在另一个框架集之内的框架集称作嵌套的框架网页，一个框架在另一个框架集之内的框架集称作嵌套的框架网页，一个框架集文件可以包含多个嵌套的框架集，大多数使用框架的网页实集文件可以包含多个嵌套的框架集，大多数使用框架的网页实际上都使用嵌套的框架，并且在际上都使用嵌套的框架，并且在Dreamweaver中大多数预定中大多数预定义的框架集也使用嵌套。如果在一组框架中，不同行或不同列义的框架集也使用嵌套。如果在一组框架中，不同行或不同列中有不同数目的框架，则使用嵌套的框架集，具体操作步骤如中有不同数目的框架，则使用嵌套的框架集，具体操作步骤如下。下。(1)打开如图打开如图7.17所示的框架网页文档。所示的框架网页文档。(2)将鼠标指针置于右侧框架中，选择【修改】将鼠标指针置于右侧框架中，选择【修改】|【框架页】【框架页】|【拆分下【拆分下框架】命令，如图框架】命令，如图7.18所示。所示。(3)选择后，可以看到嵌套框架效果。选择后，可以看到嵌套框架效果。