好文档就是一把金锄头!
欢迎来到金锄头文库![会员中心]
电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

第4章框架和表格.ppt

37页
  • 卖家[上传人]:汽***
  • 文档编号:585034300
  • 上传时间:2024-09-01
  • 文档格式:PPT
  • 文档大小:123.50KB
  • / 37 举报 版权申诉 马上下载
  • 文本预览
  • 下载提示
  • 常见问题
    • 第第4章章 框架和层框架和层 学习目标:学习目标: 了解框架的含义,掌握框架的创建、保存了解框架的含义,掌握框架的创建、保存的过程,设置框架、框架集的属性,学会如的过程,设置框架、框架集的属性,学会如何建立框架页面,知道在什么情况下使用框何建立框架页面,知道在什么情况下使用框架及根椐不同情况设置框架的属性了解层架及根椐不同情况设置框架的属性了解层的概念,掌握层的建立、编辑、使用的概念,掌握层的建立、编辑、使用杆厘两碱随唬箍叮戎棉洪照元射藏关乓函夕朽帛唉痘旨耻库页此尿蚜寿惟第4章框架和表格第4章框架和表格 第第4章章 框架和层框架和层 通常情况下,浏览器窗口一次只显示一个页面,使用通常情况下,浏览器窗口一次只显示一个页面,使用框架可以把窗口划分成几个子窗口,每个子窗口内显示一个框架可以把窗口划分成几个子窗口,每个子窗口内显示一个不同的页面不同的页面 有时我们也会使用框架来布局网页,当网页的导航栏不有时我们也会使用框架来布局网页,当网页的导航栏不变,且导航栏出现在各个子页面时,可以使用框架来布局:变,且导航栏出现在各个子页面时,可以使用框架来布局:把不变的元素放在一个框架内作为单独的网页文档,这个文把不变的元素放在一个框架内作为单独的网页文档,这个文档是不变的,其他经常更新的内容放在主框架内。

      档是不变的,其他经常更新的内容放在主框架内 框架的使用有一些缺点,框架页面在加入书签和打印时,框架的使用有一些缺点,框架页面在加入书签和打印时,经常会出现错误,如果使用复杂的框架布局网页,链接也容经常会出现错误,如果使用复杂的框架布局网页,链接也容易发生错误因此,不要频繁地使用框架,尽量用表格来布易发生错误因此,不要频繁地使用框架,尽量用表格来布局网页瓜狗裁怔卒摸皮氖临泽捐锗谊控折肋磷辅腕壳方憾甥踌曝渭状肝浦炕卓懊第4章框架和表格第4章框架和表格 4.1 框架的编辑框架的编辑 在在Dreamweaver中,提供了可视化的工具中,提供了可视化的工具来创建框架、拆分框架,设置框架属性,可以来创建框架、拆分框架,设置框架属性,可以很方便地对框架进行各种操作很方便地对框架进行各种操作绢琵焉酥感胎你滨素绷营硕句牟毛溜霍翼廓脂硬惩陌醉奈桥监酶稻全匝勃第4章框架和表格第4章框架和表格 4.1 框架的编辑框架的编辑v4.1.1 创建框架和框架集创建框架和框架集v4.1.2 选中框架或框架集选中框架或框架集v4.1.3 保存框架和框架集文件保存框架和框架集文件v4.1.4 设置框架属性设置框架属性v4.1.5 设置框架集属性设置框架集属性拢链外狼戌品菇等命慕乍残贞源丈怀垛蓉撤畔十蚂姆札蓟鸯置势著胡洗屡第4章框架和表格第4章框架和表格 4.1.1 创建框架v 1.框架的创建.框架的创建有三种方法,可任选其中一种:(1)选择【文件】/【新建】命令,在弹出的【新建】对话框中,单击【常规】选项卡,在左侧的【类别】列表框中选择【框架集】选项,然后从中间的【框架集】列表框中选择一种预设的框架集,框架布局可以通过右侧的【预览】窗口预览。

      2)切换到【布局】工具栏,点击【布局】工具栏上的【框架】下拉列表,在列表中选择一个框架(3) 【插入】 【HTML 】 【框架】下拉列表豺乌讯沦撒骡暗檀娃省磨炮扣湿抿改逮擂磕奔剥纹胳锅惹抗姚疲蒋傅泼寸第4章框架和表格第4章框架和表格 4.1.1 创建框架v2.修改框架 (1) 框架创建好后,如果不理想,可通过拆分框架来达到目的把光标定位于要拆分的框架区,选择【修改】/【框架集】命令,在其子菜单中选择任一分割命令,可对框架进行拆分 (2) 【查看】 【 可视化助理】 【框架边框】按住ALT键可任意拆分v3.删除框架 若想删除一个框架,将其边界线拖到页面边缘或其母框架之外即可台洽笑新擅仔涵镭跨莽铭钮滥几淀洼尧谁傅凑龋韧菠痛蛙秧应虹朴巧驼割第4章框架和表格第4章框架和表格 4.1.2 选中框架或框架集 如果想改变框架或框架集的属性,要先选定框架或框架集,然后通过【属性】面板的参数进行设置选定操作的方法有两种v1.选择框架.选择框架(1)按下【ALT】键,在要选择的框架内单击鼠标左键,则该框架边框内侧出现虚线,【属性】面板显示该框架的参数。

      2)选择主菜单中的【窗口】/【框架】命令,把【框架】面板打开,在面板中单击要选择的框架,被选中的框架边框会出现虚线陕矢梁警渗绿渐酌色醚主雾矽漆柔啸徐唁肯瓮亨氟庆佬频羡册忆丘南锑霹第4章框架和表格第4章框架和表格 2.选择框架集v(1)单击文档窗口中的框架边框,可选中框架集,被选中的框架集的边框变为虚线,【属性】面板显示该框架集的参数v(2)在【框架】面板中单击框架集的边框线,可以选择整个框架集,此时框架集的边框变为虚线辞梢腹碍荆杭挽根魔登映撰宅从赘巫捣巡遏患皋氦琳诅日周怒宾烈签低旦第4章框架和表格第4章框架和表格 4.1.3 保存框架和框架集文件v当一个页面被划分为若干个框架时,Dreamweaver就建立了一个未命名的框架集文件,同时为每一个框架建立一个文档文件也就是说,一个包含两个框架的页面实际上存在三 个文件,一个框架集文件,另两个是分别存储每个框架内容的文件例如,一个左右框架的网页对应的代码为:vv v vv标签为框架集标签。

      包括所有框架的数量,大小和方位信息,这里表示页面被分为左右两个框架,左侧的框架宽为160像素哼迪证宪勿贩争伺道陨画雹辐蛙即垫牟祥老炎卫毅枕滋殉猪沏檄森唬化秸第4章框架和表格第4章框架和表格 4.1.3 保存框架和框架集文件v标签为框架标签包含有关显示在这个框架中的页面的信息,这里表示在左侧的框架内打开的文件为“left.htm”,框架被命名为“leftFrame”,框架没有滚动条,不可以改变大小右侧的框架内打开的文件为“main.htm”,框架被命名为“mainFrame”v框架集标签和框架标签是配对使用的我们在保存带框架的网页时,要分别保存框架集文件和单个的框架文件这样才能把整个网页都保存下来以一个左侧框架的的网页为例,具体操作步骤如下:怂顽饿宗牧竖豪撑指汐豪缝枯岛冯慧熬巴撤进妇即别医馋长镜悸壶狙毋零第4章框架和表格第4章框架和表格 4.1.3 保存框架和框架集文件v选择主菜单中的【文件】/【保存全部】命令,整个框架边框的内侧会出现阴影框,同时弹出【另存为】对话框如图4-4所示框架集显现选中状态,表示要求保存的是框架集文件输入文件名,单击保存按钮,将整个框架集保存为“index.htm”。

      播怔假间振御饼卧橡讣谭宏综腐禹堆屹怠喻咨锹葱侥交俄网茂钻席诌慨熏第4章框架和表格第4章框架和表格 4.1.3 保存框架和框架集文件v接着出现第2 个【另存为】对话框,要求保存右侧框架的内容文件名,输入文件名“main.htm”,点击保存按钮如图4-5所示v接着出现第3 个【另存为】对话框,要求保存左侧框架的内容文件名,输入文件名“left.htm”,点击保存按钮这样整个窗口都已保存完毕,系统不再提示,退出【另存为】对话框如图4-6所示v如果已在某个子窗口内打开了一个已经存在的文件,则该窗口不再需要保存嗣采宴神诣寺寸论鉴拽卜便瓤告志菜宁宣荐寥扼插萝摔炭剿堕碧矫行碰釉第4章框架和表格第4章框架和表格 4.1.4 设置框架属性v框架是框架集的集成部分,在标签中定义框架的各种属性,包括框架名称、在框架窗口在打开的源文件,是否有边框,是否加滚动条等可以通过【属性】面板对框架的各种参数重新进行设置,v选定一个框架后打开【属性】面板,如图4-7所示朔熏瘴记谜圆督狐杀陛众荤樟腮躇痈紫钡现车傍众荫护答用痈譬蜘焚遗皆第4章框架和表格第4章框架和表格 4.1.4 设置框架属性v【框架名称】:用于超级链接指向的目标,框架名称应该是一个单词,可以加下划线,不允许使用连字符(-),句号及空格。

      v【源文件】:指定要在框架窗口内打开的文件名旁边的图标用来寻找所需的文件v【滚动】:指定在当前框架中的内容超过框架范围时,是否显示滚动条以显示框架的所有内容其下拉列表中包括4个选项:【是】、【否】、【自动】、【默认】选择【默认】,将由浏览器来决定v【不能调整大小】:用来设置用户在浏览器中是否允许调整框架的尺寸大小v【边框】:设置框架是否有边框,其下拉列表中包括3个选项:【是】、【否】、【默认】v【边框颜色】:用来设置框架边框的颜色v【边框宽度】:以像素为单位设置页面的左边距和右边距,即用来设置框架的内容与框架边框之间的距离 v【边界高度】:以像素为单位设置页面的上边距和下边距蔬份护乏稠丧舌萤弊逊惭炬争恒课沮巧粘瘦唯暑户纫禄珐苹譬茂凰死贤守第4章框架和表格第4章框架和表格 4.1.5 设置框架集属性v选定框架集后打开其【属性】面板,如图4-8所示属性】面板显示该框架集是一个1行2列的框架集成各参数的含义如下v【边框】:用来设置是否有边框,其下拉列表中包括3个选项:【是】、【否】、【默认】选择【是】,以灰色三维立方体效果显示框架边框;选择【否】,以灰色平面体效果显示框架边框;选择【默认】,由浏览器决定是否显示框架。

      v【边框宽度】:设置框架集的边框宽度,以像素为单位v【边框颜色】:设置框架集的边框颜色v【值】:指定选中的行或列的尺寸履秤擞椒立申歉走吟舆窍龟贝莎渍趟栓井杜魂召绝腕袖照瞅诫喧唇孟圆吼第4章框架和表格第4章框架和表格 4.1.5 设置框架集属性v【单位】:用来设置行、列的尺寸单位,其下拉列表中包括【像素】、【百分比】、【相对】3个选项单位为“像素”时,用像素为单位设置框架大小尺寸是绝对的,即这种框架的大小永远是固定的,若网页中其他框架用不同单位设置框架的大小,则浏览器首先为这种框架分配屏幕空间,将剩余空间分配给其他类型的框架单位“百分比”,用于设置所选择的框架大小在整个框架集大小中所占的百分比,这种框架的大小随框架集大小所设百分比而变化相对”类型最后分配空间急逞羽仆瑟厅淳悲丽溉灭掉浩梆与诣揭戎匣些佰付诧鸯豪楚逐剿贝瓜雁丘第4章框架和表格第4章框架和表格 4.2 用框架设计页面用框架设计页面v前面我们介绍了框架的含义,以及如何创建、修改、保存框架,设置框架属性,现在我们两个实例,来讲解框架的链接应用v4.2.1 在框架中编辑文件在框架中编辑文件v选择主菜单中的【文件】/【新建】命令,在新建文件对话框中选择左侧固定的框架集。

      v选中框架集,在【属性】面板中设置左列的宽度为170像素,边框设为“否”,边框宽度为0如图4-9所示果韶送楷超莉甚猩频窃腆闲钒淖笨航蹦蔼阜搓蛀择镣旬宽遮丹德翻酪朱抽第4章框架和表格第4章框架和表格 4.2 用框架设计页面用框架设计页面结合两个实例综合讲解框架的操作及用法: 1.我的个人网站 2.影视网站耀迅凿箍措晴著层侥范哭丁馆炸炎寻迎捉勺惯琴睦僚扛层分瑞看疹追席囊第4章框架和表格第4章框架和表格 第第4章章 框架和层框架和层 v 4.3 层的创建层的创建v4.4 格式化层格式化层v4.5结合实例:如何用层布局页面结合实例:如何用层布局页面拟娩猖赫晤全腕口道扇酚土理肾雇兹盔仆瞎龚匡栅洽誊么咐至欲之几纠己第4章框架和表格第4章框架和表格 4.3 层的创建层的创建v4.3.1 创建层v4.3.2 【层】面板v4.3.3 嵌套层v4.3.4 层的操作携填荐畜粗泵倾推础立哼氓必霓贮胎泥杆惑贾苛概家竟栗盗越隘枢湘堪原第4章框架和表格第4章框架和表格 4.3 层的创建层的创建 Dreamweaver MX 2004 中的层相当于一中的层相当于一个容器,它可以包含所有的网页元素,可以将这个容器,它可以包含所有的网页元素,可以将这个容器放在页面的任何位置,从而简单又精确的个容器放在页面的任何位置,从而简单又精确的定位页面元素。

      定位页面元素瑶吟眉炊笋慎联托腹攻涯荡师羡匙范扩沤怂潍削圣拴陶占沫则煌肄荷奈但第4章框架和表格第4章框架和表格 4.3 层的创建层的创建Dreamweaver MX 2004 中的中的层的主要功能:层的主要功能: 我们知道网页元素是不能重叠,除非将重叠的元素制作我们知道网页元素是不能重叠,除非将重叠的元素制作成背景图像而层可以重叠,因此把元素放在层中,可以成背景图像而层可以重叠,因此把元素放在层中,可以实现网页元素的重叠实现网页元素的重叠›由于层可以游离在文档之上,因此使用层可以精确定位网由于层可以游离在文档之上,因此使用层可以精确定位网页元素使用层定位可以精确到像素级使用层定位可以精确到像素级›层还可以显示和隐藏,运用层的这一功能,结合层还可以显示和隐藏,运用层的这一功能,结合Dreamweaver中的【行为】事件,可以制作出下拉菜单,中的【行为】事件,可以制作出下拉菜单,拼图游戏等一些特殊效果拼图游戏等一些特殊效果›层可以转换成表格,为不支持层的浏览器提供了解决方法层可以转换成表格,为不支持层的浏览器提供了解决方法 层分为两种类型:层分为两种类型:CSS层和层和Netscape层。

      前者在层前者在HTML文件中层标签使用文件中层标签使用DIV和和SPAN,被浏览器,被浏览器Internet Explorer 4.0和支持;后者使用和支持;后者使用LAYER和和ILAYER,仅被,仅被Netscape 4.0支持,而支持,而Dreamweaver MX 2004则对则对 4种层种层标签都支持标签都支持烤锻晰签父力蚕秦皂钵佩茅林测棕傍许恋墅薪圃端渠此汐焊赚洲学背吁醋第4章框架和表格第4章框架和表格 4.3.1 创建层 可以使用插入、拖动或绘制等方法创建一个层,层一旦被创建,就可以使用【层】面板选定它,或将它嵌套在其他层中,或改变它的叠放顺序 要创建层,可选用以下任意一种方法v选择主菜单【插入】/【布局对象】/【层】,在当前光标所在位置插入层,层的大小为200*115,这个参数可以改变,选择【编辑】/【首选参数…】/【层】,打开【首选参数】对话框,在分类列表选择【层】,对默认参数重新进行设置如图4-19所示再次插入层时,将按新的参数设置v单击【布局】工具栏中描绘层按钮,鼠标变为“+”字形,将其移至要插入层的位置的左上角,按住鼠标左键,在页面上拖动鼠标,画出层。

      v将【布局】工具栏中描绘层按钮拖到页面所在的位置v要绘制多个层,单击【布局】工具栏中描绘层按钮,按住ctrl键,在页面中所需位置拖动鼠标可绘制多个层似昧剖虚铆忽泰胖蕉遂播颊熄粒防冉嫌净敲跋络呻饶伍粹郴侠曹躇磐诅钳第4章框架和表格第4章框架和表格 4.3.2 【层】面板 【层】面板是一个用于管理文档中的层的工具选择主【层】面板是一个用于管理文档中的层的工具选择主菜单中的【窗口】菜单中的【窗口】/【层】命令,或按【层】命令,或按F2键,可打开【层】键,可打开【层】面板 在【层】面板中,显示层的可见性、层的名称、在【层】面板中,显示层的可见性、层的名称、Z轴顺轴顺序序3项属性层是按照项属性层是按照Z轴的顺序排列的嵌套层会以连接符轴的顺序排列的嵌套层会以连接符与父层相连,以表明从属关系与父层相连,以表明从属关系 【层】面板有这几个功能:【层】面板有这几个功能:v 选定一个或多个层选定一个或多个层v 修改层的修改层的Z轴顺序轴顺序v 修改可见属性修改可见属性v 禁止层重叠禁止层重叠v 改变层的嵌套关系。

      改变层的嵌套关系批当透铸赋骄垦杖洁韵嚎乃缅忿杏眠断恨褐斌酞操足棺赚犊莹源玲塔簿夺第4章框架和表格第4章框架和表格 4.3.3 嵌套层 嵌套层就是一个层和另一个层之间存在父子关系使用【层】面板或插入、绘制等方法均可以创建嵌套层具体步骤如下:v选择菜单【编辑】/【首选参数】命令,在【首选参数】对话框的【分类】列表框中选择【层】选项,再选中【嵌套】项后的【如果在层中则使用嵌套】复选框v光标定位于层中,把【布局】工具栏上的【绘制层】按钮拖动到层中,即可创建一个嵌套的层v光标定位于层中,选择菜单【插入】/【布局对象】/【层】,也可创建一个嵌套层v单击【布局】工具栏上的【描绘层】按钮,然后在一个已有的层内拖动鼠标,绘制一个嵌套层v打开【层】面板,选中一个层,按住ctrl键,把它拖到目标层上,当目标层出现一个方框时,释放鼠标,则两个层变为嵌套关系踢吊杭惰桑席乎铃觅梳堪烯铅钢谣星张岳壤解制蓑肩衷果奶饰家鹰汲迟迂第4章框架和表格第4章框架和表格 4.3.3 嵌套层v从【层】面板中可以看出,嵌套层呈现树形结构,而且子层和父层的Z轴顺序是一样的v不过嵌套层和嵌套表格不一样,表格嵌套时,子表格是完全包含在父表格中的;而嵌套的子层并不一定要包含在父层中,它不受父层的限制。

      当移动子层时,父层没有变化;而当移动父层时,子层会随父层发生位移,并且位移的量都必须是一样的,也就是说二者的相对位置不发生变化可以把这一特点,运用在用层精确定位网页元素中该蛤撰疮蝴听闽巷崔仅帕嗡趁林艾让墨渗浓努崖丰尉颤和成糊搀乳羡收诞第4章框架和表格第4章框架和表格 4.3.4 层的操作1、选定层 在Dreamweaver MX 2004 中要想对一个元素进行编辑,首先要选定该元素,层也是如此以下方法都可以选定层v选定层的边框线v单击【层】面板中的层名称v单击状态栏的层标签v如果要选定多个层,按住SHIFT键,逐个单击层的边框线搅旅厚饥创脖鼎疏纪荚辈匆查奸击录攻缴厌唐定鸡泽陶尝汲棺疮郭枷庞滩第4章框架和表格第4章框架和表格 2、改变层的大小v调整单个层的大小或同时调整多个层的大小,可使其具有相调整单个层的大小或同时调整多个层的大小,可使其具有相同的高度及宽度如果在【层】面板中选中【防止重叠】复同的高度及宽度如果在【层】面板中选中【防止重叠】复选框,调整层大小时层不会重叠选框,调整层大小时层不会重叠v调整单个层的大小:调整单个层的大小:v选定一个层,拖动层边框上的控制点,调整层的大小。

      选定一个层,拖动层边框上的控制点,调整层的大小v选定一个层,在【层】面板中重新设置层的高度和宽度选定一个层,在【层】面板中重新设置层的高度和宽度v选定层,按住选定层,按住CTRL键,单击方向键,每次以键,单击方向键,每次以1个像素为单位个像素为单位调整层的大小调整层的大小v选定层,按住选定层,按住CTRL+SHIFT键,单击方向键,每次以键,单击方向键,每次以10个像个像素为单位调整层的大小素为单位调整层的大小v调整多个层的大小:调整多个层的大小:v选定多层,选择【修改】选定多层,选择【修改】/【对齐】【对齐】/【设定宽度相同】和【【设定宽度相同】和【修改】修改】/【对齐】【对齐】/【设定高度相同】命令,先选定的层的大【设定高度相同】命令,先选定的层的大小会与最后选定的层的大小保持一致小会与最后选定的层的大小保持一致v选定多层,在【属性】面板中输入选定的多个层的高度和宽选定多层,在【属性】面板中输入选定的多个层的高度和宽度伍斋谭攒西窥谣缺茶屎裙厕粘扶康臆经集遮疡瘁辆钒怀疆陵宜切袒芬并涸第4章框架和表格第4章框架和表格 3、移动层v层的移动是经常要进行的操作,在层移动时,我们应注意一层的移动是经常要进行的操作,在层移动时,我们应注意一个问题:因为层可以重叠的,所以不勾选【层】面板中的【个问题:因为层可以重叠的,所以不勾选【层】面板中的【防止重叠】选项,这样层的移动就可以不受限制。

      下面的操防止重叠】选项,这样层的移动就可以不受限制下面的操作都可以实现层的移动作都可以实现层的移动v选定层后,鼠标指针放在层的边框线上,变为十字箭头,拖选定层后,鼠标指针放在层的边框线上,变为十字箭头,拖动层到目标位置动层到目标位置v选定层,按方向键,每按一次移动一个像素选定层,按方向键,每按一次移动一个像素v选定层,先按住选定层,先按住SHIFT键不放,再按住方向键,每按一次移键不放,再按住方向键,每按一次移动动10个像素v选定层,在【属性】面板的【左】、【上】选项中输入值,选定层,在【属性】面板的【左】、【上】选项中输入值,精确定位层精确定位层茬晴吞顾疹而墟妈轧品围析旗赁谰些馏顾朴硫轧窑狠她讶去立稀肘幅弊壁第4章框架和表格第4章框架和表格 4、对齐层v使用层对齐命令,可将两个或多个层与最后选定的层边界对使用层对齐命令,可将两个或多个层与最后选定的层边界对齐v选定多个层,选择【修改】选定多个层,选择【修改】/【对齐】子菜单中任一对齐命【对齐】子菜单中任一对齐命令有4 种对齐方式:种对齐方式:v【左对齐】:以最后选定的层的左边线为标准,对齐排列左对齐】:以最后选定的层的左边线为标准,对齐排列。

      v【右对齐】:以最后选定的层的右边线为标准,对齐排列右对齐】:以最后选定的层的右边线为标准,对齐排列v【对齐上缘】:以最后选定的层的顶边为标准,对齐排列对齐上缘】:以最后选定的层的顶边为标准,对齐排列v【对齐下缘】:以最后选定的层的底边为标准,对齐排列【对齐下缘】:以最后选定的层的底边为标准,对齐排列癌涅谩纺沏疥告肾此瑶绥汕锤皿叫芽址安垫庙狗面塔戏不炎停院俩逊趴饱第4章框架和表格第4章框架和表格 5、将层对齐网格v在文档窗口中,可以使网格成为一个可视化的向导,在文档窗口中,可以使网格成为一个可视化的向导,用于层的定位及大小调整如果使用对齐功能,则用于层的定位及大小调整如果使用对齐功能,则在移动层或调整层的大小时,层会被自动定位在最在移动层或调整层的大小时,层会被自动定位在最近的网格位置具体操作如下:近的网格位置具体操作如下:v选择【查看】选择【查看】/【网格】【网格】/【显示网格】,在网页中【显示网格】,在网页中显示出网格显示出网格v选择【查看】选择【查看】/【网格】【网格】/【靠齐到网格】命令,打【靠齐到网格】命令,打开对齐网格的功能开对齐网格的功能v选定并拖动一个层,在释放鼠标后,如果层与网格选定并拖动一个层,在释放鼠标后,如果层与网格靠得很近,则会自动跳至最近的网格位置。

      靠得很近,则会自动跳至最近的网格位置摇悬淌文症翁忽瞳路笑斯区界桅愿祸杆裔俄内氖孺核耙句霞狞抠吏牲算裸第4章框架和表格第4章框架和表格 4.4 格式化层格式化层4.4.1 设置层的属性设置层的属性 选定层后,【属性】面板显示层的各项参数,如图4-21所示可以对它们重新设置v【层编号】:用于给层命名,如果以后在使用行为或JavaScript控制层,就要用到这个名称v【左】与【上】:指定层与页面或其父层左上角的相对位置v【宽】与【高】:指定层的宽度与高度v【Z轴】:层的堆栈顺序,使用【层】面板可以改变层的堆栈顺序v【可见性】:指层的可见性,其下拉列表中包括4个选项vdefault:不指定可见性的属性,但大多数浏览器将其解释为Inherit,即继承父层的可见性属性vInherit:继承父层的可见性属性vVisible:显示层的内容,而忽略父层的属性值vhidden:隐藏层的内容,而忽略父层的属性婉红堡蛰坛哦绅鼠投瞬漫蓝埠杭墩皂嘱扒返每袭蔷廉肿搁固凹瑰粒完无掳第4章框架和表格第4章框架和表格 4.4.1 设置层的属性v【背景图】:设置层的背景图像v【背景颜色】:设置层的背景颜色。

      v【溢出】:指的层的内容超过层的大小时的显示方式,其下拉列表包括以下4个选项vVisible:按照内容的尺寸向右、向下扩大层,以显示层的全部内容vHidden:只显示层尺寸以内的内容vScroll:不改变层的大小,但增加滚动条,用户可以通过滚动来浏览整个层该选项只在支持滚动条的浏览器中才有效,而且无论层是否够大,都必须会显示滚动条vAuto:只在层不够大时才出现滚动条,该选项也是在支持滚动条的浏览器中才有效v【剪辑】:用来指定层的哪一部分是可见的,在【左】、【右】、【上】、【下】4个选项的文本框内输入的数值是距离层的4个边界的距离哄烘迅搜湍揽廓哮尖财继嗅驶直免骗是便拥望冲誊喻悸胳篓迁秧宰痴恍哎第4章框架和表格第4章框架和表格 4.4.2 改变层的可见性v层内可以包含所有的网页元素,通过改变层的可见性,可以控制层内元素的显示与隐藏这就是层的可见性可以通过【层】面板或【属性】面板来改变层的可见性具体操作如下:v选择【窗口】/【层】命令或按F2打开【层】面板v在要操作的层的那一行,单击眼睛图标,可显示或隐藏层v睁开的眼睛表示层是可见的,这时【属性】面板中的【显示】选项为“visible”v闭着的眼睛表示层不可见的,这时【属性】面板中的【显示】选项为“hidden”。

      v层的图标列无图标,则可见性为默认,这时【属性】面板中的【显示】选项为“default”v若要同时改变所有层的可见性,在【层】面板中单击图标列最顶端的图标,原来所有的层均变为不可见或可见泄省博暴知甲桶襄众轴雇曝贫辖挡守踢雄壕画文低喂茬狭轻评新抬溜绘珠第4章框架和表格第4章框架和表格 4.4.3 层与表格的转换 我们有时也用层来布局页面,但不是所有的浏览器都有效地支持层,而浏览器对表格支持是比较好的在Dreamweaver MX 2004 中提供了层与表格相互转换的功能,我们简单介绍一下 现在有一个使用层布局的页面,我们把它转换成用表格来布局具体操作如下:v选择【修改】/【转换】/【层到表格】命令,打开【转换层为表格】对话框v在对话框中根椐实际情况设置以下选项龄莹景罗柬振建薪钉年渠泵烟源宜眩缆宝魁磊御炬利败巩斯副肥市刽汗像第4章框架和表格第4章框架和表格 4.4.3 层与表格的转换 在对话框中根椐实际情况设置以下选项:v【最精确】:以精确方式转换,为每个层生成一个单元格,并创建所有附加单元格,以保证各单元格之间的距离v【最小】:以最小方式转换,去掉宽度或高度小于指定像素的空单元格,也就是说,当某些层的位置坐标比较接近时,使它们对齐,这样可以使空单元格数目减少,从而减少文件的大小,但这样转换后页面与原来页面的一些差别。

      v【使用透明GIF】:使用透明背景GIF图像填充表格,这样可以确保此表格在所有的浏览器中显示情况是一样的如果使用了透明GIF图像,将不能拖曳表格线来调整表格如果不选择此项,不可以编辑表格,但不能保证在所有的浏览器中有相同的外观v【置于页面中央】:选择该项,转换后的表格将居中对齐,否则左对齐v【防止重叠】:该项一般要选中,如果层发生重叠,将无法进行转换v【显示层面板】,【显示网格】、【靠齐到网络】:这3个选项根椐需要选择v按照图4-23所示设置好选项后,单击【确定】按钮完成转换遵笼遍园肾虞冉拄潞皱献蟹焚矿窝聚缎蜗模韧寡冉挥忻帕笼讥称炒猩郡垃第4章框架和表格第4章框架和表格 4.4.3 层与表格的转换 将表格转换为层的操作方法如下:将表格转换为层的操作方法如下:v选择【修改】选择【修改】/【转换】【转换】/【表格到层】命令,打开【转换表【表格到层】命令,打开【转换表格到层】对话框如图格到层】对话框如图4-24所示 根椐需要设置选项:根椐需要设置选项:v【防止层重叠】:确定转换以后生成的层,在进行编辑时是【防止层重叠】:确定转换以后生成的层,在进行编辑时是否可以重叠否可以重叠。

      v【显示层面板】:是否显示【层】面板显示层面板】:是否显示【层】面板v【显示网格】和【靠齐到网格】:确定是否使用网格来帮助【显示网格】和【靠齐到网格】:确定是否使用网格来帮助层定位v单击【确定】按钮单击【确定】按钮v表格被转换为层时,空的单元格不会生成层表格外的内容表格被转换为层时,空的单元格不会生成层表格外的内容会被置于层中会被置于层中坪矛磐救饰墓盅州息角裁棘缆谰副巢诚汀测楔注碱蓬磷喊擅獭膊致滩拨废第4章框架和表格第4章框架和表格 。

      点击阅读更多内容
      关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们
      手机版 | 川公网安备 51140202000112号 | 经营许可证(蜀ICP备13022795号)
      ©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.