《第12章使用框架》由会员分享，可在线阅读，更多相关《第12章使用框架（14页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS3网页设计网页设计第第12章章 使用框架使用框架框架用来拆分浏览器窗口，在不同的区域显示不同的网页。框架的使用让网页的组织变得更加有序。框架可以更好地组织结构比较复杂的网站页面。一般可以将导航页面放置在某个框架之中，单击其中的某个链接，链接的网页将出现在另外的框架中，而导航页面本身不发生变化。Dreamweaver CS3网页设计网页设计教学目标教学目标能创建框架能创建框架 Dreamweaver CS3网页设计网页设计12.1 创建框架的步骤 创建框架和创建普通网页有所区别，其具体的创建顺序如下：创建框架结构：首先需要创建一个新网页，该网页将作为控制框架结构的页面
2、，然后在Dreamweaver中将对该网页进行拆分，从而获得自己需要的框架结构设置框架集和框架的属性：接着给每个框架指定或新建一个显示具体内容的页面创建链接：然后给每个框架命名，通过“属性”面板给文本和图像指定链接保存框架网页：最后将所有的框架网页文件保存起来Dreamweaver CS3网页设计网页设计12.2 创建框架 1.创建框架结构在Dreamweaver窗口中新建一个文件，然后在该文件中创建框架结构。创建框架结构的两种方法：使用预设方式创建框架结构自定义框架结构Dreamweaver CS3网页设计网页设计12.2.1 创建框架结构使用预设方式 2、选择“左侧和嵌套的顶部框架”命令，
3、打开“框架标签辅助功能属性”对话框，在其中为每个框架设定一个标题1、将“插入”工具栏，切换到“布局”插入工具栏，在其中单击“框架”按钮旁的下拉按钮，此时将展开一个框架下拉列表3、如果要调整框架的宽度或高度，可直接用鼠标拖动框架的边框Dreamweaver CS3网页设计网页设计12.2.1 创建框架结构-自定义框架结构操作步骤：将鼠标置于网页编辑窗口边缘，当出现双向箭头时将框架边框拖动到适当的位置，框架结构就创建出来了将光标放在右侧框架网页中，然后在“布局”插入工具栏上展开“框架”下拉列表，在其中选择“顶部框架”命令，此时将在右侧的框架中插入一个嵌套的子框架Dreamweaver CS3网页设
4、计网页设计12.2.1 删除框架 如果要删除框架，只要将光标放置于要删除的框架的边框之上，然后拖动框架边框到父边框或是网页编辑窗口边缘，即可删除该框架结构Dreamweaver CS3网页设计网页设计12.2.2 设置框架集的属性设置框架集的属性需要在“属性”面板中完成各参数含义：边框：用来设定框架是否有边框边框宽度：用来设定框架结构中边框的宽度，单位是像素边框颜色：用来设定边框的颜色Dreamweaver CS3网页设计网页设计12.2.2 设置框架集的属性操作步骤：选择菜单命令“窗口”“框架”，打开“框架”面板单击其中框架最外侧的边框，此时在“属性”面板中修改最高一层的框架集属性：边框为“
5、否”，“边框宽度”为0，左侧的矩形状将“值”改为170像素，而右侧的矩形状，将值改为“1”相对在“框架”面板上单击垂直方向的边框，选中第2级框架集，在“属性”面板上设定“边框”为“否”，“边框宽度”为0，两行高度的顶部高度设为30像素，底部框架的“单位”设为“相对”，“值”设为1Dreamweaver CS3网页设计网页设计12.2.3 设置框架的属性在“框架”面板上单击左侧框架，选中该框架将左侧的框架重命名为leftFrame，指定“源文件”为navigator.html用同样的方法指定顶部框架名称为topFrame，指定“源文件”为FrameTop.htm再指定右侧下部框架名为rightF
6、rame，“源文件”为desktop.htmDreamweaver CS3网页设计网页设计12.2.4 设置无框架内容有些浏览器并不支持框架，对于这样的浏览器应该给一些提示信息，让这部分浏览者也能够 了解框架网页的大致内容。通过设置无框架内容可解决此问题。操作步骤：在框架网页的编辑窗口下，选择菜单命令“修改”“框架页”“编辑无框架内容”，此时网页框架消失，同时出现完整的编辑窗口，窗口上方标注“无框架内容”此时就可以和编辑普通网页一样，在其中添加或编辑无框架时显示的内容。一般都是一些提示性的信息，让浏览者知道自己的浏览器不支持框架即可完成无框架内容编辑后，再次选择菜单命令“修改”“框架页”“编辑
7、无框架内容”就可退出编辑无框架内容状态Dreamweaver CS3网页设计网页设计12.2.5 框架内的链接此时每个框架网页都是一个单独的网页，在对框架网页进行编辑时，只需将光标放在框架中的页面内，就可以和编辑普通页面一样对框架网页进行编辑。这里我们在左侧的页面中给“文本“基本情况”添加链接，当单击该链接后，将在右侧的框架中显示update.html。Dreamweaver CS3网页设计网页设计12.2.5 框架内的链接操作步骤选中文字“基本情况”，在“属性”面板上“链接”文本框中指定要链接的网页update.html打开“目标”下拉列表，选择rightFrame选项即可Dreamweaver CS3网页设计网页设计12.2.6 保存框架选择菜单命令“文件”“保存全部”，在打开的“另存为”对话框中，在其中指定文件名为index.html，保存在相应的目录中即可。
