Major pixel disparity between Dreamweaver and Photoshop, WHAT GIVES??

I've been wrestling with this for one year (ever since I had a work-commissioned machine). The pixel size of my Dreamweaver (and all browser stuff) is different from the pixel size of my Photoshop AND Illustrator?!?! So a 500x200px web graphic (png, jpg or gif) made in Photoshop or Illustrator is teeny and then looks stretched and blurry in Dreamweaver and all browsers.

I've gotten around it by exporting web images 2x the pixel size and then coding the dimensions smaller in the html. But this of course doesn't work for backgrounds.

See, look at 700px in photoshop (screenshot below, image bottom) versus 700px in dreamweaver (screenshot below, image top) -- you can see how that image background is blurry but the text on top is clear:

And here's how the dreamweaver html with background looks in browser (super crisp html text, terrible blurry background image):

It's the same for both Photoshop and Illustrator. They both have "Smaller pixels" i.e. are a different resolution than Dreamweaver.