Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

iLife Tutorial: Link to external sites from the navigation menu in iWeb

Your site’s main menu, located at the top, is designed to link to some or all of your own pages. But it’s also possible to link to an external page.

Links to external sites in iWeb navigation bars

Difficulty: Intermediate, Time needed: 15 minutes
iWeb is designed to help you create great looking sites in next to no time. There are, however, many compromises along the way and it can be hard, or even impossible to attempt to replicate some of the designs you may have seen elsewhere on the web… Sometimes, however, those limitations can be hard to live with.

Links to external sites in iWeb navigation bars
Take for instance the navigation menu, which is automatically located at the top of each of your pages. You can of course choose to remove it completely or only select specific pages to appear there, but no matter what you do, the only pages you can link to in the navigation menu are pages that belong to the site you’re working on. There is no way for you to link to an external page… unless you use a little trick. This is what we’re going to be showing you in this tutorial.

Link from the navigation menu in iWeb

iWeb Navigation Links Tutorial - Step 1

1: A new page
Select a site to work with from the sidebar (clicking on one of its pages works just as well) and create a new page by going to File>New Page.

iWeb Navigation Links Tutorial - Step 2

2: A blank theme
You’ll be asked to choose a theme. Since we don’t want to waste time rendering images that will never be seen, make sure you choose White>Blank.

iWeb Navigation links Tutorial - Step 3

3: No navigation
You needn’t display the navigation menu, so reveal Inspector (View>Show Inspector), select the Page tab, ensuring ‘Display Navigation Menu’ isn’t ticked.

iWeb Navigation Links Tutorial - Step 4

4: The Widgets tab
If the Media tab isn’t visible, go to View>Show Media. Next, click on the Widgets tab (top right) to have access to a few handy coding shortcuts.

iWeb Navigation Links Turoial - Step 5

5: Adding a Snippet
You’ll be needing the last one: HTML Snippet. Drop it anywhere on your page. A floating window will appear, ready for you to type in some code.

iWeb Navigation Links Tutorial - Step 6

6: Manual coding
Type the following exactly: <script type=”text/ javascript”> parent.location.replace(‘http://[the address you want to link to]’); </script>.

iWeb Navigation Links Tutorial - Step 7

7: The Link Inspector
You don’t need to publish your page in order to see the results of this code; with the Inspector window still open, select the Link tab.

iWeb Navigation Links Tutorial - Step 8

8: Activate Hyperlinks
Bottom of that window is a tick box deselected by default: ‘Make hyperlinks active’. Click on it to activate it. Any link you click on will now work.

iWeb Navigation Links Tutorial - Step 9

9: Trying it out
Select another of your site’s pages then click on the link you created in the navigation menu. Your browser will launch and send you to this address.

Click image to enlarge.

iWeb Navigation Links Tutorial - Annotated Help