PDA

View Full Version : Exporting from Fireworks to Dreamweaver


rennart
04-09-2009, 10:02 AM
each time I change the template in fireworks and export to dreamweaver 8,
I seem to accumulate more and more images (gifs) in my local image folder.
I am not sure how to prevent this and how do I know which ones I can delete?
There are now thousands! I obviously recognise the ones I have named.
If I change the template, in size and positions, but do not add any new images can I load this without this happening?

I am very new to Fireworks and Dreamweaver as you can tell and would appreciate assistance.

Rob_Che
04-10-2009, 08:52 AM
Hi Rennart, welcome to the forum. I'm not sure exactly what the problem is from your description - What are the images of? that may help. Is the site live so that we can take a look at the images being used etc?

Cheers
Rob

rennart
04-10-2009, 05:27 PM
hello Rob

the site page is

http://www.rennart.co.uk/renniesindexpage.html

I seem to have endless gifs that are being saved on my local site folder
and I think they correspond to the spaces in between text?

It is all very baffling...

Rob_Che
04-12-2009, 03:44 PM
Looking at the images they all apear to be 'proper' images - I wonder if you've just imported your computer worth of images ?

There's a lot of fabric images / dresses etc... are these all images of shop stock ? I can't see anything 'odd' - other than there being 30 gazillion images... :)

Rob

Rob_Che
04-12-2009, 03:45 PM
There seems to be hundreds of scarf images.

rennart
04-12-2009, 04:40 PM
hello Rob

thankyou for your reply.
It is not the actual named images that concern me, it is all these unknown images?

These are the sort of images which seem to have multiplied in my image folder on the local site.
Each time I export from Fireworks template to open in dreamweaver, there
seem to be more - are they automatically generated. If so, can I delete them all?

renniesindexpage_r16_c12_f20.gif
renniesindexpage_r16_c12_f21.gif
renniesindexpage_r16_c12_f22.gif
renniesindexpage_r16_c12_f23.gif
renniesindexpage_r16_c12_f24.gif
renniesindexpage_r16_c12_f25.gif
renniesindexpage_r16_c12_f26.gif
renniesindexpage_r16_c12_f27.gif
renniesindexpage_r16_c12_f28.gif
renniesindexpage_r16_c12_f29.gif
renniesindexpage_r16_c12_f30.gif
renniesindexpage_r16_c12_f31.gif
renniesindexpage_r16_c12_f32.gif
renniesindexpage_r16_c12_f33.gif
renniesindexpage_r16_c12_f34.gif
and for example
badges_f37.gif
badges_f38.gif
badges_f35.gif
badges_f36.gif
badges_f33.gif
badges_f34.gif
badges_f28.gif
badges_f29.gif
badges_f26.gif
badges_f27.gif
badges_f31.gif
badges_f32.gif
badges_f24.gif
badges_f25.gif
badges_f30.gif
I appreciate your help, thankyou

Rob_Che
04-12-2009, 07:41 PM
I don't use Fireworks so there may be someone who can advise much better than me - anyway, what I would do is move them all out of the folder and see if your site still works... ! if it doesn't move them back. :)

Rob

mangofreak
04-12-2009, 08:38 PM
When you exprt images from fireworks depending if you are selective, FW will export the spaces between images that you may not need. When you are exporting select only current slice or it will get many unnecesary slices.

Hope it helps.

wasovs4
04-12-2009, 09:46 PM
save them on your PC then upload via FTTP://

d a v e
04-13-2009, 10:01 AM
layout your page in in dreamweaver and then insert your fireworks optimised images from there. exporting a whole layout from fireworks is ONLY for prototyping and not for production work.

also it's better to use real text (not text saved as an image for the bulk of your page text

Rob_Che
04-13-2009, 12:04 PM
layout your page in in dreamweaver and then insert your fireworks optimised images from there. exporting a whole layout from fireworks is ONLY for prototyping and not for production work.

also it's better to use real text (not text saved as an image for the bulk of your page text
Yep - the code is shoddy too... again, only for layout. You should lay it out 'proper' straight into DW.

