3.3 NetObjects Fusion
NetObject Fusion是一个可视化的Web站点的构建和管理工具。NetObjects Fusion是Web站点构建过程的中心。NetObjects Fusion是一个面向站点的工具,而不是仅仅处理单个页面。在Web站点开发的过程中,会创建许多页面,页面之间有很多链接。手工地更改这个结构是相当困难的。用NetObjects Fusion可以设计Web站点的通用元素,创建并维护Web站点的结构,构建各个页面,并能容易地维护这些页面。
总之,使用NetObject Fusion,可以设计Web站点、构建各个页面、容易地维护Web站点。下面介绍NetObject Fusion 中的站点视图(Site view)、页面视图(Page view)、样式视图(Style view)、对象集视图(Assets View、或称资源视图)、和发布视图(Publishing view)。
1.站点视图
站点的结构视图(参见图3-1)是站点视图的一种,单击“轮廓视图”标签就显示站点的轮廓视图。在结构视图中,页面的颜色是可以由开发者选择,通常用来为页面分组,但是页面颜色对实际页面没有影响。用户站点的文件格式为“*.nod”,模板文件格式为“*.nft”, 样式文件格式为“*.ssf”。使用站点视图,可以创建(或修改)一个站点的层次结构、操纵页面、引入/导出(Import/Export)站点、引入模板以改变站点的风格、打印站点的结构图等等。例如,可以引入一个已有的站点将它转成NetObjects Fusion的格式或保留为外部HTML页面。如果这些被引入的页面不会被改变,通常可以将引入的页面保留为外部HTML页面。
图3-1:站点视图
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:样式视图
4. 对象集视图
对象集视图(参见图3-4)是一个管理所有对象的地方,包括文件、链接、数据对象、变量,对象通过别名来访问。Fusion提供预定义的变量,如日期、时间和站点名等等。开发者可以创建自己的变量,并在对象集视图中管理。每当开发者需要选择图象或别的文件时,打开文件对话框(Open File dialog)上会有一个对象集标签(Assets tab),单击该标签就显示对象集中的有关文件,开发者就可以选择所需要的文件。这种就对象进行统一管理的方式支持“一次更新,每个地方都更新”。例如标识公司的图案(logo),如果一个公司改变了它的标识图案,只要在对象集视图中改变有关标识图案的文件,Fusion可以改变这个站点里的每一页。
图3-4:对象集视图
5.发布视图
发布视图(参见图3-5)用来配置发布选项,并进行发布。发布选项包括本地发布位置和远程发布位置等。本地发布是指发布到本机的文件系统里,远程发布需要使用FTP把文件传输到服务器。如果你选择发布到一个远程站点,这个站点必须支持FTP,发布者必须知道所需的用户名和口令。通常在正式发布之前需要发布到一个临时服务器上进行测试,并需要使用不同平台上的不同浏览器进行测试。发布时,Fusion将生成HTML页面以及目录结构,拷贝所有的对象到指定的目录,这些目录里包含HTML文件、图象、Java 类等等。目录结构可以是单一的(flat)、基于对象类型的(asset)、或基于站点区域的(section)。所有生成的HTML使用相对路径。在发布之前还可以使用预览功能。预览创建HTML文件,生成任何需要的图象,但它不拷贝任何别的对象,从而不显示嵌入的组件。在按下CTRL 键时单击预览按扭就可以只预览当前页。
图3-5:发布视图
总之,Fusion是一个Web站点的组装工具,对管理站点范围的格式模板有强力支持,支持丰富的“对象”,链接和对象集管理使得部署到多个站点变得很容易。可以使用Fusion设计站点结构、构建和管理站点页面、设计和写页面内容、设计站点的图形化风格、管理和测试站点的对象集、把站点发布到本地或远程服务器、更新和维护站点。
NetObject Fusion是一个可视化的Web站点的构建和管理工具。NetObjects Fusion是Web站点构建过程的中心。NetObjects Fusion是一个面向站点的工具,而不是仅仅处理单个页面。在Web站点开发的过程中,会创建许多页面,页面之间有很多链接。手工地更改这个结构是相当困难的。用NetObjects Fusion可以设计Web站点的通用元素,创建并维护Web站点的结构,构建各个页面,并能容易地维护这些页面。
总之,使用NetObject Fusion,可以设计Web站点、构建各个页面、容易地维护Web站点。下面介绍NetObject Fusion 中的站点视图(Site view)、页面视图(Page view)、样式视图(Style view)、对象集视图(Assets View、或称资源视图)、和发布视图(Publishing view)。
1.站点视图
站点的结构视图(参见图3-1)是站点视图的一种,单击“轮廓视图”标签就显示站点的轮廓视图。在结构视图中,页面的颜色是可以由开发者选择,通常用来为页面分组,但是页面颜色对实际页面没有影响。用户站点的文件格式为“*.nod”,模板文件格式为“*.nft”, 样式文件格式为“*.ssf”。使用站点视图,可以创建(或修改)一个站点的层次结构、操纵页面、引入/导出(Import/Export)站点、引入模板以改变站点的风格、打印站点的结构图等等。例如,可以引入一个已有的站点将它转成NetObjects Fusion的格式或保留为外部HTML页面。如果这些被引入的页面不会被改变,通常可以将引入的页面保留为外部HTML页面。
图3-1:站点视图
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:样式视图
4. 对象集视图
对象集视图(参见图3-4)是一个管理所有对象的地方,包括文件、链接、数据对象、变量,对象通过别名来访问。Fusion提供预定义的变量,如日期、时间和站点名等等。开发者可以创建自己的变量,并在对象集视图中管理。每当开发者需要选择图象或别的文件时,打开文件对话框(Open File dialog)上会有一个对象集标签(Assets tab),单击该标签就显示对象集中的有关文件,开发者就可以选择所需要的文件。这种就对象进行统一管理的方式支持“一次更新,每个地方都更新”。例如标识公司的图案(logo),如果一个公司改变了它的标识图案,只要在对象集视图中改变有关标识图案的文件,Fusion可以改变这个站点里的每一页。
图3-4:对象集视图
5.发布视图
发布视图(参见图3-5)用来配置发布选项,并进行发布。发布选项包括本地发布位置和远程发布位置等。本地发布是指发布到本机的文件系统里,远程发布需要使用FTP把文件传输到服务器。如果你选择发布到一个远程站点,这个站点必须支持FTP,发布者必须知道所需的用户名和口令。通常在正式发布之前需要发布到一个临时服务器上进行测试,并需要使用不同平台上的不同浏览器进行测试。发布时,Fusion将生成HTML页面以及目录结构,拷贝所有的对象到指定的目录,这些目录里包含HTML文件、图象、Java 类等等。目录结构可以是单一的(flat)、基于对象类型的(asset)、或基于站点区域的(section)。所有生成的HTML使用相对路径。在发布之前还可以使用预览功能。预览创建HTML文件,生成任何需要的图象,但它不拷贝任何别的对象,从而不显示嵌入的组件。在按下CTRL 键时单击预览按扭就可以只预览当前页。
图3-5:发布视图
总之,Fusion是一个Web站点的组装工具,对管理站点范围的格式模板有强力支持,支持丰富的“对象”,链接和对象集管理使得部署到多个站点变得很容易。可以使用Fusion设计站点结构、构建和管理站点页面、设计和写页面内容、设计站点的图形化风格、管理和测试站点的对象集、把站点发布到本地或远程服务器、更新和维护站点。