Create a Web site with FrontPage FrontPage 2003 Tutorial (from compiled Microsoft lesson notes) Create a Web site with FrontPage

Create a Web site with FrontPage

FrontPage 2003 Tutorial(from compiled Microsoft lesson notes)


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.

Lesson 2

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.

Lesson 3

How to create a FrontPage Web site


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.


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.


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)

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

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.



Lesson 5

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.




Quick Reference Card

For a summary of the tasks covered in this course, view the Quick Reference Card and/or view the next few slides.




Plan your Web site

1.Determine goal. 1. Make it specific, if necessary. 2. Keep it short and focused. 3. Know your audience.

2.Sketch site structure.

3.Sketch a common page layout.


Create a Web site

If you made a Web site using a third-party program (for example, Macromedia® Dreamweaver® or HomeSite™), you can convert that Web site to a Microsoft FrontPage® Web site by clicking the Open Site command on the File menu. If you need to start from scratch, the following steps will guide you through the process.

1.On the File menu, click New.

2.In the New task pane, click either One page Web site or More Web site templates.

3.If you want a Web site based on a pre-made template, choose a template on the left. You can also choose the Empty Web Site template if you don't need a pre-made Web site.

Do one of the following:

To create a new disk-based site, click the Browse button. Browse to a location on your computer where you want to store the Web site. When you've found the location you want, click the Create New Folder button , type a name for the Web site, and then click OK. Click the Open button, and then click OK.

To create a server-based site, type the URL for the new Web site in the Specify the location of the new Web site box, and then click OK. Note that a server-based site can only be created on a Web server running FrontPage Server Extensions from Microsoft or Microsoft SharePoint® Services.




How to quickly create a Web page

Create a new Web page, and give it a layout

1. Along the left side of your screen should be the Folder List. It shows all the files and folders in the site. (If the Folder List isn't visible, click the Toggle Pane button .)

2. At the top of the Folder List, click the New Page button.

3. Name the new page, and then press ENTER.

4. Double-click the new page to open it.

5. Now close the Folder List to give yourself more room. To close the Folder List, click the Toggle Pane button .

6. Now make sure that the Layout Tables and Cells task pane is open on the right. If you don't see it, click Layout Table and Cells on the Table menu.

7. At the bottom of the task pane is a list of layouts to choose from. Click a layout to apply it to the page.



Modify the layout

1. If you'd like, you can change the alignment of the layout. In the Layout Tables and Cells task pane, under Table Properties, click the Align Center button .

2. Before changing the size of the layout, make sure to select the Auto-scale cells with table check box in the Layout Tables and Cells task pane. When you resize a table, this setting will allow you to automatically resize the cells inside as well.

3. Now you'll resize the layout table to suit your design. In the Width box, type a value in pixels, and then press ENTER. Do the same in the Height box.

Add an image

1. Click inside a cell.

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

3. At the top of the dialog box, click the Look in box, to expand it. Then browse your computer to find the picture.

4. Click the picture, and then click the Insert button.



Add text

1. To add text, you can type or copy and paste from other files or programs. Or, you can import text from a Microsoft Word document.

2. On the Insert menu, click File.

3. At the bottom of the dialog box, click the Files of type box to expand it, and then click Word 97-2003 (*.doc) in the list. 4. Locate the document on your computer.

5. Double-click the Word document to import the text.

Insert a hyperlink

1. Select either text or a picture.

2. On the Insert menu, click Hyperlink.

3. On the left, click Existing File or Web Page.

4. Select a page, and then click OK.



Add a background to the page

1. On the File menu, click Properties.

2. Click the Formatting tab.

3. Select the Background picture check box, and then click the Browse button.

4. Locate an image file on your computer. Select the image, and then click Open. Click OK.

Add a background image that is not tiled across the page

1. On the Format menu, click Style.

2. In the lower-left area of the dialog box, under List, make sure that HTML tags is selected.

3. In the Styles list, double-click body.

4. Click the Format button, and then click Border in the list.

5. Click the Shading tab.

6. In the Background picture box, type the path to the picture. Select no-repeat in the Repeat list. Click OK three times.



Additional information

More information about using tables for page layout

This course only touched the tip of the iceberg when it comes to using HTML tables for page layout. See these other training courses for more in depth information:

Course What you’ll learn HTML Tables I: Basic concepts Table basics: How to insert a simple HTML table, what table tags are like, and how to change

table properties HTML Tables II: Table and cell widths

More basics:

1.How HTML table and cell widths work, and how to make them look the way you want HTML Tables III: Design a page with layout tables

2.The fun stuff: How to use layout tables to design a page, and how to use a tracing image to start your layout HTML Tables IV: Format and touch up a page layout

3.Finishing touches: How to format a layout table, how to add color, style, and finesse like a pro, and how to make your table stretch

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





Quick Reference CardOther page layout techniques

You can also use layers for page layout. Frames is another technique you can use as well. Check out the following for more information:

Layers : http://office.microsoft.com/search/redir.aspx?AssetID=CH011224871033&CTT=5&Origin=RP011140741033

Frames : http://office.microsoft.com/search/redir.aspx?AssetID=CH063546461033&CTT=5&Origin=RP011140741033

More information on styles

If you would like to learn more about customizing your pages with cascading style sheets, check out these resources:

About styles : http://office.microsoft.com/search/redir.aspx?AssetID=HP030796931033&CTT=5&Origin=RP011140741033

Create a cascading style sheet : http://office.microsoft.com/search/redir.aspx?AssetID=HP052853551033&CTT=5&Origin=RP011140741033

Add a style to a cascading style sheet : http://office.microsoft.com/search/redir.aspx?AssetID=HP052853491033&CTT=5&Origin=RP011140741033

Link to an external cascading style sheet : http://office.microsoft.com/search/redir.aspx?AssetID=HP052853581033&CTT=5&Origin=RP011140741033

Apply a style : http://office.microsoft.com/search/redir.aspx?AssetID=HP052853541033&CTT=5&Origin=RP011140741033

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




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

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