Portfolio Design: Publishing Your Portfolio
Publishing Checklist
Before we begin the process of posting your portfolio on the web, we need to make sure you check a few things first.
You've probably heard us say this over and over again, go through your U drive! This is the part where we see how well you followed our directions!
File Paths and Network Drives
An Explanation on File Paths
Dreamweaver essentially "maps" pages, images, and CSS documents by following "breadcrumbs." If a breadcrumb gets eaten by a hungry bear looking for picnic baskets, then Dreamweaver essentially doesn't know how to get home.
Generally speaking, broken images and links are the result of moving or renaming the original file without re-mapping the link. Most of you are already familiar with this concept.
An Explanation on Data Storage
Most of you are familiar with the memory storage structure on our computers. The U drive is your unique location for saving work. There is also a P drive which houses shared files that you have limited access to. The U and the P drives are called Network Drives, and they find their home at the district office. You access these drives via the network, so when the network is down, you don't have access to your files. A minor inconvenience at best, but nonetheless, extremely useful.
In addition to the network drives, each computer in the lab has it's own storage in the form of the C drive. Most of you are familiar with this because you own a computer at home. Typically, this is the place where you save all your work, so most of you are used to saving documents and images through the folders "My Documents" and "My Pictures." The default storage location for saving items in these folders is the C drive. However, in the Tech Lab, the default location for saving items in these folders is your U drive.
So what's the big deal?
For most of your applications, you won't experience any issues saving through these folders. However, this is not the case with Dreamweaver.
Recall that Dreamweaver "maps" files such as images and other HTML documents. Dreamweaver treats the U drive differently than "My Documents". When you map a file through "My Documents", Dreamweaver reads this as a different file path than if you mapped a file through your U drive. So even though you may be be able to see your page working properly on your computer, the same won't be said when you publish your portfolio to the P drive.
Check Your File Management
We've stressed again and again that you need to place ALL files associated with your portfolio in your portfolio folder.
If you haven't organized your files in this way, you will end up with big problems when you post your portfolio to the P drive. It's your responsiblity to make sure all you files are organized in your portfolio folder.
Moving Files
If you've stored files in locations other than your portfolio, and those files are linked somewhere in your portfolio, then do the following:
- Locate the file in your U drive
- If you would like to have a copy of the file in both locations, copy the file and paste it in your U drive
- If not, then move the file to the portfolio folder
It's important to note, that if you move a file that is linked in your portfolio, you will create a broken link, so you will need to remap the file. The steps to remap a file are outlined below.
Check Your File Paths
I know the above seemed like a lengthly explanation, but it's important you understand how Dreamweaver maps files because when you "put over" your site into the P drive, it will make a huge difference in how your site displays on the web.
Check File Paths for Links
If you have any links to files with something that looks like this: <a href="file:///U|/education_exploration.html">, you will, without a doubt, have a broken link when it's published to the web.
You want all your links to look something like this: <a href="images/senior_pic.jpg"> or <a href="education_exploration">
Note the difference between the two file paths. The first one occurs if you go through "My Documents" and is mapped to the file specific to your computer.
If you have any file paths for links like the first one above, you will need to change this before you continue to the next step.
- Click the text of a link you want to check
- In the Properties Inspector, check the file path in the link box
- If the file path is in question, re-link the file by using the point to file or browse for file buttons
Check File Paths for Images
If any of your images are broken, or you think you may have inserted an image from "My Documents", then do the following:
- Click on the image
- In the Properties Inspector, check the file path of the image in the src box
- Then, click the browse for file icon and navigate to the image – Make sure you select your U drive from the drop down menu at the top this time!
Pre-Publish Checklist
The checklist below is for your personal use to ensure your portfolio receives the best grade possible
___ Are all of the graphics used (including backgrounds) in your portfolio saved in the images folder inside your lastname_firstname_portfolio folder?
___ Are your web pages pointing to the graphics in the images folder inside your firstname_lastinitial_portfolio folder instead of a folder someplace else?
___ Have you created and linked a stylesheet to all your pages?
___ Have you defined your site according to the directions (Post to Web)?
___ Have you linked all of your pages and do they all work?
___ Are your pages balanced with even spacing?
___ Does the color scheme compliment the design?
___ Is the theme related to educational or career interests?
___ Does your home page have your goals listed?
___ Do your career and education pages include images?
___ Have you run spell check (Commands>Check Spelling) on all pages?
___ Does your career research include the necessary components
___ Have you put in a title for each of your pages?
___ Are all your pages neat and "publishable?"
Next Steps
In the next exercise, you will "put" your portfolio over to the web server
