dreamweavercs3教程第10章网页框架frame

dreamweavercs3教程第10章网页框架frame

ID:20270882

大小:1.37 MB

页数:22页

时间:2018-10-11

dreamweavercs3教程第10章网页框架frame_第1页
dreamweavercs3教程第10章网页框架frame_第2页
dreamweavercs3教程第10章网页框架frame_第3页
dreamweavercs3教程第10章网页框架frame_第4页
dreamweavercs3教程第10章网页框架frame_第5页
资源描述:

《dreamweavercs3教程第10章网页框架frame》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第10章网页框架Frame在网页中,一个网页可以包含多个页面,此时需要用到框架。使用框架可以进行页面布局,把网页化分为几个区域。例如,一个水平框架用于放置Banner(也就是标题);左垂直框架用于放置导航;右垂直框架用于放置正文。每一个框架单独使用一个网页,从而使页面设计简单化。框架除了用于页面布局,还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。本章将介绍框架的使用方法。10.1创建框架一个完整的框架页面应该包括两个部分:框架和框架集。前面介绍了框架集的作用,它用来定义框架的各种属性。在网页中框架集是不可见的,显示出

2、来的只是各个框架。框架集本身是一个网页再加上框架的目标页面,所以一个完整的框架集包含有多个页面。10.1.1自定义框架在创建自定义框架之前,首先确定是否打开框架可视元素。如果没有,需要按照以下步骤进行操作:单击【查看】

3、【可视化助理】

4、【框架边框】命令,使其处于选中状态。此时,页面中可以显示框架边框。创建自定义框架的具体步骤如下:自定义左右框架效果自定义上下框架效果10.1.2预定义框架在DreamweaverCS3中,系统预定义了13种框架类型。通过插入栏中【布局】标签的框架按钮,可以为页面设置框架,具体步骤如下:框架子菜单【框架标签辅助功能属性】对话框10.1.

5、2预定义框架单击【确定】按钮,完成创建预定义框架,效果如图左所示。按照以上步骤,可以创建其他类型框架,如左侧和嵌套的顶部框架,效果如图右所示。顶部和嵌套的左侧框架效果左侧和嵌套的顶部框架效果10.1.3自定义嵌套框架前面介绍了框架的创建方法,使用系统预定义的方法可以快速创建出复杂的框架。但是预定义框架有时并不能完全满足需要,此时需要创建自定义框架。框架像表格一样可以多重嵌套,具体步骤如下:下框架嵌套框架效果多重嵌套框架效果10.2框架源码前一小节介绍如何创建框架集和框架,接下来查看构成框架的源码会有怎样的变化。本小节将介绍框架源码,以10.1.3小节的实例进行讲解,

6、打开实例框架集.从源码中可以看出,网页中有两个陌生的标签和。其中标签用于设置框架集,标签用于设置框架。这些标签都是成对出现,如果不结束标签可能会造成页面混乱。标签包含rows和cols两个属性,这两个属性分别用于设置水平拆分和垂直拆分框架,还用于设置框架的尺寸。10.2框架源码标签有多个属性,其使用语法如表。(续表)10.3调整框架前面了解了如何创建框架。新创建的框架需要进行一些调整才能符合设计的要求,如框架结构、尺寸大小和数量等。在实际应用中,还需要对框架集及其属

7、性进行修改。本节将介绍如何调整框架以适合需要。10.3.1选择框架修改对象属性时首先选中对象。对框架集或框架进行修改时,首先选中框架对象。选中框架集时,其所有框架边框显示出虚线,表示该框架处于选中状态。同样当框架选中时,也会显示虚线,表示选中,效果如图10.9所示。【框架】面板嵌套框架效果10.3.1选择框架选中一个框架后,可以结合Alt键和方向键进行框架选择的切换。选中第一层框架集效果选中最右下方框架效果10.3.2保存框架设计好框架页面后,要保存框架。因为框架页面包含了多个网页,所以保存时与普通页面不一样。在DreamweaverCS3中可以保存一个框架集,也可

8、以单独保存一个框架,还可以保存所有的框架集及框架。最快捷的方式是保存框架集。保存框架集的具体步骤如下:单击框架边框选中框架集。单击【文件】

9、【框架集另存为】命令,弹出【另存为】对话框。输入路径及名称,单击【确定】按钮。如果框架集已经保存过,单击【文件】

10、【保存框架集】命令。10.3.3设置框架集插入框架集后,需要对框架集进行一些设置,如边框架有无、大小和颜色等。在DreamweaverCS3中,可通过框架集的【属性】面板进行设置。框架集的【属性】面板如图所示。边框集属性设置效果预览效果10.3.4设置框架设置框架集后,同样也需要设置框架的属性。例如,设置框架的名称、

11、尺寸大小、边框和滚动条等属性。接着上一小节中的实例设置框架属性,具体步骤如下:框架滚动条效果框架属性设置效果10.3.5命名框架集页面在DreamweaverCS3中,不能通过【属性】面板进行命名,而是通过设计视图工具栏和页面属性来进行设置。设计视图工具栏设置的具体步骤如下:设计视图工具栏框架集标题效果10.3.6修改框架尺寸前面介绍通过【属性】面板可以修改框架的尺寸,还可通过拖动鼠标进行框架的大小修改,具体步骤如下:调整框架尺寸10.3.7使用无框架内容当浏览器不支持框架元素时,可以设置提示信息,告诉浏览者浏览的页面不能正常显示。此时通过编辑无框架内容来提示浏

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。