WebDemo0  - Creating your website, with home page and resume.

Method: Instructor demonstrates, students follow on their own terminals.  (See the completed exercise at bottom of this web page.)

Step-by-step instructions:

Part 1 - Before running the web authoring program, streamline your local desktop

log in to your computer

open the Firefox web browser.  Go to the ATSC 212 home page & bookmark it.  After exploring the website, click on labs, Lab 1 Welcome, WebDemo0.  This is the demo for today (I will lead you thru it -- but in case you fall behind, you can always use these printed instructions.)

if the KompoZer program is not already on your desktop, find it in the full list of programs, and make a shortcut (alias) to it on your desktop.

find the Z drive, and put a shortcut to it on your desktop (drag to your desktop).  This is the drive that will hold all of your files for this course.

open the Z drive (by double clicking)

add a new directory (folder) called "website" 

open that folder, and inside create another folder called "[YourName]-resume" 

Part 2 - Set up your home "index" page inside your "website"  folder. 

run KompoZer by double clicking its icon on your desktop

move the mouse cursor overall all the KompoZer icons, to see pop-up explanations.  Also pull down the various menus to see the menu options.

in the un-titled editing window in KompoZer, write your name at the top.

then insert a horizontal line afterwards

then write the following on separate lines:

resume
weather
business
glossary

then insert another horizontal line

then Save this file:  (1) Enter the following title when prompted:  "Home Page for [YourName]", and click OK.  (2) Enter the following file name when prompted: "index", navigate to the "website" folder in your Z drive, and Save this file. 

You should now be able to see "index" listed in your Z drive.

Part 3 - Set up your local website

In the KompoZer program, if the "Site Manager" is not already showing (usually on the left side of the KompoZer window), then use the View menu, Show/Hide, and select Site Manager

In the Site Manger window, click on the "Edit sites" icon (the icon with the two computers).

In the "Site Name" box, type "ATSC 212 [yourLastName] local"

Then click on the "Select Directory" button, and navigate to your "website"   folder on your local hard disk.

click OK.   click OK again.

The "ATSC 212 [yourLastName] local" should now be visible in the Site Manger window.  Click on the small [+] icon to the left of that site name to see the contents.

Part 4 - Create your resume

In the top tool bar of KompoZer, select the "new" icon.

In the menu bar of KompoZer, under Format, select "Page Titles and Properties", and then enter the title "Resume for [YourName]", and hit Enter or OK.

in the new editing window that just appeared in KompoZer, insert a table with 2 columns and 1 row (by clicking on the Table icon).

in the left cell, type your name.   in the right cell type your contact info (address, phone, etc.)

select your name and make it 2 sizes larger

double click in the left cell to show a Table Properties dialog box, and
(1) select tab "Cells", and set the cell width to 200 pixels, and hit the "Apply" button.
(2) align your name vertically to the top of the table cell, and hit the "Apply" button.
(3) Select tab "Table", and set the table border to 0 (zero).   Apply.
(4) Hit "OK" to close the Table Properties dialog box.

Preview by using the "Preview" tab at the BOTTM of the window.  Then go back to the "Normal" tab for further editing.

below the bottom of the whole table, insert a horizontal line (from the insert menu)

Select the Save icon.  Navigate to be in the resume  folder on your Z drive.  For the file name, call it  "index"  and hit Save.

In the Site Manager area, if your new file called resume does not appear yet, then hit the "refresh" icon (the one with the curly arrow).

Continue editing your resume:

[Pause.  To see what you have created so far, click the <>Source tab at the bottom of the window.  Namely, the KompoZer authoring program created all the html tags for you.  Then click the Normal tab at the bottom of the window to return to your editing.]

below the line, insert a table with 2 columns and 4 rows

in the left column, starting from the top down, type the following into the cells:
Education
Experience
Skills
Interests

Make each of these 4 words one size smaller, and boldface.  Also align them vertically to the top of each of their cells.  (You might need to do this one cell at a time.  Don't forget to hit the Apply button each time.).    Save.

Double click in one of these left cells, and under the Cell tab set the width to 100 pixels.    Apply.   Also, under the Table tab, set the cell spacing to 10 pixels, and set the border to 0.   Apply.   OK.

The Resume is incomplete, but that is enough demo for today.  Close the KompoZer window.

See the sample below, and do the assigned readings before next class.

Sample Resume (incomplete at the end of the first Lab meeting):

-end-