Rutgers - FrontPage 98 (Advanced)

1,150 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,150
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Rutgers - FrontPage 98 (Advanced)

    1. 1. 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
    2. 2. Workshop Overview: Review of Goals <ul><li>Review MS FrontPage 98’s Basic Features and Begin to Utilize it as a development environment for advanced Web design. </li></ul><ul><li>Learn practical skills to enhance your institutions' Web sites. </li></ul><ul><li>Gain familiarity with the the use of JavaScript for client-side scripting and the use of Active Server Pages for server-side scripting. </li></ul><ul><li>Learn about ODBC connectivity for dynamic database driven web sites </li></ul><ul><li>Learn about the SDK for FrontPage 98 and Visual InterDev. </li></ul>http://www. njin .net
    3. 3. About Your Instructor <ul><li>5 Years Experience With Web Technologies in Higher Ed and Industry </li></ul><ul><li>Designed and Implemented Clio Web Project For Internet Web Hosting at Rutgers University </li></ul><ul><li>Currently serving as Intranet WebMaster on Y2K Team at Warburg Dillon Read, LLC </li></ul><ul><li>Instructor’s Home Page: http://clioweb.net/mdobe </li></ul>FOR MORE INFO... http://www. njin .net
    4. 4. “ Advanced Web Design” Administrative Information <ul><li>Workshop Agenda and Slides available in Hard Copy and on the Web. </li></ul><ul><li>Prerequisites: A good working knowledge of HTML and Web servers is recommended. </li></ul><ul><li>Handouts on Active Server Pages and Microsoft Access Databases </li></ul><ul><li>Workshop runs 9:00 AM - 4:00 PM on April 15, 1999 and April 23, 1999. </li></ul><ul><li>See the NJIN Web Site </li></ul>FOR MORE INFO ... http://www. njin .net
    5. 5. Hands-on Exercises: About The Systems <ul><li>Will Use an NT Server and Workstations in the Classroom For this Workshop </li></ul><ul><li>Web Host For Examples: Tripod </li></ul><ul><li>Will Make Use of Web Browsers and MS-FrontPage 98 </li></ul><ul><li>Course Accounts Will Allow You Access to your FrontPage 98 Webs on the Web Server </li></ul><ul><li>Access to Class Accounts After Class </li></ul>http://www. njin .net
    6. 7. FP Explorer Features <ul><li>The Concept of FrontPage Webs </li></ul><ul><li>Web Creation and Publishing </li></ul><ul><li>Import/Export of Files and Directories </li></ul><ul><li>Multiple Views of Web Content </li></ul><ul><ul><li>Navigational Components </li></ul></ul><ul><ul><li>Themes </li></ul></ul><ul><ul><li>Hyperlink Status and Task Lists </li></ul></ul>http://www. njin .net
    7. 9. FP Editor Features <ul><li>Built-In Templates </li></ul><ul><li>Three Views (WYSIWYG, The Code, Web Browse) </li></ul><ul><li>Text Formatting, Fonts, Images </li></ul><ul><li>Spell Checking </li></ul><ul><li>Tables </li></ul><ul><li>Bots … An Alternative to CGI </li></ul><ul><li>Image Map Support </li></ul>http://www. njin .net
    8. 11. Why Use Programs at All? How Do You Get “Interactivity”? <ul><li>Automate Processes on the Web: Scripting in the Tradition of the DOS Batch File and the UNIX Shell Script </li></ul><ul><li>When To Use a Script: Calculations, Animation, Window/Frame Control, Pup-up Messages, Form Field Update/Validation, Dynamic Page Control, Browser Detection </li></ul><ul><li>Ultimately: Transaction Processing </li></ul><ul><li>Foundation of Transaction Processing is Ability to Interact With Databases: Scripting Has Limitations </li></ul>http://www. njin .net
    9. 12. What Are Your Web Development Options? <ul><li>Code Must Reside on the Server </li></ul><ul><li>Code Can Be Executed on the Server or in a Client Browser </li></ul><ul><li>May Run a Mix of Code, Some Intended For Client and Other For Server-Side Execution </li></ul>http://www. njin .net
    10. 13. What is JavaScript Anyway? <ul><li>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. </li></ul><ul><li>JavaScript is not Java. Java is not JavaScript … Microsoft version called JScript </li></ul><ul><li>Java programs, by contrast, are compiled on the server and executed on the client </li></ul><ul><li>JavaScript descended From Netscape’s LiveScript Language (1995) </li></ul><ul><li>Runs With Netscape 2 and Above and IE 3 and Above </li></ul>http://www. njin .net
    11. 14. What is it Good For? <ul><li>Event-Driven Language: You Link JavaScript to a Form Element to Add Interactivity </li></ul><ul><li>Can Be Used For Dynamic Content: </li></ul><ul><ul><ul><li>Date, Time, Status Bars and Scrolling Banners </li></ul></ul></ul><ul><ul><ul><li>Also Used For Client-Side Data Validation </li></ul></ul></ul><ul><li>Because There is No Need For Server-Side Configuration, You Can Use It With ANY WEB HOSTING SERVICE </li></ul>http://www. njin .net
    12. 15. How Do I Insert Scripts? Method 1: Using HTML View <ul><li>Go to HTML View in Editor and Copy/Paste or Type in Code </li></ul><ul><li>From Menu Bar: Insert/Advanced/Script </li></ul><ul><li>Once Script is Inserted You Can See a J Icon Where the Script Was Inserted </li></ul><ul><li>Also Have Ability to Preview Page to Check Behavior of Script </li></ul>http://www. njin .net
    13. 16. How Do I Make It Do That? Part I: Embedding JS in HTML Tags <ul><li>Have You Ever Seen the A Page That Displays a Default Status Bar Message? </li></ul><ul><li>This is often an Example of Event Handler JavaScript Code Being Put Inside the HTML <body> Tag </li></ul><ul><li><Body onLoad=“window.defaultStatus=‘foo bar’ ”> </li></ul><ul><li>This will display the message foo bar in the status bar. </li></ul>http://www. njin .net
    14. 17. Hands-On Exercises Part I <ul><li>Try to Add a Default Status Message to a Web Page You Create </li></ul><ul><li>Display This Page is Your Browser Locally </li></ul><ul><li>Upload This Page to Your Class Account and See How Well it Works </li></ul>http://www. njin .net
    15. 18. Class Break Take 15 Minutes to Stretch!
    16. 19. How Do I Insert Scripts? Method 2: Using FP Script Editor <ul><li>From Menu Bar: Insert/Advanced/Script </li></ul><ul><li>Once Script is Inserted You Can See a J Icon Where the Script Was Inserted </li></ul><ul><li>Also Have Ability to Preview Page to Check Behavior of Script </li></ul><ul><li>Where to Insert the Script: Header vs. Body </li></ul>http://www. njin .net
    17. 21. How Do I Make It Do That? Part II: Event-Driven Scripting <ul><li>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: </li></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/agenda. htm </li></ul></ul><ul><ul><li>Drop-Down Menu for Position Papers: </li></ul></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/background/position-papers. htm </li></ul></ul><ul><ul><li>Launch New Browser for Award Certificates: </li></ul></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/awards/index. htm </li></ul></ul><ul><ul><li>News Ticker With Current Date/Time : </li></ul></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/committee-frames. htm </li></ul></ul>http://www. njin .net
    18. 22. Simple JavaScript Demo 1: Drop Down List <ul><li>Objective of JavaScript Code: Allow Conference Attendees to Choose The Appropriate Document to Read </li></ul><ul><li>Code Source Courtesy of ZDU JavaScript Course </li></ul>http://www. njin .net
    19. 26. Simple JavaScript Demo 2: Generating a New Browser Window <ul><li>Objective of JavaScript Code: Dynamically Display Sample Award Certificates </li></ul><ul><li>Code Source From Laura Lemay's Web Site: </li></ul><ul><li>http://www. starlingtech .com/books/ javascript /old/index.html </li></ul>http://www. njin .net
    20. 30. Simple JavaScript Demo 3: Scrolling News Banner With Current Date/Time <ul><li>Objective of JavaScript Code: Create A Presentation That Gives the Audience Live Information at the Top of the Page </li></ul><ul><li>Code Source Modified From ZDU JavaScript Course </li></ul>http://www. njin .net
    21. 34. Hands-On Exercises Part II <ul><li>Copy and Modify JavaScript From Web Pages on Tripod-Based Symposium Agenda to Your Local Pages: </li></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/agenda. htm </li></ul></ul><ul><ul><li>Drop-Down Menu for Position Papers: </li></ul></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/background/position-papers. htm </li></ul></ul><ul><ul><li>Launch New Browser for Award Certificates: </li></ul></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/awards/index. htm </li></ul></ul><ul><ul><li>News Ticker With Current Date/Time: </li></ul></ul><ul><ul><li>http://members.tripod.com/mdobe/1994/committee-frames. htm </li></ul></ul>http://www. njin .net
    22. 35. Debugging JavaScript Code <ul><li>RULE #1: Be Sure to Check With IE and Navigator! Many Scripts Break In IE 3/4!!! </li></ul><ul><li>Week Syntax/Error Checking Features in Language </li></ul><ul><li>Navigator Browser Has Tools Built In for Debugging [Can Add line to code to trap errors: document.write (x)] </li></ul><ul><li>Applications Development Tools Have Debugging Features: Visual Studio, Macromedia, Symantec and Netscape Tools </li></ul>http://www. njin .net
    23. 36. What to Do About Old Browsers: Tips For Degrading Gracefully <ul><li>Make Sure That The Message is Not Lost If JavaScript Doesn’t Work With Visitor’s Browser </li></ul><ul><li>Code to Hide JavaScript From Older Browsers: </li></ul><ul><li>Note: This Code Is Not Needed For JS Code embedded in HTML Tags </li></ul><ul><li><SCRIPT LANGUAGE=“JavaScript”> </li></ul><ul><li><! --hide JS code </li></ul><ul><li>code block </li></ul><ul><li>// end JS hide--> </li></ul><ul><li></SCRIPT> </li></ul>http://www. njin .net
    24. 37. Lunch Please Be Back By 1 PM!
    25. 38. JavaScript Development Resources Indexes <ul><li>Courses and Books </li></ul><ul><li>ZDU JavaScript Course </li></ul><ul><li>Danny Goodman’s JavaScript Bible </li></ul><ul><li>Web Sites </li></ul><ul><li>Netscape DevEdge </li></ul><ul><ul><li>http://developer. netscape .com/ </li></ul></ul><ul><li>Microsoft’s Scripting Technologies Site </li></ul><ul><ul><li>http:// msdn . microsoft .com/scripting/ </li></ul></ul>http://www. njin .net
    26. 39. Evolving Standards and Tools <ul><li>Earliest Standards for Web Programming: Common Gateway Interface (CGI) </li></ul><ul><li>Microsoft Technologies Include Active Server Pages For Server-Side Scripting. CGI Programs Can Run On Windows Servers, But ASP is more common. </li></ul><ul><li>Netscape Invented JavaScript To Extend Server Power, Became a Standard for Client-Side Programming. </li></ul>http://www. njin .net
    27. 40. CGI and Perl: A Note on Windows Implementations <ul><li>CGI Always An Option With Windows Servers: Usually Use VB Script </li></ul><ul><li>Perl Now Available For Win32 Platform! </li></ul><ul><ul><li>Active State Perl http://www. activestate .com/ </li></ul></ul><ul><ul><li>Perl Resource Kit For Win32 (O’Reilly) </li></ul></ul><ul><li>Speed of CGI vs. Speed of ASP </li></ul>http://www. njin .net
    28. 41. Scripting Database Queries http://www. njin .net <ul><li>Part I: Demo Creation of A Database (MS Access 97) </li></ul><ul><li>Part II: Demo Creation of A System DSN to Allow ODBC Access to the Database on the Server </li></ul><ul><li>Part III: Hands-On -- Use Database Region Wizard to Generate Query Page Which Uses ASP to Query the Access Database </li></ul>
    29. 42. Creating A Simple Database With MS Access 97 http://www. njin .net <ul><li>Start MS Access 97 and Select Open New Blank Database </li></ul><ul><li>Click on New in the Tables Pane </li></ul><ul><li>Select Design View and Click OK </li></ul><ul><li>Inside Design View Set Up Field Names and Data Types: LastName, FirstName, School, NationalDelegation, Committee </li></ul><ul><li>Save the Table and Name it Students </li></ul><ul><li>Switch to Datasheet View and Enter Student Data </li></ul><ul><li>Save the Database and Import it Into Your FrontPage Web </li></ul>
    30. 46. Setting Up ODBC Access: 4 Steps to Creating a DSN http://www. njin .net <ul><li>Step 1: Select ODBC From the Control Panel </li></ul><ul><li>Step 2: Select Add From the System DSN Panel </li></ul><ul><li>Step 3: Select MS Access From the List of Drivers on the Create New Database Source Panel and then Click on the Finish Button </li></ul><ul><li>Step 4: Type in a Data Source Name and Description, Select the Database and then Click on the ok button </li></ul>
    31. 47. Adding a Data Source Name (DSN) STEP 1 STEP 2 STEP 3 STEP 4
    32. 48. Class Break Take 15 Minutes to Stretch!
    33. 49. Hands-On Database Query Scripting With FP 98 and MS Access http://www. njin .net <ul><li>Create An ASP Query Page In Your Own FrontPage Web to Automatically Generate A Table With All Students in the Symposium </li></ul><ul><li>Parameters You Need to Know: </li></ul><ul><ul><li>DSN = academics </li></ul></ul><ul><ul><li>Table = Students </li></ul></ul><ul><ul><li>Fields = LastName, School, NationalDelegation, Committee </li></ul></ul><ul><li>First Step is to Create the SQL Query </li></ul>
    34. 50. Scripting Database Queries: Creating an SQL Query String in MS Access 97 http://www. njin .net <ul><li>Create New Query With Simple Query Wizard </li></ul><ul><li>Select the Fields to Include </li></ul><ul><li>Name the Query and Save It </li></ul><ul><li>Copy the SQL Statement From the SQL View Window </li></ul>
    35. 53. Scripting Database Queries: Using the FrontPage 98 Database Region Wizard http://www. njin .net <ul><li>Database Region Wizard Generates Query Page Which Uses ASP to Query the Access Database </li></ul><ul><li>Insert/Database/Database Region Wizard </li></ul><ul><li>Enter ODBC Source Name DSN (Here academics) </li></ul><ul><li>Past SQL Query String From Memory Buffer </li></ul><ul><li>Add Each Field From Query String </li></ul><ul><li>Save as foo.asp in a directory where scripts are allowable </li></ul><ul><li>Check foo.asp in a Web Browser! </li></ul>
    36. 58. FrontPage Editor Database Region Wizard Reminders
    37. 60. Extending the FrontPage 98 Environment: MS Downloads http://www. njin .net <ul><li>MS Web Sites Have Sample Code, Demos, Patches and White Papers </li></ul><ul><ul><li>FrontPage Web Site </li></ul></ul><ul><ul><li>http://www. microsoft .com/ frontpage / </li></ul></ul><ul><ul><li>Office Update Site http:// officeupdate . microsoft .com/welcome/ frontpage .htm </li></ul></ul><ul><ul><li> Example of Themes and Web Templates Pack (See Handout) </li></ul></ul><ul><ul><li>MSDN Online </li></ul></ul><ul><ul><li>http:// msdn . microsoft .com/default.asp </li></ul></ul>
    38. 61. Customizing the FrontPage 98 Environment With the SDK http://www. njin .net <ul><li>Contents of the SDK </li></ul><ul><ul><li>Theme Designer </li></ul></ul><ul><ul><li>Custom Templates and Wizards </li></ul></ul><ul><ul><li>Menu Customization </li></ul></ul><ul><ul><li>“ Designer HTML” </li></ul></ul><ul><ul><li>OLE Automation </li></ul></ul><ul><li>How to Get the SDK? </li></ul><ul><ul><li>It is located on the FP 98 CD-ROM </li></ul></ul><ul><ul><li>The Directory is /SDK! </li></ul></ul>
    39. 62. Taking the Next Step: An Overview of Visual InterDev <ul><li>Exhausted the Capabilities of FrontPage 98? The Next Step is Visual InterDev ... </li></ul><ul><li>Contents of Visual InterDev? See Datasheet Handout </li></ul><ul><li>Cost? Approximately $549 (Also Have Academic and Volume Pricing) </li></ul><ul><li>How to Get It? Order Online or From Reseller </li></ul><ul><li>Check Out the Visual IntervDev Info on Microsoft Developer Network Online and Order a Free 90 Day Trial Version… </li></ul><ul><li>http:// msdn . microsoft .com/ vinterdev / </li></ul>http://www. njin .net
    40. 63. Web Development Resources Indexes <ul><li>Yahoo </li></ul><ul><ul><li>http://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/ </li></ul></ul><ul><li>Netscape DevEdge </li></ul><ul><ul><li>http://developer. netscape .com/ </li></ul></ul><ul><li>Sun’s JavaSoft </li></ul><ul><ul><li>http:// java .sun.com </li></ul></ul><ul><li>Microsoft’s Developer Network </li></ul><ul><ul><li>http://www. microsoft .com/ sitebuilder / </li></ul></ul>http://www. njin .net
    41. 64. What We Accomplished Today <ul><li>Reviewed MS FrontPage 98’s Basic Features and Began to Utilize it as a development environment for advanced Web design. </li></ul><ul><li>Learned practical skills to enhance your institutions' Web sites. </li></ul><ul><li>Gained familiarity with the the use of JavaScript for client-side scripting and the use of Active Server Pages for server-side scripting. </li></ul><ul><li>Learned about ODBC connectivity for dynamic database driven web sites </li></ul><ul><li>Learned about the SDK for FrontPage 98 and Visual InterDev. </li></ul>http://www. njin .net
    42. 65. For Further Information <ul><li>See the Seminar Site at: </li></ul><ul><li>http://www.clioweb.net/mdobe/teaching/1999/NJIN-ITP/ </li></ul><ul><li>Feel Free to Contact the Instructor </li></ul><ul><ul><li>E-mail: [email_address] </li></ul></ul><ul><ul><li>Tel: (203) 719-0136 </li></ul></ul>http://www. njin .net

    ×