cs 1033 - computer science - western universitylreid/cs1033labs/lab06/lab06.pdf · cs 1033...
TRANSCRIPT
CS 1033 Multimedia and Communications
REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!
Lab 06: Introduction to KompoZer
(Website Design - Part 3 of 3)
Lab 6 – Tutorial 1
In this lab we are going to learn how to make our pages a bit more attractive by changing the
fonts, font sizes, colours, etc… Once you have built your webpage, you apply style rules to
change the look and feel of the page.
Objectives:
Upon completion of tutorial 1, you should be able to:
Define a style rule in a css file
Using Notepad, create a blank CSS style sheet file that has a .css extension
Using KompoZer, attach the .css file to a webpage
Create at least 3 style rules for a heading HTML tag on a webpage.
Create style rules for a table.
Create style rules to change how the links look.
Remove style rules that have been created.
Use a browser to check to see if the style rule was applied to the heading.
SETTING UP YOUR FOLDERS
1. Browse to your memory stick (likely your F: drive), and create a new subfolder within
the cs1033 folder called lab06.
2. Download this file: http://www.csd.uwo.ca/~lreid/cs1033labs/lab06/canada.zip to your
lab06 folder and unzip it in the lab06 folder (right click on the .zip file and then choose
extract all). You should now have a folder call lab06/canada/canada on your memory
stick.
3. Open KompoZer and create a new website by clicking on the
Edit Sites button.
4. You will then see the Publish Settings window.. In the Site
Name: textbox type:
Canada Part Two
5. Click on the Select directory button and navigate to your
lab06/canada/canada folder that you just unzipped on your memory stick. Click OK and
then OK again.
6. The Canada Part Two Website should now be listed in the Site Manager Page. Click on
the + symbol next to the Canada Part Two Website name to expand the folder and
make sure you can see the three .html files and the images. folder you created earlier.
7. Style rules are used to create the “Look and Feel” of your webpage (e.g. the font you
pick or the font size you pick for your headers). You can just store the rules right inside
each webpage (these are called internal rules) but if you do this, then if you create a
rule that you want to use on several pages, you have to rebuild the rule over and over
again in each page. AND if you want to slightly modify a rule, you will need to go back
to each page to modify the rule, you can’t just modify it once and apply it to all the
pages. This is why it is preferable to use EXTERNAL style rules. External style rules are
placed in an external file (a .css file, a cascading style sheet file) and then you just
attach the .css file to each of your webpages. Then, when you want to change the font
size for your heading 1 headers, it changes the font size on ALL the .html files heading
1 headers that have been attached to that .css file.
8. KompoZer allows you to attach a .css
file but it does NOT allow you to create
one, so to create our .css file, we need
to open a very simple text editor like
Notepad on a Window machine or
TextEdit on a Mac. If you are using a
Mac to do your assignments, make
sure you have set TextEdit to Make
Plain Text as shown in this picture
We are going to use Notepad in the labs because we are on Windows machines. Open
Notepad and just select File>Save As and from the Save as type: dropdown box select
All Types and save the blank file as mystyles.css IN the lab06/canada folder (NOT into
the images folder, directly in the canada folder):
This creates an empty file that we will now use in KompoZer to hold our style rules.
9. Go back to the KompoZer window and hit the refresh button so that
you can now see the mystyles.css file under your Canada Part Two
area:
10.Double click on the index.html file to open it. We will give it some
styles. We are going to use the CaScades tool button to build the style
rules.
Please note, the good thing about KompoZer is that it is FREE, the bad thing is that it is
a bit buggy, if things don’t seem to be working, try to close KompoZer and open it
again, that often fixes thing! Click on the CaScades Button.
11.You will now see the CSS Stylesheets window. This is where you will build your rules.
First we will attach our mystyles.css to the index.html page. Click on the dropdown box
at the top left corner and pick Linked Stylesheet:
12.Then click on the Choose File button and find the
mystyles.css file in your canada folder and click on
Open:
13.At this screen click on the Create Stylesheet button
BEFORE clicking on the OK button, so you see this
(this is the one time when it is okay to see the full path
to your stick,
KompoZer doesn’t
include it here in the
html):
14.Then click on the OK button, you will go
back to your index.html file. You have
now linked the mystyles.css file to
index.html file. If you click on the source
tab, you will see the HTML tag that was
just created to do this:
CREATING SOME STYLE RULES
15.In KompoZer, click on the CaScadeS button again and click on
the mystyles.css along the left.
16.Click on the little left most dropdown box and select Style
rule
17.We will create a style for the heading 2 headers. Make sure the radio button style
applies to all elements of type is selected and then click on the dropdown box and
select h2:
18.Then click on the Create Style rule button:
19.You will see a blank box, you can type your rule in here if
you know the syntax but it is easier to use the tabs. Click
on the Text tab and then select the Color box and pick the
dark red color and hit the OK button:
20.For Font family select predefined Arial, Helvetica, sans-
serif and for Case: select Upper
case as shown here:
21.Click back on the General Tab and you will see that KompoZer is building the rules for
h2 headings in the big white box:
22.Let’s build another rule. In the CSS
stylesheets window (click on the
CaScades button again if you lost this
window), click on the mystyles.css file.
Select the little dropdown box in the
top left corner and select Style rule.
Then select style applied to all elments
of type and select body from the
dropdown box and then click on the
Create Style rule button so you see
the white box again that will hold the
rules.
23. Click on the Background Tab and click on the Color picking box and select a light pink
colour:
24.Then click on the Text tab and set the predefined font family to Arial, Helvetica, sans-
serif and the Color to white:
25.Hit the OK button so you go back to the index page.
26.Hit the Cascades button once more to bring on the CSS window and select the
mystyles.css file and select the little dropdown on the top left and select Style rule.
27.Make sure the style applied to all elements of type radio button is selected and this
time, rather than using the dropdown box, type the word table into the white box and
hit the Create Style rule button.
28.We are going to build some rules for the table. Select the Background Tab and select
the color picker and select a dark red.
29.Close KompoZer and open your index.html file to see what your page looks like in a
browser (just find your canada folder using Windows Explorer and click on the
index.html file). Make sure everything looks good (our Heading 2 might not be showing
well now (the red on red), we will fix that in a minute).
30.Open KompoZer again, double click on the index.html file and then click on the
CaScadeS button. In the CSS Stylesheets window, double click on the mystyles.css
along the left.
31.Now the blue links are not very easy to read over the dark red background. We can
change their colour as well. Then click on the tiny dropdown box along the top left and
select Style rule again
32.Select the radio button called custom style
rule and type a:link into the textbox and
then hit the Create Style rule button.
33.Click on the Text tab and change the Color to a grey
colour.
34.We can also modify the colour of links that the user has
visited (already clicked on). Do all the same steps as
above but this time, instead of typing a:link, type
a:visited and pick a colour you think will work well for
this page. You could even change the color when the
user hovers over a link by doing everything as you did
above but instead of a:link type a:hover.For the
a:hover try setting the background color or font size
and check out the results in a browser. Note: if you do
create a rule for a:hover, it MUST be done after the
a:visited and a:link rules.
CHECKING YOUR STYLE RULES IN THE BROWSER
AND DELETING EXISTING STYLE RULES
35.Close the CaScades window and preview your page in the browser. Notice that the
heading 2 is now a bit dark. We can also modify rules that we have built. Go back to
KompoZer and click on the CaScades button and then, in the CSS Stylesheets window
double click on the mystyles.css file along the left. Then click on the h2 rule.
36.Then click on the Text tab and pick a lighter colour like grey or white. Change the Font
Size to 200%.
37.Create one more new style rule on Heading 3, while in CaScades (CSS Stylesheets
window)
a. Double click on mystyles.css
b. Click on the small top left dropdown and pick Style rule
c. Make sure radio button style applied to all elements of a type is selected
d. From the dropdown to the
right of the text box, select h3
e. Click on Create Style rule
f. Click on the Background Tab
g. Click on the Color picker box
and pick bright yellow.
h. You should now see this:
38.Notice how this style does NOT look good. We can delete style rules also. Click on the
h3 along the left and hit the red X at the top. This will delete a style rule:
39.Once you hit the X, the rule should disappear. Then click on the OK button to make the
CSS Stylesheets window disappear.
40.Preview your index.html file in the browser. Notice how the index.html page looks good
but the provinces.html page and the history.html page still have no styling. We will fix
that in the next tutorial.
Lab 6 – Tutorial 2
Objectives:
Upon completion of tutorial 2, you should be able to:
Attach a style sheet that you have built to a webpage that has no styling.
Create a class and give that class some styling rules
Select a section of text and apply the class to the text.
Create a class for images and give that class some styling rules
Apply that class to some images.
ATTACHING THE STYLE SHEET FILE TO THE OTHER PAGES IN YOUR SITE.
1. Open KompoZer and double click on the file provinces.html
2. Click on the CaScadeS button to bring up the CSS Stylesheets window
3. Click on the small dropdown button in the top left corner
and select Linked stylesheet
4. Click on the Choose File button and select the file
mystyles.css and click on the Open button
5. Click on the Create Stylesheet button and the provinces.html page should now have
styling. Then click on the OK button and hit the Save button for provinces.html
6. Do the same steps above for the history.html file to give it styling rules.
7. Preview your 3 pages in a browser.
8. In KompoZer, double click on the provinces.html page.
9. Click on the CaScadeS button to bring up the CSS Stylesheets window.
10.Double click on the mystyles.css file along the left.
11.Click on the small dropdown in the top left corner and select Style rule
12.This time we are going to create a CLASS. A class is a special HTML identifier that says
when we put this identify on blocks of text, we want those text blocks to all have the
same style rules. Then we will build the style rules
for the class. We can give the class any name we
want but it cannot have spaces in it (it should just
be descriptive letters, like, for example: provfacts).
We will build one now. From the General Tab, select
the radio button: style applied to all element of class
and then type in the name .provfacts
NOTE: KompoZer puts the . in for you, you just
need to type provfacts. Then hit the Create Style rule button.
13.After the blank Style rule box comes up under the
General tab, click on the Text Tab and select Use
custom font family and from the dropdown menu
select Arial Black. Select a color of light grey, select
Alignment of Left. Then hit the OK button to close the
CSS Stylesheets window.
14.In KompoZer, in your provinces.html file, select all the
text under the British Columbia heading, the facts
about British Columbia (but don’t highlight the
heading).
15.From the second dropdown box in the menu area,
select the .provfacts
16.You should now see that text modified so that it has all
the rules you just put into the .provfact class. Now
select the Alberta facts and do the same thing.
17.Assign the class to each of the province’s facts. Save
your province.html file and reload it in the browser.
18.Close KompoZer and reopen it and double click on the
provinces.html file.
19.Click on the CaScadeS button and create a new style
rule for images by: clicking on mystyles.css, selecting
the Style rule from the little dropdown box, selecting
style applied to all elements of type and typing img
into the box that holds the type of HTML tag you want
to modify. (<img> is the HTML tag to modify images)
Then click on the Create Style rule button.
20.Click on the Borders Tab and select Top:
groove, Width: medium and Color: #ffff66
Then click on the OK button. Notice that this
puts a yellow border around ALL the
images(like the banner) and we just wanted a
border around the flag images. To fix this, we
should use classes instead. In the CSS
Stylesheets window, delete the rule for img.
21.In the CSS Stylesheets window, double click on
the mystyles.css file, then the dropdown
box>Style rule, then click on style applied to all elements of class and then type the
name .flagimg for the class name and then hit the Create Style rule button.
22.Then click on the Borders tab and select Top: solid Width: thick: Color: #ffcccc (a pink
color).
23.Then click on the OK button to close the CSS stylesheets window and back to the
provinces.html file and hit the Save button and CLOSE KompoZer.
24.Open KompoZer again and double click on the provinces.html file
25.Right click on the BC flag image and select Image Properties to bring up the Image
Properties window. Click on the Advance Edit… button
26.Now we can set the class for this image. In the Attribute dropdown box, select class. In
the Value: box type the new class name we just made up: flagimg (do NOT type the
.). Then hit the OK button.
27.Hit the OK button again, now you should see the border around the image.
28.Do the steps above to put the border on all the flags.
29.Save your provinces.html file and reload it in the browser to see it.
Lab 6 – Tutorial 3
Objectives:
Upon completion of tutorial 3, you should be able to:
Look at HTML code and see why things are displaying correctly
Add rollover buttons to your site.
Switch the external style sheet that is used and preview the differences.
Debug a site that has some issues.
DEBUGGING A WEBPAGE
1. In your browser, open up the file provinces.html. Notice how it has an extra line.
Sometimes the only way to figure out why extra lines are showing up is by taking a
look at the HTML codes.
2. From the image above, we can see that the extra line is INSIDE the table (because the
line has the darkred background and we put that background on the table). So when
we look at the codes, we should look AFTER the <table> tag. Also notice the line is
before the banner. So we should look BEFORE the <img> tag.
3. Go back into KompoZer and open the province.html page and click on the Source tab
at the bottom to see the HTML codes. You will likely see something like this:
4. Try to find the <table… tag
near the top and the <img …
tag near the top (the <img
…tag should be pointing to
our banner).
5. Notice the <h1> tag. That is still there from lab 4. When we removed the text and
inserted the banner image, we didn’t get all of the tags, and the <h1> and </h1> tags
are still there. Remove BOTH of those tags in the Source view. Make you sure you get
the whole of tag <h1> and the whole of tag </h1>
6. Save your file and reload it again in the browser. Now that extra line should be gone.
Sometimes you will need to look at the HTML tags to figure out why things aren’t lining
up. KompoZer tries to make it so that you shouldn’t have to do this very often, but if
you get really stuck, look at the tags and you might figure out the problem yourself!
ADDING ROLLOVER BUTTONS
7. Our text links (Home, Provinces, History) are okay but lets add some buttons to make it
look a bit neater. The length of your buttons should add up to the length of your table.
We need 3 buttons and our table is 1000 pixels, so in our case, we made each button
about 333 pixels wide and we stored them in the canada/images folder (remember to
put all your images in your images folder)
8. In KompoZer, double click on your index.html file. Right under the Canada banner,
highlight(select) everything in the second row (the HOME PROVINCES and HISTORY)
9. Hit the delete key to delete these 3 links.
10.Put your mouse in the first cell and click on the Image button and then on the Image
Location folder icon to find the image and navigate to the lab06/canada/images folder
and select the file called home.jpg , then fill in Home Page for both the Tooltip and
Alternative Text. Then click on the OK button.
11.Do the same thing for the Provinces Link (click on the middle cell and insert the image
prov.jpg) and the Historys link (click in the last cell and insert the image history.jpg).
Put Provinces Page and History Page for the Tooltip and the Alternate Text. It should
look like the image below.
12.Save the file and reload it in the browser. The problem now is that we have lost our
links To fix this click on the home button image and then click on the Image button to
bring up the Image Properties window.
13.Click on the Link tag and then click on the folder icon
and find the file index.html in the lab06/canada folder
and click on the Open button. Make sure the URL is
relative to page location checkbox was checked:
14.Do the same think for the Province button (link it to
provinces.html) and the History button (link it to
history.html) and make sure the URL is relative to page
location checkbox is checked.
15.Save your index.html file and reload it in the browser
and make sure that your links work again.
16.Go back to KompoZer and double click on index.html. Now we are going to make
rollover buttons to make the buttons look even cooler. In order to do this, you need
two images that you want to swap in and out when the user moves his/her mouse over
the first image. For example, the buttons on this page are rollover buttons:
http://www.csd.uwo.ca/~lreid/cs1033labs/lab06/rollover1.mp4 (move your mouse
over the buttons). The buttons on this site are also rollover buttons but a bit more
subtle than the previous example:
http://www.csd.uwo.ca/~lreid/cs1033labs/lab06/rollover2.mp4
We will be using this image:
http://www.csd.uwo.ca/~lreid/cs1033labs/lab05/content/images/home.jpg and this
image: http://www.csd.uwo.ca/~lreid/cs1033labs/lab05/content/images/homeroll.jpg
as our rollover images.
Click on the image of the Home button (so it is select) and then hit the Image Button
to bring up the Image Properties window.
17.Click on the Advanced Edit… button
18.The Advanced Edit button allows us to do the following:
a. Give the image a name (we are going to give it the name homebutton). The
name can be anything you want but it should have NO spaces in it and be lower
case.
b. Create a command that changes the image’s source (i.e. the location for the
image) when the user moves their mouse OVER TOP of the image
c. Create a command that changes the images source back to the original image
when the user moves their mouse OUTSIDE of the image.
THIS IS HOW YOU CREATE ROLLOVER BUTTONS.
19.First we need to give the image a name that we can use for referring to it. From the
Attribute dropdown box, select Name. In the Value type the name: homebutton
20.Now we need to make the image change when the user puts his/her mouse over the
image. In this same window, click on the JavaScript Events tab. From the Attribute
dropdown box select onmouseover.
21.In the Value textbox type this exactly:
document.homebutton.src = "images/homeroll.jpg"
What this:
document.homebutton.src="images/homeroll.jpg"
means is for this document (i.e. this webpage) find the image with the name of
homebutton (i.e. the home button image), make its picture (source or src) when the
user moves their mouse over (onmouseover) this object (the homebutton image) be
the homeroll.jpg file in the images folder, i.e. the file: ”images/homeroll.jpg”.
22.Do not hit the OK button yet!
23.Now we need to make the image change BACK to the
original image when the user moves his/her mouse OUT
(away from) the image. From the Advanced Editor, still on
the JavaScript Events tab, click on the dropdown menu for
the Attribute: and select onmouseout
24.In the Value: area type the following text exactly: document.homebutton.src = "images/home.jpg"
25.Then click on the OK button in the Advanced Property Editor window and the OK button
in the Image Properties window.
26.Now do the same think for the Province button the index.html page:
a. Double click on the prov.jpg image to bring up the Image Properties window
b. Click on the Advanced Edit … button
c. From the Attribute dropdown box, select name
d. In the Value: box, type the name of provbutton
e. Click on the JavaScript Events tab
f. From the Attribute dropdown box, select onmouseover
g. In the Value: box, type document.provbutton.src = "images/provroll.jpg"
h. From the Attribute dropdown box, select onmouseout
i. In the Value: box, type document.provbutton.src = "images/prov.jpg"
j. Click OK and then click OK
k. Save your file and reload it in the browser to check the second button.
27.Now do the same thing for the History button make it a rollover button. Remember:
whatever name you give the history button is the same name that must be between the
document. and the .src=”images/historyroll.jpg”
28.The problem now is that our index.html file has
the linked and working buttons but not the other
pages. We are going to copy the table that is
holding the banner and the buttons to the other
pages so that we don’t have to rebuild all the
links and rollover buttons again. In KompoZer,
double click on the index.html file. Click once on
the banner image and then right click. Select
Table Select>Table. This should select the table
containing the banner and the buttons.
29.From the Edit Menu, select Copy.
30.Double click on the provinces.html file to open it in a tab.
31.Click on the banner image and then right click
and select Table Delete>Table to delete the
table with the banner and links
32.Keep your cursor in the same position and
paste back in the table and buttons that you
just copied: Edit>Paste Now your rollover
buttons and banner should be in the
provinces.html file. Save your provinces.html
file.
33.Follow the same steps as above to put the rollover buttons and links into the
history.html file. Save your history.html file
34.Reload your page in the browser and double check all your links.
35.Everything should looks pretty good now.
SEEING THE POWER OF EXTERNAL STYLE SHEETS
We are now going to attach a different style sheet to index.html so that you can see
how versatile CSS files can be. Just by switching the .css file for another .css file, you
can totally change the appearance of your site!
36.Click on this link: http://www.csd.uwo.ca/~lreid/cs1033labs/lab06/styling/ and right
click on the file canadastyle.css and select Copy Link Address
37. Go back to KompoZer and double click on the file index.html. Then click on the
CaScases Button to bring up the CSS Stylesheet window.
38.Click on the mystyles.css and then click on the Red X to remove
(unattach) this style sheet.
39.Click on the little dropdown in the top left corner and select
Linked Stylesheet.
40. Paste the link you just copied into the URL textbox and then click on the Create
Stylesheet Button.
41.Hit the OK button, save your file, and preview it in the browser. Click on the provinces
link and this history link. Notice that they link to pages with the old style.
42.Add this new style sheet to the province.html and history.html. Save your files and
preview them in the browser. Look at the province flags and see some of the cool
things you can do with stylesheets!
Lab 6 – Tutorial 4
Objectives:
Upon completion of tutorial 4, you should be able to:
Debug a site with errors using KompoZer.
Upload your folder to a webserver and check your work
DOWNLOAD AND SETTING UP THE SITE
1. Here is a silly little site with FIVE errors on the home page.
http://www.csd.uwo.ca/~lreid/cs1033labs/lab06/finderrors/laurfav/index.html
Try to identify the 5 errors on the home page.
2. Right click on the index.html page in the browser to look at the HTML tags. You should
be able to see some problems immediately.
3. Near the bottom, notice the link to the turnip image:
Now look here at the list of images:
http://www.csd.uwo.ca/~lreid/cs1033labs/lab06/finderrors/laurfav/images/ , and see if
you can figure out why that yummy turnip doesn’t appear propertly.
4. Download this zipped file containing the site:
http://www.csd.uwo.ca/~lreid/cs1033labs/lab06/finderrors/laurfav.zip
and unzip the file somewhere on your memory stick. You should now see a folder called
laurfav that contains .html files and an images folder.
5. Open KompoZer, and use the Site Manager to create a new site that points to the
laurfav folde
DEBUGGING – FIND AND FIX THE ERRORS IN THIS SITE
6. All the errors that need to be fixed are in the index.html file. Try to figure out each
error and fix them and save your index.html file in KompoZer. Remember to check:
a. The case of the files names
b. The location of the file names
7. Once you have fixed all the five errors, save index.html again. Now we are going to
upload your site to a webserver to make sure it actually worked!
UPLOADING YOUR SITE TO TEST IT
8. 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: cs1033.gaul.csd.uwo.ca
c. Port number: 1033
d. User name: Your Western User ID
e. Password: Your Western Password
9. Hit the Login Button
10.If prompted, click on the Continue Button
11.Find your laurfav folder on the left side and drag it over to the right side pane and drop
it in the white area below.
12.Open a browser and go to this address: cs1033.gaul.csd.uwo.ca/~youruserid
13.Click on the laurfav folder. Test out your links and make sure it all works