xp new perspectives on microsoft frontpage 2002 tutorial 1 1 microsoft frontpage 2002 tutorial 1 –...

New Perspectives on MicrosoftFrontPage 2002 Tutorial 1

1

XP

Microsoft FrontPage 2002

Tutorial 1 – Introducing FrontPage 2002

New Perspectives on MicrosoftFront002 Tutorial 1

2

XPChapter Objectives

• Learn about FrontPage• Start and exit from FrontPage• Open and explore a FrontPage Website• Lear about developing a website• Create a FrontPage web site• Enter and format a web page• Save a web page• Test the web page in a browser


3

XPLearn what FrontPage is and how it works

• Microsoft FrontPage is a tool to help you develop, maintain, and publish your Web sites.

• FrontPage lets you:– Insert text and graphics – Import and export files – Add, test, and repair hyperlinks – Easily view and manage the entire Web site

• There are even templates included to get you started.


4

XPFrontPage creates the HTML code

• While HTML is the language your sites will be based on, you don't have to know it to create a great Web site.

• FrontPage uses a graphical interface that allows anyone with Windows experience to develop Web pages.

• It creates the HTML code for you and the Web browser interprets it to display your pages correctly.


5

XPFrontPage builds Web sites

• A Web site consists of Web pages, files, and folders as well as specific FrontPage server extension support files that all work together so Internet users can view a site correctly.

• Web sites can be disk-based or server-based. – Disk-based sites can be stored on floppy disks or on a hard drive

– Server-based sites have your files and folders stored on a Web server.

• These two types of sites are created in an almost identical way.


6

XPStart and exit FrontPage

• To start FrontPage, click the Start button, point to Programs, and select Microsoft FrontPage.

• Click the list arrow on the Open button and select Open Web. • In the Open Web dialog box, navigate to the directory where

your Web site files are located.– You will use the Look in list arrow to find the correct

drive• Click the main folder holding the site's files and then click

the Open button.• To exit FrontPage, click the Close button in the upper right

corner of the program window.


7

XPThe FrontPage Program window

When you first start FrontPage, you will see a blank program window appear, as shown in this figure.

You can open a new or existing site from the Task Pane, or click the list arrow on the Open button to select from those options.


8

XPUse FrontPage Views

• Once you have opened FrontPage, the Views button bar allows you to use the Folders view, where you can see all the files in your Web site.

• The Views allow you to see your site from different perspectives.

• The Folders list shows all the folders and files in the site.

• The Contents pane shows you the “view” you have chosen.


9

XPFrontPage Folders view

This figure shows the FrontPage Folders view. In this view you can click on any folder in the open Web, and view the contents of that folder in the Contents pane.


10

XPOpen and explore a FrontPage Web site

• The options on the Views bar give you different ways of looking at the information in a site and make creating and maintaining the site easy.

• To open a Web site, use the list arrow on the Open button and select Open Web.

• You can then can use the dialog box that opens to navigate to a folder that contains a Web site. Then click the Open button.

• Double-click on index.htm to switch to Page view for that Web site. – The Page view is where you create, edit, and format content

• The title bar indicates which Web page is open.


11

XPUse Page view

• Click the Page icon in the Objects bar to view your site in Page view. Page view has three tabs at the bottom of the window that allow you different views within this view:– Normal view lets you easily manipulate your text and graphics

– The HTML tab shows you the code that the browser uses to translate the page for viewing on the Internet. (You can also make edits here too if you know HTML)

– The Preview mode mimics a browser so you can see what it looks like over the Internet.


12

XPPage view mode

This figure shows an open Web being viewed in Page view, and it is currently being viewed using the Normal tab.

Switch to HTML or Preview mode by clicking one of these tabs.


13

XPPage view HTML mode

This figure shows the page seen in Normal mode in the previous figure now being displayed in HTML mode.


14

XPFrontPage Reports view

The Reports view is shown in this figure. This view allows you to examine various statistics about this site and makes the Reporting toolbar available, from which you can select the report you want to use.

The Reports view is where you'll generate reports to help you analyze and summarize your site.


15

XPFrontPage Navigation view

Navigation view shows your Web site in a hierarchical diagram, similar to an organization chart.

In this view you can click, drag, and drop pages to change the arrangement of the site.


16

XPFrontPage Hyperlinks view

The Hyperlinks view provides a look at each page and all the hyperlinks to and from it.

You can customize Hyperlinks view to show page titles instead of page file names.


17

XPOther FrontPage views

• FrontPage has several other views that give you a different way of looking at the files and information in your Web site: – The Folders view shows all the folders and files

– The Tasks view shows you a "to do" list that will help you manage development

• You can create a task list of activities to be done, assign developers to each task, modify task names, and mark them completed


18

XPLearn about the five-part process for developing a Web site

• Before you begin developing a Web site, some planning should be done.

• The first step is defining the site's goal and purpose: – What does you want to achieve? – What should the site accomplish that other media won't? – Who is your target audience?

