Unit H: Implementing Page Layout with HTML and CSSts091.k12.sd.us/Web_Design_Power_Points/HTML5 and...
Transcript of Unit H: Implementing Page Layout with HTML and CSSts091.k12.sd.us/Web_Design_Power_Points/HTML5 and...
HTML5 and CSS3 Illustrated
Unit H: Implementing Page Layout with
HTML and CSS
Objectives
Assess the CSS box model
Construct a multicolumn layout with
float
Implement relative positioning
Implement absolute positioning
HTML 5 and CSS 3 – Illustrated Complete 2
Objectives (continued)
Stack elements
Create a multicolumn layout using
positioning
Create a fluid layout
Control the visibility of elements
HTML 5 and CSS 3 – Illustrated Complete 3
Assessing the CSS Box Model
Box model: used by CSS to represent
characteristics of every Web page
element
Treats element as rectangular box
Border: border surrounding element
Margin: space from border to
neighboring/parent element
Padding: space between border and
element content HTML 5 and CSS 3 – Illustrated Complete 4
Assessing the CSS Box Model
(continued)
Size of padding, margin, and border
increase the amount of space
occupied by an element
Dimensions of these properties not
included in specified width / height
• Specified width and height refer only to the
content of an element
When fitting elements into limited
space, subtract padding, margin, and
border area to get width or height HTML 5 and CSS 3 – Illustrated Complete 5
Assessing the CSS Box Model
(continued)
When bottom margin of one element is
adjacent to top margin of another, the
margins combine to the size of the
larger of the two
Affects element size planning
Separate property for each side of
padding and margin
e.g., padding-top:2px; margin-right:1em;
HTML 5 and CSS 3 – Illustrated Complete 6
Assessing the CSS Box Model
(continued)
Can set a common value using
generic property
e.g., padding:0;
Can use shorthand to set different
values.
e.g., margin: 1em 2em 1em 3em
• Values applied clockwise, first value for top
If less than four values provided:
• Three values: top, left and right, bottom
• Two values: top and bottom, left and right HTML 5 and CSS 3 – Illustrated Complete 7
Assessing the CSS Box Model
(continued)
HTML 5 and CSS 3 – Illustrated Complete 8
CSS box model
Constructing a Multicolumn
Layout with Float
User Agents render HTML top to
bottom
Easy to create layouts with elements
stacked vertically
Use float, clear, and width properties
to create columns of text and graphic
parallel to each other
Use width property to assign width to
each of the columns
HTML 5 and CSS 3 – Illustrated Complete 9
Constructing a Multicolumn
Layout with Float (continued)
Style sheet for multicolumn layout and
resulting Web page
HTML 5 and CSS 3 – Illustrated Complete 10
Implementing Relative
Positioning
Page flow: the order of elements in the
HTML document
Relative positioning: adjusting default
position of an element
Preserves space allotted to element in
default page flow
Set position property to “relative”
Style exact location using left and top
properties
HTML 5 and CSS 3 – Illustrated Complete 11
Implementing Relative
Positioning (continued)
Relative positioning and page flow
HTML 5 and CSS 3 – Illustrated Complete 12
Implementing Absolute
Positioning
Absolute positioning: takes element
out of page flow entirely
Allows other elements to flow into space
element would have occupied
Set position property to “absolute”
Style exact location using left, right, top,
and bottom properties
Location is calculated relative to closest
ancestor element that has position
applied to it
HTML 5 and CSS 3 – Illustrated Complete 13
Implementing Absolute
Positioning (continued)
Absolute positioning and page flow
HTML 5 and CSS 3 – Illustrated Complete 14
Stacking Elements
Stacking elements: positioning two
elements so that they can overlap on a
Web page
Additional possibilities for layouts
Applies only to positioned element
Elements placed in new layer
Requires careful planning
Stacking order controlled by values
assigned to z-index property
HTML 5 and CSS 3 – Illustrated Complete 15
Stacking Elements (continued)
HTML 5 and CSS 3 – Illustrated Complete 16
Stacking positioned elements
Constructing a Multicolumn
Layout Using Positioning
Can use positioning to create
multicolumn layouts
Look and behave just like float
multicolumn layouts
• More flexible for 3-column, allows for 4-
column layouts
Can position both columns, or position
one and let the other flow around it
Leave large enough margin for
positioned element
HTML 5 and CSS 3 – Illustrated Complete 17
Constructing a Multicolumn
Layout Using Positioning (cont’d)
HTML 5 and CSS 3 – Illustrated Complete 18
Comparing multicolumn layout
methods
Creating a Fluid Layout
Fixed layout: specifying a fixed width
for Web page content
Ensure consistency of visual design on
different window sizes and resolutions
Fluid layout: gives Web page flexibility
to adjust its width while maintaining
intended layout
A.k.a. Liquid layout
Uses min-width and max-width
properties HTML 5 and CSS 3 – Illustrated Complete 19
Creating a Fluid Layout
(continued)
HTML 5 and CSS 3 – Illustrated Complete 20
Web page at different widths
Controlling the Visibility of
Elements
You can use CSS to style whether
element is displayed
Set visibility property to “hidden”
• Element content not visible
• Space reserved for invisible element
Set display property to “none”
• Element content not visible
• Other elements reflow into space that would
have been occupied by invisible element
HTML 5 and CSS 3 – Illustrated Complete 21
Controlling the Visibility of
Elements (continued)
HTML 5 and CSS 3 – Illustrated Complete 22
Alternatives for hiding Web page
elements
Summary
Box model: used by CSS to represent
characteristics of elements
Treats element as rectangular box
Defines border, margin and padding
Margins of adjacent elements can
combine into one margin
Use float, clear and width properties to
create multicolumn layouts
HTML 5 and CSS 3 – Illustrated Complete 23
Summary (continued)
Relative positioning: adjusting location
of element relative to its page flow
location using position property
Space preserved
Absolute positioning: taking elements
out of page flow entirely
Other elements reflow into empty space
Positioning can be used to create
multicolumn layouts HTML 5 and CSS 3 – Illustrated Complete 24
Summary (continued)
Fixed layout: specifying a fixed width
for Web page content
Fluid layout: gives Web page flexibility
to adjust its width while maintaining
intended layout
You can use CSS to style whether
element is displayed
Set visibility property to “hidden” or
display property to “none”
HTML 5 and CSS 3 – Illustrated Complete 25