How to Make a Website (DW)/Step 6-Make an Index or Home Page/Design Option: Text Banner

From WSU Technology Knowledge Base
Jump to: navigation, search

You may create a Banner out of the Top Row of your Index Page by:

  1. Typing your Title and formatting it creatively
  2. Adding a color or other background to it
  3. Defining it's size
  4. Adding graphical or media elements, including animated Gif's or Flash.

Here is an example of the beginning of a Text Based banner in a table.

DW Text-based banner.png

Modifying Text

You may modify this text by properties in several ways:

  • You may change the Default HTLM Text Formats, selecting:
    • Heading 1 thru Heading 6 definitions
    • Bold and italic
  • You may also set the alignment of the text in horizontal (left/center/right) and vertical (top/middle/bottom) of the cell.

More customized settings, such as fonts other than HTML defaults, will require the use of CSS (Cascading Style Sheets).

Modifying Background Color of Banner

You may use the command in properties to change the color of the cell as a banner.

NOTE: you can use an "eyedropper" to pick a color from a related color scheme. Or select a previous color employed and stored in the assets under the Asset Tab.

Again, more customized backgrounds, such as repeating graphical designs, will require the use of CSS (Cascading Style Sheets).

Defining the Size of the Banner

The cell can be set to a fixed height or width. The width of this single cell in this row is 800 pixels.

The height we have used for banners is 150 pixels. Set it in the field "H".

DW sample text banner.png

Adding a Graphical or Media Element

In Example 1 (below) a graphical or media element is placed next to the text.

The object may be positioned by the alignment properties of the graphic.

Example One

Alternatively in Example 2 (below) you may position a graphical or media element independently of the text.

  • Do this by first creating a cell in the row.
  • Then insert the object in the cell.
  • Resize cell and object, and/or align it as necessary.

Example Two

Finally in Example 3 (below) you can see how a media object - in this case a Flash Movie clip - can be positined independently of the text. As above this is done:

  • By first creating a cell in the row.
  • Then inserting the object in the cell.
  • Resizeing cell and object, and/or aligning it as necessary.
    • Note how the clip can be sized by its properties, and can contrain the size proportionally, so that the image is not skewed.
    • Note how you can also set the clip to autoplay and repeat (auto rewind).

DW sample text banner &media.png

Customizing Text and Features Using CSS

Cascading Style Sheet (CSS)

Other Resources

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

Design Options

Steps to make a website in Dreamweaver