What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Help Needed With Multiple page coding!!!


Allison Conrad

Allison Conrad

Member
Messages
11
Likes
1
OK, I've been having a big problem with my current web design project. I want to have multiple tabs (see image below) so that people can go to different pages in the same website. I've Googled it like a crazy person, but it doesn't make sense. So I'm asking for the code used to accomplish this, and also how to use the code as well (how to write it correctly so I can edit the tab page). I am working off a mac and using Pages for the coding.

What I'm looking for: (red arrow)
outline help.jpg

Thanks in advance!
Allison :)
 
Well, I haven't put it online with a domain or anything yet, i use an online html code tester for now. But when I mess around with the link code and stuff, it doesn't do anything. Does it have something to do with the code tester?
 
There are several ways this can be made...
You can make a window the a menu on it.
You can use a menu generator... (There are several online I am sure.)
You can use dreamweaver.
There are just sooo many ways.
 
Providing your index page is in the same folder as your page 1, 2, 3 etc then all you need to do is for your link to page 1 for example your code needs to look like this.

Code: 
<a href="page1.html">page1</a>

if you want it to open up in a new tab

Code: 
<a href="page1.html" target="_blank">page1</a>

if you want it to pop up in a new window

Code: 
<a href="page1.html" target="new">page1</a>



of course this is just the linking structure and not including any styling rollovers dropdown menus etc.
 
I tried the first code there. I dunno what's going on with it. I put it in the tester (linked it to another .html document) and it couldn't find it. :O
 
Here is what the basic code should look like using the most basic table layout and basic css styling which will produce this site http://hoogledesigns.host22.com/

in the same directory there is an index.html which you have to have so when people type your web address in that is what they will land on.

Then I have saved 3 different versions of that same page as page1.html, page2.html and page3.html

So that is 4 different pages in the same folder on your hard drive and those pages uploaded to your route directory Normally if it was a more complex site you will have a seperate css styling sheet however I just embedded it into each page.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.headtitle {
    color: #FFF;
}
.mentext {
    color: #FFF;
}
</style>
</head>
<body bgcolor="#999999">
<table bgcolor="#333333"width="100%" border="2" bordercolor="#FFFFFF">
  <tr>
    <td><center>
    <h1 class="headtitle">HEADER P3</h1></center></td>
  </tr>
</table>
<table width="20%" border="3" bgcolor="#333333" bordercolor="#FFFFFF">
  <tr>
    <td><h1 ><a href="page1.html">Page 1</a></h1></td>
  </tr>
  <tr>
    <td><h1><a href="page2.html">Page 2</a></h1></td>
  </tr>
  <tr>
    <td><h1><a href="page3.html">Page 3</a></h1></td>
  </tr>
</table>


</body>
</html>
 
Back
Top