Dreamweaver, table, target help please!

bigmaddaz · Jul 8, 2007

Created a website with photoshop, sliced it all up, brought it into Dreamweaver so its all in a table and each part sliced up (links, title etc...)

Problem lies here....

.. the links on the left which are images in there own cell, when they are clicked I want it to load a link, but I want it to load inside the table in a particular cell. The cell I want them to load in is basically one large cell where the main body appears. So when you make a link in dreamweaver, and u select the link and you have the dropdown box for the target, you have "_blank, _parent, _self, _top" ... well I want to make my own target, which would be the cell I want the info to appear in. Im really crap and trying to explain this situation but I hope someone understands. Ive looked into anchors etc.. but thats really just for one part of the page, where I want the table to stay same with title, links etc... but when the links are clicked they load in the big cell which would be the main body.

Cheers in advance!

Daz

jimmy_mac · Jul 8, 2007

From the sounds of it..

To make life easy for yourself, use the title page as a template and just have a different page load, the page will be the same, but the the text in the designated cell will be different.

If that makes sense, that's what I've gathered from what you've said.

bigmaddaz · Jul 8, 2007

Cheers for the response jimmy, ive just been reading up and got it working now.... was to do with "iframes"

jimmy_mac · Jul 8, 2007

I'd suggest buying the Dreamweaver for dummies book. Not that you're a dummy

but it is a great book, I've been using Dreamweaver for about 6 years now and still need to reference things sometimes. I've got other books, but they are slightly more expensive than that one

172.com · Jul 8, 2007

IFrames are evil, avoid if you can.

Adams_16v · Jul 8, 2007

dont use iframes or tables for layout. both more trouble than they are worth and arent that compatible in different browsers!

KarKiller · Jul 8, 2007

Agree about table layouts, there's quite a good book called CSS Mastery which has useful info on layouts etc using CSS. You can probably get all the info on the web but this was quite a good book to read through. I think I have a PDF copy if you want a browse, just PM me.

stonergirl80 · Jul 8, 2007

Hi, I just wanted to say Hi, i'm trying to start up business as a small time web designer, so if anyone wants any help please feel free to pm me....

Might be able to offer help with most problems etc... Will try anyhow.x
my website is http://www.web-design-to-hosting.co.uk
All comments gratefully received....lol....Please don't be too cruel! Let me don't gently if its cr*p.

bigmaddaz · Jul 9, 2007

Im having problems with the tables, lol! Whats best way then instead of Iframes? Im desiging the website in photoshop then slicing it all up. I basically want a website in the centre of the page not full page.

Adams_16v · Jul 9, 2007

if you want the page in the middle of the screen you want a 'content' DIV with a fixed width of say 780px. then the CSS for the 'body' needs to be:

margin: 0 auto 0 auto;

donofkarma · Jul 10, 2007

Ditch the tables and iframes. Get a book on CSS or get online and google some tutorilas...

bigmaddaz · Jul 10, 2007

Mmmmm ill start reading into CSS, and "content" DIV whatever that is!

My design was like this using iframes:

http://www.aoqo38.dsl.pipex.com/jogon.jpg

The code was:

<html>
<head>
<title>Jogon Bonito Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
index_04_over = newImage("images/index_04-over.jpg");
index_05_over = newImage("images/index_05-over.jpg");
index_06_over = newImage("images/index_06-over.jpg");
index_07_over = newImage("images/index_07-over.jpg");
index_08_over = newImage("images/index_08-over.jpg");
index_09_over = newImage("images/index_09-over.jpg");
index_10_over = newImage("images/index_10-over.jpg");
preloadFlag = true;
}
}

</script>

</head>
<body bgcolor="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="100%" onload="preloadImages();">
<div align="center"></div>
<div align="center"></div>
<table width="800" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="2"> <img src="images/index_01.jpg" alt="" width="800" height="107" border="0" usemap="#Map"></td>
</tr>
<tr>
<td width="167"> <img src="images/index_02.jpg" width="167" height="53" alt=""></td>
<td width="633" rowspan="9" align="right" bgcolor="#000000">
<iframe name="iframe" width="100%" height="100%" frameborder="0"></iframe>
<div align="center"></div></td>
</tr>
<tr>
<td> <a href="players.htm"><img name="index_04" src="images/index_04.jpg" width="167" height="40" border="0" alt=""></a></td>
</tr>
<tr>
<td> <img name="index_05" src="images/index_05.jpg" width="167" height="39" border="0" alt=""></td>
</tr>
<tr>
<td> <img name="index_06" src="images/index_06.jpg" width="167" height="42" border="0" alt=""></td>
</tr>
<tr>
<td> <img name="index_07" src="images/index_07.jpg" width="167" height="43" border="0" alt=""></td>
</tr>
<tr>
<td> <a href="#"
onmouseover="changeImages('index_08', 'images/index_08-over.jpg'); return true;"
onmouseout="changeImages('index_08', 'images/index_08.jpg'); return true;"
onmousedown="changeImages('index_08', 'images/index_08-over.jpg'); return true;"
onmouseup="changeImages('index_08', 'images/index_08-over.jpg'); return true;">
<img name="index_08" src="images/index_08.jpg" width="167" height="42" border="0" alt=""></a></td>
</tr>
<tr>
<td> <a href="#"
onmouseover="changeImages('index_09', 'images/index_09-over.jpg'); return true;"
onmouseout="changeImages('index_09', 'images/index_09.jpg'); return true;"
onmousedown="changeImages('index_09', 'images/index_09-over.jpg'); return true;"
onmouseup="changeImages('index_09', 'images/index_09-over.jpg'); return true;">
<img name="index_09" src="images/index_09.jpg" width="167" height="42" border="0" alt=""></a></td>
</tr>
<tr>
<td> <a href="#"
onmouseover="changeImages('index_10', 'images/index_10-over.jpg'); return true;"
onmouseout="changeImages('index_10', 'images/index_10.jpg'); return true;"
onmousedown="changeImages('index_10', 'images/index_10-over.jpg'); return true;"
onmouseup="changeImages('index_10', 'images/index_10-over.jpg'); return true;">
<img name="index_10" src="images/index_10.jpg" width="167" height="39" border="0" alt=""></a></td>
</tr>
<tr>
<td> <img src="images/index_11.jpg" width="167" height="153" alt=""></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="264,1,692,87" href="main.htm" target="iframe">
</map>
</body>
</html>

donofkarma · Jul 10, 2007

Hmmm... The problem with using tables is that they aren't accessible and a very old way of coding. With IE7 now out (which most people are going to use) you can make a site using xhtml/css very easily (little or no hacking). Also, your javascript rollover effect won't work if it's disabled by the user.

If I get a chance when I get home I'll see if I can knock up a css version of that if you want?

Nigel · Jul 10, 2007

donofkarma said:
If I get a chance when I get home I'll see if I can knock up a css version of that if you want?

If you do post a link on here so we can have a look at how others do things!

donofkarma · Jul 10, 2007

no worries mate!

bigmaddaz · Jul 10, 2007

If you do have free time mate and wouldnt mind having a go please do! cheers!

donofkarma · Jul 10, 2007

Right, I've had about 20 mins to have a quick go and I've done a very basic layout of the jpg you gave in post #12.

The images that you used for the main header image, nav buttons and curves on the border have been replaced with plain text and css borders (straight lines) as I didn't have time to draw all of them in photoshop. The image rollover you used javascript for has been replaced with css and will change the nav links from white to orange.

An extra thing I've added is a zooming effect when you increase the font size mainly for accessibility purposes. Instead if just making the text bigger it will increase the site as a whole.

All of it is W3C valid xhtml and css - what all websites should aim for - and tested in IE6, IE7 Standalone and Firefox 2 (latest version) on Win XP SP2 down to a res of 1024x768 - although it will work on 800x600 on IE7 and Firefox 2 without side scrolling, IE6 is just a few pixels out.

The page can be found here: http://www.cftechnology.co.uk/websites/jogon/

I hope this helps you out a bit and if you have any questions let me know. Also if anyone can find bugs with the code or has other ways of doing things using css I'd like to hear from you as it would be interesting to see how coding styles differ.

-Jas.

bigmaddaz · Jul 11, 2007

thanks very much for this mate! much appreciated one thing, could you send me the files via email? bigmaddaz@hotmail.com

cheers again! much appreciated!

donofkarma · Jul 11, 2007

I'll sort that out when I get home tonight!

bigmaddaz · Jul 11, 2007

Ok cheers mate!

Search

Search

Dreamweaver, table, target help please!

bigmaddaz

jimmy_mac

bigmaddaz

jimmy_mac

172.com

Adams_16v

KarKiller

stonergirl80

bigmaddaz

Adams_16v

donofkarma

bigmaddaz

donofkarma

Nigel

donofkarma

bigmaddaz

donofkarma

bigmaddaz

donofkarma

bigmaddaz

Similar threads