Skip to main content
Participant
September 14, 2022
Question

breaks in my web page

  • September 14, 2022
  • 3 replies
  • 184 views

My cut images from photoshop are not coming together properly to form my completed web page in the browser and is showing breaks where my cuts are. I admit that I have not done this for a while however the last time I was behind the keyboard I simply adjusted the size of the images and the cells to fix this. I am stuck this time as I have not been able to close these gaps and its really starting to agitate me, someone please help.

This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Community Expert
September 14, 2022

To begin with, nobody uses tables & image slices anymore.  That's an old school approach from the last century.

 

Secondly, nobody should be using HTML code generated by a graphics app (Photoshop) except for quick comps to show the client BEFORE you re-code manually.  Code generated by graphics apps is too rigid and not fit for production use.

 

The web has changed a lot in 8 years.  Web devices come in all sizes from extra small to extra-extra wide.  Web page layouts must accommodate all sized devices now.  You can't do that with tables and image slices.

 

Start over with one of the responsive Starter Templates in Dreamweaver. 

File > New > Starter Templates > Bootstrap Templates.  Choose a layout.  Hit the CREATE button.

 

Replace placeholder images with single images optimized for the web in Photoshop.

File > Export > Export As > JPG.  To keep bandwidth down, reduce quality.

 

Repeat with other images.  Edit text as required.

 

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Community Expert
September 14, 2022

When you're ready to take it up a notch, export images from Photoshop in 1x, 2x and 3x sizes.  Use the <picture> tag with SRC attribute to send the best sized image to appropriate devices.

 

Why use the <picture> tag?  Two reasons:

1. To reduce bandwidth consumption by small devices that may have limited data plans.

2. To provide a better viewing experience for people on larger devices.

https://www.w3schools.com/html/html_images_picture.asp

 

 

 

Nancy O'Shea— Product User & Community Expert
Community Expert
September 14, 2022

Moving from Photoshop to the web is not as simple anymore as just slicing up an image and placing it on the web. There are a lot of considerations for mobile responsive layouts that need to be taken into consideration when developing for the modern web.  We can take a look at your code if you can post the example online where, and it would also be helpful to see the design to help provide recommendations about making the site responsive.

Participant
September 14, 2022

I forgot to Mention I am coding the site with Dreamweaver and I have not used it since 2015 or '16. Yes I have searched the discussion, and have not been able to find anything that seems to relate. If you need code snippets please just ask, and if there is a specific way that I am suposed to post that please also instruct me in how to do that I am still learning the formalities here, thank you all in advance.