Highlighted

Want to create simple rollover buttons and put them where I want...

New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

So after watching a lot of youtube videos - many of which appear to be out of date (the person will often go to some menu or tab that my latest copy of Dreamweaver simply does not have!) - I am totally lost and wondering how I can do the following:

I have a background image, which is of a large TV basically, and I want the buttons to light up when you mouse over them, and click. Simple, I thought! Beginner stuff.

So far, I can put my image in the page, as a background, and I can also make the rollover button. The button appears above my background image however, and I can't move or drag it. BRILLIANT. (Sorry, I'm a bit upset that this isn't simpler to do and all the tutorials appear to be outdated)

How do I, after making the rollover button - move it to the desired location, over my background? Any help will be really appreciated! I'll be glad to watch any tutorials you know of that can help with this also.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

pyremind  wrote

I'm a designer that doesn't want anything to do with code.. haha.

You are looking for Adobe Muse then.

The interface will be immediately much more recognizable to you.

That's Adobe's "for designers who don't want to learn code" website development tool.

TOPICS
Learn Dreamweaver

Views

457

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Want to create simple rollover buttons and put them where I want...

New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

So after watching a lot of youtube videos - many of which appear to be out of date (the person will often go to some menu or tab that my latest copy of Dreamweaver simply does not have!) - I am totally lost and wondering how I can do the following:

I have a background image, which is of a large TV basically, and I want the buttons to light up when you mouse over them, and click. Simple, I thought! Beginner stuff.

So far, I can put my image in the page, as a background, and I can also make the rollover button. The button appears above my background image however, and I can't move or drag it. BRILLIANT. (Sorry, I'm a bit upset that this isn't simpler to do and all the tutorials appear to be outdated)

How do I, after making the rollover button - move it to the desired location, over my background? Any help will be really appreciated! I'll be glad to watch any tutorials you know of that can help with this also.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

pyremind  wrote

I'm a designer that doesn't want anything to do with code.. haha.

You are looking for Adobe Muse then.

The interface will be immediately much more recognizable to you.

That's Adobe's "for designers who don't want to learn code" website development tool.

TOPICS
Learn Dreamweaver

Views

458

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 05, 2017 0
New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

Also, I see a lot of mention of the 'common' category in the insert tab... that's another one that appears to have vanished?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 0
New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

And "layout"... where did that go to?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 0
Adobe Community Professional ,
Oct 05, 2017

Copy link to clipboard

Copied

Layout changed several versions back, along with a lot of other items. You really need to match tutorials to your version or your going to go crazy.

If you are a paid subscriber, you can do that pretty easily (within the 5 CC versions) by downloading and installing a previous version from your CC Desktop App. Right now, you can go all the way back to CS6 Cloud and have all 5 Cloud versions installed on the same machine at the same time under a single subscription. They won't run concurrently, but that's typically not an issue.

1. Open the CC Desktop App
2. Click the Apps Tab
3. Click the small arrow next to DW's Install/Update/Open icon (it will be one of those 3 depending on which version you have installed)
4. Click Other Versions
5. Choose CS6 Cloud (most likely version your tutorials are for)

In the future, when new versions come out, be sure to click the Advanced Options link at the bottom of the installer window. That will allow you to turn off the Remove Older Versions checkbox, which allows you to learn the newer versions at your own pace, without losing the familiar version you were working on. Dot releases will still overwrite, so use caution when updating from .3 to .7 or similar.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 0
Adobe Community Professional ,
Oct 05, 2017

Copy link to clipboard

Copied

According to Adobe, Dreamweaver is for "Designers who want to work with code". The program really does assume that you have a good grasp on html, css and some javascript. If you don't, it's going to be a very steep climb for you. Using out of date resource material is going to compound any issues that come up.


On an image I don't intend to be responsive, I would give the larger TV image's container the css setting of position:relative. Then place the buttons in that same container and give them the css setting of position:absolute. I would then drag them into their final positions from within Design View.

A word of caution, although you can use position:absolute here, it can be pretty tricky if your TV image is responsive and changes size based on browser window width. Absolute positioning by default uses a pixel value and that value won't change when the screen size does.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 1
New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

Thanks - maybe this isn't the right program for me..? I'm a designer that doesn't want anything to do with code.. haha.

The containers gives me a new thing to look into so thankyou for that. If you have a program that might be more my speed, I'd be happy to hear about it!

The T.V. itself will be playing my portfolio reel when you click play - so I'm not sure whether absolute positioning would be wrong for this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 0
Adobe Community Professional ,
Oct 05, 2017

Copy link to clipboard

Copied

pyremind  wrote

I'm a designer that doesn't want anything to do with code.. haha.

You are looking for Adobe Muse then.

The interface will be immediately much more recognizable to you.

That's Adobe's "for designers who don't want to learn code" website development tool.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 1
Pyremind LATEST
New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

I'll check it out! Gosh you're nice. Do they pay you? They should. Well thanks again - off to the races.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 0