Jump to content
xisto Community
pasten

Creating Navigation For Html Websites Have a common navigation menu for the whole website

By pasten, in General Discussion

Recommended Posts

pasten    0

pasten
Posted (edited)

Pre-requisite: HTML, inline frame <iframe> tags

1 Attachment(.zip) included.

Updates:

29-12-07: Doctype added in example files (Advised by jlhaslip)

 

 

Designing a whole website takes a lot of planning and organization. Designing a proper navigation system is a basic step in building your website.

 

If you are developing webpages in html you would have observed that as you go on creating pages it becomes difficult to maintain the links to the pages. This article will guide you in developing a common navigation menu for your website. It describes three ways, so if you don't understand one you can read the other.

 

Navigation is a link system by which the user moves from one page to other in your website and creating it needs a proper method. When I was a beginner this was the first hurdle encountered by me and none of the books explained this concept clearly, so I thought of writing this article. Consider this simple site structure:

 

Home

 

Houses

|

House 1

House 2

House 3

 

Mortgage Rates

|

Bank 1

Bank 2

 

In this sample site structure if you provide the links of Home, Houses, Mortgage Rates in every page then the user can go to any of the three pages irrespective of the page he is in. But what if you want to add another page “Agencies”. You have to manually add this link to every page into your website. This can be a nightmare if you have 20 plus pages. Although there are many ways of solving this problem, I am going to explain the simple method.

 

One great method is to create a menu which is common for the whole website. Hence pages can be added and its link can be added in just one menu to represent in the whole site.

 

This method uses “Inline Frame”. Note that this is not the regular frame which is created with “frameset” tags. The tag used is <iframe>. The <iframe> container can appear inside the <body> element of the web page. For example

 

<iframe name="iFrame1" width=200 height=550 src="menu.html" scrolling="auto" frameborder="0">

</iframe>

Put this code where you want the menu to appear in your webpage, I like it in left side of the page. Note that you have to just add this code in to every page of your website for the menu to be displayed in every page.

 

Now you have to create another page “menu.html” in which you will put all your links. Don't forget to select "Parent Frame" in the link type. For example, to link to page_1.html:

 

<p><a target="_parent" href="page_1.htm">Page 1</a></p>

 

You’ve done. Now every page has a consistent navigation menu.

 

Important Note:

The inline frames width and height should be greater than the menu you create. Otherwise the content inside the inline frame would appear cropped.

 

Creating inline frames with Microsoft Frontpage:

If you were unable to follow the method above you can do it in Microsoft Frontpage (Even if you can't follow this then download the example zip file).

 

1) Firstly create the pages of your website.

2) Then for the menu, create a new page and add the names of the pages. Highlight the first name, then right click and select "Hyperlink". In this select the page which should come when a user clicks that name. Also, we want the page to appear on the whole page, not inside the frame. So, select "Target Frame" in the same dialog and choose "Parent Frame" as Target Setting (This is important step).

3) Link all the pages by the above method.

 

You've done it.

 

Any doubts are welcome.

Thanks.

a_example1.zip

Edited by nitish (see edit history)

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

An interesting approach to the concept of navigating a site, however I have a couple of comments.I-frames are not the coolest thing in the Web. They don't get indexed, I believe, like a regular div on a page, so that is one stike against them.Your zip file contents are nice. At least they work to do what you describe, but the pages are missing a Doctype Declaration. Might be a shortcoming of the software you used. Not sure, because I have never used Dreamweaver or Frontpage, so I just don't know how they work.A Doctype is critical for cross-browser rendering of pages. If you don't know what they are, I suggest you learn about them. w3schools can provide some information about them.I appreciate that you have a good concept of the method which will make the 'one set of links' work for your site. Have you considered using a different techinique? Like a php scripting and / or a php include?

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

A small correction content in the iframes do get index not just as much as content not in iframe; iframes are another one of those engima's on the internet. Of course to point out AJAX does this as well when you do the preload in document set up, meaning that instead of of the whole website reloading it loads the page within the element document. Of course php includes follow this enigma as well and from websites who talk about it seems they have no problems as well.Also I don't remember were I saw this but it seems i nthe world of XHTML doc type is irrelevant, in the sense that people only use doctypes to have their code validated. Regardless if they have a doctype or not have the proper coding in your documents will display correctly, of course thats were quirks mode comes into play and the horror stories behind that, well are true. Of course I think once the the browsers are finally standard compliant across all types of coding I think thats when Doctype would become obsolete.Now on to the topic at hand, if I last recall iframes have limitation on how they can be styled with CSS, but there are other ways to creating an iframe like nav men, like haslip mention php, others include AJAX navs and using a little javascript to expand a menu. Yeah its obvious what the goal is for creating am Iframe base nav menu and that is cut the time needed to change each page when you have to update the nav menu after putting a new link to your site that is the ultimate goal of all web designers to cut down the time needed to design a website.

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

people only use doctypes to have their code validated

Nope. Proper Doctypes tell the Browser which rules to use.
It can tell the Browser to use xhtml, for instance, so your comments are not correct.

Without the correct xhtml Doctype on your page, the Browser would have no clue that you wanted to have the page displayed based on xhtml and with no Doctype, the Browser uses 'Quirks Mode', which is its own version of HTML. Every Browser uses a different set of rules for their own style of Quirks Mode and that is the problem with Cross-Browser designing. While the page is in Quirks Mode, you require a bazillion Hacks to get the page rendering similarly across multiple Browsers. Using a Doctype sets the rules to be the same for all of them.
Having said that, yes, indeed, each Browser does render things differently, even with a common Doctype, but the newest releases of those Browsers are becoming more and more similar in their handling of pages.
Concluding in the comment that says: the best Doctype is the one which matches your style of Coding. If you are aiming for a cross-browser, standard compliant page and have thee skill and patience to code in xhtml Strict, then do so. If you only have the knowledge and skill to code in html 4, then use the Doctype which sets that level.

