Creating Dynamic Web Pages with FrontPage Barry Sosinsky Valda Hilley Chapter 14 Creating Dynamic Web Pages with FrontPage Barry Sosinsky Valda Hilley Programming the Web

Learning Objectives To learn how to add dynamic effects to FrontPages How to access the Script Editor and the Visual Basic Editor To explore some of FrontPage’s Web components When to use JavaScript and VBScript to add extra functionality to FrontPage How to add multimedia effects in FrontPage

Introduction FrontPage is what is known as an Integrated Development Environment or IDE. The goal of an IDE is to create a program using a toolbox, usually with a graphical interface. The results of a FrontPage Web design is HTML output. Drag a text box or Submit button to the screen, and FrontPage writes the necessary HTML POST code to add that feature to your output file. With FrontPage you can readily add dynamic effects such as a “hover” button, which FrontPage will create using DHTML, to your web pages.

Additional Capabilities FrontPage supports calls to external programs, JavaScript and VBScript, attachment to data sources, ASP code, ActiveX, and more. Some things such as a hit counters, hover buttons, marquees, and many other things are FrontPage “components,” elements internal in FrontPage that can be added without programming or external action. Among FrontPage’s many programming tools you will find a Script Editor for VBScript and JavaScript, a built-in Visual Basic Editor, and developing support for CSS, XML, and other leading edge features.

The Graphical Design Surface for a FrontPage Page

Viewing Source Code in FrontPage

FrontPage Basics FrontPage uses a multi-tabbed interface that has three main page views: Normal, HTML, and Preview. Normal is the graphical design surface, HTML is the code the program generates, and Preview is how the page would look in a browser. Using Front Page you can include XML and ASP code in your pages, as well as XHTML. The only perquisite for the data to be correctly displayed is that the markup conform to the appropriate rules required by an XML or XHTML parser.

Working with Source Code You work with source code directly in the HTML view. FrontPage has a color coding scheme for different coded elements. You’ll find that black, which is the default color, is used for any text you type. HTML tags are in blue. Whenever you edit on the HTML tab this color coding scheme is observed. You can set Custom Coding from the Tools menu using the Color Coding tab of the Page Options dialog box.

Color Coding Tab The Color Coding tab of the Page Options dialog box is used to make the HTML view easier to read and work with.

HTML Source Tab The HTML Source tab allows you to change the look of your FrontPage source code.

Reading Through the Source Code Indented code is particularly useful in finding sections of code and making sure that your tags are paired.

The Microsoft Script Editor FrontPage comes with the Microsoft Script Editor, which lets you edit HTML tags and ASP files. This editor is useful to you when you need to work with VBScript or JavaScript that you add to your pages. The Script Editor is a better environment for debugging code than FrontPage’s HTML view, and it gives you a tool that works cooperatively with other Microsoft programming applications that also use the Microsoft Development Environment.

The Script Editor With Sample Code

Creating Web Effects Easily In FrontPage, you can create a number of popular Web effects easily using the built-in effects available through the Web Components dialog box.

Adding Special Effects FrontPage makes it easy to add special effects to your pages. You can use the built-in special effects such as page transitions, animation, and many other capabilities, or you can roll your own effects and add the code to FrontPage.

The Web Components Dialog Box

Hover Buttons FrontPage supplies a Java applet that creates a hover button effect. Use the Hover Button dialog box to specify the details easily.

