How to Make a Banner on Dreamweaver
In Web design, the term "banner" has a few meanings. It can refer to a menu or navigation bar that spans the top of the page, an image that spans the top of the page, a combination of an image and a menu or a banner ad. Banner ads, and banners in general, can consist of one static graphic, a Flash animation, or rotating banners, in which several banners display in sequence, one after the other. Dreamweaver doesn't have any graphics or animation tools. Most designers create their banner content in a graphics editor, such as Photoshop, or an animation program, such as Adobe Flash. You can, however, create the cascading style sheet, or CSS, container and background for the banner in Dreamweaver, and then import the banner content into the container.
Other People Are Reading
Instructions
-
-
1
Create the banner content, such as a Flash movie or Photoshop image, or find a banner on the Internet. You have many options for creating or finding banner content. You can, for example, open a photograph in Photoshop and crop and resize it to the desired size, or you can search for "banner" on the Web, which brings up hundreds of free banners in many formats, such as graphics banners, Flash banners, and rotating banners.
If you don't have Photoshop or another graphics editor, you can edit and resize your banner image in Windows Live Photo Gallery: Navigate to the image in Windows Explorer, right-click it, choose "Edit With" from the popup menu, and then select Windows Live Photo Gallery from the next popup menu.
This opens the image in Windows Live Photo Gallery. Click the "Edit" tab at the top of the application Window. Windows Live Photo Gallery displays several options for editing the image, including a Crop Tool and several touch-up tools. To resize the image, click the "Properties" button and choose "Resize" to open the Resize dialog box. You can choose a size from the Select a Size drop-down menu, or type the desired width in the Maximum Dimensions field. The height adjusts automatically.
-
2
Click the "Resize and Save" button.
-
-
3
Start a new page in Dreamweaver: Click the "File" menu and choose "New" to open the New Document dialog box. Choose "HTML" from the Page Type list, and then choose "1 column fixed, centered, header and footer" from the Layout list. This layout creates a layout with a header container for your banner.
-
4
Click the "Layout CSS" drop-down menu, and choose "Add to Head." This adds the CSS layout code to the top of the HTML page, making it easy to edit.
-
5
Click "OK." Dreamweaver creates a page with a green header container across the top and a banner placeholder on the left side of the container.
-
6
Click the "File" menu and choose "Save As." Name and save the HTML file.
-
7
Select and delete the banner placeholder.
-
8
Click the "Insert" menu and choose "Image." This opens the Select Image Source dialog box. To insert a Flash banner, click the "Insert," choose "Media," and then select "SWF" from the flyout menu. This opens the Select SWF dialog box.
-
9
Navigate to the banner file, select it, and then choose "OK." This opens the Tag Accessibility Attributes dialog box.
-
10
Type a title for the banner in the Alternate Text field and click "OK." Dreamweaver inserts your banner content into the header container.
-
1
Tips & Warnings
To change the background color of the header container, prior to inserting the banner content file, click in the header container to insert the cursor, and then click "Edit Rule" in the Properties panel. This opens the CSS Rule Definition dialog box. Choose "Background" in the Category list, click the "Background-color" swatch flyout, and then choose the desired color. You can also add a border to the header container and customize it with the Border option in the CSS Rule Definition dialog box.
When you upload the HTML page to a Web server, also upload the banner content file. Otherwise, the banner will not display.
References
Resources
- Photo Credit Bruno Vincent/Getty Images News/Getty Images