For example, I have worked at honing my skills, and have a decent understanding of the Box Model, etc, so I am capable of writing xhtml strict BUT, since I do not use the pages in an xml environment, I have lately dropped my Doctype and coding back a notch to HTML Strict.

IMHO.

Share this post

Link to post
Share on other sites

pasten    0

pasten
Posted

An interesting approach to the concept of navigating a site, however I have a couple of comments.
I-frames are not the coolest thing in the Web. They don't get indexed, I believe, like a regular div on a page, so that is one stike against them.
Your zip file contents are nice. At least they work to do what you describe, but the pages are missing a Doctype Declaration. Might be a shortcoming of the software you used. Not sure, because I have never used Dreamweaver or Frontpage, so I just don't know how they work.
A Doctype is critical for cross-browser rendering of pages. If you don't know what they are, I suggest you learn about them. w3schools can provide some information about them.

I appreciate that you have a good concept of the method which will make the 'one set of links' work for your site. Have you considered using a different techinique? Like a php scripting and / or a php include?


Firstly I take your advise of including Doctype declaration.

Regarding iframes getting not indexed, I don't think so, because the page displayed by clicking links in it will be like any other HTML page with different meta tags and title. I think you are talking about the iframe itslef, that is the links inside iframe not getting indexed. The best solution is to create a SITE MAP. What do you think about this?

I created this article for frustrated HTML developers who are mostly newbies and hence didn't talk about anything other than HTML.

And my thanks for your kind review of my article.

Share this post

Link to post
Share on other sites

sonesay    7

sonesay
Posted (edited)

This is where pure HTML only has its limitations. The only other method I can think of that can provide you with a similar effect where you need to update only in one place to update your menus is combining HTML + a server side scripting language. For example PHP and include files.The concept isnt too difficult and the benifits are no need for iframes, You just create a template and include your navigation in there. Use your template for as many pages as you like and when you update the navigation you only need to do it in one place. In fact the end effect is similar to what you've shown with this example. I have not worked with iframes at all but your guide is nicely written and easy to understand. I am getting tempted to dl it just to see what it looks like. edit : I just looked at it and I would say it does its job but iframs and menuts are not that nice looking. I would say its more suited for content then holding a menu. But overall a nice example for us to see. thanks

Edited by sonesay (see edit history)

Share this post

Link to post
Share on other sites

csp4.0    1

csp4.0
Posted

Concluding in the comment that says: the best Doctype is the one which matches your style of Coding. If you are aiming for a cross-browser, standard compliant page and have thee skill and patience to code in xhtml Strict, then do so. If you only have the knowledge and skill to code in html 4, then use the Doctype which sets that level.IMHO.

Dang! I spent all that time learning XHTML Transitional and you tell me XHTML Strict is better? Oh, why! I liked your tutorial and now that you've put those doctypes in it really makes it look a lot more professional. Also, I do agree that iFrames are not the best thing in HTML (I personally prefer divs), and it did run a bit slow when I uploaded it and used my '56k' connection, good review and happy reviewing!

Share this post

Link to post
Share on other sites

pasten    0

pasten
Posted

This is where pure HTML only has its limitations. The only other method I can think of that can provide you with a similar effect where you need to update only in one place to update your menus is combining HTML + a server side scripting language. For example PHP and include files.
The concept isnt too difficult and the benifits are no need for iframes, You just create a template and include your navigation in there. Use your template for as many pages as you like and when you update the navigation you only need to do it in one place. In fact the end effect is similar to what you've shown with this example.

I have not worked with iframes at all but your guide is nicely written and easy to understand. I am getting tempted to dl it just to see what it looks like.

edit : I just looked at it and I would say it does its job but iframs and menuts are not that nice looking. I would say its more suited for content then holding a menu. But overall a nice example for us to see. thanks


I agree with your php+scripting language combination. I wrote the article only for HTML newbies who are creating say some 10-15 pages in HTML and want to provide navigation menu for all pages but finding it a herculean task to edit each page for adding another link. I would have also told about scripting language in my tutorial but it needs server side scripting and my idea was not that.

In last para: Why do you feel that iframes are not nice looking. If your telling about that border in the example, you could remove it and make it look as if iframe has not been used at all. OR if you did it on your own and got a scroll bar in the iframe, that too you can remove by making the iframes dimensions bigger.

And thanks for your review and comments.

Share this post

Link to post
Share on other sites

sonesay    7

sonesay
Posted

Just the frames / border looks funny with the nav, makes it look like a nav dosent belong there thats all. This is just looks not a big deal, I didnt know you could remove the fames/borders well I guess iframes is abit better then I thought. This would be practical for people who arnt able to use server side scripting or just starting off. I think from my own experience I had the same issue with the navigation spread across all the pages. I only just recently moved on to php and include methods so yeah this is definitely something anyone building pages should be fimilar with.keep up the good work :)

Share this post

Link to post
Share on other sites

Forbez    0

Forbez
Posted

The raw basics, but they need to be addressed. Good job there.When I started out, I didn't know how to link from pages to other pages. When I found out, great fun and allowed me to focus on harder scripting.

Share this post

Link to post
Share on other sites

bishoujo    0

bishoujo
Posted

I love to use iframes too, mainly because I can just create one navigation menu for the entire site, and if I need to make changes to the menu again, I will not have to do it for every single page, or worry that I've forgotten to change something on other pages. However, iframes isn't the best structure, as some members have already mentioned above. I think another ideal solution is to use php scripting to enable you to use the same navigation for on all different pages without having to change the html on every page.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept