In This Chapter

• Discovering StarWriter's hidden talents
  as a Web page editor
• Creating a new HTML document
• Using styles and formatting in HTML documents
• Using pictures in HTML documents
• Using hyperlinks in HTML documents
• Making Web pages out of existing documents
• Using FTP to post your Web page

Just being able to browse the Web is no longer enough for some people. Often, you need to be able to create Web documents and share them with others by publishing your documents on a Web server. The ability to create Web documents is becoming increasingly important as more and more companies switch from traditional local area networks to intranets and set up departmental Web servers. Not only can you publish HTML documents (the document format used for Web pages) on the World Wide Web, but HTML documents are also rapidly becoming the preferred way to share documents within a workgroup. StarOffice meets this need by offering a full set of HTML document-creation capabilities. This chapter shows you how to access those features.

Understanding StarWriter's Role as a Web Page Editor

If you've already discovered how to use StarWriter to create text documents, then you already know how to create Web pages (even though you may not know it yet). You can create Web pages in StarOffice by saving StarWriter documents in a special format called HTML (which stands for HyperText Markup Language).

HTML is the language that the Web speaks, but you don't need a dictionary in order to use it; StarWriter can translate pretty much anything that you create into HTML, including text, tables, formatting, graphics -- you name it. Most of the HTML editing features are built into StarWriter, so you basically use StarWriter normally, as described in Part II (Chapters 3 through 6) of this book. Granted, the term normally is relative. After all, you aren't likely to add a background graphic to an entire page of a printed document -- a common practice on a Web page -- but StarWriter gives you that capability. Even hyperlinks to other pages on the Web, a distinctive characteristic of Web pages, are available in any StarWriter document.

The document that you see in a StarWriter editing window looks essentially the same as it will appear in a Web browser. (See Figure 1 for an example.) All the translation from the WYSIWYG (What You See Is What You Get) document preview that you see in StarWriter to the HTML source code that produces that page happens behind the scenes.

Figure 1: A Web page being edited with StarWriter.

You can view the HTML source code for a document that you're editing in StarWriter by choosing View-->HTML Source or by clicking the HTML Source button that is available at the bottom of the Main toolbar when you're editing an HTML document. (See Figure 2 for an example of HTML source code.) HTML is simply plain text with tags -- formatting instructions and hyperlinks surrounded by angle brackets (<>) -- embedded in the text. You can edit the HTML source code if you really want to, although I don't recommend it unless you're an accomplished HTML hacker. (If you want to become a hacker, check out HTML 4 For Dummies®, 2nd Edition, by Ed Tittel and Natanya Pitts, from John Wiley & Sons, Inc.) Choose the command or click the button again to return to normal view, showing the Web page described by the HTML code.

After you've created and saved HTML documents, you can view them in the Web browser to make sure that everything looks the way you want it to before you put your new pages on the Web.

Creating a New HTML Document

