8 Replies Latest reply on Aug 14, 2007 2:47 PM by amacbriar

    tabbed menu style

    amacbriar Level 1
      Hi,

      I'm a newby with Dreamweaver and I'd like to change the tabbed panels to look like file folders, similar to the following: http://www.kgnu.org/ht/support.html . I've look around the web for different styles of tabs to download but I haven't found any like this. Plus, I wouldn't know how to go about inserting a download style into the page. I would appreciate any suggestions you might have. Thanks. --Anna
        • 1. Re: tabbed menu style
          Level 7
          That site menu uses custom end cap images inside table cells with background
          colors to give it the appearance of tabs. The images are very tiny but if
          you right click on the left and right side edges of each tab and select View
          Image, you'll see how it's put together. Then you can create your own end
          cap images with your favorite graphics editor.


          --Nancy O.
          Alt-Web Design & Publishing
          www.alt-web.com





          "amacbriar" <webforumsuser@macromedia.com> wrote in message
          news:f9qj1u$bl9$1@forums.macromedia.com...
          > Hi,
          >
          > I'm a newby with Dreamweaver and I'd like to change the tabbed panels to
          look
          > like file folders, similar to the following:
          > http://www.kgnu.org/ht/support.html . I've look around the web for
          different
          > styles of tabs to download but I haven't found any like this. Plus, I
          wouldn't
          > know how to go about inserting a download style into the page. I would
          > appreciate any suggestions you might have. Thanks. --Anna
          >


          • 2. tabbed menu style
            DaphneStarr Level 1
            I don't know of any downloads, but I find it easy enough to use CSS to create navigation like the example you show. There's a bunch of steps involved, but it's an important skill to master. There's many resources online - just google CSS navigation. Simply put, you create an ordered list, add some styling so that such as display: inline, text-decoration: none, and a add a background image. Once you've got that down pat, it's very easy to create selected states and rollover effects without having to mess with JavaScript. Also, pure CSS-based navigation is very search engine friendly. Here's one of many techniques on how to do it: http://tutorials.mezane.org/tabbed-navigation-using-css/#Introduction

            Good luck,
            Lorinda
            • 3. Re: tabbed menu style
              All that one is a bunch of columns with a border. Then they inserted images to make it look like a tab.

              quote:

              td rowspan="3" width="12"><img src="../graphics/tab_off_left.gif" alt="" border="0" height="24" width="12"></td>
              <td bgcolor="#aaaa77"><img src="../dot.gif" alt="" border="0" height="1" width="1"></td>
              <td rowspan="3" width="12"><img src="../graphics/tab_off_off.gif" alt="" border="0" height="24" width="18"></td>
              <td bgcolor="#aaaa77"><img src="../dot.gif" alt="" border="0" height="1" width="1"></td>
              <td rowspan="3" width="12"><img src="../graphics/tab_off_off.gif" alt="" border="0" height="24" width="18"></td>
              <td bgcolor="#aaaa77"><img src="../dot.gif" alt="" border="0" height="1" width="1"></td>
              <td rowspan="3" width="12"><img src="../graphics/tab_off_on.gif" alt="" border="0" height="24" width="18"></td>
              <td bgcolor="#aaaa77"><img src="../dot.gif" alt="" border="0" height="1" width="1"></td>

              <td rowspan="3" width="12"><img src="../graphics/tab_on_off.gif" alt="" border="0" height="24" width="18"></td>
              <td bgcolor="#aaaa77"><img src="../dot.gif" alt="" border="0" height="1" width="1"></td>
              <td rowspan="3" width="12"><img src="../graphics/tab_off_off.gif" alt="" border="0" height="24" width="18"></td>
              <td bgcolor="#aaaa77"><img src="../dot.gif" alt="" border="0" height="1" width="1"></td>
              <td rowspan="3" width="12"><img src="../graphics/tab_off_off.gif" alt="" border="0" height="24" width="18"></td>
              <td bgcolor="#aaaa77"><img src="../dot.gif" alt="" border="0" height="1" width="1"></td>
              <td rowspan="3" width="12"><img src="../graphics/tab_off_right.gif" alt="" border="0" height="24" width="12"></td>
              <td colspan="2"><img src="../dot.gif" alt="" border="0" height="1"></td>
              • 4. Re: tabbed menu style
                DaphneStarr Level 1
                True, that particular site uses tables, but I wouldn't recommend doing it that way. CSS is much more efficient, versatile, and more professional.

                quote:

                Originally posted by: PyroPunk132
                All that one is a bunch of columns with a border. Then they inserted images to make it look like a tab.
                • 5. Re: tabbed menu style
                  Level 7
                  You're right about CSS being more versatile and professional. What's more I
                  highly recommend taking time to learn html and CSS. But that wasn't the
                  question. This OP said "newbie." And since tables are not, in and of
                  themselves evil, I think one just starting out could safely use tables to
                  achieve this effect and perhaps learn a little bit about html coding along
                  the way. No harm there.

                  Just my 2 cents,
                  --Nancy O.


                  "LorindaWebDesign" <webforumsuser@macromedia.com> wrote in message
                  news:f9qpo3$ihj$1@forums.macromedia.com...
                  > True, that particular site uses tables, but I wouldn't recommend doing it
                  that
                  > way. CSS is much more efficient, versatile, and more professional.
                  >
                  >
                  quote:

                  Originally posted by: PyroPunk132
                  > All that one is a bunch of columns with a border. Then they inserted
                  images to
                  > make it look like a tab.
                  >


                  • 6. Re: tabbed menu style
                    Level 7
                    This tutorial might be helpful:
                    http://www.projectseven.com/tutorials/css/qtabs/index.htm

                    --
                    Al Sparber - PVII
                    http://www.projectseven.com
                    Extending Dreamweaver - Nav Systems | Galleries | Widgets
                    Authors: "42nd Street: Mastering the Art of CSS Design"


                    "amacbriar" <webforumsuser@macromedia.com> wrote in message
                    news:f9qj1u$bl9$1@forums.macromedia.com...
                    > Hi,
                    >
                    > I'm a newby with Dreamweaver and I'd like to change the tabbed panels to
                    > look
                    > like file folders, similar to the following:
                    > http://www.kgnu.org/ht/support.html . I've look around the web for
                    > different
                    > styles of tabs to download but I haven't found any like this. Plus, I
                    > wouldn't
                    > know how to go about inserting a download style into the page. I would
                    > appreciate any suggestions you might have. Thanks. --Anna
                    >

                    • 7. Re: tabbed menu style
                      TC2112 Level 1
                      Al, great tutorial!

                      You guys are the best.

                      Tim
                      • 8. Re: tabbed menu style
                        amacbriar Level 1
                        Thank you so much for your generous responses. --Anna