rennart
04-13-2009, 05:20 PM
thankyou for some useful advice.

I am sure I shall return with some more questions in due course...

Rob_Che
04-13-2009, 06:20 PM
yes please do - by the way I was talking about Fireworks having shoddy code, not you ;)

rennart
05-09-2009, 11:40 AM
hello again
I have decided on your advice to ditch Fireworks, partly because my trial period has expired anyway!
I have redone my page in dreamweaver.
Firstly, although I have lined up the text in the three columns using guides
in the local mode, when it is uploaded or previewed in the browser, the
alignment is all wrong. I have just tried to alter it by sight and guesswork
to look approx right, but would appreciate a more 'scientific' approach.

secondly, is there a leading facility for adjusting text?

hope you can help please?

the page in question is:
www.rennart.co.uk/renniesindexpage2.html

many thanks

Corrosive
05-09-2009, 12:51 PM
hello again
I have decided on your advice to ditch Fireworks, partly because my trial period has expired anyway!
I have redone my page in dreamweaver.
Firstly, although I have lined up the text in the three columns using guides
in the local mode, when it is uploaded or previewed in the browser, the
alignment is all wrong. I have just tried to alter it by sight and guesswork
to look approx right, but would appreciate a more 'scientific' approach.

secondly, is there a leading facility for adjusting text?

hope you can help please?

the page in question is:
www.rennart.co.uk/renniesindexpage2.html

many thanks


The scientific approach (and the correct approach) is to use div tags for layout, positioned with CSS. In fact CSS is the answer to both of your questions!

Rob_Che
05-09-2009, 12:57 PM
hello again
Firstly, although I have lined up the text in the three columns using guides
in the local mode, when it is uploaded or previewed in the browser, the
alignment is all wrong. I have just tried to alter it by sight and guesswork
to look approx right, but would appreciate a more 'scientific' approach.


Hi !

Firstly, trying to line things up using page breaks (line return) is not the right approach. I'd strip the headings out and redo them - you have loads of redundant code in there. Styles 1-9 !

You're also designing a site with tables which is asking for trouble ! :) You need to get your head around CSS ...


secondly, is there a leading facility for adjusting text?


All your lines are set as paragraphs, so they have a double line space. The reason that your headings don't line up is that paragraphs (<p>) have automatic top/bottom margins and your cells different a number of paragraphs in. Hard to explain, just start those again. You will send yourself insane trying to align things like that in tables / design view. We've all been there though ! :roll:

Chin up !
Rob

Rob_Che
05-09-2009, 01:01 PM
OK - I dug into your code (it's dirty in there...)

For heading one you have:
<p class="style4"><span class="style5"><br/>
<span class="style6">shop</span></span></p>
Heading two:

<p><br/>
<br/>
<span class="style9">lifestyle</span></p>
The code should be the same if you want them to look the same...
It really should be (we'll assume style-4 is correct for now)

<div class="style4"> shop </div>
and
<div class="style4"> lifestyle </div>
That's all... have you dared to look in code view yet ? :)

Rob_Che
05-09-2009, 01:02 PM
i think we crossed there Corrosive !

Corrosive
05-09-2009, 01:03 PM
i think we crossed there Corrosive !

Yeah, but your answers were much better and in-depth than mine. I'll butt out and let you take this one :)

rennart
05-09-2009, 01:48 PM
hello and many thanks.
I realise that I must get to understand CSS.
As you can see I am very new to all of this and perhaps
have tried to 'run before walking'.

thankyou again.

Rob_Che
05-09-2009, 02:45 PM
What you want to do is not complex but unfortunately, without you diving into the code I can't help you from here.

The reason you have the extra code issues is that Dreamweaver doesn't reliably strip out the old style when you add a new one.

ie; you select 'HOME' and give it 'style 3' - then you change your mind and add 'style 4' instead - unless you select the text REAL careful Dreamweaver can leave some of the old code so you end up with 2 styles on one element... does that make sense ?

Maybe create one column and then copy and paste it over once it looks 'right'...

PS: if you want to reduce the space between the lines - instead of hitting 'return' , hit shift+return... this will give you a line-break rather than a new paragraph. Hope that heps...

Rob

DWcourse
05-09-2009, 02:51 PM
Those are all space images Fireworks uses to make the tables in your export page hang together properly.

Rob_Che
05-09-2009, 03:08 PM
Those are all space images Fireworks uses to make the tables in your export page hang together properly.
I assume this refers to the first topic, not the latest one ?

Rob

rennart
05-09-2009, 04:57 PM
hi Rob

that makes complete sense, thanks.
I am looking at the code and can see the two 'styles' instead of just the one
I chose.
now going to work my way through CSS tutorials bit by bit....

:confused:

Rob_Che
05-09-2009, 06:28 PM
Just save a copy of how it is now and start hacking into the code ! Just start ripping it out and simplifying it.

There are some great three column css layouts for free out there on that there internet - grab one, start changing some numbers and see what happens !

Good luck - we're happoy to help if you're happy to ask...

Rob
:)

rennart
05-10-2009, 03:39 PM
hello Rob

I want to take your advice and start cleaning up my code on
the page in question, BUT
how do I duplicate just this one page to save a copy.
I can only seem to duplicate the whole site through 'manage sites'
I am using CS3. sorry to be so dumb...

thanks in advance!

Rob_Che
05-10-2009, 03:48 PM
Not dumb at all.

Just File > Save As... Then save it as, say, Test.html or something... this will keep the page local, save the links you already have but also it's disposable :)

Let us know how you get on !

Rob

rennart
05-16-2009, 02:54 PM
hello Rob

here I am again!

still confused by how to align my various pieces of text and images using
divs in CSS

so far...

http://www.rennart.co.uk/test2.html

If you have a moment could you kindly take a look and tell me in
'idiots language' how to use the div tags to layout the page; or of course point me in the right direction.
I want 3 columns with images at the top, then further down two H2 titles,
then two lists and so on....( The left column just has the logo and address details.
I do not want a header and a footer bar and all templates seem to follow this route.

here's hoping!

rennart
05-31-2009, 04:58 PM
hello again Rob

I have sent you a private message too - as not sure which thread you will pick up on?

I have created a test page

http://www.rennart.co.uk/test.html

basically copied the existing table layout and have cleaned up the text style code a bit!
However, I still don't know how to align the text horizontally across the three
columns. Do I have to use AP divs?
please can you explain this simply!
thanks...
:roll:

Rob_Che
06-01-2009, 09:10 AM
I'll take a look... I did get your message but I've been absorbed in Flash video, yikes!

The first thing I noticed about the site is that your code isn't the same both sides. For example - your <h2> tag on the middle column has at least 2 line brekas <br> in it...

rennart
06-01-2009, 10:03 AM
hi

thanks for getting back to me.
I know there are odd <br> line breaks, which I can get rid of, -
I used this method in desperation to guess where to place the text!
but what I think I really want to know is:

where in the css styles/ div tag info do I enter an exact position for my text to start, below the image I have inserted, so that I can align the text in each of
the columns relative to eachother.
Please can you run me through the procedure.

thanks
k

Rob_Che
06-01-2009, 01:17 PM
OK... the way it should work - if you have the same in both columns the text will line up.


<div class="column"> <!-- you need to set styles for this (width, float etc) -->

<img src="image path" /> <!-- images should be exactly the same size -->

<h2>Here is My Title</h2>

<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>

</div> <!-- column ends -->


If you repeat this code, the images/text will line up. Be very simple with the code. Just use color backgrounds for the divs when setting the page up - just build it in blocks and then start adding the content. here's an example, copy and paste into a DW doc to see what it does.

Come back once you've done that. look how simple the code is - Don't be tempted by trying to add <br> etc to try and line things up, you will go INSANE ! :)

Be good
Rob


<html>
<head>
<title>Column Test</title>

<style>
.column {
background-color: red ;
width: 290px ;
float: left ;
display: inline ;
margin: 10px ;
padding: 20px ;
height: 1000px ; /* this should be set at 100&% when div has content */
}
</style>

</head>

<body>

<div class="column">
<img src="http://www.rennart.co.uk/images/lion1.jpg" />
<h2>Here is my title</h2>
<p>here is link 1</p>
<p>here is link 2</p>
<p>here is link 3</p>
<p>here is link 3</p>
</div>

<div class="column">
<img src="http://www.rennart.co.uk/images/lion1.jpg" />
<h2>Here is my title</h2>
<p>here is link 1</p>
<p>here is link 2</p>
<p>here is link 3</p>
<p>here is link 3</p>
</div>


<div class="column">
<img src="http://www.rennart.co.uk/images/lion1.jpg" />
<h2>Here is my title</h2>
<p>here is link 1</p>
<p>here is link 2</p>
<p>here is link 3</p>
<p>here is link 3</p>
</div>



</body>
</html>

Rob_Che
06-01-2009, 01:27 PM
Sorry, just read your PM...

It's odd to try and line things up with image text. Why not make the three columns the same and add the "Rennie's" as text?

Maybe I'm missing something. You could always adjust the top margin of the <h2> to line it up...

h2 {
margin-top: 20px ; <!-- 30px, whatever -->
margin-bottom: 15px ; <!-- this will set where the next div / paragraph starts -->
]

rennart
06-02-2009, 07:53 PM
hello Rob

thankyou so much for all the time you have spent helping me..
I really appreciate it.

I have now got as far as the three columns and you have certainly helped me align across the H2's
However if I want to align the first of the links in column2 with say the first line of the address on column 1, how do I do this?

I have yet to discover why the logo graphic appears on a white background as it should have been transparent!!! will I ever understand this stuff?

If you can bear to continue helping me, I would be delighted.

see
http://www.rennart.co.uk/test.html

K
:roll:

d a v e
06-02-2009, 10:04 PM
you can't have transparency with jpeg. you can either match the grey background of the page and use it in the image before saving as/exporting, or better still you should use a gif for logos (and any images that aren't photographic or have complicated gradients)

