How to Add Text Over an Image in Dreamweaver Cs5
Placing text over an image on a Web page is an attractive design technique. Adobe Dreamweaver, a leading Web page design program, supports several ways to achieve this effect. One of the easiest and most common methods is to create a Cascading Style Sheet, or CSS container, then insert the image as the background for the container. You can then type text over the image and format the text as desired.
Other People Are Reading
Things You'll Need
- Adobe Dreamweaver CS3 or later
- A Web-compatible JPG, PNG of GIF image file
Instructions
-
-
1
Open the Dreamweaver HTML file in which you want to create an image with overlying text, or start a new HTML file by clicking the "File" menu and choosing "New." This opens the New Document dialog box. Choose HTML from the Type list and the desired layout from the Layout list, then click the "Create" button.
-
2
Click the "File" menu, and choose "Save As." This opens the Save As dialog box. Name and save the Web page.
-
-
3
Click in the page where you want to insert the image with overlying text to place the cursor.
-
4
Click the "Targeted Rule" drop-down menu in the Properties panel, and choose "New CSS Rule." This opens the New CSS Rule dialog box.
-
5
Click in the "Selector Name" field, and type a name for the new CSS rule. You can name the selector anything you want, but it must start with a period, such as ".image."
-
6
Click "OK" to open the CSS Rule Definition dialog box. From here you can configure the formatting for your overlying text, choose the background image file and set the margins for the container. The overlying text displays within the margins, allowing you to center the text over the image.
-
7
Click "Type" in the Category list. This displays options for formatting text. Choose the font family, font size, font weight, and font color, then click the "Apply" button.
-
8
Click "Background" in the Category list. This displays options for formatting the CSS container background. Click the "Browse" button beside "Background-image." This opens the Select Image Source dialog box. Navigate to the image file, select it, then click the "OK" button.
-
9
Click the "Background-repeat" drop-down menu, and choose "no-repeat." This tells Dreamweaver to display only one instance of the image, rather than tiling multiple copies to fill the entire background of the container.
-
10
Click "Apply."
-
11
Click "Box" in the Category list. This displays options for formatting the container, such as its width and height, as well as the margins. Typically, you would set the container's size to match the size of the background image. For example, if the image measures 800 x 300 pixels, type "800" in the "Width" field and "300" in the "Height" field.
-
12
Click in the "Width" field and type the desired width for your container, then click in the "Height" field and type the desired height for your container.
-
13
Click the "Same for All" check box in the Margin section of the CSS Rule Definition dialog box. This tells Dreamweaver to make the margins the same size on all four sides of the container. Type the desired margin width in the "Top" field. Dreamweaver inserts matching values in the "Right," "Bottom," and "Left" fields.
Note that it may take some experimentation to get your margins set exactly as you want them.
-
14
Click "OK." Dreamweaver creates the container and places the image.
-
15
Click on the image and type the desired text. The text displays over the image with the properties you set in the CSS Rule Definition dialog box
-
1
Tips & Warnings
You can modify the text formatting, the container size, and the margins by editing the CSS rule. Click the "Targeted Rule" drop-down menu in the Properties panel, choose the CSS rule you want to edit, then click the "Edit Rule" button. This opens the CSS Rule Definition dialog box. Make the desired changes to the container and the overlying text properties.
References
Resources
- Photo Credit John Foxx/Stockbyte/Getty Images
