 |
 |
|
|
|
Parkland
College > CSIT
Dept > Web
Technology > CSC 121 >
Calendar > Lesson 6
CSC 121 WEB SITE DESIGN
Lesson 6: Layers and CSS in Dreamweaver
Instructor: Paul
Young
|
| |
Objectives
|
|
To become more comfortable in the Dreamweaver
environment by building a simple 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 the 100% width table to help balance the graphics on
the page.
Web typography has improved greatly with the introduction of Cascading
Style Sheets (CSS). Using CSS, designers can now 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 graphics into a Dreamweaver
table, add a tiled background. Copy content from Lesson 3 into
layers. Attach a CSS style
sheet. Test, publish to server.
Creating the home page
- launch Dreamweaver
- define a new site (site > manage sites > new site): name=lesson6,
local root folder=jsmith/csc121/upload/lesson6
- create a new file (file > new: basic HTML page): index.htm
- insert > table (1 row, 3 col, width=100%, others=0)
- cell properties: vertical=top (all 3 cells)
- in col 1: insert > image "name.gif", repeat with
other cells
- add hotspots, link each hot spot to a new page (i.e. "blog.htm")
- save, file > preview in browser (F12)
- modify > page properties: eyedropper bg color (continuous
tone)
- select table: bg image="bg.gif"
- in col 3, cell properties: horizontal=right
Finishing the HTML file
- change title to "Jane Smith"
- insert > head > description
- window > snippets: meta > no cache (insert in code view)
- add alt tags
- commands > clean up HTML
Creating the inside pages
- duplicate "index.htm", rename "blog.htm",
open file
- delete "links.gif", "art.gif"
- open Lesson 3's "blog.htm", copy links to clipboard
(ctrl+C)
- paste clipboard text into new layer (crtl+V)
- adjust position of text (add SHIFT+ENTER, insert non-breaking
spaces)
- draw new layer to position links (L:0px, W:100%); align text
right
- save, file > preview in browser (F12)
Making CSS styles
- window > CSS styles (edit styles)
- attach style sheet "style.css", create
- redefine HTML tag <body> (box: margin: top=0, left=0,
right=0, bottom=0)
- redefine HTML tag <p>: font=verdana, size=11, line height=18,
color=?
- new CSS style: redefine HTML tag <h4>: font=verdana,
size=13, line height=18, color=?
- new CSS style: redefine HTML tag <a>: weight=bold, decoration=none,
color=?
- new CSS style: use CSS selector "a:hover": decoration=underline
- redefine HTML tag <li> by duplicating <p> tag
- save, file > preview in browser (F12)
- attach "style.css" to "index.htm"
Creating the rest of the site
- duplicate "blog.htm" to make the other pages
- copy content from Lesson 3 into new files
- test, troubleshoot, publish (see instructions from Lesson 4)
|
|
|
