Before you begin What is this software for? InContext Spider™ is a Windows™ program that helps you create pages for the World Wide Web. You may already know that Web pages are written in the HyperText Markup Language (HTML for short), but InContext Spider will help you create great Web pages whether you know how to use the HTML coding language or not. This upgrade also makes it easy for you to get your finished pages onto the Web for the world to see. About this booklet Since you're either already publishing on the Web or getting ready to start, we assume that InContext Spider is not the first Windows application you've ever used and that you know how to select text, use dialog boxes, scroll, and perform other common Windows operations. In addition, all the screen shots are from the Windows 95 version of InContext Spider. If you're new to Windows and aren't sure how it all works, the best advice we can give you is to check out your manual for Windows or Windows 95. This Getting Started booklet contains an installation procedure to help you get InContext Spider running quickly, plus a tutorial that shows you how to create Web pages. You'll see how to start and edit a new Web page, how to add graphics to it, how to create hypertext links, and many other things. This booklet doesn't show you everything InContext Spider can do, but you'll get a good idea of what the program's about. The on-line help and your printed User's Guide have more information about InContext Spider's other features. There's also an electronic version of the manual written in HTML, so that you can use your Web browser to read it. Its table of contents is called "index.htm" and you'll find it on your system in the directory c:\icspider\userguid. You can get updates to the User's Guide from the Customer Support area of our Web site, at http://www.incontext.com/support/spider/userguid/. What's new in version 1.2? There are two major enhancements in InContext Spider 1.2. The first is "one-button publishing." It lets you publish your completed pages on the Web just by clicking a button on InContext Spider's toolbar. You no longer have to take the time and effort to send your files to a service provider so that they can put your pages on their server for you. Just one click and your page is on the Web for a potential audience of millions. The other major enhancement is the new Document Properties command that you'll find in the Tools menu. This makes it much easier for you to add background images and colors to your pages, as well as changing the color of text and hypertext links. In addition, you can now use a color palette to select any color you want. Besides these changes, you should also notice that the program is faster and generally runs better than in previous versions. Installation InContext Spider's Setup program To install your new software: 1. If you purchased InContext Spider on floppy diskettes, put Disk 1 in your floppy drive. If you have the CD-ROM version, place the compact disc in your CD-ROM drive. 2. Select the Run command from the taskbar or from your Program Manager's File menu. The Run dialog box appears. 3. In the Command Line, type "x:\setup" (where "x" is the designation of your floppy or CD-ROM drive) and click OK. After a few moments, the InContext Spider Setup dialog box will appear. 4. Express Installation will already be selected, so click on the Next button to proceed. 5. The Setup program will ask for your name and the name of your company. Once you enter them, click Next and then click Next again when the program asks you to confirm the information. 6. Select the drive where you want to install InContext Spider and click Next once again. 7. You can now configure your system to use InContext Spider's one-button publishing feature, so that you can put your pages on the Web quickly once they're done. If you already have a service provider or a Web server, you can click Next to enter the necessary information. If you don't have one yet, deselect the checkbox in this dialog box, click on the Next button and skip to step 10 of this procedure. You'll still be able to configure one-button publishing later from within InContext Spider. 8. Select a Publishing Host from the list that appears and click on the Next button. 9. Enter your Host Name, User Name and Remote Directory, then click the Next button. 10. If you have a previous version of InContext Spider on your system, a message will now tell you that the new one will replace it. Click on the Install button to install the new version. 11. If you're installing from your floppy drive, insert the other diskettes when the Setup program asks for them. 12. Once it's done, the Setup program will ask you to select which Program Group you want InContext Spider to appear in. Select one and click on the Next button. 13. InContext Spider can work interactively with several Web browsers, so the Setup program will now ask which one you want to use. Select one from the list and click on the Next button. You'll still be able to change your browser anytime from within InContext Spider. The installation of InContext Spider is now complete. If you have problems during installation, please contact our Customer Support Department. We're here Monday to Friday (except holidays) from 9 a.m. to 5 p.m. Eastern time at 1-800-263-0127. You can e-mail us at support@incontext.ca, or you can visit the Customer Support area of our Web site at http://www.incontext.com. Creating a Web page Starting the program If you're running under Windows 95, you can use the Start button and taskbar at the bottom left of your screen to run InContext Spider. If you're a Windows 3.1x or Windows NT user, double-click on the InContext Spider icon in your Program Manager. InContext Spider and the browser you selected at the end of the installation process will both open at the same time. After a few seconds, you'll see the InContext Spider startup screen. It contains the usual Windows features, such as a title bar, menu bar, maximize and minimize buttons, button bars, and a pointer. File and Help are the only menus that appear in this screen. Selecting a template To start a new Web page, you always have to choose a template first. InContext Spider comes with a number of different templates — corporate and personal home pages, press releases, pages with forms or tables, and so on. There are also three templates for pages that don't have anything in them so that you can start a page completely from scratch, but we'll talk about those later. For now, let's suppose your company's decided to set up a Web site and they've had the wisdom to give you the job of Webmaster. To start your company's first Web page: 1. Select the New command from the File menu, or click on the New icon in the button bar. The Select a Template dialog box that appears lists all the templates that come with InContext Spider. 2. Scroll down in the dialog box until you see a couple of templates called "corporate homepage" and click once on the first one. You'll see a short description of what the template is about. 3. Click on the OK button. You'll see the message "Loading document" for a moment or two, and then InContext Spider will open an untitled company home page with information and graphics that you can customize. The main screen InContext Spider's main screen is divided in two. The Structure Editor on the left gives you a graphical outline of what's in your Web page (the paragraphs, headings, etc. that it contains), while the larger Content Editor on the right is where you type and edit the page's text, as well as viewing its graphics. There are also two button bars. The top one is the toolbar, and it activates many of InContext Spider's menu commands. The lower button bar is the element bar, and you can use it to add headings, paragraphs, graphics and so on to your pages. Editing text You do your typing in the Content Editor. There isn't much difference between typing and editing in a conventional word processor and doing it in InContext Spider. Paragraphs and headings can be as long as you want, and you can delete text using any of the mouse and keyboard combinations that you're familiar with from other Windows applications. The only real difference is that in InContext Spider you can only select text within one heading, paragraph, etc. at a time. You can't select two or more consecutive paragraphs, for example, or a heading and a paragraph. This means that you can't accidentally change your page in some way that violates the rules of hypertext documents—the rules that determine how Web pages look and behave in browsers. To see how text editing works in InContext Spider: 1. Delete the words "Your company name" that appear near the top and enter a name of your own instead (maybe something like "Paper Clips Unlimited"). If you look at the Structure Editor on the left as you type, you'll see that "HEADING 1" is highlighted. This tells you the text you're working on is part of a level-one heading in your page. 2. Now, select everything in the paragraph that begins "Lorem ipsum dolor." You'll notice that "PARAGRAPH" is now highlighted on the Structure side. This means the text is a paragraph in your Web page. 3. Using Latin to communicate with your customers isn't too effective these days, so delete the selected text and type something more appropriate for Paper Clips Unlimited. For example: "Thanks for coming to the Web site of Paper Clips Unlimited. For the past 30 years, we've been making the best paper clips 4. The paragraph following "Our Business" contains two sentences. To turn each one into a separate paragraph, click between the two sentences and press CTRL + ENTER on your keyboard. That's how you turn one paragraph into two. You can use the same keyboard combination to split headings and just about anything else in a Web page. 5. Click at the very end of the paragraph that begins "Note:" and ends after "ex ea commodo consequat" but don't select anything. (You might have to scroll down a bit to get to this paragraph.) 6. Press CTRL + ENTER again. A blank space will appear because you've just created a new paragraph, although it doesn't have any words yet. You can use CTRL + ENTER this way whenever you finish one paragraph, heading, list item, etc. and you want to start another. If you want, you can experiment with cutting, copying and pasting the text in this page, but if you've used other Windows applications then you probably already know how. The Cut, Copy and Paste commands are all in the Edit menu and they all have their own icons in the toolbar. They work the same way you're used to except that, as we already mentioned, you can only select text in one paragraph, heading, etc. at a time. Editing structure—introduction A Web page can contain any number of headings, paragraphs, hypertext links, lists, and so on. In Web terminology, many people refer to them as "tags" or "elements." These tags or elements make up your document's structure, the same way that chapters, sections and subsections make up the structure of printed books. The Structure Editor displays your page's main elements in order. The elements also contain the text and graphics that you see in the Content Editor. The HEADING 1 and PARAGRAPH elements whose text you edited in the previous section contain ordinary text. Information about creating hypertext links and other really interesting things appears later in this booklet, but for now we'll keep things simple and stick with manipulating headings and paragraphs. Headings and paragraphs You can use the Content Editor to insert new headings and paragraphs, but if you want to delete or move them you'll usually need to use the Structure Editor. 1. In the Content Editor, point and click between "Introduction and Getting Started" and "Welcome". A bar called the insertion cursor will appear. If you look at the Structure Editor, you'll see a similar insertion cursor between the HEADING 2 and the first PARAGRAPH element. 2. Click on the HEADING 3 icon in the element bar. A HEADING 3 appears in the Structure Editor and a space appears at the corresponding place in the Content Editor. 3. Click inside the blank space in the Content Editor and type whatever you feel like saying. You've just created a new heading and typed its text. Also, if you look at the left side of the status bar at the bottom of the screen, you'll see the message "TEXT in HEADING 3." This lets you know that you are indeed typing a HEADING 3. 4. You'll probably want to follow your heading with a paragraph, so click beneath the text of the heading that you just created. 5. Click on the paragraph icon in the element bar. A new PARAGRAPH now appears in the Structure Editor, while a blank space appears at the corresponding place in the Content Editor. 6. Click inside the new space in the Content Editor and type your paragraph. As you type, you can see the message "TEXT in PARAGRAPH" in the status bar. It's that simple to create headings, paragraphs, and many other elements. If you move your mouse over any of the icons in the element bar, you'll be able to find out which element each one creates. It's just as easy to delete headings, paragraphs and most other elements as it is to insert them. All you do is point, click, and select a command. 7. In the Structure Editor, click on the HEADING 3 and the PARAGRAPH that you just created. You can click and drag to select them both. 8. Select the Delete command from the Edit menu, or press DELETE on your keyboard. InContext Spider will delete the heading, the paragraph and all of their text from your Web page. For future reference, remember that when you select multiple elements anything you do to one of them affects them all. For example, if you select consecutive elements in the Structure Editor and then press the DELETE key, everything you selected gets deleted from your document. If you ever delete something that you shouldn't have, you can use the Edit menu's Undo command to retrieve it. Cutting, copying and pasting You can cut, copy and paste headings, paragraphs and other elements. When you do, however, you change the structure of your Web page. As a result, you can only cut and paste elements if it doesn't violate HTML's rules. InContext Spider won't let you do anything that HTML doesn't allow. You can use the Structure Editor to select one element at a time, or you can select several that appear consecutively. To cut, copy and paste paragraphs: 1. Click on the fourth PARAGRAPH in the Structure Editor. The paragraph beginning "Duis autem vel eum" should now be highlighted in the Content Editor. 2. Select the Cut command from the Edit menu, or click on the Cut icon in the toolbar. InContext Spider deletes the selected paragraph, placing a copy of it and its text on your computer's clipboard. 3. In the Content Editor, point beneath the paragraph that begins "Note:" and click once (you might have to scroll down a bit to find the right paragraph). You should now see the insertion cursor. 4. Select the Paste command from the Edit menu, or click on the Paste icon in the toolbar. The paragraph that you cut now appears where you clicked. You've just used the Cut and Paste commands to move a paragraph. 5. Now, suppose you want to copy "Our Business" and the two paragraphs beneath it. In the Structure Editor, select the third PARAGRAPH and drag your mouse down to select the next two as well. Three paragraphs should now be highlighted, as in the illustration on the next page. 6. Select the Copy command from the Edit menu, or click on the Copy icon in the toolbar. InContext Spider copies the selected paragraphs and their text to your computer's clipboard. 7. In the Content Editor, point above the paragraph that says "Registering Your Software" (you might have to scroll down a bit more) and click once when you see the short insertion bar. 8. Select the Paste command from the Edit menu, or click on the Paste icon in the toolbar. The paragraphs that you copied now appear where you clicked. Formatting text You can use InContext Spider's Format command to change the way paragraphs and many other elements will look when you see your Web page in a browser. In the untitled page you've been working on, the paragraphs "Welcome," "Our Business," "Getting Started" and so on look different from those beneath them. If you click within one of those paragraphs, the message "TEXT in BOLD" will appear in the status bar. That's because we used the Format command to add a "BOLD" tag to the paragraph's text. To do this yourself: 1. In the Content Editor, scroll down until you see "Registering Your Software" and the two paragraphs following it. 2. Click at the end of the paragraph that finishes "ex ea commodo consequat" but don't select any of its text. 3. Press CTRL + ENTER to create a new paragraph. 4. Type something in the new paragraph. For example, "How to Contact Us" (which, by the way, is useful information to include on just about any business's Web site). 5. When you're done, select everything you just typed. 6. Click on the BOLD icon in the element bar. A pair of arrows now surrounds the paragraph's text to indicate that another tag has been applied to it, and the message "BOLD in PARAGRAPH" appears in the status bar. 7. You can continue surrounding the paragraph's text with other tags. For example, if you select the text again and click on the ITALIC icon in the element bar, a second pair of arrows will surround the paragraph's text. The message "ITALIC in BOLD" will appear in the status bar. You can apply many tags other than those you see in the element bar. For example, there's a BLINK tag that you can use to make things blink when you see your page in a browser. 8. Select the Format command from the Edit menu, or click on the Format icon in the toolbar. The Format Selection dialog box that appears will list all the tags you can apply to the selected text. Different tags can appear at different places in Web pages, so you'll find that this list changes as you move around your page. 9. Select BLINK from the list and click on the OK button. A third set of arrows will appear, indicating that the paragraph is now surrounded by three other tags — a BOLD, an ITALIC, and a BLINK. Checking your spelling Since some of us have a tendency toward "creative" spelling, InContext Spider includes a spell checker to help you correct typos and spelling mistakes. As with all spell checkers, however, what it really does is draw your attention to words it doesn't recognize. If your document contains proper names, words that aren't English, or anything that's just kind of unusual, the spell checker will probably detect it even if it isn't actually a spelling error. It's then up to you to decide whether you want to change it or not. InContext Spider includes a User Dictionary that you can use to tell it not to spell check things like your name or specific words in other languages. To check your whole document's spelling: 1. Click inside any text in the Content Editor. 2. Select the Spelling command from the Tools menu, or click on the Spelling icon in the toolbar. The Spell Check dialog box appears. 3. Click on the Start button to begin the spell check. If InContext Spider finds a word it doesn't recognize, the Spelling dialog box will show it to you in the Problem box, while the context in which it occurs is shown in the Context box. Some alternative spellings will usually appear beneath the Problem box (as in the figure below). 4. You can either correct the errors InContext Spider finds or ignore them (if they aren't really spelling mistakes). To change the misspelled word to an alternative provided in the Replace With box, select the word you want to use and click on the Replace button. To make the same correction throughout your page, click on the Replace All button. If InContext Spider doesn't offer any alternatives, you can type one in the Replace With box and click on Replace or Replace All. If you want to ignore the error InContext Spider found, or if it isn't really an error, you can click on Ignore or Ignore All. Clicking Ignore tells InContext Spider to disregard that occurrence of the word, while Ignore All tells it to disregard the word throughout the document. 5. After you tell the spell checker what to do about a word, it will keep checking your document. If it finds another word that it doesn't recognize, you can correct or ignore it as described above. You can end the spell check at any time by clicking on the Close button. To spell check only certain specific paragraphs, headings, etc. in your Web page, select them in the Structure Editor before you activate the Spelling command. The rest of the spell check will then proceed until the end of the selected elements is reached. Finding and replacing It's easy to find and replace text in InContext Spider. You can search for a single word, a phrase, or the content of an entire paragraph, heading or other element. The template we used to create your first Web page is for a company that makes widgets. Suppose you want to change the word "widget" to "paper clip" wherever it occurs: 1. Click at the start of your page in the Content Editor. 2. Select the Find command from the Edit menu, or click on the Find icon in the toolbar. The Find dialog box appears. 3. Type "widget" in the Find Text box. 4. Type "paper clip" in the Replace With box. 5. Click on the OK button. When InContext Spider finds the first place where "widget" occurs, a dialog box with four buttons will appear. Click the Replace button to replace "widget" with "paper clip", or click Replace All if you want to replace it automatically all the way through the document. If you ever search for something that turns out not to be in the page, a message will let you know that the search was unsuccessful. Saving your page As in most other Windows applications, you use the Save As command when you're saving a new Web page for the first time. To save the page you've been editing in the last few sections: 1. Select the Save As command from the File menu, or press CTRL + A. The Save As dialog box will appear. 2. Use the Drives and Folders list boxes to switch to the directory c:\icspider\data. 3. Give your document a name, such as "index.htm". 4. Click on the OK button to save your page. Once InContext Spider finishes saving, you can go on working. Previewing your page in a browser InContext Spider does its best to give you an idea of how your Web pages will look in a browser. To make sure you're on the right track, however, you need to examine your pages in the real thing. InContext Spider therefore includes a Preview feature that you can use to see your pages in the most popular browsers — Netscape Navigator, Internet Explorer, and Mosaic. Always keep in mind, however, that your Web pages will look different — sometimes significantly different — depending on which browser you view them in. To preview a page: 1. Save it in InContext Spider, since some browsers only display the last saved version of a page. 2. Select the Preview command from the File menu, or click on the Preview icon in the toolbar. After a few seconds, your page will appear in your browser. 3. When you finish looking at your page in the browser, you can use the ALT + TAB keyboard combination to return to the page in InContext Spider. Starting a page from scratch Before we go on and start adding links and graphics, we'll take a short break to let you know about three templates that are completely different from the rest. They're the first three listed in the Select a Template dialog box when you select the New command. Unlike the other templates that come with InContext Spider, they don't really contain anything that you'd normally recognize as content—no text, no graphics, no nothing except for very basic HTML structures. If the other templates aren't useful to you, or if you're familiar enough with HTML that you don't need to rely on them, you can use these empty templates to create your pages. One creates a new document based on HTML 2.0 (which means you can't center anything or use tables); one creates documents based on HTML 3.0 (which gives you access to lots of interesting things that aren't "official" yet); and the third uses the Netscape and Internet Explorer extensions (which means you can center text, insert background images and sounds, and so on). However, we don't recommend that you use the empty templates unless you really know your way around HTML or are willing to invest a little time experimenting with it. Adding links to your page—introduction Now that you've saved your first page and seen how it looks in a browser, you'll probably want to add a few links to it. The best place to begin is to show you how you can create links to other pages of your own. You may not have created any in InContext Spider yet except for the one in this tutorial, but for now we can just assume that you have. It doesn't make much difference in the procedure that you follow. Linking to your own pages A good rule of thumb to follow when creating a Web site is to keep all your pages in the same directory. This gets harder once your site becomes large, but for smaller sites it makes things much easier. In previous sections, you created a Web page that you saved as "index.htm". Let's assume you've now gone on and created a few other pages and you want to start linking them together. For example, at the bottom of the page we've been working with you'll see the questions "What is a paper clip?", "How can I get a paper clip?", and "What do I do with a paper clip?" You can turn each of those questions into a hypertext link that leads to another page with more detailed information about paper clips. 1. In the Content Editor, select the words "How can I get a paper clip?" 2. Select the Format command from the Edit menu, or click on the Format icon in the button bar. The Format Selection dialog box will now appear. 3. Select ANCHOR in the dialog box. 4. Click on the OK button. When the dialog box closes, you'll see that "How can I get a paper clip?" is now blue and underlined. 5. Press CTRL + T on your keyboard to bring up the Anchor dialog box. 6. In the Anchor Address box, type the filename of the page that you want the hypertext link to go to (for example, "howcan.htm"). 7. Click on the OK button. You've just created a hypertext link between two pages on your site, from "index.htm" to "howcan.htm". If you now save your page and preview it in your browser, the words "How can I get a paper clip?" will be blue and may also be underlined, depending on which browser you're using. Anyone reading "index.htm" in a browser will now be able to click on the link and view your "howcan.htm" page. Linking to other sites One thing that will make your site attractive to other Web surfers is offering hypertext links to other places on the Web. A paper clip manufacturer might have a link to the home page of the International Paper Clip Manufacturers' Association, or to a page about paper clip metallurgy at an Engineering school. On the other hand, some people provide long lists of links to any sites that they happen to stumble across and enjoy. There are two ways to link to another Web site. You can create the link yourself if you know the address of the site you want to link to, or you can use InContext Spider's Web Manager to do it automatically as you browse. Creating a link yourself Let's assume you want the phrase "What is a paper clip?" to lead to a page all about paper clips on the Web site of the International Paper Clip Manufacturers' Association. Let's also assume that the association's site is http://www.paperclips.org. To create a link to that site: 1. In the Content Editor, select the words "What is a paper clip?" 2. Select the Format command from the Edit menu, or click on the Format icon in the button bar. The Format Selection dialog box will now appear. 3. Select ANCHOR in the dialog box. 4. Click on the OK button. When the dialog box closes, you'll see that "What is a paper clip?" is now blue and underlined. 5. Press CTRL + T on your keyboard to bring up the Anchor dialog box. 6. In the Anchor Address box, type "http://www.paperclips.org". 7. Click on the OK button. You've just created a hypertext link to the home page of the International Paper Clip Manufacturers' Association. If you now save your page and preview it in your browser, the words "What is a paper clip?" will be blue and may also be underlined, depending on which browser you're using. Anyone reading your page in a browser will now be able to click on the link and go to the association's site. Creating links automatically InContext Spider's Web Manager gives you the ability to insert several hypertext links to several sites at once, even if you have no idea what their Web addresses are. To see how this works: 1. Use the ALT + TAB combination to move to your browser. 2. Type "http://www.incontext.com/support/spider/demo.html" in the URL field and press the ENTER key. Your browser will now load a page that we put on the InContext Systems Web site specifically for this tutorial. 3. When your browser finishes loading the page, ALT + TAB back to your Web page in InContext Spider. 4. In the Content Editor, click just beneath "What do I do with a paper clip?" This is where your new hypertext links will be inserted in just a couple more steps. 5. Click on the ANCHOR icon in the element bar. InContext Spider's Web Manager now appears, listing all the links in the page that's currently in your browser. 6. Select a few links from the list. You can select consecutive links by shift-clicking (holding down the SHIFT key while you click), or you can select non-consecutive links by holding down the CTRL key as you click on each one. 7. Click on the OK button. InContext Spider will now ask how you want the links to appear in your document. You can turn them into a bulleted list, a numbered list, or a series of consecutive links (or anchors). 8. Select the option "as a bulleted list of anchors." InContext Spider will now add the selected links to your page. Anyone reading it in a browser will be able to link to a number of different places on the Web. You can use basically the same procedure to insert links from your browser's History list. The process is exactly the same except that when the Web Manager appears at the end of Step 2, you select the Browser History option from the Show box. Instead of seeing all the links on a single Web page, you'll see a list of all the pages you've browsed recently. You can select any pages you want to link to and then continue with the rest of the procedure you just learned. Linking within a page Besides linking to different Web pages, you can also link from one place to another within the same page. This is very useful for long Web pages that have a number of subsections. 1. Scroll back to the top of your page in the Content Editor and select the words "Getting Started" from the heading that reads "Introduction and Getting Started". 2. Select the Format command from the Edit menu, or click on the Format icon in the button bar. The Format Selection dialog box will now appear. 3. Select ANCHOR in the dialog box and click on the OK button. When the dialog box closes, you'll see that "Getting Started" is now blue. 4. Press CTRL + T on your keyboard to bring up the Anchor dialog box. 5. In the Anchor address box, type "#GETSTART". This will tell browsers that the link goes to a section of the same document named "GETSTART". 6. Click on the OK button. 7. Scroll down and select the words "Getting Started" after the end of the section "Our Business." 8. Select the Format command from the Edit menu, or click on the Format icon in the toolbar. The Format Selection dialog box will again appear. 9. Select ANCHOR in the dialog box and click on the OK button. When the dialog box closes, you'll see that "Getting Started" is now blue. 10. Press CTRL + T on your keyboard to bring up the Anchor dialog box again. 11. Type "GETSTART" in the Name box and click OK. You've just created a link from one part of your page to another. If you now save your page and preview it in your browser, the main heading "Getting Started" will be blue and may also be underlined, depending on which browser you're using. However, the paragraph heading that says "Getting Started" will not be blue because it doesn't link to anything else. It's just on the receiving end of another link. E-mail links Another type of link that you often see on Web pages is an e-mail link. Many Webmasters add e-mail links to their pages so that readers can send them feedback about their Web site. If your e-mail address is "webmaster@paperclips.com", you can use the following procedure to create an e-mail link: 1. Scroll down to the bottom of your page in the Content Editor and click just above the section that starts with the words "Your Company Name". 2. Click on the paragraph icon in the element bar to create a new paragraph. 3. Type "Send e-mail to the Webmaster." 4. Select the Format command from the Edit menu, or click on the Format icon in the toolbar. The Format Selection dialog box will appear. 5. Select ANCHOR in the dialog box and click on the OK button. When the dialog box closes, you'll see that "Send e-mail to the Webmaster" is now blue and underlined. 6. Press CTRL + T on your keyboard to bring up the Anchor dialog box. 7. In the Anchor Address box, type "mailto:webmaster@paperclips.com". 8. Click on the OK button. If you now save your page and preview it in your browser, the words "Send e-mail to the Webmaster?" will be blue and may also be underlined, depending on which browser you're using. Anyone reading your page in a browser will now be able to click on the link and send you e-mail. Inserting graphics—introduction It's easy to create high impact pages by inserting graphics in InContext Spider documents. You can use your own graphics that you've saved locally, or you can use graphics from other Web sites. Just be careful of any copyright restrictions. Inserting your own graphics There are hundreds of clip art graphics in your c:\icspider\images directory. Among other things, there are 101 backgrounds created by Russ Walsh and more than 50 horizontal rules from John Laroche. For the latest additions to their image galleries, visit Russ's site (http://www.issi.com/people/russ/backgrounds.html) or John's site (http://www.netrunner.net). Rather than checking each graphic one by one, you can load the pages in the images subdirectory into your browser. Backgrounds are in "backgrn1.htm," "backgrn2.htm," "backgrn3.htm," "backgrn4.htm" and "backgrn5.htm." Rules are in "rule1.htm" and "rule 2.htm." Numbers and letters are in "letter1.htm," "letter2.htm" and "letter3.htm." In "misc1.htm", you'll find bullets, bars, and quotation marks, images of spiders, and more. Suppose you want to insert one of these graphics — or any graphics that you've created yourself and saved locally — into your Web page. There are two ways to do it: 1) inserting an IMAGE element; or 2) drag- and-drop. Drag-and-drop is usually quicker, but only if you already know exactly where the graphic has been saved. Inserting an IMAGE element 1. Scroll down to the end of the page that we've been working with throughout this tutorial. 2. In the Structure Editor, click on the HORZ LINE element. This is a horizontal line that appears when you view the page in a browser. Since plain horizontal lines look a little dull, we'll replace it with something more colorful. 3. Select the Delete command from the Edit menu, or press the DELETE key to remove the horizontal line from your page. 4. Click on the Image icon in the element bar. An IMAGE element will now appear in the Structure Editor. 5. Press CTRL + T to bring up the Image dialog box. 6. Click on the Browse button to bring up the Open dialog box, which you can use to find the graphic you want to insert. 7. Use the Folders box to switch to the directory c:\icspider\images. 8. Select the file "hr_wood.gif" and click on the OK button to return to the Image dialog box. 9. Click OK once again to finish inserting the graphic. The graphic you selected will now appear in your InContext Spider Web page. InContext Spider automatically enters the location of the graphic in the SRC box so that your browser will know where to find it when you preview your page. However, it inserts the file's local pathname, which won't work when you publish your page on the Web. For the graphic to appear once your page is on a Web server, you'll either have to fiddle with the directory mappings (as described in your InContext Spider User's Guide), or enter a "relative pathname." To enter a relative pathname: 1. Press CTRL + T to bring up the Image dialog box again. 2. Delete "file:///c|/icspider" from the Location of Image File box. 3. At the start of the text that remains, enter a pair of periods. The text should now read "../images/hr_wood.gif". 4. Click on the OK button. The information you just entered tells browsers where to find the graphic, but since you didn't enter a full pathname it will still work when your page and graphics go onto a Web server. This relative pathname tells the browser to back up one directory, then go into another directory called "images" and find the file "hr_wood.gif". Drag-and-drop Most of the time, the fastest way to add a graphic to your Web page is to drag-and-drop it straight into InContext Spider. Suppose you've just inserted a graphic using the method we just described, but you're not too impressed with the way it looks. 1. In the Structure Editor, click on the IMAGE element you just inserted. 2. Select the Delete command from the Edit menu, or press the DELETE key to remove the graphic from your page. 3. Bring up Windows Explorer or File Manager, or whichever file management utility you prefer. 4. Resize the application window so that you can see both InContext Spider and your file management program. 5. Use Windows Explorer, File Manager or another file management tool to locate the graphic file c:\icpsider\images\hr_modbl.gif. 6. Select that graphic, drag it over to InContext Spider, and release the mouse button. The graphic you selected will now appear in your page. InContext Spider automatically enters the location of the graphic in the SRC box so that your browser will know where to find it when you preview your page. However, it inserts the file's local pathname, which won't work when you publish your page on the Web. For the graphic to appear once your page is on a Web server, you'll either have to fiddle with the directory mappings (as described in your InContext Spider User's Guide) or enter a relative pathname as described in the previous topic. Using graphics from other Web pages As you travel around the Web, you'll probably see some pretty nice-looking graphics. You may even decide that one of them would like awfully nice in your own page. There are two ways to handle this situation: 1) use your browser to download the graphic; or 2) insert an IMAGE element that points to the graphic's location. Downloading the graphic is easy, but it works a little differently in every browser. Your InContext Spider User's Guide, has information about downloading graphics. So suppose you really like the "This page created using InContext Spider" graphic in the page http://www.incontext.com/support/spider/demo.html that you saw earlier in this tutorial. To use that graphic in your own page: 1. Load the page "http://www.incontext.com/support/spider/demo.html" into your browser. 2. Use your taskbar or the ALT + TAB combination to return to your page in InContext Spider. 3. In the Content Editor, click beneath the last line of text in your page. 4. Click on the Image icon in the element bar to insert a new IMAGE element. 5. Press CTRL + T to bring up the Image dialog box. 6. Click on the URLs button to bring up the Web Manager. 7. Select the Current Browser Images option from the Show list box in the Web Manager. A list of graphics in the current browser page will appear. 8. Select the image http://www.incontext.com/support/spider/spider.gif and click OK to return to the Image dialog box. 9. Click OK again to return to your page. The image won't appear in InContext Spider because it's located on the Web instead of on your local system, but you'll be able to see it when you view the page in a browser. If someone ever decides to move or delete the graphic, however, it will no longer show up in your page. If you want to make sure that the graphic always appears in your page, you should use your browser to download it, as described in your InContext Spider User's Guide. Background images and colors By default, most browsers will display your page against a gray background. More and more Web authors find that kind of dull and are using background graphics and colors in their pages. As we already mentioned, InContext Spider comes with lots of background images that you can add to your page. You'll find them in your c:\icspider\images directory. To add a background to your Web page: 1. Select the Document Properties command from the Tools menu. The Document Properties dialog box appears. 2. In the box labeled "Image File (SRC)", type the relative pathname "../images/russ02.gif". 3. Now, to change the background color, click in the Background Color box and select an option. White is usually safe. 4. Click on the OK button. If you now save and preview the page in your browser, you'll be able to see the effect. You can also use the Document Properties dialog box to change the color of links and other text in your page. Be careful with this, however, since you can't really control how other people's monitors display colors. Some people could end up seeing some pretty unusual effects in what you think is a really great Web page. Also, keep in mind that while the really popular browsers like Netscape Navigator and Internet Explorer handle background colors, some other browsers don't. Background sounds You can add background sounds, .wav, .au and other types of audio files to Web pages. You can set your document up so that anyone viewing it will hear waves crashing on a beach, or your favorite line from Pulp Fiction, or anything else you want to share with the world. InContext Spider comes with a number of sample audio files, which you'll find in your c:\icspider\media directory. Of course, if the person reading your page doesn't have a computer that's wired for sound, or is using a browser that doesn't support background sounds, they won't be able to hear them. 1. In the Structure Editor, click between the BODY and HEADING 1. 2. Select the New Element command from the Edit menu, or click on the New Element icon in the toolbar. The Insert New Element dialog box will appear. 3. Select BACKGROUND SOUND from the list of elements and click on the OK button. 4. Press CTRL + T to bring up the Background Sound dialog box. 5. In the SRC box, type the pathname of the sound you want to use, or click on the Browse button to search for one. Sounds can be in the .wav, .au or .midi formats. 6. In the Loop box, enter the number of times you want the sound to play when someone views the page in a browser. You can specify a number or you can enter INFINITE, in which case the sound will keep playing indefinitely. 7. Click on the OK button. If you now preview your page in browser that handles background sounds, you'll hear your audio clip. Tables—introduction Tables are the latest design rage on the Web because they give Webmasters greater control over the way their pages look. Many people now use tables to put text and graphics into columns and rows, which is otherwise a little hard to do. Although not every browser displays tables properly, they're no problem for the most popular ones — Netscape Navigator, Microsoft Internet Explorer, and most incarnations of Mosaic. A number of the templates that come with InContext Spider include ready-made tables that you can customize for your own use. In this tutorial, however, we're going to create one from scratch in the page you've been working on. Creating a table is a two-part process: 1) inserting the table and its components; and 2) adding text to it. Inserting a table 1. In the Content Editor, click just above the link that says "What is a paper clip?" 2. Select the New Element command from the Edit menu, or click on the New Element icon in the toolbar. The Insert New Element dialog box will appear. 3. Select TABLE from the element list and click on the OK button. 4. In the Content Editor, click inside the space that appeared when InContext Spider inserted the TABLE. 5. Once again, select the New Element command from the Edit menu, or click on the New Element icon in the toolbar to bring up the Insert New Element dialog box. 6. Select TR (it stands for Table Row) from the element list and click OK. A pair of arrows will now appear inside the table in the Content Editor. 7. Click once between the arrows. 8. Select the New Element command one more time, or click on its icon in the toolbar. 9. When the Insert New Element dialog box appears, select TD (it stands for Table Data) and click OK. Another pair of arrows will appear. Your page should now look like figure 37. Adding text to a table 1. In the Content Editor, select the hypertext link "What is a paper clip?" (and make sure you select the blue arrows surrounding it so that you're selecting the link as well as the words). The message "ANCHOR in PARAGRAPH" should appear in the status bar. 2. Select the Cut command from the Edit menu, or click on the Cut icon in the toolbar. 3. Click inside the TD you created. 4. Select the Paste command from the Edit menu, or click on the Paste icon in the toolbar. The text now appears in the table, as in figure 38 on the next page. 5. Select everything in the TD and the first set of black arrows that surround it. In the status bar, you should see the message "TD in TR". 6. Press CTRL + T to bring up the Attribute dialog box. 7. Select CENTER from the ALIGN box and click OK. This tells InContext Spider that you want to center your text within the TD. 8. Click at the end of the hypertext link (after the blue arrow that points to the left) and press CTRL + ENTER to create a new TD. You can now repeat the procedure with the text "How can I get a paper clip?" and "What do I do with a paper clip?" When you're done, select the three paragraphs with question mark graphics and delete them from the Structure Editor. Your page should now look like the one below. If you save your document and preview it, you'll see what a table looks like in your browser. For future reference, the following InContext Spider templates have tables in them: Company homepage front cover 1 Company homepage front cover 2 Event announcement Homepage front cover 1 Magazine story layout 1 Magazine story layout 2 Personal homepage front cover 2 Resume 2 You can also find more information about tables by visiting the Netscape Table Sampler site at http://home.mcom.com/assist/net_sites/table_sample.html, or the HTML3 Table Page at http://www.w3.org/hypertext/WWW/MarkUp/html3/tables.html. Bits and bytes You've now completed the tutorial on creating a Web page in InContext Spider, but we thought we'd add some information about a few other things that you'll probably want to do sooner or later. Changing your browser You've already seen that InContext Spider works interactively with the Spider Mosaic browser to help you create links and download Web pages. But you can do the same things using the Netscape Navigator, Microsoft Internet Explorer, and NCSA Mosaic browsers as well. To choose the browser that you want to use: 1. With a page open in InContext Spider, select the Configure command from the File menu. A submenu containing several options appears. 2. Select the Browser option from the submenu. A list of browsers that work with InContext Spider now appears. 3. Select the browser that you want to use. The next time you run InContext Spider, the browser you selected will start up at the same time. Opening pages created in other programs If you're already an experienced Web author, you might be wondering how to open your existing Web pages in InContext Spider. Most of the time, it's no problem to open Web pages created in other programs. You can even download pages from someone else's Web server and edit them. The only time you're likely to have problems opening pages created in other Web page editors is if they have serious errors in their HTML markup. Your own pages 1. Select the Open command from the File menu, or click on the Open icon in the toolbar. The Open dialog box will appear. 2. Use the Drives and Directories boxes to find the document you want to open. 3. Once you're in the right drive and directory, select the document you want to edit. 4. Click on the OK button to open the document. InContext Spider will now display the message "Loading document" and a Cancel button that you can click if you change your mind. Pages with HTML errors When you open a document, InContext Spider automatically checks its HTML coding to make sure it's correct. You can't create incorrect HTML structures with InContext Spider, but if you've been working with other programs then you could have accidentally created minor problems. InContext Spider automatically corrects many common HTML coding errors. However, if it sees something that it just can't figure out then it will tell you that it's found errors and ask if you want to fix them. If you click No, InContext Spider will do its best to finish opening the page. If you click Yes, InContext Spider will list the problems in a separate window. There'll be one message for each error. If you click on one of these messages, InContext Spider will scroll to the related error so that you can fix it. You can save the message list by selecting the error window's Save command. If the errors are unusual or numerous enough, there's a chance that InContext Spider won't be able to open the page. This shouldn't happen often, but if it does you should probably contact our Customer Support department by e-mail at "support@incontext.com" or by phone (if you're in North America) at 800-263-0127. Downloading pages Besides opening and editing your own Web pages, InContext Spider gives you the ability to download other people's pages. This way, if you ever come across a page that really impresses you or that does something especially clever, you can download it and use it as a template for your own creations. To download a page from any Web site: 1. Open the page in your Web browser. 2. Press ALT + TAB or use your taskbar to return to InContext Spider. 3. Select the Download command and the Current option from the File menu, or click on the Download Page icon in the element bar. After a few seconds, InContext Spider will load an untitled Web page with all the text and hypertext links that are in the original. However, any graphics that the page uses do not get downloaded onto your local system — only the SRC references that point to them do. You can now do anything you want to this new Web document — save it, add new paragraphs and graphics, delete things, move things around, or anything else. Just like when you open a Web page of your own, InContext Spider automatically checks downloaded files for HTML errors. If it finds any, it will display them in the same type of window described in the previous section. Publishing your pages on the Web Once you finish creating pages, your final step on the road to becoming a Webmaster is to get them onto the Web. InContext Spider 1.2 includes a new feature called "one-button publishing" that makes it easy for you to put individual pages or an entire Web site onto the Web very quickly so that cybernauts throughout the world can see it. For details about one-button publishing, please see your InContext Spider User's Guide. Contacting us If you ever need to get in touch with us, there are a number of ways to do it. If you need technical support for InContext Spider, you can try the Customer Support area of our Web site at http://www.incontext.com/support. If the solution to your troubles isn't there, you can call us toll-free within North America at 800-263-0127, or you can send e-mail to support@incontext.com. Telephone support is available Monday to Friday (except holidays) between 9 a.m. and 5 p.m. Eastern time. For general information about creating cool Web pages you should definitely get into the habit of visiting The Spider's Web, an on-line magazine that we publish on our Web site at http://www.incontext.com/spidweb. The Spider's Web comes out on the 1st and 15th of every month and includes site critiques, design columns, and news and features stories of interest to the Web community. We published the first issue on February 1, 1996, and within a couple of weeks it was a Microsoft Network Pick of the Week. If you have a comment or suggestion about this Getting Started booklet or any of the rest of the InContext Spider documentation, you can e-mail us at documentation@incontext.com.