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

（2）相对定位 相对定位在CSS中的写法：position:relative。 其意义是以父级对象（它所在的容器）的坐标原点为坐标原 点。无父级则以body的坐标原点为坐标原点，配合top、right、 bottom、left值来定位元素。 例：#lay{ position:relative； Left:10px; Top:10px; } 见P134。
常见定位方式 使用SPRY布局对象
上课要求
课前预习
将手机调到静音
认真做笔记 及时完成作业
学习目标
掌握绝对定位、相对定位与浮动定位的方法 掌握常用Spry布局对象的用法
“DIV+CSS”布局中的常见定位方式：
“Div+CSS”布局，就是使用Div布局网页和定位网页中的元素， 而使用CSS样式来控制这些元素的显示方式。这种布局是目前比 较流行的网页布局方式。 1、绝对定位与相对定位 （1）绝对定位 绝对定位在CSS中的写法：position:absolute。 其意义是参照浏览器的左上角，配合top、right、bottom、 left值来定位元素。 例：#lay{ position:absolute； Left:5px; Top:5px; } 见P134。
2、浮动定位 浮动定位在CSS中用“float”属性来表示。当“float”值为 “none”时，表示对象不浮动；为“left”时，表示对象向左浮动； 为“right”时，表示对象向右浮动，见P135。
浮动是一种先进的布局方式，它可以改变网页中对象的前后流 动顺序，从而使得内容的排版变得简单且具有良好的可伸缩性。 浮动定位使得网页中的大部分内容都可以由浏览器来自动调试它 们之间的关系。
4．Spry可折叠面板 Spry可折叠面板是一个可以在收缩的空间内存储内容的面板， 用户可通过单击面板标签来显示或隐藏面板内容。定位插入点后， 单击“插入”面板“布局”类别中的“Spry可折叠面板”即可将其插入见 P139。
选项卡式面板：设置Spry选项卡式面板的名称。 面板：添加、删除面板，或调整面板次序。可在列表框中选择面板标签， 在文档窗口设置面板内容。 默认面板：设置在预览文档时默认显示的面板。
3．Spry折叠式 Spry折叠式是一系列可以在收缩的空间内存储内容的面板窗口。 浏览者可以通过单击面板标题来显示或隐藏面板内容。定位插入 点后，单击“插入”面板“布局”类别中的“Spry折叠式”即可 将其插入，见P138。

更改菜单名：在“项目名称列表框”中选中主菜单，在“文本” 文本框中删除原有菜单名，并输入新名称。例步骤5。 按Ctrl+S组合键保存文档，弹出“复制相关文件”对话框。 预览。
Hale Waihona Puke Baidu
2．Spry选项卡式面板 Spry选项卡式面板是一系列可以在收缩的空间内存储内容的 面板。浏览者可以单击相应面板标签在各个面板之间切换。 定位插入点后，单击“插入”面板“布局”类别中的“Spry选项 卡式面板”即可将其插入。
注意：应该为所有使用“float”属性的元素设定宽度值（除非 是图像元素，因其具有隐含的宽度），若不设定宽度，结果是不 可预知的。
（四）使用SPRY布局对象
Spry是DW内置的代码块，使用它可以在网页中添加Spry菜单栏、 Spry选项卡式面板、Spry折叠式和Spry可折叠面板。 1．Spry菜单栏 Spry菜单栏是一系列导航菜单按钮，当光标指向某个按钮时可以 弹出项目的子菜单。使用Spry菜单栏可以在有限的空间内显示大量的 导航信息。 操作步骤： 新建文档 单击“插入”面板中的“布局”，单击“Spry 菜单栏”按钮。
菜单条：设置菜单栏的名字。 禁用样式：将菜单栏转成普通列表的形式。 项目名称列表框：显示所有项目名，单击某项目，右侧的列表框中将 显示其子菜单名。+按钮课添加新菜单，-按钮可删除所选菜单。 文本：显示当前所选菜单名称。 链接：设置当前所选菜单链接地址。 标题：设置当前所选菜单文本上方的提示文字。