CS 1033Multimedia 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 1In 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 FOLDERS1. 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 RULES15.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.cssb. Click on the small top left dropdown and pick Style rulec. Make sure radio button style applied to all elements of a type is selectedd. From the dropdown to the

right of the text box, select h3e. Click on Create Style rulef. Click on the Background Tabg. 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.html2. Click on the CaScadeS button to bring up the CSS Stylesheets window3. 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 rule12.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 file25.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 WEBPAGE1. 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 windowb. Click on the Advanced Edit … buttonc. From the Attribute dropdown box, select named. In the Value: box, type the name of provbuttone. Click on the JavaScript Events tabf. From the Attribute dropdown box, select onmouseoverg. In the Value: box, type document.provbutton.src = "images/provroll.jpg"h. From the Attribute dropdown box, select onmouseouti. In the Value: box, type document.provbutton.src = "images/prov.jpg"j. Click OK and then click OKk. 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 SITE1. 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.zipand 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 namesb. 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: SFTPb. Host name: cs1033.gaul.csd.uwo.cac. Port number: 1033d. User name: Your Western User IDe. Password: Your Western Password

9. Hit the Login Button10.If prompted, click on the Continue Button11.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/~youruserid13.Click on the laurfav folder. Test out your links and make sure it all works