Microsoft ® Office FrontPage ® 2003 Training Create a Web site with FrontPage Your STS, Tom Redd,...

Microsoft® Office FrontPage® 2003 Training

Create a Web site with FrontPage

Your STS, Tom Redd, presents:


Course contents

• Overview: Create a Web site

• Lesson 1: How to plan your content

• Lesson 2: About Web sites and Web servers

• Lesson 3: About FrontPage Web sites

• Lesson 4: How to create a FrontPage Web site

• Lesson 5: Manage a site using different views

• Lesson 6: How to create a Web page


So you want to create a Web site. That's great — a Web site can be a powerful and efficient way to communicate with people.

Overview: Create a Web site with FrontPage

This course will teach you how to create a Web site using FrontPage 2003. It will also teach you things you should know before creating one.


Course goals

• Understand basic concepts like Web sites, Web servers, and publishing.

• Understand what a FrontPage Web site is and the advantages it provides.

• Decide between the two kinds of FrontPage Web sites: disk-based and server-based.

(Continued on next slide)


Course goals, cont’d.

• Create a FrontPage Web site.

• Create Web pages for a site and give them a layout, text, pictures, and so on.

• Manage a FrontPage Web site by using different views.

Lesson 1

How to plan your content


How to plan your content

When you're planning a Web site, it's important to establish the goal of the site first.

The designer of the site shown here established a goal, which was to generate $500,000 in sales through online orders.

After looking at the site, do you agree it was designed with this goal in mind?


Tips for creating a goal

• Make sure you know who your audience is.

• Make sure the goal is specific and quantitative.

• Keep your goal simple—about one sentence long.


Sketch site structure

Once your site's goal is defined, sketch out the structure of your site beforehand.

Use a pencil and paper (or a diagramming tool, like Microsoft® Visio®) to draw boxes for pages and arrows for links. Remember to keep your goal in mind as you do this.


Sketch a common layout

After you've sketched a map of your site, it's time to start sketching a common layout for each of your pages.

You could start designing the page layout using FrontPage, but we recommend keeping it on paper at this point. Pencil and paper can be easier to change, as noted before.


Things to consider while sketching layout

Here are some of the things to consider as you sketch the layout:

• Should each page have a common header and footer?

• Should the site have a consistent method of navigation?

• Are there any marketing requirements for the site? Legal requirements?


Sketch a common layout

Using your sketches as a model, you'll eventually use FrontPage to design Web pages in HTML. You might use a table for the skeletal structure, or layout, of the page.

Once the layout is defined, you can fill it with content. For example, you'll want to add text, hyperlinks, pictures, and interactive buttons.


Test 1, question 1

It is beneficial to sketch a map of your Web site before you create it because: (Pick one answer.)

1. It is easier to change a site on paper than it is to change it after it has been built.

2. It helps to improve your drawing skills every now and then.

3. Sketching out a map can make it easy to find a page when you need to start designing it.


Test 1, question 1: Answer

It is easier to change a site on paper than it is to change it after it has been built

Erasing boxes and arrows is a lot easier than changing or deleting pages that are already built.


Test 1, question 2

Which of the following is an example of a good goal for a Web site? (Pick one answer.)1. "To create a site that lets customers order products,

lets employees access internal and confidential documents, and lets vendors submit orders."

2. "To present our product catalog online, thereby saving $10,000 a month in printing and shipping costs."

3. "The bottom line is that this Web site should make my boss and coworkers happy."



"To present our product catalog online, thereby saving $10,000 a month in printing and shipping costs.“

Yes. This goal is specific, and it is also quantifiable.

Lesson 2

About Web sites and Web servers


About Web sites and Web servers

A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks.

Web sites can also contain word processor documents, multimedia, scripts, and databases—any kind of file.


Web servers, defined

A Web site cannot be seen by others unless it is published to a Web server.

A Web server runs software that "serves" HTML pages and associated files when requested by a client, such as a Web browser.


Where to find a Web server

Where do you find a Web server? That depends on how widely available you want your site to be:

