Step 8: Customize the index page

Open the page index.html if it has not been opened.

 

Drag this image "Red_Maple_Leaf.jpg" from the Website Explorer to the index page. and place it at 80 pixels from the top and 0 pixel from the left.

This image now covers the images and elements on the page. As it is also higher than the original image, we need to move the contents down a bit as well. We will handle this at step 5. We move the three images that are under this one to the top first. Select the "Red_Maple_Leaf.jpg" and click this button to move it to the bottom of the other elements. The three images underneath will now be on top.

 

Move the three images which is now on top of the Red_Maple_Leaf.jpg to the location similar to the image below.

 

 

As the Red_Maple_Leaf.jpg is higher than the old one. It sits behind some of the contents. We need to move the contents down. To select them all, you can click on the page not covered by other elements and then drag a rectangle around them. Release the mouse button when all the required elements are included in the rectangle. They will all be selected as shown below. Move them down and the footer element will be moved automatically.

 

 

 

We then delete the elements and images we do not need. After this, it should look like this.