WebSphere快速入门（9）

· 2．页面视图

站点的页面视图（见图 3-2 ）包括页面布局（ Page Layout ）和主控边框（ MasterBorder ），并提供面板和工具栏。面板包括属性面板和对象树，工具栏包括标准工具栏、表单工具栏、组件工具栏、和高级工具栏。对象树是关于当前页面中所有对象的树状结构，开发者可以通过对象树来定位目标对象，也可以直接选择目标对象。一旦选定目标对象，属性面板就显示该对象的属性，对象属性依赖于对象的类型，不同类型的对象（如文本和 applet ）有不同的属性，可以使用属性面板来设置对象属性，当然有的属性可以可视地编辑。

在页面视图中，可以可视地或通过属性面板来定义主控边框和页面布局。主控边框勾画出一个页面的五个区域：中间的布局区域和四个（左、右、上、下）边缘区域。这些边缘区域包含多个页面共有的元素，如水平标注和导航条，可以通过属性面板设置主控边框的自动边框（ AutoFrame ）属性，把某些边缘设置成框架（ frame ）。关于布局，而布局区域用来放置该页面的内容。需要注意的是页面布局包括页面的实际内容，不仅仅是页面的布局，也许一个页面有好几个布局或版本，例如有框架（ frame ）的和没有框架的版本。 NetObjects Fusion 使用表格（ table ）来组织它生成的 HTML 页的内容，也可以通过设置布局属性来选择布局是表单。也可以通过弹出菜单或单击属性面板中的“ HTML ”按扭在来显示生成的 HTML 文档。

图 3-2 页面视图

工具栏通常在窗口的边上，也可以拖进窗口里面（如图 3-2 ）。工具栏包括标准工具栏、表单工具栏、组件工具栏、和高级工具栏。这些工具栏为页面的制作提供了许多实用工具。

(1) 标准工具条

= 选择（ Select ）：选择一个特定的组件并移到另一个地点或重新设置大小。

= 缩放（ Zoom In/Out ）：使页面的视图围绕鼠标击中的区域放大或缩小。

= 文本（ Text ）：向页面增加一个包含一些文本的组件。

= 图片（ Picture ）：向页面增加一个图片。可以是一个 .gif 或 .jpg 文件。 Fusion 接受 BMP ， PCX ， PICT ， GIF ， JPEG 的图。

= 热点（ Hotspots ）：把一个图片中的某个区域标记为可单击（链接到某个 URL ），从而使该区域成为热点。这个区域可以是圆形、矩形、和多边形

= 布局区域（ Layout Region ）：在布局区域或主控边框里创建一个布局区域，它可以拥有与包含元素不同的布局属性（例如，一个不同的背景色）。

= 表格（ Table ）：创建一个 HTML 表格，可以规定表格的行数和列数。

= 表单区域（ Form Area ）：创建一个或多个表单。可以选择创建基于布局区域的表单、基于表格的表单、或基于文本的表单。也可以把一个表单加到边缘区域，从而能在多个页面里显示。

= 导航条（ Navigation Bar ）：用来创建导航条。可以使用按钮或文字形式，从当前页面链向站点里的别的页面，比如在 Web 站点结构里的父层、当前层或子层。

= 水平标注（ Banner ）。用来在页面的任何地方创建一个水平标注，反映这个页面的名字。通常在页面的顶部，来标志这个页面。

= 绘制（ Draw ）：绘制工具，这些工具用来在一个页面里画圆形、矩形、圆角矩形和多边形。

= 直线（ Line ）：画直线的工具，这些工具用来在一个页面里画水平线、任意角度的在线、站点样式的水平线。

需要注意的是 Hotspots 、 Draw 、 Line 这三个工具还包括可选的子工具，按下按扭不放就会显示可选的子工具，保持按下按扭并移动就可选择所要的工具。

(2) 表单工具栏

这些工具用来创建表单。表单可以用来收集信息，然后送回服务器端 CGI 程序或 Java Servlet 。

= 表单按扭（ Button ）：一个表单按钮通常被用来启动一个后端服务程序或来重置表单。

= 表单复选框（ Check Box ）：一个复选框代表一个布尔值，选中表示真值，否则表示假。

= 表单单选按扭（ Radio Button ）：一个单选按钮是一组单选按扭的一部分，这组单选按扭是互斥的，即只能有一个为真，而别的都为假互斥的。

= 表单编辑字段（ Edit Field ）：表单上的一个区域，用户可以输入一行信息如名或姓。

= 表单多行文本（ Multi-Line ）：表单上的一个区域，用户可以输入多行信息，如对一个产品的说明或目录里的一项。

= 表单组合框（ Combo box ）：一个下拉列表，用户可以选择。一个例子是：头发颜色的列表。用户可以选一个。

(3) 组件工具栏

= 动态按扭（ DynaButtons ）：对按钮使用站点风格

= 磁带（ Ticker Tape ）：一个水平滚动文字区域，不断重复。

= 站点映射器（ Site Mapper ）：一个用来显示站点结构的按扭。

= 消息板（ Message Board ）：一个 BBS 设施

= 表单句柄（ Form Handler ）：实现一个简单的 CGI 程序。用来检查表单中的字段

= 图片反转（ Picture Rollover ）：一个反转按扭。当鼠标滚过图片，图片改变成指定的图片反转。当 = 鼠标在图片上单击，图片会改变，一个 URL 链接会显示。

= 基于时间的图片（ Time Based Picture ）：在这个地点的不同时间显示不同的图。

= 图片加载器（ Picture Loader ）：使用其它资源中的图片

= 旋转图片（ Rotating Picture ）：简单动画。通常用来显示广告。

(4) 高级工具栏

= Media ：一个子工具条，包括了一些项目象 Shockwave 、 Quicktime 、 Video 、 Sound 和别的插件

= Java ：允许往页面上加一个 Java applet 。

= ActiveX Control ：允许往页面上加一个 ActiveX 控件。

= Data ：一个子工具条，允许你访问内部和外部数据对象。

= External HTML ：包括一些需要特殊的、手工写的 HTML 页面。可以在外部引用 HTML 文件并把

它们放在站点的任何地方，而不是引入并转换这个 HTML 。 NetObjects Fusion 在发布 Web 站点时不分析这个 HTML 。

上述工具栏提供的有关工具可用来增加页面的互动性。如可以在页面上增加脚本、放置 ActiveX 控件、增加 Java applets 等等。脚本可以加到一个 Fusion 生成的 HTML 元素的前面、后面或里面。增加 Java applets 时使用 Java 对象属性设置有关参数， Fusion 将增加的 class 文件作为对象集 (assets) 中的元素。

· 3 ．样式视图

样式视图（参见图 3-3 ）可用来选择站点样式、编辑样式、或创建新的样式。 Fusion 提供的样式适合于简单的站点或者可用来取得用户的反馈信息，重要的站点通常需要创建新的样式。 Fusion 用样式中指定的字体生成水平标注和按钮上的文字。因此，应该为水平标注和按钮选择任何你的系统里的字体， Fusion 将使用指定的字体生成有关图象，浏览器只看到一个图象。对于在 HTML 里创建的文字组件，浏览器可以控制自己使用的字体。

图 3-3：样式视图