Fireworks and Dreamweaver



  • I'm an embedded C developer by profession, but know enough HTML, CSS, PHP, Javascript etc. to knock up a simple website, and I try and keep to standards and best practices. So when my girlfriend asked me to help her with a simple website she needed to create for her 4th year biology masters coursework (some sort of "Communicating Science" module), I assumed it would be easy. Just adding some links with a bit of rollover behaviour.

    Unfortunately, they were using Adobe Fireworks and Dreamweaver. I haven't used any web design software since MS FrontPage in about 2002.

    The instructions (provided by the department) seemed to require using Fireworks to create some sort of PNG file with extra bits in it. As far as I can tell, this takes whatever text you have and turns it into an image, and makes a table based layout.

    This weird PNG file is imported into Dreamweaver, where you then create a template, still with table-based layout and images instead of text. The template is used to create your actual pages.

    I had assumed that these very expensive software products would let you create standards-compliant, gracefully degrading websites without much knowledge of CSS or HTML. Either I was wrong, or using the software VERY badly (although I was only following the instructions, because I had a time limit and nothing else to go on). I had real trouble getting my head round using the programs, because I just didn't expect them to create the pages that they did. I needed to throw away any preconceptions I had about how websites should be built for maintainability, accessibility or standards compliance.

    It seems to me that to be comfortable with using Fireworks/Dreamweaver, you need about the same amount of time as to learn basic HTML/CSS, and neither takes just a few days. To create a simple, 5-10 page static website with no previous knowledge of how to do it, I think what these students needed was a simple pre-created site and a simple primer. Sort of a "Change this tag - look what happens", "Change this CSS selector - look what happens".

    I eventually figured out how Dreamweaver works (the CSS part of the software isn't actually too horrible), but Fireworks just seems bizzare to me.

    Am I TRWTF for misunderstanding the point of Fireworks/Dreamweaver? Is Adobe TRWTF for producing software that produces such (as I'm led to believe) awful websites? Are the Biology department TRWTF for forcing students with no prior knowledge up the steep learning curve of these programs with hardly any support or time?



  •  I have tried an authoring program on several occasions with several years in between, to see if I was prejudiced and prehaps these programs could streamline my writing of HTML/CSS.

    They cannot.

    They impede, obstruct, and obscure.

    They are twisted, rotten programs.



  • @dhromed said:

    They are twisted, rotten programs.

    It's a twisted, rotten idea. The fact is, creating a program that would create nice HTML/CSS is a much, much harder problem than, say, rendering HTML and CSS. And look how good standards are there - you still can't write a page and expect it to work the same way everywhere. It's much easier to just statically place every single element of the page, and export it to HTML. That has the added bonus of tying you in to the program you used because there's no way you'll ever be able to edit the page in any other program.



  • I wonder how it works when they want a developer to do something with it. Presumably they start with a fairly static site, and then this conversation happens:

    Designer: "Hey, could you make this dynamic, pull stuff from our database, that sort of thing? I've heard of this cool AJAX thing, what about that? Here's the site code!" Developer: "OK, let's take a look at th..... ARGH! KILL IT WITH FIRE!"



  •  Just consider Dreamweaver as an oversized Notepad.exe with integrated FTP client and syntax highlighting. Problem solved!



  • @javispedro said:

     Just consider Dreamweaver as an oversized Notepad.exe with integrated FTP client and syntax highlighting. Problem solved!

    And unlike Notepad, it doesn't work.



  • I haven't picked up dreamweaver in 10 years, but even back then it's sole purpose to me seemed to be to make it look like developing a website was hard (protip: it's not). Thus keeping people locked in to using their software for fear that they wouldnt be able to do it themselves without the software.

     For example, javascript for a simple rollover effect used to inject tens of lines of javascript when it could easily be done with 3 - and this was when jQuery was just a star in the sky.

     

    haha... found it check out this monstrosity:

     

    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];}
    }

    Now, tell me if you're new to this development malarchy and you see that junk, you immediately think javascript is too difficult and stick to "using dreamweaver".

     


  • Considered Harmful

    @jamiec said:

     For example, javascript for a simple rollover effect used to inject tens of lines of javascript when it could easily be done with 3 - and this was when jQuery was just a star in the sky.

    These can usually be accomplished with just CSS, with no script at all.



  • I've been a long-time lurker here but I thought I'd chip in right about now.

    Fireworks is a great tool for designing graphics and animations, and to some extent doing design mockups. It had certain features (such as nested layers) long before Photoshop did, and still has features (such as symbols) that Photoshop still doesn't have. It's my program of choice for many things.

    It also has tools to splice regions of images for spriting and web tables and the like, but other than that, it's definitely not a tool for web design.

    And Dreamweaver? Oh gosh. I used to think the same thing when I used that abomination or its evil sibling, FrontPage. A decent text editor and proper knowledge of the language wins hands down every time.



  •  These programs were first designed long before CSS... and most of their features have not been updated since then.

     Damn... Rollover images used to be SO cool.



  • At least Dreamweaver, last I used it, still acted like you were typesetting a document. I'm talking to you, WebForms designer! (Seriously, despite all the WYSIWYG bashing going on in this thread I'm gonna be like the only one hating on it.)



  • So is it shitty because it's nearly impossible to create a good WYSIWYG website editor, or because Adobe?

    My guess Adobe.

    Combined with a generous heaping of "open sourcey-ness" of web development, which leads to hating GUIs and end-users.



  • Dreamweaver is not a bad HTML/CSS IDE.  Unlike the older generation of tools (FrontPage et al) it won't rewrite your standards-compliant code into something hideous.  It'll even work as a reasonably decent WYSIWYG HTML content editor if you configure it properly and know a tiny bit about CSS.  And it won't mess with your "<?php" tags if you're using PHP to output variables into an HTML template and will syntax-highlight HTML, CSS, Javscript, and PHP all in the same file if you do a reasonable job of using the file as a template rather than typical PHP spaghetti

    However, its code generation tools still output junk, and if you misconfigure it you'll end up with inline styles (at best) or font tags (at worst) everywhere.

    It has a great search/replace feature, and does a decent job at re-indenting messy HTML and cleaning up all that ugly "<mso:" pseudo-XML crap that Word still generates when doing HTML conversions.

    If I absolutely must do heavy HTML/CSS work on Windows, it's still my preferred editor. Although kind of an expensive one.



  • @jamiec said:

    I haven't picked up dreamweaver in 10 years, but even back then it's sole purpose to me seemed to be to make it look like developing a website was hard (protip: it's not). Thus keeping people locked in to using their software for fear that they wouldnt be able to do it themselves without the software.

     For example, javascript for a simple rollover effect used to inject tens of lines of javascript when it could easily be done with 3 - and this was when jQuery was just a star in the sky.

     

    haha... found it check out this monstrosity:

     

    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];}

    }

    Now, tell me if you're new to this development malarchy and you see that junk, you immediately think javascript is too difficult and stick to "using dreamweaver".

     

    You don't even need jQuery for a rollover. You can do it entirely in CSS by using :hover pseudo selectors and either using a sprite sheet (and changing background position) or by changing image that way.

    :)


  • Considered Harmful

    @sprained said:

    will syntax-highlight HTML, CSS, Javscript, and PHP all in the same file if you do a reasonable job of using the file as a template rather than typical PHP spaghetti

    Wait.

    Why would you have all of those in the same file, unless you're writing typical PHP spaghetti?



  • @sprained said:

    and will syntax-highlight HTML, CSS, Javscript, and PHP all in the same file if you do a reasonable job of using the file as a template rather than typical PHP spaghetti

    Visual Studio will do all that except PHP and as an added bonus, you're not using PHP.



  • Argh, Community Fucking Server just lost my post. 

    Suffice it to say that PHP can be used as a templating language where you have an HTML template representing a page or a portion of a page, with only <?php echo $page_title; ?> style variable output in specific locations, or simple loops to build HTML lists and tables from PHP arrays.  You then calculate the variables in the controller or HTML-free view layer (depending on how you're architecting your MVC), and pass them to a template renderer along with the template name, just like in any other sane templating system.  It just requires restraint in how you use logic in the template.

    Yes, one can argue that there are better ways to do it.   Or one can argue that those other ways are overcomplications.  After all, PHP was originally decveloped as a templating language for CGI scripts written in C.  I might even argue that templating is what it does best.  That idiots often abuse it by mixing templates and controllers doesn't mean that using it in templates is a bad idea when you do it right.



  • @joe.edwards said:

    @jamiec said:
     For example, javascript for a simple rollover effect used to inject tens of lines of javascript when it could easily be done with 3 - and this was when jQuery was just a star in the sky.

    These can usually be accomplished with just CSS, with no script at all.

     

    But not back then.

     



  • @dhromed said:

    @joe.edwards said:

    @jamiec said:
     For example, javascript for a simple rollover effect used to inject tens of lines of javascript when it could easily be done with 3 - and this was when jQuery was just a star in the sky.

    These can usually be accomplished with just CSS, with no script at all.

     

    But not back then.

     



    Thank you, you just saved me typing that.

     But I hate you for making me type more to thank you for me not having to answer the obvious.


     



  • @dhromed said:

    @joe.edwards said:

    @jamiec said:
     For example, javascript for a simple rollover effect used to inject tens of lines of javascript when it could easily be done with 3 - and this was when jQuery was just a star in the sky.

    These can usually be accomplished with just CSS, with no script at all.

     

    But not back then.

     

    Listen to Dhromed, guys. Also, for cross-brwoser stuff with IE6... *shudder*. You're going to need a *lot* of JS to make a simple rollover.


  • Considered Harmful

    @jamiec said:

    @dhromed said:

    @joe.edwards said:

    @jamiec said:
     For example, javascript for a simple rollover effect used to inject tens of lines of javascript when it could easily be done with 3 - and this was when jQuery was just a star in the sky.

    These can usually be accomplished with just CSS, with no script at all.

     

    But not back then.

     



    Thank you, you just saved me typing that.

     But I hate you for making me type more to thank you for me not having to answer the obvious.


     

    CSS level 1 become a W3C recommendation in 1996, and included background-image. CSS level 2 became a recommendation in '98, and included :hover. Dreamweaver stopped bundling that retarded Javascript in... wait, did they ever stop?

    Anyway, there's a long period between the advent of jQuery (to fulfill the "just a star in the sky" clause) and when this technique became possible.



  • @blakeyrat said:

    @sprained said:
    and will syntax-highlight HTML, CSS, Javscript, and PHP all in the same file if you do a reasonable job of using the file as a template rather than typical PHP spaghetti

    Visual Studio will do all that except PHP and as an added bonus, you're not using PHP.

     

    An easy-to-use add-on for PHP is the very first thing the visual studio extension market is showing me no matter what I search for...


Log in to reply