• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to insert and position an image (creation mode)?

New Here ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

Hello,

I would like to insert and move an image in order to place it in a specific place on my page
(I am in WYSIWYG creation mode) but I cannot move it, it remains stuck on the left edge of the page.
Is there a solution?
Thank you

Views

717

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
community guidelines
Community Expert ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

FWIW, there is no "WYSIWYG creation mode" in DW (no matter what the marketing department at Adobe has said in the past). There is Design View, a broken framework view from a bygone era that sort of sometimes looks like your actual page, Live View which is an emulation of a Chrome browser that is typically several versions behind a true browser and has some of Design View's editing functions, and Code View which is the simple text view of your page's code.

 

DW has the ability to do what you want (drag images in the design space of Design View), if you give the item absolute positioning in its css, however, the underlying code it generates when working that way is horrible for an actual website and will break on screens that are smaller than your design space (pretty much all mobile devices). 

In order to work effectively in DW, you're going to have to give up on the notion of WYSIWYG development and start learning some code basics. The program, for better or worse, assumes you understand html, css and some javascript. What you're doing could be as simple as adding float:left to your image's css, or it may require understanding the grid or flexbox model for page layout, it's hard to say without more information.

Here's a good place to start on getting the basics under your belt...

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

https://www.w3schools.com/css/

https://www.w3schools.com/js/

 

Votes

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
community guidelines
New Here ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

thank you for your reply.

 

But it's AMAZING that software like DW doesn't do a minimum of WYSIWYG (design mode) .. ???,
I know a little html and css but precisely to make my job easier and for a trivial thing (simple and off-putting)
(ex: like inserting and moving an image), I thought I could easily do it with the DW GUI
and that DW can generate the code behind.
(it seems to me that other software much less sophisticated than DW are able to do this .. !!!)

I chose DW partly for this reason and its many features
but I realize that this is not the case at all !!!
Under these conditions, you might as well use a simple editor and do everything by hand in html, css, ..: - (((

Votes

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
community guidelines
Community Expert ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

DW isn't really all that different from the Macromedia days. Adobe has moved things around, and bolted on some third party additions like Bootstrap, Git and Brackets, but in all reality, the code the program creates by itself is fairly basic. It was never truly a WYSIWYG program and Adobe never really poured the resources into it, to keep up with changes in the internet in general. It's still pretty much a glorified text editor with some very nice site management tools. 

The old method of click drag and drop in DW relied on adding position:absolute to every item on your page. That's pretty much the opposite of the correct way to design these days, so Adobe hid the old APDiv and APElement buttons to help designers to stop hamstringing their websites in the age of responsive design. When that css is added, the interface still recognises it in Design View and allows for the same type of layout.

 

There really aren't a lot of developers that strictly use DW as their sole interface anymore. Most have moved on to a multi-tool approach. Some programs are better at a WYSIWYG design approach, some are better coding environments, and if DW stays in the mix, it's usually for the site management tools and integrated Git and FTP.


Wappler might be a better fit for you, design-wise. As I understand it, it's a lot more designer-friendly than DW ever was.

Votes

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
community guidelines
LEGEND ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

quote


Wappler might be a better fit for you, design-wise. As I understand it, it's a lot more designer-friendly than DW ever was.


By @Jon Fritz

 

I doubt it, its become a big behemoth of a program which uses Bootstrap, much the same as DW, although they have managed to introduce Bootstrap 5, while Adobe are seemingly still trying to make their program compatible with Yosemite ie (light years adrift of where they should be). Many 'raised voices' over at Wappler forum from new users about the lack of up-to-date instructions etc, many say they have tried but given up. I think Wappler is now NOT what it set out to be but much more of a sophisticated bit of software, finding a place for itself that makes coding 'supposedly' simpler BUT you really have to know something about coding to use it effectively, much like many of the other editors, webflow, pinegrow etc

 

I dont really know of any efficient 'stand-alone' editor that can fully drag and drop and write decent code at the same time and still be flexible enough to add bespoke coding if necessary. If there was one I may well have a go myself.

 

I think its a case of using something like Wix maybe, most, from a 3 year old to a 99 year old seem to be able to put something mosty acceptable together in that, without knowing anything.

 

At the risk of sounding like a clown, for anyone who justs wants to put up a nice looking simple static website, no database, not much interaction etc Rocket Cake may well be a suitable standalone option to consider. That IS drag and drop and you can insert additional code to enhance the experience, if needs be, but hell the code it spits out is seriously not something I could live with myself.

Votes

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
community guidelines
Community Expert ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

Let me enlighten you. In this video I show how to move an image northwards. In the same manner it can be moved in other directions.

https://www.youtube.com/watch?v=U55kAUVMUo4&t=135s

 

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

I have never used wappler, but every time I see it in action, a demo, or an article on the subject, I am surprised by the quality of its interface, the flexibility of reaction, the ergonomic management in general, woaw, it almost makes me not want to type in the code anymore

Votes

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
community guidelines
LEGEND ,
Jul 28, 2021 Jul 28, 2021

Copy link to clipboard

Copied

Well seriously consider it. Its a bit more progressive than using dwt files. Its time to up your game or join those who have passed their sell by date (joke)

Votes

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
community guidelines
LEGEND ,
Jul 28, 2021 Jul 28, 2021

Copy link to clipboard

Copied

At what minute does that happen. I dont really have 11 mins to sit through that kind of workflow but at a guess it would just be applying margins?

 

If so that can be done in most editors with a graphical interface of which DW must have some kind of no code option to add a margin to an image without deploying bootstrap and using a grid or utility classes

 

I was assuming the OP was refering to the ability of being able to freely pull an image around akin to what happems in a DTP program.

 

Probably should not have got involved in a post where there is obvious need for the OP to take some time out and use it to further understand the basics of positioning elements rather than try and guide them to a solution which seemed more in keeping with their level of skill and knowledge which may either just confuse the hell out of them or be so basic its next to useless.

Votes

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
community guidelines
Community Expert ,
Jul 28, 2021 Jul 28, 2021

Copy link to clipboard

Copied

quote

At what minute does that happen. I dont really have 11 mins to sit through that kind of workflow but at a guess it would just be applying margins?

 

By @osgood_

 

I did not forget that you can judge an IDE by spending 10 seconds on it. That is why the video starts at 2:15 (135 seconds) and the phenomenon ends 10 seconds later. 

 

Ref: https://www.youtube.com/watch?v=U55kAUVMUo4&t=135s

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
LEGEND ,
Jul 28, 2021 Jul 28, 2021

Copy link to clipboard

Copied

LATEST

As l expected, and theres me thinking there was a mysterious, magical property that only Wappler had discovered  - thanks for trying your best to enlighten me though.

 

Sounded like a lot more than 10 seconds had been spent on judging an IDE from the posts I read.

 

Signs and symptons of Dementia: incoherent, obscenely abusive and repeating what is already known.

 

Votes

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
community guidelines
Community Expert ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

Dreamweaver is NOT a drag & drop graphics design app like Photoshop.  It's a coding tool for people who understand responsive web design and have a good grasp of working within a pre-built grid layout. 

 

For what you want @Phil5E57, consider using an online site builder.  Several former Muse users jumped to WordPress with the Elementor (drag & drop) plugin after Muse ended.

 

NOTE: Elementor only works with WordPress sites.

https://wordpress.org/

https://elementor.com/


OTHER SITE BUILDERS:
-- Squarespace - https://www.squarespace.com/
-- Webflow - https://webflow.com
-- Without Code - https://www.wocode.com/
-- Wix - https://www.wix.com/

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

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
community guidelines
Community Expert ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

Can you draw us 3 images of how you wish your page to appear on mobile, tablet and desktop devices?

With simple design comps, any experienced user can craft a basic HTML & CSS layout for you to start with.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

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
community guidelines
Explorer ,
Jul 27, 2021 Jul 27, 2021

Copy link to clipboard

Copied

The concept of WYSIWYG is fine for print media, when you know that, for example, you are going to be printing on a sheet of A4 paper.
However, a website may be viewed on a tablet in portrait mode (like A4), or by scrolling through on a mobile (like a roll of toilet paper) or a large desktop screen (like a sheet of A2 in landscape mode).

Votes

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
community guidelines