Hi All,

 

I am working on my first website which is for my business. The software I'm using is Dreamweaver MX2004 and for graphics I have Fireworks CS3.

 

The situation so far

 

I have created a logo in Fireworks along with a page that has a menu along the top with a drop down menu with all the right colours and rollovers.

 

I can upload sites to my host server as I have tested this and I have created simple pages with links and buttons which all work OK.

 

The Problem

 

I need to be able to get my page from Fireworks into Dreamweaver so i can use it as a template for the site.

 

I have imported it as a background image but I can not seem to place editable regions over the top of the background page. I have tried removing all the menu pop ups and left just the logo and background colours but still I'm having no success.

 

What am I doing wrong? What do I need to do to import from Fireworks?

 

My layout page can be viewed at www.urstore.co.uk

 

 

-------------------------------------------------------------------------------------------------

Remember - "It's only a silly question if you know the answer!"

-------------------------------------------------------------------------------------------------

Hi Slotter (I like your name!)

What you really need to do here is separate all of the different components of your design and then position them in the html document using appropriate mark up and css.

For example, save your logo as a separate graphic, your body would be black, you'll have a div with a red background and have your grey graphic as another separate graphic.

I hope that makes sense.

Hi Slotter (I like your name!)

What you really need to do here is separate all of the different components of your design and then position them in the html document using appropriate mark up and css.

For example, save your logo as a separate graphic, your body would be black, you'll have a div with a red background and have your grey graphic as another separate graphic.

I hope that makes sense.

 

Hi ElanMan,

 

Have a Lotus by any chance?

 

I think I understand that each element of the whole picture needs to be a seperate image. i find it easy to think in 3 dimensions. In Fireworks I have the logo saved already both as a jpeg and a png.

 

what would be the proper extension to save them as? I take it I will save them in the root folder?

 

In dreamweaver do I use a table layout to insert these into as this is where I'm having the problem?

 

Tx Ian

Hi Slotter,

 

Images can be saved as JPGs, GIFs or PNGs (the three most used).

 

JPG generally for photographic/complex images

GIF for simpler images or anything with transparency.

 

PNG is slowly but surely taking over from GIF for all things transparent etc, due to copyright issues with GIFS (don't worry about that).

 

I'm afraid that as a bit of a purist, I really can't bring myself to answer "yes" to the final question, although you are likely to get somewhere near to where you want to be. Pretty much everyone on this forum will tell you that Dreamweaver produces really, really nasty invalid and non-semantic code.

 

Therefore if you really do want to have a go at it for yourself as you said in your intro, I think as the next stage you would find it really useful to go through some HTML and CSS tutorials rather than using Dreamweaver's tools. It's really not too difficult and you will be so much happier with the results than if you use Dreamweaver.

 

This is a really good tutorial to start with for HTML: http://www.w3schools.com/html/default.asp

and for CSS: http://www.w3schools.com/css/default.asp

 

When you have had a look through how it all works, what you are aiming for is for each logical section of the page (so far divided in to images) to each be contained in a <div></div> tag and positioned using CSS.

 

Even if you do opt to go with Dreamweaver I would still strongly advise you to read the HTML tutorial so at least you know what all the code means. You might be surprised with how quick you get to grips with it all.

 

- Eris

Tx ErisDS,

 

I will go through tutorials and see how I get on. I understand that each image had to be in its own div but like you say, theres such a lot to get to grips with.

 

i did manage to make an OK site but then decided that if I could do that I could do better. Am I starting from the right place though with fireworks as an image/design package and dreamweaver as a website design package?

 

Tx Ian

Eris has pretty much said what I was thinking.

With regards to using Fireworks, perfectly fine for what you need, lots of people on here use it as opposed to Photoshop.

Hi ElanMan,

 

Have a Lotus by any chance?

No, a Ford Focus but FocusMan doesn't sound too good.

Eris has pretty much said what I was thinking.

With regards to using Fireworks, perfectly fine for what you need, lots of people on here use it as opposed to Photoshop.

 

No, a Ford Focus but FocusMan doesn't sound too good.

As I say to the missus, it's not what I drive its how I caress the controls.

 

I have worked through the html workshop and it has brought back a lot of memories from learning html years ago. Unfortunately I'm the sort of person who learns visually and thats why I picked up dreamweaver some time ago.

 

Inserting the logo do I have to save it in the specific pixel size I need or can I lock the ratio and resize after insertion in DW?

 

Tx for your help so far.

Save the logo in the size you want it to be on your page.

Resizing might make it look a bit iffy.

You don't want to control the sizes of images with css as you could end up with some horrible pixelated results.

Just be careful with those controls!

Always save your image the exact size you want it, never use code/dreamweaver to change the size afterward.

 

If you make the image bigger the quality will be poor.

If you make the image smaller the user will have to spend ages loading the image to only see it small and page size is very important even today (Thats why google keeps the number of words on its page to a minimum...milliseconds matter!)

 

P.S. as for learning visually, then definitely, read through a little bit of the tutorial and then copy and paste the code into dreamweaver code view (or even notepad) and see what it does.

 

Then change the code and see what that does.

 

Then read a bit more, and fiddle with that for a while.

 

You'll soon come to understand what everything does.