Style Sheets Style sheets let you add colors, fonts, position objects, and perform many other formatting tasks in a consistent and easily managed way. There are two specifications for style sheets in common use: CSS-1, which is the formatting version of cascaded style sheets CSS-2 (see http://www.w3.org/TR/REC-CSS2/), which is the positioning version of CSS. FrontPage allows you to work with both versions, and is one of the leading applications for applying the most recent advances in this technology.

The Link Style Sheet Dialog Box FrontPage lets you define your style parameters locally or in a separate template file. To set up an external style sheet, use the Style Sheet Links command from the Format menu to make the assignment.

Modifying the Rendering of HTML Tags With Style Properties If you select the Style command from the Format menu in FrontPage you open the central Style dialog box. Use the Style dialog box to assign a style to selected elements on your web page. It’s easier to do this when you select objects in the Normal view than when you try and modify your code.

The FrontPage Style Dialog Box The central Style dialog box lets you assign a style to selected elements on your web page – or create a new one.

Client-Side Programming When you create programs or scripts using something that can be processed inside a browser via client-side programming, you are off-loading the processing required. This lessens your servers requirements, as well as lowering your network loading. You also have the opportunity to create a more custom program based on user interaction. Browsers can support several different types of programming languages. However, this client-side programming comes at a cost, and that cost is compatibility.

Enhancing Web Pages Using VBScript VBScript is essentially a subset of Microsoft's Visual Basic language. You can incorporate VBScript on your FrontPage web pages. The only significant downside to using VBScript is that it is not supported on Netscape, and will not run on that browser. For this reason, it is better to develop VBScripts for client-side execution when you know that your clients are going to be using Internet Explorer. If your web site runs on Microsoft Internet Information Server (IIS), VBScript is a valuable addition to server-side scripting on Active Server Pages.

The Visual Basic Editor VBScript can be used to create interactive forms, and is especially useful for client-side processing tasks.

The Capabilities of XML and XHTML FrontPage is compatible with both XML and XHTML. As long as your tags are well formed, and you maintain appropriate syntax you can add XML to FrontPage pages. FrontPage does have an XML formatting checker. To check your syntax, right click on the source and select the Apply XML Formatting Rules. FrontPage will search your code to see that it conforms to XML requirements. The formatting tool is also useful to convert your code to a form that conforms to XHTML requirements.

Using DHTML for Special Effects Dynamic HTML lets you create special effects, animation, and even live data feeds to liven up your page. Developers use these effects to point out special features, liven up a web site, and a host of other reasons. Microsoft DHTML is implemented using the Internet Explorer object model, which is the model used for browser display, and not the model used for scripting, or for working with Java or ActiveX objects. Netscape’s version of DHTML is implemented differently than Microsoft’s.

The DHTML Effects Toolbar A number of DHTML events are included in FrontPage, and you can quickly apply them using the DHTML Effects toolbar.

Page Transitions A commonly used DHTML effects in FrontPage are page transitions. A page transition is an effect that is applied to your page whenever you either open or close that page. Among the several effects are wipes, fades, blinds, and others.

Using JavaScript in Front Page Microsoft uses a version of JavaScript that is called JScript, and there have been efforts to standardize between the two by the EMCA. Unlike VBScript, JavaScript enjoys wider browser support and this makes it more suitable for both client-side and server-side scripting; and FrontPage 2002 fully supports JavaScript. One common use of JavaScript is to validate FrontPage forms.

Adding Audio Files You can have FrontPage play a background sound whenever a viewer views that page, and the program is also capable of playing MIDI files. Most of the times you will want to add audio files to your pages directly by inserting that file directly on your page. You can insert the following file formats: WAV files AU ASF files RA

Adding Video Files Inserting video clips into your page isn’t any different than inserting a picture. You can add video files to your FrontPage web pages in any one of three different ways: Display The Video As a Picture File. Internet Explorer will display the video as a picture, but without video (VCR type) controls. This style creates a link that Netscape can't open. Display The Video Using An ActiveX Control. You can use a control display the video. You need to specify which control, or it is the Windows Media Player by default. Display The Video Using a Plug-In. If this option is selected, the viewer must configure their browser so that the plug-in they choose can play this content.

Adding Video Files (2) FrontPage and your Web server can deliver that video to a client, but it is up to the browser on the client side to play the video that is sent to it. Among a wide range of formats that FrontPage supports are: Audio Visual Interleaved or AVI files. This is a predominantly Microsoft format, but it enjoys wide industry support. QuickTime. Apple's QuickTime files, which were once called MOV or ActiveMovie files can be incorporated into pages. MPEG files can be played, although you will need an MPEG capable player to do so.

Plug-ins: Shockwave, Flash You can add to your browser’s capabilities by adding small programs called plug-ins that third party vendors offer. These plug-ins are often called for when you try and download, open, or play a file incorporated into a FrontPage Web page. Many of these plug-ins are related to multimedia file types:PDF, Shockwave, and Flash, animation programs.

The End