Parkland College > Fine & Applied Arts > Graphic Design | Web Design >
Student L inks > GDS 215 > Exercise #1

 

 

GDS 215 WEB DESIGN III
Exercise #1: Setting Up Your Projects Page
Instructor: Paul Young

 

Objective

To set up a projects page in preparation of publishing your class work. To learn about accessiblity issues by recreating this web page.

Download starter files

 

Description

As a web designer, you will be publishing your work on the Internet. Parkland has provided free server space for students of this class to use. This is a temporary arrangement (your files will be deleted after the end of this semester). In this class, I will be grading your assignments based on what is published on your projects page. For this reason, test your page thoroughly and make sure all of your links work. Your grade depends on it.

 

Procedure

prepping for the exercise

  1. move download files to "documents"
  2. change "jsmith" to your name
  3. open "projects.doc" in Word; file > save as web page "temp-projects.html" (in "upload")
  4. open "coffee.psd" and "piano.psd" in photoshop; optimize each image; save in new folder "source" inside "upload"
  5. inspect other downloaded files (compare with this screen shot)
  6. launch dreamweaver
  7. site > new site "jane's projects"
  8. local root folder: documents > gds215-jsmith > upload-jane (ok to create site cache)

setting up your projects page

  1. ctrl-click local root folder: new file "index.html"; open new file
  2. view > head content
  3. make window size 760 x 420 (800 x 600 maximized)
  4. modify > page properties: choose tracing image "tracing.gif" (25% opacity); make margins=0; bg=white
  5. insert > named anchor "top"
  6. view > invisible elements (cmd + shift + I)

creating the page structure

  1. draw layer to contain logo (L=0, T=0, W=98%)
  2. inside layer: insert > table (1 row, 3 cols, w=98%, cell padding=5)
  3. cell properties: vertical=top (3x)
  4. in col 1: insert > image "webdesign.gif"
  5. in col 2: insert > image "line.gif"
  6. in col 3: insert > image placeholder (20x20)
  7. make col 1 width=100%
  8. make table cell padding=0
  9. draw layer to contain main text (L=20, T=150, W=600)
  10. inside layer: insert > table (row=1, col=3, width=600 px, others=0)
  11. cell properties: vertical=top (3x)
  12. drag columns until they match tracing image
  13. open "temp-projects.html", select all, make font "default"
  14. commands > clean up word HTML
  15. copy and paste text into "index.html" (after table)
  16. cut and paste appropriate text into 1st table (add RETURNs or line breaks as needed; format lists as needed)

laying out the page

  1. duplicate 1st table: select table, copy (cmd C), arrow right, paste (cmd V)
  2. cut and paste appropriate text into 2nd table
  3. continue until all text is inserted into tables
  4. change "jane smith" to your name (all occurrences)

adding links

  1. browse to the sample page; copy and paste links into appropriate text (ctrl-click > copy link to clipboard)
  2. browse to http://www.w3.org/WAI/; copy and paste URL as link to "site 1" (target=_blank)
  3. select "back to top", add link "#top"
  4. add email link to your name (ie. "mailto:jsmith@hotmail.com")
  5. file > preview in browser (F12 and Cmd+F12), test links

adding css styles

  1. panel: css styles: new css style
  2. redefine HTML tag "p": font = Georgia, size = 85%, line height = 125%
  3. panel: css styles: edit css style
  4. duplicate "p", redefine HTML tag "ol", "ul" , "li"
  5. add new custom style ".small": font = Verdana, size = 60%, line height = 120%
  6. redefine HTML tag "a", color = #9933CC, no decoration
  7. define CSS selector "a:hover", decoration = underline
  8. apply "small" style (select <p> first)
  9. file > preview in browser (F12 and Cmd+F12)

finishing the HTML file

  1. change title to something like "Jane Smith's Projects Page"
  2. insert > head > keywords
  3. insert > head > description
  4. add alt tags
  5. commands > add/remove netscape resize fix
  6. commands > clean up HTML
  7. file > check page > validate markup
  8. file > check page > check accessiblity
  9. test page on a PC

creating a pop-up window

  1. window > site files: new file "piano.html" (ctrl-click "source" folder); move file into "source" folder; open new file
  2. change title to something like "Jane Smith's Sourcefiles"
  3. insert > table (row=1, col=1, width=100%, cell padding=0)
  4. select table, make height=100%
  5. cell properties: horiz=center
  6. insert > image "piano.jpg" (note size)
  7. close, save
  8. window > index.html
  9. select "photography", add link "#"
  10. window > behaviors: open browser window (URL="source/piano.html", width=700, height=500)
  11. file > preview in browser (F12 and Cmd+F12), test links
  12. repeat with "coffee.gif"

connecting to the server for the first time

  1. site > define sites, edit web server info: FTP
  2. host: virtual.parkland.edu
  3. directory: (blank)
  4. login: gds215students
  5. password: ••••••••
  6. connect to remote server (note remote files appear on left)
  7. create a new folder on remote server "jsmith" (ctrl click on root folder)

connecting to your personal directory on the server

  1. site > define sites, edit web server info
  2. host: virtual.parkland.edu (same)
  3. directory: jsmith (note change)
  4. login: gds215students (same)
  5. password: •••••••• (same)
  6. site > synchronize
  7. browse to your "live" projects page with a browser

 

Schedule

See Calendar.

 

 

______________________________

Last updated: 1/14/03 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts

Student
Links