Archived copy for reference only
 

 

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

Interactive Design Exercises
Dreamweaver: Personal Process Page (for GDS 108)

(Archived from 2019)

Objective

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

Discussion

HTML (HyperText Markup Language) is the industry-standard code used to render web pages on the Internet. Understanding HTML structure is an essential skill all designers need to have today as the ability to publish web content becomes ever more important.

CSS (Cascading Style Sheets) define how to display HTML content. The separation of content from style is important as mobile phones and other hand-held devices start accessing web content originally intented for large computer monitors.

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 how to code by example.

Procedure

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

Setting up your HTML page

  1. download starter files (location=faa999/gds108)
  2. launch Dreamweaver
  3. site > new site "gds108-jsmith"
    (define local site folder: location=faa999/gds108/html)
  4. window > files: RMB local site folder > new file "index.html"; open file
  5. view > code and design
  6. insert > image "images/logo.png"; id="logo"
  7. deselect (arrow right)
  8. insert > div: id="content"
  9. copy and paste text from "process.txt" into <div#content>
  10. format text: add <h1>, <ul>
  11. change "jane smith" to your name (2x)
  12. link to sample PDFs (use target=_blank)
  13. link your preferred email address (i.e. mailto:jsmith@stu.parkland.edu)

Adding CSS

  1. window > CSS designer: add source (+): attach existing CSS file "normalize.css"
  2. window > CSS designer: add source (+): define in page
  3. window > CSS designer: add selectors (+): 
    #logo: layout: width=30%, height=auto, min-width=200px, max-width=400px, position=absolute, left=10%
    #content: layout: width=40%, position=absolute, margin-top=130px, margin-left=50%
    html: text: line-height=150%
    h1: text: font-weight=normal, line-height=110%
    a: text: decoration=none, color=??
    a:hover: decoration=underline
  4. note CSS code formatting in header
  5. file > preview in browser (opt+F12 and cmd+F12)

Finishing the HTML file

  1. change title to something like "Jane Smith | GDS 108"
  2. add alt tags

Grading

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

BACK TO TOP
Last updated: 5/7/21