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

From WSU Technology Knowledge Base
Jump to: navigation, search

A banner or header to the web page provides a visual anchor for the viewer. It often includes menu items.

It is a kind of trademark or logo for the web site.

This Step

You can make a banner to be inserted as an image, with or without text, onto a page with a graphic applications like Photoshop or Illustrator.

You can make a banner to be inserted as a dynamic image with or without graphic roll-overs or with scripts that can offer hyperlinks or menus using applications like Flash or Fireworks.

Banners or headers can have a fixed size or can extend the length of the page, and stretch or shrink to the size of the display on the web browser.

To make a fixed-size banner such as will be used in this standard website:


To make a banner with a Table, you can have either a fixed-width or a variable-width.

Some Graphics to Enhance Your Banner

Websites where you can find images for school related projects:

    • You will want to register at Corbis to allow you to download images without the Corbis watermark.
Note: Mac users can download individual images in their original format. If several objects are to be downloaded they will be saved as a combined single "Clip Art" file. In order to load this file into the Office Clip Gallery the downloaded file ("Clip Art") will need to be renamed with the extension .cle.

Another good source for graphics material is:

But be careful: some of this material is copyrighted!

Using Screen Captures

Screen capture, also called Print Screen, is a feature on computers that allow you to “take a picture” of anything on your screen.

Windows Print Screen

One of the functions of the Print Screen/SysRq key is to take a snapshot or picture of your computer screen and copy it to the clipboard. Its the same thing as if you copied something from a document and it is now on your clipboard waiting to be pasted in its final destination.

  1. To copy/capture the current window, hold down ALT + Print Scrn at the same time. To capture the entire screen, just press Print Scrn.
  2. Open a new document in MS Word, MS Paint, MS Photo Editor, or Adobe PhotoShop.
  3. Paste the screen shot by holding down CTRL and V at the same time.

Snipping Tool can also be used to create a snapshot in Windows Vista and Windows 7.

Mac Print Screen

  • Command-Shift-3: capture screen to file
  • Command-FN-Shift-3: capture screen to clipboard
  • Command-Shift-4: capture selection to file. Note: the cursor changes into a special cross-hairs for drawing a rectangle over the area you want to capture.
    • If you click on the Space-Bar with this special cross-hair over a dialog box or screen object, it will automatically select it; the cursor changes to a "camera" icon; mouse down to "click" it and capture that item.
  • Command-FN-Shift-4: capture selection to clipboard

Other Resources

Design Options for Making Banners

Steps to make a website in Dreamweaver