Web Team

Web Team

People page SSI: editing instructions

Selecting and identifying an SSI of a people page

This page explains how to identify a people SSI located in your website and assumes you have referred to people page SSI: how they work and people page SSI: is it in your site?

Step 1 - identify the people page in your web browser and open in Dreamweaver

  • Depending on the site structure of your site, your people page(s) may be at the root level of your site (eg people.shtml) or you may have a people folder files (eg people/index.shml or people/admin_people.shtml etc)
  • In the web address example below the URL for the Web Team people page is http://www.canterbury.ac.nz/web/people/
  • /people/ is the folder but the browser is not showing the file name. This is because the default filename in a folder should be index.shtml. In this example you would need to open the index.shtml file inside the people folder

  • Open the people page in Dreamweaver. In this example it would be index.shtml kept in the people folder

Step 2 - identify the file name of the ssi file you want to edit

  1. Click on the page to select the file (Note: the example above shows the outline of the SSI file selected. You may instead see the entire file with a 'grey' look to it. It is still selected)
  2. In Properties at the bottom of the page read the SSI file name. In this example it is .../ssi/webpeople.html
    The file is called webpeople.html and it is in the ssi folder.
  3. With the file still selected click the edit button to open it (or open the ssi folder and open the file you want)

  • The SSI file called webpeople.html has opened

Step 4 - editing the SSI file

  • Select text and images in an SSI file (filename.html) just as you would a web page (filename.shtml)
  • Edit text as you normally would
  • Add or delete table rows as you normally would (refer to your training notes or the tables section)
  • All links must be absolute - including links to all web pages, documents, graphics etc (within your site and in other websites)
    If you're not sure what this means see understanding SSIs
    If you're not sure how to make them correctly see make SSIs absolute
  • If you are linking to graphics or documents these must be uploaded as well as the SSI file

Step 5 - find the absolute lin to an exiting people image

  • Graphics should be kept in the graphics folder
  • If your site content differs to this you need to identify where they are in Dreamweaver from your web page and file panel

  • Select an image in the SSI
  • In the Properties box identify the file source field. This tells you the Base URL and path to the file
  • In this example the URL and path to the file is http://www.canterbury.ac.nz/web/graphics/people/heather.jpg
    The abbreviated version is /web/graphics/people/heather.jpg
    Both are absolute (See understanding SSIs and make SSI links absolute if you are unsure what this means)

  1. Full URL and path to file - http://www.canterbury.ac.nz/web/graphics/people/heather.jpg (if the file path is an abbreviated version you need to add the first missing part of the URL in the browser to create the full URL and path to file)
  2. Name of file - heather.jpg
  3. Image displayed in browser

Step 6 - upload your new people image and find it in your browser

Now you have identified an existing file and successfully displayed the file in your browser, you can upload the new image and edit the file name in your browser to find the URL.

  1. Add the correctly resized image (must be done via image editing software never resize using Dreamweaver) to the same location as the other images in the SSI file, via your desktop shortcut
  2. Select the file and click the up arrow to upload the image (1 and 2 in the image below)

  1. Type in the URL and path to file (easiest to edit the file name for the existing image you have already location in your browser) to view the image live. This must be exact for the image to display in the browser. If it doesn't display check you have no typos, have used the same lower (or upper case) and have the site URL and path correct
  2. Copy the URL from the browser of your new people image

Step 7 - make an absolute link to the new image in Dreamweaver

There are two parts to creating an absolute link to a people image. Firstly add the image as you normally would. This gets the image into the right place on the page and the source field is visible in the properties panel. But the file pathway to the image source is relative and must be edited to make it absolute.

  1. Add the new image to the page you would on a web page. (If you aren't sure see add an image (and alternate text) to a page)

    Note: This makes the image source path relative (the file path in the source field starts with ../) and you still need to edit it to make it absolute
  2. Double click on in the source field to select the file path. The text highlights blue
  3. Edit - Paste (or Ctrl + V) and paste the URL you copied from the browser in step 6 - upload your new people image and find it in your browser. This changes the file path to the image from relative to absolute
  4. Complete text changes (and any other edits) and upload the SSI file
  5. Check the people page displays correctly on the web

Step 5 - link to a document

To link to a document in an SSI is exactly the same as described in step 4 - link to a graphic. Make sure you format your link correctly (see tips below).

Points and tips

  • Sometimes in Dreamweaver you cannot see the file you have linked to, or it doesn't display as you expected. Always check your work in the live version as this will show you if what you're seeing in Dreamweaver is correct or not (see links to documents in how to and formatting links in the style guide)