[Back to Developing a Simple Web Page] [Forward to Developing an Expert Web Page] [Contents]


3 - Developing an Advanced Web Page

This chapter shows you how to develop an advanced Web page by adding images (pictures) and video clips to your Web page:


Introduction

This chapter shows you how to add advanced features, such as an image (picture) and video clip to your home page.

Working with Images (GIF or JPEG)

Tapestry was designed to allow you to efficiently manage images (pictures) using drag and drop techniques. This section shows you how to add an image in GIF or JPEG format to a Tapestry document.

To display images on the Web, the images must be in GIF or JPEG format. For an explanation of the differences between the GIF or JPEG formats, see the World Wide Web FAQs.

For information on converting an image from another format, such as TIFF to the GIF or JPEG format, see the GraphicConverter software in the section What Other Software Do You Need? of the chapter "Tapestry Overview".

Adding an Image (GIF or JPEG)

Before you add an image (picture) to a Tapestry document make sure that the image is in JPEG or GIF format. If the image is not in JPEG or GIF format, convert the image using an image conversion utility, such as GraphicConverter before dragging and dropping it into a Tapestry document.

If there is a computer system memory problem when adding the image, try closing a few windows that do not have to be open. Also, make sure that you have allocated enough memory for the Tapestry application program. Because image files can be quite large, you should be careful that the memory requirements of the images you are using do not exceed the RAM memory that is available on your computer.

To add an image (picture) to a Tapestry document:

  1. From your computer desktop, locate the image file you want to add.
  2. Make sure that the image is in JPEG or GIF format.
  3. Make sure that the size of the image does not exceed the RAM available.
  4. Drag the file icon for the image onto the Tapestry document. The cursor insertion points moves as you move the image file icon around the Tapestry document.
  5. When the cursor insertion point is in the desired location, release the mouse button. The image file drops into the document at the selected location.

Resizing an Image (GIF or JPEG)

Using Tapestry, you can easily change the height or width of an image (picture) in a Tapestry document by dragging the edge of the image frame.

Note that after you start to resize an image in a Tapestry document you can not automatically return to the original size of the image. Therefore, if you start to resize the image and then are not happy with the results simply reload the original image.

To resize an image in a Tapestry document:

  1. Click on the image that you want to resize. A selection border surrounding the image (a gray rectangle with a black highlight rectangle just outside it) is displayed.
  2. Click on the gray border around the image and drag the mouse to resize it. Dragging the mouse in towards the center of the image makes the image smaller and dragging away from the image makes the image larger.
  3. Do one of the following:

Moving an Image (GIF or JPEG)

An image in a Tapestry document is anchored to a paragraph; therefore, you can use the spacebar, return key, and delete key to move the image.

To move an image (GIF or JPEG) in a Tapestry Document:

  1. Click your mouse cursor on the left side of the image.
  2. Do one of the following:

Adding a Video Clip

Using Tapestry, you can easily add a video clip to your Web document.

To add a video clip to a Tapestry document:

  1. Make sure that the video file is in QuickTime format.
  2. From your desktop or files, locate the video file that you want to add.
  3. Drag the video clip file icon onto the Tapestry document. The Video drops into the document at the selected location. The first frame of the video is displayed.
  4. To play the video, click on the Play button.

To play an embedded video file in an HTML document using Netscape Navigator:

  1. Make sure that the video file is in QuickTime format.
  2. Make sure that you have the Netscape QuickTime video plug-in installed in the Netscape plug-ins folder on your hard disk.
  3. To play the video, click on the Play button.

For information on Netscape QuickTime video plug-ins, see the Netscape Handbook.

Setting the Background Color

Using Tapestry you can choose the background color for your Web page from a large selection of colors on a color wheel. You can preview the color and adjust its brightness, hue, and saturation. The background color is the color of the page behind the text.

To set the background color for your Web page:

  1. From the Tapestry toolbar, click on the Set background color toolbar button. A color selection box is displayed with the Apple RGB (Red, Green, Blue) color selection sliders displayed.
  2. From the Apple RGB color selection box, slide the Red, Green, or Blue sliders to determine the color you want. The original and new background colors of your Web page are displayed as you slide the sliders.
  3. If required, adjust the hue, saturation, and brightness of the color by clicking on the Apple HSL icon at the left of the Background color selection box. A color wheel is displayed and you can adjust the hue, saturation, and brightness of the color for your background.
  4. From the Background color dialog box, click OK. The background color is displayed on your Tapestry Web page.

