Craig Stroupe | University of Minnesota Duluth
Creating a Model Color Scheme Page
What to do
1. Choose a banner with colors
you like, and save it in a
folder “exercises/color/assets”
2. Visit the Color Scheme
Designer
3. Choose a dominant hue to use
to create your color scheme
from an important color in the
banner
4. Adjust the
saturation/brightness and
contrast
5. Try different schemes (mono,
triad, analogic)
6. Look at the sample pages.
Click away to dismiss the
examples, and adjust scheme
as desired.
7. Export the scheme and save
the page into your “color”
folder as “scheme.html.”
Keep the page open in your
browser.
8. In DW, create a site called
“color” with the folder
“color” selected as the local
root folder.
How to do it
http://colorschemedesigner.com/
From the large color wheel at left
Use the “Adjust Scheme” tab at the
bottom
menu of small color wheels in the top
left
Click page example tabs at bottom
right
From the upper right menu, choose
Export > HTML and CSS
When you create the site, no need to set
up “Remote Info” since you can use
your “www” site to post this exercise
to the Web.
You’ll only need to export “color
exercise” if you want to come back
later to complete this exercise.
9. Open a new document using a File > New > Blank Page
CSS Layout
In the “Layout” window, choose one of
the design schemes
Click “Create”
10.Save the new page in the
folder “exercises/color” as
“model.html”
File > Save (Command+s)
CLASSIC MISTAKE: Be sure never
to insert an image into a page
before you save it! This will cause
the image to work on your own
computers, but not to function
when you post the page to the web.
11.Insert the banner, and
When you insert the banner, be sure to
experiment with making
adjust the layout div’s or table’s
changes to the
width to match (or resize the banner
in Photoshop to match your desired
colorssticking to the
width).
schemeof the backgrounds,
text, link colors in various
Note that with Dreamweaver’s color
states, etc
picker, you can select the colors from
anywhere on your screen, including
in other applications like Photoshop
or your browser window.
12.Save your work
Command+s