Portfolio: Content Guidelines and Design Tutorials

Building a Professional Portfolio

As a junior and senior in the school of BIS, you will create a professional portfolio using Adobe Dreamweaver. Many of you have at least some experience using Dreamweaver – worklinks for example – but some of you probably have never used Dreamweaver beyond this application. It's our belief that learning how to use industry-standard software as a tool to complete a project is essential for student learning and will give students an edge in the job market after high school. Let's face it, technology propels our world forward, and is an integral part of our lives and the way we do business – without the skills and tools to keep pace, you might just find yourself left in the dust of the past.

As part of the development of your Professional Portfolio, you will explore a potential career you are interested in. Furthermore, you will research a college or university that you would like to attend so you may secure your dream job. The theme of your portfolio will reflect your collegiate or career interests.

We've divided the steps and guidelines in two sections: Content and Design. You must complete the required content modules before moving on to the design modules. Completing the content modules first will make it easier for you to complete the design.

Student Portfolio Examples

You can explore previous students' portfolios by visiting The Student Portfolio Page. You can see the various changes and improvements over the last few years. We constantly revise and update the requirements each year, building upon the successes and failures of content requirements and design.

Design Modules

Getting Started
  1. File Management
  2. Defining the Site
Setting Up Page Properties
  1. Introducing Cascading Stylesheets
  2. Setting Default Page Properties
Building the Shell
  1. Introducing Tags
  2. Inserting the Wrapper <div> Tag
  3. Inserting the Header <div> Tag
  4. Inserting the Navbar <div> Tag
  5. Inserting the Content <div> Tag
  6. Inserting the Footer <div> Tag
  7. Formatting the Footer
Creating a List-Style Navigation Menu
  1. Create the Navigation List
  2. Inserting Link Placeholders
  3. Styling the Navigation List
  4. Styling the Navigation Links
Creating New Pages
  1. Create the Resume page
  2. Create the Education Research page
  3. Create the Career Exploration page
  4. Create the Showcase page
Linking the Navigation Menu
  1. Linking the Navbar in All Pages
Inserting and Styling Content


  1. Designing and Inserting the Banner


  1. Inserting Content for the Resume Page
  2. Formatting Content for the Resume Page
  3. Styling Content for the Resume Page


  1. Inserting Resume Profile for the Home Page
  2. Creating and Inserting a Graphic for the Home Page
  3. Inserting Goals <div> Tag for the Home Page

Educational Research

  1. Inserting the About Content for the Education Research Page
  2. Inserting the Academics Content for the Education Research Page
  3. Inserting the Tution and Living Expenses Content for the Education Research Page
  4. Inserting Second Years Required Content for the Education Research Page

Career Exploration

  1. Inserting Career Intro Writing (First Years)
  2. Inserting Career Expert Letter (Second Years)
  3. Inserting Career Exploration Dream Job (both)


  1. Preparing Documents for the Showcase Page
  2. Inserting Conetent for the Showcase Page
Final Details
  1. Favicon
  2. Posting Portfolio Checklist
  3. Publishing Your Portfolio