iWeb FAQ - Navigation menu FAQ

iWebFAQ.org

 

The navigation is the heart of a website. If the navigation is bad the whole website is bad. A good navigation is really important thus on this page you will find everything you need to allow a perfect navigation through your iWeb created website.

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 



CONTENTS OF THIS PAGE:


Chapter 1: The navigation menu doesn’t display (Go to: General troubleshoot)

Chapter 2: Three ways of organizing your website if it has a lot of entries sorted in different categories/upper level Groups

Chapter 3: Create your own navigation menu (change dimensions, font, ...)

Chapter 4: About vertical menus in iWeb

Chapter 5: How can I have pages which do not display in the navigation menu?

Chapter 6: How can I have pages without the navigation menu?

Chapter 7: How can I duplicate/repeat the navigation menu at the bottom of the page?

Chapter 8: How can I have a menu in an iFrame like the iWebFAQ menu I see on the right side on this site so that I don’t have to update all pages each time I  add a page?

Chapter 9: Add an external link to the navigation menu

Chapter 10: How to change the colors of the links on a Blog summary page

Chapter 11: Have a look at the Tear and drop down menus FAQ

Chapter 12: Have a look at the Accordion menu FAQ




Chapter 2: Three ways of organizing your website if it has a lot of entries sorted in different categories/upper level Groups:


You can’t build a second automatically generated navbar in iWeb. But you can easily make one manually.


- First

Build a textfield containing textlinks or picture-links to the pages you want to have a link to, then copy the textfield and paste it to all the pages it applies to. The textfield could be either vertical or horizontal. You see an example of this method at your right on this page and for the horizontal at the bottom of this page.


  1. -Second

