EDUC 200 Checklist & Tip Sheet v1.1

Overview

There are 3 main steps in EDUC 200:

1. Learn basic webpage editing. You need basic skills to complete goals 2 and 3, and to work on your portfolio beyond this course.
2. Set up the framework for your portfolio. You copy the framework into your MyFiles space. The framework includes many generic webpages, and the official images that go with them. In future courses, you will customize these pages, and add many new pages.
3. Begin customizing your portfolio. This includes adding Performance Tasks for your major(s) and minor(s). This also includes writing your Introduction page and your Who Is page.

1. Learn Basic Webpage Editing

• This is part of the lab in the First Session, including the steps below.
• For additional help, see "Live Help" and "SOE Tutorials & Advice" at SOE Portfolio Resources .

2. Set Up the Framework

You should do these things in order.

These directions assume that you're logged into a UWSP campus load computer (e.g., a lab computer), or that you at least have access to your MyFiles space.

Get the Templates

1. Find soeportfolio.zip under "Templates" at SOE Portfolio Resources .
2. Download soeportfolio.zip to Desktop (left-click)
3. Open soeportfolio.zip (double-click)
4. Click Extract
5. Extract the files to into the inetpub folder in your MyFiles space (usually the H: drive)

Create an Outer Index

If you've never created a webpage in inetpub...

1. Find "Outer Index" under "Templates" at SOE Portfolio Resources .
2. Download index.htm to inetpub (right-click)

If you already have a webpage in inetpub, create a link to index.htm in soeportfolio.

Don't rename index.htm or soeportfolio.

Preview Your Portfolio

1. Find "About the List of Student Web Pages" under "SOE Tutorials & Advice" at SOE Portfolio Resources .
2. Read it
3. Look for name in the list of all student web pages
   1. Can't find it? Enter students.uwsp.edu/email/ in a browser, where email is the first part of your email address
4. Take a minute to surf through the portfolio framework. Notice the directions and advice. Notice how the two links in the banner ("Education Home" and "Portfolio Information") take you completely out of your portfolio (and into the SOE website). Notice that clicking on "Portfolio" always takes you back to the title page.

Open Your Webpages in Dreamweaver

1. For an introduction to Dreamweaver, find "Dreamweaver Basics" under "SOE Tutorials & Advice" at SOE Portfolio Resources .
2. Find MyFiles in the dropdown menu in the upper right.
3. Open soeportfolio
4. Open index.htm
5. Change "Stevie Pointer" to your name
6. Save the page
7. In Explorer, preview the page

Preview your portfolio again after each major change or addition. Make sure the changes worked.

• If you created an outer index, you need to change "Stevie Pointer" in that page, too.

Add Your Performance Tasks Chart(s)

1. Find your major under "Performance Tasks" at SOE Portfolio Resources .
2. Download that page to soeportfolio (right-click)
3. In Dreamweaver, open 3_subject_knowledge.htm
4. Create a link from 3_subject_knowledge.htm to the page you just downloaded (see "How to Create a Link", below)
5. In Explorer, test the link. Notice how the breadcrumb at the top of the page takes you back to Subject Knowledge.
6. Repeat these steps for your other major(s) and minor(s)
   1. Performance Tasks for minors are based on those for majors. Use the major as a starting place. Later, you'll learn which tasks you can delete.
   2. Exception: Early Childhood always includes a Special Education minor, so those tasks are at the bottom of that page

Breadcrumbs are a very useful tool for navigation. They show you where you are, and how to go up/out of the website. I've created a few breadcrumbs for you. You'll need to keep creating breadcrumbs as you add new pages. The first one should always be the "Portfolio" image.

Sometimes you add a new file to inetpub and it doesn't show up in Dreamweaver. Try right-clicking on the list of files and choosing "Refresh." (In later versions of Dreamweaver, the Refresh button () does the same thing.)

You've now set up your framework. If you did everything correctly and you don't break anything, you've earned about 40% of the points on my Final Evaluation.

3. Begin Customizing Your Portfolio

You can do these things in any order. For example, you may not know what images you want to add until you finish writing Who Is.

Replace Stevie Pointer

1. In inetpub, index.htm should have your name
2. In soeportfolio, index.htm should have your name

Write Introduction

• Follow the directions on that page

Add a Picture to Introduction

• See "How to Add an Image ", below

Are you remembering to preview your portfolio after each step?

Write Who Is

1. Follow the directions on that page
2. Replace NAME at the top of the page
3. Replace NAME in the link from 1_introduction.htm

Add 2 or More Flavor Images to Who Is

• See "How to Add an Image", below

Add a Personal Image to Who Is

• See "How to Add an Image", below

Add Any Work Samples You Have

• Work Samples aren't part of the rubric, so you won't lose points if you make a mistake
• See "How to Add a Work Sample", below

It will be much easier to add Work Samples as you complete them, rather than wait until later. For example, it will be hard to write a Synopsis or Reflection months or years later.

Delete the Directions

1. When you're ready, delete the directions in 0_who_is.htm and 1_introduction.htm.
2. If you want to read the directions again, find the original page under "Templates" at SOE Portfolio Resources .

