Sorry your browser is not supported!

Well I finally set off to learn web page design (on my own). I have a lot of books; and hence, a lot of reading and experimentation to do.

The Problem

I thought that I was doing well creating my banners and such in Paint Shop Pro and Fireworks. I created a 1000x1000 canvas in FW to start - brought in my pictures- All was looking good!

So I figured it was time to export to Dreamweaver and publish.

That's when I got hit over the head. I had different images, paths (lines), text etc... in Fireworks, but then upon export it seems that my whole page was one big .jpg. and the index.htm

So after some reading and experimentation I began slicing in fireworks first. Then Exporting. This seemed to work. but....

=====================================================================

The Question

1)Is this the way to do it?

I just made a few slices to test, but if this is what needs to be done I'll do it more precisely.
Here's my homepage.

http://www.zenassem.com

(There are no hotspots or links yet.)

2)The text looked good while editing, but now I believe I see .jpg artifacting. Should I just stick with HTML coding for the text?

Thanks to for any help. You guys know I always appreciate it.

Sincerely,
Zenassem


---------------------------------------------------------------------
Note:
Now I know I still have to incorporate CONTENT, tables for sizing issues, and add some metatag code, Scripting etc... (For right now I'm staying away from CSS until I get some footing).

starting in fireworks,once you have a nice skin use the slice tool to make your slices and make sure you name them. slices with names like gh_f3ee.gif suck.

green slices indicate your in slice mode and hotspots are teal provided you havent changed any colours.

there are many websites that help you cover this aspect. or Consult your manual

the frames in fireworks allow for simple or complex animations

once you have exactly what you want in regards to composition of layout, select every object and copy them.

now add a frame and goto that frame and paste in the entire contents again.

now on frame 2 change the buttons to what they would look like on rollover.
change other aspects if you want as well.

then go back to frame 1 and right mouse the first button slice that you might have named home in the slice name box.

choose add rollover (from memory) then choose frames 2 hotspot slice which will be inside that mini map panel in the panels left side and select it by clicking inside it, this allows you to have a hotspot that changes eg: photos change in a box as you rollover the buttons as another alternative.

at this point save your work, and call it WIP_projectNames_Template
fireworks saves things as png, dont publish this, keep it so you can modify the template later orr upgrade it etc..

add any rollovers and pulldowns and button states in fireworks at this point.

now make a temp_export folder and export the slices and the html to this folder but sub nest the slices into a folder called slices or images. look at the export screen for this.

if everything looks correct you can proceed, otherwise go back to fireworks until its right and export to the same folder keeping in mind you flush the folders with the images or slices or you will end up with rogue images that dont link to anything.

now you can carry this straight over to dreamweaver and carry on with what you want.

remove any panels that are pure graphic colours and replace them with a bgd table colour, this will save loading time.

some site i have used this method for are :

www.toastmedia.com.au
www.aeropower.com.au


with any website make a folder and call it the name of the website
then make 2 folders inside this one
NAME FOLDER
WIP
&
WWW

WIP is work in progress and you store all the working files for the website here
including your fireworks and export tests

WWW is an exact copy of the site online you can point dreamweaver to this folder and copy the final export test to the www when your happy with the final template.

indi,

Thanks for coming through for me like that! (detailed help, examples, & advice) I am very grateful. I appreciate that you took the time to write that reply. You really went above and beyond. You cleared up a lot of my confusion, and your advice is very helpful. You're awesome!

Sincerely,
~Zenassem

no worries mate

Zenassem, slicing in Fireworks and exporting to Dreamweaver is pretty easy. I do not know the best way to explain it as Indi did, but if you send me the fireworks file of your homepage, I will slice it for you and export to html, so you can look at it and learn the slicing methods which will hopefully help you in future websites.

My (very incomplete and new)Portfolio site has some of my previous work with Fireworks and Dreamweaver and CSS in the "Web design" section if you wanna have a look.

http://megaton.dbspot.com/index.htm

Nice site Megaton

Good Luck with it...

Nice clean layout.... Now just more content!

Thanks Megaton, I think I'm getting the hang of it. I am usually the first person to say RTFM. But in this case there is so much to read and get my head around. Dreamweaver, Fireworks, Javascript, HTML, CSS, etc... I think I just got myself in to many directions. And of course I wanted to get it up quickly. I could of done it fast in frontpage, but I figured it would be to my benefit to start using some real tools.

I am following indi's recommendations. And I am saving everything right now. Including Paintshop pro. I have a folder of production parts, and another for Dreamweave production parts etc... Just in case I need to go back to anything. Luckily I had my banner before it got all distorted.

The way that I am slicing is. I look at the bitmap coordinates. Choose the slicing tool. Click by the image, and then plug the coordinates in, so that I get my slices exact. When I am done with the first page I'll take a screen shot, and perhaps someone can tell me if I am doing it right.

Thanks for offering to help. I might just need it. Now if only my banner would show in my sig.

~zen

Test banner sig...

I'm such a moron!

3rd times the charm????

edit:Finally managed to do that. Sry about the multiple-posts. At least I spammed my own thread.

Sure thing. When slicing just keep in mind that you want some parts to tile and the page should expand when text is added. When you finally export remember to set some images as backgrounds. And if you have a website such as yours, with alot of one-shade-grey, there's no need for images! Just set the bg color to grey!

(In other words, http://www.zenassem.com/ could be set up the way you want with 85% less images which only equals faster loading time)

Again, if you are having trouble, feel free to email me and I can make a quick sample html homepage using your design.