Dreamweaver CC 2017 Code Preview Problem (Beginner)

[steff_lee]

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

[BenPleysier]

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.

[steff_lee]

Thank you for the reply. Still looking for the answer for the layout in different devices though on google, but I really appreciate the link you provided, it's really useful. Much thanks.

Everyone have their different perspective, aren't they? Peace be with you

Best regards,

Steff

[BenPleysier]

David Powers has a good tutorial here Dreamweaver CC 2015: Responsive Design with Bootstrap.

You can take out a free trial Lynda: Online Courses, Classes, Training, Tutorials

[Jon Fritz · Accepted solution]

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)