Post on 26-Jun-2020
CS 1033 Multimedia and Communications
REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!
Lab 04: Introduction to KompoZer
(Website Design - Part 1 of 3)
KompoZer is a complete web authoring system that combines web file management and
WYSIWYG (What You See Is What You Get) webpage editing. KompoZer is easy-to-use,
making it ideal for non-technical computer users who want to create an attractive,
professional-looking website without needing to know HTML or web coding. KompoZer is free
and is available for both the MAC and the PC.
THE KOMPOZER ENVIRONMENT:
KompoZer lets you create your own webpages. You don't have to know HTML to use
KompoZer; it is as easy to use as a word processor. Toolbar buttons let you add lists, tables,
images, links to other pages, colors, and font styles. You can see what your document will
look like in a browser as
you create it.
When you open KompoZer
it opens up the following
screen. This screen layout
is based on version 0.7.10
Use this picture as a
KompoZer layout reference
sheet as you work through
labs 4-6. If you are reading
this on a paper printout be
sure to open the original PDF file on your computer so you can see the different colours!
Lab 4 – Tutorial 1
Objectives:
Upon completion of tutorial 1, you should be able to:
Turn on and off the toolbars in KompoZer
Find the Edit Site button and identify the Site Manager window in KompoZer
Determine the number of sites that KompoZer is currently pointing at
Using the Edit Site button, determine the folder location that each site is pointing at.
Create a new website that points to an existing folder (i.e. directory)
Create a new website that will point to new folder
Remove an existing website from KompoZer without removing the folder and its
contents
Before we begin, we will review the terms website, webpage and HTML
A website (called a Site in KompoZer) is a collection of related webpages, images and
media files stored in a folder.
A webpage is a file stored in the website folder that has an HTML file format (i.e. the file
extension of .html or .htm). Webpages (.html files) consist of content and HTML tags.
HTML is a language consisting of a standard set of tags that takes content and puts
links, images, and formatting in to the content to create webpages for the World Wide
Web.
Each unique website has its own folder/directory. In general, you should create the
folder FIRST and then use KompoZer to point to that folder (i.e. to the site). Once you
have a site, you can create webpages within the site (i.e. within the folder).
You can create many folders and then using KompoZer, create a site for each folder and
associate the site with folder.
The KompoZer site manager allows you to navigate between sites easily so you can
work with them. The Site Manager panel lists directories that have been set up as
Sites. You can set up many sites; each site will appear in Site Manager regardless of
where the folder appears is stored on your hard drive/memory stick, thus the Site
Manager panel is quite important.
In the next few steps, you will create a new Site called: OP Library Website and associate it
with the oplibrary folder using KompoZer.
SETTING UP YOUR FOLDERS BEFORE BUILDING YOUR SITE
1. Browse to your memory stick (likely your F: drive), and create a new subfolder within
the cs1033 folder called lab04. Then inside the lab04 folder, create 4 new subfolders
called oplibrary, website1, website2 and website3. These folders are empty and will
represent 4 websites that you will be creating/working with. Navigate inside your
oplibrary folder and create a folder called images. Note: the names for ALL these
folders should be all lower case. For example, make sure you call the folder images NOT
Images. Every website should have an images folder to hold your pictures and
graphic files you plan to put on your webpages. You should now have the following
folders:
F:\cs1033\lab04\oplibrary
F:\cs1033\lab04\website1
F:\cs1033\lab04\website2
F:\cs1033\lab04\website3
2. Go to http://www.csd.uwo.ca/~lreid/cs1033labs/lab04/images/ One at a time, right-
click on each file and save each image
into the oplibrary/images folder you
just created on our F: drive. Your F:
drive should look like this now:
GETTING FAMILIAR WITH THE KOMPOZER ENVIROMENT
3. Start KompoZer by clicking on the KompoZer icon on the desktop
4. From the View menu, select the Show/Hide and make sure the following toolbars are
checked: Composition Toolbar, Format Toolbar1, Format Toolbar 2, Edit Mode Toolbar,
Status Bar, Rulers and Site Manager.
5. Toggle each tool bar on and off to see the difference they make in the KompoZer
window.
6. Press F9 to toggle the Site Manager pane on and off. (Or you can do
View>Show/Hide>Site Manager). Make sure the Site Manager pane (along the left side
of the window) is showing.
CREATING A NEW WEBSITE
7. Create a new website by clicking on the Edit Sites
button, circled in red in the this image
8. You will then see the Publish Settings window. This is where you will associate a Site
Name with a folder/directory. In the Site Name: textbox type: OP Library Website
9. Click on the Select directory button and navigate to your oplibrary folder that you
created on your memory stick. Click OK and then OK again. It will look like this:
10.The OP Library Website should now be listed in the Site Manager
Page (as shown to the right). Click on the + symbol next to the
OP Library Website name to expand the folder and make sure
you can see the images folder you created earlier. Then click
on the – symbol to collapse the folder.
11.Put your mouse over the right edge of the Site Manager pane
until the mouse turns into a double headed arrow, then hold
down your mouse and slide it to the left and right to decrease
or expand the side of the Site Manager pane.
12.If you forget the folder location for the OP Library Website, you can find that
information again by clicking on OP Library Website in the Site Manager Pane and then
clicking on the Edit Sites button . Then click on the OP Library Website in the
list of Publishing Sites. This will fill in
the current folder location. Try that
now. You should see something like
this:
13. Now, we will create 3 more websites in KompoZer by associating 3 different names
with 3 different folder. Click on the Edit Sites button and type the name
Website Project 1 in the Site Name: box and browse to the folder
F:\\cs1033\lab04\website1 and then click OK and then OK again. Your new Website
Project 1 should now also be listed in the Site Manager pane. If you complete it and
then click on the Edit Site button again, it should looks similar to this:
14.Repeat step 13 and create TWO more sites by pointing
Website 2 Project to the website2 folder and Website 3
Project to your website3 folder. After you are done, the
Site Manager pane should look similar to this:
REMOVING A SITE (DISASSOCIATING A SITE FROM KOMPOZER)
15.If you no longer are working on a website and wish to remove it from KompoZer, you
can do this WITHOUT removing the folder from the hard drive/memory stick. To do this,
click on the Edit Sites button , then click on the site you wish to remove, in this case
the Website 1 Project, then click on the Remove Site button and finally click on the OK
button:
16.Browse to your memory stick and notice that the website1 folder is still there. When
you remove a site, you are only disassociating it, NOT deleting the folder from your
hard drive/memory stick.
17.Repeat the above step for Website 2 Project and Website 3 Project. So OP Library
Website should be the only site left in the Site Manager pane.
Lab 4 – Tutorial 2
Objectives:
Upon completion of tutorial 2, you should be able to:
Create a new webpage using KompoZer
Put a blank line between 2 lines in a webpage using the <Enter> key
Put a line break between 2 lines in a webpage using the <Shift>+<Enter> keys
Identify the different modes for viewing a webpage inside of KompoZer
Open and close an existing webpage in KompoZer
Toggle between 2 open webpages in KompoZer
List and switch between the 4 modes for viewing a webpage in KompoZer
Preview your webpage in a real browser such as Chrome or IE
CREATING YOUR FIRST WEBPAGE
1. In the Site Manager window, click on the OP Library Website
2. Go the File menu and select File>New, then select A blank document and make sure
Strict DTD is checked and click on the Create button.
3. Notice the Document window opens with a blank file labeled untitled which appears in
the tab directly above the document window.
4. Right now this webpage has no file name. We are going to save it with the file name
index.html. index.html is the starter page (or landing site) for any website, i.e. it is the
first page that gets displayed, the browser looks for the index.html page to show first.
Go to File>Save As and the very first time you try to save a new file, a box will pop up.
This box holds the Property Title that is displayed in a browser tabs. For example, in the
image below, the property title is Personal banking | BMO.
The property title should always be Website – Webpage (e.g. “Google – Google Photos”)
or Webpage | Website (e.g. Personal Banking | BMO). In our case, index.html will the
home page so we are going put: OP Library – Home as shown below:
a. Then hit the OK button
b. You will then be prompted for a file name, make sure you always give a file name
with NO spaces and all lower
case. Make sure the first
page you want people see
(often your home page) is
always called index.html. In
this case, make sure you are
in the oplibrary folder but
NOT the images subfolder
and give this file the file
name index.html as shown
here
5. Your index file should show up in the Site Manager pane. If it is
not there, hit the Refresh button in the Site Manager:
. Then you should see this:
6. In the Site Manager, click on index.html, then before you start
typing in content to the webpage, change the format dropdown box to Paragraph. Once
that is changed, you can start typing.
7. Start typing in the webpage by following the chart below. Type the content on the left
AND, as you go, perform the instruction on the right.
8. From the menu, select File>Save As and confirm everything is still going in the
oplibrary folder under the name index.html. Always use File>Save As to make sure
your webpages go into the correct folder. Click yes when prompted if you want to
override the index.html file. If you use File>Save sometime a file will go in the wrong
folder and you won’t be able to find it.
9. Close the index.html webpage (not the whole site) by clicking on the red X in the top
right corner of this page.
Text to Type Instructions and Notes
Roll Woods Park Public School Library <Enter> <Enter> means press the Enter key on the keyboard. When you press <Enter> it will insert a paragraph break, ie it puts a paragraph break after the line Roll Woods ….
Welcome to Our Library <Enter>
Take a tour of our library where your children have access to books, computer labs and a quiet workspace area for reading, research and group work. <Enter>
Keep typing and allow the line breaks to occur as the text runs out of space. Do not press <Enter> until the last word: work.
Welcome to our library <Shift>+<Enter> …where children, learning and fun<Shift>+<Enter> ……are brought together.<Enter>
<Shift>+<Enter> forces the cursor to the next line without putting a blank line.
Through books, computers and technology<Shift>+<Enter> open your child’s mind<Shift>+<Enter> to learning and the future.<Enter>
10.Create another new webpage. Immediately do File>Save As and give it the property
title of OP Library – Our Teachers then click on OK and give a file name of teacher.html
and make sure it is saved to your oplibrary folder This should save it as teacher.html.
Use the Refresh button in the Site Manager pane to make sure the new page is there.
11.Select Paragraph from the Format dropdown box in the top left corner.
12.Type in the following information:
13.Do File>Save As and save it again as teacher.html in the oplibrary and replace the old
version of teacher.html
14. Click on the red X in the top right to close the teacher.html webpage.
Text to Type Instructions and Notes
Roll Woods Staff Directory<Enter> Principal: Mr. Hardwood<Shift>+<Enter> (519) 656-2141<Shift>+<Enter> hardwood@rollwood.ca<Enter> Grade 1: Mrs. Smith<Shift>+<Enter> (519) 433-3167<Shift>+<Enter> smith@rollwood.ca<Enter>
Between the text Principal: and Mr., leave three spaces. You cannot have MORE THAN ONE space into a webpage without using a special code. KompoZer puts this special code in for you each time you hit the space bar. You can see the code by switching to Source view (the tab at the bottom of the window pane):
Notice a tag   between Principal: and Mr. Hardwood. This is a space HTML tag. Now click back on Normal view. Remember, if you want a blank line, for example between paragraphs, hit the <Enter> key and if you just want a line break, hold down the <Shift> key and hit the <Enter> key, otherwise don’t hit enter and just let the window decide where to break the lines.
MOVING BACK AND FORTH BETWEEN WEB PAGES
15.Click on the Refresh button in the Site Manager pane.
16.In the Site Manager pane, double click on index.html to open that page again if it is not
open.
17.In the Site Manager pane, double click on teacher.html to open that page again if it is
not open. Click back and forth on the tab for the 2 webpages. As of right now, the OP
Library Website contains 2 webpage: index.html and teacher.html
18.Make sure the index.html tab is open and highlight and copy (Edit>Copy or Ctrl-C) the
text Roll Woods Park Public School Library
19.Click on the tab for the teacher.html webpage and paste (Edit>Paste OR Ctrl-P) the text
at the top of this file (above the Roll Woods Staff Directory).
20.Save and close the teacher.html file but keep the index.html file open in the document
window.
VIEWING THE WEBPAGE IN DIFFERENT MODES AND PREVIEWING IT IN A
BROWSER
21.At the bottom of the document window, you will notice 4 tabs: Normal, HTML Tags,
Source and Preview. They indicate the mode you are currently looking at the page in.
Press each of these of tabs and you will see the document window change.
The modes are as follows:
a. Normal (sometimes called Design): This is the mode or view you will
normally be using. It displays the webpage almost exactly like the webpage will
look in a real browser. This is also called a WYSIWYG mode (“What You See Is
What You Get”). When in Normal mode, as you are entering text, images and
links into the Document window, KompoZer is actually creating the webpage
using HTML codes “under the covers” (ie. You don’t see the codes getting
generated but they are being generated).
We will be using this tab MOST of the time.
b. HTML Tags: This mode or view is for
people familiar with HTML. There is a
yellow marker for the start tag for all HTML
elements (end tags are omitted). Clicking
on a marker selects and highlights the
whole of the element. Try clicking on these
markers. We will NOT be using this tab
c. Source: Clicking on this mode shows the
actual HTML code being built to create the
webpage. You should be FAMILIAR with
this tab, we will be using it
occasionally.
d. Preview: Preview mode offers almost the same view as if you viewed the page
in a browser with the addition of rulers and sizing boxes. The main differences
are that scripts do not run (so their effects will not be seen) and links do not
operate. We will NOT be using this tab.
22.Save your index.html again and then close KompoZer
23.Find your oplibrary folder on your memory stick using Explorer and right click on the
file index.html and then select Open With and select Notepad
24.Notice in Notepad that you can see all the content and the HTML tags. Really, a
webpage is just simple text and some HTML tags mixed in. If you know your tags well
enough, you could create all your web pages using just a simple editor like Notepad.
Also, notice that it is much harder to read this way than using KompoZer with the
Normal Tab, that is why we use tools like KompoZer, they make our life easier.
25.Close Notepad
26.Now, still in the Explore window, double click on index.html. That should bring up the
file in a browser. We always want to preview (i.e. check) our file in a browser as that
will show us what the people who are looking at our webpage will see in THEIR
browsers.
27.Open KompoZer again and click on the OP Library in the Site Manager pane and double
click on index.html. Change the second line from
Welcome to Our Library
to
Welcome to Our BRAND NEW Library
28.Save the index.html file (File>Save or click on the Save Icon )
29.Go back to your browser window and refresh (reload) your web page to make sure the
changes were saved:
30.Note: KompoZer has a Browse button that should show you
what the page will look like in a browser but this button is very buggy (i.e. The Browse
button doesn’t work well, ESPECIALLY on Macs). Instead of using the Browse button in
KompoZer, we recommend you ALWAYS just double click on the file you want to check
using Explorer (on Windows) or Finder (on a Mac) as shown in steps 26-29 above. This
will bring it up in your default browser, keep that browser containing the web page
open. Also keep KompoZer open and make the changes in KompoZer, and save the web
page. Then, to see if the changes worked, refresh or reload the page in your browser.
AVOID USING THE KOMPOSER BROWSE BUTTON! REMEMBER: use Chrome, IE or Safari
to check your pages, while you are working, never close the browser, just keep
reloading the page every time you do a save in KompoZer to see if the changes worked.
Lab 4 – Tutorial 3
Objectives:
Upon completion of tutorial 3, you should be able to:
Add a property title, author and description to a webpage
Check that the property title is set using a web browser
Format the headings on a webpage with one of the 6 heading styles
Create a link to another webpage in the same folder
Create a link to a webpage on the World Wide Web
Create a link to an email address that opens an emailing program
SETTING THE WEBPAGE’S PROPERTY TITLE
1. Open KompoZer. In the Site Manager window, click on the OP Library Website
2. Double click on the index.html webpage so that it is open in the Document Window.
3. Make sure that index.html is also still open in a browser (IE or Chrome - Double click on
it using Explorer if you accidently closed it), you are going to toggle between the
browser and KompoZer a lot so position both windows so you can see them.
4. In the browser, notice the property title in the top of the tab.
You might need to change this if you didn’t set it correctly originally when you first
saved your file. The property title is one of the MOST important places that Google
looks for keywords, so it is important to set it to a good name. The general rule is to
give a webpage the property title of
Website Name – Webpage Name
for example: Bank of Montreal – New Accounts OR Bank of Montreal - Contact Us
5. To change the Webpage Property Title of the index.html
webpage, go back to Kompozer and go to Format>Page
Titles and Properties. (NOTE: if the Page Titles and
Properties option is disabled close KompoZer and open it
again, it is a bit buggy!)
Then, in the screen that pops up, for :
a. Title textbox, type: Roll Woods Library –
Home
b. Author textbox, type: your name
c. Description textbox, type: Elementary
Publicly Funded Library
6. Finally, hit the OK button
7. Click on the Source mode tab at the bottom of the
Document Window and you will see the HTML that was generated to create this
information (meta content is sometimes used when Google builds its index).
Then click back to Normal mode and save your index.html file.
8. Refresh or reload the browser and make sure the new property title appears in the top
tab line.
FORMATTING THE HEADINGS (i.e. TITLES) IN A WEBPAGE
9. Now we are going to format the text on the home page (index.html) to make it look a
bit neater. You can use the Headers to indicate section headings. Highlight/select the
text at the top of the index.html page, the text: Roll Woods Park Public School Library.
10.From the Format Toolbar 1:
click on the first dropdown box (it
probably says Paragraph) and
select Heading 1. ((NOTE: If this
dropdown menu is disabled, close KompoZer and open it again, KompoZer is a bit
buggy!) Notice the heading change sizes. Now highlight the text again and select
Heading 3. Notice it is still bolded but slightly smaller. There are 6 sizes for headings:
Heading 1 (largest) to Heading 6 (smallest). All six headings will bold the text and force
a paragraph break at the end of the line. DO NOT use headings for formatting a whole
paragraph of text, instead only use them for headings or titles.
11.Highlight the text: Roll Woods Park Public School Library and set it back to Heading 1.
12.Highlight the text: Welcome to Our BRAND NEW Library and set it to Heading 3.
13.Save your file and then reload/refresh in the browser to make sure it worked.
LINKING TO ANOTHER PAGE
14.In KompoZer, open the file index.html. Move your cursor to the very bottom of this
page (after the line: to learning and the future), make sure that Paragraph is selected
in the toolbar and hit <enter> and then add the text:
Click here to see our staff.
Hit <enter> and add the text:
Click here to see another beautiful library.
and save index.html
15.Highlight the sentence Click here to see our staff. and then click on the button in the
tool bar called Link
16.In the new box that pops up, to the right of the long white textbox you will see a folder
icon. Click on that folder icon and then find the oplibrary
folder and click on the file called teacher.html and then click on the Open button and
then on the OK button.
17.Now highlight the sentence: Click here to see
another beautiful library and click on the Link
button again. Then in the white textbox type the
following URL: https://www.lib.uwo.ca and hit
the OK button.
18.Save your index.html file and then go to your Chrome or IE browser window and
refresh/reload the browser. Click on the first link and make sure it takes you to the
teacher.html page, and then click on the back button and try out the second link and
make sure it takes you to Western Libraries page and then hit the back button.
19. While still in your browser, make sure you on index.html webpage and try testing your
links again. Notice that both links stay in the same tab, they do NOT open a new tab.
Because the teacher.html is in your oplibrary folder, it is a page from YOUR website, so
it should NOT open a new tab and/or new window BUT the link to the Western Libraries
does go to another site (the www.lib.uwo.ca site) and away from your site, so it should
open a new tab rather than us having to remember to hit the back button to get back
to our page. We can force this link to open in a new tab using KompoZer.
20.Go back to KompoZer and open your index.html webpage. Click anywhere on your
second link (the libraries link) and hit the Link button.
21.In the Target area of the Link Properties box,
check the box that says “Link to be opened”
and make sure:
in a new window is selected from the
dropdown box. Then hit the OK button and
save your index.html file again.
22.Refresh/reload your index.html file in Chrome
or IE browser and test the second link. It
should now open a new tab. REMEMBER: if
you have a link that does NOT link to
something within YOUR site folder,
rather it opens a link to something in the
World Wide Web, then it should open in a new tab!
23.Now try making a link yourself! In KompoZer, open the file teacher.html. Add a line to
the bottom of this page that says:
Click here to go back home.
24.Then create a link that does NOT open in a new tab (since it is linking to a webpage
WITHIN your site) that links back to the index.html page, save the file and test it in a
browser.
25.Now we will create an email link. Open the teacher.html file in KompoZer. Highlight the
text hardwood@rollwood.ca and then click on the Link button.
26.In the white box type in the following email address: hardwood@rollwood.ca and then
check the box that says “The above is an email address” and click on the OK button.
27. Save the file and reload it into a browser. Test that the email link tries to open an
email program.
28.On the teacher.html page, turn the text: smith@rollwood.ca into an email link also.
29.Save your teacher.html file and reload/refresh it in a browser and check that your new
email link works and your new link takes you back to the index.html page AND your
original link on the index.html page still takes you to the teacher.html page. Thus, you
should be able to toggle back and forth between the 2 pages without using the browser
Back button, you should just be able to use the links you created.
Lab 4 – Tutorial 4
Objectives:
Upon completion of tutorial 4, you should be able to:
Upload a folder to a webserver and check that the website displays properly
Debug a site where the links are broken using the HTML codes
We are now going to move (SFTP) our folder up to a webserver to view it on the internet, not
just on the machine we are working on. Then we are going to do some things that will break
our site but we are going to learn how to fix it!
UPLOADING YOUR FOLDER TO CREATE A WORKING WEBSITE
1. Search for the program WinSCP on your machine and open that program. (If you have
a MAC, Filezilla is a program that does the same
thing as WinSCP). Fill in the boxes as follows:
a. File protocol: SFTP
b. Host name: panther.uwo.ca
c. Port number: 22
d. User name: Your Western User ID
e. Password: Your Western Password
2. Hit the Login Button
3. If prompted, click on the Continue Button
4. On the right side pane, double click on the
public_html folder to open that folder. The right
side is your individual area on the Western Webserver where you can upload websites.
5. On the left side pane, browse to find your oplibrary folder (it is likely on your memory
drive). The left side is the machine you are currently working at.
6. Drag the oplibrary folder from the left side and drop it in the white area on the right
side. Be careful to drop it in the white area and not into a folder. If you drop over a
folder it might be dropped INSIDE that folder and that is not what we want, we want it
just inside the public_html folder, not inside subfolders of public_html! If you did it
correctly, it should look like this:
7. Now we need to check if our site is on the internet. Open a new tab in a browser
(Chrome or IE or Firefox) and then type this web address:
http://publish.uwo.ca/~youruserid/oplibrary
8. If it worked, you should see the index.html page! Try clicking on your links to make
sure they work also!
9. Right now, everything works perfectly because we walked you through the steps, but
sometimes, when you make your own website, you occasionally do things that break
your site and you don’t realize it till you upload (SFTP) your site. We are going to do
that now, PURPOSELY BREAK YOUR SITE SO THAT YOU LEARN HOW TO FIX IT.
10.One thing students do that breaks everything is moving files after they have created
links or renaming files after they have created links. We are going to do both these
things, prove that the links are broken and then fix the links. Open Explorer and find
your oplibrary folder and make a new subfolder in the oplibrary folder called mypages.
Then move the file teacher.html into the new subfolder, so your oplibrary folder should
look like this now:
11.Now go back to WinSCP and delete the oplibrary folder in the right pane.
IMPORTANT READ THIS NEVER EVER DELETE A FOLDER ON THE LEFT PANE!
It will remove EVERYTHING you have been working on from your
machine/stick. IF YOU DELETE WITH WINSCP, ONLY DELETE FOLDERS IN THE
RIGHT PANE!
12.Then drag the oplibrary folder from the left side and drop it inside public_html (drop it
in the white area again).
13.Now go back to your browser and test your links at:
publish.uwo.ca/~youruserid/oplibrary Reload/refresh the link. Notice that your links
are broken now!
14.Now go to http://publish.uwo.ca/~youruserid/oplibrary/mypages and click on the
teacher.html file and then try clicking on the Click here to go back to the home page
link and notice it is broken too!
15. THE MORAL HERE IS: IF YOU MOVE YOUR FILES AROUND YOU MIGHT
BREAK YOUR LINKS!
16.Go back to Explorer and move teacher.html back into oplibrary folder and delete the
mypages folder so that everything is back the way it was (index.html and teacher.html
in the same folder!).
17.In WinSCP, delete the oplibrary folder on the RIGHT side (on the webserver) and drag it
over again from the left side to the right side and test that the links work again in the
browser.
18. Now we are going to rename files to break the links. Go into Explore and rename
index.html to be Index.html (with a capital I).
19.In WinSCP, delete the oplibrary folder on the RIGHT side (webserver side) and drag it
over again. CLOSE your browser and then start the browser again and reload your site
publish.uwo.ca/~youruserid/oplibrary in your browser. Notice that now it doesn’t show
your home page automatically, that is because it only shows the file called index.html
automatically, NOT the one called Index.html.
(Capitalization will mess everything up
here). Click on the Index.html in your browser and then click on the link to
teacher.html file. Reload your teacher.html file and then click on the link to take you
back to the home page. Notice that is broken also, this is because your link was
pointing to index.html NOT to Index.html! THE MORAL HERE IS: BE VERY CAREFUL
WHEN YOU CHANGE FILENAMES AFTER YOU HAVE BUILT YOUR SITE, you
might break all the links you have built!
20.Fix Index.html so that it is index.html again, delete oplibrary folder on the RIGHT side
and reupload it to the webserver. Make sure everything works again.
21.The last mistake we want to show you is
something that can happen while you are
in KompoZer. Open KompoZer and open
the OP Library Site. Then double click on
the index.html file and click on the text
that says “Click here to see our staff”,
then click on the Link button, so that you
see the text link to the teacher.html file:
22.In the Link Properties box, uncheck the checkbox called:
URL is relative to page location
as follows:
23.Notice that there is now a long path referring to your machine in in the white box! Click
on OK and save your index.html file.
24.Go to Explore and double click on the file called index.html to bring it up in a browser
25.Then try to test your link to go to teacher.html (Click here to see our staff) and it looks
like it is working. DO NOT BE DECEIVED! It is only working on this machine but if you
SFTP it up to panther.uwo.ca, it will no longer work. Let’s try this out.
26. In WinSCP, delete oplibrary folder on the RIGHT side. Drag your oplibrary folder from
the left side to the right side and drop it in the white area (inside public_html). Then go
to http://publish.uwo.ca/~youruserid/oplibrary in a browser.
27.Hover your mouse over the link to Click here to see our staff. Notice that it is pointing
to your machine, this may work for you, but other people won’t be using the same
machine so this link will be broken for others.
28. Right click on the page and select VIEW SOURCE (or View Page Source). Find the
link to teacher.html and notice that it is referring to your machine. THIS IS WRONG as
people who view your page will NOT be on YOUR machine, make sure that you never
ever see things like file:///c in your HTML code, it will NOT WORK!
THE MORAL HERE IS:
a. ALWAYS TEST YOUR SITE FROM A MACHINE OTHER THAN THE ONE YOU
BUILT IT ON
b. IN KOMPOZER, ALWAYS CHECK THE BOX: URL is relative to page location
when you are building your site so that the HTML does not point to your actual
machine.
Lab 4 – Tutorial 5
Objectives:
Upon completion of tutorial 5, you should be able to:
Fix a site that has broken links.
1. Someone make this site but had many problems, you are going to fix the problems.
Open the site in your browser: http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/
2. Notice that there are several things wrong with it, for example, the first page doesn’t
show automatically, this is because the person who created it, called the home page
INDEX.html instead of index.html
3. Click on the INDEX.html file and try to click on the Cool Cuts link. Notice that it doesn’t
work.
4. Right click on that page and select “View Source” and see if you can see why the link
doesn’t work.
5. Go back to http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/ and click on the
coolcuts.html file. Notice that the image doesn’t display. Notice that the image is called
images/afrollama.jpg
6. Go back to http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/ and click into the images
folder. Look at the file names, do you see one called afrollama.jpg? Can you see the
mistake the person made? (they probably renamed their file AFTER they had added it to
the page)
7. Go back to the coolcuts.html page
http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/coolcuts.html and try to click on the
Weddings link. Notice that it is broken too. Hit the back button to get back to the
coolcuts.html page and right click to view source. Notice that the link looks correct:
8. But now go back to here: http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/ Notice
that there is a INDEX.html file, a coolcuts.html file but no wedding.html file. The
person building this site accidentally moved it into the images subfolder. Click into the
images folder and you will see the wedding.html file (click on it to view it).
9. You are going to fix this site. Download this file to your memory stick:
http://www.csd.uwo.ca/~lreid/cs1033labs/lab04/lab4llamas.zip
10.Right click on it and select Extract All and make sure you extract it to inside your Lab04
folder on your memory stick.
12.Open KompoZer and click on the Edit Sites Button in the Site Manager Pane.
Then click on the Site Name: box put Find Mistakes and then find the folder
(lab4llamas) you just extracted using the Select Directory button and then hit OK.
13.Close KompoZer and open it again (KompoZer is a little buggy, if something stops
working, close and open KompoZer, that often fixes things). Click on the + next to Find
Mistakes to see all the files and then click on the + next to images to see the image file
names.
14.Double click on the coolcuts.html file in KompoZer. Then double click on the picture of
the llama. This will bring up the Image Properties box. See if you can figure out how
to fix this image.
15.Using either KompoZer OR windows explorer (use windows explorer to either move or
rename files), fix the site so that the images show and all the links work.
16.Use WinSCP to upload the corrected lab4llamas folder up to a webserver. This time,
instead of panther.uwo.ca, you are going to move it to the cs1033.gaul.csd.uwo.ca
webserver. Fill in the boxes as follows:
a. File protocol: SFTP
b. Host name: cs1033.gaul.csd.uwo.ca
c. Port number: 1033
d. User name: Your Western User ID
e. Password: Your Western Password
17.Drag the lab4llamas folder from the left side to the right side and drop it in the white
area near the bottom.
18.Go to this URL:
cs1033.gaul.csd.uwo.ca/~yourwesternuserid
to make sure ALL your links and images work (make sure you test the 3 links for EACH
of the 3 pages, so you need to do 9 tests). If something doesn’t work, then delete the
lab4llamas folder on the RIGHT side, fix it using “View Source” (right click on the page)
and then KompoZer and/or Windows Explorer and then drag it up again using WinSCP.