A fixed layout, or fixed-width layout, is just that: a layout in which the body of the page is set to a specific width. That width is typically controlled by a master “wrapper”
<div> in which all content
is contained. The width property of that <div> would be set
in the style attribute or in a style sheet entry if the <div>
was given an ID value such as “main” or “wrapper” (although the name is up to
you).When creating a fixed-width layout, the most important decision is determining the minimum screen resolution you want to accommodate. For many years, 800×600 has been the “lowest common denominator” for web designers, resulting in a typical fixed width of approximately 760 pixels. However, since 2007, the number of people using 800×600 screen resolution has been less than 8% (and is currently approximately 4%). Given that, many web designers consider 1024×768 the current minimum screen resolution, leading to fixed-width designs anywhere between 800 and 1000 pixels wide.
Liquid Layout
A liquid layout—also called a fluid layout—is one in which the body of the page does not use a specified width in pixels, although it might be enclosed in a master “wrapper”
<div> that uses
a percentage width. The idea behind the liquid layout is that it can be
perfectly usable and still retain the overall design aesthetic even if the user
has a very small or very wide screen.#1 Website Evaluation
Look for two (2) websites, one with a fixed layout and the other one with a liquid layout.
#2 A basic HTML template with no styles applied to the
<div>
elements.
<html>
<head>
<title>Sample Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">HEADER</div>
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
#3 A basic HTML template after adding some styles.
Add the following codes:
#header {
float: left;
width: 100%;
background-color: #7152F4;
}
float: left;
width: 100%;
background-color: #7152F4;
}
#footer {
float: left;
width: 100%;
background-color: #7152F4;
}
float: left;
width: 100%;
background-color: #7152F4;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
}
float: left;
padding-left: 200px;
padding-right: 125px;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
}
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
}
#content_area {
position: relative;
float: left;
background-color: #ffffff;
width: 100%;
}
position: relative;
float: left;
background-color: #ffffff;
width: 100%;
}
#4 A fixed-width/liquid hybrid layout.
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Sample Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="acmewidgets.jpg" alt="ACME Widgets
LLC"/></div>
<div id="wrapper">
<div id="content_area">
<h1>Welcome to ACME Widgets!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam tincidunt posuere malesuada. Suspendisse ac felis ac ante
tincidunt ullamcorper. Nulla vitae ligula vitae mi rhoncus
adipiscing. Etiam congue felis id ante semper at imperdiet
massa tempor. Nullam hendrerit fermentum ligula, sit amet
pellentesque purus faucibus in. Sed molestie lacus mauris,
ultrices accumsan sem. Phasellus facilisis malesuada sem, nec
ornare ipsum dictum consectetur. Nulla libero nisl,
consectetur eget accumsan vel, interdum ut risus. Donec
vitae enim vitae nulla feugiat dignissim ut sit amet odio.
Nunc non enim id sem faucibus congue. Integer ac mi in justo
euismod sodales. Aenean imperdiet vestibulum auctor. Sed ullamcorper congue ipsum, eget vulputate sem scelerisque in.
Donec ornare vestibulum congue. Etiam sapien nulla, rutrum
mattis mattis ut, pellentesque eget augue. Proin nisl mauris,
suscipit quis elementum ac, vestibulum quis lacus. Ut eget
justo vitae urna varius sodales. </p>
</div>
<div id="left_side">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="right_side"><strong>SPECIAL WIDGET DEAL!</strong><br/>
Buy three widgets and get a fourth for free.<br/><br/>
Act now!
</div>
</div>
<div id="footer"> Copyright information usually goes here.</div>
</body>
</html>
<head>
<title>Sample Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="acmewidgets.jpg" alt="ACME Widgets
LLC"/></div>
<div id="wrapper">
<div id="content_area">
<h1>Welcome to ACME Widgets!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam tincidunt posuere malesuada. Suspendisse ac felis ac ante
tincidunt ullamcorper. Nulla vitae ligula vitae mi rhoncus
adipiscing. Etiam congue felis id ante semper at imperdiet
massa tempor. Nullam hendrerit fermentum ligula, sit amet
pellentesque purus faucibus in. Sed molestie lacus mauris,
ultrices accumsan sem. Phasellus facilisis malesuada sem, nec
ornare ipsum dictum consectetur. Nulla libero nisl,
consectetur eget accumsan vel, interdum ut risus. Donec
vitae enim vitae nulla feugiat dignissim ut sit amet odio.
Nunc non enim id sem faucibus congue. Integer ac mi in justo
euismod sodales. Aenean imperdiet vestibulum auctor. Sed ullamcorper congue ipsum, eget vulputate sem scelerisque in.
Donec ornare vestibulum congue. Etiam sapien nulla, rutrum
mattis mattis ut, pellentesque eget augue. Proin nisl mauris,
suscipit quis elementum ac, vestibulum quis lacus. Ut eget
justo vitae urna varius sodales. </p>
</div>
<div id="left_side">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="right_side"><strong>SPECIAL WIDGET DEAL!</strong><br/>
Buy three widgets and get a fourth for free.<br/><br/>
Act now!
</div>
</div>
<div id="footer"> Copyright information usually goes here.</div>
</body>
</html>
body {
margin:0;
padding:0;
min-width: 525px;
}
#header {
float: left;
width:100%;
background-color: #ffffff;
}
#footer {
float: left;
width:100%;
background-color: #7152f4;
font-size: 8pt;
font-weight: bold;
text-align: center;
position: relative;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
}#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#content_area {
position: relative;
float: left;
background-color: #ffffff;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#left_side ul {
list-style: none;
margin: 12px 0px 0px 12px;
padding: 0px;
}
#left_side li a:link, #nav li a:visited {
font-size: 12pt;
font-weight: bold;
padding: 3px 0px 3px 3px;
color: #000000;
text-decoration: none;
display: block;
}
#left_side li a:hover, #nav li a:active {
font-size: 12pt;
font-weight: bold;
padding: 3px 0px 3px 3px;
color: #ffffff;
text-decoration: none;
display: block;
}
margin:0;
padding:0;
min-width: 525px;
}
#header {
float: left;
width:100%;
background-color: #ffffff;
}
#footer {
float: left;
width:100%;
background-color: #7152f4;
font-size: 8pt;
font-weight: bold;
text-align: center;
position: relative;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
}#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#content_area {
position: relative;
float: left;
background-color: #ffffff;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#left_side ul {
list-style: none;
margin: 12px 0px 0px 12px;
padding: 0px;
}
#left_side li a:link, #nav li a:visited {
font-size: 12pt;
font-weight: bold;
padding: 3px 0px 3px 3px;
color: #000000;
text-decoration: none;
display: block;
}
#left_side li a:hover, #nav li a:active {
font-size: 12pt;
font-weight: bold;
padding: 3px 0px 3px 3px;
color: #ffffff;
text-decoration: none;
display: block;
}
Walang komento:
Mag-post ng isang Komento