Table Layout issues in Dreaweaver CS6

[dusting93022209]

I am trying to make it easier for myself to make my websites. I use Fireworks to make the page and in Dreamweaver I add tables for the links and videos needed. Problem is the table moves all over the place making it difficult to adjust the links correctly to the image. I do not feel making 300 images to place in the tables are easy at all. Hence the way I am doing it.

Is there any way to anchor the position of a table in place, so it wont move when adding other links and tables?

Thanks for any help.

[dusting93022209]

I also noticed that I have to raise the tables higher or lower than it appears in Dreamweaver for it to line up live.

[WolfShade]

If you're using Fireworks to create the layout and then slicing them for HTML, that is a very outdated method.

Tables should be used for tabular data.  You should read up on table-less design using CSS and DIV tags, and SPAN tags.

V/r,

^ _ ^

[dusting93022209]

Do you have a link for that? And no, I didn't want to slice any more it takes too long to work with. I make the entire page as an image and then in Dreamweaver place tables for links and other things "clickable".

Thanks

[WolfShade]

Please don't take this the wrong way, but in all seriousness, using a single image for a page is even worse, and even if you optimized the image it would still be a "heavy" page.  (I'm assuming you mean that the image is the body background, and you're trying to place tables within certain areas of the page and keep them there.  If my assumption is incorrect, please advise.)

As far as links to learning table-less design, Google is your friend.   

https://www.w3.org/2002/03/csslayout-howto

https://websistent.com/css-tableless-design-tutorial/

https://www.lifewire.com/css-positioning-layouts-without-tables-3466855

https://www.youtube.com/watch?v=NNDkMIyKfaw

HTH,

^ _ ^

UPDATE: If you do your own search on Google, please avoid anything from W3Schools.  They might be getting better, but they have a very lousy (and well-deserved) reputation.

[dusting93022209]

Yes, you are correct I am using the image as a single table BG and applying new table(s) inside to set the clickable spots. I will check out those links. I did do a Google search and ended up here as nothing was close to want I am trying to do or it wasn't working.

Thanks

[WolfShade]

Something that might help you would be a CSS library of some sort.  There are many, but I like Bootstrap, myself.  Pre-defined settings so that all you do is add a class name, or two, or more, to any element that will position, size, etc.

I believe the current version is v4.

HTH,

^ _ ^

[Nancy OShea]

W3Schools is as good a place as any for absolute beginners.  Read the chapters, do the code exercises and take quizzes at the end. 

• HTML Tutorial
• CSS Tutorial
• JavaScript Tutorial

Online Video Tutorials -

Creating a First Website in Dreamweaver CC 2017

Dreamweaver CC 2018 - Introduction to responsive web design - YouTube

For more advanced users, Mozilla Developer's Network and the Word Wide Web Consortium are  the defacto web resources.

• https://developer.mozilla.org/en-US/docs/Learn
• World Wide Web Consortium (W3C)

[WolfShade]

https://forums.adobe.com/people/Nancy+OShea  wrote

W3Schools is as good a place as any for absolute beginners.

Not to highjack this thread, but this is where we will just have to agree to disagree.  They may (or may not) be getting better (I've heard conflicting reports), but for YEARS W3Schools had little, if any, updates to their information.

http://www.w3fools.com/

According to W3 Fools, W3Schools is improving.  But I'll still skip any Google results that go to w3schools.com in favor of ANYthing else.

V/r,

^ _ ^

[Nancy OShea]

I invite you to look at their HTML & CSS tutorials and form your own opinion.  W3Schools presents the basics without overwhelming beginners.  That's important when you're starting out.  

[WolfShade]

Apologies to the OP for getting off-topic.

It's VERY rare when I choose to remain blissfully ignorant on a subject.  But due to their beginnings and the fact that it lasted for as long as it did, I will not look at anything W3Schools, not even to form my own opinion on how they are currently doing.

Once bitten, twice shy.

V/r,

^ _ ^

[ALsp]

With all due respect, I'm with Wolf Shade on this. W3 Schools should be avoided... perhaps as much as Lynda.com. The W3C is the definitive place, with Mozilla Developer Network providing error-free and simple guidance.

[dusting93022209]

I get it. I see what I would have to do. Not sure if I can as it seems I would need a lot of math to figure out where I need each overlay to be. Tables are more visual for the layout. I think that's why I always tried to use them. On divs, I am not sure how to margin correctly to position. I'll try. Thanks

[ALsp]

dusting93022209  wrote

I get it. I see what I would have to do. Not sure if I can as it seems I would need a lot of math to figure out where I need each overlay to be. Tables are more visual for the layout. I think that's why I always tried to use them. On divs, I am not sure how to margin correctly to position. I'll try. Thanks

If you're not careful on this forum you could get in over your head

You're coming from table design to modern web design and modern web design has evolved immensely over the past 10 years. You need to take baby steps. The first step is posting a visual representation of what exactly it is you want to do. A test page online would be best, but a picture will do. Then you need to decide whether you want to learn how to code it yourself or if you would prefer a tool (extension) that can give you the ability to lay out a page with modern CSS in a visual interface. Good extensions are, of course, not free. But for roughly $100, you can acquire a tool that will make laying out a page similar to playing with Legos - while you learn.

PVIIHarmony Flexbox for Dreamweaver

[dusting93022209]

My site is temp up at http://www.nuhabitstudios.com if you want to see what I am trying to do. Thanks

[Nancy OShea]

So what you have right now is an image of a web page or what we call a design comp.  This whole thing must be rebuilt with real text inside HTML code.   As of right now, your site is invisible to search engines, screen readers and language translators.  This is all they see. 

For a comparison, look at this site and turn off images in your browser.  It's not great without images but at least there is real content.

https://lol.disney.com/

[dusting93022209]

Yes, this is done on purpose due to the type of content.

[Nancy OShea]

dusting93022209  wrote

Yes, this is done on purpose due to the type of content.

Sorry to say, that's not going to work.  

Hopefully you still have all the layers from your PSD comp  from which you can extract and save separate images for background  and foreground elements. 

Text will need to be replaced with real HTML text.

[dusting93022209]

Okay, well, thanks for your opinion.

[Nancy OShea]

Unfortunately, you're not a web designer (yet).  Until you know the rules, you can't break them.

Good luck with your project!

[dusting93022209 · Accepted solution]

Well, no, I never stated I was a web designer. I stated I learned Adobe CS3 - CS4 when I went to college. I am a game dev / indie music producer. I only try to make my own site as I have been doing for the last 6 years. I recently starting gaming 2 years ago decided to update my site graphically instead of cookie cutting. I can make this site work with tables, was just trying to make it easier, not harder on myself. I know coding and I know how to twist logic to work. Sorry you are stuck in the box. I like to think outside it. I understand as I stated earlier that div tags would work, I just have never used them. I might even just simply pay someone to do it. Thanks

[Nancy OShea]

dusting93022209  wrote

I might even just simply pay someone to do it. Thanks

You're welcome.   I think that's an excellent plan.  As a a game developer you know how hard it is to explain coding to a non-programmer.  Well it's exactly the same with responsive web design.  Doing it yourself is going to be difficult and time consuming because you have to learn what you don't know yet.  Hire an experienced professional and get the job done right the 1st time.

[ALsp]

Most of the page is a background image, so there is no real code or content to work with. However, it would be extremely easy to replicate that type of design in a responsive, modern way - even if the glows might not be the epitome of modern web page design... but you'll have to abandon the sliced images approach, designing the page in Dreamweaver instead of Fireworks or Photoshop. If you could do a little test page including the actual content you want in plain text, perhaps I could cook up a little example for you.

[dusting93022209]

Okay, but as i stated as well, it is not sliced.

[BenPleysier]

dusting93022209​ if you are satisfied that your question has been answered, we could close this discussion and mark the topic as 'Assumed Answered'.

As a side note, I have marked all of the replies directed at you as being 'Helpful'; the other replies are best ignored.