To create a new HTML document (that's Web page to you and me), follow these steps:

1. Double-click the New HTML Document icon on the desktop.

   Or you can right-click the background of the StarDesktop window, and then choose New-->Documents-->HTML Document.

   StarWriter opens a new blank document. This document is essentially the same as a StarWriter text document, except that the default page size and margins are different, a couple of different buttons are on the Main toolbar, and the Applied Styles drop-down list box in the Object toolbar contains an assortment of standard HTML paragraph styles that are commonly used for formatting Web pages.

2. Create and edit your document.

   Type and format text, and add graphics and tables just as you ordinarily would in any StarWriter document. (Now that you're authoring for the Web, we call all that stuff content.) I discuss tips and tricks for formatting and graphics in the next two sections in this chapter.

3. When you're done, choose File-->Save As from the menu bar.

   The usual Save As dialog box appears, but the File Type defaults to HTML. Don't change that setting. Just choose a location, name the file, and click Save to save your document as you normally would.

4. To view your new HTML document as a Web page, double-click its icon.

   The StarOffice Web browser displays the document just as it will appear to everybody in the world when they view it over the Web (and I show you how to make that happen in the "Posting Your Web Pages" section later in this chapter).

5. Generally, StarOffice automatically translates the text, formatting, and other elements of your StarWriter document into the plain text and formatting tags of an HTML document.

   HTML is a different language, though, and some things don't translate completely. Viewing your documents in the StarOffice Web browser alerts you to any mistranslations. So, get into the habit of checking your work in the Web browser before you consider your work finished.

You don't have to quit StarWriter to preview your Web page after you save it. Just minimize the StarWriter window, locate and double-click the page's icon to view the page in the StarOffice Web browser, and then click the StarWriter document's button on the StarOffice Task bar to switch back to StarWriter and continue working. If you leave the Web browser open, you can make changes in StarWriter, save the document, switch to the browser, click Reload to view your changes, and then switch back to StarWriter and so on.

Formatting HTML Documents

Some of the paragraph styles available in StarWriter are specifically designed to be compatible with standard paragraph formatting tags used on the Web. You'll achieve some of your best results when you use the Web styles from the following list for formatting your Web documents:

• Heading 1: The largest automatic heading style -- very large, bold text.

• Heading 2: The second-largest automatic heading style -- large, bold text.

• Heading 3: The third-largest automatic heading style -- bold text, slightly larger than standard body text.

• Heading 4: The fourth-largest automatic heading style -- bold text, usually the same size as standard body text.

• Heading 5: The fifth-largest automatic heading style -- bold text, slightly smaller than standard body text.

• Heading 6: The sixth-largest automatic heading style -- bold text, significantly smaller than standard body text.

• Horizontal Line: Creates a horizontal line extending across the Web page. Normally, you apply this style to a blank paragraph to create a horizontal line without attaching it to any text. Right-click the paragraph and choose Paragraph to open the Paragraph dialog box, and then edit the settings on the Borders tab to adjust the characteristics of the line.

• Table Heading: Used for column headings in tables. StarWriter automatically formats cells on the first row of a table with this style.

• Table Contents: Used for the body copy in tables. StarWriter automatically formats cells in the rows below the first row of a table with this style.

StarWriter tables, in particular, are designed to be Web-compatible. You don't need to do anything special to use HTML tables in StarWriter. Just insert a table into your document and edit and format the table normally (see Chapter 6 for more information about using tables in StarWriter). All the HTML-compatibility stuff happens automatically, behind the scenes.

You can use HTML tables as layout tools to control the positioning of text, graphics, and other elements in your Web document. In a nutshell, the technique involves creating a large table that occupies all or most of the page. The table becomes a layout grid, and you position text, graphics, and other elements on the page by placing them in the appropriate table cells. The ability to merge and split table cells across multiple rows and columns (discussed in Chapter 6) gives you considerable flexibility in how you arrange elements in the table and therefore on the page.

Adding Graphics to HTML Documents

You add pictures and other graphics to your HTML documents just as you would add them to ordinary StarWriter text documents, but there's a catch. Some things don't translate from StarWriter-speak to HTML-ish. Nowhere is this more true than with graphics.

Most Web browsers can display two graphics file types: GIF and JPG. StarWriter, on the other hand, can work with graphics in a wide variety of formats, which is good news when you're creating text documents because you can access pictures and graphics stored in just about any common file format and insert them into your documents. The catch is that StarWriter cheerfully lets you insert graphics in all those strange file formats into your HTML documents, but it doesn't translate them to formats that most Web browsers can display. To make things even more confusing, the StarOffice Web browser, unlike most Web browsers, can display the same graphics formats that StarWriter can.

In other words, graphics that look great in both StarWriter and the StarOffice Web browser may simply disappear when somebody views your gorgeous Web page in a different browser.

To avoid this problem, convert your graphics to GIF or JPG format before including them in your HTML documents. Here's a handy way to convert your StarDraw drawings:

1. Open your drawing in StarDraw.

2. Choose File-->Export.

   StarDraw opens the Export dialog box.

3. Select the location where you want to create the new graphic file and then type a filename in the Filename box.

4. Select GIF or JPG in the File Type drop-down list box and then click Save.

   Choose the GIF format for images that contain sharp graphics and relatively few colors. Choose JPG for images with subtle color shadings where sharpness isn't the top priority. StarDraw creates a new graphic file of your drawing using the selected file format.

5. Insert the GIF or JPG image into your HTML document in StarWriter.

   By using GIF or JPG files for all your graphics in Web documents, you can rest assured that anyone using a standard Web browser to view your page will be able to see the graphics as you intended. See Chapter 6 for information on how to insert images into a StarWriter document.

If the picture is already in a format that StarImage can open, simply open it in StarImage and then use the File-->Save As command to save it in GIF or JPG format.

When StarWriter includes graphics in HTML documents, it creates links to the original graphics files on your hard drive, which can be a problem. When you upload your Web pages to your site and people browse them from the Internet, they don't have access to your hard drive, so the graphics don't appear in their browsers.

To get around this problem, save your HTML documents directly to your Web site via FTP (File Transfer Protocol) after they're complete and ready for the Web. I cover this (and everything else you need to know about putting your page on the Web) in "Posting Your Web Pages," later in this chapter.

Adding Hyperlinks to HTML Documents

One of the things that makes the Web so exciting is hyperlinks. One document can contain links to other related documents; each of those documents can link to still more documents; and so on, forming a veritable spider's web of related information. That's why they call it the Web, after all.

Entering text hyperlinks

Adding hyperlinks to your own documents couldn't be simpler. Just follow these steps:

1. Position the insertion point cursor at the location in your HTML document where you want to insert a hyperlink.

2. Click the Hyperlink button on the Main toolbar.

   StarWriter displays the Hyperlink bar, as shown in Figure 3.

3. Type the reference text for your hyperlink in the URL name box (the one on the left) in the Hyperlink bar.

   The reference text appears on your Web page, underlined to indicate it is a hyperlink. Optionally, if you select some text in your document before clicking the Hyperlink button, StarWriter inserts the selected text in the URL name box for you.

4. Type a Web address in the URL box in the Hyperlink bar.

   Enter the full URL address for the Web page or other Internet resource you want to link to.

Figure 3: The Hyperlink bar makes
defining hyperlinks easy.

If you omit the http:// at the beginning of the URL for a Web page address, StarWriter enters it for you. So, if you type www.stardivision.com, StarWriter automatically expands it to read http://www.stardivision.com/. Just remember that StarWriter can't read your mind. If you want to create a hyperlink to an FTP site or other Internet resource, you must enter the complete URL including the protocol (ftp://) at the beginning.

URLs can be long and difficult to type. One way to avoid making typing errors is to use the StarOffice Web browser to surf to the site that you want to link to, highlight that page's address in the URL box in the Function toolbar, and press Ctrl+C to copy it to the clipboard. Switch back to StarWriter, click in the URL box in the Hyperlink bar to place the insertion point there, and then press Ctrl+V to place the copied address into the Hyperlink bar.

5. With the insertion point in the URL box, press Enter.

   StarWriter inserts the hyperlink in your HTML document. By default, the link is formatted with the familiar blue color and underline that traditionally identify hyperlinks on Web pages.

6. Click the Hyperlink button in the Main toolbar again.

   StarWriter removes the Hyperlink bar from the document window.

When you point to a hyperlink in an HTML document that you're editing, a small pop-up box appears to show the target URL that it's linked to. If you click the hyperlink, StarOffice prompts you to save your document and then opens the link address in the Web browser.

To edit an existing hyperlink in your HTML document, select the hyperlink text by dragging the cursor across it, and then click the Hyperlink button in the Main toolbar to display the Hyperlink bar containing the information about the selected hyperlink. Edit that information as needed.

You can also edit a selected hyperlink by right-clicking the selected text and choosing Character from the pop-up menu that appears. The Character dialog box opens with the Hyperlink tab selected. You can edit the settings on the Hyperlink tab to change the hyperlink itself, or edit settings on some of the other tabs in the Character dialog box to change the appearance and other characteristics of the hyperlink text in your HTML document. Click OK to close the Character dialog box and record your changes.

Creating hyperlinks to graphics

Hyperlinks don't have to appear in your HTML document as text -- graphics can be hyperlinks, too. If a graphic is a hyperlink, clicking the graphic can instruct your Web browser to load a different Web page.

That simple concept opens up all sorts of possibilities for Web page design. You can create graphics of buttons for things like the next page in a series and then link the button graphic to the URL for the page. You can also put a picture of a product in your HTML document, and link it to the URL for another Web page that gives more information about the product or takes visitors to an e-commerce site where they can order the product. The possibilities are endless!

Adding a hyperlink to a graphic in your HTML document is easy. The process is very similar to the procedure that you use for creating text hyperlinks. Just follow these steps:

1. Insert the graphic that you want to use as a hyperlink into your HTML document.

   See Chapter 6 for instructions on how to insert pictures in StarWriter.

2. Click the graphic to select it.

   StarWriter highlights the graphic with small, square selection handles on the edges of the picture. The anchor button, indicating where the picture is anchored to the text, also appears.

3. Click the Hyperlink button on the Main toolbar.

   StarWriter displays the Hyperlink bar.

4. Type a Web address in the URL box in the Hyperlink bar and press Enter.

   Enter the full URL address for the Web page or other Internet resource to which you want to link the graphic. To prevent typing mistakes, copy the address from the URL box of a Web browser window displaying the Web page that you want to link to, and then paste it into the URL box.

5. Click the Hyperlink button in the Main toolbar again.

   StarWriter removes the Hyperlink bar from the document window.

6. Click anywhere in your document outside of the picture.

   StarWriter deselects the picture.

That's all there is to it. When you point to the graphic, the pointer changes from an arrow or I-beam to the familiar pointing hand that indicates a hyperlink. Clicking the graphic causes StarOffice to attempt to load the link URL in the StarOffice Web browser.

Because clicking a hyperlink in an HTML document loads the linked URL, you cannot just click a graphic to select it after it is linked to a hyperlink. To select a hyperlinked graphic, drag the I-beam cursor across the graphic as if you were selecting a range of text. This way you can select the graphic without activating the hyperlink.

Creating image maps

In addition to hyperlinks to entire graphics, you can also create image map links. Image maps are areas of a graphic that are actually links. You may, for example, include a picture of your flagship product on a Web page, and then create image map links so that the people viewing your page can click various parts of your product to see close-up photos or more detailed information about each feature. Another example is a picture of a U.S. map with image map links defined for each state. Click a state in the main map to go to a Web page giving detailed information relating to that state.

To create an image map link, you must first have a graphic in your HTML document. Then follow these steps:

1. Right-click the graphic for which you want to create an image map and choose Image Map from the pop-up menu that appears.

   The Image Map Editor appears.

2. Use the drawing tools on the toolbar to draw a shape that matches the area that you want to become a clickable hot spot for the link.

   The basic drawing tools are essentially the same as their counterparts in StarDraw. See Chapter 11 for instructions on using the drawing tools. After you create a shape with the drawing tools, the Image Map Editor displays the shape as a gray overlay on the picture, as shown in Figure 4. This shape is for reference only -- it won't be visible on the finished Web page. You can define multiple shapes for separate hyperlinks.

3. Click the Select button in the toolbar and then click a shape to
   select it.

Figure 4: Draw shapes on the picture to define
clickable areas for hyperlinks.

4. Enter the URL associated with the selected shape in the Address text box.

   When you click anywhere in the selected shape in a Web browser, the browser takes you to this linked URL.

5. Type a short description of the link in the Text text box.

   This descriptive text appears in a pop-up box when you point to the hot spot and let the pointer hover there for a moment while viewing the image in a Web browser.

6. Click the Apply button.

   The Image Map Editor creates the hyperlink between the selected portion of the picture and the URL.

7. Repeat Steps 2 through 6 to define other clickable shapes and hyperlinks in the picture.

8. Click the Close (X) button in the Image Map Editor title bar.

   StarOffice closes the Image Map Editor window and returns to your HTML document in StarWriter.

Converting Existing Documents to HTML Documents

You don't have to start from scratch with new HTML documents when you begin your career as a StarOffice Web author. Virtually anything that you can create in StarWriter or StarCalc -- or more to the point, anything that you've already created in either of these programs -- can be saved as a Web page. Just follow these steps to convert a document to an HTML document:

1. Open a StarWriter text document or a StarCalc spreadsheet document or create a new one.

2. Choose File-->Save As from the menu bar.

   The Save As dialog box appears.

3. Select HTML (StarWriter) or HTML (StarCalc) from the File Type drop-down list box.

4. Select a location where you want to save the file and type a name for the document in the Filename box.

   This process is just like saving a regular document.

5. Click Save.

   StarOffice converts your document to HTML as it saves the file in the specified location.

Although you can't save documents as HTML from StarBase or the other StarOffice programs, you can copy information and graphics from any documents into StarWriter or StarCalc and generate Web pages from there. So in a way, anything that you create in StarOffice is another potential thread in the Web.

Posting Your Web Pages

For most people, the whole point of creating HTML documents is to be able to publish them on the Web -- either on a local intranet or on the World Wide Web on the Internet.

Your HTML documents are stored locally on your own computer or on a network drive. If you want to share them with others, you have to post them on a Web server. A Web server is a computer that is hooked up to the Internet or a local intranet and sends Web pages out across the network in response to requests from Web browsers. Simply put, posting a file just means copying it to a special directory on the Web server.

If you're posting your HTML documents on a Web server located on your local intranet, usually you can just copy the files to a certain directory somewhere on the local network. All you need to do is get the correct directory path from your network administrator and use Explorer to copy your HTML documents to that directory (assuming you have permission to write files to that directory).

Things get just a little more complicated when the Web server is located on the Internet, outside the reach of your local network. In that case, a simple file copy won't work. You need to use FTP (File Transfer Protocol) software for copying files across the Internet. Fortunately, StarOffice has FTP software built in, and makes the process of posting files to a Web server almost as simple as copying files from one place to another on your own computer.

Setting up FTP access

Before you can post files to a Web server, you need to set up an FTP account in StarOffice. FTP accounts appear as icons in StarDesktop, and after they're set up, they act just like directories on your own computer.

To set up an FTP account, follow these steps:

1. Right-click the StarDesktop background and choose New-->FTP Account from the pop-up menu that appears.

   The Properties of FTP Account dialog box appears, as shown in Figure 5.

Figure 5: Begin setting up an FTP account here.

2. In the Server box, fill in the name of the FTP server where you want to store your files.

   Your ISP support staff or network administrator can tell you the exact name to use here. Usually it's something like bogus.com or ftp.bogus.com where bogus.com is either your domain name or the domain name of your ISP.

3. In the Start Directory box, type the path name of the directory that you want to open when you connect to the FTP site.

   If you leave Start Directory blank, you'll see a list of all the folders off the root directory of the FTP site when you connect. You can double-click folders to navigate to the one you want from there. When you know the folder that you want to go to, enter the path to it in the Start Directory box. Normally, you want to use the path to the directory where your Web site files are stored. Windows users: Remember to use slash characters rather than backslashes as path separators.

4. Fill in your User Name and Password in the respective boxes or check the Log in As Anonymous option.

   What you fill in for username and password depends on the permissions that have been set at the FTP site for the folder you want access to and also depends on what you plan to do there (for example, upload files, download files, delete files, and so on). If you simply want to download files from an FTP site that permits anonymous access, put a check mark next to Log in As Anonymous and don't worry about the username and password. StarOffice uses anonymous as the username and your e-mail address as the password. Otherwise, you need to supply a valid username and password. Again, your ISP or network administrator can help you with this information.

5. Click the General tab and enter a name for your new FTP account.

   This name will appear beneath the account's icon on the desktop.

6. Click OK.

   StarOffice closes the Properties of FTP Account dialog box and adds an icon for the account to StarDesktop.

Saving your document to a Web site

To save your HTML document to a Web site using FTP, follow these steps:

1. Make sure that your Internet connection is open and ready for StarOffice to use.

   If necessary, minimize StarOffice and use the appropriate utility to initiate a dial-up Internet connection. Then return to StarOffice.

2. Open the HTML document.

3. Choose File-->Save As from the menu bar.

   The File-->Save As dialog box appears.

4. Enter the full FTP URL (Internet address of the FTP server) and filename in the Filename box.

   For example, enter ftp://myISP.com/members/ MySite/MyPage.html into the Filename box in the Save As dialog box.

   In this example, ftp:// tells StarOffice to use the FTP protocol to transfer your file to the specified address instead of using the normal techniques for saving files on your local hard disk. The address of the Web site where you want to post your Web page is myISP.com/members/MySite/. You can get this address from the network administrator for your Web site. MyPage.html is the filename for your HTML document.

5. Click Save.

   StarOffice saves your HTML document and its accompanying graphics on the Web site. When you save files this way, StarWriter uploads your HTML document to the Web site. It also uploads copies of any linked graphics referenced in the document and fixes up the links in your HTML document to point to the directory on your Web site rather than the one on your hard drive.

If you need to use a special username and password to log on to your FTP site, you can incorporate the username and password into the URL that you enter in the Save As dialog box like so:

ftp://username:password@myISP.com/ members/MySite/MyPage.htm

Just insert your own username and password in front of the FTP site URL. Note the colon separating the username and password and the @ symbol separating the password from the rest of the URL.

Copying files with FTP

After you set up an FTP account with the correct username and password, uploading a file to your Web site directory or any other directory on the site couldn't be simpler: Select the file (or files -- you can upload more than one at a time) and then drag and drop the selected files onto the FTP account icon. The easiest way to do this is to follow these steps:

1. Open both the Explorer and Beamer windows.

2. Locate the directory containing the files that you want to copy in Explorer.

3. Click the directory icon to display its contents in the Beamer window.

4. Select the files in the Beamer window and drag them from there and drop them on the FTP icon in StarDesktop.

   As soon as you drop file icons on the FTP icon, StarOffice connects to the FTP site, logs in, and uploads the file or files automatically. Of course, that means you need to be connected to the Internet for that process to happen. If you aren't connected to the Internet through a local network and your system isn't set up to automatically initiate dial-up Internet connections, you need to minimize StarOffice and establish the Internet connection manually before you start the FTP transfer.

Files that you upload to an FTP site may lose their extensions. Because many computer systems need file extensions to determine what kind of files they are, losing extensions can be a real problem. You can double-click the FTP account icon on StarDesktop to open a connection to the FTP account, and then go through the directory on the FTP site, renaming each file to replace the extension that StarOffice stripped away. However, making sure that StarOffice respects the filename extensions in the first place is much easier.

The trick is to make sure that StarOffice is set up to show file extensions in the Beamer window and other directory windows. If StarOffice is set to show file extensions, it uploads files to an FTP site with extensions intact. To set StarOffice to show file extensions, follow these steps:

1. Open the Explorer window and browse to any directory on your hard drive that contains files.

2. Double-click the folder icon to display the files in the folder on the desktop.

3. Click the Show File Extensions button on the Object toolbar.

   StarOffice now displays your files with their file extensions, and uploads them to your FTP sites with their extensions intact.