Scribd
Upload
946 views13 pages

2015 - s1 - Op - Week 11 Coding Day 19 Adding Naviagtion Bars

Uploaded by

api-263127781
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
946 views13 pages

2015 - s1 - Op - Week 11 Coding Day 19 Adding Naviagtion Bars

Uploaded by

api-263127781
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/ 13

CODING:

Day 19 Adding Navigation bars


GROUP: Write an outline of tags to
create a structure similar to this:

Heres an outline:
<!DOCTYPE html>
<head>
<title>My Title</title>
<style type="text/css">
#header { }
#nav { }
#main { }
#h1 { } **you may have this
</style>
</head>

<body>

<div id=header>
<h1>Header info goes here</h1>
</div>

<div id=nav>
My internal links will eventually go here.
</div>

<div id=main>
All my main content goes here text, images, links to other pages, photos, tables
</div>

</body>
</html>
NAVIGATION BAR
navigation area -- likely takes the most planning
displays links leading to other pages w/in same site
IMPORTANT DECISIONS:
How many pages do I want in my site?
What will I name those pages?

How many links are here?
What % of window width is each link?
CSS width:property
Lets you define how wide you want an
element
specify the width in pixels (using px) or in
%
% is good when you want to create equal-
width columns
divide 100 by the number of items you want
included it the width to determine the percent
width of each column

CSS width:property
For example, to have five items, each would
have a width of 20% (100 divided 5)
Four items?
each would have a width of 25% (100 divided by 4)
Three items?
each would have a width of 33.3%

HOW DO WE MAKE THE LINKS?
DOES THE NAV BAR LOOK
FAMILIAR TO ANYTHING WEVE
CREATED
<table>
<tr>
<td>
<a href="products.html">Products</a>
FIRST, to create the TABLE to hold the links:
<table style=width: 100% cellspacing=2 cellpadding=2>
<tr style=background-color: #ffcc33;>

All the info for the data
cells <td> will go here

</tr>
</table>
NOW to make the HOME link:
<td style=width 20%><a href=index.html>Home</a></td>
Lets make a page with 5 links:
1. Open layout.html in your editor
2. Click inside the navigation bar division
(between the tags <div id="nav"> and
</div><!-- End nav -->)
3. Delete the temporary placeholder text Links
go here

Lets make a page with 5 links: contd
4. Type the following tags and text.

SAVE & REFRESH
Do the links work?

You might also like