Guidelines for Creating Educ 5413 Portfolio

Note: If you would like to work on your site on your home computer, you can obtain a free 30 day trial version of Dreamweaver: Go to Macromedia.com website and click on the link for "free 30 day trial."

Planning your site

PLAN!!! PLAN !!! PLAN !!! PLAN !!! PLAN !!! PLAN!!! before you begin actually creating your website. It is a very good idea to do this either in a concept mapping program like Inspiration or to use post-it notes.
Just as you might organize your files on your computer into different locations, with folders within folders, and each folder containing files, so too should you plan your website with different folders that contain htm (web page) files
For this Educ 5413 portfolio, you will create a folder inside your UMD www folder, and call this 5413portfolio (one word, no spaces).
The first page in this folder you will call "5413home.htm" --> this will be the main page in your portfolio that includes links to all of your 5413 assignments.
Inside this 5413 portfolio folder you will save all of your work from Educ 5413. For each assignment you will have a "cover sheet" which will be an html file (i.e. a web page with the extension ".htm") that describes briefly (a) the purpose of the assignment (b) what your work on this assignment shows about your technology and teaching with technology knowledge and skills.
Then from the assignment cover sheet you will provide a link to the actual assignment (a) saved as a web page or, if the assignment is a web page (e.g. your TeacherWeb.com or blogger.com assignments), then linked to the web page of these assignments (b) the document in its native format such as PowerPoint or Microsoft Word).
For an example of what your concept map layout of your web site should look like, see Helen's Example 5413 site map.
You try it! Before you even open Dreamweaver and begin working on your site, create your own concept map of your site.

Creating Site Settings

