Week 4 Summary – Notes

Color Theory– combining colors to create a specific mood/effect. You must take into consideration the cultural and psychological background of your target audience.

Demographic palettes – audience’s color preference are determined by age, gender, location, etc.

Traditional color wheel– based on primary colors: red, blue, yellow.

Screen Color Wheel– Based on RGB – red, green, and blue.

Additive Color System– Color on the computer screen is composed of RGB pixels. You get white when the red, green and blue are combined at 100%.

Hexidecimal– color codes used for HTML and CSS. indicate the percentages of Red Green and Blue making up the color. (First 2 letters/numbers = red, second 2 =green, last 2 =blue.

Anchor links– You can mark a specific place on a page and create a link to jump to the specified place. Case sensitive.

You can use CSS to manipulated lists and turn them into navigation bars.

Sample code for Anchors:

<ul><li><a href=”#object”>objective</a></li> (creates link to jump to anchor point- in a list if you are making a navigation bar/button )

<h1><a name=”object”></a>Objective</h1> (the set point link jumps to)


Describe rules for a tag in the CSS document, so in the HTML document you only need to name the tag and all the rules set in CSS will automatically be applied.

Class Selectors: Can be used multiple times, and with any HTML tag. Class selectors are designated by a “.” at the front. You can use multiple classes on a single element.

example: In CSS document you would designate: .light { background-color: #FFFFFF }

In HTML you could apply that to a paragraph tag like this: <p class=”light”>…</p>

Selectors: ID– Identify a major section, you can only use an ID selector once in a document. Use “#” in the name. Each element can only have one ID.

example: In CSS document you would designate: #masthead{ color: green; text-align: center;}

In HTML you would in insert like: <DIV id=”masthead”>…</DIV>

An ID has more weight than a class, so if conflicting ID and class selectors are applied to one element, the !D rules will override the class.

Classes and IDs can do the same things.

Having a unique ID is important, because it allows you to create a “hash value” in a URL, where the URL will scroll to the element with the indicated ID.

Example: URL: http://yourdomain.com#comments (#comments is an ID selector, and the URL will scroll directly to where that ID selector is in the document.)

DIV – a designated section of the HTML document.

#navcontainer li { list-style-type: none;} <– removes list style from selected lists (most of the time, does not always work for every list)

EM – used to set sizes in DIV, based on the user’s browser preferences.

Float – aligns an element to the right or left of the page.

Example: In CSS: #navcontainer { float: left; }

In HTML: <div id=”navcontainer”>…</a>

IN HTML backgrounds can only be tiled in all directions. CSS allows you to anchor the tiling to a specific axis, so you can tile in only one direction (only horzontally, or only vertically.)

When making patterns to tile, keep the colors to medium values, because high contrast in the colors will be extremely distracting when repeated.

When changing the size of an image for a background: Photoshop’s automatic setting is ‘Bicubic (best for smooth gradients)’ change this to ‘Bicubi (best for reduction’)

You can use a narrow bar to fill a background by tiling horizontally (use to make stripes, gradient, or fill with solid color.)

To create a tile that will repeat into a seamless pattern:

Make canvas slightly larger than image you wish to make pattern out of. Have image on seperate layer from background color. Duplicate image layer. On one image layer: filter–>other–>offset. Set both horizontal and vertical offset fields to 1/2 the total convas size. This repeats the image into the 4 corners so that it is half off the canvas and will seamlessly merge when tiled.

Standard screen sizes (this is subject to change, always check current standards before making a full-screen background): 640×480, 400×600, 1024×768 pixels.

This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s