Tutorial: Your First (and second) WellRounded Rect

WellRounded is easy to use and even users without much HTML knowledge will find it easy to use. Advanced users will find that WellRounded HTML and CSS is well labelled and easily modifiable

You Always Remember The First Time

1. Create a new document.
2. Save it somewhere. WellRounded can only work on documents that have a pathname.
3. Choose DreamWeavers Layout toolbar.
4. Click the WellRounded toolbar icon.
5. Since this document has no WellRounded rectangles in it yet, two WellRounded dialogs will open immediately. You should be looking at the WellRounded class dialog:
6. Enter some name into the Class Name field. Avoid using punctuation or numbers in the name.
7. Click OK.
8. After the Class Dialog closes you'll have the DIV Dialog. It looks like so:
9. Enter a unique name in the ID field. Avoid using punctuation or numbers in the name.
10. Click OK.
11. You should now have a nice round cornered rect in your DreamWeaver document. Looking thusly:
12. You are done.

Experiments

• Try typing into the text area of the WellRounded rect. Notice how the rect expands downwards as you add text.
• Try grabbing the side handle and making it wider.
• Try grabbing the bottom handle and making it taller - oops - this won't work. This rect takes it size from the content, dragging it larger has no effect.
• Try grabbing the div handle ( ) and moving the round rect around. WellRounded defaults to absolute positioned divs, but we'll see in other tutorials how to make them inline and relatively positioned.

Wanna Do It Again?

We'll make a second round rect. The UI for WellRounded is slightly different when there is a pre-existing round rect.

1. Use the same document from the first part of this tutorial.
2. In DreamWeaver place the cursor outside the WellRounded Rect we made earlier and type in some text into the document.
3. Select that text you just typed.
4. Choose the WellRounded icon from the Layout toolbar.
5. This time only one dialog opens up. The DIV Dialog.
   Q: Why?
   A: The first time you called WellRounded on this document there was no round rect defined in your document, so it went straight to the Class Dialog where is where you define new round rect classes. But this time, we already have a round rect defined so we don't necessarily need to define a new one. WellRounded opens up just the DIV Dialog.
   We can just re-use the class and files from before to create another orange rounded rect. Or, we could opt to click the New Round Rect Class button to open the Class Dialog again.
6. Provide a unique name for the ID field in the DIV Dialog.
7. Click OK.
8. We're done. The text that you typed and then selected is now nicely wrapped in a new WellRounded rect.