WYS isn't WYG in Dreamweaver CS5?

Get Started
1

Good morning all,

I’ve been putting together a new site and am struggling with differences between what’s in Dreamweaver and what shows up in browsers.

The site will end up as commercial but is currently at the testing stage - you can see the first bits at www.dedint.co.uk

In the screenshots I’ve attached, you can see what I mean. ‘DI DW’ is my Dreamweaver screen, while ‘DI Opera’ is what I get when the site’s uploaded.

For example, the text isn’t properly aligned, is the wrong colour and the wrong size. The link buttons (the tombstones) aren’t centered, etc.

The frustrating thing is that most of the commands make no difference. For example, the text alignment = left in the CS5 window - but the text doesn’t shift.

Please let me know if you’ve an idea what the problem might be. If you wish to see anything more, such as code, please feel free to ask.

All the best,

davhill

2

There are some contradictory commands.

  • In the css it is: .container .content p { text-align: left; } > all paragraphs are left aligned.
  • In the html is it: <p align=“center”>You’re very wise to ask. (…)</p> for the paragraphs.

Now the align=“center” in the html is [U]deprecated[/U], obviously giving other results in DW and real browsers.

The best is to declare all styles in the css-stylesheet, and not in the html.

There are also some html-errors, the html-validator will point which are the [U]3 errors[/U] to repair.

3

WYS isn’t WYG

Indeed … DW’s design view only gives an approximation of what real browsers will do with your code, so it’s essential to test your pages in real browsers.

4

Thanh you, gentlemen…I’ll tweak things and report,

5

Should have been ‘Thank you, gentlemen’ - it was late.

I’m still swilling about in D/weaver and not getting very far, so here are some salient questions.

I could do with a single column template with header and footer - can’t find one, I’ll have to make one. So…

Does CSS control HTML?

Could I use just HTML for simplicity?

Is there a step-by-step Dreamweaver lessons site?

Is there any problem with using two templates (.dwt files). One should be for the landing page (home page), with just two link buttons. The second one will
give full access site-wide, with maybe 10 link buttons.

The PHP/SSL/Paypal to get from one template to the other is another story. Learn to walk first…

Thanks in advance

6

HTML provides the structure of the page. It ‘marks up’ the content (with <p> tags for paragraphs etc.) so that the browser knows what the content is. CSS is purely for styling the content so that it doesn’t look so plain.

Could I use just HTML for simplicity?

You’d have a very plain, linear page, but technically, yes.

Is there a step-by-step Dreamweaver lessons site?

There are tons of resources. Adobe has some official books that are worth getting.

Is there any problem with using two templates (.dwt files).

That’s a question about a tool rather than about web design, so hopefully someone who knows Dw can answer that. :slight_smile:

7

Thank you very much, Ralph.

8

Seriously… DONT BOTHER WITH THE DW design view. it’s holding you back. DW can be a nice on wramp to the word of web layout. but that’s it. and the second step is to ween yourself of the WYSIWG.

Could I use just HTML for simplicity?
You arleady are. The most basic page is an UNSTYLED (no CSS) HTML page.

Does CSS control HTML?
yes/ no. CSS controls how HTML LOOKS. so for example an H1 doesnt HAVE to be big and bold.

h1{ font-size:100%; font-weight:normal; }

despite the fact that now it ‘looks’ like a default P… it’s still a headline. cool , eh?

remember it this way:
content= your text & included images(img tags)
HTML= what your content MEANS
CSS = how our content looks and is laid out.

instead o looking for WYSIWYG tutorials , consider going after tutorial for HTML STRUCTURE/SEMANTICS and CSS techniques. You will be glad you did, besides it probably would take the same about of time to learn either so why not learn the right thing?

Remember Sitepoint members will glad to help you with specific questions along the way ( it’s how I started)

9

Thanks, dresden_phoenix,

What with all this help, I’m beginning to get an idea of what’s happening now. I remade my index page and, though it’s still a long way out, WYSIWYG at least showed that the
copy layout was something like correct. Previewed on the web, the result is more like what I’m aiming for.

So, I’ll plough on…and will be back when I get stuck!!!