Opening Links in New Windows
Links in New Windows
Introduction
We all know iWeb does not, for some insane reason, allow you to open external links (or any links for that matter) in new windows. All links you make in iWeb, by default, open in the same window, so this will mean that the user browsing your site will navigate away from it. Clearly this is not what we want them to do. So what we have been used to doing is editing the HTML pages after publish and adding target="_blank" into the code to let this happen.
For example, here is the code for a standard link that will open http://www.apple.com. This is the code that iWeb generates.
<a href="http://www.apple.com" title="http://www.apple.com" style="line-height: 20px; ">Apple.com link</a>
For it to open in a blank window, it needs to read like this:
<a href="http://www.apple.com/" target="_blank" title="http://www.apple.com/" style="line-height: 20px; ">Apple.com link</a>
Notice the insertion of the code target="_blank”.
Now to do this you could go round editing the HTML code for every link on every page that you wanted to have open in a new window. Additionally, you'd have to do this every time you republished as iWeb overwrites the previously published files (not on iWeb 1.1 with .mac).
Well I don't know about you, but I don't like tedious work like that. I have nearly 200 external links that I want to open in new windows, and it'd take me an age to change it each time I published.
So here's a quick two step way to do this.
Recipe
First you need to download the application called MassReplaceIt from HexMonkey Software. The latest version is 2.9.
What to do in iWeb
The principle of this technique is to add a simple suffix to the end of each web address that you want to open in a new window. You then replace this suffix in the published pages using MassReplaceIt.
What we are going to do is add _BLNK to the end of every address that we want to open in a new window when clicked.
So for Apple.com above, we make the external link, and in Inspector > Link, we add
_BLNK after the address. So the link to Apple.com in the inspector would read:
http://www.apple.com_BLNK
If your address doesn't end with a forward slash, still add _BLNK to it, so for instance,
http://www.apple.com/uk would be
http://www.apple.com/uk_BLNK
http://www.apple.com/uk_BLNK
Do this for any external links that you wish to open in a new window.
Now we publish.
Now if someone clicked on the link as it stands, obviously it wouldn't work. There's no such place as http://www.apple.com_BLNK on the internet. What we need to do now, is replace the published HTML.
What to do in MassReplaceIt
We need to set up MassReplaceIt with two searches to find the _BLNK text that we've put in and replace it with the code to open the link in a new window.
You will need to enter information on the four tabs in MassReplaceIt (i.e., under Find, Files, Options and Mask).
Under the Find tab, enter the following:
Find: _BLNK" title=
Replace: " target="_blank" title=
Type the text exactly as it appears above, including the spaces. The extra text title= defines exactly what gets replaced and what doesn’t (see below).
Under the Files tab, select your published site folder.
If your webpages are on .mac, you need to navigate from iDisk in top left of the dialog to
Web > Sites > iWeb > Name_of_Site.
Under the Options tab, uncheck the box ‘Search whole words only’.
Under the Mask tab, add a criterion to search items whose extension is .html.
By entering information in the Files and Mask tabs in MassReplaceIt, you've just set the search to look through your entire site folder and only replace code in HTML files.
Now save the search as TargetBlankSearch1.
Now you need to create another search. The best way to do this is to select Custom... Query and change the Find and Replace text. That way you don’t have to enter any data on the Files, Options or Mask tabs because they are already set.
Under this Find tab, enter the following:
Find: _BLNK"
Replace: "
There are no spaces in the text this time.
Now save the search as TargetBlankSearch2 (don’t overwrite the first search you saved, TargetBlankSearch1 by mistake - make sure you use the new name!)
What do these searches do?
So you’ve now two MassReplaceIt searches saved ready. Now I will tell you what these two searches do. If you’re not interested and want to get on and start replacing, just proceed to
Search and Replace below.
Search and Replace below.
If you looked at the published code where a link you've added _BLNK, you would see this:
<a href="http://www.apple.com/_BLNK" title="http://www.apple.com/_BLNK" style="line-height: 20px; ">Apple.com link</a>
The first search replaces:
_BLNK" title= with " target="_blank" title=
so the code will look now like this:
<a href="http://www.apple.com/" target="_blank" title="http://www.apple.com/_BLNK" style="line-height: 20px; ">Apple.com link</a>
The second search replaces all remaining instances of:
_BLNK" with "
so finally the code will look like this:
<a href="http://www.apple.com/" target="_blank" title="http://www.apple.com/" style="line-height: 20px; ">Apple.com link</a>
So now you would have the correct code for opening a link to Apple.com in a new window.
Search and Replace
Now to perform the search and replace. Select the first query, TargetBlankSearch1 and click Replace.
MassReplaceIt will scan through all your site HTML files to find the code to change. Click Replace All (if you wish to preview the changes beforehand, select a file and click Preview Changes. You can also select whether or not to replace certain files. To quit the replacement, click Stop).
Now follow the same procedure and select the second query, TargetBlankSearch2 and click Replace.
The setting up of the searches is the only mildly time consuming bit of this entire method, once it's done, you don't need to do it again!
So in future, just add _BLNK to the end of external links in iWeb, publish and then run TargetBlankSearch1 and 2 in MassReplaceIt. Simple!
Points to Note
You can choose to add different identifying text at the end of the addresses - you are not confined to using _BLNK. That’s just how I do it. You could use something like _ExtLink. Just aim to make the text unique and try not to use any spaces or awkward characters. Don’t forget to alter your searches accordingly.
If you wish to make your internal links open in new windows, you can either edit the HTML files by hand and add target=”_blank” , or you can still use the method with MassReplaceIt by making the link external and entering the exact web address of your internal page, and then add _BLNK as described above, so for example, if I wanted to make a link to my home page open in a new window, I’d make the link an external one, then enter http://www.rowan-cottage.co.uk/Site/Home.html_BLNK as the address.
So, there you go folks. Hope you find it useful.
SUMMARY
STEP 1 - Add _BLNK to the end of any external address in Inspector > Link that you wish to open in a new window
STEP 2 - Using MassReplaceIt, replace _BLNK" title= with “ target="_blank" title= and replace _BLNK" with " in all your HTML files.
