49、构建交互式页面的实用指南

构建交互式页面的实用指南

在网页设计中，构建交互式页面能够极大地提升用户体验。下面将详细介绍如何使用一些常见的工具和方法来实现这一目标。

为图像添加浮动效果

在页面布局中，有时需要让图像浮动到一侧，使文本环绕其周围。具体操作如下：
1. 在属性部分，点击“布局”选项卡，然后向下滚动找到“浮动”属性，将其值设置为“左”。这样就创建了一个新的 .float-left 类，它会将页面上的元素定位到左侧。
2. 在设计视图中，点击手风琴中的图像。接着，在文档窗口下方的属性面板中，从“类”下拉菜单中选择“float-left”。此时，可折叠面板中的图像会浮动到左侧，文本则会环绕在图像右侧。

添加标签式内容

jQuery 标签和手风琴在很多方面相似，它们都能通过隐藏内容来节省页面空间，为用户提供熟悉的控件，并且有许多相同的属性。以下是插入一组标签并更改标签的标签和内容的基本步骤：
1. 在页面上想要插入标签式内容的位置点击。
2. 转到“插入”面板（窗口→插入），从下拉菜单中选择“jQuery UI”类别。标签在 jQuery UI 小部件列表中排在第二位，就在手风琴下方。
3. 点击“标签”。Dreamweaver 会在页面中插入一组三个标签，分别标记为“标签 1”、“标签 2”和“标签 3”。初始时，“标签 1”面板是打开的，其内容部分显示为“内容 1”。
4. 在文档窗口中，从下拉菜单中选择“实时”以预览标签。标签式面板有两个部分：带标签的标签本身和下方的内容区域。切换到实时视图可以看到它们的实际效果。当点击另一个标签，如“标签 2”时，内容区域会显示“内容 2”。