Macromedia's Design Tools (was: I am so excited!)

I use Dreamweaver, Fireworks and ocassionaly Flash when required.

The first exciting thing I found about Dreamweaver4 was it's ability to automate CSS. This was awsome!

First you save a blank file to the dir. of your site with .css. Then in DW's panel for css you link whatever page your working on to this css sheet or another. Now you can make a new style with a form that has the already needed options and it creates a class of that style into the css sheet. Choose a block of text you want to apply a style to and in the css panel you just click the class name. What a time saver!

This isn't a tutorial, just a run down for those who may think of purchasing some of this stuff. More to come...

I use Dreamweaver however I use Top Style to piddle with my style sheets. I am not crazy about the DW style sheet editor unless it is a little tweek here and there.

There is one thing that confuses me about the entire suite, the simularity of the app's. In FH, FW, and Flash you can create images. FH seems to have the least power in that it's not made to ceate rollovers and special effects, at least I haven't gotten that impression yet. But you can create rollovers in DW and FW. And FW is almost as powerfull as Flash for anima.

I guess the confusion comes from, "Which one should I use to this task?" Sure it's easy to say DW for programming the web page, but the rest of it? Which one to create an icon, which for a logo, which for an animated gif, should my rollover be done in FW or DW? And the list goes on. It would be nice to coordinate the workflow. This isn't a complaint by the way, I love a wide selection.

I would add two things to this arsenal:

HomeSite for hand coding (owned by Macromedia these days and integrates nicely with DW)

TopStyle for stylesheets. The lite version comes with HomeSite. TopStyle also integrates nicely with DW.

I have never designed a site from scratch in DW. While better than most, it is still a wysiwyg editor and carries much of the related baggage. The most I use it for is tweaking code created in HomeSite. This is probably exactly opposite of how most approach the DW/HS combo.

I have yet to be won over to Macromedia from Adobe as far as graphics apps go. I have Fireworks but still prefer the combo of Adobe ImageStyler/Photoshop/Illustrator.

I actually find it faster and easier to hand code stylesheets. DW's interface seems rather clunky to me.

the_professional - I think you need to learn about vector vs. rastor images. Freehand is sort of like Macromedia's answer to Adobe Illustrator although from what I understand their capabilities vary (I haven't used Freehand much at all). Vector apps are especially good for creating logos which may be needed in print materials and such as well as on the web. It makes it much easier to resize for different resolutions depending on the output media without losing quality. Also good for any kind of... well, vector style drawings.

The good thing about a package like this is that you have a lot of options. For rollovers, however, I would say that MM generates pretty messy Javascript in general so it would be better to do them by hand. Just IMHO. One of the great things about DW is that it (usually) doesn't change code you've done in other applications or by hand. There are also lots of other neat little utilities in there that save a lot of time - "clean up word HTML", for example.

I also prefer Adobe's graphics tools to Macromedia's. I don't really like the Fireworks interface... just can't seem to get the hang of it. I really wish you could dock those toolbars in DW - they always seem to be in the way!

Does Freehand handle eps files? About the only reason I have Illustrator is for the occasional need to handle such files, typically from the client's printer for logos and such.

"One of the great things about DW is that it (usually) doesn't change code you've done in other applications or by hand."

Emphasis on "usually"

One peeve I have with DW is that it can mess with the layout of your code. This is typically only a minor annoyance when it comes to global search/replace of blocks of code

"I really wish you could dock those toolbars in DW - they always seem to be in the way!"

Ditto with Adobe! Or is this something they've addressed in more recent releases?

I guess a lot of it comes down to what you get used to! I have always used Macromedia since I started (apart from a week with PageMill which got me started) so that's what I'm used to & I like it!

I'd hate for this thread to come down to a "mine is better than your's" thing so I'll settle that right now> (I'm sure most of you know this, so no comment needed)

Any one program or application is only as good as the person using it.

Megan, I do know the difference between vector and raster but, all these apps can save in either format. And I know which to use, when and why. But you have to wonder which MM app makes the better of each format. i.e. They all make vectors but which would I use to do this logo? (I would use FH for now, this is an example question.)

