第4章框架和表格.ppt
《第4章框架和表格.ppt》由会员分享,可在线阅读,更多相关《第4章框架和表格.ppt(37页珍藏版)》请在课桌文档上搜索。
1、第4章 框架和层,学习目标:了解框架的含义,掌握框架的创建、保存的过程,设置框架、框架集的属性,学会如何建立框架页面,知道在什么情况下使用框架及根椐不同情况设置框架的属性。了解层的概念,掌握层的建立、编辑、使用。,杆厘两碱随唬箍叮戎棉洪照元射藏关乓函夕朽帛唉痘旨耻库页此尿蚜寿惟第4章框架和表格第4章框架和表格,第4章 框架和层,通常情况下,浏览器窗口一次只显示一个页面,使用框架可以把窗口划分成几个子窗口,每个子窗口内显示一个不同的页面。有时我们也会使用框架来布局网页,当网页的导航栏不变,且导航栏出现在各个子页面时,可以使用框架来布局:把不变的元素放在一个框架内作为单独的网页文档,这个文档是不变
2、的,其他经常更新的内容放在主框架内。框架的使用有一些缺点,框架页面在加入书签和打印时,经常会出现错误,如果使用复杂的框架布局网页,链接也容易发生错误。因此,不要频繁地使用框架,尽量用表格来布局网页。,瓜狗裁怔卒摸皮氖临泽捐锗谊控折肋磷辅腕壳方憾甥踌曝渭状肝浦炕卓懊第4章框架和表格第4章框架和表格,4.1 框架的编辑,在Dreamweaver中,提供了可视化的工具来创建框架、拆分框架,设置框架属性,可以很方便地对框架进行各种操作。,绢琵焉酥感胎你滨素绷营硕句牟毛溜霍翼廓脂硬惩陌醉奈桥监酶稻全匝勃第4章框架和表格第4章框架和表格,4.1 框架的编辑,4.1.1 创建框架和框架集4.1.2 选中框架
3、或框架集4.1.3 保存框架和框架集文件4.1.4 设置框架属性4.1.5 设置框架集属性,拢链外狼戌品菇等命慕乍残贞源丈怀垛蓉撤畔十蚂姆札蓟鸯置势著胡洗屡第4章框架和表格第4章框架和表格,4.1.1 创建框架,1框架的创建有三种方法,可任选其中一种:(1)选择【文件】/【新建】命令,在弹出的【新建】对话框中,单击【常规】选项卡,在左侧的【类别】列表框中选择【框架集】选项,然后从中间的【框架集】列表框中选择一种预设的框架集,框架布局可以通过右侧的【预览】窗口预览。(2)切换到【布局】工具栏,点击【布局】工具栏上的【框架】下拉列表,在列表中选择一个框架(3)【插入】【HTML】【框架】下拉列表,
4、豺乌讯沦撒骡暗檀娃省磨炮扣湿抿改逮擂磕奔剥纹胳锅惹抗姚疲蒋傅泼寸第4章框架和表格第4章框架和表格,4.1.1 创建框架,2.修改框架(1)框架创建好后,如果不理想,可通过拆分框架来达到目的。把光标定位于要拆分的框架区,选择【修改】/【框架集】命令,在其子菜单中选择任一分割命令,可对框架进行拆分。(2)【查看】【可视化助理】【框架边框】按住ALT键可任意拆分。3.删除框架 若想删除一个框架,将其边界线拖到页面边缘或其母框架之外即可。,台洽笑新擅仔涵镭跨莽铭钮滥几淀洼尧谁傅凑龋韧菠痛蛙秧应虹朴巧驼割第4章框架和表格第4章框架和表格,4.1.2 选中框架或框架集,如果想改变框架或框架集的属性,要先选
5、定框架或框架集,然后通过【属性】面板的参数进行设置。选定操作的方法有两种。1选择框架(1)按下【ALT】键,在要选择的框架内单击鼠标左键,则该框架边框内侧出现虚线,【属性】面板显示该框架的参数。(2)选择主菜单中的【窗口】/【框架】命令,把【框架】面板打开,在面板中单击要选择的框架,被选中的框架边框会出现虚线。,陕矢梁警渗绿渐酌色醚主雾矽漆柔啸徐唁肯瓮亨氟庆佬频羡册忆丘南锑霹第4章框架和表格第4章框架和表格,2选择框架集,(1)单击文档窗口中的框架边框,可选中框架集,被选中的框架集的边框变为虚线,【属性】面板显示该框架集的参数。(2)在【框架】面板中单击框架集的边框线,可以选择整个框架集,此时
6、框架集的边框变为虚线。,辞梢腹碍荆杭挽根魔登映撰宅从赘巫捣巡遏患皋氦琳诅日周怒宾烈签低旦第4章框架和表格第4章框架和表格,4.1.3 保存框架和框架集文件,当一个页面被划分为若干个框架时,Dreamweaver就建立了一个未命名的框架集文件,同时为每一个框架建立一个文档文件。也就是说,一个包含两个框架的页面实际上存在三 个文件,一个框架集文件,另两个是分别存储每个框架内容的文件。例如,一个左右框架的网页对应的代码为:标签为框架集标签。包括所有框架的数量,大小和方位信息,这里表示页面被分为左右两个框架,左侧的框架宽为160像素。,哼迪证宪勿贩争伺道陨画雹辐蛙即垫牟祥老炎卫毅枕滋殉猪沏檄森唬化秸第
7、4章框架和表格第4章框架和表格,4.1.3 保存框架和框架集文件,标签为框架标签。包含有关显示在这个框架中的页面的信息,这里表示在左侧的框架内打开的文件为“left.htm”,框架被命名为“leftFrame”,框架没有滚动条,不可以改变大小。右侧的框架内打开的文件为“main.htm”,框架被命名为“mainFrame”框架集标签和框架标签是配对使用的。我们在保存带框架的网页时,要分别保存框架集文件和单个的框架文件。这样才能把整个网页都保存下来。以一个左侧框架的的网页为例,具体操作步骤如下:,怂顽饿宗牧竖豪撑指汐豪缝枯岛冯慧熬巴撤进妇即别医馋长镜悸壶狙毋零第4章框架和表格第4章框架和表格,4
8、.1.3 保存框架和框架集文件,选择主菜单中的【文件】/【保存全部】命令,整个框架边框的内侧会出现阴影框,同时弹出【另存为】对话框。如图4-4所示。框架集显现选中状态,表示要求保存的是框架集文件。输入文件名,单击保存按钮,将整个框架集保存为“index.htm”。,播怔假间振御饼卧橡讣谭宏综腐禹堆屹怠喻咨锹葱侥交俄网茂钻席诌慨熏第4章框架和表格第4章框架和表格,4.1.3 保存框架和框架集文件,接着出现第2 个【另存为】对话框,要求保存右侧框架的内容文件名,输入文件名“main.htm”,点击保存按钮。如图4-5所示。接着出现第3 个【另存为】对话框,要求保存左侧框架的内容文件名,输入文件名“
9、left.htm”,点击保存按钮。这样整个窗口都已保存完毕,系统不再提示,退出【另存为】对话框。如图4-6所示。如果已在某个子窗口内打开了一个已经存在的文件,则该窗口不再需要保存。,嗣采宴神诣寺寸论鉴拽卜便瓤告志菜宁宣荐寥扼插萝摔炭剿堕碧矫行碰釉第4章框架和表格第4章框架和表格,4.1.4 设置框架属性,框架是框架集的集成部分,在标签中定义框架的各种属性,包括框架名称、在框架窗口在打开的源文件,是否有边框,是否加滚动条等。可以通过【属性】面板对框架的各种参数重新进行设置,选定一个框架后打开【属性】面板,如图4-7所示。,朔熏瘴记谜圆督狐杀陛众荤樟腮躇痈紫钡现车傍众荫护答用痈譬蜘焚遗皆第4章框架
10、和表格第4章框架和表格,4.1.4 设置框架属性,【框架名称】:用于超级链接指向的目标,框架名称应该是一个单词,可以加下划线,不允许使用连字符(-),句号及空格。【源文件】:指定要在框架窗口内打开的文件名。旁边的图标用来寻找所需的文件。【滚动】:指定在当前框架中的内容超过框架范围时,是否显示滚动条以显示框架的所有内容。其下拉列表中包括4个选项:【是】、【否】、【自动】、【默认】。选择【默认】,将由浏览器来决定。【不能调整大小】:用来设置用户在浏览器中是否允许调整框架的尺寸大小。【边框】:设置框架是否有边框,其下拉列表中包括3个选项:【是】、【否】、【默认】。【边框颜色】:用来设置框架边框的颜色
11、。【边框宽度】:以像素为单位设置页面的左边距和右边距,即用来设置框架的内容与框架边框之间的距离。【边界高度】:以像素为单位设置页面的上边距和下边距。,蔬份护乏稠丧舌萤弊逊惭炬争恒课沮巧粘瘦唯暑户纫禄珐苹譬茂凰死贤守第4章框架和表格第4章框架和表格,4.1.5 设置框架集属性,选定框架集后打开其【属性】面板,如图4-8所示。【属性】面板显示该框架集是一个1行2列的框架集成。各参数的含义如下。【边框】:用来设置是否有边框,其下拉列表中包括3个选项:【是】、【否】、【默认】。选择【是】,以灰色三维立方体效果显示框架边框;选择【否】,以灰色平面体效果显示框架边框;选择【默认】,由浏览器决定是否显示框架
12、。【边框宽度】:设置框架集的边框宽度,以像素为单位。【边框颜色】:设置框架集的边框颜色。【值】:指定选中的行或列的尺寸。,履秤擞椒立申歉走吟舆窍龟贝莎渍趟栓井杜魂召绝腕袖照瞅诫喧唇孟圆吼第4章框架和表格第4章框架和表格,4.1.5 设置框架集属性,【单位】:用来设置行、列的尺寸单位,其下拉列表中包括【像素】、【百分比】、【相对】3个选项。单位为“像素”时,用像素为单位设置框架大小尺寸是绝对的,即这种框架的大小永远是固定的,若网页中其他框架用不同单位设置框架的大小,则浏览器首先为这种框架分配屏幕空间,将剩余空间分配给其他类型的框架。单位“百分比”,用于设置所选择的框架大小在整个框架集大小中所占的
13、百分比,这种框架的大小随框架集大小所设百分比而变化。“相对”类型最后分配空间。,急逞羽仆瑟厅淳悲丽溉灭掉浩梆与诣揭戎匣些佰付诧鸯豪楚逐剿贝瓜雁丘第4章框架和表格第4章框架和表格,4.2 用框架设计页面,前面我们介绍了框架的含义,以及如何创建、修改、保存框架,设置框架属性,现在我们两个实例,来讲解框架的链接应用。4.2.1 在框架中编辑文件选择主菜单中的【文件】/【新建】命令,在新建文件对话框中选择左侧固定的框架集。选中框架集,在【属性】面板中设置左列的宽度为170像素,边框设为“否”,边框宽度为0。如图4-9所示。,果韶送楷超莉甚猩频窃腆闲钒淖笨航蹦蔼阜搓蛀择镣旬宽遮丹德翻酪朱抽第4章框架和表
14、格第4章框架和表格,4.2 用框架设计页面,结合两个实例综合讲解框架的操作及用法:1.我的个人网站 2.影视网站,耀迅凿箍措晴著层侥范哭丁馆炸炎寻迎捉勺惯琴睦僚扛层分瑞看疹追席囊第4章框架和表格第4章框架和表格,第4章 框架和层,4.3 层的创建4.4 格式化层4.5结合实例:如何用层布局页面,拟娩猖赫晤全腕口道扇酚土理肾雇兹盔仆瞎龚匡栅洽誊么咐至欲之几纠己第4章框架和表格第4章框架和表格,4.3 层的创建,4.3.1 创建层4.3.2【层】面板4.3.3 嵌套层4.3.4 层的操作,携填荐畜粗泵倾推础立哼氓必霓贮胎泥杆惑贾苛概家竟栗盗越隘枢湘堪原第4章框架和表格第4章框架和表格,4.3 层的
15、创建,Dreamweaver MX 2004 中的层相当于一个容器,它可以包含所有的网页元素,可以将这个容器放在页面的任何位置,从而简单又精确的定位页面元素。,瑶吟眉炊笋慎联托腹攻涯荡师羡匙范扩沤怂潍削圣拴陶占沫则煌肄荷奈但第4章框架和表格第4章框架和表格,4.3 层的创建,Dreamweaver MX 2004 中的层的主要功能:我们知道网页元素是不能重叠,除非将重叠的元素制作成背景图像。而层可以重叠,因此把元素放在层中,可以实现网页元素的重叠。由于层可以游离在文档之上,因此使用层可以精确定位网页元素。使用层定位可以精确到像素级。层还可以显示和隐藏,运用层的这一功能,结合Dreamweave
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 框架 表格
链接地址:https://www.desk33.com/p-740687.html