are the edges of the logo intentionally rough? (the attached is on transparent background but it just shows white ion the thumbnail ;)

Rob_Che
06-02-2009, 10:45 PM
Hey K, good to see you back...

OK... I'm going to say this again but not to be a d!ck, just so you remember it forever :)... The two column codes need to be the same...

You have.. Column one.

<div class="column1">
<img alt="logo" src="images/logolazy.jpg"/>

<h2 class="style1">R E N N I E S</h2>
<strong> S E A S I D E M O D E R N

</strong>
<p>
</p><p>
</p><p>


Column two:

<div class="column2">
<img alt="shopfront" src="images/shopfront1.jpg"/>
<h2 class="style1">S H O P</h2>
<p><a href="posterindex.html">original vintage posters and prints</a></p>


The GOOD news is that column two is spot on! :-D

You see you have some text in paragraph tags (<p>TEXT</p>) and some not. Paragraphs have a margin already 'built in' so will space out more.

dave beat me to the image thing. Use a png or gif if you need transparency - or use the background image. A better version would be nice too...

Don't stress K, one step at a time... we're here for you buddy !

Rob

rennart
06-03-2009, 09:40 AM
thanks Dave,
I have tried a gif and it works - transparent background!
you are right it shouldn't have jagged edges, so I will try and redo the size?

meanwhile....

rennart
06-03-2009, 09:56 AM
thanks, Rob

you are a star!

I hope to have time later today to have another go!

K

Rob_Che
06-03-2009, 10:07 AM
Good stuff... keep it coming, we'll get there.

d a v e
06-03-2009, 02:38 PM
have you got a better copy of the logo? if so what are you using to resize it etc?

rennart
06-03-2009, 07:54 PM
here is the gif
but I just resized it using image size in PS which doesn't seem to keep it sharp.
Is there a trick I wonder?

rennart
06-03-2009, 08:04 PM
I have got this far with the page ..hmm

http://www.rennart.co.uk/test.html

I know you said the code must be the same in both columns,
but what if the columns have different content and type styles.