Can anyone simplify a listing of what app goes with what task?

They can all mess with your nice code. I used the design mode on Homesite once to try and manipulate a table. When I got through, it changed all of my tags to , which isn't even proper HTML (valign="middle").

Check this out! Just found this one. If you need a tutorial on FreeHand and almost anyother image app., go to sketchpad.net

This is really awesome. An 8 year old go follow this.

Quote: Originally posted by mairving
They can all mess with your nice code. I used the design mode on Homesite once to try and manipulate a table. When I got through, it changed all of my tags to , which isn't even proper HTML (valign="middle").

Oh yeah! The design mode for HS is awful! That's basically what DW is to me - a better design mode for HS. Actually, I think they dropped design mode from the most current version of HomeSite. This could be faulty memory on my part though.

the_professional: What exactly do you mean by a list? MM-specific, Adobe-specific, or the better/preferred of the two on a case by case basis?

Quote: I do know the difference between vector and raster but, all these apps can save in either format.

That's not the case at all. Photoshop, Fireworks, PhotoPaint, PhotoImpact, et al have limited vector capabilities only. Otherwise, what would the point of Illustrator, Freehand, Draw, et cetera, be?

You can save Photoshop files as .ai now? No.

You can definitely save any vector file as a raster file without needing the program, because it's a snapshot of the vectors. But I can't see how it would work the other way around.

If you are creating a logo, you should use Illustrator, Freehand or Draw. Or some other true vector app (Xara?).

(btw, I mean a real logo, not a title image)

Although MM did not create this tool initially, they have taken a rather large hand in the further development of ColdFusion Server since their merger with Allaire. The latest version, CF 5, beats the pants off ASP & PHP in terms of scalibility, speed and ease of coding. The only place is goes pear sheped is the cost, coupla of thou' for CF5 compared to free for PHP

I'm still tingling at the thought of CF6, codename "Nero" for some reason, due to launch in the coming months as I am sure MM will turn a great product into an even better one!

By "list" I mean for example:
Freehand - Logos, vector images, text images
Fireworks - Rollovers, raster images, anima gifs
Flash - Interactive anima, movies, presentations, vector
Dreamweaver - HTML coding, rollovers, etc..........
Basicaly a list of what should be used for what "best".

Suzanne, what I meant was that any app that can do vector can also do some form of raster. I know it's not the other way around. And just like my PhotoImpact won't read .art files, others have thier limitations too. But really web design deals mostly with jpg and gif. What is a vector saved as, other than in a swf?

As I mentioned further up, you may find that your greatest need for a vector app is to give you the ability to open pre-existing files supplied by clients who have had logos designed for them by a print shop.

Alternatively, If YOU are providing a logo design, you'd best create it in the vector app. Totally unnecessary for an image that is going to wind up on a web site I know. But your client is invariably going to ask you to supply the image to his printer for business cards, letterheads, brochures, etc. A rasterized image won't do them much good. Believe me, I've learned this one the hard way.

I'm still curious. Can Freehand read/export eps files? This is by far the most common file format I encounter.

Did some more work in DW last night, in particular to use the layout option to begin a new site.

It was really great even though a little cumbersome. You have to play with this ability a lot to figure it out. And planning table structures ahead is a must. When doing a "complicated" table with rowspans and colspans, sometimes you had to change the code itself. And layout vs. tables, I could not nest tables in tables but I could nest layouts in layouts. And I really didn't see the difference in the two, they both created the same code with the exception of layout="thislayout1" in the tags. I don't use them, and the space they produce can mess up my tables and/or look.

All together though I give this ability to layout my pages an A-. It has cut my time in half and simplified the process. I would like it to be a little more powerful and intuitive. Or have I just not used it long enough?

I'll have to get back to you about the eps files on FH. I'll look at it tonight. What is eps files, when,what,why,how?

Eps File:

http://partners.adobe.com/asn/developer/pdfs/tn/5002.EPSF_Spec.pdf

or if u don't have acrobat reader:
http://users.belgacom.net/prepresspanic/formats/eps/fileformat.htm

