CBE Home

More buttons and headings

How to add your new button/heading

Buttons are saved as gif files and Headings are saved as jpg files. They each have their own folder inside the images folder in your b*** website.

Download the button(s) you require from the Buttons page. Unzip the button(s) file. Move the buttons (gif files) in to your b***/images/buttons folder and your headings (jpg files) into your b***/images/headings folder. If you don't put them in the correct folders, they won't display properly once they're uploaded. Once you have put your news buttons and headings in the appropriate folders, please delete the .zip file.

All screenshots are from Dreamweaver, as that is what we use in Media Services. In these examples, we will be inserting a heading and button called About Our School.

Let's insert the new heading(s) first.

Launch Dreamweaver. Make sure your Property Inspector is open (Window > Properties). Close any other properties, panels, or windows like styles, layers, behaviours, etc., as you won't be using them. Under Preferences, under Invisible Elements, make sure everything is checked off. Make sure Toolbars are open: View > Toolbars > Insert, Document, Standard. Work in the Document Window's Design view.

  1. Open calendar.htm in your web editing software.

  2. Highlight the heading. In the Property Inspector, change the name of the jpg from calendar.jpg to the new heading, i.e., calendar.jpg to about_schl.jpg. In the Alt field (beside the Src field) type in the name of the image (calendar).

    Replace heading image
  3. File Save As about_schl.htm
  4. File Close

Repeat steps 1 to 4 for all your new htm pages.

Now let's insert the buttons

  1. Open all your htm files in your web editing software. Start with default.htm.
    The buttons are part of rows in a table. On the inside pages (e.g., calendar.htm, council.htm, etc.), there are extra rows added in the buttons table, but on the default.htm page, there isn't. Go to the last cell in the buttons table and hit the tab key to insert the required number of rows you need (e.g., if you are adding 3 new buttons, add 3 new rows).
  2. Insert Image > Buttons > name of new button (e.g., about_schl.gif) Link the button to the new (htm) page. Name the page the same as the button to make it consistent. For example, if you'd select a button called About our School, select the about_schl.gif button, link it to about_schl.htm. On the htm page, the heading will be about_schl.jpg.

  3. Highlight all the buttons. Note how many rows highlighted. In this example, there are 10 rows that are highlighted.
  4. Copy the buttons (CTRL+C or COMMAND+C).

  5. Select the next htm page, alphabetically. Start with the calendar.htm page and do the other pages in alphabetical order.
  6. Highlight 10 rows of buttons.
  7. Paste the buttons (CTRL+V or COMMAND+V).

  8. Since all the subsequent htm pages are different than the default.htm page, once you paste in the buttons from default.htm, you may find it easier to select the table that the buttons are in, CTRL+C or COMMAND+C, and paste (CTRL+V or COMMAND+V) the table into the subsequent pages.
  9. File Save all the pages.


  1. Open Cute FTP (PC) or Fetch (Mac).

  2. Drag and drop ALL your site files (you have made a change on every page when you added the new button(s) and heading(s) and now need to upload all the pages) including your images folder.

Educating Tomorrow's Citizens Today