Scribd
Upload
14 views28 pages

Typical Webpage

s

Uploaded by

rouiescottr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views28 pages

Typical Webpage

s

Uploaded by

rouiescottr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

CASCADING

STYLE
SHEETS
Typical Web Page (HTML-CSS)

• Typical HTML Web Page is made


up of containers (boxes) or DIVs.
Each DIV is assigned an ID or a
Class
<div id=“container”>
<div id=“header”>Insert Title</div>
<div id=“main">content</div>
<div id=“menu”>content</div>
<div id=“footer”>content</div>
Typical Web Page (HTML-CSS)
Definition and Usage of DIV

 The <div> tag defines a division or a section in an


HTML document.
 The <div> tag is used as a container for HTML
elements - which is then styled with CSS or
manipulated with JavaScript.
 The <div> tag is easily styled by using the class or id
attribute.
 Any sort of content can be put inside the <div> tag!
 Note: By default, browsers always place a line break
before and after the <div> element.
CSS WEBSITE
LAYOUT
• A website is often divided into headers,
menus, content and a footer:
Typical Web Page (HTML-CSS)
• The CSS file uses the same
DIV/ID/Class names as the HTML
and uses them to style the
elements
#container {property: value;}
#header{property: value;}
#menu {property: value;}
#main {property: value;}
#footer {property: value;}
CODING: HEAD Section
<!DOCTYPE HTML>
1<html>
2<head>
3<meta charset="utf-8">
4<title>Demo Layout</title>
5<link type="text/css"
6rel="stylesheet"
7href="css/style.css">
</head>
Body Section

<body>

CODING: <div class="wrap">

<div class="header">
</div><!-- .header -->

<div class="content">
</div><!-- .content -->

<div class="sidebar">
</div><!-- .sidebar -->

<div class="clear"></div>

<div class="footer">
</div><!-- .footer -->

</div><!-- .wrap -->

</body>
</html>
CSS
CODING: body { margin:0; padding:0; }

.wrap {
width:980px;
margin:0 auto;
}
.header {
height:140px;
margin-bottom:15px;
background-color:#0d7963;
}
.content {
width:690px;
height:450px;
background-color:#0d7963;
float:right;
}
CODING: CSS
.sidebar {
width:275px;
height:450px;
background-color:#0d7963;
float:left;
}
.footer {
height:70px;
margin-top:15px;
background-color:#0d7963;
}
.clear {
clear:both;
}
HEADE
R
A header is usually located at the top of the
website (or right below a top navigation
menu). It often contains a logo or the website
name:
Example
:.header {
background-color:
#F1F1F1;
text-align: center;
padding: 20px;
}
CODING:
RESULT:
NAVIGATION
BAR
A navigation bar contains a list of links to
help visitors navigating through your website:
Example
:
/* The navbar container/* Navbar links */ /* Links - change color
*/ .topnav a { on hover */
.topnav { float: left; .topnav a:hover {
overflow: hidden; display: block; background-color:
background-color: color: #f2f2f2; #ddd;
#333; text-align: center; color: black;
} padding: 14px 16px;}
text-decoration: none;
}
CODIN
G:
RESULT:
Content
The layout in this section, often
depends on the target users. The
most common layout is one (or
combining them) of the following:
• 1-column (often used for mobile
browsers)
• 2-column (often used for tablets
and laptops)
• 3-column layout (only used for
desktops)
Content
The layout in this section, often
depends on the target users. The
most common layout is one (or
combining them) of the following:
• 1-column (often used for mobile
browsers)
• 2-column (often used for tablets
and laptops)
• 3-column layout (only used for
desktops)
Content
The layout in this section, often
depends on the target users. The
most common layout is one (or
combining them) of the following:
• 1-column (often used for mobile
browsers)
• 2-column (often used for tablets
and laptops)
• 3-column layout (only used for
desktops)
CODIN
G:
CODIN
G:
CODIN /* Create three equal columns that floats next to each other */
.column {
float: left;
G: width: 33.33%;
padding: 15px;
}

/* Clear floats after the columns */


.row:after {
content: "";
display: table;
clear: both;
}

/* Style the footer */


.footer {
background-color:gray;
padding: 10px;
text-align: center;
}
CODIN <div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>

G: <a href="#">Link</a>
</div>

<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>

<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscinm magna tristique.</p>
</div>

</div>
<div class="footer">
<p>Footer</p>
</div>

</body>
</html>
Unequal Columns
• The main content is the biggest and the most important
part of your site.

• It is common with unequal column widths, so that most


of the space is reserved for the main content. The side
content (if any) is often used as an alternative
navigation or to specify information relevant to the main
content. Change the widths as you like, only remember
that it should add up to 100% in total:
CODIN
G:
CODIN
G:
CODIN
G:
CODIN
G:

You might also like