FrontPage - WYSIWYG - Adam's HTML Planet - Tutorials and Tips on how to create websites using the WYSIWYG editor Microsoft FrontPage
 
FrontPage
Tutorials
Part Two
Adam's HTML Planet
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

So, to put some content on the pages ...

Let's keep it brief for these tutorials [they're only to get you started after all].
Double-click the Home Page icon [either in the 'Navigation' window or in the 'Folder List' to make it the active file in the main window [single-clicking 'Page' in the 'Folder List' will also do the job - you choose!].

Type
'This is the Home Page'

hit the 'Return' key and type [or copy and paste] this text from the FrontPage Help Files'

'About pages
Pages are the basic documents of the World Wide Web and are written in HTML (HyperText Markup Language). Pages can either be part of a web, or they can stand alone. However, many features in Microsoft FrontPage are only useful if you are working with a web. For example, a navigation bar, which lets a site visitor navigate to other pages in a web, is meaningless in the context of a single page.

HTML

An HTML page contains HTML tags, which are embedded commands that supply information about the page's structure, appearance, and contents. Web browsers use this information to determine how to display the page.

You do not need to know HTML to use Microsoft FrontPage. While you edit pages as you would in a word processor — typing and formatting text, and adding graphics, tables, and other page elements — FrontPage adds the HTML tags in the background. Your page is displayed to you as it would appear in a Web browser. However, you can display the HTML tags on the page, and if you are familiar with HTML, you can write and edit the HTML tags yourself.

Creating and designing pages

To help you create professional-looking and well-designed web pages, FrontPage provides several page templates so you can quickly create pages with a variety of layouts and functions. For example, you can use a FrontPage template to create a two-column page or a page with a search form. You can also use one of several themes to create pages with a consistent design. A theme contains unified design elements with a color scheme, including fonts, graphics, backgrounds, navigation bars, horizontal lines, and other page elements.

If you prefer to design and lay out pages yourself, you can start with a blank page:

Use frames, tables, or absolute positioning to precisely position text and graphics on a page.
Add page elements, such as text, graphics, page banners, tables, forms, hyperlinks, banner ads, marquees, hover buttons, time stamps, hit counters, and so on.
Format text by applying styles or using style sheets.
Animate page elements and set page transitions for lively pages.
Set the background color, picture, or sound.
Create your own page templates.'

With that done we need to format it so select the main heading ['This is the Home Page'] centre it as you would in a word processor with the 'Center' button on the Formatting Toolbar and then use the style drop-down list [also on the Formatting Toolbar] to choose 'Heading 1'. The sub-headings of the text can be selected and formatted as bold. the last 6 lines [from Use frames ...] form a list so select them and click the 'Bullets' button on the Formatting Toolbar. Once created, the bullets can be altered by selecting the list, right-clicking and choosing from the options presented.

Save your work so far and open the file 'page2.htm'. Get the following content on the page - by typing or copy/pasting it

'This is the Second Page' [format this as a level 1 heading as you did on the home page]

HTML stands for HyperText Markup Language, the standard for describing the contents and appearance of pages on the World Wide Web. HTML consists of pairs of opening and closing tags, with attributes and values in between. The tags describe each element on a Web page, such as a paragraph of text, a table, or an image.

For example, the HTML code <H1 align="left">Welcome!</H1> describes a left-aligned paragraph on the page containing the text "Welcome!", formatted using the Heading 1 style. The </H1> tag indicates the end of the paragraph.

Save your work so far and open the file 'page3.htm'. Get the following content on the page - by typing or copy/pasting it

'This is the Third Page' [format this as a level 1 heading as you did on the home page]

A navigation bar is a set of hyperlinks used for navigating a Web site. For example, a typical navigation bar might have hyperlinks to the web's home page and its main pages.

You can display a navigation bar on every page in your web so that your site visitors can always get to the web's main pages, quickly and easily.

Navigation bars can use buttons or text hyperlinks.

You can create a set of hyperlinks to use for navigation yourself — that is, you can create your own set of buttons and link them to the relevant pages in your web, and repeat this on each page where you want a navigation bar. Or, you can set up the navigation structure of your web, and then let FrontPage create the navigation bars for you. FrontPage maintains the navigation bars it creates; if you move or add a page, FrontPage updates (recalculates the hyperlinks in) the navigation bar accordingly.

FrontPage can generate navigation bars only when you work with a web, rather than with separate pages.

Save your work so far and then move on to the next tutorial where we'll be putting a graphic in and getting FrontPage to create a navigation bar with links to each of the pages


next tutorial