How to Code a Static Page for Portfolio in Dreamweaver

Putting your profile on a static Web page increases its accessibility.

Creating an online portfolio of your work can be a good way to attract a possible employer's attention. You can also very easily share an online portfolio over email or by printing it on business cards. A static Web page is a Web page that serves the same content to every person who visits it. A basic static Web page is an HTML document. Coding a static Web page with your portfolio using the Dreamweaver WYWIWYG HTML editor can be done by using the Dreamweaver image, text and link tools to build an attractive overview of your past work.

Instructions

1. Decide whether you are going to include graphics in your portfolio. If you are, select the graphics you are going to use and resize them all to the desired size using a photo editor or simple photo resizer. If possible, make them all the same size and include a graphic with each portfolio item to keep your portfolio looking neat and organized.

2. Create a new HTML file or open the HTML file for the page you would like to add your portfolio.

3. Click at the point in the HTML code where you would like to code your first portfolio item.

4. Insert a graphic for the portfolio item by clicking the "Insert" option in the program menu at the top of the window. Click on the "Image" option from the drop-down menu. Locate the image on your computer in the popup window and double-click on it to insert it into the page.

5. Click to the right of the image to move the cursor. Click "Text" in the program menu, move your mouse over the "Style" option and click on the "Bold" option select it and help the text of the portfolio title stand out. Type the title of the portfolio item. Click "Text" in the program menu, mouse over "Style" and click the "Bold" option again to remove the bold style.

6. Press "Enter" to insert a line break and type the description of this portfolio item. Keep the description concise and informative, showcasing your work on this item.

7. Insert a hyperlink if you have a separate website or page about the portfolio item. Press "Enter" at the end of the portfolio item description to create a line break. Click on "Insert" in the program menu and select the "Hyperlink" option.
   In the pop-up window, move the cursor to the "Text" field. Type the text you would like to appear as linked to the website or page. For example, "Website" or "Link to Project Website" would be appropriate link text.
   Move the cursor to the "Link" field and type in the URL of the website or Web page you want to link to.
   Click on the drop-down menu beside the "Target" option and select "Blank" to have the link open in a new tab.
   Click "OK" to insert the link at the bottom of the portfolio item.

8. Press the "Enter" key on your keyboard three times to create a space between the current portfolio item and the next item.

9. Repeat adding an image, title, description and link for each of the items you would like to list on your portfolio.

10. Click "File" and select the "Save" option to save your newly built portfolio web page.

References

• Careerealism.com: 5 Benefits of Creating an Online Portfolio
• Adobe Support: Dreamweaver - Inserting Images
• Adobe Help: Dreamweaver - Add a Link Using the Hyperlink Command
• TheOneStopWebsiteShop.com: Dynamic or Static Web Page