CS 1033Multimedia and Communications

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

Lab 05: Introduction to KompoZer(Website Design - Part 2 of 3)

Lab 5 – Tutorial 1

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

Paste text into KompoZer and save it as a webpage Create a basic navigational structure that links up 3 pages Create a link that links to another section of the page Create a link that links to another section of a different page Create a link that links to a URL Create at least 2 or 3 different types of the 6 possible headings Create an ordered list Create an unordered listSETTING UP YOUR FOLDERS AND BUILDING YOUR INITIAL THREE PAGES1. Browse to your memory stick (likely your F: drive), and create a new subfolder within

the cs1033 folder called lab05. Then inside the lab05 folder, create a new subfolder called canada. This folder will be your website and will hold the webpages you create. Inside the canada folder, create a subfolder called images

2. Open KompoZer

3. Create a new website by clicking on the Edit Sites button, circled in red in the this image

4. You will then see the Publish Settings window. This is where you will associate a Site Name with a folder/directory. In the Site Name: textbox type: My Canada

5. Click on the Select directory button and navigate to your canada folder that you created on your memory stick. Click OK and then OK again.

6. The My Canada Website should now be listed in the Site Manager Page. Click on the + symbol next to the My Canada Website name to expand the folder and make sure you can see the images folder you created earlier. Then click on the – symbol to collapse the folder.

7. Double Click on the My Canada website in KompoZer in the Site Manager Pane8. In a browser such as Chrome, go to this site:

http://www.csd.uwo.ca/~lreid/cs1033labs/lab05/content/homepage.txt and copy all the content on this page and then go back to KompoZer and paste the content into the document window as follows:

9. Select File>Save As. When prompted for a title for the current page, enter: My Canada – Home and hit the OK button. Then, when prompted for the file name, navigate into the canada folder and give the file the name index.html and hit the OK button.

10.Now select File > New and make sure that A blank document is selected and hit the Create button. A new tab should open. In this new tab, paste the text as you did in step 8 above but use the ALL of the text from this link: http://www.csd.uwo.ca/~lreid/cs1033labs/lab05/content/provinces.txt

11.Select File>Save As and when prompted for a title, give this page the title of:My Canada – The Provincesthen give this webpage the file name: provinces.html and hit the OK button

12. Create one more new page with the property title of My Canada – History and the file name of history.html. Into this page, paste ALL of the following content: http://www.csd.uwo.ca/~lreid/cs1033labs/lab05/content/history.txt

13.In KompoZer, click on each tab and resave each of the three files that you just created.

14.You should now have 3 pages and your KompoZer should look similar to this:

CREATING YOUR LINKS BETWEEN THE 3 PAGES15.In KompoZer, double click on the index.html page in the My Canada website in the Site

Manager Pane so that that file’s tab is in front. 16.Highlight the word Home on the second line of

the webpage and then click on the Link Button:

17.In the Link Properties window, click on the folder icon to the right and make sure you are in the canada folder and select the file called index.html and click on the Open button and then click on the OK button.

18.What we just did was create a link from the Home button to the webpage that is our

home page (the index.html). Now highlight the next word: Provinces and create a link for it to the provinces.html page using the same steps as above. Then do the same thing for the third word: History but link it to the file history.html. Your index.html file

should look like this now: 19.Save your index.html file (File>Save). 20.Not using KompoZer here, instead open Windows Explorer and find the canada folder

and double click on your index.html file to open it in a browser such as Chrome or IE.

21.In the browser click on the Home link. It should just keep you at the same page (you were already at the home page). Then click on the Provinces link. Notice that it does take you to the Provinces page but also notice that we haven’t set up the links on that page yet so you can’t get to the History page from here and the only way back to the Home page is by hitting the browser back button. Let’s fix this! BUT DO NOT CLOSE THE BROWSER, you can keep using it to check if your changes to the pages are working by using the refresh/reload buttons.

22.Go back to KompoZer and make sure you are on the home page tab (the index.html)

23.Highlight the whole navigation structure (the 3 links) and select File>Copy:

24.Go to the provinces.html tab in KompoZer and highlight the 3 things that should be linked and hit the delete key to get rid of them, then paste in the 3 working links (File>Paste or Ctrl-V). Your working links should now be there.

25.In the provinces.html page, put your mouse over the Home link (click anywhere in the Home link or highlight the word Home) and hit the link button and make sure the URL is relative to page location checkbox is checked.

26.Do this also for the Provinces link, notice that for some reason (a slight bug in KompoZer), this checkbox gets unchecked when you do a paste. It is now pointing to a location on your actual machine (like your memory stick or in the picture to the right, the desktop). Check the URL is relative to page location box so that the link is correct (NOT POINTING TO A FILE LOCATION).

27.Double check the History link in the provinces.html page as well, it should be fine. (The bug only seems to happen when you create links that point to the page you are on)

28.Save your provinces.html page. 29.Go back to the home page (index.html) in KompoZer and select and copy all the links

