Hello!

First off, I am a complete HTML/CSS newbie and trying to build my first website with Responsive Site Designer (RSD).

My question is:
How can simulate something like a "tab control" with RSD,
i.e. I want to have the following layout in my web-page:
Row A contains several buttons or a horizontal menu
Row B (under row A) contains a container which should display different texts or html-pages.
The text or html-page which is displayed in the container depends on the
(menu-)button clicked in row A.

I appreciate your suggestions / pointers to tutorials!

Kind regards

Asics,

There are several ways of doing what you want but because of your self-described "complete HTML/CSS newbie" status, I'll recommend this solution:

Make each tab a separate page in RSD. Here's an example of what I'm talking about:

Say you have tabs called "Home", "About Us" and "Contact". You can have more tabs but three tabs will give you an idea of the process.

Create Row A: the layout you want for the tabs as they would appear when the "Home" page is selected. Add some Button Link objects to the row. You'll probably want the "Home" tab to have a different color so that it looks like it's selected.

Create Row B with the content you want to see when the "Home" is selected.

By default, the first page in an RSD project is called Index.

To change the name of a page, click on the "Pages" icon in the top tool tray and choose Manage Project. In the Pages panel (accessed by choosing "Manage Project"), double-click on the Index entry. Change the name to whatever you want.

Next, edit the Home button link object and change the Href property to be the page's name. RSD will give you a dropdown list if you backspace over the default # character. If you didn't change the page name yet, the default page name is index.html. If you changed the page name to "Home", then one of your choices will be "home.html".

Here's the neat part: when you're done with your Home page, copy it to a page called about-us. To do that, access the "Manage Project" panel. In the lower-right corner of the panel is a [Duplicate Page] button. It does what you think it does. When you click on the button, it will create a page with a _1 suffix. You should know how to change a page name. I would call it "About-Us". The reason I replaced the space with a dash (-) in the name because if you use a space, then your page name would look like this: about%20us.html. Most newbies don't think that's a very pretty name because of that ugly %20. So get around that problem by not using space or any other special character other than dash.

When you're looking at your new About-Us page (you can tell because the page name is in the RSD title bar), change the color of the Home tab to be like the others, and change the color of the About Us tab to be the same color as the selected tab from your Home page.

Change Row B to have the content you want when "About Us" is selected.

Edit the Href property of the About Us button link object to go to the "about-us.html" page. Next, go back to the home page and change its About Us Href property to "about-us.html". Now everything is all linked up.

You can click Preview to see how your two pages interact. As long as you change NOTHING about the geometry (position, margins, etc.) of Row A in either page then it will look like you're switching between one tab to another even though it's really different web pages.

Repeat the above for the third button (Contact). You'll have to change the Href in all three pages to "contact.html".

I showed you this longer way to create the Href links because you'll be able to choose the name from a dropdown list. As a more experienced user, I would define all of the Button Link Href references manually when I'm creating the first page. Then, as I copy each page, the Href properties will already be defined. As long as I'm giving each page the correct name (the ones I chose when manually creating the Href references), then everything will fit together like a puzzle when I publish it.

Experiment with the RSD tool by trying things and exploring what it can do. There is a pretty steep learning curve but you will be able to create a responsive site without coding a single line of HTML, CSS or JavaScript.

Curtis

Hey Curtis,

thank you very much for your detailed help. I understood and reproduced your steps and it works like a charm.

The next goal I would like to achieve is not to switch to a new html-page on button click
but to have an embedded container in the main-page (Index),
where the different texts (or html pages) for the different buttons (e.g. "Home", "About Us" and "Contact") are shown.

Thanks again and kind regards

https://www.youtube.com/watch?v=cOLbJNO7gMs

Mansour,

your video-link indeed helped me to embed my "tab-control".
This video also whetted my appetite for this jquery-stuff

Thanks and kind regards!

Great tutorial, Mansour... a bit "speedy" (had to stop & replay several places), but it gave me some great ideas for adding the feature to a project I'm currently working on.

Thanks for your continued support.