...

View Full Version : Help with coding



saski_kun
07-27-2007, 07:02 PM
How to menage HTML code so that when you click on some link it opens at the same page but with other content?
I downloaded that one table layout and now I'm trying to menage HTML coding but I don't know how to menage links so that when you click on some link (or icon) it opens on the same page but with diferent content!e
eg. When you click on "Pictures" the same page opens with picture section on it!
Does that have something to do with downloaded layout or I can menage that myself!?
Help please?! :(

whizard
07-27-2007, 07:09 PM
You need to have another page to link to, first of all.

In page one, you put a link in the code where you want the link to appear, like this:

<a href="page2.html">Page 2</a>

Then that link will open page two in the same browser window where page 1 was.

HTH
Dan

saski_kun
07-27-2007, 08:44 PM
Yeah...but I want everything to stay the same!You know...the layout and everything else just with diferent content!Like e.g. when you click on "pictures" they open in the same page and there is section with pictures now instade of "about" section!
And there is about 10 links that I wanna to be showed like that!
I saw that on many other web pages!(almost all):o

rafiki
07-27-2007, 08:47 PM
php may be a solition, or iframes, but if you dont know html, let a lone php im not sure which to suggest

saski_kun
07-27-2007, 09:30 PM
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>

Well here is a part of the code!When I click on the link the same thing opens with an # next to url in address bar.
I know very few things in html but since this is my first web site and I'm using an advanced table layout I'm not sure what to do!
I can post the whole code if someone think it would be helpful!

whizard
07-27-2007, 10:42 PM
A # shows up, because the links href is set to #.

To do what you want, you need to use Server Side Includes, or a server side language, such as PHP.

Through one of those options, you would break the page down into sections, such as a head (top) section and a foot (bottom) section, which you would use on every page, but have a different content section for each different page.

HTH
Dan

cheat
07-27-2007, 11:06 PM
you could just use a frame like this

<frameset cols="*,10%" border="0">
<frame name="main" src="content.php" marginwidth="0" marginheight="2" scrolling="auto" frameborder="0" noresize>

<frame name="menu" src="navi.php" marginwidth="5" marginheight="10" scrolling="auto" frameborder="0" noresize>

</frameset>

then in your menu set your links like this:
<a href="link1.xml" target="main">Link 1</a>

that will load the content in the same window and nothing will change except the content to the right of the menu.

frames are crude but highly effective and even save on high loading times.

effpeetee
07-27-2007, 11:22 PM
http://www.ilikecake.net/dreamweaver/dreamweaver/dw05_hyperlinks.htm

Try this URL.

If you go down the page it tells you how to do this using anchors.

Frank

Anchors
There are times when you don't want to link to another page, but you do want to link to another area in the same page. How do you do it? Easy, you use anchors. In this exercise we will create links from the top of the page to the end, and back up to the top.

Exercise - using anchors
The first thing you need to do, so that you can see where your anchor is, is to turn on your invisible elements.

saski_kun
08-06-2007, 12:13 PM
I tried everything but nothing helps!:(

VIPStephan
08-06-2007, 02:03 PM
you could just use a frame like this

<frameset cols="*,10%" border="0">
<frame name="main" src="content.php" marginwidth="0" marginheight="2" scrolling="auto" frameborder="0" noresize>

<frame name="menu" src="navi.php" marginwidth="5" marginheight="10" scrolling="auto" frameborder="0" noresize>

</frameset>

No, no, NOOO! Please, people, don’t advertise such poor pracitces and deprecated methods. Frames are outdated and should never see the daylight again (same goes for “advanced table layouts (http://www.hotdesign.com/seybold/)”). We’re in 2007 now, not 1995 anymore.

saski_kun, since websites are cached once they have been loaded (i.e. saved on your hard drive temporarily) actually there is no need for all this thought about the page staying the same and only the content changing. What you do is have two pages with identical layout and only the content section would be different. And you would link between the two pages, and effectively the overall layout stays the same, just the content section changes:



<body id="page1">
<div id="header">header content</div>
<div id="content">
main content goes here and is different on each page
<a href="page2.htm">link to page 2</a>
</div>
<div id="footer">footer content</div>
</body>




<body id="page2">
<div id="header">header content</div>
<div id="content">
here is other content than on page 1 but the general layout is the same, hence basically nothing’s changing except the content
<a href="page1.htm">link to page 1</a>
</div>
<div id="footer">footer content</div>
</body>


And please don’t abuse tables for layout purposes. Use semantic HTML (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) and style it with CSS.

saski_kun
08-06-2007, 09:00 PM
Yeah..but I downloaded this layout!It wasn't made by me!And I don't have my own domain!I use bravehost and everything seems to be hard with it!And I don't know much about coding!
And I don't know how to create a second page!And where to put the code you posted!

Here's the code:


<HTML>
<HEAD>
<TITLE>Bloody Sakura</TITLE>
<link rel=stylesheet href="style.css" type=text/css>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-1) -->
<TABLE WIDTH=auto BORDER=0px CELLPADDING=0 CELLSPACING=0 align="center" style="border:solid; border-width:1px; border-color:#ffffff;">
<tr>
<td>


<TABLE WIDTH=825 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
<TR>
<TD COLSPAN=11>
<IMG SRC="http://thisneworder.bravehost.com/spring_01.jpg" WIDTH=825 HEIGHT=76 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=76 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=8 ROWSPAN=2>
<IMG SRC="http://thisneworder.bravehost.com/spring_02.jpg" WIDTH=547 HEIGHT=320 ALT=""></TD>



<!--Start Top Content Here -->


<TD COLSPAN=2 style="background:url(http://thisneworder.bravehost.com/spring_03.jpg); background-repeat:no-repeat" width="251" height="261" valign="bottom">
<p class="head" align="center">Updates</p>

<div style="width:245px; height:205px; overflow:auto;">

<p class="glow1"><img src="http://thisneworder.bravehost.com/kagrrasmallav1.gif" align="Right">******
+++++++*******<br>

</div>
</TD>


<!--End Top Content Here -->


<TD ROWSPAN=2>
<IMG SRC="http://i101.photobucket.com/albums/m45/silke_05/spring_04.jpg" WIDTH=27 HEIGHT=320 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=261 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="http://i101.photobucket.com/albums/m45/silke_05/spring_05.jpg" WIDTH=251 HEIGHT=59 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=59 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7 ROWSPAN=2>
<IMG SRC="http://thisneworder.bravehost.com/spring_06.jpg" WIDTH=521 HEIGHT=113 ALT=""></TD>



<!--Start Top Links Here -->

<TD COLSPAN=4 style="background:url(http://thisneworder.bravehost.com/spring_07.jpg); background-repeat:no-repeat;" height="33px" width="304px">

<p align="center">
<a href="http://thisneworder.bravehost.com/sakura_01.gif">About</a> |
<a href="#">Jrock</a> |
<a href="#">Music</a> |
<a href="#">Architecture</a> |
<a href="#">Art</a> |
<a href="#">Lovek</a> |
<a href="#">Ideas</a>
</TD>

<!--End Top Links Here -->



<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="http://thisneworder.bravehost.com/spring_08.jpg" WIDTH=304 HEIGHT=100 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=80 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="http://thisneworder.bravehost.com/spring_09.jpg" WIDTH=39 HEIGHT=270 ALT=""></TD>



<!--Start Buttons/Extra Navigation Here -->

<TD ROWSPAN=2 style="background:url(http://thisneworder.bravehost.com/spring_10.jpg); background-repeat:no-repeat" height="270px" width="112px" valign="top">

<p align="center"><img src="http://thisneworder.bravehost.com/sakura2.gif"></p>

<p align="center">
<img src="http://thisneworder.bravehost.com/button1.gif"><br><br>
<img src="http://thisneworder.bravehost.com/button2.gif"><br><br>
<img src="http://thisneworder.bravehost.com/button3.gif">

</p>
</TD>
<!--End Buttons/Extra Navigation Here -->



<TD COLSPAN=5>
<IMG SRC="http://thisneworder.bravehost.com/spring_11.jpg" WIDTH=370 HEIGHT=20 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=20 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spring_12.jpg" WIDTH=19 HEIGHT=250 ALT=""></TD>



<!--Start Main Navigation Here -->

<TD style="background:url(http://thisneworder.bravehost.com/spring_13.jpg); background-repeat:no-repeat" height="250" width="122" valign="top">

<p align="center"><img src="http://thisneworder.bravehost.com/sakura2.gif">
<table width="105" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="sakura">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
</table>
</p>


<p align="center"><img src="http://thisneworder.bravehost.com/sakura2.gif">
<table width="105" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
<tr>
<td>*.<a href="#">Link</a></td>
<td>*.<a href="#">Link</a></td>
</tr>
</table>
</p>
</TD>

<!--End Main Navigation Here -->


<TD COLSPAN=2>
<IMG SRC="http://thisneworder.bravehost.com/spring_14.jpg" WIDTH=34 HEIGHT=250 ALT=""></TD>



<!--Start Main Content Here -->

<TD COLSPAN=3 style="background:url(http://thisneworder.bravehost.com/spring_15.jpg); background-repeat:no-repeat;" height="250px" width="443px" valign="top">
<Div align="center" style="height:245px; width:443px; overflow:auto">

<p><img src="http://thisneworder.bravehost.com/sakuraavatar2.gif" align="left" alt="sakura"> ******************************
**********************++++++++++++


</p>

<center>
<p class="head1" align="center">Using This Layout</p>
</center>

<p>++++++++++++++++++++++************** <br><br>
</p>

<center>
<p class="head1" align="center">Terms</p>
</center>

<p align="center">**************++++++++++</p>

<br>
<br>
</Div>
</TD>

<!--End Main Content Here -->



<TD COLSPAN=2>
<IMG SRC="http://thisneworder.bravehost.com/spring_16.jpg" WIDTH=56 HEIGHT=250 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=250 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC="http://thisneworder.bravehost.com//spring_17.jpg" WIDTH=825 HEIGHT=27 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=27 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5>
<IMG SRC="http://thisneworder.bravehost.com/spring_18.jpg" WIDTH=325 HEIGHT=65 ALT=""></TD>



<!--Start Credits Here -->

<TD COLSPAN=6 style="background:url(http://thisneworder.bravehost.com/spring_19.jpg);background-repeat:no-repeat" width="500" height="65">
<p align="center">
Site
&copy; Your Name<br>
Layout &copy; <a href="http://www.deadeyes-star.com">Deadeyes-star.com</a><br>
Images from <a href="http://urei.livejournal.com">Urei</a>
</p>
</TD>

<!--End Credits Here -->


<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=65 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=39 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=112 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=19 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=122 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=33 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=195 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=26 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=222 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="http://thisneworder.bravehost.com/spacer.gif" WIDTH=27 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>

</td>
</tr>
</TABLE>
<!-- End ImageReady Slices -->


<SCRIPT language=JavaScript1.2>
<!-- Begin
//<!-- Original: Altan (snow@altan.hr) -->
//<!-- Web Site: http://www.altan.hr/snow -->


var no = 20; // STAR number
var speed = 9; // smaller number moves the STAR faster
STAR = new Array();
STAR[0] = "http://thisneworder.bravehost.com/sakura_01.gif"; // ?STAR[?]??0
STAR[1] = "http://thisneworder.bravehost.com/sakura_02.gif";
STAR[2] = "http://thisneworder.bravehost.com/sakura_03.gif";
STAR[3] = "http://thisneworder.bravehost.com/sakura_04.gif";
STAR[4] = "http://thisneworder.bravehost.com/sakura_05.gif";
STAR[5] = "http://thisneworder.bravehost.com/sakura_06.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 1500, doc_height = 1800;

if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + STAR[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + STAR[j] + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +" VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + STAR[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +" VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + STAR[j] + "\" border=\"0\"></div>");
}
}
if (j == (STAR.length-1)) { j = 0; } else { j += 1; }
}

