Most Recent Version of DW w/ (true) WYSIWYG

Report · Mar 31, 2018

hello...

Working in Macromedia DW 2004...obviously need to upgrade. Downloaded CC 2018 trial version, only to find it's no longer a true WYSIWYG app.

I design by 'drawing' layers (divs), not by having to place them strategically in the code...I design like a graphic illustrator would; & then fine tune the whole business in Code View. [& that newest version is also missing different ways to manipulate text (e.g., italic, bold, font size, etc.) easily].

So...unless I'm missing something here...& there is indeed a simple 'Insert Layer' button somewhere I've failed to pick up on...can someone please tell me when this function was thrown out (so I can get the previous year's release)?

thanx,

dox

Report · Mar 31, 2018

There was never really a true WYSIWYG Dreamweaver. Dreamweaver, even the latest version, does not fully support CSS (the single design language of the web) so what you want is actually impossible. You can get a facsimile, and then you can rely on browser preview or live view. The other issue here is that drawing layers (which do not actually exist) is kind of like taking a Model T out on the autobahn. If you do not know CSS and basic HTML markup, and you want a web page that will work in all modern devices, then you must use either a canned web page service, where you pick an online template and have limited control over simple edits. Or you can use Dreamweaver extensions to install page building tools. The bottom line is that it requires an investment:

1. Your time to learn basic coding

2. Your money to buy one or more tools to install into Dreamweaver.

There are no other choices that won't cause a lot of pain.

Report · Mar 31, 2018

You've been using outdated software and web design methods for so long, you missed the train. It left the station about 10 years ago. See this related thread.

layout and ap div in Dreamweaver CC

Modern, responsive web design is not possible with so-called Layers or APDivs. Those inserts were removed from DW several years ago. Nowadays, we use CSS and media queries for optimal viewing on mobile, tablet and desktops. This is NOT click & drag web design.

If you open your page in Live view (see screenshot), you will have a more accurate rendering of your work -because it uses a Chrome embedded framework. However, previewing in all modern browsers and mobile devices is still the most reliable way of testing your page layouts.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 31, 2018

OK...fair enough...thanx...

Most all of my designs account for all that, tho...I create a parent div which has 'relative' positioning (always centered)...& my 'absolute' positioning divs nest inside that (where the nest snippets are tabbed two spaces to the right)...so the code sorta looks lilke:

[HTML]

</div>

[/HTML]

& I've never has any problems w/ different screen resolutions or resizing.

But I guess my real question would now be...in accordance w/ my above method...how can I now position my text & images quickly/effectively in CC 2018 without using APdivs...??? I know the answer lies with CSS, but is there an informational somewhere that shows me how to do this quickly by manipulating the code...OR...even better yet...is there some CSS command/function in CC 2018 that sets it up?

thanx,

dox

Report · Mar 31, 2018

To reluctantly answer your question. I have added background colours to show the result.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
  <style>
    #Parent {
      position: relative;
      width: 840px;
      height: 4000px;
      margin: auto;
      background-color: cadetblue;
    }
    #Nest1 {
      position:absolute; 
      left:0px; 
      top:0px; 
      width:640px; 
      height:132px; 
      z-index:1;
      background-color: yellowgreen;
    }
    #Nest2 {
      position:absolute; 
      left:3px; 
      top:3px; 
      width:194px; 
      height:150px; 
      z-index:1;
    }
    #Nest2 img {
      width: 194px;
      height: 150px;
    }
  </style>
</head>
<body>
  <div id="Parent">
    <div id="Nest1"></div>
    <div id="Nest2"><img src="http://lorempixel.com/output/nightlife-q-c-199-153-1.jpg" width="199" height="153" alt="Such and Such"></div>
  </div>
</body>
</html>

I hope that you have noticed the vertical scroll bar to nothing and the horizontal scrollbar when I reduce the window size to less than 840px as is the case for mobile devices.

Wappler, the only real Dreamweaver alternative.

Report · Mar 31, 2018

Not sure why I am doing this, but here is an (very rough) example using CSS Grids. Hopefully I have correctly interpreted your goal. Copy and paste the following into a new document and see the result.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
  <style>
    .parent {
      max-width: 840px;
      margin: auto;
      display: grid;
      grid-template-columns: 76% 24%; 
    }
    .nest1 {
      background-color: yellowgreen;
    }
    .nest1 img {
      max-width: 193px;
      float: left;
      margin: 3px;
    }
    .nest2 {
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="nest1">
      <img src="http://lorempixel.com/output/nightlife-q-c-199-153-1.jpg" alt="Such and Such">
    </div>
    <div class="nest2"></div>
  </div>
</body>
</html>

Wappler, the only real Dreamweaver alternative.

Report · Apr 01, 2018

FOLLOW-UP to Original Post (#3)...

I guess what I should be asking is this: How would I create a simple page...using both HTML & CSS...that would flow correctly in all browsers & devices...& look like the following:

(whereby the block represented by the thick black line is always centered...& the other blocks (text & images) remain inside the centered block)...

thanx,

dox

btw...looking for an informational on the web that will instruct me how to do this...not for someone to do my homework for me (on the other hand...if your inclined to whip up some quick code...feel free; & it will be greatly appreciated)

Report · Apr 01, 2018

O/k, I won't do your homework for you, but what you are looking for is called css flexbox layouts -

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Report · Apr 01, 2018

markf26988182 wrote
looking for an informational on the web that will instruct me how to do this..

1) Define your DW local site folder by going to Site > New Site. Example, C:\MyTestSite\ *see screenshots below*

2) Go to File > New > Starter Templates. Choose one of the Bootstrap Template Sample Pages and hit CREATE button.

3) After saving your index.html page, DW will create Assets folders for your fonts, images, CSS and JS files.

That's it! With just a few clicks, you now have a fully responsive page layout to work with. Change content as desired. SaveAs new filename to create more pages based on this one.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Most Recent Version of DW w/ (true) WYSIWYG