FrontPage Basic Tutorial

Introduction

FrontPage 2003 is a powerful web authoring program which lets you design your own web site using a What-You-See-Is-What-You-Get (WYSIWYG) interface. This means you can see your site as you design it. You can also easily add special effects, create and use templates which will automatically adjust to your pages, and even upload the web site to your FTP server. If you would like to design the site using HTML yourself, you can also do so in FrontPage 2003′s code view. FrontPage 2003 allows you to view the page in your web browser, or right in FrontPage itself to see how it will look.

Please Note: FrontPage Extensions and SharePoint Support is not possible on Active Web Hosting servers. As a result, there are features in FrontPage 2003 which may not work when you upload your site to your FTP server. However, you can still use FrontPage 2003 to create and upload a working web site without needing to use these features.

Site Setup

Click on the File Menu and select New. A sidebar will appear to the right. Under the New Web Site area, click on More Web site templates.

Alternatively, you can click on the New Document icon on the far left in the toolbar and choose Web Site.

In the Web Site Templates window, General Tab, click Empty Web Site. Note that you could try one of the other choices, such as Personal Web Site, which would automatically create all the pages for you. However, we’d like to show you how to create your own custom made pages so that you can adapt this to virtually any type of site you’d like to create. Also note that some of the other choices, such as the Customer Support Site, the site Wizards and SharePoint type sites won’t work on Active Web Hosting Servers as we do not support these features. On the right, under Options, click Browse. Navigate to where you want to put the files you’ll create for your new web site. Keep in mind you are creating your site offline and on your hard drive, and will upload them after you are done creating your site.

You can navigate to any directory and create another directory for your site by clicking on the New Directory icon in the toolbar, or right click in the directory and choosing New then clicking on Folder. For this tutorial, we’ll name the new directory mypage. Click on the OK button then click on the Open button.

Back in the Web Site Templates window, click the OK button. You’ll now see a directory listing both on the right and the left. There’s two folders, _private and images.

Planning Your Site

When creating a site, it’s nice to plan ahead what type of site you want to make and what pages to put on it.For this tutorial, we’ll start with a simple home page called My Home Page.

FrontPage 2003 has a nice feature that lets you plan out your site and pages before you work on it. You can give each page priority ratings so you know which ones you need to do first. At the bottom of the screen you’ll see a row of options. Click on the one at the end named Tasks.

Now you can choose Tasks from the Edit menu (you may need to click on the arrows at the bottom of the menu to see the Tasks menu) and then select Add Task, or just right click in the main window area and select Add Task.

In the Task Name box type in the name of the task. The first task we’ll do is the Template. We’ll set this as high priority because we want to do this first before we do any of the other pages. In the Description box, type in a description for the page to remind you what the page is for.

You can create tasks for the rest of the pages of the site by, setting the priority to maybe medium for each. If you ever need to change the title, description or priority of a task, then you can just double-click on the task to bring up the window to make changes.

Index:
News & updates, counter

About Me:
A few words about yourself, maybe a photo.

Hobbies:
Things I like to do in my free time.

Links:
Links to other sites you enjoy visiting.

Contact:
A page or link to your email address so people can contact you.

If you ever need to change the title, description or priority of a task, then you can just double-click on the task to bring up the window to make changes.

Getting Familiar With The Interface

Before we continue, it’s helpful to get more familiarized with some of FrontPage’s common tools. In the top of the window, you’ll see two tool bars under the menu. The top toolbar has a series of icons for different FrontPage program functions. The second toolbar is a formatting toolbar which has some common text and web page tools. In addition, there is a row of words at the bottom of the screen followed by another toolbar. You can hover your mouse over each icon or area to see a tooltip description of each one. Please do this now to learn them as we will be referencing some of them by name later on. Note that some icons may be greyed out or disabled depending on what type of area you are in (ie. tasks, web site, etc.)

Creating A Template

A template is a document from which you can use to build your web page from. It’s always a good idea to have all your web pages share the same basic look, color, layout and navigational menu. By creating a template, you can then copy this file and rename it to the filename of your new page. After that, all you’ll need to do is simply fill in the content of the web page. This way you do not have to create the whole page style and look all over again for every page. Save the template when you’re done creating your site in case you wish to add more pages.

Select the Folders view at the bottom of the screen. You’ll see the same thing in the Main Area as you do in the Folders View. Right click in the main area and select New, then select Blank Page. Type in the file name as TEMPLATE.html and answer yesto any prompts.

Double click on the new file and you’ll see an empty text area, with the body tag under the document tabs. Hover your mouse over this tag and click the arrow that appears on the right of it. Then select Tag Properties. Note that you can do this for any tag that appears in this row. Clicking items in your document will cause certain tags to appear or disappear.

The General Tab

This is where you set up the parts of your page which search engines would see. It’s always good to at least set a Title, which is also shown in the web browser’s title bar. A page description and keywords are a good thing to add so that search engines can correctly index your page. This is especially important if you happen to be creating a business or other site that depends heavily on gaining visitors to your site.

The Formatting Tab

This is where you can choose your page background and colors. If you want, you can choose virtually any color by clicking on the drop down box next to the item, then clicking on More colors. For this tutorial, however, we choose colors that were available in the drop down box such as black for text, blue for the links, navy blue for visited links and teal for active links. For the background you can choose a custom color by double-clicking on the color choice (like Hex={CC,FF,FF} which is what we used), or even click on the box next to Background Picture, and then choose Browse to navigate to and select a pattern image of your choice.

The Advanced Tab

Here you can further customize the page display. In this tutorial we won’t be filling in any of the items in this section, but you can experiment with them if you wish. However, we will set some properties for the overall page.

Click the Body style… button. We’ll set up the font for the entire web site. Click the arrow on the right on the the Format button. Choose Font. Select Arial, Normal 10pt (do not confuse this with 10px which is smaller. px stands for pixels where pt stands for point). For the color, choose the black (far top left) from the drop down box. In the Effects box, click No text decoration. Click the OK button for this window and then again for the next window.

In the Styles area, click on the box next to Enable hyperlink rollover effects. Click the Rollover Style… button. This area lets you customize how a link will look when the mouse is moved over the link. You can choose the font, style, color, size and effects. For example, to use the site’s default font, and size, we won’t choose any values for those boxes. We’ll set the style to normal and then you can choose a color you like. We used the same teal color we chose for the Active Link above. Click in the box next to No text decoration to ensure that no underlining or other effects occur in the links.

The Custom Tab

In the Custom tab, you can add more meta tags here. We can add one by clicking the Add… button at the bottom in the User variables area. Let’s type in Author in the Name box, then type in your name in the Value box. Click the OK button when done. You’ll see your new one added to the list.

The Language Tab

It’s usually good to set the language of the page so that search engines can correctly categorize your site and maybe provide translation services if someone should search and find your site. For example, in the Page language area, set the Mark current document as: to English and be sure to choose the right English version from your country from the drop down box, if you are in an English-speaking country.

The Work group Tab

If you are on a network and are creating this site with the help of others, this tab has options to let you select the category this site falls under (or create a new category), who is assigned to oversee the project, and the review status (pending, approved, denied, etc. or make your own). If you use this area, it’s usually best not to check the box next to Exclude this file when publishing the rest of the Web site since you want to publish your pages. Often, it’s best to set the template file to Don’t Publish (which we’ll show you how to do later) after you've created your entire web site.

When you’re done setting the page options, click the OK button. Then click in the main area to change it from black to white again (ie. deselecting it).

The Main Table

We are going to create a table which will hold the top banner which describes your site, the left-side navigation menu and finally, the main content area of your pages. From the Table menu, click on Layout Tables and Cells. You’ll see a panel appear on the right. While FrontPage has several layouts you can choose from, let’s learn how to create our own. Click on Insert Layout Table under New tables and cells.

A table will appear in the main area of your page, and it will have tabs with numbers noting width and height. Also at the top you’ll see the table tag. Hover over this tag, click on it’s arrow on the right and select Tag Properties.