function STAR_NS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("STAR_NS()", speed);
}

function STAR_IE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("STAR_IE()", speed);
}

if (ns4up) {
STAR_NS();
} else if (ie4up) {
STAR_IE();
}

// End -->
</SCRIPT>
<style type="text/css">
<!--
body {
background:url(images/background5.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom;
scrollbar-arrow-color: #CBC7FA;
scrollbar-base-color: #CBC7FA;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #CBC7FA;
scrollbar-shadow-color: #CBC7FA;
scrollbar-3dlight-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}



td {font-family: verdana; font-size: 10px; color:#676767; font-weight:normal;}

th {font-family: verdana; font-size: 10px; color: #676767; font-weight:normal;}

tr {font-family: verdana; font-size: 10px; color: #676767; font-weight:normal;}

p {font-family: verdana; font-size: 10px; color: #676767; font-weight:normal;}


.head { font-family: verdana; font-size: 10px; font-weight:bold; color:#4C4C4C; width:245px; height:auto; background-color:#ffffff; background-image:url(images/banner1.jpg); border:solid; border-color:#676767; border-width:1px;}
.head1 { font-family: verdana; font-size: 10px; font-weight:bold; color:#4C4C4C; width:400px; height:auto; background-color:#ffffff; background-image:url(images/banner1.jpg); border:solid; border-color:#676767; border-width:1px;}





A:link
{color:#676767;text-decoration:underline; font-size:10px; cursor: crosshair;}
A:visited
{color:#676767;text-decoration:underline; font-size:10px; cursor: crosshair;}
A:active
{color:#676767;text-decoration:none; font-size:10px; cursor: crosshair;}
A:hover
{color:#676767;text-decoration:line-through; font-size:10px; cursor: crosshair;}

body
{background-color: #ffffff;
font-family: verdana;
color: #676767;
letter-spacing: 0px;
font-weight: normal;
font-size: 10px;}
-->


</style>
<!-- Start Bravenet.Com Service Code -->
<a style="font: bold 12px tahoma, sans-serif; color: #004891;" href="http://pub39.bravenet.com/photocenter/album.php?usernum=3333879670&amp;cpv=2">View my Photo Gallery</a><br>
<a style="font: 10px tahoma, sans-serif; color: #000;" href="http://www.bravenet.com/webtools/photocenter/" >Free Photo Albums by Bravenet.com</a>
<!-- End Bravenet.Com Service Code -->



</BODY>
</HTML>



So can you tell me where to put those codes!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum