常见定位方式及使用Spry布局对象

1、 常见常见定位定位方式方式使用使用S SPRYPRY布局布局对象对象上课要求上课要求u课前预习课前预习u将手机调到静音将手机调到静音u认真做笔记认真做笔记u及时完成作业及时完成作业u掌握绝对定位、相对定位与浮动定位的方法u掌握常用Spry布局对象的用法学习学习目标目标“DIV+CSS”布局中的常见定位方式：“Div+CSS”布局，就是使用Div布局网页和定位网页中的元素，而使用CSS样式来控制这些元素的显示方式。这种布局是目前比较流行的网页布局方式。1、绝对定位与相对定位（1）绝对定位 绝对定位在CSS中的写法：position:absolute。 其意义是参照浏览器的左上角，配合top、ri

2、ght、bottom、left值来定位元素。例：#lay position:absolute； Left:5px; Top:5px; 见P134。（2）相对定位 相对定位在CSS中的写法：position:relative。 其意义是以父级对象（它所在的容器）的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点，配合top、right、bottom、left值来定位元素。例：#lay position:relative； Left:10px; Top:10px; 见P134。 2、浮动定位 浮动定位在CSS中用“float”属性来表示。当“float”值为“none”时，表示对象不浮动

3、；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动，见P135。 浮动是一种先进的布局方式，它可以改变网页中对象的前后流动顺序，从而使得内容的排版变得简单且具有良好的可伸缩性。浮动定位使得网页中的大部分内容都可以由浏览器来自动调试它们之间的关系。 注意：应该为所有使用“float”属性的元素设定宽度值（除非是图像元素，因其具有隐含的宽度），若不设定宽度，结果是不可预知的。（四）使用SPRY布局对象 Spry是DW内置的代码块，使用它可以在网页中添加Spry菜单栏、Spry选项卡式面板、Spry折叠式和Spry可折叠面板。1Spry菜单栏 Spry菜单栏是一系列导航菜单按

4、钮，当光标指向某个按钮时可以弹出项目的子菜单。使用Spry菜单栏可以在有限的空间内显示大量的导航信息。 操作步骤：操作步骤：新建文档单击“插入”面板中的“布局”，单击“Spry 菜单栏”按钮。菜单条：设置菜单栏的名字。禁用样式：将菜单栏转成普通列表的形式。项目名称列表框：显示所有项目名，单击某项目，右侧的列表框中将显示其子菜单名。+按钮课添加新菜单，-按钮可删除所选菜单。文本：显示当前所选菜单名称。链接：设置当前所选菜单链接地址。标题：设置当前所选菜单文本上方的提示文字。更改菜单名：在“项目名称列表框”中选中主菜单，在“文本”文本框中删除原有菜单名，并输入新名称。例步骤5。按Ctrl+S组合键

5、保存文档，弹出“复制相关文件”对话框。预览。2Spry选项卡式面板 Spry选项卡式面板是一系列可以在收缩的空间内存储内容的面板。浏览者可以单击相应面板标签在各个面板之间切换。定位插入点后，单击“插入”面板“布局”类别中的“Spry选项卡式面板”即可将其插入。选项卡式面板：设置Spry选项卡式面板的名称。面板：添加、删除面板，或调整面板次序。可在列表框中选择面板标签，在文档窗口设置面板内容。默认面板：设置在预览文档时默认显示的面板。3Spry折叠式Spry折叠式是一系列可以在收缩的空间内存储内容的面板窗口。浏览者可以通过单击面板标题来显示或隐藏面板内容。定位插入点后，单击“插入”面板“布局”类别中的“Spry折叠式”即可将其插入，见P138。 4Spry可折叠面板 Spry可折叠面板是一个可以在收