10 adding interactivity to a web site section 10.1 define scripting summarize interactivity design...
TRANSCRIPT
10 Adding Interactivity to a Web Site
Section 10.1• Define scripting• Summarize interactivity design guidelines• Identify scripting languages• Compare common scripting languages• Identify markup languages
YOU WILL LEARN TO…
10 Adding Interactivity to a Web Site
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
YOU WILL LEARN TO…
Section 10.1 Scripting and Markup LanguagesFocus on Reading
Main Ideas
Scripting languages make Web pages dynamic and interactive. Examples of scripting languages include JavaScript, Java applets, CGI, and DHTML. XML and XHTML are types of markup languages.
Key Terms
script
interactivity
JavaScript
Java applet
Common Gateway Interface (CGI)
markup languages
Extensible Markup Language (XML)
Extensible Hypertext Markup Language (XHTML)
pp. 278-281
Section 10.1 Scripting and Markup LanguagesScripting 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 that you can insert into HTML code using special tags; expands the capabilities of HTML to create dynamic Web pages. (p. 278)
interactivity Allows communication between the visitor and the Web page; the user can perform an action that the Web page responds to. (p. 278)
pp. 278-281
Sectionpp. 278-281
Scripting and Markup Languages
Scripting languages can be used to create interactive elements, such as:
• rollover buttons• banners• displays• clocks• forms• games
Scripting Languages
10.1
Section 10.1 Scripting and Markup LanguagesScripting Languages
JavaScript JavaScript is ais 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 JavaScript and completes the operation.
JavaScript A scripting language used to enhance the capabilities of Web programming by allowing the creation of special effects such as fading backgrounds and button rollovers. (p. 279)
pp. 278-281
Section 10.1 Scripting and Markup LanguagesScripting Languages
Java applet Java applet is a short 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)
pp. 278-281
Section 10.1 Scripting and Markup LanguagesScripting Languages
Common Gateway Common Gateway Interface (CGI) Interface (CGI) is a type of script that allows information to transfer back and forth in real-time between two computers.
Common Gateway Interface (CGI) A type of script that provides a link, or interface, between an external application and a Web server. This link allows the Web server to pass a user’s request to an application program and then return information to the user. (p. 279)
pp. 278-281
Section Scripting and Markup 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• JavaScript
Scripting Languages
10.1pp. 278-281
Section 10.1 Scripting and Markup LanguagesMarkup Languages
HTML is a markup markup languagelanguage that defines the appearance of data.
Extensible Markup Extensible Markup Language (XML)Language (XML) is a markup language that defines the meaning, and not the appearance, of Web elements.
markup language A text file that contains special sequences of characters that function as tags, such as HTML, XML, and XHTML. (p. 280)
Extensible Markup Language (XML) A markup language whose tags impose a specific structure and meaning on data without providing any information about how the data should be displayed. (p. 280)
pp. 278-281
Section 10.1 Scripting and Markup LanguagesMarkup Languages
Extensible Hypertext Extensible Hypertext Markup Language Markup Language (XHTML)(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 that is designed to bridge the differences between HTML and XML. (p. 280)
pp. 278-281
Section Scripting and Markup Languages
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.
Interactivity Design Guidelines
10.1pp. 278-281
Section Scripting and Markup Languagespp. 278-281
Identify You can use ________ to create special effects such as fading backgrounds and rollover buttons.
A. DHTML
B. Cascading Style Sheets
C. XML
D. JavaScript
D. JavaScript
Section Assessment
10.1
Section 10.2 Adding Dynamic EffectsGuide to Reading
Main Ideas
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.
Key Terms
rollover button
banner ad
layer
pp. 283-291
Section 10.2 Adding Dynamic EffectsBanner Ads
Rollover buttons are often used to create banner ads.
Dreamweaver uses DHTML to create rollover buttons.
rollover button A button that changes appearance when the mouse pointer passes over it. (p. 283)
banner ads An advertisement that, when clicked, takes the visitor to the sponsor’s home page. (p. 283)
pp. 283-291
Sectionpp. 283-291
Adding Dynamic Effects
You can use Dreamweaver’s Insert Date feature to display the current date and/or show when the site’s content was last updated.
Update Information
10.2
Section 10.2 Adding Dynamic Effects
Using DHTML Behaviors
Web designers often use layers layers instead of tables 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 within an HTML page that can include objects such as text, images, and forms. (p. 288)
pp. 283-291
Sectionpp. 283-291
Adding Dynamic Effects
• Activity 10A – Insert a Banner Ad (p. 284)• Activity 10B – Add Update Information (p. 285)• Activity 10C – Remove a Page from a Template (p. 286)• Activity 10D – Insert Show-Hide Layers Behavior (p. 288)
10.2
Section Adding Dynamic Effectspp. 283-291
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
A. layers
Section Assessment
10.2
Section 10.3 Adding a Form to a Web SiteFocus on Reading
Main Ideas
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.
Key Terms
form
field
label
jump menu
pp. 292-298
Section 10.3 Adding a Form to a Web SiteForms and Their Components
Web programmers and designers create formsforms, made up of fieldsfields and labelslabels, to allow users to enter and submit data.
Most forms also contain a Submit and Reset button.
form A structure that includes fields for collecting data from visitors to a Web site. (p. 292)
field A form component that allows the user to enter information into the form. A form field often corresponds to a field database. (p. 292)
label Text that tells the user what type of information to enter into a form’s field. (p. 292)
pp. 292-298
Sectionpp. 292-298
Adding a Form to a Web Site
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.
Form Fields
10.3
Section 10.3 Adding a Form to a Web SiteAdding Dynamic Effects to a Form
A jump menujump menu can be used to make a form more dynamic.
jump menu A dynamic menu that allows the user to access hyperlinks from a single drop-down menu. (p. 297)
pp. 292-298
Sectionpp. 292-298
Adding a Form to a Web Site
• Activity 10E – Create a Form with Fields (p. 293)• Activity 10F – Add a Jump Menu to a Web Page (p. 297)
10.3
Section Adding a Form to a Web Sitepp. 292-298
True/False A label tells the user what type of information to enter into a form’s field.
True. A label is the text that tells a user what type of information to enter into a form.
Section Assessment
10.3
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
C. radio button
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?
Including the date of the most recent update will assure your target audience that your content is recent and that your site does not contain old or out-of-date material.
10 Adding Interactivity to a Web Site
Resources
For more resources on this chapter, go to the Introduction to Web Design Using Dreamweaver Web site at WebDesignDW.glencoe.com.