ppt ch07
DESCRIPTION
TRANSCRIPT
![Page 1: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/1.jpg)
Web Design Principles5th Edition
Chapter SevenDesigning Page Layouts
![Page 2: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/2.jpg)
Objectives
When you complete this chapter, you will be able to:
• 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
2Web Design Principles 5th Ed.
![Page 3: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/3.jpg)
Understanding the Normal Flowof Elements
![Page 4: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/4.jpg)
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
• Each box horizontally fills the browser window
Web Design Principles 5th Ed. 4
![Page 5: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/5.jpg)
5Web Design Principles 5th Ed.
![Page 6: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/6.jpg)
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
• 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
6Web Design Principles 5th Ed.
![Page 7: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/7.jpg)
7Web Design Principles 5th Ed.
![Page 8: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/8.jpg)
Using the Division Element to Create Content Containers
• The <div> element is your primary tool for creating content sections
• Use the box properties to create divisions in the shape you need
• You can create columns and control the space between them
• Use a container division, often called a wrapper, to contain a page layout
8Web Design Principles 5th Ed.
![Page 9: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/9.jpg)
9Web Design Principles 5th Ed.
![Page 10: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/10.jpg)
10Web Design Principles 5th Ed.
![Page 11: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/11.jpg)
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
11Web Design Principles 5th Ed.
![Page 12: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/12.jpg)
Web Design Principles 5th Ed. 12
![Page 13: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/13.jpg)
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
13Web Design Principles 5th Ed.
![Page 14: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/14.jpg)
Web Design Principles 5th Ed. 14
![Page 15: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/15.jpg)
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
15Web Design Principles 5th Ed.
![Page 16: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/16.jpg)
16Web Design Principles 5th Ed.
![Page 17: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/17.jpg)
Solution 2: Using the Clear Property
• Use a non-floating footer element (in the normal flow), with the clear property set to both
17Web Design Principles 5th Ed.
![Page 18: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/18.jpg)
18Web Design Principles 5th Ed.
![Page 19: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/19.jpg)
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
19Web Design Principles 5th Ed.
![Page 20: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/20.jpg)
Web Design Principles 5th Ed. 20
![Page 21: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/21.jpg)
Web Design Principles 5th Ed. 21
![Page 22: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/22.jpg)
Web Design Principles 5th Ed. 22
![Page 23: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/23.jpg)
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
23Web Design Principles 5th Ed.
![Page 24: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/24.jpg)
24Web Design Principles 5th Ed.
![Page 25: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/25.jpg)
Clearing Problem Floats
• Floats occasionally do not appear exactly where you want them to appear
• The clear property can solve this problem
25Web Design Principles 5th Ed.
![Page 26: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/26.jpg)
Web Design Principles 5th Ed. 26
![Page 27: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/27.jpg)
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
27Web Design Principles 5th Ed.
![Page 28: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/28.jpg)
28Web Design Principles 5th Ed.
![Page 29: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/29.jpg)
29Web Design Principles 5th Ed.
![Page 30: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/30.jpg)
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;
}
30Web Design Principles 5th Ed.
![Page 31: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/31.jpg)
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
31Web Design Principles 5th Ed.
![Page 32: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/32.jpg)
32Web Design Principles 5th Ed.
![Page 33: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/33.jpg)
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;
}
33Web Design Principles 5th Ed.
![Page 34: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/34.jpg)
34Web Design Principles 5th Ed.
![Page 35: Ppt ch07](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c7f4ce4a79592b1e8b458d/html5/thumbnails/35.jpg)
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
35Web Design Principles 5th Ed.