How to Create an HTML Banner Box

Written by alexis lawrence
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create an HTML Banner Box
(Ciaran Griffin/Lifesize/Getty Images)

Banner boxes are the rectangular headers that generally stretch all the way across the top or bottom of a web page, usually contain text and sometimes also include graphics. HTML banner boxes are created by using HTML coding to format the shape, colour and other box features. To create an HTML banner box, you can use an online HTML banner box creator, which provides the box code for you, or you can code the banner box yourself in a website-building program like Dreamweaver.

Skill level:

Things you need

  • Dreamweaver

Show MoreHide


  1. 1

    Go to a website that creates HTML banner boxes. Flash Banner Now and MyBannerMaker, among others, provide tools to create a banner box online.

  2. 2

    Use the tools on the banner-making page to create your banner box. Both systems allow users to select a banner size and create borders. MyBannerNow provides further options to change the background and text colours for the banner and add effects to the banner box.

  3. 3

    Click the button to get the banner code or save the banner. The HTML code for the banner box you created displays on the screen. Copy the code and add it anywhere into the coding of your webpage.

  1. 1

    Launch Dreamweaver from the “Start” menu and either open an HTML document or create a new HTML document. Recently opened documents can be opened under the “Open a Recent Item” section of Dreamweaver’s launch screen. To create a new HTML document, click “HTML” under the “Create New” section.

  2. 2

    Display the layout tools in the Dreamweaver toolbar by clicking the arrow next to “Common” and choosing “Layout” from the provided menu. Either leave the “Layout” toolbar in the default “Standard” mode or click on “Layout” to switch to the “Layout” mode. The “Standard” mode is most effective for adding a banner in any location on pages that have already been created, while the “Layout” mode is ideal for adding a banner at the top of new web pages.

  3. 3

    Click the “Draw Layer” button, which looks like a square with handles, in “Standard” mode or the “Layout Table” button, which has a green border and handles, in “Layout” mode. Draw the banner box with the “Draw Layer” tool, by holding down the mouse button and dragging the mouse across the screen anywhere that you want the banner to be located. Draw the banner box with the “Layout Table” button by clicking in the screen and dragging the mouse. The first box automatically snaps to the top of the screen.

  4. 4

    Fill in either a layer or a table banner box with colour by clicking the box next to “Bg” in the “Properties” pane at the bottom of the screen. To add text and graphics to the banner, click directly into a layer box or use “Draw Layout Cell” button on the toolbar to add a cell to a table box and click inside the cell. Begin typing to add text to the box. To add a graphic, click on the arrow beside “Layout” at the top of the screen, choose “Common” and click the button with the tree.

  5. 5

    Click on the outer edge of the banner box to highlight the entire banner once you have finished your banner and click the “Split” button at the top of the document window. The HTML code that you have created appears highlighted above the design area in the code pane.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.