FrontPage 2003 Training
Microsoft FrontPage Training Tutorial
While reading messages in a few FrontPage support groups, I have
noticed that many new users have not learned the basics before moving
on to designing full websites. Often this can result in messy bloated
code that will not validate and breaks when viewed in browsers other
than the browser they created it in.
It hasn't been all that long ago since I too was a new FrontPage
users that faced these very challenges.
I lost so much valuable time with the trial and error method
of learning that I decided to begin writing a series of FrontPage
2003 training tutorials. This is the first tutorial in a series
of articles to come, designed to help FrontPage users return to
the basics. Once you have completed this tutorial you will be ready
for the
CSS FrontPage Tutorial.
I WILL SEE YOU AT THE TOP!
Texas Web Designer and SEO Training Specialist
Owner GNC Web Creations and Mississippi Photo Gallery
FrontPage 2003 Training Tutorial Note:The linked
FrontPage 2003 Training screenshots throughout this tutorial open
in a new window. This makes it possible to be able to work through
the steps while referring to the screenshots at the same time. Simply
click the red x to close the screenshot.
STEP 1 - Create New FrontPage Web
Open Microsoft FrontPage
From the file menu, select: file > new
 view
screenshot
From the task pane, located on the right side of the window,
select one page web site, located under the new website
section.
view
screenshot
In the Website Templates box, click on One Page Website
(single click) to highlight the icon. On the right side of the
box, under options, select the location for the new website. It
is likely already set to place the web folder in your my documents
area, therefore you should only need to change the last word to
the new title for the web. For the purpose of this practice tutorial,
change the final word to test. Click OK.
view
screenshot
Close Microsoft FrontPage
STEP 2 - Open New Training Page in FrontPage
 Go
to My Documents on your computer and open the new web that
you just created. Inside you will see 3 - 6 files, depending on
if your folder preferences are set to view hidden files.
view
screenshot
Right click on the index file and select edit. If your
preferences are not set to automatically open FrontPage as the
default editor, you would instead select Open With > Microsoft
FrontPage from the right click menu.
Once the index page is open in FrontPage, select the code
tab from near the bottom of the window. (In older versions it
will be the HTML tab.)
view
screenshot
STEP 3 - Insert First Line Of Code
We need to insert a DOCTYPE to the first line of the HTML code.
From the file menu, select: Tool > Page Options.
view
screenshot
Click on the Code Snippets tab in the Page Options
box.
view
screenshot
Highlight HTML 4.01 DOCTYPE and then click on the
modify button.
view
screenshot
In the bottom text area of the Modify Code Snippet box,
add the following code and then click OK
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
view
screenshot
You will now be back to the code view of the page. Place your
cursor on the far left of the first line and press enter
on your keyboard. This will move the html tag down one line. Now,
place your cursor back to the first line again. From your keyboard
select Ctrl + Enter to open your list of snippets. Double
click on HTML 4.01 DOCTYPE. This will automatically add
the correct DOCTYPE to your code.
view
screenshot
From code view, look at the code created to see the change.
Compare your results with the screenshot below.
view
screenshot
An alternative to the above method of inserting the DOCTYPE
would be to copy and paste the correct code to the first line
of the HTML.
STEP 4 - Edit Page Properties
From the file menu, select File > Properties. In the
Page Properties box, select the General tab. Enter
a page title, description, and keywords for your new page in the
correlating text areas.
view
screenshot
Still from the Page Properties box, select the Language
tab. Under Page language, scroll down to English (United
States).
Under HTML encoding, scroll down to US/Western European
(ISO) and Automatic Encoding. Click OK.
view
screenshot
You should now be back to code view for the page. You
will notice that more HTML code has been added, along with basic
meta tags.
Keep the order of the tags within the head of the document
the same all of the time, as it much easier for you to spot problems
if you get used to seeing everything the same way every time.
I personally prefer the title and meta tags as first tags located
directly under the opening html tag.
view
screenshot
An alternative method to insert the above information would
be to simply add the correct information (see screenshots) into
the code.
STEP 5 - Enter Text
From the design view, enter the following plain text
on the page.
This Is My First Header
After that ( hit enter on your keyboard so it goes to the next
line) I want
you to add a paragraph of any plain text.
Still from the design view, enter the following plain text on
the page.
This Is My Second Header
Following that, add a paragraph of any plain text.
Enter the following plain text on the page
This Is My Third Header
Following that, add a paragraph of any plain text.
Enter the following plain text on the page
This Is My Fourth Header
Again, add a paragraph of any plain text.
view
screenshot
Place your cursor next to the first header line, or highlight
the line.
view
screenshot
In the formatting toolbar (in the styles area where it says
normal) arrow down to heading 1
view
screenshot
Notice in the design view that the first heading line is now
much larger.
view
screenshot
Place your cursor next to the second header line, or highlight
the line.
In the formatting toolbar (in the styles area where it says normal)
arrow down to heading 2
Place your cursor next to the third header line, or highlight
the line.
In the formatting toolbar (in the styles area where it says normal)
arrow down to heading 3
Place your cursor next to the fourth header line, or highlight
the line.
In the formatting toolbar (in the styles area where it says normal)
arrow down to heading 4
Now, go to the code view and carefully take a look at the HTML
that has been created. Notice that the only tags are those created
for the content we added, the opening and closing h tags (heading
tags) for each heading, and the opening and closing p tag (paragraph
tag) for each paragraph of plain text content that you added.
There are no font tags.
view
screenshot
From the file menu, select File > Save
STEP 6 - Validate The New Test Training Page
You will now need to validate the new page.
The easiest way to validate pages (using Internet Explorer)
that have not yet been uploaded to the net, is to install the
Web Accessibility Toolbar. Once you have it installed,
in the menu of a new window go to:
View > Toolbars > Accessibility Toolbar.
This will place a check mark in front of the Accessibility
Toolbar option, which should now automatically display the toolbar
in your window.
Go to My Documents on your computer and open the new
web that you just created. Assuming that Internet Explorer is
your default browser, double click on the index file, so it opens
in an Internet Explorer window.
Click the validate button (in the Web Accessibility
Toolbar) and select:
W3C HTML Validator > Validate HTML [File Upload].
The page will upload automatically and your results will be
displayed.
If you prefer not to install the Web Accessibility Toolbar
discussed above, you can
validate by file upload by browsing for the correct page.
If the test training page you just created doesn't validate,
go back to the beginning and compare every screenshot with the
HTML code on your page until you find and correct the error.
FrontPage 2003 Training Notes
This FrontPage 2003 Training was written specifically for Microsoft
FrontPage 2003, but should also be applicable to previous versions
of the program. An exception would be the use of code snippets.
However, an alternative was provided within the tutorial.
What are FrontPage Code Snippets?
"A code snippet is a fragment of code or text that you can
define and reuse many times. Microsoft FrontPage provides several
pre-defined code snippets, and you can also create your own. You
can associate a keyword to the code snippet for quick access and
insertion."
Microsoft Office FrontPage Help
Are You Looking for Free Online Website Training?
Free Website Training Classes Provided by GNC Web Creations
1and1 Web Hosting Review
Dependable Hosting You Can Count On
If you are tired of your website being limited by your web hosting
company, you might want to consider looking at a company that will
meet your small business needs both now and in the future. We personally
use and recommend
1&1 Hosting.
We found the
1&1 Linux Developer Package to be an absolutely excellent
choice for our business, and it allowed us room for future growth.
Making the decision to move our domains was not an easy one, but
it has been a decision we never regretted. We have since added a
managed dedicated server that we are very pleased with.
Read our
1and1 Hosting Review to find out more!
GNC Web Creations - 2125 Universal City BLVD - Universal City, TX 78148 - (210) 564-9153
Copyright © 2003 - 2011 J. Walker of GNC Web Creations All Rights Reserved
|
