Discuss Anything: Creating Navigation For Html Websites - Discuss Anything

Jump to content


Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
Page 1 of 1

Creating Navigation For Html Websites Have a common navigation menu for the whole website! Rate Topic: ***** 2 Votes

#1 User is offline   pasten 

  • Advanced Member
  • PipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 119
  • Joined: 19-September 06
  • Gender:Male
  • Location:In front of my monitor.
  • myCENT:34.77
  • Current Mood: Current Mood: None Chosen

Post icon  Posted 28 December 2007 - 05:17 AM

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

Quote

<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:

Quote

<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.

Attached File(s)


This post has been edited by nitish: 29 December 2007 - 09:09 AM

0

Page 1 of 1

Other Replies To This Topic

#2 User is offline   jlhaslip 

  • Insert Custom Title Here
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • Group: [MODERATOR]
  • Posts: 5,035
  • Joined: 24-July 05
  • Gender:Male
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • Interests:http://jim.haslip.googlepages.com/home
  • myCENT:43.02
  • Spam Patrol
  • Current Mood: Current Mood: None Chosen

Posted 28 December 2007 - 08:37 AM

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?
0

#3 User is offline   Saint_Michael 

  • $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • View gallery
  • Group: [MODERATOR]
  • Posts: 7,386
  • Joined: 21-September 04
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:37.15
  • Current Mood: Current Mood: Stressed

Posted 28 December 2007 - 11:32 AM

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.
0

#4 User is offline   Bruce517 

  • Newbie [Level 2]
  • PipPip
  • Group: Kontributors
  • Posts: 34
  • Joined: 28-December 07
  • Current Mood: Current Mood: None Chosen

Posted 29 December 2007 - 03:40 AM

thanks for the tutorial I am pretty new to any coding at all and i am learning html xhtml and javascript all together it is going pretty well ill be sure to use this on my site.
0

#5 User is offline   jlhaslip 

  • Insert Custom Title Here
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • Group: [MODERATOR]
  • Posts: 5,035
  • Joined: 24-July 05
  • Gender:Male
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • Interests:http://jim.haslip.googlepages.com/home
  • myCENT:43.02
  • Spam Patrol
  • Current Mood: Current Mood: None Chosen

Posted 29 December 2007 - 04:18 AM

Quote

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.
0

#6 User is offline   pasten 

  • Advanced Member
  • PipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 119
  • Joined: 19-September 06
  • Gender:Male
  • Location:In front of my monitor.
  • myCENT:34.77
  • Current Mood: Current Mood: None Chosen

Post icon  Posted 29 December 2007 - 09:09 AM

View Postjlhaslip, on Dec 28 2007, 08:37 AM, said:

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.
0

#7 User is offline   sonesay 

  • |||[ n00b King ]|||
  • PipPipPipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 924
  • Joined: 20-June 07
  • Gender:Male
  • Location:Auckland
  • myCENT:13.12
  • Current Mood: Current Mood: None Chosen

Posted 29 December 2007 - 09:57 AM

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

This post has been edited by sonesay: 29 December 2007 - 10:03 AM

0

#8 User is offline   csp4.0 

  • NERVE: Interception
  • PipPipPipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 612
  • Joined: 14-April 07
  • Gender:Male
  • Location:Holy Terra
  • myCENT:68.57
  • Current Mood: Current Mood: None Chosen

Posted 29 December 2007 - 10:50 AM

View Postjlhaslip, on Dec 29 2007, 03:18 PM, said:

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!
0

#9 User is offline   pasten 

  • Advanced Member
  • PipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 119
  • Joined: 19-September 06
  • Gender:Male
  • Location:In front of my monitor.
  • myCENT:34.77
  • Current Mood: Current Mood: None Chosen

Post icon  Posted 29 December 2007 - 11:09 AM

View Postsonesay, on Dec 29 2007, 09:57 AM, said:

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.
0

#10 User is offline   sonesay 

  • |||[ n00b King ]|||
  • PipPipPipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 924
  • Joined: 20-June 07
  • Gender:Male
  • Location:Auckland
  • myCENT:13.12
  • Current Mood: Current Mood: None Chosen

Posted 29 December 2007 - 11:18 AM

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 :)
0

