25. Add Text and Graphics to the Page BEFORE YOU BEGIN 22 Use Yahoo! PageWizards to Create a Page
SEE ALSO 9 Add and Format Text 11 About Adding Graphics 43 Add Text and Links
What makes a website popular with web surfers? Your website will have viewers if it has interesting content and is pleasant to read. If you want many viewers , your website must be understandable. Think about the best sites you know ofthe places you want to go and spend time. They probably don't have bells and whistles, or beeping sounds when you roll over things. On the other hand, they probably don't contain a lone paragraph of content and not much else, either. Add text and graphics to your site as often as you can. Add information and keep the images fresh to keep your visitors coming back. | 1. | Add Some Text to Your File
Place the cursor at the end of the text in the file. Let's add some interesting content. Type more text to fill out the text block.
In this view, your page is more like a word or text processor.
When you entered your text into the PageWizard , you wrote it in a Text Editor because you couldn't really see what you were typing in the text area of the wizard. Here in PageBuilder , you have the real layout of the page visible to you so when you type, you can see what you are entering in the context of the rest of the page.
| | 2. | Change the Font Attributes Highlight the first paragraph in the main text block and set the font to the typeface and size of your choosing. You can use tools that should be familiar to you from word processors in PageBuilder that were unavailable in the PageWizard . You can set the font, font size, and alignment of the text in the box from side to side and top to bottom; bold, italic, and underline; and the color of the text or background. 25. Add Text and Graphics to the Page | | 3. | Resize the Text Area
Resize and move the text area by clicking on the text area to bring up the resize handles.
One thing that might be new to you is that each piece of text and picture is in its own box. This is how the layout of the page is done, which is different than how a word processor does it. The little squares on each side and corner of the text box are called resize handles . Click on the resize handle on the upper-right corner and your cursor should change into a two-headed arrow. Now you can drag it in toward the center of the box, and the box and text get narrower and move down the page a little more. If you click in a little from the edge of the resize handle , your cursor will change into a four-headed arrow. Now when you drag, you will move the entire text box, not just the corner or the side to resize the text box.
| | 4. | Resize the Picture
Resize the picture by clicking on the picture on the right side of the page.
Your picture box works like the text box you just worked on. Click on the lower-right resize handle and drag the handle in toward the center of the image. Notice that as you move the handle, the picture disappears while you are dragging but the shape of the box never changes. It always stays the same shape as the original picture. Now click on one of the resize handles on the side of the picture box and move that. Notice that the box changes shape, getting wider or narrower or taller or shorter. This is different than the way the text box works.
If you try dragging the edge of the text box over another element, the edge of the box turns red to indicate you are overlapping two elements. If you try to preview or save the page with overlapping elements, you will get a warning that the page can't be saved, so use the indicator to avoid overlapping elements as you work.
Sometimes you want to make a picture smaller or larger without distorting it and sometimes you want to change the shape and stretch the picture one way or another. In Yahoo! PageBuilder you can do either, just by moving the different resize handles .
| | 5. | Change the Picture Change a picture by double-clicking on the picture on the right side of the page. You can change a picture by double-clicking on the image to bring up the Select Picture dialog box. In the dialog box, you can select a new image and, if you need to upload a new image, you can do so from the dialog box. TIP When you upload images and files to your website, you might run into problems with your files because of their names . On your computer, you can name files anything you want, but on the Web, files have some rules about naming that you need to know about. You can't use spaces in your filenames; instead, use underscores or dashes. My Dog.jpg won't work on the Web, whereas My_Dog.jpg will work. You also need to avoid any punctuation or symbols in your filenames. Last, there is a difference in filenames when uppercase and lowercase letters are mixed. My_Dog.jpg is different from my_dog.jpg. Most smart content authors use all lowercase letters in their filenames. Because you only have the one image you uploaded in Chapter 4 on your site, you need to upload a couple of pictures to work with. Click on the Upload button and browse to an image you want to put on your site. In the Upload dialog box, you can upload up to five images at one time. In the Picture List in the upper left of the Select Picture dialog box, click on [User Files] to see the files that are available for you to select to replace the existing picture on the page. You should see the new files that you just uploaded, as well as the original file you uploaded in Chapter 4. Click on one of the new images and then click the OK button at the bottom of the Select Picture dialog box to insert the image into the picture box. When you insert the new image, it replaces the original picture, but it puts the new image in at the full size of the new picture, which may be larger or smaller than the image that was there. If that occurs, you might see a red grid overlaid upon the image. This is a message to you that the image is overlapping other boxes, which is not allowed in PageBuilder, so you need to resize and move elements until the red grid doesn't show up. To resize the image, you can simply click on one of the corners of the image and resize it as you learned in the last step. | | 6. | Add a New Picture
Add a picture by clicking on the Pictures icon in the PageBuilder applet window.
When you click on the Pictures icon in the PageBuilder applet, the Select Picture dialog box comes up and you can pick a new image just as you did to replace the image in the previous step.
| |
