Images and tables in 5.5

Question

I have 2 questions but they are related. I have a web pages that use tables to display images. I am a novice programmer and use Dreamweaver CS5.5 and adjust image sizes with paint. I have almost no knowledge of Photoshop but do have 5.5 and just got Lightroom 3. With Macromedia Dreamweaver 8, I did a few things with Fireworks, but I don't know a lot about programming and do not have the the money to pay someone to assist me in this task that I would think could be simple. I may have to redesign lots of web pages but I am really only concerned with 4 or 5 pages. Can someone provide some simple instructions to assist me? Yes I know I should take a class on Dreamweaver.

First in Dreamweaver 5.5 if I am inserting an image, I find the image and then the preview is rotated. I want the image the way the file is orientated. I think that Dreamweaver is using the metadata from the camera but that is beyond me at this point.

My second and biggest issue is that I have many pages that were set up in tables 5 across. Great on a small screen when it was done years ago and a 15" monitor was considered as big. Now when someone sends me a new image that is towards the middle of the table, I am manually moving all of the images behind it to make a space to insert the new image. These images are based on a serial number which is also being used as a file name. I would like to be able to insert an image without having to move a bunch of others and I would like the table to expand to the screen size and not stay fixed at 5 col. if possible. On a 800x600 screen it looks good but switch to large monitor and you only have 5 small images spread across a large screen. An example of one of the pages with tables is: http://www.chambered-reissue.org/page8.htm This is the page that gets my most time changing.

Thanks For any assistance.

Jon Fritz · Accepted Answer

1. Open the image file in Photoshop. It should come up with the correct orientation. Look at the file name inthe top of the document window, there should be a * by the file name meaning "something has changed since opening". That is because PS DOES read the image meta data and even though the image was taken essentially "sideways" PS knows what the photographer meant to do and opens the file correctly. All you need to do is just save the file after opening in PS and it will retain the correct orientation when you bring it into DW.

2. Unfortunately, your second issue is a much more difficult one to fix. You're seeing why tables simply aren't used anymore in website layout, they're just too rigid to easily turn responsive for all the various screen sizes that are now "normal" for your visitors to be using. You think the large screen is your problem, but it's far worse on tablets and phones, forcing a horizontal scroll with only 2 images showing up horizontally and the remaining 3 being off screen to the right. There are many ways to make these images stack in whatever space is available on small screens without horizontal scrolling, and fill up the available space on large monitors, but all would require a do-over with your html and handing your layout control over to css.

The simplest way would be to use css margins and floats. A more complex, but ultimately better, method would be to use css Flexbox.