• For the World Wide Web, find a hosting company.

• For a company’s Intranet, see the IT department, your manager, or the nearest computer guru.


More information about Web servers

When looking for a hosting company, cost, reliability, storage space, customer service, and security are good things to compare.

One additional thing to look for is whether or not the hosting company supports FrontPage Server Extensions from Microsoft or Microsoft SharePoint® Services.


How to put your site on a server

To put your site on a Web server, you publish it. Publishing generally means copying all of the files to a remote location on a server.

In most cases, the remote location is either an HTTP path or an FTP path. The path you use depends on what technologies your server supports.

To find out which one your server supports, contact your hosting company, or your IT department.


Web server details

Once you find a Web server and determine the remote location for your site, there are other important things to know before you create your Web site:

• URL

• The correct file name for your home page

• User name and password

• Server restrictions


Suggestions for practice

1. If you want your site on the World Wide Web, search for a hosting company using your favorite search engine. Or, go to the Locate a Web Presence Provider site.

2. If you want your site on your company's intranet, contact your IT department, your manager, or the nearest computer guru.

3. Once you've found a server for your site, make sure to get the URL, publishing destination, user name, password, and the correct file name of the home page. It's also important to know if there's a file size limit.

http://office.microsoft.com/search/redir.aspx?AssetID=XT010501271033&CTT=5&Origin=RP061790771033


Test 2, question 1

Other people will be able to see your Web site on the World Wide Web if: (Pick one answer.)1. You do nothing else but create your site on

your own hard drive.

2. It is available on a Web server.

3. The site is interesting to look at.



It is available on a Web server.

You got it. A Web server has special server software that will make your pages and files available on the Web.


Test 2, question 2

If you need to set up a Web site on an intranet, you should: (Pick one answer.)

1. Pay a hosting company to host your site inside your network.

2. Pay a hosting company to host your site outside of your network

3. Ask someone in the IT department.



Ask someone in the IT department.

Yes, that's right. The people who maintain your company's network, typically called the IT department, are the right people to contact. Other potential contacts could be your manager, or the nearest computer guru.

Lesson 3

About FrontPage Web sites


About FrontPage Web sites

FrontPage is a Web site design tool. But it’s also a Web site management tool. You can use it to:• Add, rename, delete, or move

around files (without doing it in Microsoft® Windows® Explorer).

• Fix problems using special reports, like the broken hyperlinks report.

• Publish a Web site using FrontPage.

(Continued on next slide)


About FrontPage Web sites, cont’d.

The important thing to remember is that these management features are not available when opening and working on single HTML files. They are only available when you open and work on a FrontPage Web site.

What is a FrontPage Web site?


What is a FrontPage Web site?

A FrontPage Web site is a site created in FrontPage. It contains Web pages, graphics, documents, multimedia—almost any kind of file you want.

A FrontPage Web site also contains hidden folders and files that support FrontPage-specific functionality. These hidden items are the FrontPage metadata for your site.

When you open a FrontPage Web site, the Web Site tab appears at the top.


About FrontPage metadata

FrontPage metadata is information about your FrontPage Web site that makes managing the site possible.

This data is used by FrontPage to do all of the great management features we spoke of earlier (creating and moving files, running reports, publishing, and so on).


Two kinds of FrontPage Web sites

There are two kinds of FrontPage Web sites:

• disk-based sites • server-based sites


Disk-based Web sites

A disk-based Web site is a site you create on your local hard drive.

After you design and work on the site, you can later publish it to a remote location like a Web server.


Server-based Web sites

A server-based Web site is a site you create and work with directly on a Web server.

As soon as you save your changes, they will be seen immediately on the Web.

Note To use a server-based site, your FrontPage Web site must be on a server running FrontPage Server Extensions or SharePoint Services.


Test 3, question 1

What is one of the major advantages of using a disk-based Web site? (Pick one answer.)

1. You can test features like FrontPage hit counters if your site is disk-based.

2. Web sites that are disk-based are often more eye-catching.

3. You can edit and test a disk-based site before other people see it on the World Wide Web.



You can edit and test a disk-based site before other people see it on the World Wide Web.

Yes, that's it. A disk-based Web site is stored on your local computer. Since it is stored locally, you can test most of the site functionality before it is available to the Web.


Test 3, question 2

A FrontPage Web site: (Pick one answer.)

1. Consists solely of HTML files and pictures.

2. Is a site created in FrontPage that contains FrontPage metadata.

3. Is a site created in any other product besides Microsoft FrontPage.



Is a site created in FrontPage that contains FrontPage metadata.

Yes, that's it. The FrontPage metadata is not visible while you are working in FrontPage, but it helps FrontPage manage your site.

Lesson 4

How to create a FrontPage Web site


How to create a FrontPage Web site

So far you’ve learned how to plan your content, where to find a Web server, and the differences between disk-based and server-based sites.

Now it's time to dive in and actually create a FrontPage Web site.


New task pane

The place to create a new FrontPage Web site is on the New Page or Web Site task pane. This task pane offers two ways to create a site:

• Click the One page Web site link.

• Click the More Web site templates link.


Specify a location

If you choose to create a site with a template, you can choose the template you want on the left side of the Web Site Templates dialog box.

(Continued on next slide.)


Specify a location, cont’d.

Then, do one of two things:

• To create a disk-based site, specify a location on your computer. For example: C:\My Documents\My Web Sites\MyWebSite.

• To create a server-based site, specify a location on a Web server that is running FrontPage Server Extensions or SharePoint Services. For example: http://MyServer/MyWebSite.


Convert a Web site

If you made a site using another program, you can convert it to a FrontPage Web site.

To convert a Web site made in another program, click Open Site on the File menu. After you specify the folder you want to convert, FrontPage will ask you if you want to add information to that folder.



1. Create a disk-based Web site using a template.

2. If you have access to a server running FrontPage Server Extensions or SharePoint Services, create a server-based site.

Online practice (requires FrontPage 2003)

http://office.microsoft.com/training/Training.aspx?AssetID=RP011140691033


Test 4, question 1

If you want to create a server-based site, which of the following is required? (Pick one answer.)

1. A Web server running FrontPage Server Extensions or SharePoint Services.

2. A Web server that is running the FrontPage program.

3. A Web server running Microsoft Office.



A Web server running FrontPage Server Extensions or SharePoint Services.

Exactly. If a Web server is running one of these technologies, you can create a server-based Web site


Test 4, question 2

If you need to create a disk-based site, which of the following would be the correct path to specify? (Pick one answer.)

1. http://MyServer/MyWebSite

2. http://MyServer/MyWebSite/MySubSite

3. C:\My Documents\My Web Sites\MyWebSite



Is a site created in FrontPage that contains FrontPage metadata.

Yes, that's it. The FrontPage metadata is not visible while you are working in FrontPage, but it helps FrontPage manage your site

Lesson 4

Manage a Web site using different views


Manage a Web site using different views

Now that you know how to create a FrontPage Web site, you should know about the two kinds of views you can use to manage and design the site:

• Web site views

• Page views


Folders view

When you open a site and click the Web Site tab, the Web site view buttons are displayed at the bottom.

In this illustration, the Folders view is selected. This view lets you see the files and folders that make up your FrontPage Web site, much like Windows® Explorer.


Remote Web site view

The Remote Web site view is the place to go when you need to publish your Web site.

The local version of the site will appear on the left.

The remote site will appear on the right.


Reports view

Another powerful view is the Reports view. It contains many different diagnostic reports that you can run against your site.

Three of the most helpful troubleshooting reports are:

• Unlinked files report

• Slow pages report

• Broken hyperlinks report


Reports view, cont’d.

When you open a page or create a new one, you are working in one of the Page views: Design, Split, Code, and Preview.

When a page is open, these views are accessed by buttons at the bottom, as shown here.


Split view

The Split view splits the view in half. The top half displays the HTML code for the page, and the bottom half shows the page as it looks in the Design view.

