• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rutgers - FrontPage 98 (Advanced)
 

Rutgers - FrontPage 98 (Advanced)

on

  • 771 views

 

Statistics

Views

Total Views
771
Views on SlideShare
768
Embed Views
3

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rutgers - FrontPage 98 (Advanced) Rutgers - FrontPage 98 (Advanced) Presentation Transcript

  • Advanced Web Design With FrontPage 98 Introduction to Web Programming A Hands-On Workshop in the Scholarly Communications Center By Michael Dobe Sponsored by The New Jersey Intercampus Network Internet 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: Tripod
    • Will Make Use of Web Browsers and MS-FrontPage 98
    • Course Accounts Will Allow You Access to your FrontPage 98 Webs on the Web Server
    • Access to Class Accounts After Class
    http://www. njin .net
  •  
  • FP Explorer Features
    • The Concept of FrontPage Webs
    • Web Creation and Publishing
    • Import/Export of Files and Directories
    • Multiple Views of Web Content
      • Navigational Components
      • Themes
      • Hyperlink Status and Task Lists
    http://www. njin .net
  •  
  • FP Editor Features
    • Built-In Templates
    • Three Views (WYSIWYG, The Code, Web Browse)
    • Text Formatting, Fonts, Images
    • Spell Checking
    • Tables
    • 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 Banners
        • Also 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/Script
    • Once Script is Inserted You Can See a J Icon Where the Script Was Inserted
    • Also 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/Script
    • Once Script is Inserted You Can See a J Icon Where the Script Was Inserted
    • Also Have Ability to Preview Page to Check Behavior of Script
    • Where 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 code
    • code block
    • // end JS hide-->
    • </SCRIPT>
    http://www. njin .net
  • Lunch Please Be Back By 1 PM!
  • JavaScript Development Resources Indexes
    • Courses and Books
    • ZDU JavaScript Course
    • Danny Goodman’s JavaScript Bible
    • Web Sites
    • Netscape 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 Panel
    • Step 2: Select Add From the System DSN Panel
    • Step 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 3 STEP 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 Include
    • Name the Query and Save It
    • Copy 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 .htm
      • Example 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
    • Yahoo
      • http://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/
    • Netscape DevEdge
      • http://developer. netscape .com/
    • Sun’s JavaSoft
      • http:// java .sun.com
    • Microsoft’s Developer Network
      • http://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_address]
      • Tel: (203) 719-0136
    http://www. njin .net