This week we worked more with CSS. Specifically we were able to create a navigation bar using an unordered list, anchor tags, and div tags in our HTML. We then manipulated the CSS into making our unordered list into a navigation bar by defining descendent selectors. We also used CSS to create page wrappers, and float images or other text within our pages to the left or right.
We also worked in Photoshop to create background images in three different ways: Vertical,/Horizontal, full-screen, and seamless. Each of these requires different optimization. In this tool you can create a background image (i.e using gradients) to tile, or control how your graphic will show when it is tiled. *It is important to pay attention to color so that you don’t distract from your text. I’m still not completely clear on a lot of this stuff, but seem to be getting the job done regardless.
This week was more application than conceptual; still here are my notes for later:
Week 4 notes:
Lectures:
More on color:
Color theory is art of mixing colors. It influences people Culturaly and psychologicaly.
Computer color wheels are red, green, blue.
Additive system: you get white when they are all on 100%.
Web safe: developed by Lynda weinman. There were 256 colors. Its old now.
Different generations had different colors appeal to them. (see lecture for exact.)
More on CSS:
Anchor links and lists: ID’s a set area on play. (jump to a reference point on your page. i.e home? Or back to top)
Lists can be manipulated with CSS too and create custom navigation.
Class – free agent of CSS – as long as you want.
ID selectors are custom names and can conly be used once. We did this last week with #whois.
Div – defines division or section. It groups block elements.
Ems (used instead of pixels)
Floating element aligns to left or right.
Reading:
Background images:
To repeat your background image, or make it tile:
body {
background-image: url(spiral-bg.gif);
background-repeat: repeat;
}
Non-repeat image (easier for browser):
body {
background-image: url(bg-sun.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: #FCCC02;
}
CSS Overview:
This will help you remember all the elements in CSS:
https://angel.aacc.edu/section/default.asp?id=ART1708752011FA
The Difference between ID and Class:
ID’s are unique and can have only one element ID and each page can only have one element with that ID.
Classes: you can use the same class on multiple elements. (like widgets).
Optimizing:
Basically the same info from last week about the file types and how to cut them down. See last weeks post.
Lynda.com Practice:
Design considerations for web backgrounds:
Background: you can use CSS to tile now. The smaller, the more it repeats.
You should stick with colors that don’t contrast…so it’s not distracting. Dark background=light text and vice versa. Bright is hard to read.
Optimizing a background graphic:
Basically the same as images from last week.
Vertical/horizantal backgrounds:
you can make a bar, then change the gradient based on your swatches. Then use your CSS code to make this repeat for a gradient background. Revieew this video if you forget how.
Kelly Learns Web Design 