10 Adding Interactivity to a Web Site YOU

10 Adding Interactivity to a Web Site YOU WILL LEARN TO… Section 10. 1 • Define scripting • Summarize interactivity design guidelines • Identify scripting languages • Compare common scripting languages • Identify markup languages

10 Adding Interactivity to a Web Site YOU WILL LEARN TO… Section 10. 2 • Apply DHTML effects • Create a banner ad • Add update information • Remove a page from a template • Insert layers Section 10. 3 • Create a form • Identify different field types • Place fields and labels into forms • Add a jump menu

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Focus on Reading Main Ideas Key Terms Scripting languages make Web pages dynamic and interactive. Examples of scripting languages include Java. Script, Java applets, CGI, and DHTML. XML and XHTML are types of markup languages. script interactivity Java. Script Java applet Common Gateway Interface (CGI) markup languages Extensible Markup Language (XML) Extensible Hypertext Markup Language (XHTML)

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Scripting and Interactivity You can use scripts to add interactivity to your Web pages. Interactivity on a Web site allows you to solicit and receive information from your visitors. script A short program (p. 278) interactivity Allows communication (p. 278)

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Scripting Languages Scripting languages can be used to create interactive elements, such as: • rollover buttons • banners • displays • clocks • forms • games

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Scripting Languages Java. Script is a scripting language that works as part of an HTML document. As the Web page loads onto a user’s computer, the browser reads the Java. Script and completes the operation. Java. Script A scripting language (p. 279)

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Scripting Languages Java applet is a short Java applet code program that can be used to create interactive elements that operate separately from the overall Web page. A Java date picker applet allows users to select travel dates by clicking on a pop-up calendar. Java applet A short Java code program that runs in a browser. (p. 279)

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Scripting Languages Common Gateway Interface (CGI) is a type Interface (CGI) of script that allows information to transfer back and forth in real-time between two computers. Common Gateway Interface (CGI) A type of script (p. 279)

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Scripting Languages Dynamic HTML (DHTML) is a scripting language that is an extension of HTML. It allows you to create interactive Web sites by combining these three elements: • HTML • Cascading Style Sheets • Java. Script

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Markup Languages HTML is a markup language that defines the language appearance of data. Extensible Markup Language (XML) is a Language (XML) markup language that defines the meaning, and not the appearance, of Web elements. markup language A text file (p. 280) Extensible Markup Language (XML) A markup language (p. 280)

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Markup Languages Extensible Hypertext Markup Language (XHTML) uses the same structure and tags as HTML, but it designed to be far more versatile. Extensible Hypertext Markup Language (XHTML) A markup language (p. 280)

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Interactivity Design Guidelines Creating an interactive Web page that people will enjoy visiting requires careful planning. Follow these guidelines when adding interactive elements to a Web page: • Use Interactivity only when it enhances the site. • Keep it simple so it is not distracting or annoying. • Make sure users know how to use interactive elements. • Check interactivity in all browsers visitors will use.

Section 10. 1 Scripting and Markup Languages pp. 278 -281 Section Assessment Identify You can use ____ to create special effects such as fading backgrounds and rollover buttons. A. DHTML B. Cascading Style Sheets C. XML D. Java. Script Place answer here.

Section 10. 2 Adding Dynamic Effects Guide to Reading Main Ideas Key Terms Dreamweaver makes it easy to apply dynamic effects to your pages. Dynamic effects include banner ads, automatic date insertion, and layers. Using dynamic effects makes your Web site interesting. rollover button banner ad layer pp. 283 -291

Section 10. 2 Adding Dynamic Effects pp. 283 -291 Banner Ads Rollover buttons are often used to create banner ads. Dreamweaver uses DHTML to create rollover buttons. rollover button A button (p. 283) banner ads An advertisement that, (p. 283)

Section 10. 2 Adding Dynamic Effects pp. 283 -291 Update Information You can use Dreamweaver’s Insert Date feature to display the current date and/or show when the site’s content was last updated.

Section 10. 2 Adding Dynamic Effects pp. 283 -291 Using DHTML Behaviors Web designers often use layers instead of tables layers when they want to position objects precisely on a page. Adding a lot of layers can cause a page to download very slowly. layer A container (p. 288)

Section 10. 2 Adding Dynamic Effects pp. 283 -291 • Activity 10 A – Insert a Banner Ad (p. 284) • Activity 10 B – Add Update Information (p. 285) • Activity 10 C – Remove a Page from a Template (p. 286) • Activity 10 D – Insert Show-Hide Layers Behavior (p. 288)

Section 10. 2 Adding Dynamic Effects pp. 283 -291 Section Assessment Examine Which of the following can be used to position objects on a Web page? A. layers B. rollover buttons C. labels D. banner ads Place answer here.

Section 10. 3 Adding a Form to a Web Site Focus on Reading Main Ideas Key Terms Forms make Web sites interactive by letting users submit data. Users enter each data item in a field identified by a label. Different types of fields fulfill different purposes. form field label jump menu pp. 292 -298

Section 10. 3 Adding a Form to a Web Site pp. 292 -298 Forms and Their Components Web programmers and designers create forms, forms made up of fields and fields labels, to allow users to labels enter and submit data. form A structure (p. 292) field A form component (p. 292) label Text that tells (p. 292) Most forms also contain a Submit and Reset button.

Section 10. 3 Adding a Form to a Web Site pp. 292 -298 Form Fields A form can contain different types of fields. Each type of limited option form field has a specific purpose: • A text field lets users enter a line of text • A text area lets users enter many lines of text. • A radio button lets users select one of multiple options. • A check box lets users select one or more options. • A list/menu lets users select from a list of choices. • Submit/Reset Buttons let users submit or erase a form.

Section 10. 3 Adding a Form to a Web Site pp. 292 -298 Adding Dynamic Effects to a Form A jump menu can be jump menu used to make a form more dynamic. jump menu A dynamic menu (p. 297)

Section 10. 3 Adding a Form to a Web Site pp. 292 -298 • Activity 10 E – Create a Form with Fields (p. 293) • Activity 10 F – Add a Jump Menu to a Web Page (p. 297)

Section 10. 3 Adding a Form to a Web Site pp. 292 -298 Section Assessment True/False A label tells the user what type of information to enter into a form’s field. Place answer here.

10 Adding Interactivity to a Web Site Chapter Review Evaluate If you want users to choose only one option, what type of form field would you use? A. text field B. check box C. radio button D. text area Place answer here.

10 Adding Interactivity to a Web Site Chapter Review Analyze Why would you want to include a dynamic element that shows the date when the page was last updated? Place answer here.