Skip to main content
Participant
July 27, 2021
質問

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

  • July 27, 2021
  • 返信数 4.
  • 1335 ビュー
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
    このトピックへの返信は締め切られました。

    返信数 4

    Known Participant
    July 27, 2021

    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).

    Nancy OShea
    Community Expert
    Community Expert
    July 27, 2021

    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
    Nancy OShea
    Community Expert
    Community Expert
    July 27, 2021

    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
    Jon Fritz
    Community Expert
    Community Expert
    July 27, 2021

    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/

     

    Phil5E57作成者
    Participant
    July 27, 2021

    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, ..: - (((

    Jon Fritz
    Community Expert
    Community Expert
    July 27, 2021

    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.