• After you answer these questions, you'll determine and prepare content for the site by gathering all the relevant documents and data that might be used.

• The content is the basis of the design. When that has been defined, you can begin designing.


19

XPA typical Web development team

Creating a large and complex Web site for a corporation may involve a large number of people, from different areas of the company. It is important to receive feedback from all members of the team when designing the site.

New Perspectives on MicrosoftFront02 Tutorial 1

20

XPCreate a storyboard and build the pages

• The overall layout and art should be attractive, inviting, and easily navigated.

• Once you know the direction of your site, create a storyboard that shows all the interactions that will become hyperlinks between your Web site pages.

• Your next step is to build the actual pages.

• The visual appeal must be consistent and the content must flow.

• It is important to maintain the goals you set out to meet.


21

XPTest your site thoroughly

• Your last step will be to test everything. • Verify all of your hyperlinks and spell check all of

your text. • You should try to view your site in several

browsers. They each may display the site differently.


22

XPA Web site storyboard

This figure is an illustration of a storyboard for a Web site. You should always create a storyboard that details the outline and hyperlinks for the Web site before you actually begin to create it.


23

XPCreate a FrontPage Web site

• Before you start to create Web pages, you should create a Windows folder to hold everything for your Web.

• To create a Web site:– Start FrontPage and make sure you are in Page view – Click File on the menu bar, point to New and click on Web– The New dialog box opens giving you several templates to get you started – Select one and then specify the location of the new Web. Type the path

and filename you want to give it– Click OK to return to FrontPage– Select index.htm, which was created from the template that you chose,

and the structure will display in the content frame– Begin entering information here. This will be your Home Page


24

XPThe Web Site Templates dialog box

When creating a new Web site, you can select from several templates to get your site off to a flying start. These templates have several areas of the page already formatted and all you have to do is plug in some text and graphics.


25

XPCreate a link bar

• A link bar is a key feature you should include on your home page.

• The link bar will contain the links your viewers will use to get to the other pages of your Web site.

• You can create your own or use FrontPage's link bar feature.

• It's often better to create your own so that you retain total control over its functions.


26

XPAn example of a link bar

An example of a link bar is shown in this figure. This shows some of the key elements that are essential to a useful navigation bar and, hence, an easily navigated Web site.

The link bar allows anyone viewing your site to jump to any page in the site from the home page.


27

XPEnter and format the text of a Web page

• Formatting the text of your pages can increase the visual appeal and bring order to your content.

• To format text, you can use the Format menu, click the buttons on the Formatting toolbar, or right-click on text or an object to open the shortcut menus.

• You can use the six preset Heading styles to organize text.

• This gives your reader visual clues about where they are in the scheme of things.


28

XPUse alignment and color options on your Web page

• Alignment of text and objects, as well as font sizes and styles, can be applied in FrontPage as easily as they are in the other Microsoft programs.

• Likewise, special characters (like copyright and trademark symbols) can be added easily.

• Color also can be used effectively in places for emphasis.

• FrontPage provides color options that are "Web safe,“ meaning that they are colors that will be interpreted the same way by different browsers.


29

XPFormatting toolbar commands

This figure is a table showing the formatting options available for editing a Web site. These buttons appear on the Formatting toolbar, and you can access them on the Format menu as well.


30

XPA formatted Web page

This figure shows the same page that was seen a few slides ago, but it has now had some formatting applied to it. The link bar has been centered, and heading styles and alignment has been applied to the headings.


31

XPSave a Web page

• Before a new Web page can be viewed on the Internet, or anywhere else, it must first be saved.

• It is also a good idea to periodically save the page while it is being developed.

• If you periodically save the page, you will not lose as much work as you might have lost if the computer crashes, or some application program crashes the entire system.

• Web pages and Web sites can be saved on servers, or on local disk drives.


32

XPTest a Web page in a Web browser

• When you have a page complete in FrontPage, click the Preview tab and take a look at how it would look in a browser.

• If it appears how you want it to appear, then view it in your browser.

• To do this, click the Preview in Browser button on the Standard toolbar to start your browser.

• The page should look very much like it did in the Preview in FrontPage.

• If you determine that you need to modify formats or contents, close the page in your browser, and then reopen it in FrontPage to make your changes.


33

XPA Web page viewed in a browser

This figure shows how a Web page would look if viewed in Microsoft Internet Explorer.

If you view this page in a different browser, it may appear somewhat different. If possible, you should alwaystest the Web pages you create in various browsers to ensure that it displays the way that you want it to appear.


34

XPReferences

• http://digitalenterprise.org/design/design.html• Microsoft Tutorial at Microsoft or downloaded to

this site (FpTutorial)• http://info.med.yale.edu/caim/manual/sites/site_de

sign.html

xp new perspectives on microsoft frontpage 2002 tutorial 1 1 microsoft frontpage 2002 tutorial 1 –...

Documents