Category Archives: CE/PC

CE 2411 07: MORE CSS 08/01/16

INTRO:
Float Tutorial
Inline block tutorial
Horizontal Align
Try the Z-index
Try implementing a drop down menu

READING:
Ch. 9
Who needs FLASH?
Adding Video
SWFObject
JavaScript

Ch. 17
The old
The new
How it works
What about those older browsers?

EXTRA:
From Chapter 15, Media Rules.
Start with @import
But, when presented as a media rule: @media – used for different purposes:
Media Rules
– More Media info
From Chapter 16, rollovers.
JS tried and true.
Better but tricky
FAVICON
FAViSize
Flavor FAVicon
Favicon generator

NEW:
JS Redirect:
– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone
Practical application.

ASSIGNMENT:
Sources to Review:
CSS Rollover
CSS Rollover 2
More on the Hover
Advanced Hover effects
Zen Garden
3 columns
more 3s

HTML/CSS:
Read: Chapter 9, and 12.
Complete Code review for 9, and 12

HTML/CSS
Chapter 19
Media Rules:
– import CSS using media rules
– Change background based on media rules (see demo)
– Try Javascript image rollovers and CSS sprites
– Create and install a favicon
– Try Mobile redirect

Start working on your final

CE 2411 06: MORE CSS 07/19/16

REVIEW:
HTML/CSS:
Complete Code review for 14, 15, and 16
– Try :first child selector
– Try External CSS
– Try CSS opacity hover

READING:
Ch. 14
List styles
List images
Table Properties
Even the Cursor can change
Lists are important for drop down menus:
Drop, example
Pick your poison

Ch. 15
Best review
The power of “Z” and test code
Floaters
Float and Clear
They have semantic difference – a “div” element is designed to describe a container of data whereas a “p” element is designed to describe a paragraph of content. (Nesting: you can not nest anything in a “p” tag)
Review Float with examples
Putting it together
3 vs 2
Floaters
Float and Clear
Examples
Another explanation of the FLOAT
Fixed
Liquid
Layout without Tables
Another Example
What to do with the “Z”
Next Week: Media Rules, 2 column, and 3 column layout. Media queries – using multiple CSS

Ch. 16
Image Size
Alignment (Note: using Float)
Centering options
The float is key
Next Week: Image Rollovers and Sprites

Sources to Review:
– More about the “Z”
Flaunt it
3 columns
more 3s

Assignment:
Float Tutorial
Inline block tutorial
Horizontal Align
Try the Z-index
Try implementing a drop down menu

CE 2411 06: More CSS 07/18/16

INTRO:
HTML/CSS:
Complete Code review for 11 and 13
– Try Meta tag, refresh and redirect
– Create at least 3 HTML pages, using CSS to complete the following on each page:
– 1. place background image,
– 2. Use the “box model”
– 3. Use pseudo classes

Revise Usability maps, Site Map, Wireframes and Prototypes based on feedback (completed by next class)
Create an interface (Web Design) for your site. Focus on Home and significant sub page.

READING:
Chapter 10
Best examples
CSS Rules
External CSS. Here is how

Review Page 238, 292 in book
The :first-child selector allows you to target the first element immediately inside another element. It is defined as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
– First Child in action
– First and last child

Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

Ch. 11
Color names
Opacity
Opacity – roll over using JavaScript:
Try it using the CSS – hover property

Assignment:
HTML/CSS:
Read: Chapter 14, 15, and 16.
Complete Code review for 14, 15, and 16
– Try :first child selector
– Try External CSS
– Try CSS opacity hover

1 2 3 10