ATSC 212

Homework 2 - Web Authoring Part 2

1. Using Windows explorer, create new file folders called "newbusiness", "newglossary" (and create a "favorites" folder if it doesn't already exist from last week) inside your local website folder (on the Z drive in lab, or on your own computer).
2. Styles & Anchors.  
1. Copy the files "gloss-ef.html" and "gloss-gh.html" to your  "newglossary" folder on your "Z" drive (or, if doing this work from computers not in the EOSC computer lab, then on your own computer).
2. First, create an internal style sheet.
1. Open "gloss-ef.html" in your KompoZer normal edit window.
2. Use the CSS Editor in KompoZer to create 5 or more style rules that you can apply to different parts of the glossary, similar to (but NOT the same as) we had done in-class.
3. Next, format the E-F glossary.
1. Then use these styles to format the whole E-F glossary.
2. Also add anchors at the letters "-E-" and "-F-", and write a glossary navigation line near the beginning and end of the glossary, with links to allow people to jump immediately to the anchors at start of the E or the F words.
3. Add any other formatting to make the page look nice, and then save.
4. Use the CSS editor to change from an internal to an external style sheet for the E-F glossary, and save (inside the "newglossary" folder) the style sheet as "gloss-newstyle.css".   Then, save and close your E-F glossary.
5. Next, format the G-H glossary, by linking to the new style sheet that you just created.  Add the anchors and links to them.  Make any additional formatting needed to make your glossary pages look similar, and then save and close this glossary.
6. In your "newglossary" folder, create a new "index" web page titled "Storm Glossary", and in it create links to your EF and GH glossary pages.
3. Further enhance your business web page from last week by creating a style sheet to use with your template.
1. Copy all your business web files into the "newbusiness" folder, or start from scratch if you want a fresh start.
2. Look at some web pages for existing businesses that you might have already dealt with, and decide which web pages look the best to you.  Do any have the same header, footer, or side bars, on all their web pages (such as might have been produced by a template).  Decide what aspects of their web layout and style you would like to mimic in your own web page.  Keep this in mind when you modify your own  template and web pages (but don't copy the web pages from other businesses or other students).
3. Decide on what styles you want to use in various parts of you business web pages.   Do you want any styles to be common across many pages.  If so, these are the styles that you would want to put on an external style sheet.
4. Create an internal style sheet for one of your newbusiness web pages, and create all the style rules that you need for your business.  Apply those styles to that one page, and modify until you are happy with how it looks.
5. Then change that internal style sheet into an external style sheet, saved in the newbusiness folder.
6. For any of your other existing web pages in your newbusiness folder, link this external style sheet to them, and apply the styles to those pages.
7. Also link the external style sheet into the template that you had created for your business.  Apply the styles to that template where appropriate.
8. Create a new "Human Relations"  web page for your newbusiness based on this template.  Describe the future job opportunities for your business, and the qualifications desired for applicants.  Apply the styles to this web page that came along with the external style sheet that was already supplied by your template.
9. Make sure your index home page for your business links into all the proper files in the newbusiness folder.
4. On the main "index.html" page for your web site, add items with links to your results from parts 1 and 2 above.  Namely, your home page should have links to: your resume (from last week), the weather page (from last week), your new page of favorites , your mock newbusiness (from part 3 this week), and your newglossaries (from part 2 this week).  Also, add a link to your business template file, and to your .css file, so that other people can view these.
   The file structure on your local web site should be:

• website (a folder)

• index.html  (your home page, with links to all the other index files below)
• [yourname]-resume (a folder)
• index.html
• any image files
• any other html resume pages you link to
• weather (a folder)
• index.html
• any image files
• any other html pages you link to
• business (a folder)
• index.html
• stylesheets (.css) and template (.mzt) files
• any image files
• any other html pages you link to
• newbusiness (a folder)
• index.html
• stylesheets (.css) and template (.mzt) files
• any image files
• any other html pages you link to
• favorites (a folder)
• index.html
• any image files
• any other html pages you link to
• any style sheets (but not required)
• glossary (a folder)
• index.html
• stylesheets (.css)  files
• glossary pages
• newglossary (a folder)
• index.html
• stylesheets (.css)  files
• glossary pages

5. Test your whole web site locally on your computer, by using your web browser (e.g., Firefox), and then from the File menu, select "Open File", and navigate to your "index" home page file that is outermost in your website folder.  Test all your links to make sure they all work.  Fix any problems and test again.
6. Upload all your folders and files from both parts 1 and 2 to the web server, using the FileZilla program or other ftp program.  Don't forget to upload your updated home "index.html" file.  Also upload the template and the external style sheets into their appropriate folders.
7. Use a web browser to go to the "Students" page of our course web site, and check that everything worked on your own course web page.  If not, fix and try again.  (Please don't wait till the last minute to do all this.  If you try earlier to upload and things don't work right, then you have time to read the online manual and help files, and to email the TA to ask for help.  You also have time to use the course online Discussion board to ask for tips, or to plan a time to meet with a classmate to help each other.)

Marking and Evaluation