Parkland College > CSIT Dept > Web Technology > CSC 121 >
Calendar > Lesson 10


CSC 121 WEB SITE DESIGN
Lesson 10: Client Web Site (Computer Graphics)
 Instructor: Paul Young

 

 
 

Objectives

 

  

To learn Photoshop's layout tools, Image Ready's slicing tools, and Dreamweavers production tools. To experience the entire web site production process by recreating this 6-page Web site from scratch using client provided text, images and site architecture.

Download starter files
Download PDF site map

 

 
 

Discussion

 

  

In this lesson, we are going to go through the entire production process of creating a professional web site. By making a Photoshop mock-up first, you are working as a visual artist, not a technician. The Photoshop mock-up is also used as a "contract proof" that clients can sign-off on before any time (read "money") is spent on production. The "template" is a second contract check point where clients can sign-off before actual pages are produced. If needed, a text-only site can also be created for approval of the site architecture.

See an example of the entire process

 

 
 

Procedure

 

  

Overview: Create a Photoshop mock-up. Slice and optimize the art. Import art into Dreamweaver. Add content and CSS styles.

making the front page mock-up

  1. move downloaded files to "prep" folder
  2. dupe "browser.psd", rename "cg-front.psd"; open in Photoshop
  3. practice Adobe navigation keyboard shortcuts: space=hand; space+ctrl=zoom in; space+alt+ctrl= zoom out; ctrl+zero=fit in window
  4. file > place "cg-logo.eps", re-size and position, RETURN to accept
  5. delete "O"
  6. make type white (ctrl+shift+DELETE)
  7. fill background layer with black (alt+shift+DELETE)
  8. new layer "lens flare"; fill with black (alt+shift+DELETE)
  9. filter > render > lens flare; layer mode=screen; opacity=80%; adjust size and position
  10. new layer "glow"
  11. paint glow: brush tool, soft edge, light blue, adjust size ( ] or [ )
  12. logo layer: marquee cg logo only, fill with magenta (alt+shift+DELETE), deselect (ctrl+D)
  13. add drop shadow effect: color=light blue, blend mode=normal, distance=0, size=?
  14. layer > add layer mask > reveal all: draw gradient on mask, adjust position
  15. using guides, isolate logo art
  16. new layer "black": paint in edges with soft-edged brush
  17. slice logo art (slice tool)
  18. file > save for web: select slice (slice select tool), jpeg high, interlaced=yes
  19. click ok: "front.htm", images only, selected slices only (location="upload/lesson10")
  20. save, close

making the inside page mock-up

  1. dupe "cg-front.psd", rename "cg-inside.psd", open in Photoshop
  2. hide browser layer, layer > merge visible, rename "logo"
  3. layer > add layer mask > reveal all: draw on mask with soft brush
  4. new layer "white", move to bottom
  5. new layer "gradient", draw horizontal gradient, layer mode=multiply
  6. new layer "lines": draw 2px horizontal lines (single row marquee tool), fill with dark purple
  7. select mask of "logo" layer (ctrl-click on thumbnail)
  8. go to "lines" layer: layer > add layer mask > reveal selection, retouch, adjust position
  9. text tool: type "Program, Curriculum, Job Market, Student Gallery, Contact Us"
  10. spec font: 12/18 arial black, crisp, dark purple
  11. dupe type layer, make type magenta
  12. new layer "triangles": square marquee, fill dark purple, rotate 45 degrees (ctrl+T), delete left half, re-size and position
  13. dupe triangles: alt-shift move; merge down (ctrl E)
  14. copy and paste text from "lorem.txt" (12/14 verdana, anti-alias=no)
  15. save, save as "cg-inside-sliced.psd", jump to ImageReady

slicing the inside page in ImageReady

  1. crop, delete browser layer
  2. clear previous guides, draw new guides, draw slices, name slices
    (i.e "logo", "tile", "top", "right")
  3. select > all slices, optimize: jpeg medium
  4. file > save optimized as "temp.htm" (HTML and images, all slices, location="upload/lesson10")
  5. save, save as "link.psd"
  6. crop link area, draw new guides
  7. slices > create slices from guides
  8. reveal only layers for "normal" state
  9. select > all slices, optimize: GIF 32 no dither, reduce colors
  10. file > save optimized as "links.gif" (images only, all slices, location="upload/lesson10")
  11. reveal layers for "over" state; file > save optimized as "links-over.gif"
  12. reveal "triangle" layer; file > save optimized as "links-hit.gif"
  13. save, close

