Parkland College > CSIT Dept > Digital Media  > CIS 152 >
Calendar > Lesson 9


CIS 152 WEB DESIGN I
Lesson 9: CSS and JavaScript in Dreamweaver
Instructor: Paul Young

 

 
 

Objectives

 

  

To become more comfortable in the Dreamweaver environment by constructing a complete web site similar to this site.

 

 
 

Discussion

 

  

Just as in print, visually appealing web pages involve a balanced layout and clean typography. In this lesson, we'll pay particular attention to these issues.

Tables were not originally design for layouts, but many layout "tricks" in web design still require the use of tables. In this lesson, we'll make use of tables to hold pixel elements.

Good web typography requires the use of Cascading Style Sheets (CSS). Using CSS, designers can control line spacing and precise font sizes with pixels. CSS can also remove the ugly underline for links that is the default for HTML. For more information on web typography, read this excellent article from Webmonkey.

 

 
 

Procedure

 

  

Overview: Import optimized pixel elements into Dreamweaver, add tables and layers. Create a CSS style sheet. Add JavaScript behaviors. Make and apply template style. Test, publish to server.

Creating the home page

  1. copy files from "cis152/upload/lesson6_html" to "lesson9_html"
  2. launch Dreamweaver
  3. edit > preferences: category=css styles: do not open css files when modified
  4. define a new site (site > new site): name=lesson9,
    local root folder=cis152/upload/lesson9_html
  5. open "index.html"
  6. select all content, DELETE
  7. insert > layout objects > layer
  8. insert > table inside layer (4 rows, 1 col)
  9. select all cells: align horiz=center
  10. insert "spacer.gif" in row 2 (w=100, h=50)
  11. insert appropriate images in other rows
  12. select table: cell padding=0, cell spacing=0
  13. select layer: T=50%, L=50%, others=blank
  14. file > preview in browser (F12)
  15. window > css: add new class ".center" (define in "dm.css")
  16. category=box: margin left=-512, margin top=??
  17. apply ".center" class to layer
  18. add hotspots, link each hot spot to an external site (target=_blank)
  19. window > css: add tag "body" (define in "dm.css")
  20. category=box: margin=0 (all); category=background: color=black
  21. file > preview in browser (F12)

Finishing the HTML file

  1. insert > html > head tags > description
  2. insert > head > key words
  3. window > snippets: meta > no cache (insert in code view)
  4. add alt tags
  5. commands > clean up HTML

Creating the inside pages

  1. open "curriculum.html"
  2. modify > page properties: tracing image="tracing.jpg" (50% opacity)
  3. select all text, draw new layer "text", paste text inside layer
  4. adjust layer position to match tracing image, L=20%, W=50%, T=??, H=blank
  5. file > preview in browser (F12)
  6. open "links.html", copy table, close
  7. draw new layer "links", paste table inside layer
  8. select "links" layer: W=blank, H=blank, reposition layer
  9. insert > image "upperRight.jpg", align=right
  10. drag named anchor "top" to top of file
  11. modify > page properties: category=tracing image: "tracing.jpg" opacity=0%

Making CSS styles

  1. window > css: link "dm.css"
  2. new CSS style: redefine tag <p>: font=verdana, size=11, line height=18, color=??
  3. new CSS style: redefine tag <a>: decoration=none, color=??
  4. new CSS style: advanced "a:hover": decoration=underline
  5. new CSS style: redefine tag <ul>: category=list: type=square
  6. open "dm.css", add <li> and <td> tags to <p> tag
  7. duplicate <p> tag, rename <h3>: type weight=bold, color=??
  8. duplicate <h3> tag, rename <h2>: type case=uppercase; category=border: bottom=1px solid, color=??; category=box: bottom padding=9, bottom margin=18
  9. duplicate <h2> tag, rename <h1>: font size=14; category=block: letterspacing=.35em
  10. new CSS style: class ".small": type size=9
  11. edit text, apply styles
  12. save, file > preview in browser (F12)
  13. finish the HTML file (see above)

Making JavaScript Rollovers

  1. select "link_01.jpg", add link
  2. window > behaviors: add "swap image" behavior,
    choose "link-over_01.jpg"
  3. repeat with other link files
  4. repeat with links in "index.html"

Making a template

  1. open "curriculum.html"
  2. select <div> "text"
  3. insert > template objects > editable region "text"
  4. select <div> "links"
  5. insert > template objects > editable region "links"
  6. file > save as template "inside.dwt", close
  7. file > new: choose "inside.dwt" (template tab)
  8. file > save as "curriculum.html" (overwrite)
  9. select "link_02.jpg"
  10. swap "link_02.jpg" with "link-hit_02.jpg" (double-click)
  11. remove link, remove javascript behavior
  12. save

Applying template pages

  1. open "program.html"
  2. select all content, cut to clipboard
  3. modify > templates > apply template to page: "inside.dwt"
  4. select template text, paste
  5. apply CSS class "small"
  6. select "link_01.jpg"
  7. swap "link_01.jpg" with "link-hit_01.jpg" (double-click)
  8. remove link, remove javascript behavior
  9. save, repeat with other pages

Making gallery pages

  1. duplicate "dm.css", rename "gallery.css"
  2. open "1.html", attach "gallery.css"
  3. edit CSS for <body>: category=box: margin top=25px
  4. insert > layout objects > div tag (centered)
  5. move art into <div> tag
  6. repeat with other gallery pages
  7. grading: publish and make links from your personal web site to this lesson

 

 

BACK TO TOP

______________________________

Last updated: 11/4/06 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts