divs and css

Document Sample
divs and css Powered By Docstoc
					Divs and Css
You can divide a web page up into sections. These sections are called divisions, div for
short. The web page below has three divisions, or divs.




Items such as the titles and logos can go in the header div. A set of hyperlinks can go in
the navigational or nav div; and, the content of the web page can go in the content div.

Now that we have the divisions, we can define some attributes for each division. These
attributes consist of items such as borders, spacing, colors, font sizes, headings, and
images. Collectively, a set of attributes for a division is called the division's style.

CSS is a computer language that allows one to set up a style sheet for a web page, where
the style for each division of the web page is defined. Following is the style sheet for the
above page. It is called layout.css.
body{
         margin: 0;
         text-size: 100%;
}
#nav{
         line-spacing: 0;
         float: left;
         width: 17%;
         height: 1000;
         background-color: #FF0000;
}
#header{
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      width: 100%;
      height: 100px;
      background-color: #F0FF00;
}
#content{
      line-spacing: 0;
      float: left;
      width: 83%;
      height: 1000;
      background-color: #FFF;
}

Following is an html file that generates the above web page. Note how the html code
places or stacks the divs on the page. Also, starting on the 6th line, note how the style
sheet is imported.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css" media="all">
        @import url('template.css');
</style>
</head>

<body>
<div id="header">&nbsp;</div>
<div id="nav">

</div>
<div id="content">
</div>

</body>

</html>


Changing the Color of the Divs

First, go to the following web site and view the hexidecimal values for some of your
favorite colors.

http://html-color-codes.com/

Then go to the style sheet and change the background-color property for both the nav div
and the header div, as shown below.




View the page again. You should get the following results, minus the hexadecimal
numbers.
Re-align the nav div

Next, let's make the nav div show up on the right of the page, instead of the left. This can
be done by changing the float attribute, as shown below.




View the page again. You should get the following results.
Making More Pages

Next we will want to make a total of 4 web pages, including the homepage, for this web
site. For now these pages will be copies of the above page. So just save the above page
three more times with the names page1.html, page2.html, and page3.html. You now have
a total of four pages: index.html, page1.html, page2.html, and page3.html. Open each of
these pages in TextPad.

Next, put the following html code in the body of each page.

For the Homepage,

<div id="header"></div>
<div id="nav">
       <a href="index.html">Homepage</a><br>
       <a href="page1.html">Page 1</a><br>
       <a href="page2.html">Page 2</a><br>
       <a href="page3.html">Page 3</a><br>
</div> <!--end of div navheader-->

<div id="content">
       <center><h1>Home Page</h1></center>
</div>
For page 1,
<div id="header"></div>

<div id="nav">
       <a href="index.html">Homepage</a><br>
       <a href="page1.html">Page 1</a><br>
       <a href="page2.html">Page 2</a><br>
       <a href="page3.html">Page 3</a><br>
</div> <!--end of div navheader-->

<div id="content">
       <center><h1>Page 1</h1></center>
</div>

For page 2,

<div id="header"></div>

<div id="nav">
       <a href="index.html">Homepage</a><br>
       <a href="page1.html">Page 1</a><br>
       <a href="page2.html">Page 2</a><br>
       <a href="page3.html">Page 3</a><br>
</div> <!--end of div navheader-->

<div id="content">
       <center><h1>Page 2</h1></center>
</div>

For page 3,

<div id="header"></div>

<div id="nav">
       <a href="index.html">Homepage</a><br>
       <a href="page1.html">Page 1</a><br>
       <a href="page2.html">Page 2</a><br>
       <a href="page3.html">Page 3</a><br>
</div> <!--end of div navheader-->

<div id="content">
       <center><h1>Page 3</h1></center>
</div>

Each page should now have a header in the content area, and a set of hyperlinks in the
nav area. For example, page 1 should look like the following diagram.
If any of your pages are not working, compare them to the code for the home page, which
is shown next.

<html>
<head>
      <title>Floyd Central</title>
         <style type="text/css" media="all">
              @import url(layout.css);
         </style>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id="header"></div>
<div id="nav">
  <a href="index.html">Homepage</a><br>
  <a href="page1.html">Page 1</a><br>
  <a href="page2.html">Page 2</a><br>
  <a href="page3.html">Page 3</a><br>
</div> <!--end of div nav -->
<div id="content">
       <center><h1>Homepage</h1></center>
</div> <!-- end of div content -->
</body>
</html>




Making the Links Look More Attractive
We will start by changing the the font color of the links. Do this by adding the following
code to the style sheet.




Next, check your links on each page they should now all be in black.

We can create a hover effect for the links. This means that when the cursor passes over
the link it will change colors. To accomplish this, add the following code to style sheet.




Add an Image to a Div Area
You can add an image to a div area by using a veriant of the following command:

background: #ccff00 url('image.jpg') no-repeat right;

The image file and the background color are the variables.

If you have an image in the same folder as the index and css file, and you can insert the
image into, for example, the header div as shown below.




Make sure you have an image in the same folder as the index and css file named
'image1.jgp'. Then view your page.




Finally, have your teacher show you the layout.css file, and the main.html file that uses it,
for the FCHS Web site.