FrontPage Express

By John G. Summerville Ph.D.©, RN

Hopefully you will do better than this.

Objectives

1. Will be able to use FrontPage on your own with support.

2. Creates Web Pages with desired text, images, hyperlinks, and tables.

3. Continues to develop skills and knowledge in Web page design and uses.

Outline of Content• Menu & Tool Bar Orientation• Save the Web Page• Text, sizing, aligning & coloring• Horizontal line inserting & customizing• Move text & images• Table inserting & uses• Bookmark, jumping to a spot on the same page• Viewing the Web Page in the Browser (IE)• Images inserting, aligning, & adjusting• Hyperlinks to other Web Pages

Menu Practice

You have 2 minutes to click the Menu’s = File, Edit, View, Go, Insert, Format, Tools, Table, Window, Help…and see what they do. Click ‘Cancel’ when done with each item or go to the ‘Edit’ menu and select ‘Undo’.

Tool Bar Practice

Place the cursor over the buttons on the tool bars…now click each

one.

Place the cursor over the buttons on the tool bars…now click each

one.

Place the cursor over the buttons on the tool bars…now click each

one.

Place the cursor over the buttons on the tool bars…now click each

one.

You have two more minutes to place the cursor over the buttons first then click them to see what they do. Use the ‘Edit’ undo after each individual button.

Save the Web Page 1

First click ‘File’ and select ‘Save As’.

Save the Web Page 2

Type a Title here. Then click ‘As File’.

Save the Web Page 3

Select the location to save your file. Select the floppy for this workshop.

Save the Web Page 4

Click here to create a folder which is highlighted, just type a name for the folder.

Save the Web Page 5

After naming the folder open it.

Save the Web Page 6

Type a Title here. Then save it.

Text 1

Type in your Course Number, Course Name, your name and the semester.

Text Headings

Highlight the first line, then click the down arrow and select ‘Heading 1’.

Text Sizing

Here is what happens.

Click here to make it smaller.

Click here to make it bigger.

Text Bold, Italics, Underline, Alignment

Click here to make it Bold.

Click here to make it Italics.

Click here to underline it.

Click here to center it.

Text Font Selection

Click here to select a different font. Slide down or up to click on one to select.

Text Coloring

Click here to choose a color for your Title. Now just select one or click ‘Define..’ and create a color.

Text Alignment

You can see the color for the title. Click on the Name anywhere and click the center alignment button.

Horizontal line 1

Click in at the end of your name and now click the ‘Insert’ menu and select ‘Horizontal line’.

Horizontal line 2

Here is the horizontal line. Now right click the line.

Horizontal line 3

Slide down and click ‘Horizontal Line Properties’

Horizontal line 4

Click this arrow and select a color for the line. Now click ‘Ok’.

Increase the height to 4 pixels.

Horizontal line 5

Here is the line in color. Click the cursor at

the end of your name and then push the ‘Enter’ key on the keyboard.

Move text 1

Highlight this phrase, click on it, hold down the mouse button, drag it to the line spot under your name.

Move text 2

Let go of the mouse button and now the title is in good order.

Table Insertion 1

Second click on the ‘Table’ button, then click, hold, & drag over the 4 columns and 3 rows that are in blue.

First place your cursor here and click the mouse to indicate where you want a table.

Table Insertion 2

This is the table that will appear. The borders are invisible on a web page when it appears like this.

Table Insertion 3

Click in the cells and type these items for your course.

Table Properties 1

Right click in any cell of the table and select ‘Table Properties’.

Table Properties 2

Click the up arrow for ‘Border Size’ and increase it to one.

Click ‘Specify Width’ and then click ‘Ok’.

Click ‘Specify Width’ and then click ‘Ok’.

Table Properties 3

Now the table has borders that will be visible.

Table Remove Cells 1

To remove columns, slide cursor over the top of the table until you see a ‘’ then click, hold and drag to include the second column.

Table Remove Cells 2

Push the ‘Delete’ key or the ‘Back Space’ key and the columns are gone

Table Coloring 1

To color the whole table, place cursor in any cell and right click and select ‘Table Properties’

Table Coloring 2

Select a color from here or choose ‘custom’ and create your own color.

Table Coloring 3

Now all the cells are Silver. You can color individual cells using the right click and ‘Cell Properties’.

Make text an Email link

Select a color from here or choose ‘custom’ and create your own color.

Make your name an email hyperlink. First highlight your name, then click the ‘Hyperlink’ button.

Email link 1

Click the ‘World Wide Web’ tab, then select the ‘mailto’ item from the drop down menu.

Email link 2

Type in your email address without spaces in the typed line. Then click ‘Ok’.

Email link 3

Now you can see the lettering is blue in color and underlined. This is the default look for a hyperlink on any web page.

When you hover the cursor over any hyperlink you can see the address that it is linked to down here on the ‘Status’ bar.

Breath, Breath, take a Breath

Bookmark a spot on this Page

Click your cursor in front of the course name. Now click the ‘Edit’ menu and select ‘Bookmark’.

Bookmark 1

Type in a name for the bookmark (top).

