STEP-BY-STEP INSTRUCTIONS #2:

ADDING A HEADER GRAPHIC TO PAGES FOLLOWING THE INDEX PAGE OF YOUR WEBSITE.

These detailed instructions offer your two options for adding a graphic to the top of pages that follow the index page.

We advise you to print these out to refer to as you go.


Part One: Applying Graphic Elements to pages following the Index page.

Previously, in the step-by-step instructions for applying graphics to your index page, you learned how to

• locate and copy the Librarysmc folder
• find your custom graphic
• place them all in your www folder
• And then applied them to the top of your index page.

The procedure we will follow here is very similar and much simpler because the elements you need are already in your Librarysmc folder in your www folder.


For the top of pages following the index page, you have 3 options to choose from:

Option #1: Top level navigation with a simple SMC graphic.

This option would keep the navigation functionality of the index page, but an abbreviated graphic would be applied in place of the custom header graphic.

Option #2: A simple SMC graphic without top level navigation links.

In this option, the simple SMC graphic would be applied without navigation links to the main sections of the college's website. A prominent text link to the college's home page would be required. (These instructions utilize option #2)

Option #3: Apply NO graphic elements to the top of your page. For this option, no graphic would appear, but a prominent text link to the college's home page would be required somewhere on the page.



Option #1:

Top level navigation with simple SMC graphic

On the index page, you applied a custom header in the light blue portion of the page header. For this option, you will change the light blue color to white, and place an abbreviated SMC graphic (which is already in your Librarysmc folder) in the same place. You will note that many of the steps are the same as the previous procedure.

1.) Open your page and Set the margins to "0"

(You can do this by going into Modify> Page Properties)

2.) Place your cursor at the top left corner of your page

3.) Open your library items in your Assets window (bottom icon on right)

4.) Find item called wbnavigationtop-and select it.

5.Drag the selected item to the top of your page.

6.) Detach llibrary item - (select "detach from Original" and click "ok" in warning window)

7.) Click on light blue area at top of navigation graphic. Leave your cursor there.

8. In the properties window (found under Window>Properties) and change the background color to White: #FFFFFF

9.) In the images portion of the assets window, is a graphic called: wbrule.jpg. (You can see this image in your assets window by clicking on the top right icon and scrolling down.) Select this image.

10.) Drag the wbrule.jpg image to the top of your page (into the area that is now white.)

With all pieces in place, it should look like this:


(Click on image for larger view)

11.) Preview your work in your browser, (File>Preview in Browser) and if everything looks ok, save your page if everything looks ok.

12.) Apply same to additional pages.



Option #2:
Application of Simple SMC graphic without top level navigation links.

This option follows the same as above, but applies only the wbrule.jpg graphic to the top of your page.

1.) Open your page and Set the margins to "0"

(You do this by going into Modify> Page Properties)

2.) Place your cursor at the top left corner of your page

3.) Open your imageitems in your Assets window (top icon on right)

4.) Select wbrule.jpg image--

5.) Drag it to the top of your page*

6.) Preview your work in your browser, (File>Preview in Browser) and if everything looks ok, save your page if everything looks ok.

7.) Apply same to additional pages.

NOTE:
For Options 2&3 You will need to add a link back to the college's home page somewhere prominently on your page.
You can make it either a text link or link the image to: http://www.saintmarys.edu

(*This webpage employs option #2)



Option #3:
Apply NO graphic elements to the top of your page.

NOTE:
For Options 2&3 You will need to add a link back to the college's home page somewhere prominently on your page.
You can make it either a text link or link the image to: http://www.saintmarys.edu

If you need personal assistance, please call x5318,
and we'll help you out! :-)

Saint Mary's Home Page

Web Design Standards & Guidelines index page