Setting the Foreground (Text) Color

You can set a foreground color for the text on your Web page from a large selection of colors on a color wheel. You can preview the color and adjust its brightness, hue, and saturation. The foreground color is the color of the text displayed on the page.

To set the foreground color for the text on your Web page:

  1. Select the text that you want to change the color of.
  2. From the toolbar, click on the Change text colour button (the icon with the colored abc letters). A Text Colour dialog box is displayed with the Apple RGB (Red, Green, Blue) color selection sliders displayed.
  3. From the Apple RGB color selection box, slide the Red, Green, or Blue sliders to determine the color of text you want. The original and new text colors are displayed as you slide the sliders.
  4. If required, adjust the hue, saturation, and brightness of the text color by clicking on the Apple HSL icon at the left of the Text Colour dialog box. A color wheel is displayed and you can adjust the hue, saturation, and brightness of the color for your text.
  5. From the Text Colour dialog box, click OK. The selected text is displayed in the color you chose.

If you do not select (highlight) any text before setting the foreground color from the color wheel, then the next text that you type at the insertion point will have the color you set from the color wheel.

Working with Background Images

Using Tapestry, you can add, delete or change a background image using the Set background image toolbar button on the right side of the toolbar. A background image is the picture that is displayed behind the text on your Web page.

Note that changing a background image is the same procedure as deleting and adding a background image.

Adding a Background Image

To add a background image from a JPEG or GIF file to a Tapestry document:

  1. Ensure that your Tapestry document is open.
  2. From your desktop or file folder, drag and drop the JPEG or GIF file onto the Set background image toolbar button. The image is then tiled to form the background of your current Tapestry document.

Deleting a Background Image

To delete a background image from a Tapestry document:

  1. Ensure that your Tapestry document is open.
  2. Click on the Set background image toolbar button. The background image changes to the default of no background image.

Changing a Background Image

To change a background image in a Tapestry document:

  1. Ensure that your Tapestry document is open.
  2. Click on the Set background image toolbar button. The background image changes to the default of no background image.
  3. From your desktop or file folder, drag and drop the JPEG or GIF file onto the Set background image toolbar button. The image is then tiled to form the background of your current Tapestry document.

Exporting Text to a File

You can export or save the text from your Tapestry Web page text to a file on your hard disk.

To export or save your Web page text to a file on your hard disk:

  1. Choose File -> Export Text. A directory dialog box is displayed.
  2. In the directory dialog box, type the name of the file that you want to save and choose a directory where you want to save the file.
  3. To confirm the save action, choose Save. The text file is saved on your hard disk.

You can not save the multimedia elements or HTML codes from your Tapestry Web page using the File -> Export Text command. However, if you want to export or save all the text including the HTML codes from your Web page, use the Netscape Navigator View->Document Source command. On the Macintosh, Netscape opens your Web page source file with a text editor, such as SimpleText and then you can save this source file.

Changing to Another Language

Using Tapestry 1.1, you can change the display language for the dialogs, menu commands, toolbar commands, and balloon help information to:

To change language for the menu and toolbar commands to English:

  1. From the Tapestry window, choose Language -> English. The Tapestry menu and toolbar commands change to English.
  2. To change the language to Dutch, Spanish, or French, repeat step 1 for the appropriate language.

Setting a Helper Application in Tapestry

You can set a helper application in Netscape Navigator that you can use to view or process a Web document. For example, using a helper application Netscape Navigator opens an image file in JPEG format with the GraphicConverter application.

A helper application is a program that Tapestry 1.1 or a browser such as Netscape Navigator 2.0 uses to perform tasks, such as playing a video clip. A helper application follows the Multipurpose Internet Mail Extensions (MIME) convention that identifies different types of binary information, such as images, and indicates the appropriate applications for viewing or playing this information.

To set a helper application for Tapestry:

  1. Choose File -> Preferences. A Preferences dialog box is displayed.
  2. From the list on the left of the Preferences dialog box, select the MIME type and subtype of file (for example, image/jpeg) that you are interested in.
  3. Click on the Choose button corresponding to that file type. A directory dialog box is displayed.
  4. Move to the directory where the corresponding helper application (for example, GraphicConverter) is stored and select the application.
  5. In the directory dialog box, click on the Select button. Tapestry now records your choice of helper application, and uses it to open that type of media file when you follow or test links in the future.

