Creating and Adding Banner Titles to Your Teacher Web Page Your web page comes with basic component titles.... plain text. This is something that you can change to make your page look more pleasant.

me o c be ke d l ou ing li c s h Thi omet s... s thi

To make this change, you must first learn how to create the banner titles. This can be most easily done in Keynote.

Open Keynote. Choose the plain white theme. Delete the two text areas from the first slide.

Updated on September 19, 2010

1

Creating and Adding Banner Titles to Your Teacher Web Page

Click on the Shapes dropdown and click to add a rectangle to the slide.

If this banner is for Window #1, create a rectangle (or whatever shape you desire) no larger than 450 pixels wide. 35 pixels is a good height. If this banner is for Window #2, create a rectangle 220px by 35px because Window #2 is 220 pixels wide.

With the shape selected, open the Inspector and click on the Graphic Inspector to change the shapeʼs color. You have several choices... color fill, gradient fill, advanced gradient fill, etc.

Updated on September 19, 2010

2

Creating and Adding Banner Titles to Your Teacher Web Page

When selecting colors, it is good idea to look at other colors on your web page and use the magnifying glass to “capture” those colors to keep with the pageʼs theme.

Create as many banner titles as you think you will use.

You can then add clipart icons to the banners as shown. You can get icon pictures by using Google Images Search. Just drag the images you like to your desktop if you would like to save them. Or... drag them directly to your Keynote slide, resize them, then add them to your banner.

Updated on September 19, 2010

3

Creating and Adding Banner Titles to Your Teacher Web Page Or... hereʼs another idea. Add a picture similar to the one shown to your Keynote slide.

With the picture selected, go to “Format” and down to “Mask with Shape” and over to “Rectangle” or whichever shape you choose.

If you chose the rectangle, create a mask shape 220px by 35px or 450px by 35 px depending on where you are planning to use the banner.

When you click off, you have the banner background. Add a text box with title information.

Updated on September 19, 2010

4

Creating and Adding Banner Titles to Your Teacher Web Page Once you have your banner titles created, you need to save them in a format you can use on your web page. To save them in a usable format for the web site, you must first take a screen shot of each banner. Click on “shift + command + 4” and crosshairs will appear on the page. Click and drag to select the banner title. You can try to be exact or you can include some white space around the edges. That will put the picture on your desktop. If you took an exact screen shot, you will be able to use the screen shot as is but you will need to rename it. Double click to open it in Preview. Go to “File” and down to “Save As”.

PNG is a good format to use. Be sure the .png or .jpg extension shows when saving. If it is not showing, you may need to click on the arrow by the title to open the window further and make sure the “Hide extension” is not checked.

If you included some white space, you will need to crop off the white.

Find the picture on your desktop and double click on it to open it.

It will open in Preview.

Updated on September 19, 2010

5

Creating and Adding Banner Titles to Your Teacher Web Page

Once you have the picture open, when you put your cursor over the picture, you will see crosshairs. Take the crosshairs and carefully select the banner.

You can use your navigation arrows to fine tune your selection.

Once you have your banner selected, go to “Tools” and down to “Crop”. That will remove the white area around the banner.

Go to “Save As...” and save it in a file format that the web site will accept.

Updated on September 19, 2010

6

Creating and Adding Banner Titles to Your Teacher Web Page Once you have your Banner Titles saved as a .png or .jpg, you are ready to add them to your web page. Log onto the admin side of your web site. Go to the component to which you wish to add your banner title. For example, if you would like to add a banner title to the Parent Links area, click on Window #2. Then, in the Parent Links component area, click on “Edit This Page Component”.

Click on “Show Header Configs”

Beside the title “Header Image:”, click on the “Choose File” button.

Updated on September 19, 2010

7

Creating and Adding Banner Titles to Your Teacher Web Page

Navigate to the Banner Title you saved. Click “Choose”.

You will see the picture has been added. Click “Save”.

Once it has saved, you will see the banner title in the Header Image area.

Updated on September 19, 2010

8

Creating and Adding Banner Titles to Your Teacher Web Page Go to your page to check out your work.

Updated on September 19, 2010

9