How to Make a Website (DW)/Step 4-Make a Banner/Table Cell Banner

From WSU Technology Knowledge Base
Jump to: navigation, search
DW Table Dialog.png

Tables are widely used by Web designers to do page layout.

Tables give a designer control over the positioning of images and text on the page.

To insert a table in an HTML document, choose Insert>Table from the menu. This Dialog will appear.

The table is set to 3 rows and 1 column by default.

You should change these to suit your design, keeping in mind that cells can be merged in their rows or between columns to make larger space.

Individual cells can also be defined with fixed space (by pixels); otherwise they will distribute space proportionately to what is open on the display, getting bigger or smaller depending upon the space on the display.

The width of the table can be set to a fixed-size by defining the number of pixels. The width can be set to variable-size by defining the size in terms of percentage. For example, if the table is set to 80%-90% and then centered, will automatically place the table with room on either side of the table, showing empty space and wrapping text inside of the the table.

You can also define CellPad and CellSpace:

  • CellPad = The number of pixels between a cell’s content and the cell boundaries.
  • CellSpace =The number of pixels between adjacent table cells.
NOTE: these settings affect the spacing of objects in the rows/columns. You may want to modify them to get the result you want. In our Portfolio we will be using a setting of 5 pixels.

Cell Border thickness of +1 will draw a line which will appear between cells.

How-To's

To Begin: Open a Blank Page

You can make this Banner with a table in one of three ways for your use:

  • Open a New Blank Page as HTML and use this for your model page.... so either save it as a "model" page or save it as your "index" page,
  • Open a New Blank Page as a Library Item (See Library Item for instruction).
You will insert this Library Item into your Index page later.
Note: if you have created this Banner as a Library Item, you may want to add a horizontal menu below it. See Make a Menu for details.
  • Or if you wish to use templates, open as blank template (see Templates for instructions).

Setting up Table for a Banner with or without Menus

The table should be reduced to a single row if it is for a banner only.

Define it from the first as one row. Or merge cells to one row.

NOTE: If you are working with a Library Item or Template as a Banner and intend to put a horizontal menu immediately beneath it, you may wish to retain 3 rows. There will be one row between your banner and the row intended for your menu.

See menu Modify>Table.

Define cell with fixed number of pixels, for example, 800 as the standard size, or as a percentage, if you intend the size to vary.

DW properties Table.png

Choose alignment of "center" if you intend the cell/row to center on the web page display. See Step # 6 for more details on Design Options for web pages.

Adding a Graphic for a Banner

Click inside cell. Insertion point will flush to the left automatically. Use menu Insert>Image.

The image will appear in the cell. Properties at the bottom of the window may be changed.

DW properties image.png

Adding Text and Other Modifications to a Banner

You can type text in a cell for a banner and add a background color.

DW properties Cell.png

For more details and design options on making a banner by using the text features of a table row,
SEE Make an Index or Home Page/Design Option: Text Banner.

Other Resources

Specific help on creating and managing tables for design is found Here!

Design Options