Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Anyone looking for a fast and easy way to build a great web site can use iWeb to bring together and post photos and videos that were created using other iLife '09 applications. Instructor Garrick Chow demonstrates the basic functions and the new features of this application in iWeb '09 Essential Training. Garrick shows how to create and publish everything from basic web pages containing text and images to more involved pages with video. He also demonstrates how to create blogs and podcast pages. Exercise file accompany the course.
Now let's talk about creating links. After all that's really the point of creating a website right, to be able to click on links on one page to jump to a different page. The good news is iWeb actually creates most of your site links for you. Unless you specify otherwise, all pages created in your site appear in the navigation bar. When viewed on the web clicking any of these links takes you to that page. Now by default links don't automatically work in iWeb because it seems that when you click on an object you want to work with, it's not easy to go to a page. So if I click on Melbourne here, it's not going to take me anywhere. But if you do want to test the link, go to the Inspector and click the Link Inspector and in here you want to check Make hyperlinks active. Now notice when I roll over Melbourne, it change colors, which is the effect the visitors to my page will see when they roll over the link. And when I click that link, I'm taken to that page just as I were reviewing this site on the web instead of locally on my Mac and clicking the Welcome link takes me back to the Welcome page.
So as you can see, we have already created a couple of links without even trying. I'm going to talk a little bit more about the navigation bar in the next movie, but for now let's take a look at how to create non-navigation bar links and as you are about to see, it's a pretty easy task. Now there are a couple of different types of links that you might want to add to your web pages. Most commonly you probably want to link the pages within your site so visitors can easily jump from one page to another and we have seen that iWeb pretty much does that for you with the navigation bar. Other times you want to link to some other site out in the web. For instance if you want to link to a related site, or to a site that you think your visitors might also find useful.
There may also be times when you want to provide a file for visitors to download like an audio file or a document and you can easily do so by creating a link to that document. And finally you may want to provide an email link so visitors can easily send you an email. So let's take a look at how to create these different types of links. First of all you have to choose that and that is going to be a link on your page. In other words the item that visitors will click to go to another page or to download a file or to send you an email. Let's go to the Melbourne page. I'm going to change Visited by me to More Info and underneath it, I'm going to type Wikipedia and Official Site.
So I want to provide links to both the Wikipedia entry on Melbourne, Australia and the official City of Melbourne website. And just a side note here, Wikipedia and Official Site are separated by what's called a paragraph break, meaning that there is some space between the two lines which is the default occurrence when you hit the Return key. But since both of these fall under the More Info category, I want to keep them a little bit closer together. So I'm going to put my cursor in front of Official Site and hit the Delete key to get rid of the paragraph break and then I'm going to hold the Shift key as I hit Return and that creates what's called a line break, which lets you separate words or sentences into separate lines but keeps them in the same paragraph so you don't have all that space between them.
Okay, so let's create our links. The first step of creating link again is to select the text that you want to make clickable. I'm going to select all the text of Wikipedia. Now as general rule you want to be fairly conservative when selecting text to turn into a link. Try to pick the word of phrase that best suits to the link. You want to avoid selecting entire sentences or paragraphs and turning the whole thing into a link. But I don't really need to worry about that here since I have only one word to select. With my text selected, I'm going to go to the Link Inspector and check Enable as a hyperlink. That activates the rest of the items here in the Link Inspector.
Now I just have to specify what type of link this will be. If I want to link to one of the pages on my own site or any other pages in other site I might have created in iWeb, I would choose one of my pages and then I could choose which page I want to link to. Now if I had multiple sites in iWeb, I would see them all listed here and I could link to other pages and other sites that I might have created. So it's pretty easy to link to any other page in your site, but since I want to link to a site out on the web, I'm going to select an External Page. Now I have this URL field down here. URL stands for Universal Resource Locater, not that you need to know that, all you need to know is that URL is the exact address of a page or file on World Wide Web.
Now I just happen to know that the address for the Wikipedia entry for Melbourne is en.wikipedia.org/wiki/ Melbourne. iWeb had already added http:// in the field for me so I just had to type from en.wikipedia on. Even if that weren't there and I just type my address, iWeb would have automatically added http:// which is required in order for the visitor's web browser to know that this is the website you are linking to.
In other design programs you usually have to note to type http:// in front of all links to other websites and here in iWeb it will do it for you in most cases. Now if you don't know that exact address of a website or you're just a horrible speller, it's probably better to first visit the site you want to link to in your browser, copy the address from the browser and then paste it into iWeb. For example if I'm not sure what the exact address for the official Melbourne City site is, I would open my web browser and let's just do a Google search for City of Melbourne and we have got Melbourne, Florida, Melbourne, Arkansas, and here is City of Melbourne.
All right, so here is the official City of Melbourne site and its address is right up here in the address bar and I don't want to have type all of that into iWeb. So I'm just going to select that, choose Edit > Copy or press Command+C, go back to iWeb and I'm going to select Official Site on my page, Enable it as a hyperlink. It's already set to an External Page and notice I didn't have to actually have to type anything in here. Because I already had it copied, iWeb assumed that's the address that I wanted to replace in there. How easy is that? Now the other option we have here is Open link in new window. If you check that when somebody clicks on say Wikipedia or Official Site, it will actually open a new browser window on top of your website so that people can browse that website you linked to but when they close that window and your site will still be opened beneath it. I usually recommend checking that when you are linking to an external website. So now I can test my links by making sure Make all hyperlinks active is checked and now when I click on those links, they open up my browser and take me to the proper pages. So there is the Wikipedia entry for Melbourne and here is the Official Site link and they are both working.
So that's pretty easy to do. There is actually even an easier way to create an external link on an iWeb page. There is a website called visitmelbourne and perhaps I want to create a link to this site as well. Now instead of copying and pasting the address, you could actually drag the URL right into iWeb. So if I just move this slightly out of the way here and from Safari I can just select the URL and just drag it into iWeb and release. Now that puts a whole bunch of text on my page, so let me just click in between there. Now this is where it might get difficult to actually click your text so you want to uncheck Make hyperlinks active so you can actually click in here and again I'm just going to hold Shift and hit Return to create a paragraph break and I'm going to select all that text and just type visitmelbourne.com so that will be the text of that link. But notice that it's already enabled as a hyperlink and it's linking to an external page and the address is already right in here. And maybe I'll check Open link in new window again.
Let me just close my browser window and again I can test that link by making hyperlinks active and clicking it and there it is. So that's how you create external links and it works pretty much the same for images to. To turn an image into a link, just select the image you want to use and then check Enable as a hyperlink and then create your link. It is the same way as if you are creating a text link. All right, now let's take a quick look at the other two types of links. I mentioned that you can also link to a file, and I'll just use this image as an example. I'm not really going to link to a file here but with the image selected, I'll click Enable as a hyperlink and I'm going to choose Link To A File.
So iWeb prompts me to locate the file I want to link to and really I can choose any type of file I want. I can link to an audio file, an image, a PDF document or even a Microsoft Word document. Linking to a file is no different that linking to a web page. The only thing you need to keep in mind is that your visitor must have the necessary program to open the file you are linking to. So if you are linking to a PDF, they need to be running either Mac OS X or if they are on Windows they need Adobe Reader. If you are linking to Word document they need Microsoft Word installed or some program that can read Word documents. But this is how you link to a file or a document. I'm just going to cancel out of there.
Now the final type of link you can create is an email link. Again this is the link that opens your visitors email program with a new message already addressed to you. All they have to do is fill in the body of the email and send it off. Let's go back to the Welcome page to look at this. I am going to click the Text Box button, which adds the Text Box you can barely see it there, so I'm just going to type first 'email me' and let me just click on it and drag to a place where you can see it. Just put it there for a moment. So, I'm going to select that text and with that text selected I can now enable it as a hyperlink and from the Link To menu, I'm going to choose an email message. And here is where you add the email address you want to receive messages at. So maybe I want to set this to my lynda.com address.
iWeb even provides a subject field so you can fill out the email subject for the person sending the email. This is actually a great way to quickly identify messages originating from this link. Just type a subject of something like, Message from travel site, and that way anytime you receive a message that it came from this site, you will be able to identify right away by looking at the subject line. So with hyperlinks active, I'll click that email me link and you can see that it pops open my mail program. You could see my address is already in the To field and the Subject line is 'message from travel site.' So as the sender of the email all I have to do is write my message and hit Send.
Pretty cool. I'll just quit out of there. Now iWeb does include an Email Me button that you can add to your pages but that only works for one email address. If you want to be able to include multiple email addresses on your web pages, for example, if you run a small business and you want to provide separate email addresses for, say customer service and orders, you have to do what we just did here with either selected text or selected images and turn them into email links. In the couple of movies from now I'll talk about the email me button and some of the other special items you can add to your page.
Now one last thing worth mentioning about creating links in iWeb is that iWeb can automatically detect certain types of text as links. For example if I delete that Text Box, let's add another one here. And if I start typing www.lynda.com and hit Return, notice that iWeb has automatically turned it into a link. It's highlighting, acts like a link. Let me uncheck Make hyperlinks active. You can see that the address has already been added here in the Link Inspector.
Anytime text that you are typing starts with www or http, iWeb automatically turns it into a link. Similarly if I type in email address, like in the sentence Email me at firstname.lastname@example.org that also automatically becomes an email link. With it selected you can see it's enabled as a hyperlink, Link To An Email Message, and there is my address. This can be a big time saver but if you prefer that iWeb not do this for you, go to iWeb > Preferences and uncheck Automatically detect email and web addresses. I like to leave that on though.
All right, I'll just delete that Text Box. Okay for now that's the gist of adding links to your iWeb pages. Again it's pretty simple. Just select the text or graphic you want to turn into a link, enable it as a hyperlink in the Inspector and decide what type of link it's going to be.
There are currently no FAQs about iWeb '09 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.