I would still like to align the first line of the links on columns 2 & 3 with the first line of the address in column 1. Am I being completely dense?

Each time I choose a font or new size it allocates a new style - eg. the caption
below the molecules in column 2.

what should I do next - and please don't say 'give up'!!!

K8)

d a v e
06-03-2009, 08:32 PM
difficult with just a gif and to get it anti-aliased against the background too...
try this re-drawn one
http://pp.kpnet.fi/prescott/stuff/rennieslogoandaddress.gif

rennart
06-03-2009, 08:48 PM
This is the old gif that I discarded as I couldn't line up the other two columns with this!

d a v e
06-03-2009, 09:19 PM
try this one then ;
http://pp.kpnet.fi/prescott/stuff/logolazy1.gif

rennart
06-03-2009, 09:30 PM
hello Dave

SUPERB!

thankyou

rennart
06-05-2009, 12:33 PM
hello Rob

Hope you haven't abandoned me...

here I am with the page as far as I have got.
I still am not sure how to align text when the content in columns is different.
Also you will see that in column 3 the caption on the last image is now aligning to the far left - what do I do now?

also, the question of each time I change the colour or size of the font, I seem to generate a new style no. - what am I doing?!!!

look forward to hearing from you when you have time,

http://www.rennart.co.uk/test.html
thanks

K

Rob_Che
06-05-2009, 03:46 PM
Hope you haven't abandoned me...


Of course not :)


I still am not sure how to align text when the content in columns is different.


Well... that's a difficult one... by the very nature of what you've said, if they're 'different' they will need to be treated differently. Different styles of text and different type styles are going to have different default styles.


Also you will see that in column 3 the caption on the last image is now aligning to the far left - what do I do now?


it isn't on my machine, have you fixed this?


the question of each time I change the colour or size of the font, I seem to generate a new style no. - what am I doing?!!!


It's time that you got stuck into the code K, using DW's css wizard will unfortunately create different classes depending on what you have selected. You need to look at the code and ensure that only one style is selected.

Give the headers your own names, just because it's a mighty <H2> doesn't mean you can't whip it into shape - ie: "<h2 class="column2">... then, in the <head> of your page give it some stick.

h2.column2
{
margin-bottom: ??px ; /*use these to align your headings */
margin-top: ??px ; /*use these to align your headings */
font-family: ?? ;
font-size: ??px ;
}


That should kick its ass. Give up with the style1/style2 - give them meaningful names. If there is only going to be one instance of a heading you can give it an id.

Let us know how you get on.
Maybe you could make a test page using the code I posted earlier and understand how the margins affect the spacing.

be good !
Rob

Rob_Che
06-05-2009, 03:52 PM
PS: I live I Doncaster. The telephone code here is 01302... how come Folkestone come next on the list ? :)

rennart
06-05-2009, 04:02 PM
hi Rob

thanks for all your comments.
Yes you are right - I did manage to sort out the caption thing which is now
in the right place - one problem sorted.

no idea how the telephone codes work - should be alphabetical like the French car number plates if you know what I mean!

I will dig into the code some time this weekend,

'bye for now

K:)

Rob_Che
06-09-2009, 09:19 AM
K - your problem is a good one to get started with CSS. make a new page, make a new CSS file and link to it. Now start creating new styles by hand and start spacing things out.

There are tons of tutorials out there but I can draw something up too to get you started if you like/need . . .

rennart
06-12-2009, 05:21 PM
hi,

sorry I have been having a few computer glitches, so no time to have a go
at CSS. Hope to soon...
What do you have in mind re: "I can draw something up too to get you started if you like/need . . "?

many thanks

K

ibionika
06-24-2009, 07:30 AM
you can see all the pages a visitor looks at when browsing the visitors and clicking the look for the last page and thats the last page they browsed, is that what you mean?

rennart
06-27-2009, 06:06 PM
hi Rob!

hope you are having a beautiful sunny day up in Sheffield!

I would very much like you to draw up something for me to try re: CSS, please. Otherwise I just will keep going in my rather chaotic way...


K