Text DIV:s?

[gnurf]

Is there a way to get a "block" of text into just one main wrapper instead of breaking it up into text line divs? This would mean I cannot flow text to follow a round object, but I can live with that.

If not, it would be a neat feature to have a checkbox or something similar so you can chose to put all text into just one div instead of rows.

[covoxer]

We use separate div's for every text line not only to implement repelling and tabs. It is necessary to explicitly control the positioning and the length og the strings. othervise, text blocks can render much longer or shorter in the browser than you have in design.

But if you don't mind to lose all the WYSIWYG the program provides, then yes, there is a way.
Create placeholder object, and insert your text as a snippet.

[Charles Moir]

John's answer is right. Our primary goal was absolute WYSIWYG as accurate as we can get it, and that means that line breaks happen where they happen in WD, and lines are positioned exactly where they appear in WD.

The downside of having each line positioned separately appear to be minor (slight overhead in the HTML) and of not significant consequence, especially when compared to the overall download size of most websites with any graphics in. One smallish photo is typically larger than the HTML of most pages anyway.

[stlewis]

...yes that works. For those of who are more interested in creating re-usable layouts - not a pure WYSIWYG design, this will be our approach I think.

So create a rectangle for the background to the text. Use a theme colour for that.

Then overlay that with a rectangle to contain the text. Click on the Website Properties button and then click the Placeholder tab. (It would be great if this dialog could be made to stay open ie behaving more like a Gallery.)

Then click the text area and enter the text in the 'Replace with HTML' box. For example:
<!-- TemplateBeginEditable name="rightcolumn" -->
<p>Right column</p>
<!-- TemplateEndEditable -->
(I am trying to make the page into a Dreamweaver template, but that is for a different thread.)
The DIV is fixed size, but this looks promising....

[covoxer]

(It would be great if this dialog could be made to stay open ie behaving more like a Gallery.)

It can. Just don't close it.

[stlewis]

John (covoxer)...or another guru...

Is there a way to force the sequence of layout divs?

Really what I want is this:

container
header
sidebar1
sidebar2
mainContent
[clear]
footer
[close container]

By adding another placeholder with <br class="clearfloat" /> I can get that onto the page, albeit in the wrong place. And use the same technique for the closing container div (which means we have one surplus closing div).

I know that Fireworks uses layout shapes to guide the engine that builds the css so I'm just trying to push XWD to to the same, and then I can use the other tricks! And I know I am using a screwdriver as a hammer, it'd just that if I can add a simple macro to rip out the fixed positioning and hook in an external css file to control the layout, I will be a very happy bunny.

I'll attach my XWD file for others to have a play with.

If you have access to a thrColFixHdr css file from Dreamweaver you will see what I am aiming for.

[covoxer]

Give the wysiwyg tool to the real coder, and he'll find a way to code in it!
Great!

Ok, so let's try to figure out what we have to do. I'm not sure what you exactly want to get. How to add a closing div you have already figured out. To have an opening div you have to put this in placeholder:

</div><div id="goo"><div>

In this case the "goo" div wil be opening div in html for the following code.
If you want to preserve the positioning and size of the placeholder's div, in other words, make all following code to be within this div, you have to add this to the placeholder:

<div>

That simple. The order of the divs in exported html is the same as the order of the objects in design. The bottom object goes first.

Ask more if i've got you wrong.

[stlewis]

Excellent...thanks.

Yes, I need to get my order right front to back, and that will be great.

The stripping of the code won't be too hard, except for changing eg:

style="left: 22px; top: 36px; width: 758px; height: 97px; position: absolute; id="header""

to

id="header"

- a job for Regular Expressions, so I will have to try that.

The macro to run those can drop in the external css and (I guess) rip out the IE5 fix or replace it whatever is really needed.

Then I can try designing a real page, and see whether I should actually just wipe my brain and use XWD in the way it is supposed to work

Thanks again.

[stlewis]

This is now workable.

See the attached XWD file. This has the blocks in the right order (ie the block to appear at the top is BEHIND all the others, with the bottom block appearing at the FRONT.

This is based on the Dreamweaver thrColFixHdr stylesheet ie Three Column, Fixed, Header; so it uses the DIV names expected by that. Make sure that stylesheet is in the same folder as your exported site.

You then need to do a series of Find/Replaces which remove the absolute positioning, fixed sizes, insert the link to the style sheet, removes a double close-div that I am getting, and removes a last superfluous div. I have attached the macro that I have built for use in EmEditor Professional but which may well work in any editor that can work with JavaScript macros.

The end result is pretty clean in Dreamweaver. The next task for me is to try adding some design in XWD. I can see that the nightmare may be the ordering of the objects - maybe this is where I will give up!

[stlewis]

Naaah. Give up!

So my conclusion is (as others are coming to in this debate...)

Use XWD:

- as a design-rich tool for building small-ish sites without tons of text.
- for prototyping, creating working models
- for generation of the graphics from the protoyping process (great for the buttons, filled backgrounds etc)

But do not expect a clean workflow from design to template for larger, more complex sites. John (covoxer) have chosen a great strategy but it would be very difficult to encompass both in the same product.

Oh well, it was worth a try.