Bookmark 2

Here is the Bookmark you created to this spot on this Web page.

Bookmark 3

Place your cursor here and click and now push ‘Enter’ on the keyboard 5 or so times.

Bookmark 4

Type in ‘To the Top’ meaning click here and go to the top of the page. Highlight the whole phase, and click the Hyperlink button.

Bookmark 5

Click the ‘Open Pages’ tab.

Click the down arrow and slide down and click ‘top’. Click ‘Ok’

Save your Work!!!!

Notice the ‘To the Top’ is blue and underlined…it’s now a hyperlink on this page.Save your work, click here. From now on Save regularly, without a reminder.

View Page in Browser (Internet Explorer)

Now to see your work open ‘Internet Explorer’ without closing FrontPage Express. Click ‘File’ slide down and click ‘Open’.

Browser 2Click the ‘Browse’ button.

Click here and go to the folder you created.

Browser 3

Click the File you created and then click ‘Open’.

Browser 4

Here is what your Web Page will look like . Scroll down to the ‘To the Top’ hyperlink.

Browser 5

Hover the cursor over the link and see the address below. Now click it.

Hover the cursor over the link and see the address below. Now click it.

Browser 6

You don’t see the Bookmark, but the page is repositioned like this.

Images Insertion 1

Place your cursor where you want to have an image.

Then click the ‘Insert Image’ button.

Images 2

For image files that are not in the Clip Art collection, click ‘Browse.

You can insert clip art images, Internet images, or any images.

Images 3

Find your file on your floppy disk, select it and it is highlighted, and click ‘Ok”.

Images 4

I look fatter in this shot… well to change the size of the picture to your liking, click once on the picture.

Images 5

Now you see the little squares on the corners of the picture, click, hold, and drag one of the squares.

Images 6

Now it fits better on the page… and I look marvelous. To move the picture to the right side…

Images 7

With the squares visible indicating you have clicked on the picture, just click the ‘Align Right’ button.

Images 8

Click the ‘Align Left’ button and then click beside the picture. Now type some information. This shows how text will work around the picture.

Click the ‘Align Left’ button and then click beside the picture. Now type some information. This shows how text will work around the picture.

Hyperlinks to the Internet 1

Type in this text, highlight it, then choose Heading 3 from the down arrow near ‘Normal’.

First type in this text, highlight it, then choose ‘Heading 3’ from the down arrow near ‘Normal’.

Hyperlinks to the Internet 2

Click the cursor in below the ‘Links…’ , and type in the title and highlight it.Now click the ‘Increase Indent’ button.

Hyperlinks to the Internet 3

Click the ‘Hyperlink’ button.

Click the ‘World Wide Web’ tab.

Hyperlinks to the Internet 4

Click in here and type in http://nursing.mercer.edu Click ‘Ok’.

Hyperlinks to the Internet 5

You now have a hyperlink to the college of nursing on the web. Notice when you hover the cursor over the link, the status bar shows the address.

Page Properties

Click ‘File’ and select ‘Page Properties’.

Location and Title of the Page

Click the ‘General’ tab.

Here is the file location.

This is the title of the page that shows in the Browser Title Bar. (not the file name).

Notice you could click here and add sound or music to play when the page is loaded in the browser.

Background Images & ColorsClick the ‘Background’ tab.

Click the check box by the ‘Background Image’. Now click here and select an image that will appear in the whole page.

Click here and select a color for the background.

Create & Save A New Page 1

Create a New untitled page, click here.

Create & Save A New Page 2

Save it, so click ‘File’ and select ‘Save’ and click.

Create & Save A New Page 3

Type in ‘Syllabus’. Then click the ‘As File’ button.

Create & Save A New Page 4

Place your new file(Syllabus) in with the Course Page you have created.

Create & Save A New Page 5

Type in the title, center it and make it Heading 1 size. Save Now.

View all the Open Web Pages

Click the ‘Window’ menu and click on your course page.

Hyperlink to A New Page 1

Back on your main course page, highlight ‘Syllabus’

Hyperlink to A New Page 2

Highlight ‘Syllabus’ then click the ‘Hyperlink’ button

Hyperlink to A New Page 3Click the ‘Open Page’ tab.

Now click the ‘Syllabus’ Web page that is still open. Notice that the pages you link to need to be open to be in this list. Now click ‘Ok’.

See the New Hyperlink

Now ‘Syllabus’ is blue and underlined (hyperlinked). Go to the Browser now.

Try the New Hyperlink

Before you try the link, click the ‘Refresh’ button on the tool bar. Now the changes you saved are reflected on your web page.

Hopefully you won’t feel this way now..

Summary1. Text of various sizes, colors, and fonts can be

aligned in different positions.

2. Tables can be used to place text or pictures at particular points on a Web page.

3. Hyperlinks can be created to email, spots on a page, new pages, or to Web pages on the Internet.

4. Images that are static, animated, or in video formats can be added to a Web Page (sound too).

5. Backgrounds can have images or colors.

FrontPage with the tool bars closed.

End of the Line

Happy Summer !!