layout and ap div in Dreamweaver CC

[KaNe_Nod]

where is the layout panel and where is the draw ap div button in Dreamweaver cc?

i hope it's hidden but not been taken away

help please

[Nancy OShea]

I looked into reflow but it does not appear to be a complete solution, there is no way to add meta tags, or other important elements, and the pages do not open in Dreamweaver to continue fleshing out the site.

Reflow is for layouts only.  All the rest you can most certainly do in DW.

I did read that the Adobe code was crap...

Don't know who said that. When used properly, DW produces web standards compliant HTML & CSS code.  But it's only as good (or bad) as the person using it.   If your code contains errors, 99.99% of the time it's pilot error and not the software.

I did discover fulid grids, would you say this is the best way to achieve RWD inside Dreamweaver? 

It's one way but certainly not the only way. 

Fluid Grid Layouts in CS6

http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-layouts-in-d...

Fluid Grid Layouts in CC

http://helpx.adobe.com/dreamweaver/using/fluid-grid-layout-dreamweaver.html

In addition to Fluid Grids, there are several free and commercial frameworks you could use.  Some people actually prefer working with these.

Foundation Zurb

http://foundation.zurb.com/templates.php

Skeleton Boilerplate

http://www.getskeleton.com/

Initializr (HTML5 Boilerplate, Responsive or Bootstrap)

http://www.initializr.com/

DMX Zone's FREE Bootstrap extension for DW

http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

Project Seven's Responsive CSS Templates

http://www.projectseven.com/products/templates/index.htm

Nancy O.

[C_F_McBlob]

Roosevelt77,

Here's something to consider... IT DOESN'T HAVE TO BE DONE YOUR WAY EITHER!!!!!!  <---THAT'S me shouting.

I started "playing around" with DW3 in 2004 because it was on my workstation at Intuit. I was fascinated with HTML after that and I began "self teaching"...