Advantages:

• Design accuracy

• Flexibility

• Education


Code view

The Code view displays the HTML code for the page. If you are an experienced Web designer, you might feel more comfortable in this view.


Preview view

Finally, you can preview your page in the Preview view. Preview view lets you see what the page will look like when rendered in a browser. Things like dashed lines for tables won't appear in this view.



1. Open the Web site you created earlier.

2. Click the Web site tab, and then explore the various Site views.

3. Open a page, and then explore the various Site views.




Test 5, question 1

Which of the following is not a Page view? (Pick one answer.)

1. Split view

2. Code view

3. Normal view



Normal view

Correct. Normal view was found in previous versions of FrontPage. And it's a popular view in Microsoft Office Word and PowerPoint. But in the current version of FrontPage, this is not one of the Page views.


Test 5, question 2

What is the primary difference between Web site views and Page views? (Pick one answer.)1. You use Web site views only for running site-wide

reports. You use Page views when you need to work on an individual page.

2. Web site views let you work with the entire site as a whole. Page views are for when you want to work with individual pages.

3. Web site views let you work on a page in your site. But Page views only let you work on specific portions of the page.



Web site views let you work with the entire site as a whole. Page views are for when you want to work with individual pages.

Correct. That is why the Web site views are available when clicking the Web site tab. And the Page views are available when opening a page.

Lesson 6

How to create a Web page


How to create a Web page

You learned how to navigate through the FrontPage program by using various views. But what about creating and designing Web pages?

This lesson will cover:

• Adding a page layout

• Formatting text

• Inserting hyperlinks and pictures


Add a page layout to the page

The layout of a Web page is the skeletal structure of the page. It lets you arrange and position text and graphics in a grid-like fashion. A popular way to create a layout is to use an HTML table.

The quick and easy way to add a layout is to choose a ready-made layout from the Layout Tables and Cells task pane


Add text and format it

We won't go into too much detail on how to add text to the page.

However, after your text is on the page, you'll want to apply a style to it:

1. First select some text.

2. Then click the Style box.

3. And then select a style in the list to apply it.


Insert hyperlinks

It's easy to add hyperlinks to your pages by using FrontPage. The illustration here shows you how to get started.

1. First you select either some text or a picture.

2. Then you click the Insert menu.

3. And then you click Hyperlink.


Insert pictures

Picture this: a page with no pictures. What? That's no fun. Nowadays, pictures are pretty mandatory in keeping your audience's attention.

To insert a picture that you have on your computer:

• Click the Insert menu, point to Picture, and then click From File.


Preview in a browser

After you're done filling your layout with text, pictures, and hyperlinks, you should always use the Preview in Browser command to make sure that it looks okay in a Web browser.



1. Create a new Web page, and give it a layout.

2. Add images and text to the page.

3. Format text with a style.

4. Insert a hyperlink.

5. Save the page, and preview it in a Web browser.




Test 6, question 1

Which of the following can you use to create a layout for a page?

1. Tiled background images, frames, or Cascading Style Sheet Positioning.

2. Tables, frames, or Cascading Style Sheet Positioning.

3. Guides, tables, or frames.



Tables, frames, or Cascading Style Sheet Positioning.

Correct. You can use any of the these three to create a layout structure for a Web page. You can even use them in combination with each other if you want.


Test 6, question 2

You've got a picture on your computer and you'd like to insert it on a Web page. How should you do this? (Pick one answer.)

1. On the Insert menu, point to Picture, and then click From File.

2. On the Insert menu, point to Picture, and then click New Drawing.

3. On the File menu, click Import. Then select the picture and click Add File to insert it



On the Insert menu, point to Picture, and then click From File.

Yes, you're right. This is the way to insert a picture. Something handy to note: If the picture is already in your Web site folder, you can drag it onto the page from the Folder List.


Quick Reference Card

For a summary of the tasks covered in this course, view the Quick Reference Card.


Date post:	22-Dec-2015
Category:	Documents
Upload:	rosemary-wright
View:	218 times
Download:	0 times