Navigation in Arachnophilia 4.0

1
Navigation in Arachnophilia 4.0
A VISUAL MANUAL FOR THE HTML POETRY PROJECT
Library 160
Holly MaximFall 2004Tutorial
2
Table of Contents
3
Table of Contents
Basic desktop when you open Arachnophilia
The Tip of the Day can be a good source of
information. Get the education before you click
out. If it is annoying you can check the box.
4
Table of Contents
How to tile the view vertically
When you open your HTML file, you will only see
the code view. Click the PREVIEW drop down menu,
then click INSTANT VIEW MODE. This checks it
until you uncheck it.
Keep going . . .
5
Table of Contents
How to tile the view vertically. .continued
Now you see both the INSTANT VIEW and CODE VIEW
overlapped.
Now go to the WINDOW drop down menu and click on
TILE VERTICALLY.
Keep going . . .
6
Table of Contents
You can see your work appear as you type. This
slick feature will make life easier rather than
flip back and forth between views. NOTE The
title bar in each view tells you whether it is
active by its color. Blue is active, gray is
inactive. Click in the screen you want to scroll
in and it becomes active.
Voila!
7
Table of Contents
Getting to Helpful Tutorialscontinued
Click the HELP drop-down menu and
selectArachnophilia Home Page.
8
Table of Contents
Getting to Helpful Tutorialscontinued
Notice what comes up in your viewer. You are now
on the web accessing the Arachnophilia home page.
Click the drop down button here, and select
Arachnophilia 4.0
9
Table of Contents
Getting to Helpful Tutorialscontinued
Ignore the message about the legacy of version
4.0 and scroll to the bottom of the page.. and
look for the link that says
Visit my online HTML tutorial
10
Table of Contents
Getting to Helpful Tutorialscontinued
Visit my online HTML tutorial
11
Table of Contents
Getting to Helpful Tutorialscontinued
The author is an interesting, quirky sort of guy.
Dont be put off, try some of his tutorials. It
will help open up your mind to the idea of HTML
language. There are actually several little
tutorials to choose from. ENJOY
12
Language notes
Table of Contents
Following, are several slides that will assist
you in troubleshooting your page. This can be a
daunting struggle if you do not know something
about the language. Briefly as possible, I have
provided a crash course on keys that might help
you use features in Arachnophila to search for
stubborn problems in the code.
SYNTAX The orderly system by which commands,
qualifiers, and parameters are combined to form
valid command strings. -Princeton University
storacle.princeton.edu9001/oracle8-doc/server.805
/a53717/gloss.htm Syntax occurs in all
languages, but we are only concerned with HTML.
We have our command tags, the qualifiers might be
interpreted as attributes, and parameters are the
same as values. All values will be nested in
quotation marks . NESTING like the nested
baskets above, command tags must be closed the
way they are opened. Command lines are nested
within brackets .
13
Table of Contents
HTML Language Basics . . . continued
HTML has a very specific syntax it prefers. It
has its own grammatical components as well.
Heres a small glossary beginning and ending
brackets, always used for tags. This would
attend an opening tag. Ex brackets
with the virgule or forward slash, indicate a
closing tag. Sample
color"FF0000" face"papyrus" Holly Maxim's
Home Page
Tags- a command to tell the browser to make an
affect upon the text, image , background, etc.,
for what you want to appear on the web
page. Attribute- tells the browser what part of
the item should be affected. Value- tells the
browser a specification color, font style, size
for the attribute.
14
Table of Contents
HTML Language Basics . . . continued
iHolly Maxim's Home Page



face"Bradley Hand ITC"
SAMPLETEXT
Notice that blue represents your tag and
attribute. Green represents the value of your
attribute. The actual text you are writing is in
black. Usually the value is all you need to
change.
15
Table of Contents
HTML Language Basics . . . continued
iHolly Maxim's Home Page



