Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 that we have some text on a couple of pages, let's talk about how to change the look of the text in terms of size, color, and font face. To change the appearance of text we need to take our first look at the Inspector. If you have used the other Apple applications like Keynote or Pages, you are probably already familiar with the Inspector. Now if it's not already open, click the Inspector button and it will pop open. The Inspector is the panel that you use to specify the properties of just about the all the objects on your page including the page itself. From the Inspector you can change your pages background color, flip images around, create Hyperlinks, and change the appearance of the text. We are going to focus on changing text right now.
Let's go back to the Welcome page, and let's say I want to make this text site created by Garrick Chow, a little bit smaller and a little lighter so it's not so distracting. All I have to do is select the text block since I want to change the entire block of text I select the whole box. I I only wanted to change a word or two, I would just select those words. So I select the text box and I click the T for Text Inspector. And then I'll click the Color button. This gives me access to the standard Apple color picker and from here I can use any of these color picker to select the color for my text. I'm just going drag the Brightnesses slider in this color picker to a light gray to make the text a little less obtrusive, right about there.
Now when it comes to changing colors technically you can bypass the Inspector and just open the Color Palette. So if I have add the Colors Palette close, I can click Colors to open the Colors Palette and from here you can even just pick a color, say, and drag it on top of your text box to change it to that color; let me undo that. So that's just another way you can change the color of text. Let's say I wanted to show you some other options in the Inspector, so that's I went through the Inspector to do that. Now notice in the Text Inspector I can change other properties of the text and many of these properties are the things that you can't normally or easily change in other web design programs; things like the Spacing between the characters and lines of text or the amounts of space before and after or all things that normally require you to create Cascading Style Sheet to accomplish.
Here in iWeb, you can just select your text and move a slider. So if I want a little more space between the lines in this main block of text, all I do is select the text, and then I can drag the Line slider, until I see something I like, great about there. Or if I wanted to create space between the characters I would just drag the Character slider, like so. I don't really like that as much so I'm just going to undo that. Of course, another common property of text you want to play around with is the Text Font Face. Let's switch over to the Melbourne page so we have something different to look at as we talk about fonts.
So changing the text font in iWeb is really no different than changing the font in any other word processing application. All you have to do is to select the text you want to change, open the Font panel by clicking the Fonts button, just move that out of the way here, and then browse through the Font panel to find font that you want to use. I am going to select the Modern Collection, go with Optima and let's make that Italic and I'm actually okay with that Size. So you can see you can change the size of the font form here as well as the color of the font.
Now at this point I can almost hear you experienced web designers out there sputtering hey! You just can't choose any font on your computer when you are designing a web page. And yes you are right. Normally when you select fonts for a web you are kind of limited because you when you publish a web page, you are basically telling the page to bring up a certain font on the visitors computer to use to display the text. But if you pick some of absurd fonts that the visitor doesn't have installed on his or her computer, your text won't be displayed in that font and it will instead be displayed in some default font usually an Arial or Times variation.
But in effort to make things as easy as possible iWeb gets around this problem by being tricky. It let's you go ahead and pick any font you want, but if you pick a font that's outside it's list of pre-approved web safe fonts, it will actually convert your entire text block into an image. Basically it creates a picture of your text. The upside of this is that your text will appear on your web page exactly as you see it in iWeb. The downside is that your text will not be selectable meaning visitors won't be able to copy and paste the text from your web page. Also since your text is really an image, search engines like Google won't be able to read your text and your page might not appear when people perform a search for it or similar websites. And also images are much larger than text in terms of file size.
Now iWeb does a pretty good job of keeping a size of these text images pretty low. But if you have a lot of text blocks with custom fonts in them it's going to start taking up a lot more space on your web server. So you should try to avoid any weird or rare fonts for your pages, except maybe for headings or other smaller text blocks where you may want some style or flair. But definitely try to avoid using uncommon fonts for large blocks of text. But how do you tell an uncommon font from a common one? Well if you look in the Fonts panel under the Collections column you will find a collection called Web. By selecting that you can see a list of the fonts that are most likely going to be installed on other people's computer. Just select from this list and then just choose the Typeface for that font and a Size.
Now you can also take advantage of an iWeb feature that's let's you know exactly which blocks of text are going to be converted to an image. Go to iWeb Preferences and check Show text imaging indicator. We go and close that and let me pick a font that's obviously not web safe let's go to Fun and I'll choose Marker Felt and you see this little yellow icon that's popped up here that's indicating to you that's block of text is going to be converted into an image. So right there I can tell right away if I don't want this to be an image. I'll have to pick a different font. So I'm going to go back my Modern Collection here I go back to Optima, go with Italic and I believe I had 49 as the size.
And even though that's not listed in the web safe fonts, it looks like this one is going to be okay. I don't see the text image indicator here. So that's the gist of the working with the Fonts panel. Now as a reminder in case you are not too familiar with working with this Fonts panel from other applications, you can also add things like Underlines or Glows or Strike Outs, of course you have to have a text selected. If I have an effect like a Text Shadow, that will definitely turn your text into an image. So use these effects sparingly. Go ahead turn that off. And I'll close the Fonts panel.
Okay so that about does it for working with text for now. Next let's take a look at how to work with images in iWeb.
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.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.