Skip navigation
iamwonderful
iamwonderful Calculating status...
Currently Being Moderated

CSS, Design Mode vs Live Mode vs Missing Manual

Feb 19, 2013 1:22 AM

Hi,

 

I downloaded the trial version of DreamWeaver to see if I'd like to purchase it. To get a feeling for it, I've been using the CSS3 Missing Manual and doing the tutorials. Several times I've put code into DreamWeaver then clicked over to Live/Design Modes to see how it was coming along and what was supposed to happen wasn't visible BUT when I copy and past either the CSS or HTML into Coda, it comes out just as the book says it should. Any suggestions as to why?

 

I just tried to add text shaddow using the following which works in Coda but not DreamWeaver -- and it's really frustrating.

 

body{background-color:rgb(255,255,255);border: 3px solid rgb(75,75,75); box-shadow:0 0 15px 5px rgba(51,51,255,1);width:760px; margin-top:20px; margin-left:auto; margin-right:auto;padding:15px;}

 

 

Also, when I add CSS into my webpage in DW Live Mode will show it but Design Mode will not. Is that normal? What is the use of Design Mode vs Live Mode?

 

Thank you,

 

ct

453 Views   9 Replies   Latest reply: iamwonderful, Feb 19, 2013 3:38 PM
 
Replies
  • Preran
    Currently Being Moderated
    1. Preran,
    Feb 19, 2013 3:35 AM   in reply to iamwonderful
    Report

    Yes, the behavior that you see in Dreamweaver is the expected behavior. While the design view gives you a rough approximation of the visual representation of your code, it is the Live View that you should turn to for a preview of how your site will eventually appear in a browser.

     

    Thanks,

    Preran

     
    |
    Mark as:
  • iamwonderful
    Currently Being Moderated
    2. iamwonderful,
    Feb 19, 2013 4:59 AM   in reply to Preran
    Report

    But the code I listed above doesn't preview (correctly) in either view, but will view correctly in Coda (a cheaper than DreamWeaver webpage builder). I don't understand why. It there a special property to doing  floating that I'm not aware of? Theimage with the blue bloat is from Coda, the other image is from DW. Notice the difference? It's the same code. How can that be? I'm guessing that DW is set up differently but I'm not sure how to change it so that it displays correctly. Any suggestions?  Screen Shot 2013-02-19 at 7.01.50 PM.png Screen Shot 2013-02-19 at 7.02.12 PM.png

     
    |
    Mark as:
  • Preran
    Currently Being Moderated
    3. Preran,
    Feb 19, 2013 8:06 AM   in reply to iamwonderful
    Report

    Can you preview your site in actual browsers and let us know what you get?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Feb 19, 2013 9:04 AM   in reply to iamwonderful
    Report

    I hate to say it but CS3 Missing Manual is sorely out of date for CS6.

     

    Are you working within a defined local site folder in DW?  Without this critical first step, DW cannot properly manage assets & links for you.

     

    Go to Site > Manage Sites > New...  for further details see the tutorial below.

    Creating  your first web site in DW

    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l

     

    Design View is not 100% reliable.  Live View is built on the Webkit/Chrome engine so it is more like a real browser.  However, to test your work always use Preview in Browsers.

     

     

    Nancy O.

     
    |
    Mark as:
  • iamwonderful
    Currently Being Moderated
    5. iamwonderful,
    Feb 19, 2013 2:43 PM   in reply to Preran
    Report

    Morning.

     

    It comes out fine in both Chrome and Safari (like the second image but with the header from the first).

     

    As for the Missing Manual, I'm learning both CSS and HTML for the first time, if anyone has any other suggestions, please pass them along. I did try one of the tutorials from DW, but I had no idea what I was doing or why, so I went with MM. Either way, it doesn't explain why Coda displays the same code differently from DW. Is there a special line of code I need to insert for the Chrome based DW to disply thingss like text-shaddow?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Feb 19, 2013 2:53 PM   in reply to iamwonderful
    Report

    DW & Coda are two different products.  I don't use Coda and probably never will so I have no familiarity with how it works or what it does.

     

    All I can tell you is web technology is changing at break neck speed.  Many browsers have failed to keep up.  If you're using CSS3 properties, you often need to add vendor prefixes for the various browsers:

         -moz = Firefox,

         -webkit = Chrome/Safari,

         -o = Opera,

         -ms = IE9+

     

    Box-shadow code generator:

    http://css3gen.com/box-shadow/

     

    Design view is incapable of displaying CSS3 properties.  Live View is pretty good most of the time but it's not as comprehensive as the very latest browsers.  I keep Firefox open all the time so I can refresh browser to check my work.

     

     

    Nancy O.

     
    |
    Mark as:
  • iamwonderful
    Currently Being Moderated
    7. iamwonderful,
    Feb 19, 2013 3:01 PM   in reply to Nancy O.
    Report

    Can I get you in book form?

     

    :-)

     

    That site is really helpful. Thank you.

     

    I'm just a little frustrated because I hear DW is The Best software out there but Coda is showing me what I'm supposed to see. Since DW is comparativly expensive I have higher expectations.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    8. Nancy O.,
    Feb 19, 2013 3:31 PM   in reply to iamwonderful
    Report

    I work in Split View with Live View.  This allows me to see the layout in one panel and edit code in the other.  

     

     

    Nancy O.

     
    |
    Mark as:
  • iamwonderful
    Currently Being Moderated
    9. iamwonderful,
    Feb 19, 2013 3:38 PM   in reply to Nancy O.
    Report

    That's what I've been doing, but with the code I'm entering coming up differently I've also taken to writing the same code in Coda. It's frustrating because the results are different.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points