Highlighted

Most Recent Version of DW w/ (true) WYSIWYG

New Here ,
Mar 31, 2018

Copy link to clipboard

Copied

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

Views

335

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

Most Recent Version of DW w/ (true) WYSIWYG

New Here ,
Mar 31, 2018

Copy link to clipboard

Copied

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

Views

336

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
Mar 31, 2018 0
Mentor ,
Mar 31, 2018

Copy link to clipboard

Copied

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.

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...
Mar 31, 2018 1
Adobe Community Professional ,
Mar 31, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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...
Mar 31, 2018 1
New Here ,
Mar 31, 2018

Copy link to clipboard

Copied

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 id="Parent" style="position:relative; width:840px; height:4000px; margin: 0 auto; ">

  <div id="Nest1" style="position:absolute; left:0px; top:0px; width:640px; height:132px; z-index:1;"></div>

  <div id="Nest2" style="position:absolute; left:3px; top:3px; width:194px; height:150px; z-index:1"><img src="SuchAndSuch.gif" width="194" height="150"></div>

</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

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...
Mar 31, 2018 0
Adobe Community Professional ,
Mar 31, 2018

Copy link to clipboard

Copied

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.


Ben

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...
Mar 31, 2018 0
Adobe Community Professional ,
Mar 31, 2018

Copy link to clipboard

Copied

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>


Ben

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...
Mar 31, 2018 1
New Here ,
Apr 01, 2018

Copy link to clipboard

Copied

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

EXAMPLE.png

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)

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...
Apr 01, 2018 0
LEGEND ,
Apr 01, 2018

Copy link to clipboard

Copied

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/

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...
Apr 01, 2018 0
Adobe Community Professional ,
Apr 01, 2018

Copy link to clipboard

Copied

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*

CC-localsite.jpg

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

CC-StarterPage.jpg

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

CC-StarterPageAssets.jpg

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, ACP
Alt-Web Design & Publishing

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...
Apr 01, 2018 1