《DW中应用框架技术制作网页.ppt》由会员分享，可在线阅读，更多相关《DW中应用框架技术制作网页.ppt（45页珍藏版）》请在三一办公上搜索。
1、DW中应用框架技术制作网页,1,2,3,框架和框架集的创建,认识框架和框架集,框架和框架集的基本操作,4,框架和框架集的属性设置,5,嵌入式框架Iframe,5,框架的链接,6,1 认识框架和框架集,框架是网页中常使用的效果。框架是浏览器窗口中的一个区域，在框架中可以显示其他的网页。框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面地址。框架集文件本身不包含要在浏览器中显示的Web页内容（对不能显示框架的浏览器进行的处理除外，即部分）。框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。,下面的实例
2、显示了一个使用框架的网页。这是由三个框架组成的框架布局，一个框架横放在顶部，其中包含 Web 站点的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架占据了页面的大部分，其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。,框架不是文件。很可能会以为当前显示在框架中的文档是构成框架的一部分，但该文档实际上并不是框架的一部分。框架是存放文档的容器，任何一个框架都可以显示任意一个文档。,框架集可以嵌套定义，以便将浏览器窗口划分出更多的区域。框架技术主要通过两种类型的元素来实现，一个是框架集(由标签定义)，一个是框架(由标签定义)。前者定义如何划分框架，后者定义框架的具体属性
3、。,框架集与框架的基本语法 您的浏览器不支持框架！,框架集的主要应用类型,框架的优缺点,在网页中使用框架具有以下优点：使网页结构清晰，易于维护和更新。访问者的浏览器不需要为每个页面重新加载与导航相关的图形。每个框架网页都具有独立的滚动条，因此访问者可以独立控制各个页面。,在网页中使用框架也具有一些缺点：某些早期的浏览器不支持框架结构的网页。下载框架式网页速度慢。不利于内容较多、结构复杂页面的排版。大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。,2 框架和框架集的创建,创建框架前的准备工作打开“框架”面板。选择窗口框架命令即可打开框架面板。使用框架面板可以进行选取
4、、观察、修改框架等基本操作。在对框架进行操作时最好一直打开框架面板。打开“框架边框”。选择查看可视化助理框架边框菜单命令，即可在当前文档中显示出框架的边框,在Dreamweaver中有两种创建框架集的方法，既可以从若干预定义的框架集中选择，也可以自己设计框架集。选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架的布局的最简单方法。只能在“文档”窗口的“设计”视图中插入预定义的框架集。,2.1 插入预定义的框架集,要创建预定义的框架集并在某一框架中显示现有文档，可执行如下操作。（1）将插入点放置在文档中。（2）执行下列操作之一。从插入HTML框架菜单下的子菜单中选择
5、预定义的框架集样式；在“插入栏”的“布局”选项卡中，单击“框架”按钮 上的下拉箭头，然后选择预定义的框架集；将光标定位在一个框架中，选择修改框架集菜单的子菜单项中需要的项。,2.2 创建新的空预定义框架集,创建新的空预定义框架集的具体操作如下。（1）选择文件新建菜单命令。（2）在“新建文档”对话框“类别”列表中选择“框架集”选项。（3）从“框架集”列表选择相应的框架集。（4）单击 按钮。则框架集出现在文档中,2.3 将现有文档分割为框架,具体操作如下：（1）新建一个空白的HTML文档后，选择查看可视化助理框架边框菜单命令，即可在当前文档中显示出框架的边框。（2）拖动文档窗口四周的边框即可创建新
6、框架，在窗口中通过拖动文档窗口的边框创建出新框架。,（3）按住【Alt】键，在框架中单击，再拖动文档窗口上的边框，可创建出新框架。（4）将鼠标指向窗口的左上角，当光标变为形状时，按住鼠标不放向右下角拖动可创建新框架。,2.4 框架的嵌套,框架的嵌套是指一个框架集套在另一个框架集内。“上方固定，左侧嵌套”实际上就是一个嵌套的框架集，是在上下结构的框架集中嵌套一个左右结构的框架集。具体操作步骤如下：（1）将鼠标移至要创建嵌套框架集的框架内。（2）单击”插入”|“HTML”|“框架”|“左对齐”命令菜单，新插入一个框架集。此时，嵌套框架集制作完成。,3 框架的基本操作,框架的基本操作主要包括：1选取
7、框架或框架集 2删除框架 3调整框架大小 4保存框架,3.1 选取框架或框架集,框架面板中显示了所创建的框架的结构，并在不同的框架区域中显示框架的名称。当在框架文档中进行新建、删除某个现有框架，或修改框架的尺寸、名称等操作时，框架面板中的示意图会跟随变化。如果窗口中没有框架面板，可选择窗口框架菜单命令或按【Shift+F2】键打开框架面板。,在编辑窗口中选择在编辑窗口中选择框架的方法很简单，按住【Alt】键，在要选择的框架内单击鼠标左键即可。被选取的框架边框呈虚线显示。选择框架集时，单击框架边框即可，选取的所有框架边框呈虚线。,在“框架”面板中选择在“框架”面板中单击框架区域中的任意位置即可选
8、择框架，选中的框架以粗黑框显示。在“框架”面板中单击框架边框即可选择框架集，如果要选择整个框架集，只需单击框架最外面的边框即可。,除了前面两种选取方法外，还可以在选取一个框架的基础上用快捷键选取其他框架，其方法为：按住【Alt】键再按键盘上的左右方向键即可选取同级框架或框架集；按住【Alt】键再按键盘上的向上方向键可以从文档编辑状态、框架、框架集逐步扩大范围选取，即升级选取，反之按向下方向键就是降级选取。,3.2 删除框架,删除框架 如果窗口中有不需要的框架，可将其删除，用鼠标将要删除框架的边框拖到父框架边框上或拖离页面即可。,3.3 调整框架大小,插入框架后，会发现框架的大小并不一定符合要求
9、，因此需要将框架的大小做适当的调整。方法为：将鼠标指针移到要调整的框架边框线上，在出现双箭头后，按住鼠标左键左/右（或上/下）拖拽即可。,3.4 保存框架,保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。,保存框架,将插入点定位到要保存的框架中。选择文件保存框架菜单命令，在打开的“另存为”对话框中像保存其他网页一样指定保存路径和文件名，然后单击“保存”按钮即可。,保存框架集,选中要保存的框架集。选择文件保存框架页菜单命令，打开“另存为”对话框。在“保存在”下拉列表框中选择框架集的保存路径，在“文件名”文本
10、框中为框架集命名。单击“保存”按钮即可保存框架集。,保存框架集中的所有网页,要保存框架集中的所有文档，只需选择文件保存全部菜单命令即可。如果框架集中有框架文档未被保存，则会出现“另存为”对话框，提示保存该文档。如果有多个文档未保存，则会依次打开多个“另存为”对话框。当所有的文档都已保存，Dreamweaver直接以原先保存的框架名保存文档，不再出现“另存为”对话框。,4 框架和框架集的属性设置,在Dreamweaver中，可以使用“框架”属性面板来定义框架的名称、源文件、页边距等属性。使用“框架集”属性面板可以定义框架集边线颜色、宽度等属性。,4.1 设置框架集属性,使用框架集属性面板可以查看
11、和设置大多数框架集属性。其具体操作如下：（1）选择框架集打开“框架集”属性面板。,（2）在“框架集”属性面板中按需要进行更改。各参数功能如下。边框：确定在浏览器中查看文档时在框架周围是否应显示边框。要显示边框，则选择“是”；要使浏览器不显示边框，则选择“否”；要允许浏览器确定如何显示边框，则选择“默认值”。边框宽度：指定框架集中所有边框的宽度。边框颜色：设置边框的颜色。使用颜色选择器选择一种颜色，或者输入颜色的十六进制值。若要设置选定框架集的各行和各列的框架大小，可单击“行列选择范围”区域左侧或顶部的选项卡，然后在“值”数值框中输入高度或宽度。,若要指定浏览器分配给每个框架的空间大小，从“单位
12、”下拉列表中选择以下选项。像素：将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架（例如导航条）而言，此选项是最佳选择。百分比：指定选定列或行应相当于其框架集的总宽度或总高度的百分比。相对：指定在为“像素”和“百分比”框架分配空间后，为选定列或行分配其余可用空间；剩余空间在大小设置为“相对”的框架中按比例划分。（3）设置完成每一项参数设置后可按【Enter】键进行应用。,4.2 框架集文档标题的设置,要设置框架集文档的标题，可执行如下操作。（1）选择要设置框架集文档的标题的框架集。（2）在“文档”工具栏的“标题”文本框中输入框架集文档的名称即可。当访问者在浏览器中查看该框架集时，
13、标题将显示在浏览器的标题栏中。,4.3 框架的属性设置,选中要设置属性的框架，框架属性面板如图所示。,设置框架属性的具体操作如下。（1）在“框架名称”文本框中可给选取的框架命名。设置的框架名称可以被JavaScript程序引用，也可以作为打开链接的目标框架名。框架名只能是字母、下划线符号等组成的字符串，但必须以字母开头。不能出现连字号、句点及空格。不能使用JavaScript的保留关键字，如top或navigator等。（2）在“源文件”文本框中显示框架源文件的URL地址，也可单击 按钮重新指定框架源文件的地址。,（3）在“滚动”下拉列表中设置框架出现滚动条的方式。（4）选中复选框则不能在浏览
14、器中通过拖动框架边框来改变框架大小。如果清除该复选框，则可以通过拖动框架的边框来改变其大小,4.4 处理不能显示框架的浏览器,由于在低版本的浏览器中不能正确显示使用了框架的网页和框架中的内容，因此在Dreamweaver 8中允许指定在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示内容。此类内容存储在框架集文件中，用标签括起来。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用标签括起来的内容。,5 框架的链接,在使用了框架技术文档中的链接与一般文档中的链接不同，增加了与框架有关的链接目标，可以在一个框架内使用链接改变另一个框架的内容。,_blank：在新的浏览器窗口中打开链接的文档
15、，同时保持当前窗口不变。_parent：在显示链接框架的父框架集中打开链接的文档，同时替换整个框架集。_self：在当前框架中打开链接，同时替换该框架的内容。_top：在当前浏览器的窗口中打开该链接的文档，同时替换掉整个框架集。,mainFrame 在框架集的主框架中打开链接的文档，同时替换掉主框架中原来所显示的文档。leftFrame：在框架集的左框架中打开链接的文档，同时替换掉左框架中原来显示的内容。topFrame：在框架集的上框架中打开链接的文档，同时替换掉上框架中原来显示的文档。如果在框架集中还定义了其它的框架，那么在此还会显示出其它框架的名称。,6 嵌入式框架Iframe,嵌入式框
16、架（标签为）也是框架的一种形式。它与普通框架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。,在DW中添加Iframe标签的步骤：将光标定位在需要插入Iframe的地方选择插入 标签 HTML标签 页元素 iframe需要将相关元素链接到Iframe时，可在”目标”文本框中输入iframe的名称。,标签的属性src：文件的路径，既可是HTML文件，也可以是文本、ASP等；width、height：浮动框架的宽与高；scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;marginwidth、marginheight：设置浮动边框与邻近元素的横向和纵向距离，为了让浮动边框与邻近元素很好的融合，常设置为0,