We’ll use 2 rows and 2 columns for the size, Center alignment, Specify width of 750 pixels, and a border size of 0. Don’t click OK yet.

Click on the Style button, then click on the Format button and choose Font. Select Arial, normal, 10pt, color black, No Text Decoration and click the OK button in this and the next window. Now you’ll see the table is split into 4 equal quarters. Click on the ‘X’ in the upper right of the Layout Tables and Cells panel on the right so that you can see more of the table. It should appear centered on your page.

We will first join the top two cells and re size it to make a top banner. Click in the top left cell. Now hold down the mouse button and drag to the right, to select the top two cells. Right click in the selected area and choose Merge Cells. Click anywhere in the top large cell to deselect the cells.

Right click in the top large cell and select Cell Properties. Choose Center for Horizontal alignment, Middle for vertical alignment, click in the box next to Specify height (if not already selected) and specify a height of 200 pixels. Now you can also choose a background color. We decided on the same light blue as the background. Notice that when you choose a color, there are some colors under Document Colors. These are the colors you’re currently using in the document, making it easier to choose colors you've already used. Click OK when done. You’ll now see the re sized top banner area.

Click in the top cell. In the bottom toolbar, select the Insert Word Art tool (the blue 3D “A” icon). Select a style you would like to use for the title of your web site. Then choose a text style and size. It’s recommended to use a thick font (such as Impact or Arial Black) and a size of around 60 pixels. You can use larger or smaller text, depending on how long your title is. When you click OK, the title appears in the top cell. You can further customize the text using the buttons in the toolbox that is now displayed on the screen. You can also re size the text by dragging the handles found on all sides and corners of the box surrounding the text. The yellow diamond will let you adjust any text warping and the green dot at the top will let you rotate the text. When done, simply click in another cell and the toolbox and box/handles around the text will disappear.

Click in the bottom left cell and choose Cell Formatting. You’ll see a box appear on the right side of the screen. Choose a width of 150, and VAlign set to Top and the background set to any color you would like. We used a light yellow, for example. The Borders width should be set to 0. Now click on the first icon under Apply to apply settings to all boarders.

Click on Cell Corners and Shadows. Use a corners width and height of 10. Choose your background color and border color (from the Document Colors, you could choose the color you used for this cell’s background). Now click the first icon under Apply, which looks like a circle cut into 4 quarters.

Under Shadows, choose a width of 5, and click on the first icon under Apply, to apply bottom and right shadow.

Click on Cell Header and Footer. Select the BgColor colors. This should be what you selected for the corners.

Click in the bottom right cell, which will be our content area. Click on the ‘X’ in the right-side panel to close it so we can see the page better. Right click in the bottom right cell and choose Cell Properties. Select Justify for the horizontal alignment, Top for vertical alignment, uncheck Specify height, and choose a background color of white.

Click the Style button, then the Format button and select borders. Choose the solid style, color black, width of 1. For the padding, choose 4 for left, right, top and bottom. Click OK buttons until you are back to your main area of your web page (closing all dialog windows). You have now created the main table layout.

Navigation Menu

If you look in your Tasks (clicking on the word at the bottom of the screen), you’ll see the list of pages you made note of. We’ll create a link for each one of these. Let’s start with the Home page, which will be linked to theindex.html file. Start by clicking inside your navigation menu. In the top toolbar, select Arial text, 10 pt. Type in the word Home. Next select the word and click on the Insert Hyperlink icon in the topmost toolbar. Type in index.html in the Address box and click the OK button. Don’t worry if the page or file doesn’t yet exist. Click after the new link to put the cursor at the end of the word and press ENTER. Now you can type in your next link. Do this for each page you wish to create.

To view your page, click on the Preview link at the bottom of the screen. So far, we have built up a site that looks like this:

Saving Your Template

You should save your work at intervals as you go along, so that if something should happen that you lose power or make a change you don’t like, you can revert back to the saved image. Go back to the Design view by clicking on it at the bottom of the screen. Right click on the tab TEMPLATE.html and select Save. Since we have created some images, we’ll be asked where we want to save them. Click on Change Folder. Double click on the images folder then the OK button. Now you’ll see each image will be put in the images folder. Click OK again to save your page and images. Your template is now complete and ready to use. You’ll want to note this in your Tasks view. Go there and right click on the Template task. Choose Mark Complete. Now Right click on the TEMPLATE.html tab and select Close.

