Frontpage 2003 Tutorial

All web design discussion, including Ultimate Quiz MOD support.

Moderator: CricketMX Forum Moderators

Post Reply
User avatar
alex1*
Know-It-All
Know-It-All
Posts: 223
Joined: Tue Oct 05, 2004 1:59 pm
Location: Netherlands
Contact:

Ok well I was asked to write a tutorial about Frontpage, so I will try to enlighten people a little about using this program.

First I want to start with some general things about building websites. There is a lot to say about it, but in my opinion it all starts with a concept.
It is important to know what you want to tell people and the purpose of your website.
On my own website I have written a topic about my ideas for making a website, you can find this topic at http://www.computerlandchat.tk/webdesing.htm

Once you have decided your concept ,you can start building, for that I use Frontpage 2003 from Microsoft.
A lot of people are not fond of Frontpage or lets simply say with Microsoft products.
For me it is the easiest tool, made in the familiar Windows style and with many add-ons.
Before we start I have to point out that not all webspace providers support Frontpage extensions, so you will have to ensure that the provider supports those in order to be able to use a few advanced features of Frontpage. However the normal building in Frontpage will always be accepted.
For those who want to learn the HTML language, Frontpage can be a usefull tool as well because you can easily show the sourcecode (HTML) in which the pages are writen.

Please obtain your version of Frontpage 2003 the legal way, downloads can contain viruses and its always better to have a legal version.
Since I am from the Netherlands, I have a dutch version of the program but I will try to be as accurate as possible in the english names for the different menu’s.

First of all start up Frontpage 2003 and it will open a new document, it will always open up in the last used view. To see in what view you are, you can look at the bottom of Frontpage. You will normally see there, the following options:

Design (the easiest way to make your websites is using this option)
Split (a split screen with the code on top and a lower one showing the design screen)
Code ( shows HTML script)
Example (shows you the finished outcome as it would be in a webbrowser)

We intend in this tutorial to build in the Design.section
You will see we have a white page, and basicaly it works like a normal text editor. You can place your cursor and type your text in it.
If you switch now into the Code section for a moment you will see the HTML code for the text you just typed. We go back to Design now.

If you intend to make a website of different pages with all of them the same view then its wise to first make a concept page. In this concept page you should store all common features that the pages will share. For example :

Background
Font/Fontsize
Fontcolor
Behaviour
Background music if needed
Linkcolors
And much more (I,ve left this out otherwise this tutorial would count 100+ pages.)

So this is how to begin, delete the text you just wrote and then right click (if you have set your mouse to righthanded off course) then go to Page Properties.
You will see a small screen with 6 tabs.
On the first you can set some general stuff, like the title, keywords and your background music. On the second tab you set a background-image or background-color and the colors the links should show.
Its important that the links show clearly so make sure the colors are clear on your chosen background.
If you use a background image, make sure you use an image that stretches the whole screen for the viewer. Most viewers use either a 800x600 pixel screen or a 1024x768 pixel screen.
The next choice to make is the size you would prefer your viewers to see it.
Make sure the picture therefore is sized either 800x600 or 1024x768 pixels.
Its wise to tell in small text somewhere on the startpage in which resolution the page is best viewable.
In the third tab of our small screen, called Advanced, we can set the margins for our page, just like in a text editor.
The last three tabs are more for experienced builders so I will leave them out of this tutorial.
To set the font and font size and colors you simply go to the top of your screen, choose the font in the box that says Times New Roman and select the size. (10 to 12 is large enough)
Remember that its best to choose a font that is a common one, not all users have the fancy fonts on their computers and using a custom one will make the page show badly to some viewers, my suggestion would be Times New Roman, Garamond, Tahoma or if you like it Arial.
To change the colors, there is a button with a fat A above it in the bar on top, you can change the color there. Make sure the color is very visible on the chosen background.

