ATSC 212 - Web Authoring: Lab Demo 1

Goals.  To learn how to create/modify web pages to use:

1. existing files of content
2. linking
3. images 
4. uploading to a web server
5. lists (numbered and bullet) 
6. templates

• Create a web page of your favorite weather (or physics or other) links and photos.
• Create a web page for your business.

Web Authoring - Part 1.   In-class Demo:

Create directories and import content 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. weather
2. business
3. Close your Z-drive window.

4. Using your web browser (e.g., FireFox), 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 Web-Authoring-1.
6. On that web page, in the section called "Image files you can use in the Lab Demo this Week"
1. Right click on the links for the various weather images, and "Save Link As" to copy them into your "weather" folder
2. Right click on the "business card" link, and copy the png image file into your "business" 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 two new folders, and the new files you put in those folders.  

Demo of Linking

1. From the Site Manager area, under your "website", double click on your outermost "index" to open it in the editing area.
2. In that index page, Double click on the word "resume"
3. Hit Ctrl-L (Command-L on a Mac) or click on the Link icon in the top tool bar).  
4. Then navigate to your resume file that you created last time, select its index file, and click on OK.
5. Save.
6. To test this link,  go back to your Windows desktop, open the Z drive, and double click on your outermost "index" file inside your website.  When it appears in a browser, then click on the link for your resume to see if it works.

Demo of Images

1. On your own in lab, use Kompozer to create a new page with title "Weather Info" and filename "index", and save it in your "weather" folder inside your "website" folder.
2. On your own in lab, at the top of this page, type "Weather Images", and increase the font size and use a nice colour for this title.
3. Then, on subsequent lines, type:
• thickness thumbnail
• thickness map
• mesocyclone storm photo
• meteogram
• weather map symbol chart
• my favorite weather web sites
4. Then, following Stull's example, insert 2 new lines after each image name, and insert an image by clicking on the "Image" button near the top of the screen to insert an image.  In the dialog box that appears, navigate to the "weather" folder inside your website folder, and open the appropriate weather image.
5. Repeat for the other weather images (all except the pdf file).
6. For the "weather map symbol chart", make these words link to the corresponding pdf file in your web site.
7. For "my favorite weather web site", we will also use a link instead of inserting an image.  Select  the words "my favorite weather web site", and then create a link.  When the link dialog box comes up, type (or paste) in a full URL address (http:// etc.) to your favorite web site.  (Hint, use a web browser to navigate to your web site, and then copy its URL address.)
8. Save.
   .
9. Finally, open your home page index in KompoZer, and link the "weather" word on that home page to your index page inside the weather folder.  Save.

Demo of Uploading your website to a server

Demo of templates &lists

Creating a Template (Follow along with Stull):

1. To the right of the KompoZer "New" button is a downward triangle, which you should click on, and then pick "more options..."
2. Select the radio button that says "A blank template", and hit the "Create" button.
3. In the blank page that appears, hit the "Enter" key on the keyboard a few times, to create a few blank lines.  Then move the cursor to the first blank line.
4. Click on the "Table" button near the top of the window, to insert a table in that first line, where the table has 2 columns and 1 row (see last-week's exercise if you need a review about tables).  
5. Put the cursor inside the left cell of the table.  Then click on the "Image" button near the top of the screen to insert an image into that cell
1. In the dialog box that appears, navigate to the "business" folder inside your Website folder, and open the "business card" image.
2. The image preview should give the size of the image in pixels.  Remember the width.  (If you didn't see this width info before clickin OK, then double click on this image in your web page, and read the width of the image (in pixels), then close that dialog box.  Remember the width.)
3. Double click in the empty space next to the image inside that first cell of the table.  In the dialog box that appears, enter a width equal to the image width that you remembered.
4. Save the web page to be inside your "business folder", and give it a name such as "businesstemplate".
5. Double click on the image in that table, and change the reference from an absolute reference to a relative reference if needed.  (Namely, delete all the stuff before the "business card" name.)
6. In the table cell at right, enter a name and address for your fictitous business.  I called my business "WeatherWright" in the in-class demo.  Make the font size and style look more pleasing to you. 
7. Add a horizontal line after the table
8. Enter a couple blank lines.
9. Add another horizontal line.
10. After this last line, type "Copyright © [thisYear] by [YourName]", and while the cursor is in this line, from the "body text" pull-down menu, select "address".  (You can use the "Insert" menu in KompoZer to insert special characters and symbols, such as the copyright symbol.)
11. Click on one of the blank lines between the two horizontal lines, to leave the insertion point there.
12. From the "Insert" menu, select "Templates" and then select "insert editable area".
13. Name the area "body".  Select "flow of text", and select "optional" and "repeatable".  OK. 
14. Save and close this web page.  
15. In the "Site Manager" pane at left, shrink and expand your "business" folder.  Inside it, you should find the new file "businesstemplate.mzt", where the ".mzt" suffix denotes a template file.

Using the Template that you just created:

1. To the right of the KompoZer "New" button is a downward triangle, which you should click on, and then pick "more options..."
2. Select the radio button that says "A new document based on a template".  
1. Use the "Choose file" button to navigate to, and open, your new template file called "businesstemplate.mzt" inside your "business" folder.    Open.  
2. Hit the "Create" button.  This tells KompoZer which template to use when creating this new page.
3. From the "Edit" menu, select "Detach from Template" item.
4. In between the two horizontal lines on your web page, type the word "Products", and from the "body text" pull-down meun, select "Heading 2".   Then double click on the word "Products" to select it, and make it be italics.  
5. Next, under that heading, list a few fictitous products in separate rows.  Select all those product rows, and  click on the numbered list button in the tool bar.
6. From the "Format Menu", select "Page Title and Properties...".  In the dialog box that appears, for a title, enter "WeatherWright Products".   OK. 
7. Save your web page using the file name "products", and then close the editing window for this web page.

1. Follow similar steps as for the "Products" web page, but this new one will be for "Services".  See how you can use the same template to create many web pages that all have the same boilerplate info, such as letterheads, logos, address info, etc.
2. Don't forget to save this web page, and then close its editing window.
3. From Site Manager pane at left, shrink and expand the "business" folder, to confirm that you can see the new files "products" and "services".  

Upload your revised website to a server