CS 1033Multimedia and Communications

Lab 04: Introduction to KompoZer(Website Design - Part 1 of 3)

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

KompoZer is a complete web authoring system that combines web file management and WYSIWYG (What You See Is What You Get) webpage editing. KompoZer is easy-to-use, making it ideal for non-technical computer users who want to create an attractive, professional-looking website without needing to know HTML or web coding. KompoZer is free and is available for both the MAC and the PC.THE KOMPOZER ENVIRONMENT:KompoZer lets you create your own webpages. You don't have to know HTML to use KompoZer; it is as easy to use as a word processor. Toolbar buttons let you add lists, tables, images, links to other pages, colors, and font styles. You can see what your document will look like in a browser as you create it. When you open KompoZer it opens up the following screen. This screen layout is based on version 0.7.10

Use this picture as a KompoZer layout reference sheet as you work through labs 4-6. If you are reading this on a paper printout be sure to open the original PDF file on your computer so you can see the different colours!

Lab 4 – Tutorial 1

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

Turn on and off the toolbars in KompoZer Find the Edit Site button and identify the Site Manager window in KompoZer Determine the number of sites that KompoZer is currently pointing at Using the Edit Site button, determine the folder location that each site is pointing at. Create a new website that points to an existing folder (i.e. directory) Create a new website that will point to new folder Remove an existing website from KompoZer without removing the folder and its

contentsBefore we begin, we will review the terms website, webpage and HTML

A website (called a site in KompoZer) is a collection of related webpages, images and media files stored in a folder.

A webpage is a file stored in the website folder that has an HTML file format (i.e. the file extension of .html or .html). Webpages are created using content and HTML tags.

HTML is a language consisting of a standard set of tags that takes content and puts links, images, and formatting in to the content to create webpage for the World Wide Web.

Each unique website has it’s own folder/directory. In general, you should create the folder FIRST and then use KompoZer to point to that folder (i.e. to the site). Once you have a site, you can create webpages within the site (i.e. within the folder).

You can create many folders and then using KompoZer, create a site for each folder and associate the site with folder.

The KompoZer site manager allows you to navigate between sites easily so you can work with them. The Site Manager panel lists directories which you have specifically set up as Sites. You can set up many sites; each site will appear in Site Manager regardless of where the folder appears is stored on your hard drive/memory stick, thus the Site Manager panel is quite important.

In the next few steps, you will create a new Site called: OP Library Website and associate it with the oplibrary folder using KompoZer.

SETTING UP YOUR FOLDERS BEFORE BUILDING YOUR SITE1. Browse to your memory stick (likely your F: drive), and create a new subfolder within

the cs1033 folder called lab04. Then inside the lab04 folder, create 4 new subfolders called oplibrary, website1, website2 and website3. These folders are empty and will represent 4 websites that you will be creating/working with. Your folder/directory structure should look similar to this: Navigate inside your oplibrary folder and create a folder called images. Note: the names for ALL these folders should be all lower case. For example, make sure you call the folder images NOT Images. Every website should have an images folder to hold your pictures and graphic files you plan to put on your webpages. You should now have the following folders:

F:\cs1033\lab04\oplibrary F:\cs1033\lab04\website1 F:\cs1033\lab04\website2 F:\cs1033\lab04\website3

2. Go to http://www.csd.uwo.ca/courses/CS1033/labs/lab04/ and you will see an images folder. Click on the images folder to go into it. Then one at a time, right-click on each file and save each image into the images folder you just created on our F: drive. Your F: drive should look like this now:

GETTING FAMILIAR WITH THE KOMPOZER ENVIROMENT

3. Start KompoZer by clicking on the KompoZer icon on the desktop4. From the View menu, select the Show/Hide and make sure the following toolbars are

checked: Composition Toolbar, Edit Mode Toolbar, Status Bar, Rulers and Site Manager.5. Toggle each tool bar on and off to see the difference they make in the KompoZer

