Objective
To become more comfortable in the Dreamweaver
environment by constructing a complete web site similar to this web site.
Also see the Advanced Web Mockup and Slicing for Web Production exercises.
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.
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, reference this excellent master course.
Procedure
Overview: Import optimized pixel elements
into Dreamweaver, add DIVs. Create a CSS style
sheet. Add JavaScript behaviors. Make a master page. Apply master page elements to content. Test, publish to server.
Creating the home page
- download starter files (move files to proper location)
- download CSS reset starter files (move CSS files to proper location)
- launch Dreamweaver
- define a new site (site > new site): name="dm css",
local root folder=faa999/class/html/exercises/dm_css_html
- cloak assets folder (RMB > cloak)
- open "index.html"
- select all content, DELETE
- insert > layout objects > div tag (id=hcenter)
- insert > image: "home-logo.jpg" (inside <div#hcenter>)
- insert > image: "home-pix.jpg" (id=pix)
- open "home-links.html", copy and paste <table> into "index.html"
- window > css: link "reset.css"
- window > css: add new rules (+), define in this document only
• body: background: color=black
• hcenter: box: width=1024px, margin left/right=auto;
block: text-align=center
• #pix: box: margin-top=50px
• .center: block: display=inline table
- select <table>: style=.center
- file > preview in browser (opt+F12 and cmd+F12)
Vertical centering
- select <body>: insert > layout objects > div tag
(wraparound=yes, id=vcenter)
- window > css: add new rules (+), define in this document only
• vcenter:
positioning: absolute, T=50%;
box: margin-top=-??
(half of height), width=100%
Finishing the HTML file
- change title to "Parkland College Digital Media"
- window > snippets: meta > no cache (insert in code view)
- add alt tags
- commands > clean up XHTML
- file > check page...
Creating the inside "master" page
- open "curriculum.html", save as "master.html"
- modify > page properties: tracing image="tracing.jpg" (50% opacity)
- select <body>; insert > layout objects > div tag (id=text)
- place cursor right after <body>
- insert > image "upperRight.jpg" (id=logo)
- place cursor right after <body>
- insert > layout objects > div tag (id=links)
- insert > image "links_01.jpg" (inside <div#links>)
- copy and paste image 4x (total of 5); swap out images (double-click)
- window > css: link "reset.css"
- window > css: add new rules (+), define in new file "layout.css"
• #links: positioning: absolute, W=??, H=blank, T=??, L=??
• #logo: box: float=right
• #text: box: W=50%, margin-left=20%, margin-top=??
• body: min-width=1024px
- add <br> after <img#logo>: class=clearFloat
- modify > page properties: delete tracing image
- file > preview in browser (opt+F12 and cmd+F12)
- window > css: edit <body> (double-click): bg=black
Adding font CSS styles
- window > css: link "font.css"
• delete <h1> rule
• rename #font as #text
- window > css: edit rules (double-click)
• #text: color=??
• <a>: color=??
- window > css: add new rules (+), define in new file "font.css"
• #text td: padding-right=5px
• <table p>: padding-bottom=.5em
• <h3>: color=??; padding-bottom=1em
• ".small": type size=.8em
- duplicate <h3> style, rename <h2>: text transform=uppercase;
box: padding-top=36px, bottom=9px, margin-bottom=27px;
border: bottom=1px solid, color=??;
- duplicate <h2> style, rename <h1>: font size=1.3em;
block: letterspacing=.35em
- edit text, apply styles
- file > preview in browser (opt+F12 and cmd+F12)
- finish the HTML file (see above)
Making JavaScript rollovers
- select "link_01.jpg", add link
- window > behaviors: add "swap image" behavior,
choose "link-over_01.jpg"
- repeat with other link files
- repeat with links in "index.html"
- add hotspot links to logo image (both "master.html" and "index.html")
Making the first inside page
- open "master.html"
- file > save as "curriculum.html" (overwrite)
- select "link_02.jpg"
- swap "link_02.jpg" with "link-hit_02.jpg" (double-click)
- remove link, remove javascript behavior
- save; close window
Applying the master page to other inside pages
- open "program.html"
- select all content, cut to clipboard
- close window
- open "master.html"
- select all text in <div#text>
- paste
- file > save as "program.html" (overwrite)
- select "link_01.jpg"
- swap "link_01.jpg" with "link-hit_01.jpg" (double-click)
- remove link, remove javascript behavior
- apply CSS class "small"
- save; close window
- repeat with other pages
Making gallery pages
- duplicate "layout.css", rename "layoutGallery.css"
- open "1.html", attach "reset.css", "fonts.css", "layoutGallery.css"
- edit "layoutGallery.css" styles:
• <body>: box: margin top=25px; block: text-align=center
- repeat with other gallery pages
Grading
- publish entire site
- make a link from your process page to this assignment
