PC World Komputer 1998 June A/Pcwk6A98.iso/Internet/SPIDER/GETSTART.TXT

Text File | 1997-05-29 | 53.3 KB | 958 lines

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 [e-mail], 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
"[e-mail]", 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:[e-mail]".

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 "[e-mail]" 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 [e-mail]. 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 [e-mail].