Launch Dreamweaver. When you first do this a dialog box will open inviting you to set up the site definitions for a new site in the default basic view. Click on the "advanced" tab --> this takes you to a view that enables you to "see behind the curtain" and understand better the process of setting up your site.
From the site menu --> select new. This will bring up a box to define the new site. There will be two columns in this box. On the left is a list of categories and on the right the features for whichever category is selected. When you open the site menu it is usually set to default to the Local Info category.
Make sure Local Info is the category selected in the left column. Then, in the right box/column, you need to define a number of different things.
- Name the site. Type in the name you will give the site. Example: Helen's Web Site
- Choose where you will keep the site on your computer. Click the icon of the little folder and browse to the location of the folder. Create a folder at this location by clicking on the New Folder button --> then name it (e.g. Helen's Web Site) --> then click the Create button --> Then click on this new folder once to select it and click on the choose button.
- In the space provided, enter the HTTP Address for the site. This will be the URL of your site once you have uploaded it. Example: http://www.d.umn.edu/~userID
- Select "enable cache" box.
Select Remote Info in the category list on the left column.
In the right column, next to Access, select FTP from the pull down menu.
This will bring up a number of form boxes to be filled providing information about your FTP connection:
- FTP Host --> www.d.umn.edu
- Host Directory --> www
- Login: --> user id (usually your UMD e-mail login)
- Password: --> enter your password (x.500 password -- same as your UMD e-mail password). NOTE: If you are NOT using your own computer, DO NOT check the "Save password" box (otherwise anyone can upload/change your www account). When you don't save your password, every time you upload a page in your site you will be asked to type in the password.
Click on the box to create a cache.
Click the OK button.

Setting up files and folders within your site

Once you have set up your website:

Make sure that you are in the local view window of your web palette
Control click (Mac)/right click (Windows) on the site folder that appears at the top of the files window and select "new folder" from the drop down menu:

This will create a new folder called "untitled" in your website within your main site folder. Click on this untitled folder so that the name is highlighted, and rename it "educ5413" (lowercase, one word). Notice that this shows up as a little icon that looks like a file folder.
Next control click (Mac)/right click (Windows) on the folder that you just created (educ 5413) and choose New File from the drop down menu (not new file as you did last time). This will create a new web page (called a file) with the name "untitled.html" in your educ5413 folder. Notice that this shows up as a little page with the top right hand corner turned down and a picture of a green "d" inside a green circle. This shows that it is a web page, not a web folder.

As you did for renaming a folder, click on this file name so that it is highlighted (as shown in the picture above) and place the cursor at the end of the word "untitled" before the ".htm" --> delete the word "untitled" and name this file "5413home" (keep the file extension, so the name of the whole file ends up being "5413home.html"
- Again control click (Mac)/right click (Windows) on the educ5413folder and create another untitled.htm file --> this time rename it "blog.htm"
- Repeat to create another untitled.htm file --> this time rename it "phototour.htm"
- Repeat to create another untitled.htm file --> this time rename it "teacherweb.htm"
- Repeat to create another untitled.htm file --> this time rename it "teach_w_ppt"
- Repeat to create another untitled.htm file --> this time rename it "techmatrix"
- Repeat to create another untitled.htm file --> this time rename it"webquest.htm"
Locate a photo that you would like to insert into your website. Open it in PhotoShop.
- Resize it so that it has a resolution of 72 pixels per inch and is no bigger than 300 pixels wide.
- From the file menu choose "save for web" --> using the "4-up" option, select a jpg format and a 60% quality.
  
  Click on the "save" button and navigate to your website folder (where you have already saved your educ5413 folder and all the .htm files you created above) and save the image into this folder.
  
  You should now have a folder called educ5413 containing 7 files that looks like this:
Go to your jump drive and open your photo tour document (which most of you created in PowerPoint):
- From the file menu, choose "save as" and save it into the educ5413 folder.
- Again go up to the file menu, choose "save as" and choose "Save as web page" --> save it to your educ5413 folder.
Also on your jump drive open your Teaching with Multi-media document (also which most of you created in PowerPoint)
- From the file menu, choose "save as" and save it into the educ5413 folder.
- Again go up to the file menu, choose "save as" and choose "Save as web page" --> save it to your educ5413 folder.
Any time your create a document for your website that you want to save into your site, repeat the above steps (e.g. when you create your Technology Teaching Matrix).
To upload your educ5413 folder, click on it, then click on the blue arrow that appears at the top of the files palette --> this will open a dialog box asking you if you want to include dependent files --> click "no." Your entire 5413 folder will now be uploaded to the UMD server (the remote site). You can upload entire folders or files in this same way: by clicking on them in the list and then selecting the blue arrow.

Inserting the contents of your web pages

Now that you have the structure of your site set up and blank pages created for the "cover sheets" of your assignments, you are ready to insert content onto them.

Inserting content onto your 5413home page:
- To open your 5413home page double click on the 5413home.htm file in the list that appears below the 5413portfolio folder (if no list appears, click on the arrow (Mac) or plus sign (Windows) to the left of the 5413portfolio folder and this will "open the door" and show you all the files that are in this folder).
- This will show a blank page (similar to the initial blank page that you see in Mozilla Composer). Follow Helen's 5413 Home Page example to create a page that has:
  - A heading "Your name Educ 5413 portfolio"
  - A picture of yourself (note: you will need to upload the picture of yourself to your 5413 folder).
  - A table that lists all of your assignments for the course and provides links to all of your work within the folder.
    - To link from each of these items to the corresponding page within your site, first underline the name of the assignment within the table --> click on the "dart board" circle that appears below the link box --> this gives you an arrow which you then drag and point to the file to which you want to link in your list of files within your 5413portfolio:
      
      You can also create a link to a file by clicking on the folder to the right of the "dart board' and navigating to the file that way.
  - A "page last updated" line that updates automatically every time you save this page
  - A "mail to" link that provides your e-mail address
  - A page title (so that it doesn't show up in your browser as "untitled")
Inserting content onto each of the cover sheet files that you created for each assignment:
- Open your file called "blog.htm" --> following Helen's example blog page:
  - give the page a heading level 1 (Teaching with Technology Blog)
  - create a heading level 2: Purpose. Under this describe in your own words what the purpose of this site was
  - create another heading level 2: Highlights of what I accomplished in this assignment. Under this describe (paragraph or list) what you learned through this assignment and what knowledge/skills regarding teaching with technology this assignment shows.
  - create another heading level 2: Link to assignment. Under this type "link to my assignment" --> in your browser, navigate to your blog --> copy the blog URL --> come back to Dreamweaver, highlight the words "link to my assignment" --> the in the palette that appears below your page, in the link box, paste the URL.
- Repeat the same steps for each assignment cover sheet, except that under the Link to assignment heading, some assignments will have more than one link as you will need to link to the htm file and to the original document (e.g. librarytour.ppt)
When you are done creating your site, be sure to upload all files that you have changed (or upload the whole 5413site just to be sure you have it all uploaded.

Downloading your site from the remote server

When you log on next time to continue working on your site, if you are working on a computer that is not your own or on which you did not create your site last time, you will need to set up your site all over again as you did under "create site settings" earlier on in these guidelines.
Once you have set up the local site and entered the remote site information (ftp information), you must download your 5413 site to your local computer before you continue work on it. This is a very important step to ensure that you don't overwrite what you have on the remote site! To do this:
Click on the folder for your site in your files listing --> then click on the green arrow from the bar above --> this will ask you if you want to include dependent files --> click "no" --> your entire site will be downloaded to your computer. Open the 5413 folder and continue your work (remember to upload it when you are done!).

Syllabus|Schedule|Assignments|class blogs|View Grades