Sub-masks

An unique feature of HTMLButcher is the concept of a SUBMASK. A SUBMASK is a MASK inside an area. This tranlates to a table inside an outer table cell in HTML. There is no limit to the amount of SUBMASKs-inside-AREAs you can create.

To create a SUBMASK, right-click on an AREA, and set its "Kind" to "Mask".

Notice that the AREA title now have 2 titles, one for the "root" area, and one for the AREA inside the SUBMASK. This inner MASK behaves just like the main MASK, it can be sliced using drawing LINES between 2 other LINES. For example, we will separate the area in the middle. Select the "Insert Vertical Line" tool, and click on the AREA 5 top LINE.

You are asked to select which LINE do you want to pick. If you select LINE 8, you will be slicing the main MASK, NOT the inner MASK. If you want to slice the inner MASK, you must select the LINE that is inside AREA 5, which is the second one (Area 5->Line 2).

[Caution]Caution

Is is a very common mistake to select the wrong LINE when trying to slice a SUBMASK. Pay attention to the available options, specially to what AREA the line belongs - if it is from the main MASK, no AREA name will be show, just the LINE name.

[Tip]Tip

If you are using a lot of SUBMASKs, it is extremelly recommended to give a name to all AREAS (using the AREA properties dialog). This makes it much easier to pick the correct line when slicing SUBMASKs.

Below is what happens if you pick the incorrect LINE (Line 8 in this example).

[Note]Note

It is NOT an error doing this slicing, you may want to do exactly this, but this is a common mistake that is made when using SUBMASKs.

In this case, the AREA 5 SUBMASK was NOT sliced, instead the main MASK was sliced and a new cell on the main table was created, while the AREA 5 SUBMASK remains with only one AREA.

Selecting the correct line, yields the expected result.

Now AREA 5 will contain a table with 2 cells (AREAs). Each AREA can be individually configured, and even contain another SUBMASK if desired.

This is what the HTML will look like:



  <TR>
    <TD  WIDTH="824" HEIGHT="2" VALIGN="TOP">
      <IMG SRC="figure/home_area4.jpg" WIDTH="824" HEIGHT="2" BORDER="0"></TD>
  </TR>
  <TR>
    <TD  WIDTH="824" HEIGHT="272" VALIGN="TOP">


          <TABLE WIDTH="824" CELLSPACING="0" CELLPADDING="0">
            <TR>
              <TD  WIDTH="417" HEIGHT="272" VALIGN="TOP">
                <IMG SRC="figure/home_area5_area1.jpg" WIDTH="417" HEIGHT="272" BORDER="0"></TD>
              <TD  WIDTH="407" HEIGHT="272" VALIGN="TOP">
                <IMG SRC="figure/home_area5_area2.jpg" WIDTH="407" HEIGHT="272" BORDER="0"></TD>
            </TR>
          </TABLE>


    </TD>
  </TR>