PDA

View Full Version : Dreamweaver 8/Fireworks



k8smum
01-09-2006, 02:46 PM
Hi
I have made a web header page using Fireworks, including rollovers and multiple swap images. Its working just as I want when I view it in IE6. However, when I bring the Fireworks file into Dreamweaver and make a template based on the common items created in Fireworks, it works fine until I try to add stuff to a new page based on the template. If I put other images in the body of the web page, add text or insert a table, it pushes my left menu navigation buttons out of alignment and makes a mess of the page. Is there a way to lock the common page elements so they are not affected by the addition of more images/text, etc? I would have thought that was the point of a template. Thanks.

mejobloggs
01-09-2006, 03:31 PM
Can you stick the page up on the net so we can have a look?

E|im
01-09-2006, 10:11 PM
The problem with making sites in Dreamweaver is you need to know how it all works behind the scenes i.e. learning the HTML/XHTML which makes it work. Because if you knew that you would know how to fix it up manually and realise you're probably inserting your items into the completely wrong tags for it to work.

Dreamweaver is a tool to assist professionals in making websites and make some of the manual tasks quicker and easier. It's not a tool for newbies who think making websites is all about dragging and dropping on items and hoping it'll work.

Get a tutorial book out on how to use Dreamweaver and learn some XHTML & CSS. Then you'll be flying.

k8smum
01-09-2006, 11:48 PM
Dreamweaver is a tool to assist professionals in making websites and make some of the manual tasks quicker and easier. It's not a tool for newbies who think making websites is all about dragging and dropping on items and hoping it'll work..."
_________________________

FYI E|im, I do know something about html. I have used Frontpage for a couple of years now. I recently acquired a copy of Dreamweaver, etc., and thought I'd give it a try. I have managed to get as far as I have simply by doing some web research. There are (thankfully) plenty of clever people out there willing to give their knowledge freely in easy-to-understand language with good working examples in most cases. I am by no means any sort of expert, but neither am I completely useless as you assume.

Anyhow, I would still like some help with my problem, if there is someone out there who can assist me, please. Meantime (and here I am probably showing my ignorance) if someone could explain how I can put a link here so you can see what I'm on about, I wouod gladly do so. Thanks all.

DeSade
02-09-2006, 12:43 AM
I can't help you with your problem as I do all my HTML coding in notepad heh

However I can help with the link
In the control bar above the reply window there is a icon with a globe in it
click it.

Insert the URL as it asks for and it will insert the link like this



http://www.pressf1.co.nz (http://meh.co.nz)

Rob99
02-09-2006, 01:49 AM
If you could get it online somewhere, would be great, otherwise paste all the code here.

DeSade
02-09-2006, 02:03 AM
I'll try that again, I thought the code box was susposed to allow code to be typed but not run.....



http://www.pressf1.co.nz


thats not going to work it seems the tags are you need are these without the *
[url*] and to close it [/url*] insert the url between them

k8smum
02-09-2006, 01:20 PM
The code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--

body {
background-color: #003366;
}td img {display: block;}
-->
</style>
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:553px;
height:210px;
z-index:1;
left: 190px;
top: 248px;
}
-->
</style>
<link href="klee_plumbers/main.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
</head>

