Website Designing Using Ms FrontPage

FrontPage 2003

Create a Web site with FrontPage

Coverage …How to plan your ContentsAbout Ms FrontPage WebsiteHow to create a FrontPage Web siteManage a Web site using different

viewsHow to create a Web page

Create a Web site with FrontPage

Lesson 1

How to plan your content

Create a Web site with FrontPage

How to plan your content

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

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

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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?

Create a Web site with FrontPage

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.

Lesson 2

About FrontPage Web sites

Create a Web site with FrontPage

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)

Create a Web site with FrontPage

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?

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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).

Create a Web site with FrontPage

Two kinds of FrontPage Web sites

There are two kinds of FrontPage Web sites:

• disk-based sites (local hosted)• server-based sites(global

hosted)

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Lesson 3

How to create a FrontPage Web site

Create a Web site with FrontPage

How to create a FrontPage Web site

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

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

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.)

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

Suggestions for practice

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)

Lesson 4

Manage a Web site using different views

Create a Web site with FrontPage

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

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

Suggestions for practice

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.

Online practice (requires FrontPage 2003)

Lesson 5

How to create a Web page

Create a Web site with FrontPage

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

Create a Web site with FrontPage

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

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

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.

Create a Web site with FrontPage

Suggestions for practice

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.

Online practice (requires FrontPage 2003)