window.

6. Press F9 to toggle the Site Manager pane on and off. (Or you can do View>Show/Hide>Site Manager). Make sure the Site Manager pane (along the left side of the window) is showing.

CREATING A NEW WEBSITE

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

8. 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: OP Library Website

9. Click on the Select directory button and navigate to your oplibrary folder that you created on your memory stick. Click OK and then OK again. It will look like this:

10.The OP Library Website should now be listed in the Site Manager Page (as shown to the right). Click on the + symbol next to the OP Library 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. Put your mouse over the right edge of the Site Manage pane until the mouse turns into an double headed arrow, then hold down your mouse and slide it to the left and right to decrease or expand the side of the Site Manager pane.

11.If you forget the folder location for the OP Library Website, you can find that information again by clicking on OP Library Website in the Site Manager Pane and then clicking on the Edit

Sites button . Then click on the OP Library Website in the list of Publishing Sites. This will fill in the current folder location. Try that now. You should see something like this:

12. Now, we will create 3 more websites in KompoZer by associating 3 different names with 3 different folder. Click on the Edit Sites button and type the name Website Project 1 in the Site Name: box and browse to the folder F:\\cs1033\lab04\website1 and then click OK and then OK again. Your new Website Project 1 should now also be listed in the Site Manager pane. If you complete it and then click on the Edit Site button again, it should looks similar to this:

13.Repeat step 12 and create TWO more sites by pointing Website 2 Project to the website2 folder and Website 3 Project to your website3 folder. After you are done, the Site Manager pane should look similar to this:

REMOVING A SITE (DISASSOCIATING A SITE FROM KOMPOZER)

14.If you no longer are working on a website and wish to remove it from KompoZer, you can do this WITHOUT removing the folder from the hard drive/memory stick. To do this, click on the Edit Sites button , then click on the site you wish to remove, in this case the Website 1 Project, then click on the Remove Site button and finally click on the OK button:

15.Browse to your memory stick and notice that the website1 folder is still there. When you remove a site, you are only disassociating it, NOT deleting the folder from your hard drive/memory stick.

16.Repeat the above step for Website 2 Project and Website 3 Project. So OP Library Website should be the only site left in the Site Manager pane.

Lab 4 – Tutorial 2

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

Create a new webpage using KompoZer Put a blank line between 2 lines in a webpage using the <Enter> key Put a line break between 2 lines in a webpage using the <Shift>+<Enter> keys Identify the different modes for viewing a webpage inside of KompoZer Open and close an existing webpage in KompoZer Toggle between 2 open webpages in KompoZer List and switch between the 4 modes for viewing a webpage in KompoZer Preview your webpage in a real browser such as Chrome or IE

CREATING YOUR FIRST WEBPAGE1. In the Site Manager window, click on the OP Library Website2. Go the File menu and select File>New, then select A blank document and make sure

Strict DTD is checked and click on the Create button.

3. Notice the Document window opens with a blank file labeled untitled which appears in the tab directly above the document window.

4. Right now this webpage has no file name. We are going to save it with the file name index.html. index.html is the starter page (or landing site) for any website, i.e. it is the first page that gets displayed, the browser looks for the index.html page to show first. Go to File>Save As and type the name index in the textbox. NOTE:

a. Make sure index is lower caseb. Do NOT add the file extension .html because KompoZer will do that for you. c. If you are prompted for a location, make sure you save it in the oplibrary folder

on your memory stick but NOT in your images subfolder.

5. Your index file should show up in the Site Manager pane. If it is not there, hit the Refresh button in the Site Manager:

. Then you should see this: 6. In the Site Manager, click on index.html, then before you start

typing in content to the webpage, change the format dropdown box to Paragraph. Once

that is changed you can start typing. 7. Start typing in the webpage by following the chart below. Type the content on the left

AND, as you go, perform the instruction on the right.Text to Type Instructions and Notes

Roll Woods Park Public School Library <Enter> <Enter> means press the Enter key on the keyboard.

8. From the menu, select File>Save As and confirm everything is still going in the oplibrary folder under the name index.html. Always use File>Save As to make sure your webpages go into the correct folder. Click yes when prompted if you want to override the index.html file. If you use File>Save sometime a file will go in the wrong folder and you won’t be able to find it.

9. Close the index.html webpage (not the whole site) by clicking on the red X in the top

right corner of this page.

10.Create another new webpage. Immediately do File>Save As and give it the name teachers and save it to your oplibrary folder This should save it as teachers.html. Use the Refresh button in the Site Manager pane to make sure the new page is there.

11.Select Paragraph from the Format dropdown box in the top left corner. 12.Type in the following information:

13.Do File>Save As and save it again as teacher.html in the oplibrary and replace the old version of teacher.html

14.Click on the red X in the top right to close the teachers.html webpage.

MOVING BACK AND FORTH BETWEEN WEBPAGES

15.Click on the Refresh button in the Site Manager pane. In the Site Manager pane, double click on index.html to open that page again if it is not open.

Text to Type Instructions and Notes

Roll Woods Park Public School Library <Enter> <Enter> means press the Enter key on the keyboard.

Text to Type Instructions and Notes

Roll Woods Staff Directory<Enter>

Principal: Mr. Hardwood<Shift>+<Enter>(519) 656-2141<Shift>+<Enter>hardwood@rollwood.ca<Enter>

Grade 1: Mrs. Smith<Shift>+<Enter>(519) 433-3167<Shift>+<Enter>smith@rollwood.ca<Enter>

Grade 2: Mr. Jordan<Shift>+<Enter>(519) 471-2525<Shift>+<Enter>jordan@rollwood.ca<Enter>

Between the text Principal: and Mr., leave three spaces. You cannot have MORE THAN ONE space into a webpage without using a special code. KompoZer puts this special code in for you each time you hit the space bar. You can see the code by switching to Source view (the tab at the bottom of the window pane):

Notice a tag &nbsp This is a space HTML tag. Now click back on Normal view.

Remember, if you want a blank line, for example between paragraphs, hit the <Enter> key and if you just want a line break, hold down the <Shift> key and hit the <Enter> key, otherwise don’t hit enter and just let the window decide where to break the lines.

16.In the Site Manager pane, double click on teacher.html to open that page again if it is not open. Click back and forth on the tab for the 2 webpages. As of right now, the OP Library Website contains 2 webpage: index.html and teachers.html

17.Make sure the index.html tab is open and highlight and copy (Edit>Copy or Ctrl-C) the text Roll Woods Park Public School Library

18.Click on the tab for the teacher.html webpage and paste (Edit>Paste OR Ctrl-P) the text at the top of this file.

19.Save and close the teachers.html file but keep the index.html file open in the document window.

VIEWING THE WEBPAGE IN DIFFERENT MODES AND PREVIEWING IT IN A BROWSER

20.At the bottom of the document window, you will notice 4 tabs: Normal, HTML Tags, Source and Preview. They indicate the mode you are currently looking at the page in. Press each of these of tabs and you will see the document window change. The modes are as follows:

a. Normal: This is the mode or view you will normally be using. It displays the webpage almost exactly like the webpage will look in a real browser. This is also called a WYSIWYG mode (“What You See Is What You Get”). When in Normal mode, as you are enter text, images and links into the Document window, KompoZer is actually creating the webpage using HTML code “under the covers”.

b. HTML Tags: This mode or view is for people familiar with HTML. There is a yellow marker for the start tag for all HTML elements (end tags are omitted). Clicking on a marker selects and highlights the whole of the element. Try clicking on these markers.

c. Source: Clicking on this mode shows the actual HTML code being built to create the webpage.

d. Preview: Preview mode offers almost the same view as if you viewed the page in a browser with the addition of rulers and sizing boxes. The main differences are that scripts do not run (so their effects will not be seen) and links do not operate.

21.We need to make sure that the webpage will look the same way on a webserver as it appears to us in KompoZer. To test this we need to preview our webpage in an actual browser such as Chrome or IE. Click on the Browse button found in the Composition Toolbar:

22.The first time it may come up with this dialog box. Click on Remember my choice for all links of this type. Click on Launch application. It will open your default web browser so you can see how your webpage will look once it is on the Web. If you have not saved your page, KompoZer will prompt you to do so before it launches the browser.

23.Notice that the webpage’s first line in the paragraph may look longer when viewing the browser. This happens because the page content is not built within a table to constrain the content to a fixed width. (You will be learning later how to use tables). Resize the browser window by clicking on the browser’s “middle” button in the top right corner of the browser window. Drag one of the browser window corners to see the window get smaller and larger, and watch how the first paragraph in the webpage changes in length. This occurs because the text is not stored inside of a table cell so it just resizes to fill the window. Later on we will put the content in a table so that it does not just fill the whole window but rather gives us a nice clean alignment.

24.Close the browser window.

Lab 4 – Tutorial 3

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

Add a property title, author and description to a webpage Check that the property title is set using a web browser Format the headings on a webpage with one of the 6 heading styles Change the colour, fonttype and size of text on a webpage on an individual basis.

SETTING THE WEBPAGE’S PROPERTY TITLE1. In the Site Manager window, click on the OP Library Website2. Double click on the index.html webpage so that it is open in the Document Window.3. Click on the Browse button again to

bring up the webpage in a browser such as Chrome or Firefox. Notice how it has index as the webpage property title This is not a very descriptive name for someone viewing your webpage. The property title is one of the MOST important places that Google looks for keywords, so it is important to set it to a good name. The general rule is to give a webpage the property title of Website Name – Webpage Name for example: Bank of Montreal – New Accounts OR Bank of Montreal - Contact Us

4. To change the Webpage Property Title of the index.html webpage, go to Format>Page Titles and Properties. Then, in the:

a. Title textbox, type: Roll Woods Library – Homeb. Author textbox, type: your name

c. Description textbox, type: Roll Woods Library is a publically funded library for elementary students

5. Finally, hit the OK button

6. Click on the Source mode tab at the bottom of the Document Window and you will see the HTML that was generated to create this information. Then click back to Normal mode.

7. Click on the Browse button and you should see your new property title in the browser’s tab. Close the browser and go back to the Document Window but do not close the index.html file.

FORMATTING THE HEADINGS (i.e. TITLES) IN A WEBPAGE

8. Now we are going to format the text on the home page (index.html) to make it look a bit neater. You can use the Headers to indicate section headings. Highlight/select the text at the top of the index.html page, the text: Roll Woods Park Public School Library.

9. From the Format Toolbar 1:

click

on the first dropdown box and select Heading 1. Notice the heading change sizes. Now highlight the text again and select Heading 3. Notice it is still bolded but slightly smaller. There are 6 sizes for headings: Heading 1 (largest) to Heading 6 (smallest). All 6 headings will bold the text and force a paragraph break at the end of the line. DO NOT use headings for formatting paragraphs of text, reserve them for headings or titles.

10.Highlight the text: Roll Woods Park Public School Library and set it back to Heading 1.11.Highlight the text: Welcome to our library and set it to Heading 3.

FORMATTING THE FONT (COLOUR, FONTTYPE AND SIZE) IN A WEBPAGE INDIVIDUALLY

12.Now we will set the heading to be red. Highlight the text: Roll Woods Park Public School Library again and from the Format toolbar 2, click on the BLACK rectangle in this icon:

13.When the color picker window opens, select red from the predefined colors or type #FF0000 in the Hex: box. This is useful when you know the Hex number for a color. Then click on the OK button.

14.Highlight the text: Roll Woods Park Public School Library and from the Format Toolbar 2, select the dropdown box with Variable Width and select Arial. NOTE: you can also set the font from the top menu Format>Font. Keep in mind that if you have an unusual font stored on your machine, it might not be on the machine of the person viewing your page, so try to pick standard fonts (Times Roman, Arial, etc) for your webpages. If you decide you want to let the person viewing your page use his/her default font, then picked Variable Width (will use the user’s default proportional font) or Fixed Width (will use the user’s default monospace font).

15.Highlight the first paragraph starting with Take a tour of our library....... From the

Format Toolbar 2, use the icons to increase or decrease text size (relative to the surrounding text). You can also use the Format>Size menu to change the font size. The only way you can use a pixel measurement is with setting font size with Style Sheets which you will learn in the next section.

16. Note that you can also bold, italized or underline text in your webpage also but NEVER USE THE UNDERLINE BUTTON, underlined text in a webpage is assumed to be a link!

Lab 4 – Tutorial 4

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

Create an internal rule in KompoZer using the CaScadeS editor

Set the font styles for all types of the same tag with in a webpage, such as the h1 tag Set the font styles for everything in a webpage by setting rules for the body tag Modify the rules of an existing rule. Create rules that for a class rather than for tag.

In the previous tutorial (tutorial 3), we were using inline formatting, i.e. the rules for changing the colour, size and font were added to the html tag right where the text we were changing was located (see HTML in image below):

Inline rules are frowned upon in webpage design. The preferred method is to create CSS rules. When formatting text within KompoZer, you can create CSS rules (CSS styles) which will set the attributes of the text (colour, size, alignment, etc.). Once you have created a rule, you can apply it to any text in your webpage and that text will take on the rule/style’s colour, size, alignment, etc. These rules are created using CSS (Cascading Style Sheets). Thus HTML tags defines/ wraps around the content on your page but CSS defines how the content will look (the content (i.e. text)’s style). Think of HTML as the cake and CSS as the icing OR HTML as the person and CSS as the clothes that cover the person!There are 2 ways to apply CSS rules in a webpage:

Internal Style Sheets – this means the CSS rules you create are actually embedded into your webpage. Thus, a rule can be used in many different places on that webpage but it can NOT be used in a different webpage. If we created an Internal Style Sheet rule in the index.html webpage, that rule could NOT be used in the teacher.html page! Within this way, we will look at 2 different types of Internal Style Sheet Rules:

o Rules that can be applied to a particular HTML tag such as the h1 tago Rules that can be applied to any part(s) of the webpage (called class

rules), in this case you build a class rule (give the rule a class name) and then assign various section(s) of the webpage to be of that class (assign those sections the class name).

External Style Sheets – this means the CSS rules you create are stored in a separate file (usually with a .css extension) and this files is linked to any webpage that wants to use the rules created. Thus, if you created an External Style Sheet, any rules in that style sheet could be applied to text both in the index.html webpage AND the teacher.html webpage. External Styles Sheets are the preferred way of creating rules if you have more than one webpage in your site and you want the look and feel to be

consistent across all your webpages in that site. We will create External Style Sheets in the next tutorial.

CREATING FORMATTING RULES (COLOUR, FONTTYPE AND SIZE) WHICH CAN BE APPLIED TO SIMILIAR TYPES OF HTML ELEMENTS/TAGS WITHIN THE SAME WEBPAGE

1. Double click on index.html in Site Manager window and make sure that index.html is open in the Document window.

2. Click on the tab at the bottom called Source so that you are viewing the HTML tags and find the area for the h1 tag. IT should look similar to this: <h1 style=”color: rgb(255, 102, 102); font-family: Arial:”> Roll Woods Park Public School Library</h1>

3. Then remove all the formatting on the heading 1 of Roll Woods Park Public School Library as follows: Change <h1 style=”color: rgb(255, 102, 102); font-family: Arial:”>Roll Woods Park Public School Library</h1> to <h1>Roll Woods Park Public School Library</h1>This will remove all the formatting.

4. Go back to Normal mode (the Normal tab at the bottom of the Document window) and save your index.html file.

5. Now we are going to create some Internal Style Rules (remember Internal Style Rules will only apply to this webpage) using the KompoZer CaScadeS editor. To start the CaScadeS editor, click on the CaScadeS editor button:

6. You will then see this window. Make sure that style applied to all elements of type is selected. This will apply your rule to all text of the same type (e.g. all Heading 1 text).

7. In the dropdown box, select h1. We are going to apply our rule to all heading 1 headers. Thus your screen should look like this:

8. Click on the Create Style rule button, then click on the Text tab at the top of this window. Fill in the following:

a. Click on Use custom font family radio buttonb. From the dropdown box below that radio button select Arialc. In the Font size: textbox TYPE 24px (type it directly into the box)d. In the Color: textbox type #3366ff OR pick a blue from the color square and color

picker palettee. In the Font Weight textbox, select Boldf. In the Font Style textbox, select Normalg. In the Alignment textbox, select Center

It should look like this:

9. Click on the General tab at the top so that you can see the CSS code that was generated by your selections. Click on the OK button to close this window. You should now see the rules being applied to the heading:

10.To edit an existing rule, click on the CaScadeS Editor button. Click on the h1 listed under internal stylesheets along the left. Click on the Text tab at the top and change this rule so that instead of displaying the text as blue, it is now green. Then click on the OK button

11.Create a new rule for the h3 headings by starting the CaScadeS Editor. To create a new

rule, click on this icon in the top left corner which will bring up the window where you enter your rules.

12.Make sure the radio button style applies to all elements of type is selected13.From the dropdown box, select h314.Click on the Create Style Rule button15.Select the Text tab at the top and assign the following:

a. Font Size 24pxb. Color #3366FFc. Font Weight Boldd. Alignment Left

16.Click on the OK button to exit this window.17.Now modify your h3 rule (click again on

the CaScadeS button, select h3 along the left) and change the Font Size to 20px, then click on OK. You should see this:

CREATING FORMATTING RULES WHICH CAN BE APPLIED TO DIFFERENT TYPES OF HTML ELEMENTS/TAGS (USING CLASSES) WITHIN THE SAME WEBPAGE

18.If you make a rule for the body element, you are applying a rule to EVERYTHING in your webpage that does NOT already have another rule applied to it. So in our case, h1 and h3 already have rules, so they would not be changed if we made a rule for the body but ALL other text will be changed. We will do that now. Go into the CaScadeS editor and click on the little icon in the top left to create a new rule. Make sure the radio button style applies to all elements of type is selected. Then from the dropdown menu select body and hit the Create Style rule button. Click on the Text tab at the top and set the following:

a. Select Use custom font family

b. Select Arial Narrow from the dropdown boxc. Font Size 14pxd. Font Weight Normale. Alignment Leftf. Color #333399

19.Before clicking on the OK button to close the Cascades Editor, click on the General tab, then click on the h1 rule, the h3 rule and body rule. Notice the different rules. Click on the OK button

20.Save your index.html webpage. Then go into the Source mode (click on the Source tab) to see the rules in your index.html file. Also notice there is no External Style Sheet in the Site Manager. Remember all these rules we created were internal, so they are stored right inside the index.html file as indicated in the image to the right.

21.Click on the Normal tab again to go into Normal mode.

22.Sometimes you will have a situation where you want the rules to be same for most of the h1 headers but not ALL of them. Or maybe you want the first paragraph to be red, the second to be orange and the third to be yellow. In these cases you can NOT set the rules a standard tag/element, instead you have create classes, set rules for each class and then apply the correct class to anything you want changed. We will try that now. Start the CaScadeS editor. Then click on the CaScadeS icon in the top left corner:

23.Select the radio button of style applied to all elements of class and notice that now the dropdown box has a period in it:

24.Enter a descriptive name for the new style rule we are creating. Here we will enter the name .greentextparagraph (don’t type the period again, it is already there for you). Then click on the Create Style rule button and then click on the Text tab at the top.

25.Set the following attributes:a. Use custom font family Tahomab. Font Size leave this blank (it will just be body size we created before)c. Font Style italicsd. Color #10F72E (lime green)

26.Click OK to exit from the CaScadeS editor. 27.You should notice that nothing was affected yet. This is because the new

style .greentextparagraph has not yet been applied to any of our text. Highlight the first paragraph: Take a tour of our … group work.

28. Then from the Format toolbar, click on the dropdown box with the label (no class) :

and select .greentextparagraph29.Highlight the last paragraph and set it to .greentextparagraph also30.Save index.html and make sure you can see that both the first paragraph and last

paragraph have been modified.

Lab 4 – Tutorial 5

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

Create an external blank style sheet with the extension .css using a text editing tool such as Notepad.

Link an external .css style sheet with an existing .html webpage file. Create a style rule within an external .css style sheet Apply an external CSS style rule to a particular area within one or more webpages.

1. KompoZer does not have a way to create the stylesheet internally, thus you have to use an external text editor such as Notepad (Windows) or TextEdit (MAC) to create the file that will be the external stylesheet. From Windows Explorer open the application Notepad. When the application opens, do not type anything into the document. Save the file using the menu command File > Save As and call it mystyles.css . Make sure that you are pointed to your memory stick and in the folder F:/cs1033/lab04/oplibrary

2. Close Notepad and return back to KompoZer. In the Site Manager pane click on the

Refresh button so that you can see the mystyles.css in the Site Manager pane

3. Double click on the index.html file so that it is open in the Document window4. Start the CaScadeS editor.5. Click on the dropdown next to the CaScadeS icon in the top left corner of the Cascades

editor dialog box and select Linked stylesheet

6. Click on the Choose File button and search for the mystyles.css in the oplibrary folder and then click on the Open button but do NOT click on the OK button yet! You should

see something like this:

7. Click on the Create Stylesheet button. Then click on the OK button. You have now attached the External stylesheet mystyles.css to the webpage index.html. However, you haven’t created any style rules yet (remember we created it as an empty file in Notepad).

8. Hit the Refresh button again in the Site Manager pane. 9. Start the CaScadeS editor again. You should now see the left pane contains two

stylesheets: internal stylesheet and mystyles.css10.Click on the mystyles.css to highlight it. 11.Click on dropdown box next to the CaScadeS icon in the top left and select Style rule.

12.On the right pane, you will see you are in the General tab, click on the radio button called: style applied to all elements of class and the type in the name .mainheading (Note:the name should be descriptive and NOT contain spaces or special characters)

13.Click on the Create Style rule button14.Click on the Text tab15.Set the attributes as follows:

16.Notice the rule .mainheading is underneath the mystyles.css in the left pane. Click on the OK button. It is stored in this external file now.

17.Create another style rule called .orangeparagraph and store it in the external style sheet mystyles.css. Give it the following attributes: Use Custom Font Family: Arial Black; Color: Orange (#FF9900); Bold; Italics; Left alignment.

18.Click on File>Save

19.At this point, your index.html should look like this:

20.Let’s see all the styles associated with the index.html webpage. Click on the Cascades Editor. In the left pane, click on the + next to Internal stylesheets and next to mystyles.css. You should see all your style rules

21.Click OK to exit the CaScadeS editor and get back to your Document window.22.In your index.html webpage, highlight the middle paragraph (Welcome to …) and from

the class dropdown box, select .orangeparagraph

23.Notice in the very bottom left corner of the screen, you can see which style rules have been applied to the text.

Try clicking anywhere in the title Roll Woods … and you will see the style rules for the title.

24.In the Site Manager pane, double click on the teachers.html webpage. Highlight the principal’s information (name, phone number and email), then go the class dropdown box and try to apply a rule to it. Notice there are NO rules for the teacher.html page. This is because we have not created any internal style rules for it AND we have not linked to an external style sheet. Let’s link it to mystyles.css so that we can use some of those rules on the teacher.html webpage. Make sure teacher.html is clicked on in the Site Manager pane. Click on the Cascades Editor button. Click on the dropdown next to

the Cascades Icon and select Linked stylesheet.

Then click on the Choose file button and find the mystyles.css file. Then click on the Create Stylesheet button, then click on the OK button.

25.Now highlight the principal’s information again and click on the dropdown class box and this time you should see the .orangeparagraph and .mainheading rules:

Select the .orangeparagraph and then Save the teacher.html file.

26.NOTICE how now you can create the rule ONCE in the external style sheet but apply it on many webpages in the same website. This will be very useful to achieve consistency among webpage for the assignments in this course.

Lab 4 – Tutorial 6

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

Identify any HTML tags and styles rules that are assigned to a portion of text within a webpage.

View the source code for a webpage and identify the Internal Style Rules and the link to the External Style Sheet file.

Create a style rule within an external .css style sheet Apply an external CSS style rule to a particular area within one or more webpages.

1. Double click on index.html so that it is open in the Document window.2. Click somewhere on the heading/title Roll Woods Park Public School Library. Look down

at the bottom left corner and you should see any HTML tags that are associated with

that area of the webpage. You should see the tags <body><h3>:

3. Now click on the text Take a tour of our …. You will see a tag for .greentextparagraph.4. You could also see the tags and rules by going into Source Mode (click on the Source

tab at the bottom of the Document window.). While in Source Mode, scroll up to the very top of the file and you will see something like this:

Notice: you can see where KompoZer put our Internal Style Sheet rules and you can see where KompoZer linked our External Style Sheet

5. Go back to Normal Mode. Save your index.html file

REMOVING STYLE RULES ON SECTIONS OF TEXT

6. KompoZer allows you to remove a style associated with some text. Click anywhere on the heading text: Roll Woods Park Public School Library . In the Format toolbar you will see that it currently says Heading 1. Change it to Body Text. NOTE If KompoZer will not allow you to change to Body of Text, then quit out (File>Exit) of KompoZer and start it again and then again, click anywhere on the heading and change it to Body Text

7. Hit CTRL Z to undo this last change. 8. Click anywhere on the title text

Welcome to Our Library…9. At the bottom left corner you will see

<body><h3>. You can never remove the <body> tag, it is the most basic tag and must always be there but you can remove the <h3> tag. Right click on the <h3> tag in the bottom left corner and select Remove tag. ‘:

10.Click anywhere inside the second orange paragraph Welcome to our library In the bottom left corner, right click on the <p class=”orangeparagraph”> and go to Classes and uncheck orangeparagraph. Notice the change to the paragraph

11.Now change the first paragraph so that it is no longer green (i.e. remove the class associated with this paragraph).

In general, we strongly recommend you use External Style Sheets rather than Internal Style Sheets or Inline style

INSTALLING KOMPOZER ON YOUR HOME MACHINES:NOTE: The lab machines already have KompoZer installed on them but if you want to install KompoZer on your laptop or home computer, here are the instructions:

1. Download the latest stable version from: http://kompozer.net/download.php2. Click on the button and it will begin the download operation, and once complete it will

open a dialog box asking to unzip the file. Here are some additional resources if you get stuck:

http://howtech.tv/basics/how-to-install-kompozer-on-windows-7 (Step-by-step instructions on installing on Windows 7)

https://www.youtube.com/watch?v=pEbEdoOYF8c (Installing on Windows) https://www.youtube.com/watch?v=xqLch0XtuVk (Building your first webpage)