© 2002 ComputerPREP, Inc. All rights reserved. FrontPage 2000: Module II

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 2: Setting Up Frames

Objectives Create frames pages Modify frames pages and frames Accommodate non-frame browsers

Creating Frames Pages Frames page – an HTML page that divides the browser window into multiple frames Frame – an element of a frames page in which Web content displays Initially, frames pages contain no content When you create a frames page, assign a source URL to each frame –Source URL – identifies the URL of a page or file in your current Web that loads into a frame when the frame page opens

Creating Frames Pages (cont’d) To create a frames page: –Click on File, New, Page… to display the Frames Pages card of the New dialog box –Double-click on a frames page template that is appropriate for your Web site –Specify which pages to display in the individual frames You must set an initial page to display in each frame; otherwise, when the frames page is displayed in a browser, it will display empty frames

Modifying a Frames Page To add a new frame to a frames page: –Press and hold CTRL –Drag a frame border to split the frame in two To split a frame into evenly divided columns or rows: –Click in the frame to select it –Click on Frames, Split Frame To delete a frame: –Click in the frame to select it –Click on Frames, Delete Frame

Modifying Frames Modify frame properties to: –Adjust the frame size –Change frame margins –Create hyperlinks in a frame to a target page in your Web When you adjust the frame size, specify height and width settings as follows: –Pixel – the frame size always remains the same, or –Percent – the frame size is a percentage of the browser window width or height –Relative – used in conjunction with the Pixel and Percent settings; sizes any remaining frames to the available space after you resize a frame

Accommodating Non-Frame Browsers Not all browsers are frame-compatible Users using a non-frame browser automatically receive a “No frames” message You should create alternative contents pages so that, if a browser that is not frame-compatible encounters a page with frames, the alternate content pages display instead of the “No frames” message

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 3: Using Advanced Navigation Features

Objectives Work with Navigation view Use shared borders Implement navigation bars Insert FrontPage components

Working with Navigation View Navigation view displays your current Web navigation structure In Navigation view, you can: –Add an existing page to the current structure –Change the current structure –Rename a Web page –Add an external page to your structure –Delete a Web page from the structure –Print the navigation structure

Using Shared Borders Use shared borders to display Web page elements that are repeated from page to page, such as: –Navigation bars –Banners –Page footers –Logos –Copyright information Shared borders are automatically created and enabled when you create a site with most FrontPage templates You can disable shared borders for an entire Web site or for any given Web page

Implementing Navigation Bars Navigation bars – graphical or textual components that incorporate hyperlinks to pages that are part of the Web site structure Use the Navigation Bar Properties dialog box to: –Modify the navigation bar structure to display hyperlinks at any level –Modify the navigation bar to display vertically or horizontally, and as buttons or as text You must add navigation bars separately to pages without shared borders You can add more than one navigation bar to a page

Inserting FrontPage Components Components – custom-made scripts provided by FrontPage to perform specific tasks Two such components are: –The Page Banner component – displays an image or text and is automatically added to your Web pages if shared borders are enabled –The Table of Contents component – shows the titles for and provides links to every Web page in your Web site

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 4: Creating Forms

Objectives Create forms Collect form information Work with search forms

Creating Forms Form – a collection of fields on a page, in which users enter information that is stored in a file or database for later use Use form fields to gather information; the six types of form fields are: –Check boxes –Radio buttons –Text boxes –Push buttons –Scrolling text boxes –Drop-down menus

Creating a Form Using a Form Template To create a form using a Form template: –Click on File, New, Page… –Double-click a form template –Place the new page into the navigation structure –Modify the template as desired

Creating a Form Using the Form Page Wizard To create a form using the Form Page Wizard: –Click on File, New, Page… –Double-click on Form Page Wizard –Specify the data you want to gather, which determines which fields are placed on the form –Specify the way you want to lay out the fields –Specify whether to include a table of contents

Creating a Form From Scratch To create a form from scratch: –Insert a skeleton form onto a page –Insert the form fields into the form: Position the insertion point at the desired location Click on Insert, Form Click on the desired field type

Modifying Form Field Properties Modify form field properties by displaying the Properties dialog box for form elements You can: –Rename text box fields –Specify the choices available in a drop-down menu –Specify the tab order in a form –Make selectable labels for check boxes –Make selectable labels for radio buttons

Validating Form Data Validating form data sets up rules that govern the way in which data is entered Validate form fields by displaying the Validation dialog box for form elements –Click on the Validate button in the form field’s Properties dialog box to display the Validation dialog box

Collecting Form Information Form handlers – programs on a server that execute when a user submits a form, collecting the information from the form and saving it in a specified format Form handlers: –Save the form results to a text file or to an HTML file so that you can create a link to the file and allow site visitors to view the information –Send the form results in an each time a form is submitted –Save the form results to a new or existing database (this features requires a server that supports Active Server Pages)

Creating Confirmation Pages When a site visitor submits a form, FrontPage automatically displays a confirmation page, which displays a list of form field names and their values To create a customized confirmation page: –Create a new, blank page –Type any desired text –Use the Insert, Component, Confirmation Field… command to insert form fields Use the Confirmation Page tab of the Options for Saving Results of Form dialog box to tie the confirmation page to its form

Working with Search Forms A search form enables site visitors to find topics of interest quickly To create a search form: –Position the insertion point where the form is to be inserted –Click on Insert, Component, Search Form… –Make any desired changes in the Search Form Properties dialog box

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 5: Working with Databases

Objectives Connect to a database Display database results to a Web page Query a database

Connecting to a Database Database basics: –A database is composed of tables, which contain information about a particular topic –A table is composed of records, which contain all the information for a specific entity –A record is composed of fields, which are individual items of information –A database can have multiple views, which contain information that may be extracted from multiple tables and displayed in its own, temporary table

Connecting to a Database (cont’d) Database connection – specifies the name, location and type of database that you want to access, along with any other required parameters The four types of possible database connections are: –A file-based data connection to a database, such as a Microsoft Access database –A System Data Source Name (System DSN) on a Web server –A network connection to a database server (such as Microsoft SQL Server) –A custom connection

Connecting to a Database (cont’d) When you connect to a database, FrontPage creates the FPDP folder, in which you can import the database The FPDP folder cannot be viewed in a Web browser To protect the privacy of databases, move them into the FPDP folder

Adding Database Information to Your Web Page When a database connection is established, use the Database Results Wizard to add information from the database to your Web pages You can: –Select the record source –Select the database fields to display –Specify how to sort or filter the data –Specify how to format the database results –Display records together or split them into smaller groups

Creating Database Hyperlinks with Parameters After you create database results on your Web page, you can create hyperlinks with parameters, which send field values from the database results on one page to another page containing database results –For example, create a hyperlink from each restaurant name displayed on one page to other pages that will show the information for each linked restaurant separately

Querying a Database Create a query to let site visitors search for information in a database by: –Creating a custom query (requires knowledge of SQL) –Using the Database Results Wizard Use the Database Results Wizard to create a search form to find records that match certain criteria and display them in a database results region beneath the search form

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 6: Creating Special Effects

Objectives Add active content to Web pages Add animation to Web pages Add multimedia to Web pages

Adding a Hit Counter to a Web Page Hit counter – a counter that increments by one each time a Web page is accessed Use the Hit Counter Properties dialog box to insert a hit counter: –Specify the desired counter style –Specify the number at which to start the hit counter –Specify the number of digits required to display the number of hits on your page You can reset a hit counter after a Web has been published

Adding a Marquee to a Web Page Marquee – displays lines of text that scroll or slide across a Web page To create a marquee: –Select the text to convert into a marquee –Click on Insert, Component, Marquee… Use the Marquee Properties dialog box to customize a marquee: –Specify its size and background color –Specify the direction and speed at which the marquee scrolls across the screen

Creating Hover Buttons Hover buttons – special graphics that change their appearance when you position the mouse pointer over them or click on them Use the Hover Button Properties dialog box to create hover buttons: –Modify the button’s text label, default hyperlink, hover effects, colors and size –Set a picture for a hover button or set a picture for the hover effect on a hover button –Add a sound effect to a hover button

Add a Banner Ad to a Web Page Banner ad – displays a series of images, one after another, with a transition effect between pictures Use the Banner Ad Manager Properties dialog box to create a banner ad: –Specify a transition effect –Create a hyperlink from a banner ad to the Web page for the product or service advertised in the ad

Adding Animation to a Web Page You can add animation effects to page elements, such as text, paragraphs, buttons and pictures Use the DHTML Effects dialog box to add animation to a Web page: –Specify the action the site visitor needs to perform to trigger the effect –Specify the effect that will result –Specify the text or picture to which the effect will be applied

Creating Page Transitions Page transition – special visual effects that occur as visitors navigate from one page to another Use the Page Transitions dialog box to create page transitions: –Specify the event that will trigger the transition effect –Specify the desired effect –Specify the duration of the effect

Adding Multimedia to Web Pages You can add background sound to your Web pages that play when the page is loaded or refreshed You can also insert video clips into Web pages and control how a visitor views the clips by setting options for video playback –FrontPage supports only the Windows-based Audio-Visual file format (.avi)

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 7: Using Advanced Add-Ins

Objectives Add a plug-in Insert an ActiveX control Insert a Java applet

Adding a Plug-In Plug-in – a self-contained programming application that is embedded into a Web browser to perform a specific function Use the Plug-In Properties dialog box to insert a plug-in: –Specify the file to insert as a plug-in –Specify a message for browsers without plug-in support –Specify the size and layout of the plug-in

Inserting an ActiveX Control ActiveX control – a reusable application that adds a special function to your Web pages Thousands of ActiveX applications can be purchased from software vendors Use the Insert ActiveX Control dialog box to insert an ActiveX control Use the ActiveX Control Properties dialog box to modify the ActiveX control after it is on your Web page

Inserting a Java Applet Java – a general-purpose programming language designed to work on the Internet or an intranet Many small Java programs, or applets, are available for inclusion on your Web pages After you import a Java applet into your Web page, use the Java Applet Properties dialog box to provide the necessary parameters for its use

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 8: Working with HTML Code

Objectives View and edit existing HTML code Insert HTML code into a Web page

Viewing HTML Code Hypertext Markup Language (HTML) – the standard for describing the contents and appearance of pages on the World Wide Web HTML consists of pairs of opening and closing tags, enclosing attributes and values The tags describe the elements on a Web page, such as: –A paragraph of text –A table –An image

Viewing HTML Code (cont’d) HTML code displays in HTML view FrontPage provides the ability to: –Color-code HTML code to differentiate among text, tags, attribute names, attribute values, comments and scripts –Change which colors display page elements –Specify whether the HTML tags and attributes are displayed in lowercase or uppercase letters –Specify the amount of indentation –Modify how FrontPage formats and displays specific HTML tags

Editing Existing HTML Code HTML view allows you to perform all standard text editing functions such as copy, cut, paste, find and replace When working with frame sets, you can: –Edit the HTML of any page displayed in a frame by clicking on that page, then clicking on the HTML tab –Edit the HTML of the frames page by clicking on the Frames Page HTML tab

Inserting HTML Code into a Web Page You can add HTML code to your Web page: –Using HTML view, working in the color-coded text editor, or –Using the HTML Markup component, which enables you to add HTML code while in Normal view You can also add META tags, which are used to provide information and keywords for search engines to use when searching your Web page

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 9: Using Style Sheets

Objectives Create and use style sheets Use positioning to place elements on a page

Creating and Using Style Sheets Style sheets – text files that contain formatting codes that can be applied to page elements Three types of style sheets: –External (cascading) style sheet – used to apply the same styles consistently across all pages in a Web –Embedded style sheet – used to define styles for the current page only –Inline style sheet – used to define styles for individual elements on a page

Creating an Embedded Style Sheet To create an embedded style sheet: –Select the text to which you want to apply a style –Display the Style dialog box –Click on the desired style To modify an embedded style sheet: –Display the Modify Style dialog box –Click on Format –Use the available options in the Format submenu to format items as needed

Creating and Linking to an External Style Sheet To create an external style sheet: –Click on File, New, Page… –Display the Style Sheets card of the New dialog box –Double-click on the desired style To link to an external style sheet: –Click on Format, Style Sheet Links… –Click on “All pages,” then click on Add –Double-click on the external style sheet Modify the external style sheet using the Modify Style dialog box

Using Positioning to Place Elements on a Page Positioning – enables you to control the exact location and layer order of a page element Absolute-style positioning – enables you to position an element by dragging it to the location you want or by specifying coordinates –An absolutely positioned page element is not part of the page flow; it appears either in front of or behind the text flow

Using Positioning to Place Elements on a Page (cont’d) Relative-style positioning – places text elements at a fixed point in the text flow –A relatively positioned page element remains intact in the text flow when you make changes above and below the element Relative-style positioning can be used for animation and DHTML effects; absolute-style positioning cannot

© 2002 ComputerPREP, Inc. All rights reserved. Lesson 10: Maintaining a Web

Objectives Set detailed file properties Establish security

Setting Detailed File Properties FrontPage provides the capability to add detailed properties to files: –Use the Summary card of the Properties dialog box to add comments, which site visitors cannot see, to any file in your Web –Use the Workgroup card of the Properties dialog box to specify categories by which to organize files located in different folders (or different files located in the same folder) so you can view your files in logical groups

Setting Detailed File Properties (cont’d) FrontPage provides the capability to add detailed properties to files (cont’d): –Use the Workgroup card of the Properties dialog box to assign a file to a person or workgroup, then monitor the file’s progress –Use the Workgroup card of the Properties dialog box to assign a review status to Web pages to better track your pages as you prepare them for publication

Establishing Security FrontPage provides administrative tools you can use to set permissions and limit access to Webs you create and edit on a Web server Add users or user groups to the Web’s user list and specify permissions for them: –Browse – allows users or user groups to view and interact with the Web pages –Author – allows users or user groups to create and delete Web pages –Administer – allows users or user groups to create and delete Webs and Web pages, designate administrators and authors, and restrict users from accessing a Web

Establishing Security (cont’d) Permissions are set at the base- or root-level Web Subwebs, which are Webs nested inside other Webs, automatically inherit the same permissions established at the root level You can establish unique permissions for subwebs To create a subweb: –Convert a folder to a Web –Import a Web into a folder and convert the folder to a Web –Publish one Web to another as a subweb

Establishing Security (cont’d) Source control – a feature that ensures only one person at a time edits a file in a multi-authoring environment Source control tasks include: –Checking out a file – other authors can open the file, but cannot modify it –Checking in a file after editing and saving it – the file is available to other authors for checking out –Undoing a file checkout – the file is checked in without any of the changes that were made to it since it was checked out being applied