face"Bradley Hand ITC"
This code creates This title
Attributes always have an equal sign ()
connected to it. Values always come nested in
quotes and often with a number() sign.
16
Table of Contents
Setting Up Toolbars in Arachnophilia
Clicking on the buttons at the bottom of the
desktop will bring up useful toolbars. The
toolbars will appear at the upper portion of the
desktop. These are the most helpful for the
Library 160 Poetry assignment. If you want to go
further, try using Tables.
17
Table of Contents
STYLES Toolbar
Keep going . . .
18
Table of Contents
Styles Definitions
Keep going . . .
19
Table of Contents
Horizontal Rule and invisible comments
HR Horizontal Rule code is shown below with the
result of a nice line to separate sections of the
page.
COM Invisible Comments are used if you need to
put information into your code but do not want it
to be visible on the page.
20
Table of Contents
LINKS Toolbar
THEORY For the purposes of the Poetry Assignment,
you only need to use the DocLnk and the DocRef
buttons. DocLnk is the link that changes the
color of the text and underlines it. It says to
the user that it will take them someplace else,
whether within the site or to an outside site.
DocRef reference is the operative part of this
link. It says I am the target of the text you
see underlined and colored differently. Think of
it as an anchor for the DocLnk. NOTE Here is
an example click on this link, which will take
you to the end of the presentation. To return,
click the words, The End. Try now End The word
End is a DocLnk, while the words The End on
the last slide are the DocRef.
21
Table of Contents
LINKS Toolbar. . .continued
OUTSIDE LINKS
This code
This result
Highlight the text you want to make a link.
1
2
Click the DocLnk. Did you notice how it nested
the text?
This code
This result
22
Table of Contents
LINKS Toolbar. . .continued
Give the DocLnk a pathway in the green value to
your destination document. In my case, I have a
Word document, which is in the folder containing
my web page .
3
When I click the link in the viewer . . . . .
23
Table of Contents
LINKS Toolbar. . .continued
This pops up and you chose open
Voila!
The viewer reveals the Word document IN Word.
24
Table of Contents
LINKS Toolbar. . .continued
INSIDE LINKS
If I had written the text of my proposal into my
HTML project, I would have linked to another
place inside the web page rather than linking
outside to Word. Heres how to do it Go back to
steps one and two for OUTSIDE LINKS. For step 3
Give the DocLnk a name in the green value. In my
case, I named it Proposal.
3
25
Table of Contents
LINKS Toolbar. . .continued
Now click the link in the viewer again . . . .
26
Table of Contents
LINKS Toolbar. . .continued
Voila!
The link takes you to the title where the DocRef
is of the proposal further down the web page.
If you want you can link back to the list just as
you would in the poetry project for both the
Table of Contents and the Index.
27
Table of Contents
Graphics Images Toolbar
OPTIONAL If you want a fancy scrolling title,
you may use the Marqee.
VERY IMPORTANT For the purpose of this
assignment, save your image in a folder with your
HTML page from Arachnophilia. Images MUST be in
the folder with the HTML page in order to show
up.Put the folderon the desk-top so youdont
lose it.
The Graphics Toolbar can be used for any image,
including photos. For the Poetry assignment,
you will only need to use the BareImg button.
Here is a sample of the BareImg tag with an
image typed in
altBambi Alt means when you mouse-over the
image, it will say whatever you like as a screen
tip

28
Table of Contents
Graphics Images Toolbar . . . continued
On my page, I chose to have a screen tip for this
image. What will you do with this feature?
29
Table of Contents
FONT Toolbar . . . continued
Remember the Styles Toolbar?
You can use the Styles Toolbar together with the
Font Toolbar.
Here is the code dropped in by this button.
Again, you simply supply the values, which in
this case are the font number size, font type
(face), and font color (Hex) number.
You might ask where do I find Hex colors for my
HTML background, links, and text? Keep going
well get to that.
Hexadecimal color number
30
Table of Contents
FONT Toolbar . . . continued
If all you want to change is the font color,
highlight your text you want effected, choose the
color button. It brings up this dialog box with
colors to chose from NOTICEIt nests the text
with opening and closing tags for changing the
font color.
31
Table of Contents
Hexadecimal Numbers . . . continued
32
Table of Contents
Hexadecimal Numbers . . . continued
33
Table of Contents
The End
34
Table of Contents
acknowledgements

• Clip art from Microsoft Clip Organizerresident
  in MS PowerPoint
• Animated GIF royalty free graphics
  fromhttp//www.animationfactory.com/brain/search.
  cgi?asareaalltermfawn
• Nested baskets image fromhttp//www.masscraft.com
  /baskets/page2.html