iWeb FAQ - Navigationsmenü FAQ

iWebFAQ.org

 

Das Navigationsmenü ist das Herz einer Webseite. Wenn die Navigation schlecht ist, ist die ganze Webseite schlecht. Eine gute Navigation ist echt wichtig, darum findes du auf dieser Seite alles was du brauchst, um eine gute Navigation auf deiner Webseite zu ermöglichen.



INHALT DIESER SEITE:


1. Das Navigationsmenü wird nicht angezeigt (Gehe zu: Generelle Problembeseitigung)

2. Drei Möglichkeiten, wie du deine Webseiten organisieren könntest, wenn sie viele Einträge hat, die in verschiedenen Kategorien einteilbar sind

3. Bilde dein eigenes Navigationsmenü (Grösse, Font(Schrift art), ...)

4. Über vertikale Menüs in iWeb

5. Wie kann ich Seiten haben, die nicht im Menü erscheinen?

6. Wie kann ich Seiten haben, ohne Navigationsmenü?

7. Wie kann ich das Navigationsmenü am Ende der Seite duplizieren (wiederholen)?

8. Wie kann ich ein Menü in einem iFrame haben, wie das iWebFAQ Menu welches du rechts auf dieser Seite siehst?

9. Wie kann ich ein drop down/tear down Menü in iWeb hinzufügen?

10. Externe Webseiten dem Navigationsmenü hinzufügen

11. Ein Redirect (Umleitung) machen

12. Wie kann ich die Farbe der Links auf einer Blog Zusammenfassungsseite ändern


2. Drei Möglichkeiten, wie du deine Webseiten organisieren könntest, wenn sie viele Einträge hat, die in verschiedenen Kategorien einteilbar sind


Mit iWeb ist es nicht möglich ein zweites automatisch generiertes Menü hinzuzufügen.


- Erstens

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

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.


- Drittens

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.


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.



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



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)



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)



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)



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)


Please note that if you want to enable MobileMe’s comment feature post-publishing HTML editing may cause the MobileMe comment feature to not-work on those pages (workarounds are presented in the Feedback/comments FAQ on this site).


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:


<body>

<div style='width:125px'>

<SPAN STYLE="font-family: Times New Roman; font-size: 10pt">

<style type="text/css">

a {

color: #0000FF;

text-decoration: underline;

}

a:hover {

color: #0000FF;

text-decoration: none;

}

a:visit {

color: #FF00FF;

text-decoration: underline;

}

</style>

<p align="center"><font size="2"><b><br />

<a href="http://www.iwebfaq.org" target="_top"><img src="http://iwebfaq.org/media/iWebFAQ.png"></a></b></font></p>

<p align="left"><font size="2"><br />

<b>iWebFAQs</b>

<br />

<br>

</font><font size="2">- <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></font><br>

</p>

</div>

</body>


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 MobileMe or 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://baseurl.com/sitename/pagename.html

(baseurl.com=web.me.com/username/ for MobileMe publishers)


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

(first be sure that in the Preferences=>General=>When adding a folder to a search list”=>”Add the folder” is selected)

  1. - If you’re not using MobileMe and you export to a folder you have to select the folder you export your website to.

  2. - If you’re using MobileMe you have to select the Sites folder on your iDisk.

If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk


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.



9. How can I have drop down/tear down menus in iWeb?


(It doesn’t work with HTML Snippets! Follow the instructions!)



  1. 1.First we need the HTML code for the drop down menu, so here it is for a five choices menu:


Copy and paste it into a texteditor so you can modify it as explained further on...



<style type="text/css">

<!--


.combobox {

background-color: #000000;

color: #CCCCCC;

font-size: 8pt;

font-family: verdana;

font-weight: normal;

}


-->

</style>


<form>


<select class="combobox" name="article" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1">

<option selected value=””>Title of the menu </option>


<option value="url of the page" target="_top">name of the page</option>


<option value="url of the page" target="_top">name of the page</option>


<option value="url of the page" target="_top">name of the page</option>


<option value="url of the page" target="_top">name of the page</option>


<option value="http://iwebfaq.org/site/iWeb_FAQ.html" target="_top">iWebFAQ.org</option>

</select>

</td></tr>

</td></tr>

</form>



Replace the Title of the menu with the title you want to display when the drop down menu loads. This will not be a link unless you put a url between the “”.

Replace “url of the page” with the url (address) of the page you want to open

Replace name of the page with the name of the page that should appear in the menu

To add more choices simply add more lines like this:


<option value="url of the page" target="_top">name of the page</option>


Of course you can also change the background color and all that stuff by modifying the style part of the code.


If there are special characters in the urls you will have to replace them with the html code

Example: “é” would be replaced with &eacute

A list of these codes can be found here.


2. Once you modified the code go to iWeb. Where you want the menu to appear on your pages make a Text Box with some text like “DropDownMenuHere” so you’re sure it doesn’t appear anywhere else on your site. You can add it to more than one page if you want to.


3. Publish your website to MobileMe or to Folder


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


5. In the Search field type DropDownMenuHere


  1. 6.In the Replace field paste the code of the drop down menu


7. In Files add your website

(first be sure that in the Preferences=>General=>When adding a folder to a search list”=>”Add the folder” is selected)

- If you publish to a folder choose the folder you publish to from iWeb

- If you publish to MobileMe select your iDisk/Web/Sites/ folder where iWeb publishes to.

If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk


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


9. Again hit Replace All and changes are made


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


11. When you want to add a new page to the menu you only have to edit the html code, republish and that’s it.


Note: You have to repeat the procedure from step 8 to 9 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.



10. Add an external link to the navigation menu


To inlcude 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. Copy & paste the following code in an HTML Snippet


<script type="text/javascript">

parent.location.replace('url of the external site');

</script>


4. Replace "url of the external site" with the url of the external site and that's it.



11. Make a Redirect


Sometimes you need to redirect your visitors automatically from one page to another

To do that copy and paste the following code into an HTML Snippet


<script type="text/javascript">

var url ='url of the page';

var delay = 4;

var d = delay * 1000;window.setTimeout ('parent.location.replace(url)', d);

</script>


Replace url of the page with the url of the page you want people to be redirected to

The number 4 in the code stands for the delay time of the redirection, you can change it to fit your case

You coulod also use the " Add an external link to the navigation menu" code



12. 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 format tab of the Inspector and choose the colors and settings you want to have the blog entries page links on the first blog 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




iWebFAQ.org - Tutorials, Tips & Tricks ist mit iWeb und für iWeb geschaffen.

Ist ein Unternehmen von EBookStoreToday.com. Wird dir präsentiert von Cédric und wird beherbergt von HostExcellence.


Ich möchte dich bitten mir dein Feedback über diese Seite zu geben, indem du deinen Kommentar im entsprechenden Teil des Forums hinterlässt. Sag mir, ob die Seite hilfreich war. Wenn sie es nicht war, sag mir warum. Wenn du denkst, dass etwas fehlt, sag mir was.


Danke, dass du meine Webseite besuchst und unterstützt.


- Cédric -



 
The same page in english                             La stessa pagina in italiano
 

iWebFAQ.org on Facebook

Share/Bookmark

Share/Bookmark