构建自己的HTML工具

很多开发人员都使用诸如dreamweaver或frontpage来设计自己的web网页。由于需要的所有功能都集中于wysiwy工具，这些工具显得相当优秀。然而，有些时候这些工具能够提供更多的功能与特性。

例如，假设你想为用户提供建立一个基于特定模板的数据入口窗体。即这一入口窗体工作方式类似于报表自定义(report builder)。这样，你可以构建自己的窗体自定义(form builder)工具，以能够自动地与数据源产生关联，并可以为终端用户提供数据入口窗体。在本文中，我将建立一个简单的网页，以引导读者能够通过一个<input>元素和一个<select>元素建立一个web网页，并建立一个数据入口窗体。

首先，确定数据流向的目标地点。在我们的例子中，数据将流向sql server上的名为sales的简单列表。这一列表的相关域为售货员(salesperson)和数量(金钱)。salesperson域不太适合与另一列表sales_staff的关键字相联系。sales_staff表包含售货员的first_name和last_name。由于sales_staff表为参考列表，本文作者将使用<select>来选择这一表的域，而数量域将作为一个简单的<input>元素。

现在，你必须弄清楚构建这些元素的原理。我们希望作者能够选择表中的域，然后选择适合的元素。接着，作者能够将一些属性配置给这些元素。对于<select>表，作者可以分配size属性和建立一系列可选择的尺寸值。对于<input>元素，他们也可以分配size尺寸。除此之外，作者将可以设置一些style属性，比如在窗体上放置元素的位置。同样，作者将可以将数据域分配给元素。表a给出了页面布局的代码。 这些html元素位于屏幕的左边。当用户在屏幕上放置一个元素时，他们将可在屏幕下底端的属性列表中看到这些元素的属性。属性列表与相应的xml属性数据相关联。当用户改变属性列表的数据时，就会生成新的元素属性。 用户可以使用光标改变位置属性，以确定<div>的元素位置，或者用户可以在属性列中的输入新的值。为了使用光标在<div>改变位置，我将添加一个htc以提供这一功能。表b包含了htc的代码。

为了“绑定”数据以达到每一属性都列于表格中，我将列表“绑定”到一个单一属性的xml岛。每一次操作我都将会激活其它元素，并将元素的xml载入到数据岛，这样就可以将表中的数据关联起来。当元素失去“激活”时，新的元素xml属性就会被载入。 为了建立元素，我将在web页面中包含javascript以处理这些元素，可查看表c。

同样，通过一些转换操作可以完成列表之间的关系。我将一个<img>键添加到行，并使用它的onload事件获得rowindex属性。然后，我使用这些属性值以获得相关的属性节点。通过这一方式，我可以设置是否将<select>元素显示到所有的数据域。 一旦你建立了所有的元素，xml数据就会被存储在一个文件或数据库中。然后，使用一个xslt表单重新设置输出的格式，并且生成新的html窗体。数据将通过与页面关联的xml数据自动连接到数据域，并且xml数据将被传送以增加或更新原来的内部数据。

网络形象设计(IVIS)与视觉文化时代2007-10-1

构建自己的HTML工具2007-10-1

使用 CSS 创建固定宽度的布局2007-10-1

HTML向XHTML转化2007-10-1

构建自己的HTML工具2007-10-1

XML和XSLT使网页设计更紧密2007-10-1