Check for Errors in Conventions

Dreamweaver (like most editors) has spellcheck (under the Text menu).

Computers can't catch some errors in conventions. Ask a friend to read your writing.

Experiment with Formatting

You don't have to use the formatting in the templates. Feel free to experiment with different colors, fonts, backgrounds, etc.

Be careful with colors and fonts. You want your portfolio to be readable and to seem professional.

The templates use a Cascading Style Sheet. If you want, you can change the format of all the pages in one place. I'm happy to show you. But you can also make changes to each page. The Style Sheet won't stop you.

Customize the Page Titles

Every webpage has a title. The title isn't the same as the file name. Instead, it's what appears in the top bar of the browser window. For example, the title of this page is "EDUC 200 Checklist & Tip Sheet."

The templates in the portfolio framework already have a single, consistent page title: "UWSP School of Education - Teaching Portfolio." You may want to change these titles, to things like "Kym Buchanan's Teaching Portfolio" or even "Kym Buchanan's Teaching Portfolio - Subject Knowledge." Customizing the page titles isn't required, but it's another way to personalize your portfolio.

To change the page title, just enter new text in the "Title:" field in Dreamweaver.

A page title can include spaces and special characters.

Finish Up

1. Ask your partner to do a Peer Evaluation of your portfolio
2. Read your partner's evaluation (in Kat)
3. Make any changes
4. Do a Self Evaluation of your portfolio (in Kat)
5. Make any changes
6. Burn a CD
7. Turn in your CD
8. Wait for an email from Kym

The Syllabus and other pages in Kat have information about these steps.

How to Create a Link

1. Create the webpage you are linking to
2. Create the text that will be the link
3. Select the text that will be the link
4. Create the link. Choose one:
   1. Click on this icon: (it's a link in a chain)
   2. Click the yellow folder in the Properties bar:
   3. Drag the bullseye in the Properties bar to the webpage in the Files
   4. Paste the address into Link in the Properties bar

Try to avoid typing links. One type-o breaks the link.

A link can be your email address.

• The link should be mailto:email@domain
• See http://www.htmlhelp.com/faq/html/all.html#mailto-link

How to Add an Image

1. Put the image in the _images folder
2. In Dreamweaver, insert the image (Insert: Image or click on the button)
3. Include "alt" information: a name or short phrase that describes the image

Webpages aren't like Word documents or PowerPoint shows. An image is like a link: it doesn't actually become part of the page. So after you've added the image, don't delete the image.

Always put your images in the right folder first (before using it). Otherwise you may have problems later.

The _images folder contains a subfolder called official. The images in official are essential to your portfolio. Don't move, rename, change, or delete this folder or these images.

Images, like text, can be centered. While you have the image selected, click on the icon in the Properties bar.

You can use " floats" to position images in creative ways. While you have the image selected, find "Class" in the Properties bar, and select "floatright" or "floatleft". (To get rid of a float, choose "None.")

You can also use floats on whole paragraphs of text. Sometimes floating the text works better than floating the image.

If you have images for a work sample, put those images in the same folder as the work sample (not in _images).

An image can be a link.

More About Alt Info

Alt info is text that supplements or replaces an image. It should be short yet descriptive. When someone who's visually impaired views a webpage, he/she may use a screen reader. The screen reader speaks the alt info, which lets the person know what others see. So alt info is a small but important part of accessibility: an central moral and legal part of education.

If you forget to add alt info, you can do it later. While you have the image selected, type the alt info in the Properties bar.

How to Add an Artifact

1. In the folder called artifacts, create a new folder with a meaningful name (e.g., romeo_juliet_lesson)
2. Open artifact_cover_page.htm
3. Before doing anything else, save the page under a new name, in the new folder you created in step #1
4. Follow the directions on the cover page
5. Delete the directions

Never start making changes until you save it with a new name.

If you need an original copy of artifact_cover_page.htm, look under "Templates" at SOE Portfolio Resources .

How to Print to PDF

You can create webpages in Microsoft Word, PowerPoint, and other programs. However, such pages often create problems. Instead, you should print to PDF. This is the best way to be sure something looks right (format, font, images, page breaks), and that others can read it.

1. Choose File: Print
2. Choose Adobe PDF as the printer
3. When prompted, enter a name for the new PDF file
4. Save the file in the appropriate folder in the folder called artifacts.
5. Keep your original file (e.g., Word doc), in case you later want to reprint the PDF

When printing to PDF, you have the usual printing options (e.g., two pages per sheet).

Your portfolio should only have:

• .htm (or .html) = webpage
• .gif = non-photo graphics
• .jpg = photos
• .pdf = Acrobat PDF
• .css = Cascading Style Sheet
• .doc = Word document
• .ppt = PowerPoint slideshow

If you're not sure, ask me.

What is OpenOffice.org?

• Free
• Draw is especially useful (alternative to Inspiration)
• Also includes a word processor, slideshow editor, & spreadsheet editor
• Interoperable with Microsoft Office
  • Word.doc
  • PowerPoint.ppt
  • Excel.xls

You aren't logged into Kat. Login?