Transcript
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: mdobe@clioweb.net Tel: (203) 719-0136
http://www.njin.net
top related