creating tabs with Expression Web 2

Question

How do I use Expression Web 2 to create tabs on a website, tabs that will serve to better manage access to multiple documents that would become available once the tabs are clicked on?

Answer 1

What do you mean by "...to better manage access to multiple documents..." Are you talking about links to PDFs? Or pages that hold links to PDFs?

I don't understand what the managing access is about. It sounds like you just want to create links to new pages. Is that it?

Answer 2

Bill

Yes, that's it - tabs to pages that have links to pdf documents.

Tabs at the top of the initial page have a "neat" look, and can show by inference a certain conceptual coherence between multiple document-access pages.

Answer 3

Well, it depends on how you want to do it, but it's just like adding more pages.

If you're new to this (EW and/or HTML, CSS, etc.) go to: http://by-expression.com/media/p/1300.aspx
Download the asset file and work through the "Building a Basic Website" tutorial. Lots of good info not only on HTML and CSS, but on using EW.
Cheryl, that site's author, posts often in here.

Also, open one of the website templates included in EW and play around with that. In particular, notice how the menus are created in the DWT file (which is the master for all the other pages). They are just unordered lists styled in the CSS style sheet. It really is a piece of cake to do it--but it's not "tabs".

You can create tabs for your pages, but they are kind of old fashioned looking (if something from the late 1990s can be called old fashioned). They are inserted by using the Insert Interactive Buttons feature. (But a text-based menu is so much easier and slicker looking and much more efficient use of screen real estate), IMHO.

Then, when you get all confused, c'mon back here and ask (but if you have questions about your work in particular, post your site to the web first, so that we can see the code).

Answer 4

You can create tabs for your pages, but they are kind of old fashioned looking (if something from the late 1990s can be called old fashioned). They are inserted by using the Insert Interactive Buttons feature. (But a text-based menu is so much easier and slicker looking and much more efficient use of screen real estate), IMHO.

Heh, heh... funny, I can recall back when the "new tab-style menus" were all the rage, some time after drop shadows began to appear on everything and then became commonplace. Kinda like rounded corners have come to be lately, now that I think about it. I wonder how long that will last, and what's next on the horizon...

cheers,
scot

Answer 5

Hey, check out the navigation at the top of this page! Looks like it was done with background images and a text-based menu (although I really didn't dig too deep into the page source). Strictly an appearance thing, but I agree that it looks dated. Still, it's kind of ironic that there is an example right there.

Edit: okay, it's actually separate divs, not an unordered list, but it is one way to do it.

Jim

Answer 6

"I wonder how long that will last, and what's next on the horizon..."

Next, in order of desirability...Personal jet packs, air cars, and the deprecation of animated GIFs. The first two were promised to us when we were young by Popular Science magazine; the last is just a pipe dream.

Jim: I wasn't thinking about the tabs on the top of this forum. I'd forgotten about them. They are all DIVs. They aren't as bad as many I've seen (and waay better than the ones generated by Interactive Buttons), but you're right--they are sooooo 2008.

Answer 7

Bill

I viewed the by-expression video tutorial that you recommended, but there was no mention of how to create tabs using Expression Web.  I am using the trial version, and my assignment is to do a demo of a page with tabs on it, with each of the tabs leading to an index page of available documents.  I have the
manual VISUAL QUICKSTART GUIDE MICROSOFT EXPRESSION WEB 2, but it doesn't mention how to create tabs either.

Answer 8

Check out the jQuery tabs.  Very powerful and customizable.

jQuery Tabs:
http://jqueryui.com/demos/tabs/

---

--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help

Answer 9

If you want to simply use interactive buttons (not that I would personally recommend that, but it's probably the easiest way to complete your assignment), Bill gave the answer in the same post that had that link. Look down a couple of paragraphs where he says "They are inserted by using the Insert Interactive Buttons feature."

Just go to the Insert menu, select Interactive Button..., and scroll through the list until you see a preview that you like. If you need more explanation, EW Help has a very thorough description of how to use them. Good luck.

Jim

Answer 10

If that is literally your assignment as stated, you're home free, since I don't see anywhere there where it is required that you use a particular technique. Also, since each tab is a single-level link to a page you can use pretty much any container that will hold an anchor.

Create or get yourself an image of a tab. Let's say it is 100px wide x 35px high. Call the image myTabImage.jpg. OK, now you create a class named .tabs, and a container to hold them, like so

.tabs {
   width:100px;
   height:35px;
   background-image:url('images/myTabImage.jpg');
   float:left;
}
#tabContainer {
   width:600px;
   height:35px;
}

Then you create a container div as wide as the width of one tab times the number of tabs you need. say it's six tabs, so

<div id="tabContainer">
   <div class="tabs">
      <a href="http://locationofindexpage.com"> Subject One</a>
   </div>
   ... etc. five more times for Subjects two through six
</div>

If you want to separate the tabs a bit, give them a small right margin, say 2 - 3 pixels, and add that to the size of the tabContainer div.

As long as each page in the links is styled the same, the tab row will appear to remain stationary, with only the content below changing as the new page loads. If you want to get fancy, you can create a separate tab image for the active tab, and a class named .current that you can use to set it for the selected page, so

.tabs .current {
   background-image:url('images/myCurrentTabImage.jpg');
}

And then on each page you would assign the .current class to the appropriate tab, like this

<div id="tabContainer">
   <div class="tabs current">
      <a href="http://locationofindexpage.com"> Subject One</a>
   </div>
   ... etc. five more times for Subjects two through six
</div>

The contextual selector would cause only the tab assigned class .current to have the different background image.

Now, that's all of your homework I intend to do for you. You should have plenty of information to take it from here and complete your assignment.

cheers,
scott