|
|
 |
 |
|
| | / | | |
| |
|
|
 |
Using our templates with Microsoft FrontPage
Microsoft FrontPage is currently one of the more popular WYSIWYG (What You See Is What You Get)
HTML editors out there for Windows. It has quite an abundance of useful features and
tools that can greatly speed up web development. This guide, however, will only cover
the basics of using FrontPage to edit your new template. The last section of this guide
has links to more in-depth FrontPage resources in case you'd like to learn more about
FrontPage's features.
To begin this guide, first make sure you have unzipped your template. If you haven't done this
yet and don't know how, please refer to our QuickStart
guide.
First, start up FrontPage and move on to opening the template >>
Opening the template is simple:
- Go to File / Open.
- Browse to the folder containing your template.
- Select the index.html file and click Open.
The template will now open in FrontPage.
Note: If you are familiar with FrontPage, you may have had experience using FrontPage's Theme system.
Themes are essentially templates designed specifically for FrontPage and include integration with
some of FrontPage's extended features. Our templates are generic templates. They can be used in any
HTML editor, so they do not include any special editor-specific functionality.
Now that you have the template open, we can go on to explaining the interface >>
The FrontPage interface you see should look similar to the screenshot below:
The icons in the left Views pane shows the different aspects of your web project
you can work on. Clicking on an icon brings up its respective view in the right-hand
pane. In this guide, we'll only use the Page view (which is the default).
At the very top you will see a standard menu bar, and beneath it are two toolbars:
The first (as shown above) has shortcut icons that let you quickly perform certain
tasks by clicking on them. For example, to save the page you are working on, click on the
floppy disk icon.
The second toolbar (as shown above) allows you to choose font settings. You can change
the font, font size, attributes (bold, italic, underline), as well as your text's
justification on the page. Note that as with any other Microsoft application you can
customize your toolbars, so the toolbars described above may or may not be present.
While in Page view there are three tabs beneath the right-hand pane that show the
available editing modes. Clicking
on a particular tab will switch to that editing mode. Below is a short summary of each mode:
- Normal
This is the editing mode the majority of users will want to use. It shows the entire
page and allows you to edit/reorganize it using your mouse (as shown in the screenshot above).
You can drag and drop elements (pictures, text, etc.) directly on the page without
having to deal with any HTML code.
- HTML
This editing mode shows the actual underlying HTML code of the page. If you are comfortable
using HTML you can work in this mode to write/edit the HTML directly.
- Preview
This isn't an actual editing mode; rather, it shows you a preview of what the page will actually
look like in your web browser.
In this guide we'll be dealing with the Normal mode since it's
straightforward and easy to use.
Now that you have a basic understanding of FrontPage's interface, you can start
editing the template >>
Editing your template is obviously the most important part of this process.
We won't be able to cover everything you will want to do to your template, but
we will cover the basics using FrontPage.
Editing Text
FrontPage makes editing text extremely easy. Simply click on the text you wish
to edit and make your changes as shown below:
As shown in the image above, you can also do this to change the actual content
of your pages.
Labeling Buttons and Images
If the text you want to add isn't regular HTML text but
rather written on an image, you can use an external image editor. FrontPage
allows you to easily switch to this editor for a given image.
In order to do this, you will first need to set up your image editor
of choice by going to Tools / Options / Configure Editors. Once
you've done this, follow the steps below:
- Double click on the image you wish to label.
- You will now see the image you selected opened up in your image editor of choice
(in this example, Paint Shop Pro). Use your image editor to write your text on
the image. In this example, we are writing our company name on the header image.
- Save and exit from your image editor.
You will be returned to FrontPage and the correctly labeled image should be shown.
Note: There are two ways to label images if you're a FrontPage user. The first
way is the way described above. The second way is to start your image editor, open the image you
wish to label, write your label, and save the image. Both ways will work, but the first
way is generally easier for most people to do.
Once you have finished editing, you can
save the template >>
To save the page you are working on, simply go to File / Save. If you want to save
the page as a copy, go to File / Save As..., enter the new name for the page, and click
OK.
As explained earlier, this guide isn't meant to be too extensive as FrontPage is a very
large application with dozens of features. To get the most out of this editor, we would
highly recommend referring to the excellent FrontPage resources listed below.
|
|
|
|
|
 |
|