<body onload="MM_preloadImages('klee_plumbers/images/images/header_r2_c2_f2.jpg','klee_plumbers/images/images/navigation_f4.jpg','klee_plumbers/images/images/header_r3_c2_f2.jpg','klee_plumbers/images/images/navigation_f2.jpg','klee_plumbers/images/images/header_r4_c2_f2.jpg','klee_plumbers/images/images/navigation_f3.jpg','klee_plumbers/images/images/header_r5_c2_f2.jpg','klee_plumbers/images/images/navigation_f5.jpg','klee_plumbers/images/images/header_r6_c2_f2.jpg','klee_plumbers/images/images/navigation_f6.jpg','klee_plumbers/images/images/header_r8_c2_f2.jpg','klee_plumbers/images/images/header_r10_c2_f2.jpg','klee_plumbers/images/images/navigation_f7.jpg','klee_plumbers/images/images/header_r11_c2_f2.jpg','klee_plumbers/images/images/navigation_f8.jpg')">
<table width="708" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="header.png" fwbase="header.jpg" fwstyle="Dreamweaver" fwdocid = "1386103327" fwnested="0" -->
<tr>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="150" height="1" border="0" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="556" height="1" border="0" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><img name="header_r1_c1" src="klee_plumbers/images/images/header_r1_c1.jpg" width="708" height="233" border="0" id="header_r1_c1" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="233" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="14"><img name="header_r2_c1" src="klee_plumbers/images/images/header_r2_c1.jpg" width="1" height="367" border="0" id="header_r2_c1" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r2_c2','','klee_plumbers/images/images/header_r2_c2_f2.jpg','navigation','','klee_plumber s/images/images/navigation_f4.jpg',1)"><img name="header_r2_c2" src="klee_plumbers/images/images/header_r2_c2.jpg" width="150" height="25" border="0" id="header_r2_c2" alt="" /></a></td>
<td colspan="2" rowspan="12" align="left" valign="top" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="main" --><!-- InstanceEndEditable --></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r3_c2','','klee_plumbers/images/images/header_r3_c2_f2.jpg','navigation','','klee_plumber s/images/images/navigation_f2.jpg',1)"><img name="header_r3_c2" src="klee_plumbers/images/images/header_r3_c2.jpg" width="150" height="26" border="0" id="header_r3_c2" alt="" /></a></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r4_c2','','klee_plumbers/images/images/header_r4_c2_f2.jpg','navigation','','klee_plumber s/images/images/navigation_f3.jpg',1)"><img name="header_r4_c2" src="klee_plumbers/images/images/header_r4_c2.jpg" width="150" height="26" border="0" id="header_r4_c2" alt="" /></a></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r5_c2','','klee_plumbers/images/images/header_r5_c2_f2.jpg','navigation','','klee_plumber s/images/images/navigation_f5.jpg',1)"><img name="header_r5_c2" src="klee_plumbers/images/images/header_r5_c2.jpg" width="150" height="26" border="0" id="header_r5_c2" alt="" /></a></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r6_c2','','klee_plumbers/images/images/header_r6_c2_f2.jpg','navigation','','klee_plumber s/images/images/navigation_f6.jpg',1)"><img name="header_r6_c2" src="klee_plumbers/images/images/header_r6_c2.jpg" width="150" height="25" border="0" id="header_r6_c2" alt="" /></a></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="header_r7_c2" src="klee_plumbers/images/images/header_r7_c2.jpg" width="150" height="3" border="0" id="header_r7_c2" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r8_c2','','klee_plumbers/images/images/header_r8_c2_f2.jpg',1)"><img name="header_r8_c2" src="klee_plumbers/images/images/header_r8_c2.jpg" width="150" height="23" border="0" id="header_r8_c2" alt="" /></a></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="header_r9_c2" src="klee_plumbers/images/images/header_r9_c2.jpg" width="150" height="2" border="0" id="header_r9_c2" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r10_c2','','klee_plumbers/images/images/header_r10_c2_f2.jpg','navigation','','klee_plumbe rs/images/images/navigation_f7.jpg',1)"><img name="header_r10_c2" src="klee_plumbers/images/images/header_r10_c2.jpg" width="150" height="24" border="0" id="header_r10_c2" alt="" /></a></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="24" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('header_r11_c2','','klee_plumbers/images/images/header_r11_c2_f2.jpg','navigation','','klee_plumbe rs/images/images/navigation_f8.jpg',1)"><img name="header_r11_c2" src="klee_plumbers/images/images/header_r11_c2.jpg" width="150" height="26" border="0" id="header_r11_c2" alt="" /></a></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="header_r13_c2" src="klee_plumbers/images/images/header_r13_c2.jpg" width="150" height="2" border="0" id="header_r13_c2" alt="" /></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2" valign="top" bgcolor="#FFFFFF"><img name="navigation" src="klee_plumbers/images/images/navigation.jpg" width="151" height="102" border="0" id="navigation" alt="" /></td>
<td valign="top" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="main2" --><!-- InstanceEndEditable --></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="102" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2" valign="top" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="main3" --><!-- InstanceEndEditable --></td>
<td valign="top" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="EditRegion6" --><!-- InstanceEndEditable --></td>
<td><img src="klee_plumbers/images/images/spacer.gif" width="1" height="57" border="0" alt="" /></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>