Using The Template

Now we are ready to create a web site using our new template. Anytime you want to use the template to create a new page, right click on the TEMPLATE.html file in the Folder View and choose Copy. Then click in a blank area in the Folder View and choosePaste. Right click on the newly created file (which would be something like TEMPLATE_copy(1).html) and choose Rename to rename the file to a new name. Be sure to rename it exactly as the filename you specify in your navigation menu for the page you wish to create. To start with, we’ll name this new file index.html since we’ll start with the main page of the site. This is the page that visitors will see when they type your domain name into their web browser. Double click on this new file to open it.

Click in the lower right cell which is the main content area (in our example, it’s the white boxed area under the top banner). Now just type in anything you would like to say in this area. You can also make more links in the same way you did when creating the Navigation Menu area.

Inserting Images

If you wish to insert an image, you can click on the Insert Clip Art or the Insert Picture From File icon from the bottom toolbar. If you want to re size your image, you can click on the image and then drag one of the handles. If you right click on an image and choose Picture Properties, you can choose how the image will be displayed and how close text will appear to the image. It’s also best to click the General tab and type in a brief image description in the Text box under Alternative representations. This helps those who use screen readers to know what is on your page, even if they can’t see the images.

Inserting a Counter

You can insert a counter at the bottom of your page. Just scroll down to the bottom and click outside the table area at the bottom. Choose your font size, style, color and choose to center your text (use the center text icon in the 2nd toolbar on the top).

Type in the words: visitors since and then the date you plan to upload your site. Now click to the left of the word visitors to place the cursor before it. Click on the Code view button at the bottom of the screen.

You’ll see a lot of HTML code but find the cursor placed to the left of the word visitors. Press the ENTER key twice, then the up arrow once to get the cursor in the black space. Here you can add the code for your visit counter.  Click the Design or Preview view to see your changes. Note that your counter may or may not appear on the page. It will appear properly when you have uploaded your web site. Be sure to save your page and close it when done. Note that you can also have more than one page open if you choose. Be sure to mark the Task for Home Page as complete to keep track of your project.

Creating A Contact Page With An Email Form

Let’s create a contact page. Create a new page from the template file as mentioned previously. Rename it contact.html or whatever you named the file when you created your navigation menu.

Type the word Contact Me at the top of the main content area. You might want to use slightly larger than normal text, maybe a different color, and/or maybe bold text. This text should be centered but you could have it positioned anywhere you like. Note that when you press the ENTER key, the font style does not change back to it’s previous state. You’ll have to reset the font color, style and position again for any other text you wish to add.

It’s best to have an introduction, such as reminding your visitors that they must type in an email address or their mail will not be sent. This is a safe guard that the email bot uses to ensure valid submissions.

Click on the Design view at the bottom of the screen. Right click inside the form and select Table Properties. Choose Center for the Layout Alignment. You now have an email form which people can use to contact you.

Be sure to mark your Contact page task as complete to keep track of your project.

Creating Your Other Pages

You now have all the skills to create your other pages in FrontPage. Be sure to save your work as you go along. We encourage you to experiment with some of FrontPage’s other features. Do keep in mind that any webbot, SharePoint or Database type feature will not work with Active Web Hosting’s servers. Once you complete a page, be sure to mark it’s task as complete so that you can keep track of your project.

Uploading And Viewing Your Web Page

Once you have completed your web site, you can upload it from within FrontPage. Insert the necessary server details when clicking on the upload button.

NOTE: If you have any files you do not want to upload to your web server, such as your TEMPLATE.html file, right click on the file in the Folder view and select Don’t Publish. This puts a red circle with an x by the file to indicate that the file will be skipped when uploading it to your web server.

Courtesy of http://www.activewebhosting.com..

For free server you can login to www.agilityhoster.com and for domain, www.co.cc

Have fun creating cyber space