#11 User is offline   Forbez 

  • Privileged Member
  • PipPipPipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 662
  • Joined: 13-December 06
  • myCENT:49.54
  • Current Mood: Current Mood: None Chosen

Posted 29 December 2007 - 11:40 AM

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.
0

#12 User is offline   azri92 

  • Newbie
  • Pip
  • Group: Kontributors
  • Posts: 6
  • Joined: 09-February 08
  • Current Mood: Current Mood: None Chosen

Posted 20 March 2008 - 09:30 AM

but i think...this is just a simple navigation....
To me :lol:
0

#13 User is offline   bishoujo 

  • Privileged Member
  • PipPipPipPipPipPipPipPipPip
  • Group: Kontributors
  • Posts: 545
  • Joined: 14-September 07
  • Gender:Female
  • Interests:Beauty, Health, Technology, Travel, Gaming, Manga, Anime, Movies, Books, Cooking
  • myCENT:1.87
  • Current Mood: Current Mood: None Chosen

Posted 20 March 2008 - 12:41 PM

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.
0

Share this topic:


Page 1 of 1

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies Icon Creating Subdomain Hosting On Other Hosts? Science & Technology itssami 
  • 3 Replies
  • 1,123 Views
New Replies Icon Link Tunneling
Key to finding great websites 		Website Discussion Ledd 
  • 1 Reply
  • 1,274 Views
New Replies Icon Css Menu -- A Little Help Needed
i want a cool menu 		CSS (Cascading Style Sheets) matak 
  • 5 Replies
  • 1,121 Views
New Replies Icon Tutorial: How To Enable "view" Menu On Desktop ! Tutorials techfreakorama 
  • 3 Replies
  • 1,527 Views
New Replies Icon Free Dhtml Menu That Reads A Database
Anyone know one? 		Web Design psychiccyberfreak 
  • 7 Replies
  • 3,833 Views
*New Replies Icon Who all is creating accounts now? General Talk Guest_Wind90Mph_* 
  • 11 Replies
  • 1,804 Views
New Replies Icon Image Roll Over Drop Down Menu Help HTML, XML etc.. Saint_Michael 
  • 2 Replies
  • 3,126 Views
Locked Topic Icon Problem With Creating Account Questions & Queries Jettison 
  • 4 Replies
  • 791 Views
New Replies Icon Creating My Own, Legitimate Online (commission?) Business
pondering realistic opportunities, options, obstacles, marketing, etc. 		Career And Job Fractured.Logic 
  • 4 Replies
  • 439 Views
New Replies Icon Well I Really Need Someone's Help About Creating Ragnarok RPG's (Role Playing Games) SimonSays 
  • 4 Replies
  • 814 Views
New Replies Icon Image/scrolling Menu Correlation
Help.... plz... 		PHP Programming thablkpanda 
  • 0 Replies
  • 4,021 Views
*New Replies Icon i need drop and down menu General Talk Guest_giant_* 
  • 1 Reply
  • 1,655 Views
New Replies Icon Creating A Login Box That Links To My Phpbb Forum
Have my phpBB Forum Intergrated with my Website 		PHP Programming kab012345 
  • 4 Replies
  • 1,604 Views
Poll (No New) Poll   Icon Pay To Play Websites
Should I link to them? 		General Talk Fun4TheMoney 
  • 4 Replies
  • 1,479 Views
Hot Topic (New) Icon How Can I Create Websites With Free Software?
A challenge given to me by David of Essex (not David Essex) 		Tutorials karlosantana 
  • 16 Replies
  • 1,966 Views
Locked Topic Icon "there Were Problems Creating Your Account! " Free Web Hosting: Misc. Requests SolarX 
  • 4 Replies
  • 1,021 Views
New Replies Icon cache server
creating a cahe server 		Software Bimboadmasministries 
  • 0 Replies
  • 6,763 Views
New Replies Icon Fireworks Tutorial 1
Creating a fire explosion 		Tutorials pilgrim_of_mini-monkeys 
  • 12 Replies
  • 2,780 Views
*New Replies Icon menubuilder? General Talk Guest_tinus2003_* 
  • 4 Replies
  • 3,289 Views
New Replies Icon Give Me Suggestions
creating a site 		Web Design imobilecentral 
  • 7 Replies
  • 962 Views

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users


Google Fan :-) We Recommend Firefox.     Customize / Settings Connect Us on facebook