Editing Your Homepage
We recommend using Firefox for all your ePortfolio work (and for reading these pages).
To see larger versions of the images in this document hover over the image and click on the expander icon at the top left corner.
Your homepage is the introduction to your ePortfolio, where you can personalize your site with a profile picture and contact information.
Step 1: Download your current Homepage
1. Click on File Manager in the navigation bar on the lefthand side of your ePortfolio workspace. The File Manager contains all of the files and templates that make your webpage work, so be very careful when navigating to make sure you don't misplace or delete any important files.
Please note: you cannot download any files from your file manager using Internet Explorer.
2. In order to edit your homepage, we need to download a copy of the webpage code. In this case, the file is called home.html To download files from your file manager, click on the icon next to the name.
3. When the save window pops up, save the file to your desktop. If your downloads default to a different folder, you will have to drag and drop home.html to your desktop.
The program we are going to use to edit is called Kompozer. It is free web editing software that is relatively easy to use, and it is installed on all of the workstations in the Education labs. If you would like to edit your homepage from your own computer, you can find a download here.
Please note: there are two different version of Kompozer that can be downloaded from their website. We have discovered that the newer version (.83a) causes strange formatting errors on your webpage. To avoid that, use version .70 instead. If you have already installed the program and don't know what version you are using, this is how you check: Mac Windows
Step 2: Edit your current Homepage
4. Launch Kompozer and open home.html. You will notice that none of the background pictures are displayed because we just downloaded the framework of your homepage.
Before editing make sure your profile picture has been saved onto your desktop with an appropriate name. Save your file as profilepicture.jpg.
Common filenaming mistakes:
- profile picture.jpg - Space in the name
- Profilepicture.jpg - Capital letters in the name
- profilepicture.JPG - Capital letters in the file extension
- porfilepicture - No file extension
5. This is the template of your homepage. The red lines and boxes represent the different parts of your webpage, so be careful not to delete anything important. We will be inserting our profile picture into the green box (will not be coloured on your copy!). First, delete the placeholder text. Leave the cursor in this section to ensure proper placement of your photo.
6. Next, go up to the Insert menu and select Image.
7. To browse for you profile picture by clicking on the folder icon. Find your picture off the desktop
8. Add some alternate text. This is a text placeholder in case your picture doesn't load properly. Click OK.
9. Your picture has been inserted into your homepage template. If you need to resize the photo, click on it once and you will see the resize handles. Click the handle in the bottom right corner and drag up to make your photo smaller.
Please note: photos can be resized smaller without losing quality, but cannot be resized larger.
10. Feel free to add an inspirational quote or little blurb underneath the picture. You can change the font, size, and colour as well.
11. Select your text. Then select options from the Format menu.
12. The last part of your homepage to edit is the contact information section. This section is not mandatory, but consider supplying at least an email address.
13. Now that all our changes have been made, we save the edited version.
Step 3: Upload your new Homepage and profile picture
14. Back in our File Manager, we're going to upload the new version of home.html and profilepicture.jpg.
Please note: when uploading files to the File Manager with the same name as an existing file will overwrite the old file without warning. This is helpful when replacing files like home.html with a new version, but be careful in your artifacts folder.
15. Now that both files have been uploaded, we can check to see if it worked by going to our homepage. Sometimes you may have to upload the files more than once if the changes don't show up. If your edits didn't work make sure:
- that you uploaded the right files from your desktop. Remember both home.html and your profile picture had to be on your desktop while you were working.
- home.html doesn't have the wrong name. Your website is specifically coded to look for a file with that name
- that your profile picture is named correctly
Handy Tip: in the future you can change your picture easily (without having to edit your homepage) if you name the new photo exactly the same as your previous picture in your File Manager. When you upload the new one, it should just automatically replace it!
- Editing your About Me page
- Editing your Teaching Beliefs page
- Editing your Resume page
- More HACQs.
- More resources.