Rutgers - FrontPage 98 (Advanced)

Advanced Web Design With FrontPage 98

Introduction to Web Programming A Hands-On Workshop in the Scholarly Communications

CenterBy Michael Dobe

Sponsored by The New Jersey Intercampus NetworkInternet Technology Project

http://www.njin.net

Workshop Overview: Review of Goals

Review MS FrontPage 98’s Basic Features and Begin to Utilize it as a development environment for advanced Web design.

Learn practical skills to enhance your institutions' Web sites.

Gain familiarity with the the use of JavaScript for client-side scripting and the use of Active Server Pages for server-side scripting.

Learn about ODBC connectivity for dynamic database driven web sites

Learn about the SDK for FrontPage 98 and Visual InterDev.

http://www.njin.net

About Your Instructor

5 Years Experience With Web Technologies in Higher Ed and Industry

Designed and Implemented Clio Web Project For Internet Web Hosting at Rutgers University

Currently serving as Intranet WebMaster on Y2K Team at Warburg Dillon Read, LLC

Instructor’s Home Page: http://clioweb.net/mdobe

FOR MORE INFO...

http://www.njin.net

“Advanced Web Design”Administrative Information

Workshop Agenda and Slides available in Hard Copy and on the Web.

Prerequisites: A good working knowledge of HTML and Web servers is recommended.

Handouts on Active Server Pages and Microsoft Access Databases

Workshop runs 9:00 AM - 4:00 PM on April 15, 1999 and April 23, 1999.

See the NJIN Web Site

FOR MORE INFO ...

http://www.njin.net

Hands-on Exercises: About The Systems

Will Use an NT Server and Workstations in the Classroom For this Workshop

Web Host For Examples: TripodWill Make Use of Web Browsers and

MS-FrontPage 98Course Accounts Will Allow You Access

to your FrontPage 98 Webs on the Web Server

Access to Class Accounts After Classhttp://www.njin.net

FP Explorer Features

http://www.njin.net

The Concept of FrontPage WebsWeb Creation and PublishingImport/Export of Files and DirectoriesMultiple Views of Web Content

Navigational Components Themes Hyperlink Status and Task Lists

FP Editor Features

Built-In TemplatesThree Views (WYSIWYG, The Code,

Web Browse) Text Formatting, Fonts, ImagesSpell CheckingTables Bots … An Alternative to CGI Image Map Support

http://www.njin.net

Why Use Programs at All?How Do You Get “Interactivity”?

Automate Processes on the Web: Scripting in the Tradition of the DOS Batch File and the UNIX Shell Script

When To Use a Script: Calculations, Animation, Window/Frame Control, Pup-up Messages, Form Field Update/Validation, Dynamic Page Control, Browser Detection

Ultimately: Transaction Processing Foundation of Transaction Processing is Ability

to Interact With Databases: Scripting Has Limitations

http://www.njin.net

What Are Your Web Development Options?

Code Must Reside on the Server

Code Can Be Executed on the Server or in a Client Browser

May Run a Mix of Code, Some Intended For Client and Other For Server-Side Execution

http://www.njin.net

What is JavaScript Anyway?

JavaScript is a scripting language that is usually interpreted by a Web Browser and Executed on the Client Machine. JavaScript Code is included in the HTML code of your Web pages.

JavaScript is not Java. Java is not JavaScript … Microsoft version called JScript

Java programs, by contrast, are compiled on the server and executed on the client

JavaScript descended From Netscape’s LiveScript Language (1995)

Runs With Netscape 2 and Above and IE 3 and Above

http://www.njin.net

What is it Good For?

Event-Driven Language: You Link JavaScript to a Form Element to Add Interactivity

Can Be Used For Dynamic Content:Date, Time, Status Bars and Scrolling BannersAlso Used For Client-Side Data Validation

Because There is No Need For Server-Side Configuration, You Can Use It With ANY WEB HOSTING SERVICE

http://www.njin.net

How Do I Insert Scripts?Method 1: Using HTML View

Go to HTML View in Editor and Copy/Paste or Type in Code

From Menu Bar: Insert/Advanced/ScriptOnce Script is Inserted You Can See a J

Icon Where the Script Was InsertedAlso Have Ability to Preview Page to

Check Behavior of Script

http://www.njin.net

How Do I Make It Do That? Part I: Embedding JS in HTML Tags

Have You Ever Seen the A Page That Displays a Default Status Bar Message?

This is often an Example of Event Handler JavaScript Code Being Put Inside the HTML <body> Tag