again and this time replace the non-working links in the history.html page with the links you just copied. Double check the link to the history.html file (the History link) and make sure that you check the URL is relative to page location box.

30.Save your history.html page31.Go back to your browser, reload the page and make sure the links work on all 3 pages

(you should do 9 test, 3 on each page).

CLEANING UP YOUR PAGES A BIT32.In KompoZer, double click on the index.html page in the My Canada website in the Site

Manager Pane so that that file’s tab is in front. 33.We are now going to format the text a bit. Firstly, highlight ALL the text on the page and

remove existing any formatting on it by picking Body Text from the dropdown menu just under the buttons as indicated below. This makes all your text just be basic text with NO formatting:

34.Next, we will make that banner line at the top really big. Highlight the very first line of the file: Our Home and Native Land! From the dropdown box just under the buttons on the left, select Heading 1. Heading 1 is the biggest possible heading and always makes the highlighted text bigger, darker and on its own line:

35.Make the navigational structure (the line with your 3 links you just built) to be Heading 2.

36.Make the next line: Welcome to this site about Canada! to be Heading 2.

37.Make the next line: Here are some fun facts about Canada: to be Heading 3. It should look like this in

KompoZer:

38. Highlight the next 6 lines (the fun facts) and turn them into a bulleted (unordered) list by clicking on the Bulleted list button:

39.Finally, highlight the last line: Some unofficial… and make it have the formatting (from that same dropdown box) of Paragraph.

40.Resave your index.html file in KompoZer.41.Reload it in your browser to see what it looks like, it

should look similar to this:

42.You might have blank lines between the Banner line and Navigational Structure and Welcome line, go into KompoZer (use backspace to remove the previous lines rather than the delete button) and remove those just to clean it up a bit (Do Ctrl-Z if you lose the links to get them back and you can just leave the lines in if you are having problems). Now it looks like this in a browser:

43.Go to the history.html file in KompoZer. Highlight ALL the text in this file and make it all be Body Text (From the dropdown menu) to remove any existing formatting.

44.Make the first banner line be Heading 1. Make the Navigational Links line be Heading 2 and make the line with the title for the page, History, be Heading 2. Make the line Aboriginal People be Heading 3. Make the line First Europeans be Heading 3. Make the line Struggle for a Continent be Heading 3. Change the big paragraphs to be Paragraph.

45.Save your history.html file and double check that it looks good in the browser (reload the browser and link to that page). You may want to remove some of the extra blank lines that were added at this point. In the browser, it should look similar to this:

46.Notice that the first line under the heading History has a link in it. Go back to KompoZer and highlight the WHOLE link and hit copy (File>Copy or Ctrl – C). Now delete the long link (MAKE SURE YOU HAVE COPIED IT FIRST) and highlight the words in your page:The following text was taken from this site:and then hit the Link button to bring up the Link Properties Window. Paste (Ctrl – V) the copied link into the Link location box. Then under the Target area make sure you click on theLink is to be opened checkbox and select: in a new window, then hit the OK button:REMEMBER: links that go to another website (a URL away from your site) should open in a new window.

47.Now scroll down, in KompoZer to the very bottom of your history.html page and find the words: Back to top. We are going to turn those words into a link. When the user clicks on this link, it will take him/her to the top of the page. Scroll back up to the top of the page and click your mouse right before the H of the word History that is right under the Navigational Links. We are going to put something at this location called an anchor The anchor is a spot in the document that we want to jump to, so in our case, when the user selects the link “Back to Top”, it will jump to this spot (to this anchor).

48.From the Insert Menu, select Named Anchor and enter an Anchor Name of: thetop (note: Anchor Name must be lowercase with NO spaces) then hit the OK button.

49.Now we have built a spot for our link to jump to,

so now let’s build the link that does the jumping. Scroll back down to the bottom of the history.html file and highlight the text Back to Top and then click on the Link Button.

50.In the Link Location box, type the text #thetop Note: the hashtag (#) says “Look for an anchor” and thetop is the name of the anchor to look for (you can have many different anchors on a page).

51.Hit the OK button and then save your history.html file again.

52.Reload your history.html file in the browser. Resize your browser so that it is very small, then scroll down to the bottom of the history page, and make sure the back to top link works. Then make sure the link you built that goes off your site (near the top of the page) also works (it should open a new tab).

53.Finally, we are going to fix up the provinces.html page. Go back to KompoZer and double click on that page so that the provinces.html tab is the front tab. Highlight ALL the text in this file and remove the formatting by selecting Body Text from the dropdown formatting menu under the buttons on the left.

54. Make the banner a Heading 1, make the Navigational Links a Heading 2 and make the Provinces title a Heading 2.

55.Highlight the list of 10 provinces right under the Provinces title and turn them into a numbered list by clicking on the Numbered List button in the button bar.

56.Remove any extra blank lines that were added. 57.Save your file.58.Under your now numbered list of province names you

will see each province name with facts about that province. Turn each of these fact province names into a Heading 3 (this will add a blank

line after the name, that is fine): 59.After you have turned each of the 10 province names

