How to Build a Portfolio With Dreamweaver

An online portfolio is often used by web designers, graphic artists or photographers to advertise their work to potential clients. With the Adobe Dreamweaver website editing tool and a companion graphics editing tool, you can easily create a portfolio on the web with thumbnail images of your work a viewer can click to see larger versions and more detailed information or to visit a live website you designed.

Things You'll Need

• Web graphics editing software (Adobe Fireworks recommended)
• Adobe Dreamweaver
• Images for your portfolio

Instructions

Create Image Thumbnails

1. 

   Open your graphics editing tool and then open one of the images for your portfolio.

2. Click the image and resize it to a thumbnail approximately 150 to 200 pixels wide. In Fireworks, the software used for the example shown here, the Image Size command is found under Modify menu-->Canvas.

3. 

   Export the thumbnail as a new JPG file with a name that indicates it's the thumbnail. In Fireworks, to export use File menu-->Image Preview and select JPG as the file format.

4. Repeat the above steps to create thumbnails of all the images for your portfolio.

Create Web Page for Thumbnails

1. 

   Open Dreamweaver and click "Create New" from the main menu to start a new HTML document.

2. Type some text to describe what sort of portfolio this is and then press the return key.

3. 

   Click the Insert Image button in the top toolbar to add a thumbnail to the page.

4. 

   Click on the image once to select it and choose Middle alignment from the Properties Inspector so that the text you type next to the thumbnail will align with the middle of the image.

5. Type some text next to the thumbnail to describe what it is.

6. 

   Type a couple carriage returns and insert another thumbnail and descriptive text. Repeat for all your thumbnails.

7. Click the File menu and select Save to save your progress so far.

Create Portfolio Detail Pages

1. Click the File menu, then New to start a new HTML document. This will be the page that comes up when someone clicks your first thumbnail.

2. Type some text at the top of the page to indicate what design this page is detailing.

3. Click the Insert Image button in the toolbar and add a larger or full-size image you want to show customers.

4. Click the File menu and select Save to save this new file.

5. Repeat these steps and create detail pages for all the items in your portfolio.

Link Thumbnails to Details Pages

1. Double-click the page with the thumbnails in your Local Site file list on the right side of the screen to open it if it's not still open on the screen.

2. Click once on a thumbnail to select it.

3. 

   Insert a link from that thumbnail to the details page associated with it by clicking the folder icon to the right of the "Link" box in the Properties Inspector and choosing the file from the dialog box, OR by using the "Point to File" cross-hairs icon next to the Link box and dragging the pointer to the file in your Local Site file list on the right.

4. Repeat the above steps to add links to all your thumbnails.

5. Click the File menu and select Save to save your changes.

6. Upload the portfolio files to your web server using the blue "up" arrow in the Local Site files list on the right and then test the pages in your web browser.

Tips & Warnings

• If your portfolio includes thumbnails of websites you've created and those websites are live, you could add a link to the websites to show them off instead of creating a separate details page about the design.

• To stop people downloading your full-size images from your portfolio, you may want to add a watermark to them with your graphics-editing tool. A line of text with a low opacity across the main portion of the image will work.

Resources

• Creating an Online Portfolio
• Creating the Perfect Portfolio
• Adobe Dreamweaver Home Page