<Body onLoad=“window.defaultStatus=‘foo bar’ ”>

This will display the message foo bar in the status bar.http://www.njin.net

Hands-On Exercises Part I

Try to Add a Default Status Message to a Web Page You Create

Display This Page is Your Browser Locally

Upload This Page to Your Class Account and See How Well it Works

http://www.njin.net

Class Break

Take 15 Minutes to Stretch!

How Do I Insert Scripts?Method 2: Using FP Script Editor

From Menu Bar: Insert/Advanced/ScriptOnce Script is Inserted You Can See a J

Icon Where the Script Was InsertedAlso Have Ability to Preview Page to

Check Behavior of ScriptWhere to Insert the Script: Header vs.

Body

http://www.njin.net

How Do I Make It Do That? Part II: Event-Driven Scripting

3 Different Web Pages on Tripod-Based Symposium Agenda. Pages Show Code in Header and Integration With Form Elements in the Body of the Page:

http://members.tripod.com/mdobe/1994/agenda.htm Drop-Down Menu for Position Papers:http://members.tripod.com/mdobe/1994/background/position-papers.htm

Launch New Browser for Award Certificates:http://members.tripod.com/mdobe/1994/awards/index. htm

News Ticker With Current Date/Time :http://members.tripod.com/mdobe/1994/committee-frames. htm

http://www.njin.net

Simple JavaScript Demo 1: Drop Down List

Objective of JavaScript Code: Allow Conference Attendees to Choose The Appropriate Document to Read

Code Source Courtesy of ZDU JavaScript Course

http://www.njin.net

Simple JavaScript Demo 2:Generating a New Browser Window

Objective of JavaScript Code: Dynamically Display Sample Award Certificates

Code Source From Laura Lemay's Web Site:http://www.starlingtech.com/books/javascript/old/index.html

http://www.njin.net

Simple JavaScript Demo 3: Scrolling News Banner With Current Date/Time

Objective of JavaScript Code: Create A Presentation That Gives the Audience Live Information at the Top of the Page

Code Source Modified From ZDU JavaScript Course

http://www.njin.net

Hands-On Exercises Part II

Copy and Modify JavaScript From Web Pages on Tripod-Based Symposium Agenda to Your Local Pages:http://members.tripod.com/mdobe/1994/agenda.htm Drop-Down Menu for Position Papers:http://members.tripod.com/mdobe/1994/background/position-papers.htm

Launch New Browser for Award Certificates:http://members.tripod.com/mdobe/1994/awards/index.htm News Ticker With Current Date/Time:http://members.tripod.com/mdobe/1994/committee-frames.htm

http://www.njin.net

Debugging JavaScript Code

RULE #1: Be Sure to Check With IE and Navigator! Many Scripts Break In IE 3/4!!!

Week Syntax/Error Checking Features in Language

Navigator Browser Has Tools Built In for Debugging [Can Add line to code to trap errors: document.write (x)]

Applications Development Tools Have Debugging Features: Visual Studio, Macromedia, Symantec and Netscape Tools

http://www.njin.net

What to Do About Old Browsers: Tips

For Degrading Gracefully

Make Sure That The Message is Not Lost If JavaScript Doesn’t Work With Visitor’s Browser

Code to Hide JavaScript From Older Browsers:Note: This Code Is Not Needed For JS Code embedded in HTML Tags

<SCRIPT LANGUAGE=“JavaScript”><! --hide JS codecode block// end JS hide--></SCRIPT>

http://www.njin.net

Lunch

Please Be Back By 1 PM!

JavaScript Development Resources Indexes

Courses and BooksZDU JavaScript CourseDanny Goodman’s JavaScript Bible Web SitesNetscape DevEdge

http://developer.netscape.com/ Microsoft’s Scripting Technologies Site

http://msdn.microsoft.com/scripting/http://www.njin.net

Evolving Standards and Tools

Earliest Standards for Web Programming: Common Gateway Interface (CGI)

Microsoft Technologies Include Active Server Pages For Server-Side Scripting. CGI Programs Can Run On Windows Servers, But ASP is more common.

Netscape Invented JavaScript To Extend Server Power, Became a Standard for Client-Side Programming.

http://www.njin.net

CGI and Perl: A Note on Windows Implementations

CGI Always An Option With Windows Servers: Usually Use VB Script

Perl Now Available For Win32 Platform! Active State Perl http://www.

activestate.com/ Perl Resource Kit For Win32 (O’Reilly)

Speed of CGI vs. Speed of ASP http://www.njin.net

Scripting Database Queries

http://www.njin.net

Part I: Demo Creation of A Database (MS Access 97)

Part II: Demo Creation of A System DSN to Allow ODBC Access to the Database on the Server

Part III: Hands-On -- Use Database Region Wizard to Generate Query Page Which Uses ASP to Query the Access Database

Creating A Simple Database With MS Access 97

http://www.njin.net

Start MS Access 97 and Select Open New Blank Database Click on New in the Tables Pane Select Design View and Click OK Inside Design View Set Up Field Names and Data Types:

LastName, FirstName, School, NationalDelegation, Committee

Save the Table and Name it Students Switch to Datasheet View and Enter Student Data Save the Database and Import it Into Your FrontPage Web

Setting Up ODBC Access: 4 Steps to Creating a DSN

http://www.njin.net

Step 1: Select ODBC From the Control PanelStep 2: Select Add From the System DSN

PanelStep 3: Select MS Access From the List of

Drivers on the Create New Database Source Panel and then Click on the Finish Button

Step 4: Type in a Data Source Name and Description, Select the Database and then Click on the ok button

Adding a Data Source Name (DSN)

STEP 1

STEP 2

STEP 3STEP 4

Class Break

Take 15 Minutes to Stretch!

Hands-On Database Query Scripting With FP 98 and MS Access

http://www.njin.net

Create An ASP Query Page In Your Own FrontPage Web to Automatically Generate A Table With All Students in the Symposium

Parameters You Need to Know: DSN = academics Table = Students Fields = LastName, School, NationalDelegation,

Committee

First Step is to Create the SQL Query

Scripting Database Queries: Creating an

SQL Query String in MS Access 97

http://www.njin.net

Create New Query With Simple Query Wizard

Select the Fields to IncludeName the Query and Save ItCopy the SQL Statement From

the SQL View Window

Scripting Database Queries: Using the

FrontPage 98 Database Region Wizard

http://www.njin.net

Database Region Wizard Generates Query Page Which Uses ASP to Query the Access Database

Insert/Database/Database Region Wizard Enter ODBC Source Name DSN (Here academics) Past SQL Query String From Memory Buffer Add Each Field From Query String Save as foo.asp in a directory where scripts are

allowable Check foo.asp in a Web Browser!

FrontPage Editor Database Region Wizard Reminders

Extending the FrontPage 98 Environment: MS Downloads

http://www.njin.net

MS Web Sites Have Sample Code, Demos, Patches and White Papers FrontPage Web Site

http://www.microsoft.com/frontpage/ Office Update Site

http://officeupdate.microsoft.com/welcome/frontpage.htmExample of Themes and Web Templates Pack (See Handout)

MSDN Online

http://msdn.microsoft.com/default.asp

Customizing the FrontPage 98 Environment With the SDK

http://www.njin.net

Contents of the SDK Theme Designer Custom Templates and Wizards Menu Customization “Designer HTML” OLE Automation

How to Get the SDK? It is located on the FP 98 CD-ROM The Directory is /SDK!

Taking the Next Step: An Overview of Visual InterDev

Exhausted the Capabilities of FrontPage 98? The Next Step is Visual InterDev ...

Contents of Visual InterDev? See Datasheet Handout

Cost? Approximately $549 (Also Have Academic and Volume Pricing)

How to Get It? Order Online or From Reseller Check Out the Visual IntervDev Info on

Microsoft Developer Network Online and Order a Free 90 Day Trial Version…http://msdn.microsoft.com/vinterdev/http://www.njin.net

Web Development Resources Indexes

Yahoohttp://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/

Netscape DevEdgehttp://developer.netscape.com/

Sun’s JavaSofthttp://java.sun.com

Microsoft’s Developer Networkhttp://www.microsoft.com/sitebuilder/

http://www.njin.net

What We Accomplished Today

Reviewed MS FrontPage 98’s Basic Features and Began to Utilize it as a development environment for advanced Web design.

Learned practical skills to enhance your institutions' Web sites.

Gained familiarity with the the use of JavaScript for client-side scripting and the use of Active Server Pages for server-side scripting.

Learned about ODBC connectivity for dynamic database driven web sites

Learned about the SDK for FrontPage 98 and Visual InterDev.

http://www.njin.net

For Further Information

See the Seminar Site at:http://www.clioweb.net/mdobe/teaching/1999/NJIN-ITP/

Feel Free to Contact the Instructor E-mail: [email protected] Tel: (203) 719-0136

http://www.njin.net