Inspiring

Question

Having difficulty adding photos with tables

Forum|Forum|3 years ago
December 19, 2022
3 replies
1435 views

Hello Community! I don't do a lot of web design, and the last time I used Dreamweaver was 2019 - apparently it has changed a bit. I'm updating a site for a friend. Originally, I made one jpeg in Photoshop with all the elements of the web page on it. In 2019, I was able to "map" my navigational buttons from that single jpeg. Worked great for me.

In re-doing the site, I cannot find a "map" function to do that, so I've been racking my brain, trying to use tables, to make my side-by-side navs (on the left) that link to one large image on the right.

The first image was from my 2019 site, where everything was on one jpeg and the navs were mapped to create the links to connect the web pages. The 2nd image is what I currently have. I made a 2-column table, with the navs on the left.... but whenever I try to add the large image on the right side of the table, it either goes on top of the navs, or splits the navs. Ultimately, I would like to just put an independent large image (like the wedding photos) in a box all by itself next to the navs - can't figure it out. Any suggestions?

This topic has been closed for replies.

Nancy OShea

Community Expert

Switch to DESIGN view. Toggle from LIVE to DESIGN with Ctrl + Shift + F11 (function keys enabled).

That said, I can't recommend using old fashioned Image Maps in 2023 & beyond because they're not responsive. The hotspots will invariably fall out of register when the primary image is rescaled to fit large/small devices. Image maps are rooted in 1990's web design which is no longer relevant. Sorry.

Also Table-based layouts are obsolete. Before offering to "help" your friends, I urge you to get up to speed on modern web design and best practices with HTML5 and CSS layouts.

Start here:

========
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

- https://www.w3schools.com/bootstrap/

Hope that helps.

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

1. The Image Map tools are only available when you are in Design View. If you are in Live (with blue outlines around selected items) they are disabled. You an use Ctrl + Shift + F11 to toggle Live/Design

2. There's no good way to help you discover what's going wrong without seeing the actual code. If you could put this page online in a test location and share a link here, it would be much easier to troubleshoot it.

R

rossisaacsAuthor

Inspiring

Hi - I'll try to zap you the code in a bit, but in the meantime, I'll try the design view- thanks!!!!

Nancy OShea

Community Expert

Just for chuckles, create a new responsive site with onboard Bootstrap Starter Templates. It takes longer to write this than it actually takes to do it. 🙂

DREAMWEAVER:

1. Go to Site > New Site... create a new project folder. C:\MyTestSite\

2. Go to File > New > Starter Templates > Bootstrap Templates. Select a layout and hit CREATE button. Save (Ctrl/Cmd + S) as index.html. See screenshots.

Viola! New responsive site.

PHOTOSHOP:

Use File > Export > Export As to create optimized web images. DO NOT use legacy "Save for Web" to generate HTML code.

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

You bring back memories. When I first started of with my website development, I did exactly as you are doing. This was about a quarter of a century ago. Did it come to bite me when screens sizes went from 14" to 15" and my design did not fit anymore. Heaven help me if I still used the same method today where screen sizes come in hand held devices, 100" TV screens and everything in between. Some have a device pixel ratio of one, others a device pixel ratio of 2, 3, 4 and higher. Yet you are wanting to design for a static size?

Web pages need to be fluid, meaning that they need to adjust according to the realestate that is available.

Please come back here when you have come to grips with that and I will gladly help you.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

R

rossisaacsAuthor

Inspiring

Hi again - my own website, I designed with WIX - did the grunt work in Photoshop and then just dropped and dragged everything onto the WIX pages. But my friend's site was originated by someone else - he gave up (so she asked me to help out...), but the host is still supporting her site...and it has to be straight HTML, no drag-and-drop. Decades ago I wrote HTML -long before there were any Dreamweavers...and even now, I can look at the code and fix minor glitches. I guess I've gotten real lazy over the years and have become used to the easier sites.

BUT - I did persevere - it's 2:30 am here in California and I finally got a grip on the design of the site - I still have tweaking to do, and this is just a practice page...but I'm getting there.

Kinda bleary-eyed now, but I can finally go to sleep since I've accomplished this much. Otherwise, my OCD would keep me awake stressing over the site.

Thanks for getting back to me, Marilyn

B

Ben M

Community Expert

Why not help your friend migrate to Wix and explain to them the benefits of moving to that type of platform? There are drag and drop options but most that come packaged will be part of a CMS like Wordpress. Otherwise, the closest that you get without databases would be to use Bootstrap templates or other CSS templates where things are broken up into a grid.

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