Почему вид файла в программе dreamweaver и в браузере отличается???

Если не ошибаюсь, на картинке Adobe Dreamweaver CS3 - версия 2007 года.
У этой программы унаследованный от Macromedia Dreamweaver устаревший и очень глючный движок рендеринга. Если будете использовать более поздние современные версии (лучше бы последнюю) , то получите более близкий к браузеру результат (начиная с версии CS5 используется движок WebKit, который также используют браузеры Google Chrome, Safari и Opera).

Но все же, 100% совпадения Вы не получите из-за того, что версии движка отличаются. Вдобавок, могут отличаться результаты в иных браузерах (Firefox, Internet Explorer) и в других операционных системах (Linux, Mac, iOS, Android и т. д. ) . Это опять же происходит из-за разных механизмов рендеринга.

Визуальный редактор - это не просмотровщик. Редактор - это редактор, а просмотр всегда в браузере и, по возможности/необходимости - в разных браузерах, их версиях, на разных устройствах и разных экранах. Виртуальные машины, и специальные сервисы типа browsershots.org - в помощь.

Если же говорить о конкретной проблеме, то почитайте про схлопывание margin'ов:
http://www.xiper.net/collect/html-and-css-tricks/pozitsionirovanie/margin-collapsing-trick.html
http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy

Это же очевидно!
Дримвивер только отображает CSS и в нём не работает JS, это же просто программа для верстания.
Если нужно разработать шаблон для какого нибудь сайта то вот скайп: anti-xakep2

Но не за бесплатно.

А в чем отличия? вроде все так же

Надо поставить галочку в настройках дреама напротив "Просмотр с использованием временного файла"