With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage...

With

Alex Conger – President of Webmajik.com

FrontPage 2002

Level I (Intro & Training)

FrontPage 2002

Level I (Intro & Training)

FrontPage Topics CoveredFront002/Introduction to FrontPage 2002What is FrontPage 2002?Creating new PagesPage PropertiesThe FrontPage 2002 InterfaceFrontPage 2002 workspaceChanging WindowsCreating new PagesPage PropertiesToolbarsThe Standard ToolbarAdding textEditing text

Creating Bulleted listsImagesWorking with imagesAdding imagesUsing Jpg filesUsing Gif filesLinksUsing HyperlinksUsing Email LinksTables and CellsWorking with TablesWorking with CellsProductivityWorking With Web PagesUsing text and GraphicsLinking PagesPublishingPublishing a Site

http://hpbs4825.boi.hp.com/teams/training/pages/other_training/images.htm

Part One:How FrontPage Works

Graphics are saved in the images folder.The index.htm file is the home page.

When you create a new Web in When you create a new Web in FrontPage, it makes folders/directories FrontPage, it makes folders/directories and starts the structure for your Web and starts the structure for your Web

site.site.

Selecting a ViewSelecting a View

– You can look at a FrontPage Web site in several different views.

Page: Edit a web page

Folders: organize files and folders

Reports: analyze your web and manage its contents

Navigation: design the web site’s structure

Hyperlinks: view hyperlinks to and from any page

Task: create and manage tasks

Double click the index.htm file in a Web to view a home page.

You are now in Page View.

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta http-equiv="Content-Language" content="en-us"><title>Home Page</title><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"></head>

<body></body>

</html>

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta http-equiv="Content-Language" content="en-us"><title>Home Page</title><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"></head>

<body></body>

</html>

Selecting a ModeSelecting a Mode

– Click on Preview tab. This option allows you to view your web pages as if they were displayed in web browser.

– Click the Normal tab to return to Normal Mode which allows you to edit the web page.

– Click on the HTML tab at the bottom of the screen to view the HTML source code that creates the web page.

Front Page ToolbarsFront Page Toolbars

Title bar

Menu bar

Standard bar

Formatting bar

FrontPage is a Microsoft product with Toolbars that look similar to Microsoft Word and other Microsoft programs.

Part Two: Setting Up a Simple Page

It is easy, as long as you follow a few basic steps.

1. Open FrontPage

3. Select Empty Web from the window that appears on the right of the screen.

Create a FrontPage WebCreate a FrontPage Web

2. Choose File > New >

Page or Web.

4. In the Web Site Templates window select:

One Page Web.

5. Click in the Specify the location of the new web

box and type the name of the folder for your

page:

C:My Documents\MyWebs\yournameweb

Note: You can save your Web folders anywhere

you want by clicking Browse and selecting the

new location.6. Click OK and FrontPage will create a new empty web site.

7. Click on Folders in the Views pane

The index.html page is the home page for your Web site. It will open first when your Web folder is on a Web server and people go to the Web address (URL).

You can see the folders created for your web. The images folder is where FrontPage can save the graphics

for your pages. The index.htm file is your first page.

8. Double click on index.htm to open the blank page.

Give Your Page a Title

1. Go to File > Properties

2. Select the General tab

3. Type the title of your page in the title box.

The title will become the bookmark title and will

show at the top of the browser page.

Set Page Properties

Set Colors & Background Select the

Background tab

Select an image for background or pick a color.

Pick colors for text

Pick colors for hyperlinks.

Use a background from another page.

You can select all the colors and the background separately.

OR

Select a ThemeClick Format > Theme to select from themes like the example below.

This is a quick way to start a Web page with coordinated colors and background.

Apply the Theme to:• All pages or•Selected page(s)

Save the Page

Click the Save button on the Standard toolbar.

After setting up page properties:

• Right click on the page and select Page Properties

To quickly access Page Properties to make changes:

Remember to save your page frequently as you work.

Part Three: Creating the Content

What do you want to show and tell?

Create Text

Use any Word processor or text editor to create content:

Microsoft Word Notepad

Save the document, and in FrontPage select Insert > File and open your document.

or Use CTRL + C to copy and

CTRL + V to paste the text into FrontPage Editor.

You can type directly into Front Page.

or

Format Text

The safest fonts to use for Web pages are The safest fonts to use for Web pages are

ArialArial and and Times New RomanTimes New Roman..

Font typesFont typesFont colorFont colorFont sizeFont size AlignmentAlignmentHeading Heading

& Paragraph & Paragraph stylesstyles

Bold & Bold & ItalicsItalics

Bullets Bullets Numbered ListsNumbered Lists

IndentIndent

Toolbar Features

Save the file & click on Preview to see how the page will look on the Web.

Create a table

Create a hyperlink to another Web site or a specific Web page

Insert an image

Check spelling

Insert a component

Undo

Copy & paste a format style

Insert Images

1. Place the cursor where you want the image

2. On the menu, click Insert > Picture > From File.