into a Heading 3, put your mouse beside the province name that is Heading 3 and do Insert>Named Anchor and give each province a short lowercase no spaces anchor name you will remember (like bc for British Columbia). Do this for all 10 province names.

60.Scroll back to the top and for each province in the numbered list, make it link down to the correct province name and fact list. (Remember highlight the province name in the numbered list, click on the Link Button, type #correctprovinceanchorname in the Link Location and hit OK)

61.Save your file, reload the province.html file in the browser, and make sure all the new links and formatting works. It should look similar to this:

62.Now open the index.html file in KompoZer and find the word Molson and highlight it. Then click on the Link button and link this word to provinces.html#qu (or whatever #anchorname you gave to Quebec on the provinces.html page) and hit OK. Now when you click on the word Molson, it will link to the provinces page right down to the Quebec area where the Molson beer company originated!

63.Save your file and test out this link in your browser to make sure it opens the provinces page at the correct location.

Lab 5 – Tutorial 2

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

Add an image to a page. Resize an image. Create a link on an image.

ADDING A BANNER IMAGE1. In your browser, open up this link:

http://www.csd.uwo.ca/~lreid/cs1033labs/lab05/content/images/ 2. Click on each image and then right click over the image and select Save Image as and

save the images to your canada/images folder3. In KompoZer, open the index.html file4. Put your cursor at the very beginning of the file, right before the O in Our Home and

Native Land! Click on the Image Button. Click on the folder icon next to the Image Location textbox and search for your canada/images folder.

5. Click on the canadabanner.jpg image. The tooltip is what appears when the user hovers over our image, put “Our home and native land” here. The Alternative text is used by Google in searching and for people with disabilities, put “Canada Banner” here. Notice that the banner is 1000 pixels by 150 pixels. We can change the size of an image, we will do that in one of the next steps. Hit the OK button:

6. Now delete the banner line of: Our Home and Native Land! as we now have a banner image instead.

7. Click once more on the banner image and click on the Image button to bring up the properties window.

8. IMPORTANT HINT: Remember to ALWAYS put your images in the images folder and ALWAYS make sure the URL is relative to page location checkbox IS checked, even if it doesn’t look right in KompoZer (sometimes on a Mac the image won’t display properly without this being checked) because if you upload a file where that checkbox wask NOT checked, you will be pointing to YOUR machine and the image will NOT work once it is posted on a webserver. You can see the issue in this screenshot (the yellow highlighted text will be included in the HTML codes and thus the image will NOT be visible on the webserver):

9. Go to the bottom of the index.html file and insert the image coventgardenmarket.jpg (tooltip: The Market and alternate text: Covent Garden Market) and hit OK. Reload this page in the browser. Notice that this image looks too big for our page:

10.We will now resize the image. Our banner is 1000 pixels across so we will make the

Covent Garden Market that size also. In KompoZer, click on the image and then click on the Image Button to bring up the Image Properties Window. Click on the Dimensions tab and select the Custom size button. Make sure the Constrain checkbox is checked (so we don’t skew the image) and select a width of 1000, the height should fix itself, then hit OK. Save the file and reload it in the browser to double check it. It is better but still a bit big.

11.Change it so that it is 500 pixels wide and save the file.

12. Now we are going to put a link on the image. Click on the image of Covent Garden Market and click on the Image Button. In the Images Properties window, click on the Link tab. In the Link location box, put the

following link: http://www.coventmarket.comand hit OK.

13.Save index.html and reload it in the browser. Click on the image and notice that it takes you to The Market website. The only problem is that it opens the link in the SAME tab, but remember if we open a webpage that is NOT a part of our site, it should open in a new window/tab. In KompoZer, you make a link on an image but in KompoZer, you can’t make it open in a new tab/window unless you edit the HTML code. To fix this we will need to look at the HTML tags.

14.In KompoZer, open index.html. Click on the Source view from the tabs at the bottom so that you are looking at the HTML tags. Scroll down to the very bottom and find the <img…> tag. This tag creates an image. Around this tag you will see a <a href=…> tag and a </a> tag (highlighted in yellow in the image below). They are the HTML tags that turn the image into a link. We need to modify the <a href…> tag in the code.

15.Click your cursor after the closing double quote of the link but before the > of the tag <a href=”http://www.coventmarket.com”>. Thus put it right here:

16.Type in the following text: target=”blank”so now the <a href.. tag should look like this:

17.Save your file, reload it in the browser, and make sure that when you click on the image it opens the link in a new tab.

Lab 5 – Tutorial 3

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

Use a table to give your pages clean edges Use tables within tables to align your images

PUTTING THE WEBPAGE CONTENT IN A TABLE TO ACHIEVE ALIGNMENT1. The next issue we have is that our pages are not aligned very well (in the image below

notice how the image and text goes beyond the right edge of the banner). It would be nice if we could have clean left and right alignment in our site.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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):

8. 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.

9. 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.

10.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.

11.It should look like this now:

12.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.

13.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.

14.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:

15.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.

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

17.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