第4章-页面元素布局.ppt

《第4章-页面元素布局.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章页面元素定位技术目录1、创建框架页面2、用表格定位页面元素3、使用层定位页面元素4页面元素定位技术要设计一个页面，就要涉及到很多页面元素，例如图像、文本、表格、动画、视频等等。如何将这些页面元素有机的组合起来，达到满意的视觉效果，这不仅需要页面元素有自身的特点，还必须把这些元素放在合适的位置上，这就是页面元素的定位，或称页面布局。目标：在本单元的学习中我们将具体介绍Dreamweaver提供的几种页面元素的定位方法。第一种是创建框架页面，第二种是用层定位页面元素，第三种是用表格定位页面元素。4.1框架布局页面元素框架在

2、网页中的应用是比较广泛的。在浏览网页的时候，我们常常会遇到这样的一种导航结构，单击页面左侧的超级链接，链接的目标出现在右侧；或者单击上侧链接，链接目标出现在下侧。这就是框架技术最常用在导航窗口。例4.1.1关于框架页面框架页面是把浏览器窗口划分为若干个子窗口，这些子窗口称为框架。框架的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。与框架相关的概念是框架集，把几个框架组合在一起就成为了框架集。一个框架显示一个网页文件，但整个框架集却存在于同一个浏览器窗口中。框架页面可以把不同类别的信息显示在不同的框

3、架中，有利于分类管理和控制。4.1.2定义框架布局页面元素1．创建框架集2．保存框架集3．设计要在框架集中显示的网页4．设定框架源文件5．用链接控制框架的显示内容4.1.2定义框架布局页面元素6．框架属性及其设置方法源文件：指定在当前框架中打开的源文件。滚动：4种选择——是、否、自动、默认。不能调整大小：防止用户浏览页面时通过拖动框架边框来调整当前框架的大小。边框：决定当前框架是否显示边框，有“是”、“否”和“默认”三种选择。大多数浏览器默认为“是”。边框颜色：设置与当前框架相邻的所有边框的颜色。4.1.2定义框架布局页面元

4、素7．框架集属性及其设置方法(1)在“边框”下拉列表中，可以设置当文档在浏览器中被浏览时是否显示框架集边框。有3个选项——是、否和默认。选择“默认”，由用户的浏览器决定是否显示边框。(2)在“边框宽度”文本框中输入一个数字，指定当前框架集的边框宽度。输入0，指定无边框。(3)在“边框颜色”文本框中输入十六进制颜色值，或单击“边框颜色”旁边的颜色块，从弹出的拾色器中选择一种颜色作为边框颜色。4.1.3设置框架及框架集属性框架和框架集是一些独立的HTML文档。可以通过设置某些框架或框架集的属性来对框架或框架集进行修改。1．选取要

5、进行更改的框架和框架集2．设置框架属性选取框架，打开框架的【属性】面板。如图4-1所示。图4-1框架属性面板框架名称：为当前框架命名（为了便于确定超链接应给框架命名）。源文件：确定框架的源文档。可以直接在文本框中输入文件路径，也可以单击文件夹图标查找并选取文件。还可以通过将插入点放在框架内并执行【文件】

6、【在框架中打开】命令来打开文件4.1.3设置框架及框架集属性边框：用来控制当前框架有无边框。选项有“是”（显示边框）、“否”（隐藏边框）和“默认值”。大多数浏览器默认为显示边框，除非父框架集已将“边框”设置为“否”。只有当共

7、享该边框的所有框架都将“边框”设置为“否”时，或者当父框架集的“边框”属性设置为“否”并且共享该边框的框架都将“边框”设置为“默认值”时，边框才是隐藏的。滚动：确定当框架内的内容显示不下的时候是否出现滚动条。选项有“是”、“否”、“自动”和“默认”。“是”表示显示滚动条，“否”表示不显示滚动条，“自动”则是自动显示，也就是当该框架内的内容超过当前屏幕上下或左右边界时，滚动条才会显示，否则不显示。“默认”将不设置相应属性的值，从而使各个浏览器使用其默认值。不能调整大小：限定框架尺寸，令访问者无法通过拖动框架边框在浏览器中调整框

8、架大小。在Dreamweaver中始终可以调整边框大小，该选项仅适用于在浏览器中查看框架的访问者。边框颜色：为所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。边界宽度：设置以像素为单位的框架边框和内容之间左右边距。边界高度：设置以像素为单位的框架边框和内容之间上下边距。4.1.3设置框架及框架集属性3．设置框架集属性选取框架集，打开框架集的【属性】面板。如图4-2所示。边框：在边框下拉列表中选择在浏览器中查看时是否显示框架边框。边框颜色：设置边框的颜色。边框宽度：指定框架集中所有边

9、框的宽度。框架大小：单击【行列选择范围】区域左侧或顶部的选项卡；然后在“值”文本框中，输入高度或宽度。单位：包括“像素”、“百分比”和“相对”。“像素”将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架（例如导航条）而言，此选项是最佳选择。“百分比”指定选定列或行应相当于其框