1. Learn basic webpage editing. You need basic skills to complete goals 2 and 3, and to work on your portfolio beyond this course.

Transcription

1 !!! This document only applies to webpage portfolios. If you started your portfolio in Spring 2011 or later, this document doesn't apply to your eportfolio in D2L.!!! Overview Learn Basic Webpage Editing Set Up the Framework Begin Customizing Your Portfolio How to Create a Link How to Add an Image How to Add an Artifact How to Print to PDF What is OpenOffice.org? There are 3 main steps in EDUC 200: Learn basic webpage editing. You need basic skills to complete goals 2 and 3, and to work on your portfolio beyond this course. 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. 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 My Influence as a Teacher page. 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. 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 Find soeportfolio.zip under "Templates" at SOE Portfolio Resources. Download soeportfolio.zip to Desktop (left-click) Open soeportfolio.zip (double-click) Click Extract 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...

2 Find "Outer Index" under "Templates" at SOE Portfolio Resources. 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 Find "About the List of Student Web Pages" under "SOE Tutorials & Advice" at SOE Portfolio Resources. Read it Look for name in the list of all student web pages Can't find it? Enter students.uwsp.edu/ / in a browser, where is the first part of your address 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 For an introduction to Dreamweaver, find "Dreamweaver Basics" under "SOE Tutorials & Advice" at SOE Portfolio Resources. Find MyFiles in the dropdown menu in the upper right. Open soeportfolio Open index.htm Change "Stevie Pointer" to your name Save the page 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) 6. Find your major under "Performance Tasks" at SOE Portfolio Resources. Download that page to soeportfolio (right-click) In Dreamweaver, open 3_subject_knowledge.htm Create a link from 3_subject_knowledge.htm to the page you just downloaded (see "How to Create a Link", below) In Explorer, test the link. Notice how the breadcrumb at the top of the page takes you back to Subject Knowledge. Repeat these steps for your other major(s) and minor(s) 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. 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.

3 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're on Your Way 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. You can do these things in any order. For example, you may not know what images you want to add until you finish writing the My Background section of My Influence as a Teacher. Replace Stevie Pointer In inetpub, index.htm should have your name 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 the My Background section for My Influence as a Teacher Follow the directions on that page Add 2 or More Flavor Images to My Influence See "How to Add an Image", below Add a Personal Image to My Influence See "How to Add an Image", below Add Any Artifacts You Have Artifacts aren't part of the rubric, so you won't lose points if you make a mistake See "How to Add an Artifact", below It will be much easier to add artifacts 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

4 When you're ready, delete the directions in 0_my_influence.htm and 1_introduction.htm. 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 Ask your partner to do a Peer Evaluation of your portfolio (in Kat) Read your partner's evaluation (in Kat) Make any changes Do a Self Evaluation of your portfolio (in Kat) Make any changes 6. Preview/test your portfolio on the web 7. the link to your portfolio to the instructor, with subject "200: Final Evaluation"

5 8. Wait for an from the instructor The Syllabus and other pages in Kat have information about these steps. Create the webpage you are linking to Create the text that will be the link Select the text that will be the link Create the link. Choose one: Click on this icon: (it's a link in a chain) Click the yellow folder in the Properties bar: Drag the bullseye in the Properties bar to the webpage in the Files 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 address. The link should be mailto: @domain See Put the image in the _images folder In Dreamweaver, insert the image (Insert: Image or click on the button) 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 artifact, put those images in the same folder as the artifact (not in _images).

6 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. More About Resizing Images Most of the time, the image you want to use is larger than you need. A large image causes your page to load more slowly. Resizing an image in Dreamweaver won't solve this problem: the image is still loaded at full size "behind the scenes", and then displayed in resized form. Instead, you need to resize images in an image editor. Here are directions for using Photoshop to resize an image Open the image in Photoshop Go to Image menu and choose "Image Size " "Constrain Proportions" should be checked Choose a smaller size in pixels (for a webpage, you probably want somewhere between pixels for height and width) Save Close the image Go back to Dreamweaver Select the image In the Properties bar at the bottom, hit the 'refresh' icon ( ) so that Dreamweaver uses the new, correct size in pixels (On the Final Evaluation, if you lose points because you didn't resize your images, this isn't a CD issue. So if you don't have other issues, you can resubmit by just ing me a link to your portfolio.) In the folder called artifacts, create a new folder with a meaningful name (e.g., romeo_juliet_lesson) Open artifact_cover_page.htm Before doing anything else, save the page under a new name, in the new folder you created in step #1 Follow the directions on the cover page 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.

7 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. Choose File: Print Choose Adobe PDF as the printer When prompted, enter a name for the new PDF file Save the file in the appropriate folder in the folder called artifacts. 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).

8 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. 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 We've all heard that a million monkeys banging on a million typewriters will eventually reproduce the entire works of Shakespeare. Now, thanks to the Internet, we know this is not true. -Robert Wilensky (more quotes) Created by Kym Buchanan This work is licensed under a Creative Commons License. CSS: General Presentation Some content and curriculum based on work by: Maysee Herr, Rand Spiro, Lisa Bardon, Quinn Stanley, Larry Riggs, Pat Shaw, Sue Slick, and others at the University of Wisconsin Stevens Point. Last revised 1/22/11