Dreamweaver CC 2017 Code Preview Problem (Beginner)

Question

I'm new to web designing and quite experienced in Photoshop designing.

So, I design quite a number of web pages in Photoshop CC and code using Dreamweaver CC 2017. (1920 x 1080 Photoshop template)I copied the CSS (per item) from Photoshop to Dreamweaver CSS (I do edit the code as needed) and use live view / live code for the preview and it shows exactly what I designed in Photoshop.

But when I decided to preview in browser (Mozilla Firefox) or preview the code in full screen, the design turns into a huge mess. Everything is misplaced like the whole thing is too big to fit into the screen, especially the menus.

I just started learning web design codes and googling my problem turns up nothing. So I hope anyone from this forum willing to pinpoint my problem with the previews. Code will be given in necessary.

Thank you, please be kind

Jon Fritz · Accepted Answer

If the design looks right in DW's Live View, but appears too large in the actual browsers, it sounds to me like your zoom level in your browser is greater than 100%.

Go to View > Zoom > Reset or hit Ctrl + 0 (zero)

BenPleysier · Answer

I quite often get Photoshop designs to then use the images and colours for my development as the following image shows

For more info on how to do that, see How to extract assets from PSD files into Dreamweaver web pages

You do need to keep in mind that a fixed layout, such as in Photoshop, does not translate into an environment where the client screen size can vary from hand held devices to large TV screens and all in between.

Have I said that I have a great dislike for graphic designers? Just trying to be kind.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded