Chapter 6: Laying It On the Line: Creating HTML Layouts

Although HTML is becoming more and more powerful as new features are added to the language specification (currently version 3.2), designers still don't have control over the absolute positioning of items on the page. HTML does offer relative positioning: you decide the order in which elements appear on the page, and you can control how text appears in relation to adjacent image. However, you can't guarantee that a button will be drawn 200 pixels from the top of a layout and 30 pixels from the right. Microsoft has proposed adding HTML Layouts to the HTML specification, but you can design pages by using the ActiveX HTML Layout control.

At the moment, the only way to incorporate HTML Layouts into your page is to follow a two-step process:

Create an HTML Layout File (which has an ALX extension under Windows).
Insert the HTML Layout into a plain-vanilla HTML file, using Edit-->Insert HTML Layout... if you're using Microsoft's Control Pad.

Creating the HTML Layout File

Adding a control to an HTML Layout is a little different from adding a control directly to an HTML file. Rather than use the Edit -->Insert ActiveX Control command, as you would with an HTML file, you insert controls on Layouts by using the toolbox. To place a control on the page, follow these steps:

Click the control's icon on the toolbox.
To fix the control's move the mouse pointer over the Layout grid. Clicking on the grid inserts the control, with the control's upper left corner fixed at the mouse pointer's location.
Drag the mouse pointer to size the control and then click to mark the lower right corner.

Hey, this isn't rocket science --- you only have to follow three steps. Now you can right-click a control to display a context menu, drag the control around in the Layout, and do all the other things that seem good and proper. (A context menu is one whose choices change depending on the context. In Windows 95 and NT, right-clicking the mouse usually brings up a context menu.) Since an HTML Layout is a different context than a plain old HTML file, a control's context menu is different as well. On an HTML Layout, a control's context menu has several options for positioning the control which you can use to fine-tine the object's placement on the layout.

The beauty of this system is that you have absolutely positioned the controls within the Layout. (Absolute positioning means that each object on an HTML Layout will always appear in the same location on the HTML Layout.) You get the convenience of visual design of your pages, and you can rest assured that your creations will be rendered just as you have envisioned them.

The HTML for a Layout

A layout, SampleLayout, was created with the Microsoft Control Pad. The HTML code for the layout is shown below:

<DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:400pt;HEIGHT:236pt;">
   <OBJECT ID="Label1"
      CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
      STYLE="TOP:10pt;LEFT:20pt;WIDTH:335pt;HEIGHT:55pt;ZINDEX:0;">
        <PARAM NAME="ForeColor" VALUE="8454143">
        <PARAM NAME="BackColor" VALUE="16744448">
        <PARAM NAME="VariousPropertyBits" VALUE="276824091">
        <PARAM NAME="Caption" VALUE="A Sample Label on a Fairly Ordinary HTML Layout">
        <PARAM NAME="Size" VALUE="11832;1947">
        <PARAM NAME="SpecialEffect" VALUE="1">
        <PARAM NAME="FontEffects" VALUE="1073741827">
        <PARAM NAME="FontHeight" VALUE="480">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="TextBox1"
       CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
       STYLE="TOP:101pt;LEFT:20pt;WIDTH:312pt;HEIGHT:78pt;TABINDEX:1;ZINDEX:1;">
         <PARAM NAME="VariousPropertyBits" VALUE="746604571">
         <PARAM NAME="Size" VALUE="11006;2752">
         <PARAM NAME="FontCharSet" VALUE="0">
         <PARAM NAME="FontPitchAndFamily" VALUE="2">
         <PARAM NAME="FontWeight" VALUE="0">
    </OBJECT>
    <OBJECT ID="Label2"
       CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
       STYLE="TOP:70pt;LEFT:20pt;WIDTH:328pt;HEIGHT:23pt;ZINDEX:2;">
         <PARAM NAME="ForeColor" VALUE="255">
         <PARAM NAME="Caption" VALUE="Please tell us how you feel about HTML
                     Layouts:">
         <PARAM NAME="Size" VALUE="11557;825">
         <PARAM NAME="BorderStyle" VALUE="1">
         <PARAM NAME="FontEffects" VALUE="1073741826">
         <PARAM NAME="FontHeight" VALUE="280">
         <PARAM NAME="FontCharSet" VALUE="0">
         <PARAM NAME="FontPitchAndFamily" VALUE="2">
         <PARAM NAME="FontWeight" VALUE="0">
    </OBJECT>
    <OBJECT ID="SpinButton1"
       CLASSID="CLSID:79176FB0-B7F2-11CE-97EF-00AA006D2776"
       STYLE="TOP:101pt;LEFT:335pt;WIDTH:31pt;HEIGHT:78pt;TABINDEX:3;ZINDEX:3;">
        <PARAM NAME="Size" VALUE="1101;2752">
    </OBJECT>
</DIV>

If you look at the HTML from the ALX file, you'll notice that it looks very similar to a typical HTML file, except for three things:

The <HTML>, <TITLE>, and <BODY> tags are missing.
The entire layout file is wrapped within a <DIV> (document division) tag which includes a STYLE attribute.
Each <OBJECT> includes a STYLE attribute, which has the positioning information for the particular object.

Inserting an HTML Layout File

Creating an HTML Layout file is only half the battle because you must insert an HTML Layout object into a plain HTML file (with an HTM or HTML extension). With Microsoft Control Pad, you would:

Choose Edit-->Insert HTML Layout....
Double-click on the name of the layout file you'd like to insert (or click once on the filename, and then click the OK button).
Control Pad will then insert an HTML Layout object into your HTML file, and the object will include the name of the HTML Layout file (as a REF VALUE):
```
<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"
   ID="SampleLayout_alx" STYLE="LEFT:0;TOP:0">
     <PARAM NAME="ALXPATH" REF VALUE="SampleLayout.alx">
 </OBJECT>
```