FrontPage - WYSIWYG - Adam's HTML Planet - Tutorials and Tips on how to create websites using the WYSIWYG editor Microsoft FrontPage

	Sign In Sign-Up

FrontPage Tutorials Part One		This site equipped with Key Launcher! The following launcher keys are available: Press the letter 'H' for: Home Page Press the letter 'S' for: Site Map
list of wysiwyg tutorials		next tutorial

Microsoft's FrontPage is a pretty good program for creating webpages and sites - although it does have a few idiosyncrasies - and these tutorials are designed to enable you to get going with the program and produce a webpage. Once you've got the basics the rest of it is down to using the program and getting used to how it works best. It's not a program I use often - but that's mostly just because prefer to use an HTML editor [i.e. AceHTML]. For anyone who just wants to knock out a webpage or several without worrying about the HTML coding it is ideal as you never even have to look at code if you don't want to. If, however, you want to tweak the code, or use cut-and-paste javascripts you will need to view the code and, here again, FrontPage does the business as it has quick access to the HTML code. Also within the program is preview of the page as it will appear in browsers.

So, let's get started ...

When you first open the program you will see a screen like this

Microsoft FrontPage opening screen

To start off a webpage first click File - New - Web and make a choice from the templates offered. For this set of tutorials choose 'One Page Web'. This will create a single web page with nothing on it. It will also open the Folder List bar at the left of the screen with a list of folders and files in your 'Web' [FrontPage-speak for website - idiosyncrasy no.1]. Double-click on the file-icon named 'index.htm' which will rename your new_page_1 to 'index'. This is a standard file name for the home page of a website [other common ones are 'default' or 'main'].

If we create a simple, 3 page, website with some text and a couple of graphics and link them together it should give you a handle on the basics.

The first thing we'll do is format the page to give a different background colour and make some changes to how the links will display.
Right-click on the empty page [this is how you go about making changes to elements of your webpages in FrontPage] and choose 'Page Properties ...' to bring up a dialog box with several tabs along the top. The only two we'll bother with for now are 'General' and 'Background'. The default option for the page title is 'Home Page' and we'll stick with that. It's the text that displays in the title bar at the top of the browser - we'll ignore everything else on this tab as it's of no interest to us right now.
Next, click the 'Background' tab. In the 'Colors' section click 'Background' - 'More colors' and choose an off-white [the hex-code displays at the top of the dialog box - the colour I used has the value Hex={FF,FF,CC}. Click OK back to the Page Properties dialog box. In the 'Hyperlink' drop-down list choose 'Navy', leave the 'Visited Hyperlink' as Automatic, but change the 'Active Hyperlink' to 'Aqua'.
Click OK and save the file.

So far, there's only one page so let's sort that out now.

The quickest way of adding 2 new pages is to click the 'Navigation' icon in the 'Views' bar at the left of the screen. This is very useful to view how the webpages of a site are connected. Click once on the 'Home Page' icon in the main window and then either click the 'New Page' button on the toolbar or right-click and choose New Page from the pop-up menu - do this twice to give 2 new pages. To give them a title [for the title bar] right-click them in the 'Navigation' window and rename them page 2 and page 3 [the hoem page is page 1 by default]. To rename the files themselves right-click them in the 'Folder List' and rename them page2.htm [with no spaces - no spaces in webpage names!] and page3.htm

We'll put some content on the pages in the next tutorial