ATSC 212 - Web 2

Goals.  To learn how to create web pages using:

1. anchors 
2. colour 
3. cascading style sheets (CSS), both internal and external 

Web Authoring - Part 2.   In-class Demo:

Demo of Anchors, Colour, and Cascading Style Sheets (CSS).

Create directories and import files, to use later in class:

1. Open you Z-drive, and navigate to your Website folder.  Open that folder.
2. Inside the Website folder, create the following New Folders
1. glossary
3. Close your Z-drive window.
4. Using your web browser (e.g., Mozilla), navigate to the course web page
   http://www.eos.ubc.ca/courses/atsc212/
5. Click on the Labs link, and then click on the link for week 3 Web-Authoring-2.
6. On that web page, in the section called "Files to be Used in  Lab Demo"
1. Right click on the "storm glossary A-B" link, and copy the html file into your "glossary" folder
2. Right click on the "storm glossary C-D" link, and copy the html file into your "glossary" folder
7. Minimize or close your web browser.
8. Run (double click) the KompoZer program.
9. In the KompoZer Site Manager pane at left, to the right of the "Edit sites" button, click on the "refresh" button (the yellow curved arrow).
10. Expand the file listing under your Website, in that Site Manager pane, to see all your files.  You should see the new folders, and the new files you put in those folders.  

Demo of Anchors:

1. In the KompoZer Site Manager, double click the "stormglossaryab.html" to open it in the editing window.  This has some glossary terms already typed in, to make your life easier.
2. Click once just to the left of the line "-A-", to put the insertion point at the start of that line.
3. Click on the "Anchor"  button, to insert an anchor there, and name it "A".
4. Create another anchor, named "B", at the start of the line "-B-".
5. We will now add a navigation line, to make it easier for the reader to jump to any letter in the alphabet. We will add the following into new lines just before the line that says "-A-".
1. Insert a horizontal line (use the "Insert" menu at the top of the window, or the "horizontal line" tool if you had added it to your customized toolbar from last week).
2. Immediately after this horizontal line, insert this text  "[ A , B , C, ... ]".
3. Center this text in the page, using the center align button in the tool bar.
4. Add another horizontal line after this centered text
5. In the line where you already have "[ A , B , C, ... ]", use the mouse to select the letter "A".
6. Hit the "Link" button, and in the white space where it asks you to insert the Link location, use the mouse to select the down-pointing triangle to display a pop-up-menu of anchors.
7. Click on the A anchor "#A", and then hit the OK button.
8. Similarly, for the letter "B" in the list "[ A , B , C, ... ]", create a link to the "#B" anchor.
6. With the mouse, select the 3 lines that hold the 2 horizontal bars and the "[ A , B , C, ... ]", and copy them (via the Edit menu, or via a right-click on your mouse).
7. Paste these 3 lines at the very bottom of the page.  Now, for the convenience of the reader, we have navigation lines near both the top and bottom of the glossary.
8. After the last horizontal line, type your copyright line "Copyright © 20xx by YourName", and then from the "body text" pull-down menu, select "address", and then reduce the font size.
9. Save.
10. Hit the Browse button, to see if the links to your anchors work as expected.  Always check your work.
11. Close or minize your browser, so you can do more work on KompoZer.  Keep the glossary page open in your edit window.

Demo of Internal Style Sheets, and of color:

1. Continue editing your glossary web page.
2. From the composition toolbar near the top of the KompoZer page, select the icon labeled "CaScadeS", which looks like a painter's palette.  Or from the "Tools" menu at the top of the screen, select "CSS Editor".
3. (If it askes if you want beginner or expert mode, select "Expert Mode" if it is not already checked.)
4. In the pop-up CSS window that appears, 
1. Select the radio button "style applied to elements of type"
2. At the right of the white space beneath the 4 buttons, click the triangular button to get a pull-down menu, and select "h2 (Heading 2)".  This tells the editor that whenever it encounteres a header-2 in your web page, it will format it in the way that you are about to specify.
3. Click on the button "Create Style Rule".  Then, with that "h2" rule highlighted in the left  "Sheets and Rules" pane, click on the "text" tab above the right pane.
4. In the text-edit box that appears, click on the button to the right of the "color" space, and pick a dark red color from the color palette and click "OK".  
5. Create another Rule as follows.  In the "Sheets and Rules" pane at left, click once on the "internal stylesheet" to select it.  Then, just above, next to the CSS painters palette icon, click on the triangle to show a pull-down menu.  Select "Style Rule" to create a new rule.   Then, follow steps 4a-4d above, except select paragraphs "p" from the pull-down menu, and make them be italic.
6. Create a 3rd Rule (starting similar to set 5 above), except.
1. But this time select radio button "style applied to all elements of class"
2. In the white text-entry space, you will see a "period" already typed for you at the beginning.  It is important to keep this period as the first character in the style name.  Immediately after that period, type in the name "term", and hit the "Create Style Rule" button.
3. Back under the "text" tab, make it: bold, larger size, and dark green.
7. Create a 4th rule.  Again a "style applied to all elements of class", but name it "keyword".  Make it bold, and make the font style be "normal".
8. At this point, the left pane in the CSS editor should say "internal stylesheet", and should list under it your 4 rules: "h2", "p", ".term" , ".keyword" .  In web pages, named styles are known as "classes".
9. Click "OK" to close the CSS Editor.
10. Back in your glossary web page, select the "source" tab at the bottom of the window.  Scroll to the top of that page.  There, near the top, you should see all the style definitions listed for "h2", "p", ".term" , ".keyword".  Because these style definitions appear inside the web page where you use them, it is known as an "internal style sheet".  
11. Select the "Normal" tab at the bottom of the window, to go back into normal editing mode.
12. Save.

1. Click anywhere in the first glossary definition to leave the insertion point there. Then go to the "body text" pull-down menu to select "paragraph".  See how that paragraph is automatically formatted according to your own paragraph style (namely, italic).  
2. Do this same procedure for the next few definitions.
3. Next, click once in the line that says "-A-", and choose "Heading 2" from the "Body Text" pull-down menu.  See how default aspects of Heading 2 are applied (i.e., larger size), with the addition of your own style attribute (dark red) from your internal style sheet.
4. Similarly, change "-B-" to Header 2.
5. Back in the first glossary item, use your mouse to select the term "AC".  Then, from the "class" pull-down menu (near the "body text" pull-down), select your style rule "term".  You should see that the word "AC" becomes bold, larger size, and dark green.  However, note that it is still italics even though you didn't define your "term" rule to be italic.  The reason is that this term is imbedded inside your paragraph of the whole definition, and the italic attribute from the paragraph cascades down to also apply to everything inside the paragraph.
6. For the next few glossary items (ACCAS, Accessory Cloud, etc.), also select them with your mouse, and choose the "term" style class.  They should also become bold, larger, and green.
7. Next, under the ACCUS definition, double click on the word "instability".  This is a key word, so from the class pull-down menu, select the style "keyword".  It should become bold, and NOT italic.  Why did this become not-italic, even though it is imbedded in the paragraph.  The reason is that we specifically set this font style to be "normal", not to be "unspecified".   Therefore, the "normal" un-italicized style overrode the paragraph style.  Again, a good example of how styles cascade from a series of rules.
8. Find another key word, such as "wind" in the Advection definition.  Change its class style to "keyword".
9. To see how all this works as html, select the "source" tab at the bottom of the window.  It still has your internal style definitions near the top of the page.  Further down the page, see what it did to apply your new named style classes to your terms and your keywords.  It used the "span, /span" tags to span a range of words, and then applied your named style to that span.
10. Using the tab at the bottom of the window, go back to Normal view.
11.  Save.

1. In KompoZer select the CSS editor (either from the CaScadeS icon in the composition toolbar, or from the  "Tools" menu at the top of the window, select "CSS Editor".
2. In the left pane of this editor, if the "internal stylesheet" is not already highlighted, select it by clicking once with your mouse.
3. Then, in the under the General tab, click on the button "Export stylesheet and switch to exported style"
4. A small window will appear, where you can enter the name for this exported style.  Call it "glossary-style.css".  Make sure to have the suffix ".css", which denotes Cascading Style Sheet.  Navigate to your "glossary" folder before you hit the "Save" button in this little window, in order to save this Cascading Style Sheet in your glossary folder.
5. Hit "OK" to close the CSS Editor.
6. You should see that you glossary web page looks the same, with the red alphabet letters, the green terms, and the bold keywords.  
7. But if you click the "Source" tab at the bottom of the window, you will find that your style definitions no longer appear at the top of your glossary page.  Instead, there is a reference to the external style sheet that you just created.  The reference is something like:   '<link rel="stylesheet" href="glossary-style.css" type="text/css">'.  
8. If the CSS editor accidently gives an absolute reference that looks something like:  href="file:///.../glossary-style.css", be aware that this won't work if we upload the file to a server.  Instead, we must edit the raw html code within this Source view to convert it into a relative file reference:
1. Near the top of your Source page, in the portion of the style link where it says  href="file:///.../gloss-style.css", you need to select and delete all the words starting with "file" and including the last "/".  
2. After this change, the resulting edited text should say  href="gloss-style.css", where you must keep the quotation marks as shown at left.
3. Copy that whole style link (via right click) for later pasting.  For the example here, I would copy
   '<link rel="stylesheet" href="glossary-style.css" type="text/css">'
9. At the bottom of the window, click the "Normal" tab.  Hopefully your glossary is still formatted correctly, and now will upload properly to a server.   
10. Save.
11. Close the stormglossaryab window.

1. In the KompoZer Site Manager, double click the "stormglossarycd.html" to open it in the editing window.  This has the C to D glossary terms already typed in, to make your life easier.
2. Open the CSS editor (CaScadeS).
3. In the pop-up editing window, use the small triangle next to the CSS painters palette to pull down a list of options, and select "Linked Stylesheet".
4. Click the "choose file" button to navigate to your "glossary-style.css" file.
5. Then click "open", and then click "Create Stylesheet".  Finally click OK and close the CSS editor.
6. Click the "Source" tab at the bottom of the window, to view the raw html code.  You should see your style sheet referenced in the header of your document.  
7. Click the "Normal" tab at the bottom of the window.
8. Save.
9. As you did for the A-B glossary, click in any glossary line and select "paragraph" from the "Body Text" drop-down menu.  The paragraph should automatically appear in italics, as you had set in your style sheet.  Do this for some of the other definitions too.
10. As you did for the A-B glossary, click in the line that says "-C-",  and select "Heading 2" from the "Body Text" drop-down menu.  The heading should be automatically colored red.  Do this for "-D-" too.
11. As you did for the A-B glossary, click in the first term of each glossary definition, and select style class "term" from the drop-down menu (just below the Body Text drop down menu).  Do this for some of the other definitions too.
12. As you did for the A-B glossary, double click on any key word in a glossary definition, and select style class "keyword" from the drop-down menu (just below the Body Text drop down menu).  Do this for some other key words that you find too.
13. Save.
14. To see the power of using style sheets, lets modify the style slightly.  Go to the CSS editor, where your "glossary-style.css" should appear.  Beneath that file name, click on one of your style rules, such as "keyword". Then, in the "text" tab, change its colour to purple.  Click OK &  OK.  You should see all the keywords in your stormglossarycd change to purple automatically.  And similar changes are happening automatically to your  stormglossaryab file.   Save it.
15. Close the stormglossarycd window.
16. The in-class lab demo is finished.  You may quit KompoZer, back up your work onto your memory stick, and log out of your computer.