Web Concepts_PageLayouts in website design.pdf

page layouts in web design

1. Web Concepts
IT4101

2. 1•History
2•Basic Website
3•Factors affecting Website design
4•Planning to build a Website
5•From basic to “wow” Website
6•Another way to build a Website

3. “WOW” Website
ADDING STYLE TO A BASIC WEBSITE

4. Cascading
Style Sheets
Typography Boxes
Page
Layouts
Graphics
and Colour
Navigation
Tables Forms
Responsive
Website

5. Page Layouts

6. Normal Flow of Elements
boxes are laid out vertically one after
the other
oit begins at the top of the containing
block
for inline elements, boxes are laid out
horizontally
oit begins at the top left of the containing
block
oinline boxes comprise the lines of text
within, for example, a <p> element

7. Float Element
when you float an element, you take it
out of the normal flow

8. Creating Content Containers
use the sectioning elementsand
occasionally <div> elementsto
create content sections
Some sectioning elements:
o<header>
o<footer>
o<article>
o<section>
o<div>

10. Which is the correct content element?
Old HTML 5 Whento use?
<div>
<div>
no special meaning; use it only as a
container style purposes, as in a page
wrapper
<section>
thematic section of a document with a
heading
<article> independent, reusable section of content

11. COLUMNS? (Use floating layouts)
Remember to always use a width
property for floating elements

12. Beware of Broken Layouts!
floating elements extend beyond their containing elements

13. Solutions!!!
(Solution #1: at least onecolumn needs to be non-floatingand must be positioned with marginproperties)

14. Solutions!!!
(Solution #2: use a non-floating footerelement with the clear property set to both)

15. Other Problems
floating elements within floats
oorder of the element is important
column drops
ototal width of column > width of containing element
osolution: adjust width or use “box-sizing: border-box” (Lesson 5.3 Boxes)
floats not appearing where you want them
osolution: use “clear” property

16. Float within a float

18. Column Drop
180px + 180px + 222px >600px

19. Clear Property

20. Flexible Page Layout
oAdapting to the size of the browser
window
➢Examine:
▪the two widths for the floating elements do not
equal 100%
▪the borders and margin contribute to the width
of each element
▪setting the values to equal 100% would overflow
the layout window

22. Flexible layout for complex designs:
Min & Max Width
control the compression and expansion of your content in a flexible layout by setting
minimum and maximum widths

23. Fixed Page Layout
oremain constant despite the resizing
of the browser in different screen
resolutions and monitor size
oPixel measurements are favored by
many designers when creating fixed
designs.

24. Centering fixed layout

25. Thank you!
IT4101 –WEB CONCEPTS