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 places in an external file (a .css file, a cascading style sheet file) and then you just attach that 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 think 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://cs1033.gaul.csd.uwo.ca/~lreid2/other/student23/major/comingsoon.html (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://cs1033.gaul.csd.uwo.ca/~lreid2/other/student22/assign3/ 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.From the Attribute dropdown box, select Name. In the Value: box type a name for this

button that you will remember that has NO SPACES in it and lower case, for example, we will use the name: homebutton

19.In this same window, click on the JavaScript Events tab. From the Attribute dropdown box select onmouseover.

20.In the Value textbox type this exactly:document.homebutton.src = "images/homeroll.jpg"

21.

22. If things are quite lined up correctly, click on the Source Tab and delete any <h2> and </h2> tags you see between the <table> and </table> tags.

23.We are going to use HTML tables to give us the clean alignment. We are doing this because this is a beginner course and this is the easiest way to get clean edges however, if you go into web design, you shouldn’t be using tables to achieve the edges, you should be using <div> tags and css. <div> tags and page layouts can get complicated quickly. So once again, we will be using tables but if you want to learn the proper way to handle the layout, check out this site: https://www.w3schools.com/html/html_layout.asp and http://www.beginnersguidetohtml.com/guides/css/layout/div-tags on your own time.

24.In KompoZer, double click on the index.html webpage so that it is open in the Document Window. We are going to set up our page layout something like this, except we will NOT have table borders so that people seeing our page don’t know we are using tables to line things up (it will be an invisible table):

To achieve our look, we can stack tables on top of each other, or merge cells or even put tables inside of other tables.

25.Click on the banner image, then hit the left arrow key a couple of time to move your cursor just before the banner image. Then select Insert>Table. Select the Precisely tab. In the Insert Table window, set the Rows to 2 and the Columns to 3 and the Width to 1000 pixels and the Border to 0. Then click on the Cell tab and set the Horiz alignment to Left, the Vert alignment to Top , Text wrapping to Wrap and the Cellspacing and Cellpadding to 0, then hit the OK button.

26.Select the top 3 columns (all of row 1) and right click

and select: Join Selected Cells to merge the top 3 cells together. Click on the banner image and cut it (Edit>Cut or Ctrl-x) and paste it (Ctrl-v) into that top long cell.

27.Click in row 2 of the table, in the first cell (left most one), right click and select: Table Cell Properties and make sure you are on the Cells Tab and that Cell is selected from the dropdown menu and select Horizontal and make sure it is Center. We are going to put our links in these cells and we want them centered. Then click on the Apply button and then the Next button to get to the next cell and set it’s horizontal alignment to Center and hit Apply and then the Next button and do the same thing for the third cell (Horizontal Center and then Apply) and then hit the OK button.

28.Highlight the Home link and cut it (Ctrl-x) and then paste it in the second row, the left most column, cut and paste the Provinces link in the middle cell of the second row and cut and paste the History link in the last cell in the second row. It should look like this (Notice how the links are nicely centered in each cell because we set the center property for each cell):

29.Delete the lines | that were between the links and at that position insert another table that is precisely (use Precisely Tab) 1 row by 1 column, 1000 pixels and cellpadding and cellspacing of 0 and Horiz alignment Center and Vert alignment middle.

30.It will look like this:

but remove the space between it and the table above so that it looks like this:

This 1 by 1 table is going to be an outer table that holds the positioning for an inner table. The inner table will have some rows and columns and we will put text and images into each cell to allow text to wrap around the images.

31.Put your curser INSIDE that new table (inside that one cell) and insert another table (Insert>Table) that is precisely 3 rows by 2 columns and 90 % of the cell and has left alignment and top alignment and cellpadding of 8, just like this:

We made this inner table just be 90% because we want some padding and we don’t want it to touch the edge of the outer table (you can play around with these values when you do assignment 2 and 3). We also gave some cellpadding so that the text doesn’t touch the images.

32.It should look like this now:

33.Join the two cells in the top row together (select 2 cells, right click and Join Selected Cells) and then move (cut and paste) the line Welcome to this site about Canada! into that new row. This top row will hold our title/heading/intro.

34.Then cut and paste all the text from Here are some fun facts about Canada to the end of the bulleted list and paste that text into the left cell of row 2 of the new table.

35.Then cut and paste the image of the market into the right cell of row 2 in the new table. It should now look like this in KompoZer:

36.Now join the 2 bottom cells of the new table (highlight them, then right click and select Join Selected Cells). Then cut that last line in the file (the line: Some unofficial symbols…) and paste it into that bottom row of the new table.

37.Save your file and reload it in your browser, now you should have nice clean edges and text wrapping around the image:

38.This is just one way you could use tables to create the alignment, you can play around with the cellpadding and you can change the way you join cells to get the look you want. Try to keep the borders on the table to be 0 pixels so that the user doesn’t know you are using tables to get these nice clean edges. Always start with outer tables of 1000 pixels, as most users on a laptop or desktop machine, won’t have their resolution less than 1000 so you are guaranteed they won’t have to horizontally scroll to see your links. Don’t go much bigger than 1000 though because then we might be forcing them to scroll.

Lab 5 – Tutorial 4

Objectives:Upon completion of tutorial 4, you should be able to:

Create clean alignment without any guidance Upload your folder to a webserver and checking your work

ALIGNING THE REMAINING TWO PAGES1. In KompoZer, in the index.html file, click on

the banner image, then right click and select Table Select>Table:and then from the menu bar select Edit>Copy in order to copy the table holding the banner and the links. Then double click on the provinces.html page to open it.

2. Add (or copy your table from the index.html file) a table that will replace this:

with this:

3. Add in the banner and links to the new table4. Add another 1 by 1 table that is 1000 pixels below that the banner and links table5. Inside that table put another inner table that will be about 95% of the outer table, make

it 2 columns by 11 rows. Join the first 2 cells in the top row together and put the heading Provinces in there and underneath put the numbered list of provinces.

6. Put the facts about each province in the left cell of the remaining rows. Copy these flags: http://www.csd.uwo.ca/~lreid/cs1033labs/lab05/content/flags/ for the provinces into the canada/images folder and put each flag beside the appropriate facts, make each image about 300 pixels wide (under Dimensions Tab).

7. When you are done, save your page and test it in a browser, it should look similar to this:

8. In KompoZer, double click on history.html. 9. Copy the banner and links table (right click>Select

Table>Table then Edit>Copy) you just built from either provinces.html or index.html and replace the top 2 lines of the history.html file with the banner/link table.

10.Insert a 1 row by 1 column, 1000 pixel table right under the navigational links.

11.Insert an inner table (95% of outer table, you can make it 2 rows by 3 columns to start and see if you can merge cells to get a nice layout or you can use your own values for the rows and columns as you see fit). Add in the History heading/title and lay the remaining text out nicely. Find an image you like on the internet that represents Canada’s history and copy that link. Then figure out where you want to insert that image, put your cursor there and click on the Image Button and paste the link into the Image Location box (this way you don’t need to store it in the images folder, you can use it directly from its original site) Make sure you set the Dimensions to work in your table.

12.Once you have finished laying out the history.html page, resave it and double check it in a browser:

UPLOADING YOUR FOLDER TO CREATE A WORKING WEBSITE1. 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

2. Hit the Login Button3. If prompted, click on the Continue Button4. Find your canada folder on the left side and drag it over to the right side pane and drop

it in the white area below.5. Open a browser and go to this address: cs1033.gaul.csd.uwo.ca/~youruserid6. Click on the canada folder. Test out your links and make sure it all works