0% found this document useful (0 votes)
37 views41 pages

Principles of Web Design 6 Edition: Chapter 7 - Page Layouts

This chapter discusses different page layout techniques in web design. It explains the normal flow of elements, how to create floating layouts using floats, and how to build both flexible and fixed page layouts. Key points include understanding how elements are displayed by default, using divs and semantic elements like section to contain content, and controlling layout widths and centering with wrappers. Floats allow columnar designs but may require clearing or containers, while flexible layouts adapt to different screen sizes and fixed layouts maintain consistent proportions.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
37 views41 pages

Principles of Web Design 6 Edition: Chapter 7 - Page Layouts

This chapter discusses different page layout techniques in web design. It explains the normal flow of elements, how to create floating layouts using floats, and how to build both flexible and fixed page layouts. Key points include understanding how elements are displayed by default, using divs and semantic elements like section to contain content, and controlling layout widths and centering with wrappers. Floats allow columnar designs but may require clearing or containers, while flexible layouts adapt to different screen sizes and fixed layouts maintain consistent proportions.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 41

Principles of Web Design

6th Edition

Chapter 7 – Page Layouts


Objectives
• Understand the normal flow of elements
• Use the division element to create content
containers
• Create floating layouts
• Build a flexible page layout
• Build a fixed page layout

2
Understanding the Normal Flow of
Elements

3
Understanding the Normal Flow
• The normal flow determines the sequence of
element display
• Boxes are laid out vertically one after the
other, beginning at the top of the containing
box
• Each box horizontally fills the browser window

4
5
Understanding the Normal Flow
• In the normal flow for inline elements, boxes
are laid out horizontally beginning at the top
left of the containing block
• The inline boxes comprise the lines of text
within, for example, a <p> element

6
Floating an Element
• When you float an element, you take it out of
the normal flow
• Check the results frequently as you are
designing your layout using floats

7
8
Creating Content Containers

9
Creating Content Containers
• Use the sectioning elements and occasionally
<div> elements to create content sections

10
11
12
Choosing the Correct Content Element
• The <div> element has no special meaning;
use it only as a container style purposes, as in
a page wrapper
• <section> is a thematic section of a document
with a heading
• <article> is a reusable section of content
• Be consistent when using these elements

13
Creating Floating Layouts

14
Creating Floating Layouts
• The float property lets you build columnar
layouts
• You can align content elements to either the
right or left side of the browser window
• A typical Web page design can contain both
floating and non-floating elements
• Remember to always use a width property for
floating elements

15
16
Creating Floating Layouts
• Building floating layouts requires that you
choose a method for containing the floating
elements
• You will often see that the floating elements
extend beyond their containing elements,
which will result in a “broken” layout

17
18
Solution 1: Using a
Normal Flow Element
• If you have multiple columns, at least one
needs to be non-floating (in the normal flow)
• The non-floating element must be positioned
with the margin properties

19
20
Solution 2: Using the Clear Property
• Use a non-floating footer element (in the
normal flow), with the clear property set to
both

21
22
Floating Elements within Floats
• Floating elements give you a wide variety of
options for building interesting page layouts
• If you are floating an element within another
element, the order of the elements is
important

23
24
25
26
Fixing Column Drops
• Column drops occur when the total width of
the columnar elements in a page layout
exceeds the width of their containing element

27
28
Clearing Problem Floats
• Floats occasionally do not appear exactly
where you want them to appear
• The clear property can solve this problem

29
30
Building a Flexible Page Layout

31
Building a Flexible Page Layout
• Flexible layouts adapt to the size of the
browser window
• With a flexible layout, your content has to
adapt and look good at a wide range of layout
sizes
• Flexible layouts are the basis for responsive
layouts used for mobile devices

32
33
34
Controlling Flexible Layout Width
• You can control the compression and
expansion of your content in a flexible layout
by setting minimum and maximum widths
div.wrapper {
width: 100%;
min-width: 750px;
max-width: 1220px;
}

35
Building a Fixed Page Layout

36
Building a Fixed Page Layout
• Fixed layouts remain constant despite the
resizing of the browser in different screen
resolutions and monitor sizes
• Many designers prefer fixed layouts because
they have more control over the finished
design
• Fixed layouts are normally contained by a
wrapper element that controls the page width
and centers the page in the browser window

37
38
Controlling Fixed Layout Centering
• A wrapper division lets you automatically center
the layout in the browser
• This is a great solution for wide-screen monitors
• Automatic centering is a simple use of the margin
property
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
border: thin solid black;
background-color: #ffc;
}

39
40
Summary
• The normal flow dictates the way in which elements
normally are displayed in the browser window
• When you remove an element from the normal flow,
you may see unexpected behavior from other elements
• Remember to always use a width property for floating
elements
• Remember to avoid using the height property
• For fixed layouts, content elements are usually
contained with a wrapper element that sets the width
for the page layout

41

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy