• Home
• Assignments
• Syllabus
• Schedule
• Lecture_Sample
• Past_Projects
• Project

1. HTML 4.0 On-line Tutorial
2. Creating CSS Style in Dreamweaver - Also Blackboard Videos
3. HyperText Coined In 1965
4. Basic.htm Using Browser Tag Definitions
5. Basic1.htm Using Local Style Definition
6. Basic2.htm Uses an External Style Sheet Basic2.css
7. Precedence Most Recent Mask Previous Styles except More Specific Tags Mask Less Specific
8. CSS Import Precedence Most Recent Mask Previous Styles Except Main CSS File Has Precedence

1. two selectors , comma separator
2. em descentant of p example
   
3. Figure 2-2 of Book Oz Image
4. Page 30 Oz.htm File No CSS
5. Oz1.htm : Oz CSS rules...
   • H3 {text-align:right; color: gray;}
   • H1, H2 { margin-left: 20px; font-family: sans-serif; }
   • H1 { border:1px solid; padding: 5px; }
   • P { margin-left:20px; font-family:serif; font-size:14pt; }
6. Core Attributes present in all HTML tags
7. Note example quote and procedure classes
8. id class firstQuote, preface
9. span and div example span.htm
10. Pseudo Class :active :focus, :hover, :link, :visited, :unvisited
11. Pseudo Link HTML
12. Pseudo Focus Forms HTML
13. Pseudo Element HTML
14. Figure 2-17 div > blockquote child.htm selector;
    use sibling so that when h3 follows h2 its black on gray
15. Original File Displayed by Browser Our Alice.htm both Versions with CSS

 

 

descendant Example Fairly Complex, with font-size illustrations

descentant Summary
Class ID example classID.htm

 

• Basic Fonts "Dreamweaver Likes to Insert 3" Figure 3-1
• Courier
• Fixed Width
• Verdana sans-serif more horizontal space (viewgraphs online)
• Printed Material Times or New Century Schoolbook
• Size should be pixel (px), percentage or name relative
• Others: cm, in, pt ( , em (width of m), ex (height of x), px, 150%.
• Yes you can specify inches fontMargins.htm
• Font Size figure 3-3 Enhanced
• Font Properities
  Text Examples - Online Book Companion
  Remember its the Server Side Engine Then JavaScript Engine Finally Rendering Engine
• Text Decoration Figure 3-7
• Figure 3-16 no CSS Figure 3-24 3-16 with CSS

CSS3 Text-Shadows & Web Fonts

• textShadow.html Basic Example, Shadow, Dual Shadow
• textShadow2.html 3D Effects, White knock out text, Inset and Outset
• textShadow3.html Neon and Outline
• Saddleback.edu Server is Blocking *.otf Files the Three Examples Below Had to Be Moved to cim.saddleback.edu
• webFonts.html Loading Fonts over Web using @font-face
• Add JavaScript Code to Detect IE, and load eot font instead of ttf webFonts2.html
• webFonts3.html IE hack, load eot font, then trick IE, load local, then ttf font

Chapter 4 Box Model Margin-Border-Padding

• quiz.htm
• margin.htm
• margin2.htm collapsing, negative
• padding.htm Padding examp
• quiz2.htm h1 and h2 padding and border example
• borderStyle.htm illustrates the various border styles
• borderFancy.htm illustrates some multi-color side border selection
• borderSummary.htm summarize borders
• box.htm box summary height, width, float, clear
• quiz3.htm div with border, margin, float and padding
• position.htm illustrates the position CSS style attribute

• Color XHTML.htm html attributes color and bgcolor
• Reserved CSS colorNames.htm
• Ways of referring to colors in CSS color.htm
• colorBackground.htm
• background Image using URL
• background Image with both a h3 header and body
• background-repeat:repeat-y Figure 5.12
• background-repeat:repeat-x Figure 5.13
• background-repeat:no-repeat Figure 5.14
• background-position:center default scroll with contents
• background-attachment:fixed background Image Remains in Fixed Position
• Web-Safe Colors Mutliple of 0x33

CSS3 Assignment H8 css3generator.com, 2nd Choice css3please.com, Gradient

• CSS2 Image Fixed Top Right, what does min-width do?
• CSS3 Gradients, basic moz gradients, user colorzilla gradient generator, to support all browsers
• CSS3 Border Radius, basic border-radius tag, then a few fancy border radius.
• CSS3 Background-size and multiple images tabsCS5.htm supported by only Opera (10/2011)

CSS3 AssignmenT H9 Box-Shadows, TranSForm & Transition

• CSS3 Box Shadows, similar to H5 Text Shadows - Interactive box Shadows generator
• CSS3 Transform tag, with functions scale, rotate, skew, you also have scalex, scaley, skewx, skewy
• button transform
• 50 Awesome CSS Transitions (they use webkit prefixes, some work in firefox 7, more in Opera, probably safari/chrome best choice)
• CSS3 Button, CSS3 is nice but it has a feature creep problem (outlook has application bloat) ;
  Right Tool for the Right Job - Photoshop/GIMP/Fireworks
• Position Quiz

Chapter 7 Positioning

• normal.html Four div blocks, red, green, blue, yellow normal flow.
• Set height 100px; Width to 200px size.html
• blue, green box with pixel offsets top, left offset.html
• blue, green box with relative percent offsets offsetPercent.html
• Bottom, right 0%, 0% offsetPercent2.html
• fourCorners.html put box in each of the four corners.
• four Corners all in Top, left outside browser viewport fourCornersTL.html
• Relative position and size; yellow box inside of a blue box relative.html
• Opacity.html, opacity, z-index example CSS3
  Daily Howl Examples (none)
• Overflow:hidden overflow.html discard overflow text in yellow box inside of blue, relative.html;
• filter filter.html not working - css3 only
• IE Filter Argument Settings

Responsive WEb DEsign

• Wikipedia RWD | Marcotte 2010 |
• Grid Visual Philosophy
• Device Resolution Perspectives
• JavaScript Example illustrating: screen, userAgent, browser and jQuery browser object properties.
• Fluid Grid JavaScript Solution.
  
• CSS2 Media Types and CSS3 Media Query Examples
• jQuery Mobile - DW examples jQueryUsingCDN, and jqueryLocalTheme