Most Tapestry users only need the default set of helper applications that are set in the default Tapestry preferences. However, you can add your own different types of application into the preferences dialog. You should only attempt this if you have a fairly good technical understanding of the Macintosh. To add an application type, choose the File -> Preferences command and then click the New button in the resulting dialog box. You are then asked for the MIME type and subtype information for the type of file that you are interested in.

For more information on Netscape Navigator bookmarks, see the Netscape Handbook.

Working with Netscape Navigator Bookmarks

Using Tapestry, you can drag and drop a Netscape Navigator bookmark directly into a Tapestry document. A bookmark saves the Uniform Resource Locator for a Web site you want to revisit. With Netscape Navigator, you can collect bookmarks of your favorite Web sites and organize them into different folders.

For more information on Netscape Navigator bookmarks, see the Netscape Handbook.

Adding a link to a Netscape Bookmark

To add a link from a Netscape Navigator bookmark to a Tapestry document:

  1. Select the text or content in the Tapestry document where you want to anchor the link. A highlight box is displayed around the selected text.
  2. Start Netscape Navigator. Netscape starts to log into your Internet Service Provider (ISP).
  3. Do one of the following:
  4. From the Netscape Navigator window, choose Window -> Bookmarks. A bookmark window opens showing you the organization of your Netscape bookmarks.
  5. Decide which bookmark you want to link to.
  6. From the bookmark window, drag the bookmark and drop it on the selected text in the Tapestry document. The link from the Netscape Navigator bookmark to your Tapestry document is added.

Organizing Your Netscape Bookmarks

Before developing a Web page you should organize the other Web pages that you want to link to. For example, if you are adding links to files on the hard drive of your computer, then you should group these files (such as, images, videos, or other HTML documents) into folders. Similarly, if you are linking to sites on the Web, then you should group your sites by using your Netscape Navigator bookmarks as described in the section Adding a Link to a Netscape Bookmark in this chapter.

Note that adding a link to a Netscape bookmark has the same effect as adding a link to the Web page that the bookmark represents. After you add the link, it is represented by the URL for the Web page (for example, http://www.apple.com) and the fact that you selected it as a bookmark does not matter. For information on adding a link to a Web page, see the section Adding Links to an Internet Document in chapter 2, "Developing a Simple Web Page".

Here is one method of organizing your Netscape bookmarks into folders:

  1. Using Netscape Navigator, search the Web for useful sites to add to your list of bookmarks.
  2. When you are viewing an interesting Web site, choose Bookmark -> Add Bookmark from the Netscape Navigator window. The Web site is added to your list of Netscape bookmarks.
  3. After you have added a set of useful bookmarks, choose Window -> Bookmarks from the Netscape window. A Bookmark window showing your current bookmarks and a Bookmarks menu bar is displayed.
  4. To insert a folder into your list of bookmarks, choose Item -> Insert Folder. A folder that you can use to organize your bookmarks is inserted into your list of bookmarks. Note that the Item command is only available after you have chosen the Window -> Bookmarks command.
  5. Continue to organize your folders within other folders and drag and drop bookmarks into folders to create the bookmark organization that you want. Note that this drag and drop bookmark organization process is similar to organizing your files into folders using the Macintosh Finder (MacOS System 7 or greater). Your Netscape bookmarks are now organized into folders.
  6. To add a link from a Netscape Navigator bookmark to a Tapestry document, see the instructions in Adding a Link to a Netscape Bookmark in this chapter.

Dragging Netscape Bookmarks to the Desktop

Sometimes it is more convenient to group a set of URLs on your desktop that you will be linking to for a particular set of Web pages, than it is to drag and drop URLs one at a time from Web pages or bookmarks. You can create a set of URLs on the desktop by dragging URLs or bookmarks out of Netscape Navigator and on to the desktop. Then you can drag and drop the desktop files onto Tapestry pages. The files can also be organized into folders so that they are easier to find and work with.


[Back to Developing a Simple Web Page] [Forward to Developing an Expert Web Page]

[Contents] [Glossary]

[Index A B C D E F G H I J K L M N O P Q R S T U V W X Y Z]