Transcript To create a frames page

FrontPage 2000: Module II
© 2002 ComputerPREP, Inc. All rights reserved.
Lesson 2:
Setting Up Frames
© 2002 ComputerPREP, Inc. All rights reserved.
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
Lesson 3:
Using Advanced Navigation
Features
© 2002 ComputerPREP, Inc. All rights reserved.
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
Lesson 4:
Creating Forms
© 2002 ComputerPREP, Inc. All rights reserved.
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 e-mail 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
Lesson 5:
Working with Databases
© 2002 ComputerPREP, Inc. All rights reserved.
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
Lesson 6:
Creating Special Effects
© 2002 ComputerPREP, Inc. All rights reserved.
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)
Lesson 7:
Using Advanced Add-Ins
© 2002 ComputerPREP, Inc. All rights reserved.
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
Lesson 8:
Working with HTML Code
© 2002 ComputerPREP, Inc. All rights reserved.
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
Lesson 9:
Using Style Sheets
© 2002 ComputerPREP, Inc. All rights reserved.
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
Lesson 10:
Maintaining a Web
© 2002 ComputerPREP, Inc. All rights reserved.
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