Another way you could organize your website is: having a site for every single upper level group so that the nav bar displays the links applying to the groups and then make a textfield linking to the different groups. So when you add a new entry it gets automatically updated (if you add a new group it doesn't and you will have to edit and copy&paste). I think you’re most likely to add a new entry than add a new group that’s why generating entries automatically makes more sense than generate groups automatically.


- Third

Build the pages of the categories. Those pages will be index-pages. On the index pages put the links of the entries of that category. Make sure that only the categories show up in the iWeb generated menu and the entries don’t. To make sure that the entries don’t show up in the menu have a look a look at point 5 of this page.



Chapter 3: Create your own navigation menu (change dimensions, font, ...)


Unfortunately you can’t change the dimensions, the font, color and style of the iWeb navigation menu. Hence if you want to change the menu the easiest way would be to create your own navbar disabling the one created by iWeb (Have a look at point 6 of this page).


As previously told the first thing to do is create a Text Box

In that Text Box write the name of the pages you want to display in the navigation menu

Select the name of a page and open the Inspector, go to the Link Tab and check the “Enable as a hyperlink” box, select “To: One of my pages” and select the page you need. Of course you can also add links to external pages having them opening in a new window and whatever.

There you can also customize your navigation menu: decide which colors the links in the navigation menu should have by clicking on “Format”. Of course you can also decide which Font to use and so on. You could also have images instead of text links.

Once you’re happy with its look select the whole textbox, copy it and paste it to the other pages as well.


Creating your own navigation also helps Google indexing your site as described at point 2 of the Google FAQ.



Chapter 4: About vertical menus in iWeb


You could use the textfield menu as previously mentioned on this page.

Further if you resize the nav bar (in iweb) to narrower width, the nav bar becomes vertical. As you will see doing this will move the whole page downwards so what you will have to do is take the main text area and move it upwards hitting Command(Apple).



Chapter 5: How can I have pages which do not display in the navigation menu?


1. Open iWeb then select a page you don't want to display in the top navigation bar

2. Open the Inspector and go to the 'Page' tab

3. Uncheck the "Include page in navigation menu" box

4. Now this page will not appear in the navigation menu but the navigation menu will still appear on that page as the "Display navigation menu" is checked (unless you uncheck that one too)



Chapter 6: How can I have pages without the navigation menu?


1. Open iWeb then select a page you don't want the top navigation bar to display

2. Open the Inspector and go to the 'Page' tab

3. Uncheck the "Display navigation menu" box

4. Now this page will appear in the navigation menu but the navigation menu will not appear on that page as the "Include page in navigation menu" is checked (unless you uncheck that one too)



Chapter 7: How can I duplicate/repeat the navigation menu at the bottom of the page?


- I would recommend you to manually build a menu using a textfield inserting textlinks. This will help search engines to index your pages because search engines can’t look through the menu as it is javascript rendering. It will also help those visitors of your page using Internet Explorer as they might have some problems displaying the javascript rendering navigation menu. However when you add a new page you would have to insert a new link and copy&paste the textfield to the other pages as it wouldn’t update automatically.


- If you want to duplicate the iWeb javascript rendering navigation bar have a look at this post in the Apple iWeb Discussion Forums

(I’m not allowed to paste the code on my site)



Chapter 8: How can I have a menu in an iFrame like the iWebFAQ menu I see on the right side on this site so that I don’t have to update all pages each time I  add a page?


(basic HTML code knowledge recommended, but can also be done by copy&paste my codes and simply change a few things)


The advantage by adding a menu in an iFrame is that you don’t have to update the menu on all your pages each time you want to add a new page in it (like copy&paste a textfield to all pages replacing the old one). Instead you just have to update on one page: the menu page and that’s it.


What you do is:


1. Create a new page in iWeb which will be the menu page (Blank White or Black)


2. Give it the dimensions of the menu (Inspector=>Page Tab=>Layout) and the background color you want. Note that you can hit the magnifying glass and then choose the color you want from an image, a page on the web or whatever.


3. Now you need to write the html code of the menu. The following is part of mine:


<div style="width:120px; font-family: Trebuchet MS; font-size: 12px; color:#000000;">

<style type="text/css">

a:link {

color: #0000FF;

text-decoration: underline;

}

a:hover {

color: #0000FF;

text-decoration: none;

}

a:visited {

color: #0000FF;

text-decoration: underline;

}

</style>

<br>

<br>

<b>iWebFAQ</b>

<br>

<br>

- <a href="http://iwebfaq.org/site/iWeb_Troubleshoot.html" target="_top">General Troubleshoot</a><br>

<br>

- <a href="http://iwebfaq.org/site/iWeb_Two_computers.html" target="_top">Two Computers</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Feedback_Comments.html" target="_top">Feedback/comments</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Statcounter.html" target="_top">Statcounter</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Retrieve_Website.html" target="_top">Retrieve Website</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Transfer_Site.html" target="_top">Transfer website</a><br />

- <a href="http://iwebfaq.org/site/iWeb_YouTube.html" target="_top">YouTube videos</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Folder_FTP.html" target="_top">Folder FTP</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Google.html" target="_top">Google</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Photos.html" target="_top">Photos FAQ</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Backup_Website.html" target="_top">Backup</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Friend.html" target="_top">Content for a friend</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Two_out_of_one.html" target="_top">Two out of one</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Multiple_websites.html" target="_top">Multiple websites</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Favicons.html" target="_top">Favicons</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Downloads.html" target="_top">Downloads</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Newsletters.html" target="_top">Newsletters</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Music.html" target="_top">Music &amp; PopUp windows</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Forum.html" target="_top">Forum</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Forms.html" target="_top">Forms, Widgets, HTML Snippets</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Calendar.html" target="_top">Calendar</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Wrap_text.html" target="_top">Wrap text around an object</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Domains.html" target="_top">Personal Domains</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Footer.html" target="_top">Footer</a><br />

- <a href="http://iwebfaq.org/site/iWeb_iframe.html" target="_top">Scrolling Textbox or iFrames and Frames</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Navigation_menu.html" target="_top">Navigation menu FAQ</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Special_characters.html" target="_top">Special characters</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Multilingual_sites.html" target="_top">Multilingual sites</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Business_solutions.html" target="_top">Business solutions</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Templates.html" target="_top">Templates</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Movies.html" target="_top">Movies and flash content</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Blogging.html" target="_top">Blogging</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Alternative_HTML.html" target="_top">Alternative HTML</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Google_Docs.html" target="_top">Google Docs</a><br>

- <a href="http://iwebfaq.org/site/iWeb_iWork.html" target="_top">iWeb and iWork</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Tables.html" target="_top">Tables</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Anchors.html" target="_top">Anchors</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Guestbook.html" target="_top">Guestbook</a><br>

</div>


Change the name of the pages and the url to the pages. Change the width style parameter and add a height parameter if needed. Customize the link colors (you will find instructions on that on the frames page). You could also use image buttons instead of text for the links (instructions on the frames page previously linked).

And of course you can also make a horizontal menu by removing the <br> parts.


4. Once you did the menu code (we need the html code because we need the target=”_top”) paste it into an html snippet on the menu page we built in step 1&2.


5. On the pages where you want the menu to appear make a textbox with the following text MenuGoesHere1 (if you have multiple menus change the 1 into 2, 3, 4, ...) and make the textbox being the size of the menu.


6. Publish your website to Folder


7. Download MassReplaceIt (it’s free) and open the application


8. In the Search field type MenuGoesHere1


9. In the Replace field paste the iFrame html code that embeds the menu page in the pages you wrote MenuGoesHere1 on. Here is my code:


<iframe src=

"http://iwebfaq.org/frames/Frames/iWebFAQmenu.html"

style="width:147px; height:1250px;

border-color:#990033;

border-style:solid;

border-width:0px"

scrolling="auto" >

</iframe>


Change the url to the url of the menu page:


http://yourdomain.com/sitename/pagename.html


Change width height parameters to fit your case. Note that if a scrollbar is needed you will have to take into account on this code.


10. In Files add your website's folder


11. Hit Replace all and MassReplaceIt will search for files it has to make changes to


12. Again hit Replace All and changes are made


13. Save the query for the next time you publish so you will only have to hit the Replace button


14. Now when you want to add a new page to the menu you only have to edit the html code of step 3, republish and that’s it.


15. Done.


Note: You have to repeat the procedure from step 11 to 12 every time you re-publish.


If MassReplaceIt didn’t work. If MassReplaceIt didn’t find any of the TextBoxes to replace with HTML codes. Read this MassReplaceIt & HTML troubleshoot page.



Chapter 9: Add an external link to the navigation menu


To include an external page in the iWeb menu follow these steps:

1. Add an empty (Blank) page either Black or white or whatever

2. Name the page whatever you would like it to appear in the menu

3. On that page add an HTML Snippet containing the code to redirect the visitors to the page you want to redirect them to. Read the Redirect FAQ to know how to do that.



Chapter 10: How to change the colors of the links on a Blog summary page


1. Create your Blog and your first entry

2. Switch to the first page of the blog and make a new text box

3. Write something in it and turn it into a link (no matter what you write or what you link it to)

4. Go to the Link’s Format tab of the Inspector. Choose the colors and settings you want to have for blog entries page links on the first blog page and hit “Use for New Links on Page”.

5. Now select the Blog summary part of the Blog (where the entries display in)

6. With the Blog summary part selected switch to the entries page and then switch back. The link colors are now changed and you can delete the TextBox you made at step 2


To change the font and the color of the excerpt all you have to do is click on the excerpt’s text until it gets selected then click on Fonts and apply the styling you want.




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark