FrontPage 2003 Intermediate

8/6/2019 FrontPage 2003 Intermediate

1/38

FrontPage 2003 Intermediate Page 1 of 38

Table of Contents

Meta Tags ..........................................................................................................................2Add a keywords meta tag to a Web page ....................................................................2Add the description meta tag to a page ......................................................................... 2

Common Meta Tags .......................................................................................................3Import a Web site ...............................................................................................................3Shared borders ................................................................................................................6Dynamic Web Templates ...................................................................................................6Administering a web......................................................................................................... 11

Task View ..................................................................................................................... 11Reports View ................................................................................................................ 12Source Control............................................................................................................. 14

Frames ............................................................................................................................. 15Save a frames page ......................................................................................................... 16Forms .............................................................................................................................. 20

Form fields .................................................................................................................... 21Types of forms fields .................................................................................................... 21Set properties to send form results in an e-mail message ......................................... 23

Create a database to store form results ........................................................................ 25Supplemental................................................................................................................... 29

Banner Ad Manager .................................................................................................... 29Style Sheets ................................................................................................................. 30Layers ........................................................................................................................... 32Behaviors ..................................................................................................................... 35


2/38


Meta Tags

A meta tag is a special Hypertext Markup Language (HTML) tag that providesinformation about your Web page and, except for the page title, is not visible to Web site

visitors. Meta tags provide information such as who created the page, how often it isupdated, what the page is about (description tag), and which keywords describe thecontent of the page (keywords tag). Meta tags are placed in the section

Although not all search engines support meta tags, many search engines use meta tagsto index Web sites (keywords meta tag) and then display the description in the searchresults (description meta tag).

Add a keywords meta tag to a Web page

Keywords list should include both singular and plural forms of nouns, some synonyms,

and any abbreviations that might be appropriate, listed in order of importance. Searchengines ignore capitalization. The entire meta tag must contain fewer than 1,024characters.

Create a one page web site

To add the keywords meta tag to your Web page, in Page view do the following:

1. On the File menu, clickProperties, and then click theCustom tab.

2. UnderUser Variables,click Add.

3. In the Name box, typekeywords.

4. In the Value box, typekeywords for site, usingcommas to separate words.

5. Click OK twice.

Add the description meta tag to a page

Each search engine has a different limit for the number of characters from a descriptionthat is displayed in the search results. These range generally from 150 to 395characters.

To add the description meta tag, just like keywords, in Page view do the following:


3/38


1. On the File menu, click Properties, and then click the Custom tab.

2. UnderUser Variables, click Add.

3. In the Name box, type description.

4. In the Value box, type the description for your site.

5. Click OK twice.

Common Meta Tags

The name of your site

Import a Web site1. Open the Web site that you want to import a Web site, folder, or file into.

2. On the File menu, click Import.


4/38


3. In HTTP: use the site www.tomatofest.com (or any web site)

(Instead of HTTP, you can either:Import a file from your local computer or network

1.

Click Add File.2. Locate and click the file that you want to import, and then click Open.3. To import additional files, repeat steps 1 and 2.

Import a folder from your local computer or network1. Click Add folder.2. Locate and click the folder that you want to import, and then click Open. )

The starting page can be any page in the Web site, not just the home page.

To import a Web site that uses Secure Sockets Layer (SSL) for encrypted transactions,select the Encrypted connection required (SSL) check box.Click Next, and then follow the instructions in the Import Web Site Wizard.


5/38



6/38


If you import a disk-based Web site into another disk-based Web site, FrontPage onlyadds the files and folders to the site. It does not import the file or folder as a newsubsite (formally known as subweb)

Shared borders

By default, Shared Borders no longerappears on the Format menu inFrontPage 2003 because the SharedBorders functionality has beenreplaced by Dynamic Web Templates(DWTs). To use the Shared Bordersfeature, add it to the Format menu:

1. Right click the toolbar section2. Select Customize3. Select Commands4. Select Format

5. Drag Shared Borders to Format

Create Shared Borders by choosingwhich borders to include on one pageor on all pages within the web site.Modify each borders properties.

Create two new pages with top andleft shared borders. Put a logo in thetop border and navigation links in theleft.

To edit a shared border1. Open a page that uses the shared border you want to edit.2. In Page view, at the bottom of the document window, click Design.3. Click inside shared border region, outlined with a dashed line. When you click the

area, the outline changes to a solid line.4. Make your changes to the content inside the shared border region. For example,

type or delete text, or add a picture.5. Click Save. Your changes will appear on all pages that share the border

Dynamic Web TemplatesA Dynamic Web Template is an HTML-based master copy of a Web page that you cancreate to contain settings, formatting, and page elements such as text, graphics, pagelayout, styles, and regions of a Web page that can be modified.

You can attach a Dynamic Web Template to the pages in a Web site, and that templatedefines the layout for those pages.

How to use Dynamic Web Templates


7/38


By creating a Dynamic Web Template, you can make regions on attached pagesavailable for other authors to add and modify content, while preventing changes to otherregions on the same page. This provides you with control to preserve the layout of thepages and the template itself. When you update the content in a Dynamic Web

Template, you can update the attached

Web pages simultaneously.

You can use any number of DynamicWeb Templates in a Web site, and youcan attach a Dynamic Web Template toas many pages as you like. There areno special template storagerestrictions, so you can save yourDynamic Web Template (.dwt) files toany location.

Key content regions of a DynamicWeb TemplateEditable regions are those areas thatyou specify in the Dynamic WebTemplate as being okay for otherwriters to edit.

When creating the Dynamic WebTemplate, you can enable otherauthors to add or remove information inthe regions you specify without having

to worry that they will alter the pagelayout.This screen represents a sample Webpage that is attached to a Dynamic

Web Template. The template specifies the following areas as editable regions:1. doctitle 2. This Week 3. ViewPoints

The screen capture also shows that the following are protected (non-editable) regions:4. The lips logo in the top left corner of the page.5. The navigation links, also on the left side of the page.

Protected regions are those areas in the layout that only the author of the Dynamic WebTemplate can change. For example, you might want to add your logo to a protectedregion. The logo will appear in the same location on every page that you attach to theDynamic Web Template. Contributing authors are not able to remove the logo becauseit is in a protected region.

Dynamic Web Templates are useful in collaborative environments in which a designercontrols the page layouts and other authors add content to the pages but are not


8/38


allowed to change the layout. When it comes to updating the content on your Webpages, you can do it dynamically!

Create a Dynamic Web Template1. Create or open an HTML document.2.

On the File menu, click Save As.3. In the Save as type list, click Dynamic Web Template, and then click Save.4. Create the basic contents and structure of the template in the *.dwt file, and then

click Save.

Add editable regions to a Dynamic Web Template1. Open the Dynamic Web Template (.dwt) file.2. In Page view, at the bottom of the document window, click Design.3. Select only the areas in the template where you want to allow other Web authors

to change the attached Web pages.4. Right-click a selection, and then click Manage Editable Regions.5.

In the Region name box, type a name for the editable region, for example,Header, Body, or Footer.6. Click Add.7. Repeat steps 3 through 6 for each new editable region you want to add, and then

click Close.

Attach a Dynamic Web Template1. Open the Web page you want to attach a Dynamic Web Template to.


9/38


To attach the Dynamic Web Template to more than one page, select the pagesyou want. In the Folder List, hold down CTRL and click each page you want.If the Folder List is hidden, click Folder List on the View menu.

2. On the Format menu, point to Dynamic Web Template, and then click Attach

Dynamic Web Template.

3. Locate and click the Dynamic Web Template you want and then click Open.

If the body of a selected Web page contains content, the Choose Editable Regions forContent dialog box appears. The dialog box displays the default settings for mappingcontent from the body of the Web page to editable regions specified by the DynamicWeb Template.

The Old column lists content in the body of the Web page. The New column listseditable regions specified by the template.


10/38


In the Choose Editable Regions for Content dialog box, do one of the following:

To move all of the content in the body of the Web page to the default editable region,click OK. If the default editable region contains content, that content is replaced withthe content on the Web page.

To move all of the content in the body of the Web page to a specific editable region,click (Body), and then click Modify. In the New Region list, click the editable regionyou want to move the content to. If you click (none), the content is removed from theWeb page.

To maintain all of the content and structure of the Web page, click Skip CurrentPage. The template is not attached to the page.

FrontPage still includes and supports page templates, which are master copies of aWeb page layout that you can use as a starting point to create additional pages. If you

want to get a Web page up and running quickly and you are not concerned aboutother authors making changes to the pages in your site, you can use pagetemplates.

In earlier versions of Microsoft FrontPage, you might have used shared borders tocreate a region on a Web page that was common to one or more pages in a Web site.You can now use Dynamic Web Templates instead. Unlike shared borders, pages that


11/38


are attached to Dynamic Web Templates share an entire layout, and they offer muchmore control over which parts of your pages are available for editing.

Administering a web.

Task ViewTo keep track of the many items that need to be completed is what Task View .is for.You can track work items on your Web site by assigning tasks to people or toworkgroups. You can also add a description of the work item directly to the task. Youcan associate these tasks with any file on your Web site including a Web page, apicture, a sound file, or another Microsoft Office System document.

By using Tasks view, you can monitor the most recent information about each task.Each task has the following properties:

Status Completed or in progress Task The task name

Assigned To User name or workgroup Priority High, medium, or low Associated With The name of the file the task is associated with, if any Modified Date The last time the file was modified Description A description of the work that needs to be done

Create a task on a Web page or site1. Select Tasks.on the Views bar2. On the Edit menu, point to Tasks, and then click Add Task.3. In the Task name box, type the name of the task.4. Specify the settings that you want for this task:

o In the Assigned to box, type or select the name of the person orworkgroup that you want to assign the task to.

o In the Description box, type a description of the task.

o UnderPriority, click a priority that meets your expectations for the task.


12/38


Create a task and associate it with a file on a Web site

You can assign a task to any type of file on a Web site;

You can only assign a task to one file at a time .

1. In the Folder List, click the file that you want to associate a task with.If the Folder List is hidden, on the View menu, click Folder List.

2. On the Standard toolbar, click the arrow next to Create a new normal page.3. Click Task.4. In the Task name box, type the name of the task.5. Specify the settings that you want for this task:

o In the Assigned to box, type or select the name of the person or

workgroup that you want to assign the task to.o Next to Associated with, verify that the file name you want to associate

the task with is listed.o In the Description box, type a description of the task.

o UnderPriority, click a priority that meets your expectations for the task.

You can create a task in Page view while editing a page, and the task is automaticallyassociated with that page. The name of the file associated with a task, if any, isdisplayed in the Associated with field in the New Task dialog box.

Reports View

FrontPage reports enable you to gather, analyze, and summarize Web site statistics ina variety of ways.

Site Summary reports display an overview of your Web site's vital statistics, such asthe number and sizes of files and pictures, number and types of hyperlinks, and more.

Files reports display an overview of the age of files, who is working on them, when theywere modified or added to your Web site, and more.


13/38


Shared Content reports display information about the features of your Web site thatwork on groups of pages, such as themes, styles, dynamic Web templates, and sharedborders.

Problems reports display problems with your Web site, including broken links,

component errors, files that take too long to download, and more.

Workflow reports indicate the status of the files and assignments in your Web site,including the review status, who the file is assigned to, whether it's checked out usingsource control, and more.

Usage reports display information about the visits to your Web site, including page hits,browsers used by site visitors, referring URLs, and more. Usage reports are availableonly fortop-level sites (top level site: The uppermost folder in a hierarchy of Web sitefolders. A top level site can be hosted on a Web server, a virtual server network, or alocal computer hard disk.)and subsites hosted on Web servers running Microsoft

Windows SharePoint Services, SharePoint Team Services v1.0 from Microsoft, orFrontPage 2002 Server Extensions from Microsoft. Usage processing must also beturned on for the Web server. Additionally, if the site is based on Windows SharePointServices, you must have administrator privileges.

When you synchronize files using the Remote Web Site view, files on the remote sitewill be downloaded to the local site.
http://appendpopup%28this%2C%27fptoplevelsite_1%27%29/http://appendpopup%28this%2C%27fptoplevelsite_1%27%29/http://appendpopup%28this%2C%27fptoplevelsite_1%27%29/http://appendpopup%28this%2C%27fptoplevelsite_1%27%29/http://appendpopup%28this%2C%27fptoplevelsite_1%27%29/http://appendpopup%28this%2C%27fptoplevelsite_1%27%29/


14/38


If malicious files were placed on the remote site, the local site may be at risk. Be surethat only trusted users have access to the remote site before you attempt tosynchronize files.

Source Control

Source control helps prevent the conflicting document versions that can result whenseveral people are working on the same document simultaneously.

When source control is activated in FrontPage, a page will appear checked out whensomeone is modifying the page, and no one else will be able to save changes to thepage until it has been checked in again.

To turn on source controlOn the Tools menu, click Site Settings.

1. In the Site Settings dialog box, on the General tab, select the Use document

check-in and check-out check box.

2. Click eitherCheck out files from the Local Web Site orCheck out files fromthe Remote Web Site.

3. Select the Prompt to check out a page when opening a file check box, andthen click OK.

4. When prompted to recalculate the Web site, clickYes.

If you do not check the Prompt to check out a page when opening a file check box in

the Site Settings dialog box, you will be able to double-click the document and open itwithout the file being checked out. For a prompt to check out the page when double-clicking a file, make sure the Prompt tocheck out a page when opening a file ischecked.

To check a file in or out

Make sure source control is turned on.While you have a file checked out, onlyyou can modify it. Others can open the

last-saved version of the file to view it, butcannot save any changes to it.

When you check the file inagain, others will be able tocheck out the file and modify it.


15/38


Check a document out

Right-click the document and click Check Out.

If you did not check the Prompt to check out a page when opening a file check box

in the Site Settings dialog box you will be able to double-click the document and open itwithout the file being checked out. For a prompt to check out the page when double-clicking a file, make sure the Prompt to check out a page when opening a file ischecked.

Check a document in

Right-click the document that you want to check in and click Check In.Undo a document checkout

You can undo a document checkout. The document will be checked in, but none of your

changes will be saved. To save your changes, see Check a document in.

Right-click the document and click Undo Check Out.

1. On the View menu, click Remote Web Site.2. Do one or both of the following:

o In the Local Web site pane, right-click each file that you do not want to

publish, and then click Don't Publish on the shortcut menu.

o In the Remote Web site pane, right-click each file that you do not want to

publish, and then click Don't Publish on the shortcut menu.

3. Remote Web site pane, underPublish all changed pages, click Synchronize.

FramesA frames page is a type of Web page that, when displayed inthe browser, has multiple regions within it called frames.Each of these frames can display a different Web page.

A frames page itself contains no visible content it's just acontainer that specifies which other Web pages to display ina frame and how to display them.

The frames page The banner frame The contents frame The main frame

You create a frames page by using one of the frames page Web site templates inMicrosoft FrontPage. In each of these templates, the navigation between frames isalready set up for you.


16/38


For example, a frames page created by using the Banner andContents frames page template actually shows four pagessimultaneously in the browser: the frames page, which is thecontainer, and the three pages shown in each of the three frames.When you click a hyperlink in the contents frame on the left, the

page pointed to by that hyperlink opens in the main frame.

After you create the frames page from a template, all you need to dois set the initial page you want shown in each frame. You can selectan existing page or create a new page. Then you can edit the pagedirectly in its frame.

How frames pages are used

A user clicks the link in the banner frame

A list appears in the contents frame- click link in contents frame

A page is displayed in the main frame

In frames pages based on the Banner and Contents frames page template, manycompanies use the banner frame to show a corporate logo and the primary

departments.

Frames pages are often used for catalogs, lists of articles orinformation, or any other kind of page where clicking a hyperlink inone frame shows a page in another frame. Authors use framespages because they contain built-in navigation and present aconsistent user interface.

Controlling the appearance of framesOn any frames page, you can split a frame horizontally or vertically to create twoframes. You can either split it into evenly divided rows or columns, or you can drag itsborder to specify a certain size for each frame. You can resize or delete frames byselecting and dragging frame borders. You can also choose to show or hide the bordersbetween frames.

Split a frame Resize a frame Delete a frame Show or hide frame borders

You can also control:

The amount of space between frames

The size of margins inside frames If a frame can be resized by users in the browser

If scroll bars are shown in a frame

Save a frames page

1. In Page view, at the bottom of the document window, click Design .


17/38


2. On the File menu, click Save As. The Save As dialog box displays a previewshowing the layout of the frames page. Because you are saving the frames page,all areas should have the dark blue box highlights indicating that this is what youare saving.

3. In the File name box, type a file name for the highlighted frames page.

4. Navigate to the location where you want to save the page.5. Click Save. After you click Save, the Save As dialog box automatically opens again and asks

you to save the page shown in the frame just saved. This occurs for each pageshown in the current frames page.

The title shown in the title bar of the browser is the title of the frames page itself,not the title of the page displayed in the frame.

Choosing a Frames Page Style1. On the Standardtoolbar, click BLANK PAGEselect Page...

The Page Templates dialog box appears.2. Select the Frames Pages tabA list of various frames page styles appears.

3. OPTIONAL: To preview a style, click the appropriate iconIn the Previewarea, a sample appears.In the Description area, a brief description of the previewedstyle appears.

4. Select the desired frames style5. Click OK

Setting an Initial PageWhen you open a blank frames page, you will find it divided in the style you chose. Youhave the options to select one of your existing pages, link to an external page, or search


18/38


the Web for a page to use. In each frame, there are two buttons: SET INITIAL PAGE...and NEW PAGE. If you would like to use an existing page for the frame, either in yourfiles or on the Web, click SET INITIAL PAGE... Or, you may create a page by clickingNEW PAGE

Setting an Initial Page: Using an Existing Page1. In the frame where you want to set an initial page, click SET INITIAL PAGE...

The Insert Hyperlinkdialog box appears.

2. Using the Look in pull-down list, locate and select the desired page3. Click OK

The selected page is opened and set in that frame.

Setting an Initial Page: Using an External Page1.

In the frame where you want to set an initial page, click SET INITIAL PAGE...The Insert Hyperlinkdialog box appears.2. In theAddress text box, type the URL of an external page to set in the frame

3. Click OKThe selected page is opened and set in that frame.

Setting an Initial Page: Searching the Web1. In the frame where you want to set an initial page, click SET INITIAL PAGE...

The Insert Hyperlinkdialog box appears.

2. Click BROWSE THE WEBThe default web browser opens.

3. Browse to the page or file you want to use4. Return to FrontPage

In the Insert Hyperlinkdialog box, the URL of the last page you visited appears intheAddress text box.


19/38


5. Click OKThe selected page is opened and set in that frame.

Creating a New Page1. In the frame where you want to create a new page, click NEW PAGE

The selected frame opens a blank page.2. Create this frame as you would create a new web page

Saving a Frames PageYou will now be prompted to either save each individual frame or each frameset. Thefirst time you save, if you have created a new page, you will be prompted to save eachframe separately. If you are using an existing page you will be prompted to save theframeset. After the frames are saved, you will also be prompted to save the frameset.NOTE: To save a frame, you must be in Design view.

Saving Individual Frames

1. Place the insertion point in the desired frame2. From the File menu, select SaveThe Save As dialog box appears, displaying the selected frame; only this framewill be saved.

3. In the File name text box, type the desired filename for the selected frame4. To save this frame, click SAVE5. Repeat steps 1-3 for other frames

Saving the FramesetIf you are not saving for the first time you will be prompted to

save the frameset, rather than individual frames.1. Place the insertion point in your frames page2. From the File menu, select Save As...

The Save As dialog box appears, displaying theselected frameset.

3. In the File name text box, type the desired filenamefor your frames page

4. To save the frameset, click SAVE

Frames Page Views

Once you have selected a frames style and your new framespage is open, you have an additional option for viewing yourpage. The No Frames option displays the message that will beshown when a web browser does not support frames. Youmay alter this message.


20/38


Inline frames are similar to frames pages except that the inline frame and its contentsare embedded on an existing Web page. Anything that you can put on a regular pageyou can put in an inline frame. You can customize inline frames in the same ways asregular frames and also enable scroll bars.One of the advantages of using inline frames is that you don't need to create a separate

frames page in order to have embedded content.You can use inline frames in a variety of ways: To insert a contract for your site visitor to fill out To give examples of what other Web pages look like As a container for a form As a scrolling box with products and prices

Add an inline frame to a page

1. In Page view, at the bottom of the document window, click Design .2. On the Insert menu, click Inline Frame.

If the Inline Frame command is unavailable, do the following:

1. On the Tools menu, click Page Options.2. Click the Authoring tab.3. Select the Frames check box.

3. Set the initial page of the inline frame.

FormsYou can create a form using theForm Page Wizard or without awizard. To create a form with thewizard, use the Template for Form.

To create one yourself, do this:

1. In Page view, at the bottom ofthe document window, clickDesign.

2. Place your pointer where youwant to add the form.

3. On the Insert menu, point toForm, and then click Form.

4. Place your pointer in the formarea, and on the Insert menu,point to Form, and then selectthe check box for each of thefields that you want to add toyour form


21/38


Form fields

You can request information or get feedback about your site by providing a form with

form fields for them to fill out. The form fields you choose depend on the information youwant to gather.

To add a form field to a form, from the Insert menu, point to Form, and then select aform field from the list.

Types of forms fields

Text boxUse text boxes to collect a small amount of information in one line, such as first and last

names or e-mail addresses. To collect larger amounts of information from site visitors,use text areas.

Option buttons A B CUse option buttons (also called radio buttons) when you want site visitors to select onlyone option from a group

Text areaUse text areas to collect one or more lines of text, such as a comment. This field scrollsto accommodate varying amounts of text. To collect a small amount of information fromsite visitors, use text boxes.Give feedback about this Web site:

Drop-down box or menuUse a drop-down box or menu to provide site visitors with a list of choices. This field issimilar to using a group of option buttons, but takes less space on a form. Unlike optionbuttons, you can configure a drop-down box to allow one or multiple selections.Select a product:

Check boxUse check boxes for optional items. The site visitor can select or clear the check box.They can also select multiple items. Yes, I would like to receive updates

Push buttonReset

Use push buttons to enable site visitors to submit a filled-out form, to clear fields by


22/38


resetting the form, or to run your custom scripts. You can add a graphic to a form to usein place of a submit button. After filling out a form, the site visitor clicks the graphic tosubmit the form, and then the data from the form, including the name of the graphicfield, is sent to the form handler(A program on a server that is executed when a sitevisitor submits a form. A form in FrontPage is associated with a form handler.)

Advanced buttonBy inserting the Advanced button into your form, you can write a script that will makeyour form do more exactly what you need. The Advanced button is highly customizable you can use fancy fonts, colors, or even tables on the button.

Group box

Add a group box to a form when you want to assemble aset of related controls or fields in a separate area from the rest of the form.

File uploadSubmit

Reset

Give your site visitors the opportunity to send a file to your Web site. When you insertthe File Upload form field, site visitors click the Browse button, locate their file, andthen click Submit.

Password field PasswordSubmit

When you want a site visitor to enter a password to have access to your Web site, adda password field to your registration form. A password field is really just a one-line textbox. When a site visitor types in this field, most Web browsers will display the passwordas asterisks, for confidentiality purposes.


23/38


Set properties to send form results in an e-mail message

You can send form results n an e-mail message. Each time a site visitor submits a form,a message containing the results of the form is sent to the e-mail address you specify.

You can also configure other options for the messages, such as the text for the Subjectline and the address for the From (Reply To) line.

To collect form results in an e-mail message, contact your Web server administrator toensure that the server is running FrontPage Server Extensions , SharePoint TeamServices version 1.0 from Microsoft, or Microsoft Windows SharePoint Services.

Additionally, the server must be configured to send e-mail. Contact your serveradministrator to find out if the Web server that hosts your Web site is configured to sende-mail.

1. In Page view, at the bottom of the document window, click Design.

2. Right-click the form, and then click Form Properties.

3. Click Send to.


24/38


4. In the E-mail address box, type the e-mail address to which you want to sendthe form results.

5. If you do not want results saved to a file in addition to being sent in e-mail, clearthe File name box, and then click Options.

6. Click the E-mail Results tab.

7. Then do one or more of the following:

o In the E-mail format list, click the text format you want.

o To specify the subject line of the e-mail message, underE-mail message

headerin the Subject line box, type the text that you want. If you leavethis box blank, the default subject line in the e-mail will be "Form Results."

o If you want the subject line of the e-mail message to contain the results ofone field from your form, next to Subject line select the Form field name,check box, and then type the name of the field in the Subject line box.

o If you want a specific e-mail address to appear as the sender of the e-mail

message (the From or Reply To line in the e-mail), type that address in the

Reply-to line box.

o If your form contains a field that collects the site visitor's e-mail address,

you can use that address as the sender's address. Next to Reply-to line, select theForm field name, check box, and then in the Reply-to line box, type the name of theform field.


25/38


Create a database to store form resultsPrior to performing these procedures, contact your server administrator to determinewhich database file types are supported, and to ensure that the server hosting yourWeb site has Microsoft FrontPage Server Extensions or SharePoint Team Servicesfrom Microsoft installed.

Windows SharePoint Services 2.0 does not support Access .mdb files becauseWindows SharePoint Services stores files in a Microsoft SQL database.

1. In Page view, right-click the form, and then click Form Properties.

2. Click Send to database, and then click Options.


26/38


3. On the Database Results tab, click Create Database.

After FrontPage creates a Microsoft Office Access 2003 database, a confirmationmessage displays the name of the database and its location in your Web site. Forexample, /fpdb/Form.mdb indicates that the database is named Form, and is located inthe /fpdb folder created by FrontPage in the current Web site.

4. Click OK.

FrontPage automatically selects the new database as the database connection to useand selects the table to store the form results in.

5. Click OK, and then click OK again.

If the extension of the current page is .htm, FrontPage prompts you to rename the filewith the .asp extension so that the file will work correctly.

Using the Database Results Wizard with ASPThe following procedures will not work on a Web site located on a server runningMicrosoft Windows SharePoint Services.

By using the Database Results Wizard on a Web site hosted on a server running ActiveServer Pages (ASP) (ASP: Active Server Pages. A server-side scripting technology thatis used to create dynamic interactive Web applications. An ASP file is an HTML pagecontaining scripts that are processed by a Web server before being sent to a browser.),you can create Web pages to view and search database records.Security Use this feature with caution. Sensitive or confidential information could berevealed to others, such as other authors of your Web site, or site visitors on theInternet or your intranet.

Start the Database Results Wizard On the Insert menu, point to Database, and then click Results.

Specify ASP as the server technology and the database connection1. In the FrontPage has detected that your page will display best using area,

clickASP, so that your pages will work correctly on a Web site located on aserver running ASP.

2. Specify the database connection you want.


27/38


Specify the record sourceDo one of the following:

To select the table or view you want, click Record Source. To create a custom query, click Custom Query, and then click Edit.

Specify the fields to be displayed on the database results pageYou can do one or more of the following: To exclude fields from appearing in the database results region or to change the

order in which they appear, click Edit List. To filter, limit, or sort the database results, to set up a search form, or to provide

default values for the search, click More Options.

Specify the formatting options for the database results region You can format the database results region as a table, a list, or a drop-down list.

Specify whether to display all records together or to split them into groups

You can do the following: If you specified to display the records as a table or a list on the previous page of

the wizard, you can specify whether to display all of the records together or tosplit them into groups of records with buttons to move forward or backwardthrough the records.

Additionally, if you specified that you wanted to use a field as a search field in theprevious page of the wizard, you can specify here that you want to add a search formto your page.

About creating data-driven Web sites

To create a data-driven Web site in FrontPage 2003, you must be using MicrosoftWindows SharePoint Services, which provides the component-based platform requiredfor FrontPage data-driven functionality. To use Windows SharePoint Services, thefollowing technologies are required on your Web server:

Microsoft Windows Server 2003, Standard Edition, Enterprise Edition, DatacenterEdition, or Web Edition

Microsoft Internet Information Services (IIS) 6.0 in IIS 6.0 worker processisolation mode

ASP.NET

What is a data-driven Web site?The Internet is full of Web sites that require the Web site creators to edit the HTMLevery time a content change needs to be made. With so much to do to make changes, itis no wonder there are so many static Web sites on the Internet!A data-driven Web site, on the other hand, changes automatically because it draws itscontent from external dynamic data sources. The data sources that FrontPage 2003supports include:

Windows SharePoint Services lists and document libraries


28/38


Extensible Markup Language (XML) (Extensible Markup Language (XML): fileson your Web site

Uniform Resource Locators (URLs) that return XML XML Web services Microsoft SQL Server databases

Microsoft Access Oracle Other databases that are accessible through OLE DB (OLE DB: A component

database architecture that implements efficient network and internet access tomany types of data sources, including relational data, mail files, flat files, andspreadsheets.)

A well-architected, data-driven Web site is much easier to maintain than a static Website because most content changes require no change to the HTML behind the Website. Instead, changes are made to the data source that drives the Web site, and theWeb site automatically adjusts to reflect those changes. With a data-driven Web site,you connect to and present live data from a variety of data sources. Web site visitors

upload the data from your Web site by using a Web browser.When you create a data-driven Web site in FrontPage, you select a data source fromthe data source catalog, and then you add a Data View to your Web site that extractsdata from the data source. When you add a Data View to your Web page, you'reactually inserting something called a Data View Web Part.

More about Data ViewsBy using FrontPage, you can add Data Views to your Web site that display data byusing Extensible Stylesheet Language Transformations (XSLTs) .You can customize Data Views to create custom displays of your data in WYSIWYGformat by using the Formatting toolbar. You can also perform more advanced

customizations by using the Data View Details task pane: Style Choose a formatting style from a gallery of predesigned list view styles.You can also add a toolbar for site visitors to perform custom filtering on the list.

Filter Specify criteria to display a subset of the data in the Data View. Sort & group Display items in a particular order and optionally group them on a

Web page beneath collapsible headings. Conditional Formatting Set conditions for the data in your Data View.

Microsoft Windows SharePoint Services, which is built on the Microsoft .NETFramework, provides the component-based platform required for FrontPage data-drivenfunctionality.

About Web Part connectionsWhen you add Web Parts to your page by using FrontPage, you have more control overhow they appear than you would by working with them on your SharePoint site. You caneven create connections between Web Parts so that when you perform an action in oneWeb Part, it changes the contents of another Web Part.


29/38


Connecting sets of data from different data sources usually requires advancedprogramming skills, but by connecting Web Parts, you can pass data between them andsynchronize their behavior. For example, you can connect a List View Web Part, whichcontains a column with a hyperlink data type, to an Image Web Part, which contains apicture of an employee. Each time you select a row in the List View Web Part, you can

see the picture of the employee displayed in the Image Web Part.Although you can establish a Web Part connection by using the Web browser, by usingFrontPage, you can extend the functionality of Web Part connections. For example, youcan use the Form Web Part to filter the data in another Web Part, or you can establishconnections between Web Parts on two Web Part Pages in the same top-level Website.

About the Form Web PartForm Web Parts are a case-sensitive, filtering mechanism, and they work with MicrosoftWindows SharePoint Services Web sites only.By using the Form Web part in FrontPage, you can extend the functionality of Web Part

connections by enabling site visitors to enter data through a familiar form-like interface,which passes data into a Web Part connection. Similar to a search box, site visitors can,for example, filter on data contained in the List View Web Part by using the Form WebPart.

By using the Form Web Part option, you cannot build a form that lets you collect dataand send it to a database or e-mail address. Instead, to collect data from yourcustomers, on the Insert menu, point to Forms, and then click List Form orForm.If you are running a Web site based on Windows SharePoint Services, you can use thefollowing forms:

List Forms, which are used to input data to a SharePoint list.

Forms, which are used to collect data to a standalone text or XML file. Form Web Parts, which are used to filter for information on your SharePoint site,and work by using the Web Part Connections technology.

If you are running a Web site that is not based on Windows SharePoint Services, suchas a disk-based Web or by using the FrontPage Server Extensions, on the Insertmenu, point to Forms, and then click Forms. The other forms options may beunavailable because you are not running a SharePoint Web site.

Supplemental

Banner Ad ManagerBy default, the Banner Ad Manager is not included as a menu option .To add the Banner Ad Manager and other components to the Insert menu:

1. On the Tools menu, click Customize.2. In the Customize dialog box, click the Commands tab.3. Click the Insert menu. The Insert menu will continue to be displayed even when

you move your pointer away from it.4. In the Customize dialog box, in the Categories list, click Insert.


30/38


5. In the Commands list, locate and click Banner Ad Manager.6. Drag the Banner Ad Managerentry to the Insert menu, and place it where you

want.7. In the Customize dialog box, click Close.8. Click the Insert menu to verify that the Banner Ad Managercommand is there.

Once that is available, you can select it to build your picture banner by selecting thegraphics you want to include, height/width, transition and setting the link.

Style Sheets

A cascading style sheets (CSS) is a set ofinstructions that tells the Web browser

how to display different HTML elements.With CSS, you can also create specialeffects, including text rollovers, as well ascontrol the placement of graphics, anddesign the layout of a page. Heres anembedded style rule applied to the H1element.. A style sheet is a set ofinstructions that tells a browser how to


31/38


present HTML elements, such as what font to use, what size the paragraph text shouldbe, what color the header text should be, whether or not there should be a backgroundcolor applied to specific elements, and so on.

Each style rule is made up of two parts: the selectorand the definition. The selector

identifies the element affected by the rule, and the definition identifies how the elementwill be displayed. The definition contains the property and the value of the element.A style rule looks like this: selector {property: value; }If you want all your tags to be blue, the final code would look like this:h1 {color: blue; }

There are three types of cascading style sheets:

Cascading style sheets can be located inthree different places in your Web site.

An external, or linked, style sheet (notethe styles.css document in the folder list).

An embedded style sheet.

An inline style sheet.

External style sheet, which you usewhen you want to apply the samestyles consistently across all the pages

in your Web site that are linked to it.Also known as linked style sheet.

Embedded style sheet, which you usewhen you want to define styles for thecurrent page

Inline style sheet, which you apply toindividual elements on a page.Each one has advantages anddisadvantages, and you can use all

three types in a Web site, making iteasier to manage the look and feel ofthe entire site while also being able tocontrol each individual element downto the letter. More about this in the nextlesson.

Other benefits of CSSMore control over the display ofindividual elements on a page.

Faster download times.

Easier site management.

It is important to use CSS because the FONT element has been deprecated by theWorld Wide Web Consortium (W3C).

When the W3C deprecates an element, it means it's on its way to becoming obsolete.


32/38


There will come a time when FONT tags will no longer work, and CSS will be the onlyway to choose how to modify the appearance of the text in your Web site.

The three different kinds of

style sheet are applied to aWeb page in cascading order.

The linked style sheet isapplied first.

The embedded style sheetis applied next, takingprecedence over the linkedstyle sheet.

The inline style is appliedlast and takes precedenceover the embedded and linkedstyle sheets.

The more specific the style rule, the higher it is in the order in which it is applied.

An inline style will take precedence over an embedded style, and an embeddedstyle will take precedence over a linked style.

Good Reference site: http://www.w3schools.com/css/css_syntax.asp

Layers

A layer is a container in a Web page that holds page elements, such as text andgraphics. Layers can be used to create animations, flyout menus, or page layouts.You can overlap, nest, and show or hide layers on a page. You can also animate layersby using Behaviors, which add script to any element in a page.

In FrontPage 2003, a layer is defined as an absolutely positioned DIVISION.

You can create layers using the Insert menu, and move layers by clicking and draggingthem. You can also fine-tune the exact placement and stacking order of layers by usingthe Layers task pane

Add a layer1. In Page view, at the bottom of the document window, click Design.2. On the Insert menu, click Layer.


33/38


Set layer border, shading, and positioning propertiesYou can set layer properties for absolutely positioned layers by using the Layers taskpane

Borders and Shading1. In Page view, at the bottom of the document window, click Design.2. Click the layer for which you want to set properties.3. On the View menu, click Task Pane.4. In the Layers task pane, underLayer properties, click Borders and Shading.5. In the Borders and Shading dialog box, click the Borders tab and choose from

among the border properties.6. In the Borders and Shading dialog box, click the Shading tab and choose from

among the shading properties.

Positioning

Setting the Positioning style to any setting other than Absolute will prevent the layerfrom appearing in the Layers task pane. A layer (or DIVISION element, represented bythe tag) with a Positioning style set to None orRelative can be modified usingthe mouse or the toolbar. Although the DIVISION will no longer appear in the Layerstask pane after the Positioning style is set to Relative orNone, the ID will remain thesame.


34/38


1. In Page view, at the bottom of the document window, click Design.2. Click the layer for which you want to set properties.3. On the View menu, click Task Pane.4. In the Layers task pane, underLayer properties, click Properties.5. In the Position dialog box, choose from among the position properties.

To modify layer visibility, layer z-index, and layer ID, use the Layers task pane.Otherwise, use your mouse pointer for resizing the layers, or the task pane to controlprecise layer dimensions.

To modify layer visibility1. In Page view, at the bottom of the document window, click Design.2. On the View menu, click Task Pane.

3. In Layers task pane, in the Layer Visibility column, click layer to modify.

The open eye icon indicates that the layer is visible by default.

The closed eye icon indicates that the layer is hidden by default.No icon means that the layer inherits the visibility setting from the previous layer.

4. Click again to change layer visibility.

To modify layer z-index

1. In Page view, at the bottom of the document window, click Design .2. On the View menu, click Task Pane.3. In the Layers task pane, in the Layer Z-index column, double-click the layer that

you want to modify.4. Type the desired z-index in the box.

To modify layer ID1. In Page view, at the bottom of the document window, click Design.2. On the View menu, click Task Pane.3. In the Layers task pane, in the Layer ID column, double-click the layer that you

want to rename.4. Type the desired layer name in the box.

To modify layer size1.

In Page view, at the bottom of the document window, click Design.2. Click the corner of the layer that you want to resize and drag the corner until thelayer is the desired size.

To modify layer size to precise dimensions1. In Page view, at the bottom of the document window, click Design.2. On the View menu, click Task Pane.


35/38


3. In the Layers task pane, right-click the layer that you want to modify, and thenclick Positioning on the shortcut menu.

4. In the Position dialog box, underLocation and size, enter the desired width andheight in the Width and Height boxes.

BehaviorsBehaviors in FrontPage are scripting options that enable you to quickly add interactivityor increased functionality to text or other elements of your Web page.A Behavior is a combination of an event and an action that you want to occur when asite visitor interacts with a Web page or an element of a page.You can customize built-in FrontPage Behaviors by using a task pane .

Events

An event is a condition that causes a Web browser to trigger a script. Event namesusually reflect how they are activated. For example, the onMouseOverevent is

triggered when the mouse pointer moves over a page element. Likewise, theonMouseClick event is activated when the user clicks a page element.

ActionsAn action is an instruction that executes when an event occurs. Actions arefunctions prewritten blocks of script code that perform a specific task, such asswapping an image or opening a browser window.

After you attach a script to a page element (using the Behaviors task pane), thebrowser "calls" the action that is triggered by the event.

Each action requires a set of properties and parameters in order to do a task. InFrontPage, you can view or edit the properties for each action using the Behaviors taskpane.

You can customize built-in FrontPage Behaviors by using a task pane1. In Page view, at the bottom of the document window, click Design.2. On the Format menu, click Behaviors. The Behaviors task pane opens.3. On the page, select the text or graphic you want to work with.4. In the Behaviors task pane, click Insert, and then click the action you want.5. In the dialog box that appears, select the options you want, and then click OK.6. UnderEvents, point to the default event, and then click the arrow to choose the

event you want.7. Depending on the action you choose, select any additional options that define theevent for the action.

Every Behavior is very simple to insert,1. On the Format menu, click Behaviors.2. In the Behaviors task pane, click Insert, and then select a Behavior.


36/38


Redirecting users to another Web siteThere are two ways to redirect a browser to another URL. The first is to use a metatagredirect in the header of the HTML. The second is to use JavaScript, which is how theGo To URL Behavior works.

The primary reason to use a scripted Behavior is flexibility; you can customize the scriptfor specific needs. You can also bind multiple Behaviors to a single event. The metatagalways acts alone and cannot easily be combined with other Behaviors.

To redirect a user to a new site:1. In the Behaviors task pane, click the Insert button and choose Go To URL.2. In the Go To URL dialog box, enter the URL in the Go To URL box,

Redirecting users with specific browsersTo accommodate different browsers and versions, you can create a common page thatredirects users of certain browsers and versions to one page, and users of all other

browsers and versions to another page.1. Open your Web page.2. In the Behaviors task pane, click Insert, and then click Check Browser.3. In the If the current browser type is drop-down menu, click the target browser.4. In the Version drop-down menu, click the browser version.5. Select the Go To URL check box, and type the URL to redirect users who are

using the target browser.6. In the Otherwise, for all other browsers section, select the Go To URL check

box, and then type the URL to redirect users who are not using the targetbrowser.

Sometimes you have to check whether users have a specific plug-in installed on their

computers. A common example is the Windows Media player. FrontPage 2003 has aBehavior called Check Plug-in to solve this issue. The Check Plug-in Behavior worksexactly like the Check Browser Behavior.

To check plug-ins:1. Open your Web page.2. In Behaviors task pane, click the Insert button, and then click Check Plug-in.3. In the If the current plug-in is drop-down menu, click the target plug-in.4. Check the Go To URL check box and type the URL to redirect users who are

using the target plug-in.5. In the Otherwise, for all other plug-ins section, select the Go To URL check

box, and then type the URL to redirect users who are not using the target plug-in.

To create a drop-down jump menu:1. Click the page on which you want to place the menu.2. In the Behaviors task pane, click Insert, and then choose Jump Menu.3. Click Add.4. In the Add Choice dialog box, specify the text for the drop-down menu item.5. In the Value box, type the URL associated with the menu item.


37/38


6. To save the menu, click OK.

Creating rollover imagesRollover images add a nice professional touch without making the site unusable forusers who have a dial-up connection. With the Swap Image and Swap Image RestoreBehaviors, rollover buttons are easy to implement.

To create a rollover image:1. Click an image to select it.2. On the Behaviors task pane, click Insert, and then click Swap Image. Select the

Preload Images and Restore on mouseout event check boxes.

3. To locate the image for the rollover, click Browse.

Opening external links in a new windowThere are times when you will want to open a page in a new window without closing thecurrent window. New windows can be opened from any hyperlink, whether text- orimage-based. For images, simply select the graphic and insert the Open BrowserWindow Behavior from the Behaviortask pane. In the Open Browser Window dialogbox, type the URL in the Go To URL box, and the name you want associated with thenew window in the Window name box.

For text hyperlinks, however, replace the http:// in the URL with JavaScript:// before

highlighting the text and adding the Open Browser Window Behavior. If you do notchange the http:// portion of the URL to begin with JavaScript://, when the link is clicked,the page may open in the current window as well as in the new window, depending onwhich browser is being used. Using JavaScript:// gives you more control over theBehavior, regardless of which browser is calling the new window.


38/38


Once you have replaced the http:// withJavaScript://, simply select the URL and insert theOpen Browser Window Behavior from theBehaviortask pane. In the Open Browser

Window dialog box, type the URL in the Go ToURL box and the name you want associated withthe new window in the Window name box.

If you use A HREF, you can also use target=new toopen a link in a new window. However, much likethe Go To URL Behavior, using a Behavior in thisinstance provides more flexibility. With the A HREFtag, the new window will open to the default size ofthe users browser.

With the Open Browser Window Behavior, you cancontrol the appearance of the new window,including the size, the presence of scrollbars, and ahost of additional customizations.

For clickable links, you will want to make sure thatthe Open Browser Window Behavior is set to workon the onClick event. With the associated graphicor text selected, you will see an event in the Eventcolumn of the Behavior task pane associated withthe action Open Browser Window (which appears in

the Action column). Click the arrow that appears tothe right of the event in the Event column, andselect onClick from the drop-down list

Selecting the arrow to the right of the event in theBehavior task pane reveals a drop-down list of

events from which you can select an event to associate with an action.

If you are using links from your local site, the Preview view may not operate properlywhen testing your links. In these cases, use the Preview in Browser option from the Filemenu.

To display text in the status bar:1. In the Behaviors task pane, click Insert.2. Click Set Text, and then click Set Text of Status Bar.3. In the Message box, type your message, and then click OK.

Date post:	08-Apr-2018
Category:	Documents
Upload:	george-pillar
View:	235 times
Download:	0 times

FrontPage 2003 Intermediate

Documents