Presentation is loading. Please wait.

Presentation is loading. Please wait.

COS 125 DAY 11. Agenda  Assignment 4 corrected 8 A’s & 2 B’s  Assignment 5 Due  Assignment 6 will be posted after break  Quiz 1 corrected 1 A, 5 B’s,

Published byMargaretMargaret Stafford Modified over 9 years ago

Similar presentations

Presentation on theme: "COS 125 DAY 11. Agenda  Assignment 4 corrected 8 A’s & 2 B’s  Assignment 5 Due  Assignment 6 will be posted after break  Quiz 1 corrected 1 A, 5 B’s,"— Presentation transcript:

1 COS 125 DAY 11

2 Agenda  Assignment 4 corrected 8 A’s & 2 B’s  Assignment 5 Due  Assignment 6 will be posted after break  Quiz 1 corrected 1 A, 5 B’s, 4 C’s  Left to do 5 Assignments (10 total) 2 Quizzes Capstone projects  Discussion about course time line Ahead of schedule  Finish course on April 28?  Lecture/Discuss Layout with Styles

3 Layout with Styles  Allows for more possibilities than xHTML layout  Can create Liquid layouts that expand or contract with browser window  Separate layout from Content allowing you to change layout without re-coding WebPage  Examples of everything in this lecture available at http://perleybrook.umfk.maine.edu/samples/StyleLayout.htm http://perleybrook.umfk.maine.edu/samples/StyleLayout.htm

4 Structuring Your Pages  Divide your page in logical sections using the element  Name each division using the id attribute id=“daName”  Put the sections in order in your XHTML page  Use headers (h1, h2, h3 etc ) in a consistent fashion

5 The Box Model  For CSS, every element is in an invisible Box that has the following Content (middle) Padding (between Content & Border) Border (around element) Margin (Between element border and next element)  Boxes are either block level (new paragraph) or inline (on same line)  xHTML flow from top to bottom with line breaks around block level elements

6 Box Model (inline) Margin Border Padding Content Margin Border Padding Content

7 Box Model (block) Margin Border Padding Content Margin Border Padding Content

8 Changing backgrounds  Every element including the page itself can have its own background  To set background color selector{background-color:”blue” or “#336677” or rgb(200,100,34) or transparent}  To use a background image selector{background-image:url(image.gif)} If you use both color and image the color will be used until the image is loaded and will be seen through any transparent parts of the image  To repeat background image background-repeat:repeat or repeat-x or repeat-y or no-repeat  To fix background relative to element background-attachment:fixed or scroll  To specify position of background background-position: x y  To do all at once background:url(image.gif) repeat-x fixed bottom left;  Default setting background:transparent none repeat scroll top left

9 Changing the foreground color  selector{color:colorname or #rrggbb or rgb(r,g,b) or rgb(r%, g%, b%)  Foreground doesn’t work on image (img) element

10 Setting the height and width of elements  You can set the height and width as a absolute values or relative to parent element  Selector{width:w;height:h}  Setting width or height to auto allows the browser to calculate  Exampes #banner{width:100%; height:auto} img{width:200px, height:auto} a:link{width:100px height:50px}

11 Setting margins  Margins are outside of the border  Selector{margin:x} X = size in px (10px) or relative (2em) or percentage (10%)  Can also set margin by side margin-top:x margin-left:x  If two elements with margins touch, the space between their borders is the larger of the two margins and not the sum of the two margins

12 Adding padding  From inside out of an element Content, padding, border, margin  Selector{padding:x} X = size in px (10px) or relative (2em) or percentage (10%)  Can also set padding by side padding-top:x padding-left:x Margin Border Padding Content

13 Setting the Border  Every element can have a border  Border-style: type Type can be dotted, dashed, solid, double, groove, ridge, inset, or outset  Border-width: Npx If you give 4 values one value you can modify each side Border-width: 2px 3px 4px 5px Top = 2, right= 3, bottom = 4, left = 5  Border-color: colorname or #rrggbb or rgb(r,g,b) or rgb(r%,g%,b%)  Can also just effect one side using border-top-style:  Shorthand border-side-property: value(s)  Border-top-color:blue;  Border-right-style:groove;

14 Controlling the flow (position)  4 ways to position an element box Static – with the flow Absolute – in a fixed position relative to parent element Fixed – in a fixed position relative to browser Relative – with respect to default position in the flow  If boxes overlap you can control which goes over which using z-index

15 Offsetting Elements in the Natural flow  Every element as a “natural” location based on page flow  You can moved the an element relative to its natural position  Does not effect any other element in page Selector{Postion:relative; top:v; left:v; bottom:v; left:v} V is desired distance you want offset from natural location in absolute (12px) or relative values (1em, 1.5em) Can cause overlaps

16 Positioning Elements Absolutely  Elements in a xHTML web page flow in the order they appear in the xHTML  You can take them out of the flow and position them wherever you want with respect to their parent Selector{postion:absolute; top:v or bottom:v; left:v or right:v}  Generally you use  top or bottom  left or right V is desired distance you want offset from parent in absolute (12px) or relative values (1em, 1.5em) or as a percentage of parent (10%) Can cause overlaps Percentages create “liquid” layouts

17 Fixing an Element in the Browser Windows  Cause an element to fixed..doesn’t move when the page is scrolled  Works in IE7, FireFox and Opera Selector{Postion:fixed; top:v; left:v; bottom:v; left:v} V is desired distance you want offset from browser in specific (12px) or relative to parent values (1em, 1.5em) or as a percentage of browser (10%) Can (and most likely will) cause overlaps

18 Making elements float  You can make elements “float” in a “sea” of text  This property has buggy results  Selector{float:left or right) Elements “float” in the direction selected  If more than one element is floated in the same direction they will stack in the order they appear in xHTML Float left Float right

19 Controlling whether or not elements can floats next to another  If you don’t want anything float to the left right or both of a particular element Selector{clear:left or right or both}  Example #banner{clear:both} #blockhouse{clear:left}

20 Positioning elements in 3D  You can effect in which “layer” each element appears  Very important when you have overlap  selector{z-index:n} The highest n goes on top The lowest n goes to the bottom Think of n as the elevation of the element  Children will assume the z-index of parent first then will be in “Z” order versus their siblings

21 Changing the cursor  You can set how the cursor looks in each element Browser and O/S dependant  Selector{cursor:value} Value can be  Pointer  default  crosshair  move  wait  help  text  x-resize  X can be n, s e or w or combinations

22 Determining Overflow  What happens when the content of an element is larger than the “box” you have created for it??  Condition can be controlled via overflow property  Selector{overflow:value} Value can  Hidden (what ever doen’t fit becomes invisible)  Visible (makes the box fit the contents)  Scroll (forces scroll bars)  Auto (scroll bars only when necessary)  Problems with IE 6 works in IE7

23 Aligning Elements Vertically  Selector{vertical-align:value}  Value can be baseline -- bottom of element lines up with bottom of parent middle -– middle of element lines up with middle of parent sub – lines up below parent super –lines up above parent text-top – top of element aligns to top of parent text-bottom – align the bottom of element to bottom of parent top –aligns top of element to top of tallest element in the same line bottom- aligns bottom of element to bottom of lowest element in the same line

24 Displaying and Hiding Elements  You can control how the browser display an element using the property display: h1{display:”value”}  Values can be none hides the element block displays element as block level inline displays the element as inline list-item displays the element as though you has used tag (covered later)

25 Cool CSS effects  Rollover buttons http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/rolloverbuttons.html http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/rolloverbuttons.html  image “pop-ups” http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/popups.html http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/popups.html  Drop down menus http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/dropdownmenus-noformat.html http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/dropdownmenus-noformat.html http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/dropdownmenus.html http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/dropdownmenus.html  Replacing headers with Images (not for IE) http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/imagereplacement.html http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/css-effects/imagereplacement.html  More effects http://www.dynamicdrive.com/style/

Download ppt "COS 125 DAY 11. Agenda  Assignment 4 corrected 8 A’s & 2 B’s  Assignment 5 Due  Assignment 6 will be posted after break  Quiz 1 corrected 1 A, 5 B’s,"

Similar presentations

LIS650 lecture 4 Thomas Krichel 2003-12-06. today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.

LIS650 lecture 4 Thomas Krichel today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.
LIS650 lecture 4 Thomas Krichel 2004-10-24. today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.

LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.

Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
With CSS, a color is most often specified by: a HEX value - like #ff0000 an RGB value - like rgb(255,0,0) a color name - like red“ Example h1.

With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.
More CSS CS380 1. HTML id attribute 2 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output  A unique ID for.

More CSS CS HTML id attribute 2 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output  A unique ID for.
Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)

Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.

9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
CSS provides a way to stray away from the traditional methods of using tables to lay out pages. Success with this technique depends on understanding of.

CSS provides a way to stray away from the traditional methods of using tables to lay out pages. Success with this technique depends on understanding of.
Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.

Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.
CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.

CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.
TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.

TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.
COS 125 DAY 19. Agenda  Assignment #6 Due April 7  Next Capstone Progress Report Due April 7  Next Quiz (Quiz #4) April 11 Castro Chap 8, 9, 10, 11.

COS 125 DAY 19. Agenda  Assignment #6 Due April 7  Next Capstone Progress Report Due April 7  Next Quiz (Quiz #4) April 11 Castro Chap 8, 9, 10, 11.
COS 125 DAY 20. Agenda  Assignment 5 corrected 3 A’s, 4 B’s, 1 D and 1 F’s 4 late -20 points per day Time of submission is the later of the.

COS 125 DAY 20. Agenda  Assignment 5 corrected 3 A’s, 4 B’s, 1 D and 1 F’s 4 late -20 points per day Time of submission is the later of the.
Cos 125 Day 22. Agenda Assignment 6 Not corrected Waiting for tune-ins Assignment 7 is posted Assignment 7 Due April 2PM Left to do 1 Assignments.

Cos 125 Day 22. Agenda Assignment 6 Not corrected Waiting for tune-ins Assignment 7 is posted Assignment 7 Due April 2PM Left to do 1 Assignments.
Cos 125 Day 24. Agenda All students meeting 7 Pm Monday, April 19 UMS Strategic Plan Assignment #7 Posted Due April 20 Two (one?) more to go Quiz Four.

Cos 125 Day 24. Agenda All students meeting 7 Pm Monday, April 19 UMS Strategic Plan Assignment #7 Posted Due April 20 Two (one?) more to go Quiz Four.
An Introduction to Cascading Style Sheets CSS Layout, and the CSS Box Model Nick Foxall SM5312 week 9: CSS Layout.

An Introduction to Cascading Style Sheets CSS Layout, and the CSS Box Model Nick Foxall SM5312 week 9: CSS Layout.
MORE Cascading Style Sheets (The Positioning Model)

MORE Cascading Style Sheets (The Positioning Model)
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

Similar presentations

Ads by Google