This document provides instructions for creating a portfolio using Dreamweaver. It recommends organizing files into folders with logical names and outlines. The main steps are to start with an index or overview page, format the page layout conservatively, explore formatting options, insert pictures and links, and continually save and check that links are working across devices. Maintaining a simple, elegant design with easy navigation between logically organized pages and content is emphasized over excessive information or colors.

1. Dreamweaver for Portfolios
Dr. Maite Correa
FLL
maite.correa@colostate.edu

2. Basics
Your portfolio is similar to a webpage that you can have offline (or online)
Each introduction or each page is a new .html file
.html files are very similar to .doc files, so no need to be afraid of it
Always give your files a name that means something to you (and maybe the reader)
so you can find it:
Avoid “paper1”, “LSPA536” or “maite” and use “NPs_in_portuguese”,
“spanglish_Correa” or “assessment_strategies”
Keep files organized in folders. Think before you start and have an outline of the
organization

3. Organize Your Ideas in Folders
Main Folder
Overview: usually called “index.html”
Teaching Philosophy
CV
DOMAINS
Domain1: language
Domain 2: culture
…
PDFS
Paper
Another paper
Another paper
LESSON PLANS/RESOURCES
Lesson plan
Another lesson plan
OTHER MATERIALS
Evaluations
Pictures
Videos
There are multiple ways of
doing this. Just do it in a way
that looks LOGICAL to you

4. Let’s Start

5. Use the folder
where you already
have all your files

6. Remember that ALL your files and folders will
be inside this folder

7. Now the files
Start with the main page/overview
File->New-> blank HTML (other options available)
First thing you might want to do not to freak out: hide
the code and select “design”
Now we are going to format the page layout

8. Appearance
Be a little conservative with colors (avoid RED to be safe).
Remember that, like with PPT presentations, colors get distorted
depending on the computer/screen/projector.
Remember your layout and do the same with your other pages
(unless you want different backgrounds for different pages, which is a
little 90’s  )

9. Explore What You Can Do
Give a “real name” to every page (so it does not say “untitled
document”). This name is different from the file name and can be a
whole sentence. Make it descriptive enough. It will appear on the
browser’s header.
Write some text
Play with the size (heading1, heading2…)
Play with the right click and discover things you can do
Play with the menu on top
Think of the links you are going to have in that page and write the
name (not link yet)

10. Insert a picture
Make sure the picture is
already in your “portfolio
folder”)
Insert -> Image -> Choose
the picture
Make sure you are linking
to a picture in your folder
by looking at the URL box
Relative to: document

11. Save, Save, Save
Save this page as “index.html”
Open a new one. For example, “teaching
philosophy.html”
Play with it and save it

12. Links
Open again the index page
Select the text that you want to link to the
teaching philosophy and right click
“Make Link”
Choose “teaching philosophy.html”
Do the same with the pdfs you have
Save, save, save
Open your teaching philosophy and link it
back to the index page
Keep on playing

13. At this time…
You should see your
files and folders on the
right corner of the
screen. You can open
the files directly from
there instead of using
the Open command

14. Check
You can preview from inside Dreamweaver:
This is where you make sure that all links are working
It is never too much to take your USB to another computer that does
not have Dreamweaver and check your files by double clicking on the
“index” file and seeing if all the links work in a regular browser like
Firefox or Internet Explorer.

15. Important
Check, check, check
Open your files in other computerS to make sure that
all the links, pictures and files are still opening
Check, check, check
We are in the 21st Century: avoid an overflow of
information and colors and be simple and elegant
Uh, and check 

16. All this info in my webpage (that I proudly created with
Dreamweaver):
http://lamar.colostate.edu/~mcorrea/teaching/workshop
s.html