9 Replies Latest reply on Feb 19, 2013 3:38 PM by iamwonderful

CSS, Design Mode vs Live Mode vs Missing Manual

iamwonderful 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,

1. Re: CSS, Design Mode vs Live Mode vs Missing Manual

Preran Feb 19, 2013 3:35 AM (in response to iamwonderful)

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
Like Show 0 Likes(0)

Actions
2. Re: CSS, Design Mode vs Live Mode vs Missing Manual

iamwonderful Feb 19, 2013 4:59 AM (in response to Preran)

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?
Like Show 0 Likes(0)

Actions
3. Re: CSS, Design Mode vs Live Mode vs Missing Manual

Preran Feb 19, 2013 8:06 AM (in response to iamwonderful)

Can you preview your site in actual browsers and let us know what you get?
Like Show 0 Likes(0)

Actions
4. Re: CSS, Design Mode vs Live Mode vs Missing Manual

Nancy OShea Feb 19, 2013 9:04 AM (in response to iamwonderful)

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.html

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.
Like Show 0 Likes(0)

Actions
5. Re: CSS, Design Mode vs Live Mode vs Missing Manual

iamwonderful Feb 19, 2013 2:43 PM (in response to Preran)

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?
Like Show 0 Likes(0)

Actions
6. Re: CSS, Design Mode vs Live Mode vs Missing Manual

Nancy OShea Feb 19, 2013 2:53 PM (in response to iamwonderful)

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.
Like Show 0 Likes(0)

Actions
7. Re: CSS, Design Mode vs Live Mode vs Missing Manual

iamwonderful Feb 19, 2013 3:01 PM (in response to Nancy OShea)

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.
Like Show 0 Likes(0)

Actions
8. Re: CSS, Design Mode vs Live Mode vs Missing Manual

Nancy OShea Feb 19, 2013 3:31 PM (in response to iamwonderful)

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.
Like Show 0 Likes(0)

Actions
9. Re: CSS, Design Mode vs Live Mode vs Missing Manual

iamwonderful Feb 19, 2013 3:38 PM (in response to Nancy OShea)

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.
Like Show 0 Likes(0)

Actions