EPs stands for Encapsulated Poscript - a very common vector format. I would assume that FH can open these - Flash does for sure:) Of course, a web browser is not capable of displaying these, but they are handy for storing and passing around vector drawings.

Here's a list of uses for you - by all means this is not extensive and you will figure things out better as you get to know your software:

Freehand - logos, any kind of complex vector drawings, probably print materials if you ever get into that (I'm really not sure how well FH handles print as compared to Illustrator so I'm kind of guessing here)
Flash - any kind of large scale animation; may be okay simple vector drawings
Fireworks - anything that would be classified as a "web graphic" - navigation buttons, backgrounds, header images etc., simple animations (.gif), you can try letting it generate your HTML code and see how it goes but I would be wary about that. I think we've discussed this sort of thing before. v. 4 is also capable of doing some dHTML drop-down menus that seem to be pretty decent in terms of compatibility.
Dreameaver - bringing it all together to create the HTML. DO NOT use "layers" instead of tables. DO NOT convert between layers and tables. It makes a big mess. Keep an eye on the code using the split window.

I talked before about rollovers - probably doesn't matter if you use FW code or DW - both are pretty messy.

Someone who uses FW & FH more than I do could elaborate on this better. The problem with this suite of tools is that none of them handle photographs very well. FW has a few tools for working with photos but it was not really meant for this purpose. You will probably need to use another tool for photo editing.

I agree about DW's intuitivness BTW. Sometimes options are buried in their menu structure (like merging/splitting table cells) and I often find that it's easier just to hand-code in Homesite (of course, it helps that I know the HTML commands and my customized keyboard shortcuts for them.)

i used to use FH a long time ago and it will handle EPS files. It is -- or was -- just a vector editor.

I guess I'm the oddball in here because I use the Corel graphics suite. For editing I use Homesite... I don't much like the WSIWIG type editors.

Yes I found it in the FW4 users manual that it opens eps.

If it can't do it in vector it opens in a flattened bitmap. It also has an eps dialog box of options when opening them.

Thanks for the info, keep it comming. Your all great.

.swf is just a flash file format

Other vector formats (all proprietary) are:

.cdr (corel draw)
.ai (illustrator -- most other vector apps will open .ai files)

There are also Word format for logos, though I can't recall the extension off hand, and .eps (see above), which is a standard.

Are you thinking of .wmf ? It stands for windows metafile or womething like that. I don't remember for sure. Flash will read these as well and probably other vector apps.

I got a chance to work with DW a lot last night to find out if it can indeed help me with initial designing. I’m talking about using the layout view. With much more practice and experimentation I have now gotten to a more than comfortable feeling for it interface.

It really does a super job at coming up with some ideas for me just playing around. Put a cell here and a table there; add some color to this and a little to that; now lets preview it and viola. I just created a half-decent layout that gets my creativity going. Just tweak it here and there, save as a template, and now I have a design to use now or later. I’m really glade I got this software. It’ll save me time, increase my skills, and cut out half of my headaches.

I’ve got a lot of PHP’ing to do to a client site so I’ll be layin off the discovery for a few days. Unlike those who say they use Homesite because they do mostly hand coding, I will still be using DW in coding view to do the same. What has Homesite got that DW doesn’t?

I don't use DW enough to be sure what it can and can't do from a coding perspective but I'll try...

Have you ever done any VB programming? My first thought about HS was that it was remeniscent of the VB development environment (VB5+ anyway)

Some of the things I like about HS in no particular order:

- tag insight and tag completion: type out a tag and instantly get a list of attributes/properties to chose from.
- tag editor: right click any tag and get a box of options
- tag selector
- tag collapser
- Built in file explorer
- Built in FTP (which I don't actually use)
- Code Snippets! Build a library of regularly used blocks of code. These can be organized into folders.
- customizable menus
- dockable menus!
- better project management
- better global search and replace
- better html validator
- better and customizable codesweeper
- link validator

Since you've got the software anyway, I'd suggest you try it out.

My favourite is customizable keyboard shortcuts for common tags. That is a must-have feature for me. Homesite also has better support for different scripting languages.