PAGE LAYOUTS (FLEXIBLE AND FIXED LAYOUT) WDS CS KKU 322 432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas Computer Science Khon Kaen University Web Design Technology | 2015 1
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