laying out the template page in Dreamweaver

  1. launch Dreamweaver
  2. site > new site: "lesson10-cg"
  3. local root folder: "csc121/upload/lesson10"
  4. window > site (F8): new file "template.htm"
  5. view > head content
  6. view > invisible elements (ctrl + shift + I)
  7. make window size 760 x 420 (800 x 600 maximized)
  8. insert > named anchor "top"
  9. insert > table (row=1, col=3, cell padding=5, width=100%)
  10. select cells, vertical=top (properties)
  11. file > open "temp.htm"
  12. select table: make cell padding=1 (this reveals table cells)
  13. copy and paste images from "temp.htm" to "template.htm"
  14. in col 3: insert nested table (row=5, col=1, cell padding=5, width=blank)
  15. insert > interactive images > rollover image: "link1.gif", "link1-over.gif", add link per site map; repeat
  16. select col 2 of larger table: make width=100%
  17. select "tile.gif", make width=100%
  18. select both tables, make cell padding=0
  19. delete bottom table
  20. file > preview in browser (F12 and ctrl+F12)
  21. delete "temp.htm"

adding CSS styles

  1. draw layer (L=20%, T=?, W=60%, H=blank)
  2. copy text from text-only site for "curriculum.htm" into layer
  3. window > CSS: attach style sheet "cg.css" (link)
  4. new CSS style: redefine HTML tag <body> (11/18 verdana, box: margins=0)
  5. new CSS style: redefine HTML tag <table> (11/18 verdana)
  6. new CSS style: redefine HTML tag <a> (color=eyedropper, decoration=none)
  7. new CSS style: css selector "a:hover" (decoration=underline)
  8. new CSS style: redefine HTML tag <p> (box: top/bottom margins=0)
  9. new CSS style: redefine HTML tag <ul> (box: top/bottom margins=0)
  10. new CSS style: redefine HTML tag <li> (list: type=square)
  11. new CSS style: ".caps" (case=uppercase; border: bottom border=1px, solid, color=?)
  12. new CSS style: ".indent" (block: text indent=2ems)
  13. new CSS style: ".small" (9/11)
  14. apply CSS custom class styles to select paragraphs
  15. add "BACK TO TOP" (link="#top")
  16. file > preview in browser (F12 and ctrl+F12)

finishing the HTML file

  1. change title to "Parkland College Computer Graphics"
  2. insert > head > keywords
  3. insert > head > description
  4. window > snippets: meta > no cache (insert in code view)
  5. add alt tags
  6. commands > clean up HTML
  7. save, close

making the web site

  1. window > site (F8): dupe "inside.htm" 6x (copy & paste), rename per site map
  2. in each file: copy and paste appropriate text from client files, make appropriate edits for links
  3. file > preview in browser (F12 and ctrl+F12); test links

making the front page

  1. delete contents of <body>
  2. new layer L=50%, T=50%, W=600px, H=400px
  3. insert > image "front.jpg"
  4. below "front.jpg": copy and paste text, color=light gray, edit line breaks
  5. add "ENTER", link to "program.htm"; link picture to same
  6. new CSS style: ".middle": block: text align=center;
    box: margins: T=-200px, L=-300px
  7. apply style to "layer 1"

making gallery pop-up pages

  1. window > site (F8): dupe "index.htm" (copy & paste), rename "1.htm"
  2. delete text, replace image with large student image
  3. insert > table (1 row, 3 col, width=660, cell padd=10)
  4. add text: "<< PREVIOUS", "NEXT >>", "CLOSE WINDOW"
  5. make links (picture should link to next page)
  6. see Javascript code page for "close window" instructions
  7. modify > page properties: bg=black
  8. window > site (F8): dupe "1.htm" 5x (copy & paste), rename per site map
  9. in each file, replace image; modify links
  10. open "gallery.htm"
  11. for each thumbnail image, add behavior "open browser window" (720x560)
  12. site > check links sitewide

publishing the finished exercise

  1. site > open site "p1"
  2. open "links.htm"
  3. link to "../lesson10/index.htm" (target=_blank)
  4. window > site (F8)
  5. RMB select root folder, synchronize

 

 

BACK TO TOP

______________________________

Last updated: 9/26/05 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts