Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Adobe CS4 Dreamweaver help. Simple problem?

silvergts1998

silvergts1998

macrumors member
Original poster
Nov 11, 2008
47
3
I just got this program and been messing with it. I don't do allot with web but just wanted to learn more about it just for myself.

Here's the question:

I used photoshop to slice my image file. I save it as a html and image file. I save the html part as the index.html. I open it in dreamweaver cs4 and center the sliced images. Now when I take an ap div tag file and put text in it, all looks fine. Now here's where I run into problems. When I resize the screen, the sliced image files centers fine but the ap div portion of it doesn't move with the slice images to stay in it's perspective spot.

So how do I make it where the ap div layer stays in perspective to where I put it no matter what the screen resolution is?

Any clues for a clueless person?



Here's the code. Sorry it's long.




<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>QW Template</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:693px;
top:386px;
width:280px;
height:197px;
z-index:1;
}
body,td,th {
color: #FFF;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/ON-NAV_04.jpg','images/ON-NAV_05.jpg','images/ON-NAV_06.jpg','images/ON-NAV_07.jpg','images/ON-NAV_08.jpg','images/ON-NAV_09.jpg')">
<!-- Save for Web Slices (QW Template.psd) -->
<div id="apDiv1">Test test!</div>
<table width="850" height="1132" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="8">
<img src="images/Index_01.jpg" width="850" height="60" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_02.jpg" width="850" height="97" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Index_03.jpg" width="302" height="17" alt=""></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/ON-NAV_04.jpg',1)"><img src="images/Index_04.jpg" name="Home" width="65" height="17" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product','','images/ON-NAV_05.jpg',1)"><img src="images/Index_05.jpg" name="product" width="90" height="17" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('order','','images/ON-NAV_06.jpg',1)"><img src="images/Index_06.jpg" name="order" width="73" height="17" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('support','','images/ON-NAV_07.jpg',1)"><img src="images/Index_07.jpg" name="support" width="85" height="17" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact us','','images/ON-NAV_08.jpg',1)"><img src="images/Index_08.jpg" name="contact us" width="114" height="17" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('customers','','images/ON-NAV_09.jpg',1)"><img src="images/Index_09.jpg" name="customers" width="106" height="17" border="0"></a></td>
<td>
<img src="images/Index_10.jpg" width="15" height="17" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_11.jpg" width="850" height="30" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_12.jpg" width="850" height="24" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_13.jpg" width="850" height="22" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_14.jpg" width="850" height="130" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_15.jpg" width="850" height="162" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_16.jpg" width="850" height="201" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_17.jpg" width="850" height="123" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_18.jpg" width="850" height="153" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Index_19.jpg" width="850" height="113" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
 
wow.. that's too much code for my eyes at this time :D

Take a look at some tutorials to help you. I recommend these guys:
http://designprovideo.com/tutorial/dreamweavercs4101

You can watch the first 10% of the tutorial for free just by registering and you can watch their entire suite of video tutorials online (includes loads a PS, Flash, Lighroom, Illustrator... you get the idea!) free for the first month by subscribing... It is $25 a month after that I think..

:apple:
 
What version of Photoshop are you using? When you save for web you should be able to place the slices within divs instead of tables and to generate CSS. Doing this will go a huge step forward on solving your problem and making your whole layout easier to manage.

Other than that, without being able to look at the site itself, it is hard to offer any help. Can you upload it somewhere or make it a .zip and attach it to a post?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back