Com Arts 155 1st Edition Lecture 11Outline of Last Lecture I. Rendering EnginesII. FlowIII. CSSOutline of Current Lecture I. Review of CSSII. TextIII. LayoutIV. Midterm ReviewCurrent LectureReview of CSS Syntax: It’s a different language than HTML. It lists a property, then a value. The distinct properties need to be written exactly as they are on the slide. Selectors: What we want to target in CSS. We often target with an element, but we can also use classes and ids. Inheritance: properties of parent elements are inherited by most child and descendant elements: <body> is a good place to startText All fonts in serif and sans serif Typically print uses serif fonts Typically web design uses sans serif Font-Family Create a rule for the font-family. Want font Georgia to display. The user has to have it installed ontheir computer. If you don’t have Georgia, give Times New Roman (multiple words so quote it), then serif. The general last rule applied wins is not trueThese notes represent a detailed interpretation of the professor’s lecture. GradeBuddy is best used as a supplement to your own notes, not as a substitute. 4 default fonts: serif, cursive, monospace, san-serif Font-size Default: 16 px or 100% or 1 em / pixels is typically easier Can change: use rule (font-size: 12px) Google web fonts We’re assuming the user doesn’t have the fonts on their computer. You can go to google web fonts and use it and you copy paste the code in the style sheet and the user’s computer will instantaneously download it and be able to see it. Color Print: CMYK: Subtractive color process (subtracts brightness from white) Web: RGB: additive color (adding all 3 colors producing white) Hexadecimal Notation: There are 6 different decimals that we’re using. They describe RGB. First 2 is red, second 2 is green, last 2 is b What color is #000: It’s black What color is #FFF: It’s white “color” property is content color (or foreground color) “background-color” is background color Hue Saturation Lightness (HSL) Hue is color on the color wheel Saturation is the amount of gray in a color (with 0% saturation being a shade of gray) Lightness is the amount of white or black (0% lightness is black) HSLA (Hue, Saturation, Lightness, Oppacity [value between 0 and 1]) RGBA It also addresses opacity Contrast insures legibility Easier to read dark text over light background for long passages Question: What CSS property changes the color of a font? colorLayout Fixed width vs. Relative width Fixed in in terms of pixels. Relative is percentage. Encourage to use fixed width. 960 pixel grid system A lot of designers use a 960 pixel grid for a layout system. You’re going to have to do math A lot of websites show this: Can use rule of thirds Vertically Keep your most important content in the top 550 pixels (don’t want them to have to scroll down) Come up with banner that isn’t more than 100 pixels high, it’s tough Normal Document Flow (Think of how fit into layout) Sometimes you have to float an element. When you float an element, you remove it from normal document flow and position it somewhere <div> isn’t the most semantic but you may have to use it Box Model Everything exists inside invisible box. Content: width of content Padding: negative space around text Border: can be invisible or not Margin: distance between one box and the next- Margin: this is short hand for applying to top, right, bottom and left- Can express as margin:25px 50px 75px 100px; it goes top, right, bottom, left (can apply to padding and border as wellMidterm Review 3 point lighting 3 lights: key, fill, background Key: main source of light Fill: fill in shadows Back light: give definition and depth How to obtain the greatest depth of field? Lens: wide angle Aperture: Large-Fstop/Less light Semantic meaning/HTML? It means that something has a meaning associated with it. Where that comes into HTML is that HTML describes the structure of web pages, and you want to describe it with meaning. Ex. You read a list differently than a table. A list is a group, the items are grouped together. A table, you don’t know: is it data? A list? What is a codec? A program that encodes and decodes information. Ex. A codec will encode the lights that come in and hit a censor and then decode it by extracting and putting it on your computer Compression? Most codecs compress the data Lossless: Algorithm that finds areas of repetition and more efficiently packs it Lossy: Removes unimportant information Bitmap and Vectors Vector: Mathematical, geometrically expressed; because of that you can make the same thing super giant or super small and you won’t lose resolution. Photographs can’t be saved in vector Bitmap: pixels Creative Commons v. Fair Use v. Public Domain Fair use lets us in certain circumstances use copyrighted material without having to ask for it or pay for it. Creative commons lets you license your material however you want. Gives others more freedom to use it. Public domain: Out of copyright all together. Anything published before 1942. If you license to public domain, you give up all ownership Attribution Attribution addresses ethics. It is ethical to say where certain material comes from and give proper credit. However, is different from fair use which deals with legality of copyright. Circuits Equation= Amps=watts/voltage Typical number of amps: 15 Typical voltage: 100 This is how you decide if you can fit it into one circuit or multiple Elements for HTML and CSS Know the difference between elements that are semantic and not, block level or inline, know those properties. Most importantly have a good sense for how HTML and CSS works. Structure v. Presentation HTML describes structure, CSS controls presentation. Value of that is many fold. It makes HTML more accessible and way easier to style for CSS. Can take same HTML and visually style it differently. Hyperlink and Relative links Hyperlinks: throughout the internet. You’re pointing to another file or webpage or image Relative: the way we describe linking to other files within own
View Full Document
Unlocking...