3. Find the image file and click Insert.

4. To insert Clip Art in your page, click on Insert > Picture > Clip Art

Adjusting Images3. Click on the picture in your Web

page to select it.

Black boxes appear at the edges.

4. You can reposition or resize the picture right on the page

5. Right click on a picture & choose Picture Properties to open the Picture Properties window for more options for adjusting images.

Picture Properties - General FrontPage accepts many

different types of graphic files but Web browsers can use 2 types: gif & jpeg

FrontPage converts image file types automatically for you when the page is saved.

Here you can manually select the type you prefer for a picture.

Picture Properties - AppearanceClick on the Appearance tab for

the following:

Set Text Wrapping & Alignment

Put a border around an image

Change the size of an image.

When you adjust picture size manually in the Web page, these numbers will automatically change.

Saving Your Page w/ ImagesWhen you select a picture by clicking on it in your page,

an expanded Picture Toolbar appears.

After adjusting an image, it is very important to Resample the image. FrontPage reduces the file size and resaves your image. (If you choose not to , you will have a small image that could be 2 megs)

Rotate & Flip

CropContrast & Brightness Thumbnail

Make transparent

Embedding Images Part 1

When you save a page for the first time after adjusting and resampling images, the Save Embedded Files window appears.

1. Click on Change Folder

2. Select the images folder

Embedding Images Part 2

FrontPage should remember to save all your page’s embedded images in the images folder from now on when you work on this Web page

How to save images from the web

1. Find the image that you like.

2. Right click on the image.

3. Click on Save Image As..

4. Navigate to a folder on your computer.

5. Rename the image if needed and Save.

Insert a horizontal line• Place the cursor where you want the line.• Go to Insert > Horizontal Line.• The horizontal line is a nice way to separate

parts of your web page.

3 Ways to select a background graphic3 Ways to select a background graphic3 Ways to select a background graphic3 Ways to select a background graphic

Find a graphic saved on your hard drive. or

Look for a graphic on the Web. Type the URL (Web address) here: or

Search for a background graphic in Clip Art.

Click on OK

Find a graphic saved on your hard drive. or

Look for a graphic on the Web. Type the URL (Web address) here: or

Search for a background graphic in Clip Art.

Click on OK

Part Four: Creating Links

Make connections to target areas on your pages, other Web sites, and email addresses.

Make Web LinksCreate a Text Link1. Type the text to identify what the link is and

highlight it.

2. Click on the Link icon on the Toolbar.

3. Select Existing File or Web Page

4. Locate the path to the file or copy the URL of your link.

4. Click OK.

Save the file and click on Save the file and click on Preview to test the link.Preview to test the link.

Create Email Links

1. Type the name of the person or the email address in the Web page and select it (highlight).

2. Click on the Link icon on the Toolbar.3. Select Email Address

and type the email address.

FrontPage adds the mailto: part of the address automatically.

3. Click OK

When the link is clicked When the link is clicked on the Web page, an email on the Web page, an email message box will pop up.message box will pop up.

Set Internal Links - TargetsCreate a Target/Bookmark

1. Place your cursor where you want the link to go to.

2. On the Insert menu, Click Bookmark.

3. Give the bookmark a name.

4. Click OK.

Create an Internal Link

5. Go to the text for your link and highlight it.

6. Click on the Link icon.

7. Select Place in This Document

8. Click on the drop down menu for Bookmarks and select in the list.

9. Click OK.

Part Five: Inserting Tables

Tables can help control the alignment of images and text on a Web page.

Set up a Table

1. Select the number of rows and columns.

2. Right click inside the table and select Table Properties.

3. Select Layout Alignment.4. Set Cell spacing & padding5. Choose a border width or 0

for no border.6. Set table width (how much

of the page it will cover).7. Select a color or image for

Table background if desired.

Place the cursor where you want the table Place the cursor where you want the table and click on and click on Table Table on the toolbar.on the toolbar.

width.

Change Cell PropertiesYou can change the settings for all the Table, a Row, or You can change the settings for all the Table, a Row, or

an individual Cell.an individual Cell.

1.1. Put the cursor inside the Put the cursor inside the TableTable, , CellCell, or , or RowRow you want to you want to change and change and right clickright click..

2.2. Select Select Table propertiesTable properties..

3.3. Click on the correct tab – Click on the correct tab – TableTable, , RowRow, , CellCell and make the and make the changeschanges

You can select a background You can select a background color for individual cells.color for individual cells.

Part Six: Special Features

FrontPage has many additional features to help make creating Web pages easier

TemplatesWhen you click on File > New > Page or Web, you can select from a variety of FrontPage Page Templates or Web Site Templates

Components

Click on Insert > Component to see a list of advanced items to add to your pages.

In Conclusion…I think you will agree that although

FrontPage is not the only editing tool available, it is a fast and easy way to

add and manage web content.

Alex Conger For Phone Support: (208) 870-4332

Toll Free: 1-866-441-8018

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage...

Documents

Transcript of With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage...