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

Graphic Design Exercises
Dreamweaver: Personal Process Page (Illustration)

Objective

To learn basic HTML and CSS skills by building a personal process page.

Discussion

The best way to learn HTML and CSS is with Dreamweaver's code view. By observing how Dreamweaver writes code for you behind the scenes one can learn coding by example.

Procedure

Overview: Tell Dreamweaver the location of your site. Add art to an exisitng HTML file. Style content using CSS. Publish to server. Note: replace bold with personalized info.

Setting up your content

  1. download starter files (location: faa999/gds273)
  2. launch Dreamweaver
  3. site > new site: site name=gds273;
    (define local root folder: location=faa999/gds273/html)
  4. open "index.html"
  5. view > code and design
  6. change "jane smith" to your name (all occurances)
  7. select <body>, arrow left
  8. insert > image "exercise_jpgs/e1-cat.jpg" (id="portrait")

Adding CSS

  1. window > CSS designer: add selectors (source=define in page): 
    • #content: layout: position=absolute, top=20px, left=10% 
    • #content: text: font-family=Verdana, font-size=12px, line-height=18px 
    • h1: text: Georgia, 24/30, weight=normal
    • #portrait: layout: margin-top=60px, margin-right=10%, float=right
    • body: layout: min-width=1000px, margins=0 (all)
    • a: text: color=??, decoration=none
    • a:hover: text: decoration=underline
    • .small: text: font-size=9px, line-height=14
  2. select <p>: apply style ".small"
  3. note CSS code formatting in header
  4. file > preview in browser (opt+F12 and cmd+F12)

Finishing the file

  1. link "Research", "Brief", "Concept sketch 1" to sample images
    (use target=_blank)
  2. add email link to your name (i.e. "mailto:jsmith@gmail.com")
  3. scale & resample portrait (if needed)
  4. replace "e1-cat.jpg" with your own self-portrait as an animal
  5. file > preview in browser (opt+F12 and cmd+F12), test links

Grading

  1. publish page (see separate lesson)
  2. link your published projects and assignments to this page

BACK TO TOP
Last updated: 11/24/17 ■ Webmaster: Paul Young