   |
|
|
Arachnophilia Tutorial
![[BOOK]](http://www.stud.ntnu.no/~larsell/bilder/guestbook.gif)
|
PLEASE
SIGN THE
GUESTBOOK
|
The Bottom Buttons
- You will notice at the bottom of the editor there is a row of buttons labeled fonts, forms, frames, graphics, links, structure, styles, & tables.
- When depressed, these buttons will add additional toolbars to the top toolbar area of the editor. One bar for each button depressed. Each bar has several function buttons.
- The focus of this lesson will center on three of the buttons, fonts, graphics, and links. You should have a basic understanding of how things work BEFORE you start using the buttons so that you know enough to understand the results you will achive when you click on one of them. Forms, Frames, Structure, and Styles are more advanced tools. I will give you some links at the end of this tutorial to advanced tutorials that explain these features so that when you are ready you can use those toolbars also. What about the Tables button? Truth is, I dont like the way Arach structures the html code on the page so I would rather type it myself but go ahead and try it if you like. Just don't call me for help! (~Chuckle~)
The Fonts Toolbar
- Click on the fonts button and a toolbar will appear at the top that looks like this;
- When clicked the font button adds a complete font tag [<font size="1" color="#000000" face="times new roman"></font>] for you. All you have to do is edit the text to change the size, color, and face.
- The color button, when pressed, only adds the color tag such as you already have the face and size you want. You simply want to change the color. this button features a color chart that will open and allow you to select whatever color you would like to use and inserts the correct code for it.
<font color=#ff0000>Your Text</font> Everything typed between the tags will be the color you selected.
- The H1-H6 Buttons are used for titles with H1 being the largest down to H6 as the smallest. You might use H1 for the main title across the top of the page. Note that a paragraph or line break is not needed after the "H" tags.
<H1> MY PAGE </H1>
- OK, I cheated a little. Couldn't resist playing with the color button. Feeling a little patriotic today. Try what I did, tags inside tags and see what they do. Be Creative!!!
- Last but not least are the four font plus or minus buttons. These do essentially the same thing the "H" buttons do but, without the paragraph break.
- I bet you can already see how much time and typing (yuck!) theses little jewels will save you. They sure cut down on the redundancy of typing the same tags over and over!
The Graphics Toolbar
- One again by depressing the Graphics button at the bottom of the page, the graphics toolbar will appear at the top. Tip: I toggle these on and off as I need them to maximize my viewing area. This is what the graphics toolbar looks like:
- When you click on the NewImg (new image) button, a dialogue window will appear asking you to decide if you want Arachnophillia to import your graphic into the folder where the html document is located. Your choices will be always, yes, no, and never. If you took my advice earlier in the tutorial, and made an images folder for your graphics, then you should select NO. If not, then you can say yes and the tool will import the image. I would rarely say always or never.
- Once you answer the dialog an explorer window will open allowing you to navigate to the images folder and select the image you want to display on the page. This function puts a complete image tag into your code including the image size and Alt tag. The Alt tag is to include a description of the image that is displayed when the cursor is positioned over it or for some reason the image fails to load. Just type in your description between the "" marks.
<img src="webthing.gif" width="32" height="32" alt="This is WebThing">
Hold your cursor over the picture.
- The edit image button should be used rarely. This will only put in the image name and none of the other information. A good example wuld be, you already have an image tag but you want a different picture so you backspace out the image name from the tag and click the edit button. you find your new image and Arach pasts the name into the code where the other image was. OH, but here comes trouble!. When you go to preview, the image is all skewed and deformed. Why? Because when you edited the image name, you did not edit the image dimensions!
- The bare image button inserts just the image code alone. That leaves it up to you to enter all the information such as image name, size, path, etc....I bet you won't use this a lot. (~chuckle~)
<img src="" alt="">
- EditColr & NewColr do the same thing they do on the fonts bar. They are placed here so that you can change font collors while commenting images. Nothing new here.
- I doubt very much that most people reading this even know what cgi is, much less want to insert it into a page. CGI is an advanced feature you may use later down the road. Skip it for now.
- Lastly we come to Marquee. This is a cool effect if your viewer is using Internet Explorer but, it doesn't work with Netscape and some of the other browsers. they will only see a line of text but, thats not your problem. Right? here's an example. I'll show you the code the way Arachnophilia puts it in and then my modified version.
<marquee width="50%" scrolldelay="0" behavior=alternate>Text is Entered Here</marquee>
<marquee width="250" scrolldelay="0" ><font size="+2">Text is Entered Here</marquee></font>
- Remember, use graphics sparingly!!!!!!!! Too many graphics on a page and your readers will lose interest waiting for it to load.
Back to Top
Links Toolbar
- This is a handy little tool for making menus and links. Sure does beat typing all that stuff over and over. Here's what all the buttons actually do. (You're gonna love this)
- NewURL Button--First you need to know what a url is. the name sounds kinda fancy. It stands for "Uniform Resource Locator". Which is nothing more really than a shortcut to a webpage. You probably have a lot of them stored on your computer because that is the way Internet Explorer saves "Favorites".
- Now that you know that you wonder what does that have to do with making webpages? You can use those "Favorites" to create links to the sites without having to open the page in your browser and copy and paste the address into the link. Click on the NewURL button and an explorer window opens for you to navigate to where your favorites or bookmarks are kept. Select the one you want and Arach pastes the link into your document. Just in case you don't know where the favorites are stored on your hard drive, Windows 95, 98, and ME store them in the windows directory in the "Favorites" folder. Windows 2000 and XP store them in c:/documents and settings/username/favorites. If you have a problem locating them, go to start and do a search for "*.url" without the quotes. All you have to do is type in the link text or picture!
- EdirURL does nothing more than allow you to change the address inside the <a href"edit here"> tag in case you want a link to point to a different page without rewriting the whole link.
- NewHTML links to an html document in your web directory. This makes it very easy to link your pages together and make indexes. Just insert it and select the document from the explorer window.
- The DocLink & DocRef buttons work hand in hand even though you can use them seperatly. If you havent already discovered, I used them on this page. Up near the top is a menu that looks like this;
Fonts Toolbar | Graphics Toolbar | Links Toolbar Click on one and see what happens!- Pretty neat huh? These two tags are used to locate areas inside a document. they are simple links but instead of other pages they are topics in this page. The DocRef tag places a reference point into the document for the DocLink tag to go find. All you have to do is place the ref tag near the area where you want to be able to link to and make a menu or link to it anywhere on the page. This is what it looks like.
DocRef <a name="links"> Name it whatever you want and place it in the area you want to link. Then Just use Doclink <a href="#link">Links Bar</a> to make a link to the area.
- Last but not lease are the two sound buttons NewSndM & NewSndN. The M & N on the ends stand for Microsoft and Netscape. Until IE 5 came out you had to use both tags to place music on a page so that both browsers would play the sounds. This is no longer true. I recommend you use the NewSndN tag. This one will work in both browsers. This is the tag the way Arach does the code.
<embed src="allaround.wav" width="0" height="4">.This is fine and it will work but your viewers will not be able to turn off the music if they desire and that can be very irritating. I change the size of the player control to be more polite.
<embed src="allaround.wav" width="120" height="45">.This is the result:
- One last word about music and sounds. DO NOT put a whole song or large wav file on your page or nobody will stay long enough for it to load. For now I would reccomend you use Midi files which are readily available on the net.
Thats about all you need to know to get your page up and running. Simply upload the files to your directory and there you have it. just be sure to keep the dir structure the same and DO NOT upload the www folder, only the contents and subfolders.
The Next page will contain a few misc items and some links to resources for your web design.
