COS 125 DAY 19. Agenda Assignment #6 Due April 7 Next Capstone Progress Report Due April 7 Next...
-
date post
19-Dec-2015 -
Category
Documents
-
view
218 -
download
0
Transcript of COS 125 DAY 19. Agenda Assignment #6 Due April 7 Next Capstone Progress Report Due April 7 Next...
![Page 1: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/1.jpg)
COS 125
DAY 19
![Page 2: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/2.jpg)
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 and 12 20 M/C questions, 4 Short Essay 60 min
WebSite for text book http://www.cookwood.com/html5ed/
Lecture/Discuss Layout With Styles Style Sheets for Printing
![Page 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/3.jpg)
Learning Objectives Layout a Web Page using CSS Understand the Box model Understand the absolute, relative and
fixed positioning available in CSS Understand the display property Change background colors, images and
attachments Use the width and height properties
![Page 4: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/5.jpg)
Structuring Your Pages Divide your page in logical sections using
the <div> 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
![Page 6: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/6.jpg)
The Box Model For CSS, every element is in an invisible
Box that has the following Content (middle) Padding (between Content & Border) Border (round 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
![Page 7: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/7.jpg)
Box Model (inline)
Margin
Border
Padding
Content
Margin
Border
Padding
Content
![Page 8: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/8.jpg)
Box Model (block)Margin
Border
Padding
Content
Margin
Border
Padding
Content
![Page 9: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/10.jpg)
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 thought you
has used <li> tag (covered later)
![Page 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/12.jpg)
Fixing an Element in the Browser Windows Cause an element to fixed..doesn’t move
when the page is scrolled Doesn’t work in IE; works in Netscape
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
![Page 13: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/13.jpg)
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
![Page 14: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/14.jpg)
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
![Page 15: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/16.jpg)
Changing the cursor You can set how the cursor looks in each element 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
![Page 17: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/17.jpg)
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;
![Page 18: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/18.jpg)
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
![Page 19: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/19.jpg)
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
![Page 20: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/20.jpg)
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}
![Page 21: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/22.jpg)
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 (invisible) Visible (makes the box bigger) Scroll (forces scroll bars) Auto (scroll bars only when necessary)
Problems with IE 6
![Page 23: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/23.jpg)
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
![Page 24: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/24.jpg)
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}
![Page 25: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/25.jpg)
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
![Page 26: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/26.jpg)
Learning Objectives Use Media-specific style sheets Understand the difference between
screen and print styles Specify when pages will break in a style
sheet for printing Identify print-specific properties using the
@page rule.
![Page 27: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/27.jpg)
Media-Specific Style Sheets You can designate a stylesheets to be used only for
printing, for screen display or for both. Use attribute “media=“print” or “screen” or “all” in the
open link or style tag You can also import using
@import “print.css” print; Example
<link rel=”stylesheet” media=“print” type=“text/css” href=“print.css”>
<link rel=”stylesheet” media=“screen” type=“text/css” href=“screen.css”>
![Page 28: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/28.jpg)
How Print Style Sheets Differ Can be the same or very different from screen
version Some suggestions
Use points instead of pixels for sizing 12points instead of 15px
Hide sections like sidebars, banners or ads display:none
Remove background colors and images Adjust margins Set page breaks Let viewers know that printouts are different than
viewed pages Test the print out (print preview) and adjust if
necessary
![Page 29: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/29.jpg)
Controlling Page Breaks WebPages can be very long Use CSS to control where the contents are printed relative
to printer page Where page breaks occur
Page-break-before:values Page-break-after:values Page-break-inside:values Values are “auto” “always” or “avoid”
Examples p{page-break-inside:avoid} h1,h2,h3{page-break-before:always}
![Page 30: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/30.jpg)
Other print Specific CSS properties These do not work in IE or Netscape (yet!) You can predefine printing pages
@page :left or :right or :first “name”{ stuff } Stuff can be
Size:w h w=width of page h=height of page Margin:x Marks:kind Any other property:value pairs
Example @print :first{size 8.5in 11in; margin:1in marks:none} @print legal{size 8.5in 14in; margin 1in 0.5in 1in 0.5in}
Use predefined rule Selector{page:legal;}
![Page 31: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062320/56649d385503460f94a1193e/html5/thumbnails/31.jpg)
Widows and Orphans Orphan is a term used to describe a single word appearing
at the bottom of a paragraph or column. A widow is a single word or short phrase appearing alone
at the top of column. To modify using css
Selector{orphans:n} Selector{widows:n} N is minimum number of lines to appear at the top (widow) or
bottom (orphan) of a page p{orphans:4;widows:4}