Now we have created an example for all the pages we wish to build, save this example with a clear name, like example.htm.
The best way to save it is in the suggested folder that Frontpage already has made called My Webs, its located in My Documents so you can always find again. Some extra maps will be made in this folder to make it easier to save all you webstuff. You might ask why? It is so that if you place pictures, music or any kind of file on your website, all those files will have to be brought to the place where your website will be stored. (Normally this will be in your webspace at your providers server) Therefore it is the best to have one folder (My Webs) that contains all files, in this folder you can have folders for images, music, and other stuff.
In this way you never lose track of you webfiles. The other advantage is that Frontpage can open the My Webs folder as a Web folder. This means when you open it like that you will have on the left of the Frontpage screen a tree with all files and folders belonging to your website. If you save the page the picture you set as background will be saved in the folder automatically as well.

We can now change to this view, simply go to File (on the top left side of the screen) and to open site. Chose the My Webs folder and it will open this tree. We will continue with the program set in this state.
Now double click on the left on the example.htm file. In the mainscreen the example page we made before should open now.

Ok now we start the building by writing what we want and adding what we want, but make sure any file you add, should be placed in the My Webs folder somewhere.

One important thing to remember is that the page that you want to be shown first when people come to your site should be saved as index, it becomes a different icon in the tree in the left.

To understand the possibilities of the program and the way to add pictures and stuff to your page I will simply walk through the most important options in the drop-down menu’s on top of the screen.

We start with the drop-down menu called File.
We have there the usual stuff, like open and close, save and save as, I won’t go deeper into that because I feel that if you want to build your own site, you at least should have some basic knowledge on using programs.
First interesting option is Publishing, this option allows you to upload your website to the providers webspace if needed. Sometimes you can host your website from a home server and then you don’t need to upload it.
The next interesting one is Example in Browser, you can choose a browser type here to see in a real webbrowser how the site is looking. To be able to use this option you first have to save the page you want to view.
The last option I want to show here is the Properties one , it shows the same 6 tabs screen we used for making the example page.

Next drop-down menu on top is Edit.
In this menu as well we see a lot of common options as we know them from other programs.
Like cut, paste and so on, this drop-down menu doesn’t need more explanation for a basic tutorial.

Then we have the View option.

There we find the various options to edit your view in Frontpage, best if you experiment with this in a later stage, you will find many useful features in this drop-down menu, like a check on all the links on your website.

Now it gets more interesting, we come to the drop-down menu called Insert.

Here we will find all the possibilities we wanted to see, its all about what we can insert into our website.
Lets start with Webcomponents, if you click this option then you get a small screen with a view possibilities on the left and feature on the right, we see there for instance Dynamic Effects with a scrolling bar and Interactive buttons. (The people who want to see some of those features will need to have java installed)
There are visitors counters (Frontpage extensions, see top of the tutorial) and other neat options.
The one I particularly like is the feature Advanced elements, here you can insert complete html scripts such as javascripts. These scripts can do many nice things and are mostly free to get. If you look again on my website and go to the main or home section, you will see a small popup appearing, this is such a javascript. To find those scripts just go to http://javascript.com/
The javascripts can only be inserted in this option, just copying them into the HTML code won’t work.
The Webcomponents section is a good area to experiment with but be sure you saved your page first so you don’t harm what you have already done.
Next option in this drop-down menu that I want to point out is Forms. If your provider supports Frontpage extensions then you can use this option to make the coolest forms you ever made. They can be used for guestbooks, forums, simple polls or e-mail forms.
Next option is Images or Pictures, here as it says you can choose the picture that you want to be placed in the main page on the place where the cursor blinks. You will find you have various options to obtain pictures, such as from a scanner or file or even the pictures office has within the program.
The next possibilty is the Interactive button, if you click it, you will find a screen that makes it possible to make cool buttons on the webpage. The buttons can have a hyperlink to external websites, internal pages or files and forms. Its higly customizable.
Further you will find an option to insert a file and an option to insert a hyperlink.
If you want simple text to be a hyperlink you highlight the text then go to Insert/Hyperlinks and add the adress of the link there. The hyperlinks are customizable as well, but I suggest for now just play around with it and you will get the hang of it.

The next drop-down menu is Looks.

We have here fonttype and some other text features that are normal for text editng programs, I will assume you know how they work.
We have here some nice features however as well, lets look at those, Themes for instance.
There are some predefined themes embedded in Frontpage 2003, those themes can be found here, they will change the complete look of you website, background, font type, colors and so on.
Then we have Transit between pages, this is an option to add nice effects when you switch to the next page, like fading in and out. They are like the ones in Powerpoint for those who know that program. They take space and time for you visitor but they look cool.
With the other options in this drop-down menu you can simply experiment, some are really good but remember to be aware of frontpage extensions. Not everything might work on your website.

Then the next drop-down menu is Extra.
Here we find some features to control the working of your website.
Lets see Browsercompatibility, you might use Internet Explorer 6.0, others might still use 4.0 or even third party products to view websites. In this option you can check your website in different browsers, you have to set it up first however, I think the screen will show you how.
You can optimize your HTML here, this option will cut out the unneeded HTML parts for the website you wrote and as it says optimize it. There is as well an option to check the hyperlinks you made. Maybe you do not see the use of this option but if your website runs longer, then it could be some of the websites you linked to might have changed their adresses or vanished all together.
A successful website is a site that is often changed (worked at) and a not working link shows a lack of work, and therefore maybe of interest.

Next drop-down menu is Tables.
Now this one is important in my opinion. Maybe not now for you but nowadays many websites are build on a tables concept. Tables are seperately highly customizable and therefore a great way to build your webpage with.
In this way you can let text appear on different ways in different positions, not as on my website just from top to bottom. In tables you can paste images so even they are very customizable.
The options in this menu I won’t walk through, they are the same as the tables options in any advanced text editor but you can always test it out I am sure you will like it.

The last 4 drop-down menu’s I will not discuss here today, the Data one is an advanced menu and the same goes for Frame. The last two are normal ones that you will find in most programs. (Screens and Help)

I could write another 10 pages about Frontpage 2003 but I am afraid your head is bursting already after all the info I gave here. So I will stop this tutorial now, it was meant to get you underway.
For those who oppose Frontpage I can understand that people use different programs for anything they do, most people will defend the programs they use because they love those programs. Its the same here, I have tried Dreamweaver for instance but I could not find myself in the program thats why I stick to Frontpage 2003.

I am willing to answer questions on this topic further, just mail me at alex1@cricketmx.com I hope this will help you to get your websites up and running .

Greetz
Alex1*
Greetz Alex,
Host of Computerland Chat &
http://www.computerlandchat.tk
User avatar
Rat
Drain Brain
Drain Brain
Posts: 4476
Joined: Mon Jun 14, 2004 9:38 am
Location: in the dark

I'm not a Frontpage fan myself but I think you deserve a gold star for this Alex. You obviously put in a lot of work. Thanks. :)
quicksilver
Helpful Hands
Helpful Hands
Posts: 1926
Joined: Mon Mar 22, 2004 12:12 am

Well done Alex 8). This will be a great help to many like myself that have never even opened Frontpage.... yes I know it does,nt bite :lol:
User avatar
alex1*
Know-It-All
Know-It-All
Posts: 223
Joined: Tue Oct 05, 2004 1:59 pm
Location: Netherlands
Contact:

I want to say here that we all thank this to Quicksilver as well, since he did the languagecorrection on the topic.
Greetz Alex,
Host of Computerland Chat &
http://www.computerlandchat.tk
User avatar
battye
Site Admin
Site Admin
Posts: 14391
Joined: Sun Jan 11, 2004 8:26 am
Location: Australia
Contact:

Great post Alex :D
CricketMX.com in 2022: Still the home of bat's, rat's and other farmyard animals!

"OK, life [as you chose to define it] repeats until there are no more lessons to be learned." - nrnoble (June 12, 2005)
"the new forum looks awesome, it's getting bigger & better" - p2p-sharing-rules (11 Jan, 2008)
"Looks like CMX is not only getting bigger...but, also getting better!!" - moongirl (14 Dec, 2007)
Post Reply