Graphic Design Exercises

Integrated: Portfolio Web Site Template

 

Objective

To learn to web site production techniques by example. To learn layout, slicing and CSS techniques in Illustrator, Photoshop and Dreamweaver by recreating this web site.

 

Discussion

This flexible 3-column format design is extremely versatile and can be adapted to just about any design. Simply replace the content, swap out the color scheme and you've got a custom portfolio web site.

 

Procedure

slicing and cropping

  1. download "reset.css" and "font.css" from the resources page
  2. download starter files, examine site map, Illustrator files
  3. reveal all layers, file > export as PSD files (72 DPI, layers=yes, anti-aliasing=yes)
  4. duplicate "resume.psd", rename "bullets.psd"
  5. open "bullets.psd" reveal square and triangle layers
  6. draw guides and slice per examples
  7. rename slices "square", "triangleLeft", "triangleRight"
    (slice select tool: double-click on slice)
  8. hide background layer
  9. file > save for web: select user slices, GIF 16 no dither, matte=black; images only, all user slices
  10. open "resume.psd" draw guides, crop per example
  11. slice tool: create slices from guides (click button in options bar)
  12. hide background layer
  13. file > save for web: select all slices, GIF 16 no dither, matte=black; "resume.html", HTML & images, all slices
  14. repeat with "index.html"
  15. move exported files into new folder "html"

coding the front page

  1. download "CSS reset" starter files
  2. move files to "html" folder
  3. launch Dreamweaver
  4. copy <table#Table_01> from "index_temp.html" to "index.html"
  5. window > css: link "reset.css", "font.css"
  6. add new CSS rule "#Table_01" (new file "layout.css"):
    box: width=814, margin-left/right=auto
  7. select first red box, link to "01.html"
  8. window > behaviors: add behavior "swap image" (+)
  9. set source to "45x45/01.jpg"
  10. file > preview in browser (opt+F12)
  11. repeat with other red boxes

finishing the HTML file

  1. view > head content
  2. add title "Jane Smith Graphic Designer"
  3. insert > html > head tags > description
  4. insert > head > key words
  5. window > snippets: meta > no cache (insert in code view)
  6. add alt tags
  7. commands > clean up HTML

coding the master page

  1. open "index.html", save as "master.html"
  2. select <table#Table_01>, delete
  3. insert <div#font>
  4. insert 3 new DIVs (inside <div#font>):
    rightWrapper, leftWrapper, middleWrapper
  5. insert 3 new DIVs (inside each of the above DIVs):
    rightContent, leftContent, middleContent
  6. add text from "text.rtf" into above DIVs
  7. insert logo into <div#leftContent>, link to "index.html"
  8. apply <h1>, <h2>, <h3> tags
  9. window > CSS: modify CSS styles to "font.css": 
    • #font: color=light gray
    • <h1>: type size=15; box margin-top=-3px, padding-bottom=1em
  10. window > CSS: add CSS styles to "font.css" (+): 
    • #font: color=light gray
    • <h2>: type size=11; box padding-top=2em, padding-bottom=1em
    • <h3>: type=Georgia italic (not bold), 22/26, margin-top=-3px
    • <a>: bold, color=#999, text-decoration=none
    • <a:hover>: color=red
  11. window > CSS: add CSS styles to "layout.css" (+): 
    • body: background=black, min-width=1050px
    • #font: box: width=95%, margin left/right=auto
    • #rightWrapper: box: width=25%, float=right
    • #leftWrapper: box: width=25%, float=left
    • #middleWrapper: box: width=50%, margin left/right=auto
    • #rightContent: box: width=170px, margin left/right=auto
    • #leftContent: box: width=170px, margin left/right=auto
    • #middleContent: box: width=400px, margin left/right=auto
    • .center: block: text align=center
  12. file > preview in browser (opt+F12)

coding the navigation

  1. insert > table below logo in <div#leftContent>: 2 col x 6 rows
  2. add navigation text from "text.rtf"
  3. add square bullet
  4. add spacer in row 6, scale to stretch 2nd column
  5. link to appropriate HTML files (see site map)
  6. window > CSS: add CSS styles to "layout.css" (+): 
    • .rule: type weight=bold; box padding-top=7px, padding-bottom=8px; border-top: style=dash, width=1px, color=dark gray
    • #leftContent td img: box margin-top=12px
    • #leftContent table: box margin-left=27px
  7. apply ".rule" to select <td> in navigation table
  8. file > preview in browser (opt+F12)

coding the vertical rules

  1. window > CSS: add CSS styles to "layout.css" (+): 
    • .ruleVertical: position=fixed, box width=1px
    border-left: solid, thin, color=#333;
    • html, body, .ruleVertical: box height=100%
    • #top: background=black; box height=80px, width=100%; position=absolute, z-index=9
    • #topRed: background=red; box height=20px
  2. modify #leftContent, #middleContent, #rightContent:
    • box padding-top=80px
  3. insert <div.verticalRule> inside #middleWrapper, #rightWrapper
  4. insert <div#top> after <body> (before <div#font>)
  5. insert <div#topRed> inside <div#top>
  6. file > preview in browser (opt+F12)

finishing the web site

  1. duplicate "master.html" to create other pages
  2. modify pages as needed
  3. test thoroughly
  4. publish your finished site as a link from your personal process page for grading