I want to be able to add a table or tables inside the main body of the page, without it affecting the top header and the left navigation buttons/images.
Thanks.

TGoddard
02-09-2006, 06:13 PM
Try adding borders around all the table cells (is there a menu option for this?). This will allow you to see exactly how badly using a WYSIWYG editor can wreck a perfectly good design. The tables in that page are completely unsuitable for setting out content. Your main content area is divided into at least three cells!

My advice is to learn CSS and use low/no table layouts or at least code the layout tables by hand. It's amazing what you can accomplish when you go beyond point and click and think carefully about how the page is set out. :2cents:

Rob99
03-09-2006, 01:11 AM
This is a similar layout to what you had, only coded up differently.

The navigation down the side can be made of images if you wish, hard to tell what yours was like. If you just had text on the menu that changed when the mouse hovered, similar to the one at the top of this page, this is easy to do with css.

Have a look, you can turn this into a template if needed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>2 column</title>
<style type="text/css">
body,
html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body {
min-width:750px;
}
#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
#header {
background:#ddd;
}
#header h1 {
padding:5px;
margin:0;
}
#nav {
background:#c99;
padding:5px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
#main {
background:#9c9;
float:right;
width:500px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
background:#99c;
float:left;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer {
background:#cc9;
clear:both;
}
#footer p {
padding:5px;
margin:0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>header 2 column CSS layout</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</div>
<div id="sidebar">
<h3>navigation</h3>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</div>
<div id="main">
<h2>main</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>

k8smum
03-09-2006, 10:06 PM
Hi
The effect I'm trying to achieve is to have a left nav bar which changes colour on rollover, as well as making a different image appear under the nav bar, depending on which button is pressed. I just followed some instructions I found at http://www.entheosweb.com/fireworks/swap_images.asp to get the Fireworks file set up, then exported it/opened it in Dreamweaver and got that awful table layout. I'm fairly certain I can fudge my way through the CSS layout you have provided to get a working web page, but I don't have the first idea how to achieve the rollover effects I want using the code you have provided. Thanks.

Rob99
05-09-2006, 01:30 AM
Have a play with this code, just right click the page to view source

http://www.imagef1.net.nz/files/css_two_column.htm

FoxyMX
05-09-2006, 10:50 AM
Have a play with this code, just right click the page to view source

http://www.imagef1.net.nz/files/css_two_column.htm

Heh, that page layout/code looks mighty familiar. ;) :lol:

Rob99
05-09-2006, 11:32 AM
Heh, that page layout/code looks mighty familiar. ;) :lol:No use reinventing the wheel,;) I did make a couple of changes at home this morning to make the menu a little better.

Just add a small margin and some padding.

http://www.imagef1.net.nz/files/k8smum.htm

FoxyMX
05-09-2006, 11:39 AM
That's better. Only thing is the image rollovers are broken now. :p

Rob99
05-09-2006, 11:55 AM
That's better. Only thing is the image rollovers are broken now. :p

Worked for me in FF, but the code was a wee bit wrong, try this

http://www.imagef1.net.nz/files/k8smum-v1.htm

FoxyMX
05-09-2006, 12:02 PM
Yup, fixed now. :thumbs: