Add an Image to the Header and Footer

This site will house your finished Photoshop work you will complete in a future unit. It will contain a Spry menu along with a slideshow of your completed work. For now you need to create the foundation for the site. You will need to find a graphic for both the header and footer. It is your job to find a graphic that will have the look of some Photoshop element. I used the following graphics for my header and footer. I added text to the graphic for the header and cropped and copied some of the graphics in the picture to create the footer. You will find your own graphic to use for your Photoshop Work website. Your text should read Photoshop Master, Photoshop Guru, etc.

One point that will help you make your webpage to appear seamless it to set the width of both the header and footer to 960. The size is determined by the container size at the CSS style panel.

The height is up to your liking. Just remember that the footer should be small in height than the header.

Click the box "Insert-logo (180 x 90)" and click the Delete key on your keyboard to remove the box from the header.

Make sure your cursor is placed in the header section then select Insert > Image to place your header image in the header section. My header is shown below:

Another way to insert a graphic to the header section is to add it to the CSS Styles panel. Select the header rule and click the Add Property from the Properties for ".header."

Select background image from the drop down menu.

Click the folder and browse to the header graphic.

Now click in the footer section of the webpage. Delete the word Footer then insert your footer image there.

Notice that it does not fit in the section the way the header did. Click on the Split button at the top left of the document window. You will see both the code and the design at the same time. You will delete the <p> and </p> tag in the code section.

Now your footer fits perfectly width wise but there is spacing at the top and bottom of the image. You will fix this in the CSS Styles panel. At the CSS Styles panel select the .footer and in the Properties for ".footer" change the padding to 0.

Your image should now fit snuggly in the footer section of the document.