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

Interactive Design Exercises
Dreamweaver: Personal Process Page (for GDS 220 - Part A)

Objective

To review basic HTML skills by building a Personal Process Page similar to this example. This page will be styled later to look like this example.

Discussion

Keeping a good record of your design process is a good idea for many reasons. At the very least, it forces you to keep your files organized. Clients also expect you to manage the project well and one way to do it is by recording each step of the process. Last but not least, one can learn from observing one's own process and then improving on it in future projects (see an example of a real-world Process Page).

As HTML evolves, semantic markup like <section> is preferred over non-descriptive tags like <div>. Semantic markup improves search engine efficiency and might even get your website a higher ranking. In this exercise, we will be using semantic markup (more info).

File management is critical in web design and development. You will be developing multiple versions of multiple sites in this class. Each version MUST have a unique root folder that hold ALL the files needed to publish the site. It is highly recommended that you use the downloaded folder structor for this entire semester and follow the suggested naming conventions.

Tip: When revising web sites, duplicate the web site's root folder and give it a new name (i.e. "p1_final2"). Be sure all the files required for the web site are inside the root folder (do NOT link to local files outside of this folder).

Procedure

Overview: Add semantic markup to existing HTML document. Link to sample files provided. Publish files. Note: replace bold with personalized info.

Prepping for the exercise

  1. download starter files (location: faa999/gds220)
  2. launch Dreamweaver
  3. site > new site: site name=gds220-admin;
    local site folder=faa999/gds220/html); export STE file
  4. open "_process/index.html"
  5. view > code and design (note formatting)
  6. change "jane smith" to your name (find in source code, replace all)
  7. link to your preferred email (i.e. mailto:jsmith@gmail.com)
  8. optional: encrypt your email address

Adding semantic tags

  1. select breadcrumb navigation
  2. insert > navigation (wraparound)
  3. repeat with <section> and <footer>
  4. file > preview in browser (opt+F12 and cmd+F12)

Adding links

  1. open "briefs/p1_brief.html"
  2. select <body>
  3. insert > div (wraparound): id=wrapper
  4. window > CSS designer: add selector (source=define in page): 
    • #wrapper: layout: width=80%, min-width=320px, max-width=500px, margin-left/right: auto; font-family: Verdana, Helvetica, sans-serif; font-size: 0.9em; line-height: 1.8em
  5. link p1 "brief" to "briefs/p1_brief.html" (target=_blank)
  6. insert other appropriate links (target=_blank)
  7. file > preview in browser (opt+F12 and cmd+F12), test links

Grading

  1. update "gds220-admin" site definition with server info (see separate instructions)
  2. export the "gds220-admin" site definition
  3. publish site

BACK TO TOP
Last updated: 3/2/17 ■ Webmaster: Paul Young