Web Design Technology | 2015 1

PAGE LAYOUTS (FLEXIBLE AND FIXED LAYOUT)

WDSCS KKU

322 432 Web Design TechnologyBy Yaowaluck Promdee, Sumonta Kasemvilas

Computer Science Khon Kaen University

Web Design Technology | 2015 2

WDSCS KKU

Web Design Technology | 2015 3

LayoutsPage Header

Page Body

Page Footer{{{

WDSCS KKU

Web Design Technology | 2015 4

Layouts – Using <table> vs <div>WDS

CS KKU

Web Design Technology | 2015 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>

WDSCS KKU

Web Design Technology | 2015 6

Layouts - Using <div> ElementsWDS

CS KKU

Web Design Technology | 2015 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>

WDSCS KKU

Web Design Technology | 2015 8

Layout Using HTML5header Defines a header for a document or a sectionnav Defines a container for navigation linkssection Defines a section in a documentarticle 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 sectiondetails Defines additional detailssummary Defines a heading for the details element

WDSCS KKU

Web Design Technology | 2015 9

Example2header { 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 */

WDSCS KKU

Web Design Technology | 2015 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 Layout3. Elastic Layout4. Hybrid Layout

WDSCS KKU

Web Design Technology | 2015 11

Fixed And Fluid Layouts Fixable Layout Fluid Layout

Web Design Technology | 2015 12

Classificationfloat - 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

WDSCS KKU

Web Design Technology | 2015 13

Classification (Cont.)clear use the clear property left

rightbothnone

visibility hides an element visible

hiddencollapse

WDSCS KKU

Web Design Technology | 2015 14

CSS Dimension Propertiesheight: width:

max-height:max-width:

min-hight:min-width:

autolength%inheritnonelength%inheritlength%inherit

Example.Creative Design Layouts: Getting Out Of The Box

WDSCS KKU

Web Design Technology | 2015 15

Example Layout HTML5WDSCS KKU

Web Design Technology | 2015 16WDS

CS KKU

Assignmenth1,font=Arial black,,font color= #FFF color, shadow=2px 2px blur 5px,#33333,spacing with character 5px

width:70%

heig

ht:4

60px

heig

ht:3

00px

height:100px

width:300px

border 5px solid #666

margin=center

margin=center

margin:20px

word spacing10px

box1-3 padding15,10,0,10px,text justify

color#6CF#09Clightgreycornflowerbluergb(23,116,116)

Web Design Technology | 2015 17

<header><h1>header</h1> </header><nav> Navigition</nav><section><article>Box 1<p>Web design concepts,color setting, background, content, layout, font design, create web by Tools, and graphic tools</p></article><article>Box 2<p>Web design concepts,color setting, background, content,layout, font design, create web by Tools, and graphic tools</p></article> <article>Box 3<p>Web design concepts,color setting, background, content, layout, font design, create web by Tools, and graphic tools</p></article> </section><footer>web design technology </footer>

HTML CODE