Archived copy for reference only
 

 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Dreamweaver: Portfolio Web Site (Cargo Collective)

(Archived from 2019)

Objective

To learn to web development techniques by example. To learn CSS layout techniques by recreating this web site.

Discussion

Cargo Collective offers free starter portfolio web sites "by invitation." Cargo web portfolios are hosted in the cloud and come with many pre-designed templates that can be modified with custom CSS. But to use a custom URL (i.e. "yourname.com"), you have to upgrade your account for $99 per year (plus your domain registration fee, about $10 per year or less via namecheap.com).

Benefits of using Cargo include access to a robust content management system (CMS), access to well-designed templates and free cloud storage with no need to contract with a web hosting service.

Disadvantages of using Cargo include cost ($76 vs. $19 per year) and limited customization of templates.

Tip: If you customize any CSS on Cargo, save a copy of the code before you choose another template design. If you revert back to the original template later, all your customizations will be lost unless you have a back-up of your customized code.

Procedure

Prepping for the exercise

  1. download starter files
  2. examine downloaded files
  3. examine sample web site
  4. browse to cargocollective.com
  5. login as student (pw = •••••••)
  6. go to admin (upper right corner)
  7. read support FAQs

Setting up the web site

  1. go to admin (click upper right corner or SHIFT+A)
  2. go to settings > display options
    • upload header and favicon
    • thumbnail = 300x200
    • turn on the following options:
     
     
     
     
     
    • modify slide show text nav: "previous | next"
  3. go to settings > account details
    • add tags and SEO keywords

Setting up the content

  1. go to admin > project list (click upper right corner or SHIFT+A)
  2. turn off "example project"
  3. add new page "Contact"
  4. upload new image "paul.jpg"
  5. add content from "content.html" (code view)
  6. edit "About...": add content from "about.html" (code view), shorten title
  7. add new projects (turn on):
    • New
    • Logos
    • Illustrations
    • Print
    • Web
    • Motion
  8. edit "New" project: upload images from "630x450/new" folder, make slide show, add captions from "630x450/new/captions.html" (code view)
  9. upload thumb image from "300x200" folder
  10. repeat with other projects

Customizing the CSS

  1. open "cargo.css"
  2. go to inspector (RMB upper right corner or SHIFT+I)
  3. click "New": replace with appropriate CSS from "cargo.css"
  4. repeat with "About", thumbnail links, etc (see comments for tips)

Grading

  1. generate an invite (admin > settings > membership invites)
  2. create your own cargo account and upload your portfolio images
  3. create a link from your process page to your published cargo web site

BACK TO TOP
Last updated: 5/8/21