Start learning with our library of video tutorials taught by experts. Get started

iWeb '09 Essential Training

Changing the appearance of text


From:

iWeb '09 Essential Training

with Garrick Chow

Video: Changing the appearance of text

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
iWeb '09 Essential Training
3h 30m Beginner May 13, 2009

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.

Topics include:
  • Manipulating and adjusting images directly in iWeb '09
  • Using built-in widgets to add interactivity
  • Importing movies from iMovie
  • Creating photo pages from iPhoto
  • Managing multiple sites
  • Using MobileMe with iWeb '09
  • Blogging and podcasting
  • Publishing a site via FTP
Subject:
Web
Software:
iWeb
Author:
Garrick Chow

Changing the appearance of text

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed iWeb '09 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

iWeb '09 Essential Training will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked