Creating Rounded
Rectangles for the Web by Wizaerd
Date Posted: 08/11/2001 - One of the most commonly
seen elements on webpages today are rounded rectangles. You see them everywhere,
and there are countless tutorials on the web for creating them. Most of them
deal with making reverse rounded rectangle corners, and then relying on
transparency to control the color of the rectangle. I however will be taking a
different approach, excercising a bit more control over my ending rectangle.
I will be using the Image Slicing tool found in the new Canvas 8,
however these techniques can be duplicated in version 6 or 7 with a bit of work.
Start up your Canvas program, and be sure to turn on your grids. This
can be done under Layout->Display-Show Grids. Open the grids option box
(Layout-Grids) and set your grid width and height to 20 pixels. Also be sure to
check the snapping checkboxes as well.
Now draw a 60x60 rounded
rectangle, making sure it aligns properly with your grid. Draw a horizontal line
and place it 1 grid segment (20 pixels) below the top of your rectangle. Select
both the line and the rectanlge, open the Combine palette and choose the slice
option.
This will give you two new shapes and you'll need to ensure
they are not grouped. I like my rectangles to have a distinct edge or border, so
I;ve set the stroke for both these objects at 2. Also be sure to set the stroke
alignment to fall inside the shape.
You'll notice that
the line seperating the top portion of the rectangle from the bottom looks
awfully big and gawdy. Select the bottom shape and send it to the back of the
other object. Then drag the top of that bottom portion so that it's top falls
under the top portion.
Now you can color
your shapes any colors you choose. Be sure to load the websafe palette before
doing so. This is going to be fairly important as we progress through this
tutorial. Also make a note of which colors you do choose.
Now we'll drag
some guides out ounto our document. To do this you'll need to make sure the
document rulers are visible. (Layour->Display->Show Rulers). Since we've
got snap to grids turn on, dragging and dropping our guides are easy as pie.
Drag them so that they align as shown in this image:
Using the new image
slicing tool (it's the pizza slicer in the tools palette) create slice segments
on each of the grid segments along the edges of the rectangle. You don't have to
create one in the center element. Using the second slice tool (this tool allows
you to select slice segments and assign slice properties). I selected each slice
segment, right clicked (sorry Mac users, I don't know the equivalent option) and
named each segment appropriately. For example, I named them topLeft, topMiddle,
topRight, middleLeft, middleRight, bottomLeft, bottomMiddle, and bottomRight.
Then select all slices, right click and choose the export slices option.
I only selected the checkbox to choose HTML Export options. I believe most of
these options are checked by default.
Click the OK
button, and you now have an html file, with HTML code to display this rounded
rectangle. (your generated code may not look exactly like this because I've
gone in and put in extra carriage returns to make the display a little neater.
Plus your image names will most likely be different.)
Granted this isn't much use. But if
we modify the HTML code a bit, this box can become fully scalable and user
configurable. We'll need to delete or eliminate the center graphic, set the
color of that cell to the color of the rectangle (#FFFFCC), delete the middle
top graphic and set the background color of that cell to black (#000000).
Remember I told you to keep track of which colors you used, and to use websafe
colors. This is not mandatory, but makes it easier to set the color of your
table cells. Plus there'll be no color shifting.
I also added width and
height attributes to the appropriate table cells to keep them from shifting.
Because of a strange quirk with HTML and some different browsers, the side
graphics wouldn't display properly, so I added the two side graphics as
backgrounds to the two <td> elements. (using an WYSIWYG HTML editor
would come in real handy here. Personally I use Dreamweaver).
This is where the text will go for our rounded corner
box pretty nifty, no?
But wait, that's not all. As is, this
box will scale to whatever width and height is necessary to accomodate the text,
this being the nature of HTML tables. With an appropriate usage of a singular
width attribute in our middle cell, we can control the width of our table.
Change:
<td bgcolor="#FFFFCC">
This is where the text will go for our rounded corner box
<br>
pretty nifty, no?
</td>
to:
<td width="150" bgcolor="#FFFFCC">
This is where the text will go for our rounded corner box
<br>
pretty nifty, no?
</td>
and our table ends up looking like
this:
Box Header
This is where the text will go for our
rounded corner box pretty nifty, no?
It's the same exact table. Change the
fonts a bit or use some Cascading Style Sheets (CSS), and you could truly make
this an exciting rounded rectangle. Put an HTML form inside of it, news and
events for your organization, a navigational menu. You can do anything with a
rounded rectangle, and now you know how to easily create them.