SInce then, I've learned A LOT MORE from Nancy's posts here (even when they were in response to other people's questions) than I EVER did from books or even two semesters of college "web development" courses.

Just because you disagree with her advice, doesn't make her wrong. There have been times when she posted something and I thought "Now, WHY on earth would I do that?", and a few months later I found myself incorporating EXACTLY the tool she recommended in a new site.

APDIVs, like Windows 98, had their day and it ISN'T today. Get yourself a calendar with BIG BOLD font for the year so you can CLEARLY SEE IT'S 2013 and wake up.

[R00sevelt77]

Hey no need to shout. You are all making my point. It doesn't HAVE to be done your way to be right. Like it or not, AP Divs do exist. And you, and Nancy and everyone else can't wish them away. You can, apparently, rant and rave like a bunch of esoterics insisting you have the only correct approach to design and programming. Must be a blast at dinner parties with you guys. If you would all like a lesson in how to properly use absolute positioning, provide an email or attend a Web 101 course at your local community college or technical high school and brush up...and maybe you won't sound do utterly foolish.

[infatum]

Thanks for the Adobe Muse. Though I wish AP Divs stayed in Dreamweaver. I feel a bit sorry for myself being unable to grasp the idea of obsoleteness of AP DIVs . I could possibly understand the opponents of AP Divs. That's perhaps the feeling I face when explaining to someone that Windows 7 is a new and better operating system than the Windows XP, while people who got used to Windows XP sometimes show resistance and want their good old XP back.

And If I were to continue the Windows analogy, then the release of DW CC was like the release of Windows 8 which haven't had the usual "Start" button down the left corner. People were divided in their views. Some were expressing concerns about the logic of the "Start" button and argumented why it is not there, while others panicked and desperately wanted it back. Well, I had to install a third party app to have the "Start" button back. I guess there is little chance a third-party genius would "put" AP Divs back.   

As far as I understood, Adobe Muse is going to be for the designers only with no code option (unless one switches back to DW). What about people who stand in between the designers and the coders? What about people who are not professional web-developers, but rather script-kiddies like me who try to play with the code, adapt the developments that are in the wild and integrate it within own website while keeping the designing enabled?

You could still make the design somewhat relative if your absolutely positioned divs are centered with a wrapper, but I guess there is a number of drawbacks that outweigh the logic of AP Divs.

[guptabhawna05]

Please refer this link for more details.

AP Divs will throw all content over the page as browser sizes shift.

They may look good in dreamweaver or your own browser, but other browsers with different window sizes will "reposition" those divs and possibly make everything unaligned.

[Jon Fritz]

If you really want to see APDivs explode your design, go into Firefox and choose View > Zoom > Zoom Text Only then play around with Ctrl + and Ctrl -.

Since you can't control what your viewer uses as their default font size, you can't control your designs when you use APDivs.

Thankfully Adobe saw fit to remove them from DW. Up until recently, I would suspect about 10-15% of the problems brought to the forum were Absolute Positioning related in some manner.

[Nancy OShea]

Thankfully Adobe saw fit to remove them from DW.

Yes.  Good riddance to APDiv Layers.  It's a shame we waited this long.  Should have been removed 4 versions ago.

Nancy O.

[R00sevelt77]

A vast majority of highly trafficked, professionally developed sites would encounter that same 'design explosion' given in your example. If you are looking to maintain some consistency in the design and visual appeal of your site you cannot also build to accommodate viewers who choose to browse with font sizes that are ridiculously large.

[infatum]

I would disagree that drawing AP divs is obsolete. One could design a whole website with AP divs and use a wrapper that centers the elements of the website so that it aligns in accordance with screen size. This whole website is designed using AP divs - http://www.liep2vsk.edu.lv/

It's just that some people prefer to design visually. Pity if Adobe completely abandons AP DIVs.

[C_F_McBlob]

infatum wrote:

...One could design a whole website with AP divs

One could design a whole website with Photoshop or Fireworks or even Microsoft Word too. That DOESN'T mean anyone SHOULD.

[bregent]

>It's just that some people prefer to design visually.

Some people? I can't think of anyone who wouldn't prefer to design visually. It's just that the results are never as good. By the way, the site you referenced looks terrible on my system on IE and FF.  With default zoom settings, I need to scroll horizontally to see the entire page.

[C_F_McBlob]

I'll add to that, there are a load of HTML errors: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.liep2vsk.edu.lv%2F

I don't have any "side scrolling" issues, but then I'm on a 1920X1080 monitor, so I RARELY have to scroll sideways to fit a full page, but then I'm the exception and NOT the rule. At 1440X900 it starts needing to scroll both ways. I'd hate to think what it looks like for someone who hits it on a smartphone.

[infatum]

Glad some could point to the one-and-only W3 validator. It's strange that whenever I try to fix some elements the W3 validator deems as an error, these elements stop functioning. And it's strange Dreamweaver doesn't mark these very same errors, but once I begin to correct them according to W3 standards the Dreamweaver shows a syntax error 😃

I don't bother setting the "alt" for an image. Are you going to critique me for that?

Some syntax errors belong to external scripts. How strange that they still work no matter what the W3 validator shoutsout.

I had to put the centering wrapper div tag called <div id="mainArea"> before the <body> tag in order to avoid placing it before every time the new element is inserted (since every new element appears just after the <body> tag and shifts the centering wrapper lower and lower. Thus, the new element falls out of the centering design and appears misaligned). How couldn't the W3 validator foresee this? It was the only workaround I found.   

It's weird W3 validator shows errors of unclosed body tags when it's there. Or am I missing something? Enlighten me since my narrow expertise as a web developer has exhausted itself. I'm not a web developer, I have learned things by random clicking the buttons. And it turned out AP DIV was one of my favorite ones.

And yes, the smartphone generation is an issue. I had designed this website before cell phones became smart like you 😃 Hope I'd get more time to redesign the website. But hey, it's up and running. 

[BenPleysier]

Gosh, does this take me back in time when I used to have the same reaction to the Validator. I also aired my frustrations in this forum especially when these idiots at the W3 consortium decided that using proprietary properties  in an XHTML (Extensible -HTML) document was illegal. Nothing Extensible about that.

And why should I care about the ALT setting? Why should I care if blind people using screen readers cannot follow my document? Why should I care if Google doesn't include the gist of my site?

Now, many moons later and having had decent tutors - like the ones found here (even the bullish ones, Al) - to help me, I am now glad to have put that period behind me. I am a still-learning-webdeveloper and as such I can unequivocally tell you that placing markup before the BODY-tag is one of the worst mistakes one can make, more so when one notices that the said markup has not been closed properly.

Perhaps one does not realise that the BODY element is a wrapper and that the style rules that have been applied to the introduced wrapper can actually be applied to the BODY element. This will do away with the notion of I had to put the centering wrapper div tag called <div id="mainArea"> before the <body> tag.

It is great to read your statement " I'm not a web developer", this shows that you are willing to learn and believe it or not, we are altruistic enough to help you.

To start with, when styling a normal layout, there is no need to use position. The default value for position, static, allow elements to render in order, as they appear in the document flow.

I must admit that I have never come across a document that has had so many AP's and still function to some extent. This case negates the notion that one should not use AP's. But boy, have you made it hard on yourself, just have a look at the styles section. You have had to create a separate element for nearly every section of your document, a mind boggling exercise. Why go to this extent when it is so easy to create the same document with fewer style rules? Why not use classes instead of limiting ID's?

I could go on like this forever, suffice to say, welcome to the fold.

[infatum]

Dear Ben,

Problem with the wrapper that I have faced is not simply about enclosing the wrapper into the <body> tag. Surely I'm not the smartest around here, but smarter than that. Every time I insert a new element the code gets written just after the <body> tag. Let me exemplify.

Let's say I do it according to what it should like, the <body> tag first, the opening centering wrapper ("mainArea") second, with all other divs following afterwards:

<body>

<div id="mainArea">

<div id="apDiv65"><img src="ico/certified.png" width="81" height="101" /></div>

Now, if I were to draw a new AP div using the design mode, say it would be apDiv66 in this case, it somehow would jump just after the <body> tag, thus falling outside the centering wrapper. I would have to cut and paste the centering wrapper <div id="mainArea"> every time I draw new AP divs. Example below:

<body>

<div id="apDiv66"></div>    ---- this apDiv would fall outside and will not center

<div id="mainArea">

<div id="apDiv65"><img src="ico/certified.png" width="81" height="101" /></div>

I decided to check if placing the centering wrapper in the <head> tag would solve the issue of new AP Divs and it did.

Regarding the position. Whenever I draw an apDiv within the Dreamweaver (yes, I draw them in the Design mode) the "position: absolute;" gets written alongside with the right, left, top, width and z-index properties automatically. If I were to take it out, the ap Div appear at the left corner of the document. Or am I talking about a different positioning?

I agree that creating a unique style for every ap Div is sometimes time-consuming (unless one uses copy-paste from the existing nearby elements). I will look into the classes and styles. Thank you for the advice.

[BenPleysier]

Perhaps I was not clear, so I will try again.

At the moment you have

<div id="mainArea">

     <body>

          .......

     </body>

and

body {

    background-image: url();

    margin: auto;

    width: auto;

    position: relative;

    z-index: auto;

    left: auto;

    top: auto;

    right: auto;

    bottom: auto;

    clip: rect(auto,auto,auto,auto);

    page-break-before: auto;

    page-break-after: auto;

}

#mainArea {

    position: relative;

    width: 1150px;

    margin-left: auto;

    margin-right: auto;a:hover {

    color: #0F0;

}

What I am saying is

<body>

     .......

</body>

and

body {

    margin: auto;

    width: 1150px;

    position: relative;

}

[infatum]

I have experimented with your example assuming the first change comes within the index.html file, while the second within the center.css file. Unfortunately it is not working. The whole website gets left-aligned. The idea of the wrapper is to center the whole website according to user screen resolution. However, thank you for trying. 

[BenPleysier]

How strange that it did not work for you.

Have a look at my attempt here

PS 4 errors and 1 warning less

Message was edited by: Ben Pleysier

[BenPleysier]

I thought I would give you a leg up by showing you how to properly develop a website. I have only showed the header.

Have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fpleysier.com.au%2Finfatum2%2F and smile

To make the document more attractive, the script for the date should be in an external file.

Also, the document should allow older browsers to recognise HTML5 elements.

If I have wetted your appetite and you have further questions, please start a new discussion.

[infatum]

Now it works. I have figured out the changes you described were in the same index.html file. While I was also playing around with a center_all.css file which had that very same code. Thank you for describing how to keep the code nice and clean, but the question is, if it is working with the same functionality, does one need to bother about changing 30+ pages just to keep the W3 validator happy? 😃

Now I get the idea behind the image ALT and the screen readers. I've never thought of that. Thought it was for people who sit on 28.8K modem and wait for images to load observing the ALT text in the meantime.

[MurraySummers]

Having  been one of the more vocal critics of using absolute positioning for a general layout method, I'll say it again:

AP divs should never be used as a layout tool. They work well for specialty purposes but will always take you to places you have no business being when used for a general approach.

With regard to the value of the validator, think about this: does it make sense to debug a layout problem when you know the page contains HTML that does not validate? Admittedly, missing alt attributes do not affect the layout of the page, but do affect its usability.

[C_F_McBlob]

MurraySummers wrote:

Having  been one of the more vocal critics of using absolute positioning for a general layout method, I'll say it again:

AP divs should never be used as a layout tool. They work well for specialty purposes but will always take you to places you have no business being when used for a general approach.

With regard to the value of the validator, think about this: does it make sense to debug a layout problem when you know the page contains HTML that does not validate? Admittedly, missing alt attributes do not affect the layout of the page, but do affect its usability.

"Yeah! What he said!!!"

[osgood_]

MurraySummers wrote:

With regard to the value of the validator, think about this: does it make sense to debug a layout problem when you know the page contains HTML that does not validate? Admittedly, missing alt attributes do not affect the layout of the page, but do affect its usability.

Depends. Anyone any good can tell pretty quickly just by looking at the pages code whether to persue finding an issue regardless whether the page validates or not.

I've stepped back from many a page on this forum because the page coding was awful. I've also found many an issue were the page wasn't valid and had nothng to do with validation but persisted because the coding was rather good.

Hope you're on the mend now. I see the bump didn't manage to clear this obsession with validation (said with tongue in cheek)

[MurraySummers]

I see the bump didn't manage to clear this obsession with validation (said with tongue in cheek)

It only made it worse!

I'm mending very well, thanks - much better than I expected. Will probably be able to begin physical therapy in couple of weeks. I will need it for both right knee and left shoulder.

Depends. Anyone any good can tell pretty quickly just by looking at the pages code whether to persue finding an issue regardless whether the page validates or not.

In a way, you have proved my point. When faced with a layout issue, the first thing you do is look at the code. In a way, you run a rough mental (virtual) validation. When you are good with code, you can do this and determine whether you need to go further with a real validation. And my point really is that one should not begin debugging a layout without having some evaluation of the code state. I'm assuming that most people who are using positioning as a layout method are not so good with code which is where the validator comes in.

[osgood_]

MurraySummers wrote:

I see the bump didn't manage to clear this obsession with validation (said with tongue in cheek)

It only made it worse!

I'm mending very well, thanks - much better than I expected. Will probably be able to begin physical therapy in couple of weeks. I will need it for both right knee and left shoulder.

Hope things progress well for you Murray. Nice to know you're heading in the right direction.

MurraySummers wrote:

In a way, you have proved my point. When faced with a layout issue, the first thing you do is look at the code. In a way, you run a rough mental (virtual) validation. When you are good with code, you can do this and determine whether you need to go further with a real validation. And my point really is that one should not begin debugging a layout without having some evaluation of the code state. I'm assuming that most people who are using positioning as a layout method are not so good with code which is where the validator comes in.

If people are using positioning as their main layout technic then they need to learn how to code first before attempting to produce a 'real' website.

Validator can help given you know your coding and what the validator errors actually mean but I wouldn't place as greater emphasis on it as some do.