Site hosted by Angelfire.com: Build your free website today!

Darkest Faerie Lair

 This Site
Home
Contact Me
Message Board
Links
Link Me
Site History
Site Map
Site Stuff
Updates
  Tutorials
CSS Codes
HTML Codes

FrontPage Tutorial
Guild Layout Tutorial
     Music Tutorial
Lookup Tutorial
     Table Tutorial
     Top Banner Tutorial
     Shield Tutorial
     Sidebar Tutorial

Shop Tutorial

Background Tutorials
Blinkie Maker/Tutorial
Blog Tutorials
Blog Coding Tutorial
Cursor Tutorial
Font Installing Tutorial
Scroll Bar Tutorial
Sparkle Name Tutorial
Text Area Tutorial
Transparent Tutorial
Uploading Tutorial

FrontPage Tutorial

With this tutorial, you will be able to make a simple Guild Layout, Shop Layout, or Pet Page.  Some codes may not work in these places, and as far as I know, most will not work in your Lookup. 

Programs Needed:
- FrontPage Express (see installing directions below)


Downloading/Installing FrontPage Express
If you have Microsoft FrontPage (any version) on your computer, skip this step.
If you don't, download FrontPage Express here.
Go to My Documents (or wherever you saved it) and double click "FPinstall.exe" and it will be installed. Go to C:/Program Files/FrontPage Express, then double click on "Fpxpress.exe" to open the program.


Starting Out
Click on the New button (New Page) to create a blank page. Go to View > HTML.  You probably won't be using this part very much unless you know HTML.  You won't be editing what you see here just yet, but you should take a look so you know what it is.  You probably see something similar to this:

If you are creating something to put into Neopets (which I assume you are), these codes are BAD.  However, before you go and delete it, it won't make a difference.  Once you start creating things in FrontPage, this code will come back.  You won't see any change, but if you try to put this code into a Neopets Guild, Shop, etc, you will get an error.  When you are finished, you will return to this screen and get rid of this code, but right now is the fun part - creating your layout! 


Tools
If you have used Word, Notepad, or any other word processing programs, a lot of the buttons will look familiar. Basically, all you do is type up your information and make it look cool with the buttons.

[Font Type] [Text Size] [Bold, Underline, and Italic] [Text Colour] [Alignment] [Lists] [Insert Images] [Hyperlink] [Hyperlink Colours] [Background Colour] [Background Picture] [Background Sound] [Bookmark/Anchor] [Horizontal Line] [Text Box] [Marquee] [Tables]

Font Type
There should be a box below the Insert, Format, and Tools menu buttons, it will probably say "Times New Roman" in it.  Click on the down arrow to the right of it.  You will now see a list of the fonts that you have installed on your computer.  To see what they look like, you will have to click on the Font Name, then your text will change.  Be careful of the font you choose.  If you downloaded a font and then choose that one as the font to use for your text, it will only work on some computers.  If someone doesn't have that font downloaded on their computer, it will show up as a default font (like Times New Roman, Verdana, or Arial). 
If you want to use a downloaded font, you will have to make it into a image.  That can be done in Paint or another image editing program.  There is a section below that will show you how to insert an image you've created or one from the web into your layout. 

Text Size
Select the text that you want to change the size of.  If you want to make it bigger, click on the "Increase Text Size" button (Increase Text Size) and if you want it smaller, click on the "Decrease Text Size" button (Decrease Text Size). 

Bold, Underline, and Italic
Select the text that you want to make bold, italic, or underlined. 
To make your text bold, click on the B (Bold) button. 
To make your text italic, click on the I (Italic) button. 
To make your text underlined, click on the U (Underline) button. 

Text Colour
To change the colour of some text, type it in then select the text. Click the Text Color button (Text Color).  A Color Palette will come up with some basic colours that you can choose.  If you don't see any that you like, click the "Define Custom Colors >>" button. You can then use your mouse to select a colour from the spectrum.  When you have a colour you like, click the "Add to Custom Colors" button and click OK. Your Text should now be the colour you chose. 

Alignment
To make your text line up at the left side of the screen, select your text and click the "Align Left" button (Align Left).  It should automatically be aligned this way, so if you haven't already changed the alignment, nothing will happen. 
To make your text centered, select your text and click the "Align Center" button (Align Center).
To make your text line up at the right side of the screen, select your text and click the "Align Right" button (Align Right). 

Lists
There are two types of lists you can make, a Numbered List or a Bulleted List. 
To create a Numbered List, click the Numbered List Button (Numbered List).   To create a Bulleted List, click the Bulleted List Button (Bulleted List). 
Pretty simple, huh?  A bullet or a number should come up on the screen, then you can type whatever you want the first point to be.  To write a second point, press Enter.  When you are finished with the list, press Enter twice. 
Now that your list is done, you can customize it even more.  Right click anywhere in your list and choose List Properties.  You will then see other types of ways you can order your list.  Select one of them and click OK and your bullets/numbers will change to the one you selected. 

Insert Images
You can only insert an image that is uploaded to the internet, ones from your computer will not work.  If you want to use a picture that is saved on your computer, use the Uploading Tutorial to learn how. 
If you have an image on the internet that you want on your guild/shop/etc, right click on it and chose Properties.  Some people have blocked right clicking on their website so that you can't save their images or link to them.  If an error comes up, this is probably what has happened and you are not allowed to use any pictures on that page.  Respect the website owner's decision and leave their image alone.  Generally though, you can get the link to the image.  You should see "Address (URL):" somewhere in the window with an address beside it.  This is the image's URL, copy it. 
Back in FrontPage, choose the Insert Image Button (Insert Image).  Click the circle beside From Location, and in the box get rid of the "http://" and paste the URL.  Click OK and your image should now appear on the page. 
You can now change the image's size and border.  Double click the image and click on the Appearance tab at the top of the window that comes up.  To add a tiny border, type in 1 beside Border Thickness.  To make it larger, put a larger number. 
To change the size, make sure there is a check mark beside Specify Size (if not, click the box beside it).  You can then type a number in the height and width boxes.  If you do not know the size you want to make it, click OK, then click your image once.  You can drag the squares that appear around the edges of your image to resize it. 

Hyperlink
A Hyperlink is a regular link, but Hyperlink is the more technical term.  Select the text/image that you want to link to another site. 
Note: You cannot link to a website outside of Neopets on your guild, pet page, shop, etc.  It must start with http://www.neopets.com or it will not work!
Click on the Hyperlink Button (Hyperlink).  In the box beside URL you will put the website address.  If you want the link to open in a new window, put "_blank" in the Target Frame box as well.  Your text should now be blue and underlined, showing that it is a Hyperlink. 

Hyperlink Colours
Will not work in your shop or guild.
It's best not to change your Hyperlink colours since it can get confusing.  People are used to having hyperlinks be blue and underlined and have links they visited be purple and underlined.  However, if your page background is purple or blue or another colour that makes it hard to read the links, you should definitely change the colours. 
Go to Format > Background.  You should see five drop down boxes - Background, Text, Hyperlinks, Visited Hyperlinks, and Active Hyperlinks, but you are only dealing with the last three right now.  Choose a colour from the Hyperlink drop down lists or choose Custom to make your own.  If you chose Custom, pick from the Color Palette or click the "Define Custom Colors >>" button to choose your own colour in the window that came up.  If you don't want a colour from the palette, use your mouse to select a colour from the spectrum.  When you have a colour you like, click the "Add to Custom Colors" button and click OK.  Click OK on the Page Properties window when you have chosen a colour for each of the three Hyperlink types. 

Background Colour
Will not work in your shop or guild.
Go to Format > Background.  Beside the word Background is a drop down box.  You can select a colour from the list or choose Custom to make your own.  If you chose Custom, pick from the Color Palette or click the "Define Custom Colors >>" button to choose your own colour in the window that came up.  If you don't want a colour from the palette, use your mouse to select a colour from the spectrum.  When you have a colour you like, click the "Add to Custom Colors" button and click OK.  Click OK on the Page Properties window and your background should be the colour that you specified. 

Background Picture
Go to Format > Background.  Click the box beside Background Image.  In the box below, type in the address of the background.   You cannot use a background that is on your computer, you need to upload it to the internet (check out the Uploading Tutorial to learn how).  When you have the address in the box, click OK and you will see your background. 

Background Sound
Go to Insert > Background Sound.  You CANNOT use a file on your computer, you will have to upload it to the internet first.  You can use the Uploading Tutorial for help.  Also, know that in some places it is ILLEGAL to upload MP3s (the songs you would get from a CD or the radio) to the internet.  Click on the From Location circle, then put the address of your MIDI or WAV in the box.  If you don't know where to find MIDIs or WAVs or don't know how to get the URL, check out the Music Tutorial.

Bookmark/Anchor
First of all, I should probably explain what Bookmark/Anchor is.   Basically, it's a way to jump to a certain part of the page quickly, for example, if you click here, it will take you to the Hyperlink section of this tutorial (the link opens in a new window, but if you were to create a bookmark it would not do that). 
Fist you need to decide where you want to jump to.  Usually people make anchors at the beginning of each section on your Pet Page so it's easier to find them.  Let's say for example that you have three sections, Welcome, My Story, and Stats.  Click right where your Welcome section starts so the flashing bar is just before your text or Welcome title, then go to Edit > Bookmark.  Type in a name for the bookmark (try not to use spaces), for this one I'd probably put Welcome, then click OK.  You should see a little blue flag before your section.  Now, go to the text that you want to link to that section and select it, usually people will have links at the top or the side that will link to each section.  Click the Hyperlink Button () and in the window that comes up, click "Open Pages".  Near the bottom of the window, it says Bookmark, select the name of your section from the list and click OK.  Now, when people click on that word/sentence/picture/etc, it will take them to that section. 

Horizontal Line
It is very simple to insert a Horizontal Line, and if you have a lot of text, it can be helpful to organize it.  Go to Insert > Horizontal Line and you will have a nice divider.  However, if you don't like a certain aspect of it, this can also easily be changed.  Double click the Horizontal Line.  On the box that comes up, you can change the width, height, and alignment.  You can also choose a new colour for the line, simply select a colour from the drop-down list.  If you don't see any that you like, choose "Custom" (the last choice).  You can then choose from the Color Palette or click the "Define Custom Colors >>" button to choose your own.  Then use your mouse to select a colour from the spectrum.  When you have a colour you like, click the "Add to Custom Colors" button and click OK.  Click OK on the Horizontal Line Properties window and you will now be able to see what your divider will look like on the internet. 

Text Box
Go to Insert > Form Field > Scrolling Text Box.  There are also a few other choices in the Form Field menu, but they aren't of much use on Neopets.  You will now see your Text Box on the page.  If you click on it once, you can drag the black squares around the edges to change the size.  To change it's other properties or write in it, double click the Text Box.  The name field doesn't make much of a difference, you can leave it at the default and nothing will be affected.  If you want, you can give the Text Area a name, it should be one word (or several without spaces) describing what is in the Text Area.  In the Initial Value box, you should write what you want your visitors to see in the box.  But please note that HTML, CSS, and any other type of code will not work inside this Text Box, it will only show the code.  This can be helpful however if you want to give someone a layout code, HTML code, etc. 

Marquee
Go to Insert > Marquee.  In the text box, type what you want your Marquee to say.  In the Direction box, you can choose if you want the words to move from Left or Right.  I usually just leave it at Left, it doesn't make much of a difference though.  You can also change the Movement speed.  The higher the Delay number, the slower it goes.  The higher the Amount, the faster it goes. I also usually leave these at the same speeds. The Behavior is a neat thing to customize.  If you select Scroll, your words will come on to the screen, then scroll off, then come back, scroll off, and continue to do that forever.  By selecting Slide, you words will come on to the screen, but once they hit the other side, they stay there.  If you have a lot of text, you won't want to use this method because the words will be cut off.  Alternate will have your text bump back and forth between the two sides.  This also isn't a great choice if you have a lot of text.  The choices under Align With Text usually don't make a lot of difference because people usually don't have plain text right beside a marquee, and even if you do, it won't make a huge difference.  The size you will probably want to change, though I prefer dragging the marquee and making it the right size a different way.  If you click OK then click on your Marquee, there should be some black boxes on the corners and sides of the Marquee.  These are your handles, pull on them to change the size.  To get back to the Marquee Properties, double click on the Marquee.  You can also choose how many times you want your Marquee to scroll/slide/alternate.  Once again, I usually leave this as default and have Continuously checked off.  You can select the Background Color of your Marquee from the list or choose one of your own.  If you don't see any that you like, choose "Custom" from the list (it should be the last choice).  You can then choose from the Color Palette or click the "Define Custom Colors >>" button to choose your own.  Then use your mouse to select a colour from the spectrum.  When you have a colour you like, click the "Add to Custom Colors" button and click OK. 
If you want to change the font, font size, make it bold/italic/underlined, click on the Marquee once, then refer to the section above which will tell you what to do. 
Just a note, you will not see the dotted line around the Marquee when you put it into Neopets. 

Tables
Coming soon. 


Put Code Into Neopets

Now that you have finished your layout, you can put the code into Neopets.  First though, you need to go back to the HTML View (View > HTML).  You should see quite a bit of code, and you are going to have to get rid of a bit of it.  It shouldn't be too hard, the parts to get rid of should be all at the top or bottom. 

At the top you should see:

Select this code and get rid of it. 
Scroll to the very bottom and get rid of:

Now you can copy the code and paste it into your Shop, Guild, or Pet Page. 

 Neopets
Articles
Avatars
Battledome
Beauty Contest
Chat Speak
Etiquette
Game Tips
Help Section (FAQs)
Quests
Quick Neopoints
Restocking
Scam Prevention Tips

Guild Layouts
Shop Layouts

 Links
Advent Calendar
Bank
Coltzan's Shrine
Fruit Machine
Giant Jelly
Giant Omelette
Healing Springs
Shop Till
Secret Laboratory
Tombola

Buried Treasure
Haunted Kiosk
Lottery
Pick Your Own
Strength Test
Wheel of Excitement
Wheel of Knowledge
Wheel of Mediocrity
Wheel of Misfortune
Wheel of Monotony
Winter Kiosk

Copyright 2004 Neopets, Inc. All Rights Reserved. Used With Permission.
You are not allowed to use any of my images, tutorials, tips, articles, etc, from this site on your site.