5 Replies Latest reply on Aug 31, 2007 10:38 AM by pixlor

    Creating Borders

    TheBigBad2Million Level 1
      I've been working a lot with Fireworks 8 and Dreamweaver 8, and I've started my own website and whatnot, but there's just one thing that's got me scratching my head.

      How do I create a border in Fireworks, and get it into Dreamweaver, so it's a fully functional, flexible border?

      Thanks a lot in advance.
        • 1. Re: Creating Borders
          pixlor Level 4
          What do you mean by "border?"

          Tables in HTML have borders, images have borders, CSS elements have borders...but somehow I don't think that these are what you're referring to. Can you link to a site that has what you're talking about and maybe point out the color of it so we know?
          • 2. Re: Creating Borders
            TheBigBad2Million Level 1
            Well, now that I think about it, I could do it another way.

            Say I want to make an image where I can type text...like a box with some border I could make in Fireworks.

            How could I get that into Dreamweaver, so it would stretch with the text I put into it?

            Hope I'm being clear enough.
            • 3. Re: Creating Borders
              pixlor Level 4
              Okay, I think I know what you want. You can't get it with an image, but a table would work. In Fireworks, text is a vector object. Once you export that, it's just a rectangular grid of pixels, and you can't type into it. There are a couple of ways to putting a border on a table, and which one will work for you depends on what you want the border to look like.

              The simplest would be a solid color border. I'm replacing the angle brackets with square ones, but this code would get you a 150-pixel-wide table, with a 10-pixel green border around a light yellow content center:
              [table width="150" border="10" bordercolor="#009900" cellspacing="0" cellpadding="5"]
              [tr]
              [td bgcolor="#FFFF99"]The quick brown fox jumped over the lazy dog.[/td]
              [/tr]
              [/table]
              The bgcolor="hexcolor" attribute in the table, row, or cell tag sets the background color for that element.

              If you want a to use images for your border, then you might get by with a background image for the whole table and another for the cell with the content. This method would work for a single gradient or for a tiling background image. To set a background image, you use the background="filename" attribute in the table, row, or cell tag.

              If you want to have complex images around the edges, then you'll need a table which may have as many as three rows by three columns, with your content in the center cell. How you code the table will depend on whether your images tile as background images in the cells or are non-tiling content images. In either case, you'll have to work out how the images will adjust for stretching tables (which can happen if the user changes his or her font size). Content in cells can be aligned to the top, middle or bottom of the cell, so really, there are too many possibilities to give examples for.

              • 4. Re: Creating Borders
                TheBigBad2Million Level 1
                Thanks.

                What I'm doing is setting up a 3x3 table and trying to make the individual backgrounds for the sides and corners. Is there some easier way to get them all to fit smoothy with each other? Like to make the line running from the side to connect with the line making the corner so there isn't any break between cells? I made the border 0, but I'm just having a bit of trouble.

                Also, is there any way to make it so the background doesn't tile? I think that'd work best on the corner images.

                Oh, and it seems whenever I type, the table will just extend wider to meet with the amount of text instead of going to the next line. Any reason for this?

                Thanks again. I really appreciate it.
                • 5. Re: Creating Borders
                  pixlor Level 4
                  quote:

                  Originally posted by: TheBigBad2Million
                  What I'm doing is setting up a 3x3 table and trying to make the individual backgrounds for the sides and corners. Is there some easier way to get them all to fit smoothy with each other? Like to make the line running from the side to connect with the line making the corner so there isn't any break between cells? I made the border 0, but I'm just having a bit of trouble.
                  Sorry, yes. You want to have cellspacing="0" and cellpadding="0" unlike the first example I gave. Cellspacing is the distance between the cells and cellpadding is the distance from the cell wall to the content in the cell. To match up images, they'll both need to be zero. You may later need to add something to offset your content in the middle cell, but we can get to that later.

                  quote:

                  Also, is there any way to make it so the background doesn't tile? I think that'd work best on the corner images.

                  Yes, but it requires CSS*. For the corners, if the height of all the images on each row is the same, put the images in the cells themselves, and not as backgrounds. Also, for the inner and outer columns, set the width of the table cells to match the width of the images.

                  quote:

                  Oh, and it seems whenever I type, the table will just extend wider to meet with the amount of text instead of going to the next line. Any reason for this?
                  Well, the browser tries to be as efficient as it can with space. You have two options. You can set a a width on the middle cell of the top row and your text will automatically wrap inside the table, although the height of the table will then adjust to fit the text. Alternatively you can specify line breaks where you want them: [br /] (again, change square brackets to angled). In this case, the size of the table will adjust if the user's font size differs from yours.

                  quote:

                  Thanks again. I really appreciate it.
                  You're welcome!


                  * The CSS solution to putting a background image in a table is to define a class for that cell using these properties:
                  background-image: set the background image
                  background-repeat: to set the type of tiling (all directions, x-only, y-only, or none)
                  background-position: to position the image

                  If you only have this one page, you could put the CSS in the head section of the page
                  [head]
                  [style]
                  .upperleft {{
                  background-image: url(imagelocation);
                  height: 10px;
                  width: 15px;
                  background-repeat: no-repeat;
                  }
                  ....
                  [/style]
                  [/head]
                  For height and width, use the dimensions of your image. Define styles for your other corners.

                  Then, in your table, for the upper left-hand cell, use
                  [td class="upperleft" width="15"]
                  and similarly for the other corners.

                  I think I have that right, anyway.