page layout design using HTML & CSS

1. +
LAB#8 Page Layouts (Flexible and Fixed Layout)
322432 Web design technology
Computer Science Khon Kaen University
By Yaowaluck Promdee, Sumonta Kasemvilas

3. +
Layouts
Page Header
Page Body
Page Footer
{
{
{

4. +
Layouts – Using <table> vs <div>

5. +
Layouts - Using <table>
Layout Page using <table> showed 2 Column
<table style="width:100%"><tr><td colspan="2" style="background-color:#600; color:#fff"><h1>Header</h1></td></tr><tr valign="top"><td style="background-color:#FF0080; width:20%;text-align:top; "><b>Navigation</b></td><td style="height:200px; text- align:top;">Content</td></tr><tr><td colspan="2" style="background-color:#600; text-align:center; color:#fff">Footer</td></tr> </table>

6. +
Layouts - Using <div> Elements

7. Example1
<div id="container" style="width:500px”>
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;
height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>

8. +
Layout Using HTML5
header
Defines a header for a document or a section
nav
Defines a container for navigation links
section
Defines a section in a document
article
Defines an independent self-contained article
aside
Defines content aside from the content (like a sidebar)
footer
Defines a footer for a document or a section
details
Defines additional details
summary
Defines a heading for the details element

9. +
Example2
header {
background-color:green; color:white; text-align:center; padding:5px; }
nav {
line-height:30px; background-color:#eeeeee;
height:300px; width:100px;
float:left; padding:5px; }
section {
width:350px; float:left; padding:10px;
}
footer {
background-color:rgb(23, 116, 116);
color:white; clear:both;
text-align:center; padding:5px;
}
<header>
</header>
<nav>
</nav>
<section>
</section>
<footer>
</footer>
/* Html code */
/* CSS code */
/* Output */

10. +
Layouts - Using <div> Elements
using a unit of measurement like the pixel ex. 800x600, 1024x780 , 1280x800, 1280x960, 1280x1024 pixel
The content of the page resizes to adapt to the size of the browser window displaying it or the font used on the page. Using a relative the percent ("%").
Relative layouts are accomplished by using a relative unit like the em
using a combination of "em" and "%" as its unit of measurement.
1.Fixed Layout
2.Liquid Layout
3.Elastic Layout
4.Hybrid Layout

11. +
Fixed And Fluid Layouts
Fixable Layout
Fluied Layout

12. +
Classification
float - an element can be pushed to the left or right, allowing other elements to wrap around it. Ex. float:left ,right, none
display - The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
Ex. Display > none , block, inline

13. +
Classification (Cont.)
clear use the clear property left right both none visibility hides an element visible hidden collapse

14. +
CSS Dimension Properties
height:
width:
max-height:
max-width:
min-hight:
min-width:
auto
length
%
inherit
none
length
%
inherit
length
%
inherit
Example. Creative Design Layouts: Getting Out Of The Box

15. Try it Using HTML5!