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