1 / 85

Chapter 4

Chapter 4. Forms. Chapter Objectives. Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule to a Web page Create a form Insert a table into a form. Chapter Objectives. Describe form objects

barbra
Download Presentation

Chapter 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 4 Forms

  2. Chapter Objectives • Discuss form processing • Describe the difference between client-side and server-side form processing • Add a horizontal rule to a Web page • Create a form • Insert a table into a form Chapter 4: Forms

  3. Chapter Objectives • Describe form objects • Describe and add text fields and text areas to a form • Describe and add check boxes and radio buttons to a form • Describe and add lists and menus to a form Chapter 4: Forms

  4. Chapter Objectives • Describe and add form buttons to a form • Describe form accessibility options • Apply behaviors to a form • View and test a form Chapter 4: Forms

  5. Starting Dreamweaver and Creating a New Page on the Alaska Parks Web Site • Click the Start button on the Windows taskbar • Click Adobe Dreamweaver CS4 on the Start menu or point to All Programs on the Start menu, and then click Adobe Dreamweaver CS4 on the All Programs list to start Dreamweaver • If necessary, display the panel groups • If the Alaska Parks hierarchy is not displayed, click the Files panel button and then click Alaska Parks on the Files pop-up menu to display the Alaska Parks Web site hierarchy in the Files panel Chapter 4: Forms

  6. Starting Dreamweaver and Creating a New Page on the Alaska Parks Web Site Chapter 4: Forms

  7. Copying Data Files to the Parks Web Site • Click the Files panel button, and then click the name of the drive containing your data files, such as Removable Disk (M:) • If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter04 folder to expand it • Expand the parks folder to display the data file • Click the volunteer.htm file to select it • Press ctrl+c to copy the file • If necessary, click the Files panel button, and then click the Alaska Parks Web site. Expand the your name folder and then the parks folder to select it • Press ctrl+v to paste the volunteer file in the parks folder Chapter 4: Forms

  8. Opening a New Document Window • Click File on the Application bar and then click New to open the New Document dialog box. If necessary, click Blank Page, click HTML in the Page Type list, click <none> in the Layout list, and then click the Create button to create a Web page • Click the Save button on the Standard toolbar to open the Save As dialog box • Type hotel_form as the file name. If necessary, select the parks folder, and then click the Save button to save the hotel_form.htm page in the Alaska Parks local folder. The path and file name appear on the document tab Chapter 4: Forms

  9. Opening a New Document Window Chapter 4: Forms

  10. Adding a Background Image to the Hotel_form Page • If necessary, click the panel groups Collapse to Icons arrow to collapse the panel groups • If necessary, click the Property inspector expander arrow to display both the upper and lower sections • Click the Page Properties button in the Property inspector to open the Page Properties dialog box • If necessary, click Appearance (HTML) in the Category column to display the HTML options Chapter 4: Forms

  11. Adding a Background Image to the Hotel_form Page • Click the Browse button to the right of the Background image box to open the Select Image Source dialog box • If necessary, navigate to the parks\images folder • Click parks_bkg.jpg and then click the OK button in the Select Image Source dialog box to select the image • Click the OK button in the Page Properties dialog box. If necessary, click the document window to display the hotel_form Web page with the background applied and the insertion point aligned at the left Chapter 4: Forms

  12. Adding a Background Image to the Hotel_form Page Chapter 4: Forms

  13. Inserting and Formatting the Page Title • If necessary, click the document window, and then type Alaska National Parks as the heading • Press Enter and then type Hotel Reservation Form as the second heading • Select both heading lines • Click Format on the Application bar, point to Align, and then click Center to center the headings • Apply Heading 1 to both lines to format the headings Chapter 4: Forms

  14. Inserting and Formatting the Page Title • Click anywhere on the page to deselect the headings • Title the page Alaska National Parks Hotel Form and then press Enter • Click the Save button on the Standard toolbar to save the page with the centered and formatted heading • Press the Enter key to move the insertion point below the second heading Chapter 4: Forms

  15. Inserting and Formatting the Page Title Chapter 4: Forms

  16. Inserting a Horizontal Rule • Click Insert on the Application bar, point to HTML, and then point to Horizontal Rule to highlight the Horizontal Rule command • Click Horizontal Rule to insert the horizontal rule below the heading and to display the Horizontal rule Property inspector • Click the Horizontal rule text box in the Property inspector and type horz_rule as the ID for the horizontal rule • Click the W (Width) text box and type 500 to decrease the line width. Press the tab key two times to move the insertion point to the H box Chapter 4: Forms

  17. Inserting a Horizontal Rule • Type 10 in the H (Height) text box to increase the line height • If necessary, click the Shading check box to deselect it • Click below the horizontal rule, and then click the Save button to save the hotel reservations form page Chapter 4: Forms

  18. Inserting a Horizontal Rule Chapter 4: Forms

  19. Inserting a Form • Click the Forms tab on the Insert bar to display the Form buttons • Verify that Invisible Elements is selected by clicking View on the Application bar, and then pointing to Visual Aids. If necessary, click Invisible Elements on the Visual Aids submenu to select it Chapter 4: Forms

  20. Setting the Form Properties • Double-click the Form ID text box in the Property inspector to select the default form name. Type hotel_form and then press the tab key to name the form • Type mailto:dedwards@parks.com (use your own e-mail address) in the Action text box • Click the Target box arrow, select _self, and then press the tab key to move the insertion point to the Enctype box • Type text/plain and press the Enter key to display text/plain in the Enctype box Chapter 4: Forms

  21. Setting the Form Properties Chapter 4: Forms

  22. Inserting a Table into a Form • Click inside the form (the dotted red outline) • Click Insert on the menu bar and then point to Table • Click Table to display the Table dialog box. Chapter 4: Forms

  23. Inserting a Table into a Form • Type the following values in the Table dialog box: Rows: 11 Columns: 2 Table width: 75 percent Border thickness: 4 Cell padding: 5 Cell spacing: 0 • Summary text: Hotel reservation form for Alaska National Parks • Click the OK button to insert the table into the form • Verify that the table is selected. Click the Align button in the Property inspector, and then select Center to center the table in the form outline and to display the table properties in the Property inspector Chapter 4: Forms

  24. Inserting a Table into a Form Chapter 4: Forms

  25. Formatting the Form • If necessary, select the table. In the Property inspector, click the Table box, type reservations as the ID, and then press the Enter key to name the table • If necessary, scroll up, click row 1, column 1, and then drag to select all of column 1. Click the W text box, type 35%, and then press the Enter key to set the column width to 35 percent • The column still should be selected. Click Format on the Application bar, point to Align, and then click Right to right align any text entered into column 1 • Click the Save button on the Standard toolbar to save the table Chapter 4: Forms

  26. Formatting the Form Chapter 4: Forms

  27. Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form • If necessary, scroll up and then click row 1, column 1 to place the insertion point in the cell • Type Name as the descriptive label and then press the TAB key to place the insertion point in row 1, column 2 • Click the Text Field button on the Forms tab to insert a Text Field form object • Double-click the TextField text box in the Property inspector to select the default name, type name to rename the TextField, and then press the tab key • Type 50 in the Char Width text box and then press the TAB key. If necessary, click Single line as the type Chapter 4: Forms

  28. Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form • Click row 2, column 1, type Address, and then press the TAB key • Click the Text Field button on the Forms tab to insert the Text Field form object • Double-click the TextField text box in the Property inspector, type address, and then press the TAB key • Type 50 in the Char Width text box and then press the TAB key to expand the text field width. If necessary, click Single line as the type • Click row 3, column 1, and then type City. Press the TAB key to move the insertion point to column 2 Chapter 4: Forms

  29. Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form • Click the Text Field button on the Forms category to Insert a text field • Type city as the TextField name • Type 50 in the Char Width text box and then press the TAB key to expand the field. Ensure that Single line is selected • Click row 4, column 1. Type State/Zip Code as the label and then press the tab key to move the insertion point to row 4, column 2 Chapter 4: Forms

  30. Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form • Type State and then press the SPACEBAR to add the State descriptive label • Click the Text Field button to insert a text field for State. Type state as the TextField name in the Property Inspector • Type 2 for the Char Width and Max Chars values. Press the tab key to resize the text field. Ensure that Single line is selected • Click to the right of the State Text Field form object and then press the Spacebar. Type Zip Code and then press the spacebar to add Zip Code as the descriptive label Chapter 4: Forms

  31. Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form • Click the Text Field button on the Forms tab to insert a text field for Zip Code • Type zip as the TextField name • Type 10 for the Char Width and Max Chars values and then press the TAB key to set the values to 10 • Type zip as the TextField name Chapter 4: Forms

  32. Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form • Type 10 for the Char width and Max chars values and then press the tab key to set the values to 10 • Ensure that Single line is selected • If necessary, scroll down. Click row 5, column 1, and then type E-mail address for the descriptive label • Press the tab key and then click the Text Field button to insert a text field for E-mail address • Type email as the TextField name to name the text field • Type 45 for the Char width value and then press the Enter key to adjust the size. Ensure that Single line is selected • Press ctrl+s to save the page Chapter 4: Forms

  33. Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form Chapter 4: Forms

  34. Adding Check Boxes • Click row 6, column 1, type Hotels as the descriptive label, and then press the TAB key • Click the Checkbox button on the Forms tab to add the check box to the form • Type hotel1 as the CheckBox name • Press the TAB key and then type alaska_national in the Checked value text box. Press the ENTER key to display the properties for the first check box • Click to the right of the Checkbox form object and then press SHIFT+ENTER to add a line break and to position the insertion point below the first check box Chapter 4: Forms

  35. Adding Check Boxes • Click the Checkbox button on the Forms tab to insert a second check box • Type hotel2 as the CheckBox name. Press the TAB key and then type fairbanks_royal in the Checked value text box to add the second check box. Press the ENTER key • Click to the right of the second check box, press SHIFT+ENTER to add a line break, and then click the Checkbox button on the Forms tab to insert a third check box • Type hotel3 as the CheckBox name • Press the TAB key and then type denali_inn in the Checked value text box. Press the ENTER key to add the third check box Chapter 4: Forms

  36. Adding Check Boxes • Click to the right of the third check box, press SHIFT+ENTER to add a line break, and then click the Checkbox button on the Forms tab to insert a fourth check box • Type hotel4 as the Checkbox name • Press the TAB key and then type arctic_hotel in the Checked value text box. Press the Enter key to add the properties for the fourth check box Chapter 4: Forms

  37. Adding Check Boxes • Click to the right of the first check box • Type Alaska National as the descriptive label for the first check box, and then press the Down arrow key • Type Fairbanks Royal as the descriptive label for the second check box, press the DOWN ARROW key, and then type Denali Inn as the label for the third check box • Press the DOWN ARROW key, and then type Arctic Hotel as the label for the fourth check box to add the descriptive labels for all four check boxes • Click the Save button on the Standard toolbar to save your work Chapter 4: Forms

  38. Adding Check Boxes Chapter 4: Forms

  39. Creating a Scrolling List • Click row 7, column 1. Type Accommodations and then press the TAB key. Click the List/Menu button on the Forms tab • Type accommodations as the List/Menu name to name the list • Click List in the Type options • Select the value in the Height box, and then type 2 to set the height to 2 • Click the Selections check box to allow multiple selections Chapter 4: Forms

  40. Creating a Scrolling List • Click the List Values button in the Property inspector to display the List Values dialog box • Type Single as the first Item Label, press the TAB key, and then type single as the Value to add a second line to the Item Label list • Press the TAB key • Type Double as the second Item Label, and then press the tab key • Type double as the Value and then press the TAB key • Type Suite as the third Item Label, and then press the tab key Chapter 4: Forms

  41. Creating a Scrolling List • Type suite as the Value and then press the TAB key • Type Luxury Suite as the fourth Item Label, and the press the tab key • Type luxury_suite as the Value to complete the items list • Click the OK button to display the list • Click Single in the Initially selected box in the Property inspector to designate it as the default item in the list • Click the Save button on the Standard Toolbar to save your work Chapter 4: Forms

  42. Creating a Scrolling List Chapter 4: Forms

  43. Creating a Pop-Up Menu • If necessary, scroll down and then click row 8, column 1 • Type Number of nights and then press the TAB key • Click the List/Menu button on the Forms tab to display the List/Menu form object • Type nights in the List/Menu text box to name the pop-up menu, and make sure Menu is selected as the Type • Click the List Values button in the Property inspector to display the List Values dialog box. Type 1 as the Item Label, press the tab key, and then type 1 for the Value Chapter 4: Forms

  44. Creating a Pop-Up Menu • Press the TAB key. Repeat Step 3, incrementing the number each time by 1 in the Item Label and Value fields, until the number 7 is added to the Item Label field and the Value field • Click the OK button to display the numbers in the Initially selected box • Click the number 1 in the Initially selected box in the Property inspector to create the default value Chapter 4: Forms

  45. Creating a Pop-Up Menu Chapter 4: Forms

  46. Inserting a Jump Menu • Click row 9, column 1, type Links, and then press the TAB key • Click the Jump Menu button on the Forms tab to display the Insert Jump Menu dialog box • If necessary, double-click the Text text box to select it, type Choose one, and then click the Plus (+) button to add “Choose one” as a menu item • Double-click the Text text box • Type Denali National Park and Preserve as the text for the second menu item and then press the tab key to move to the When selected, go to URL: text box Chapter 4: Forms

  47. Inserting a Jump Menu • Type http://www.nps.gov/dena and then point to the Plus button • Click the Plus button, double-click the Text text box, type Gates of the Arctic National Park and Preserves as the entry, and then press the TAB key • Type http://www.nps.gov/gaar to add Gates of the Arctic as the next menu item • Click the Plus button, double-click the Text text box, type Noatak National Preserve as the entry, and then press the TAB key Chapter 4: Forms

  48. Inserting a Jump Menu • Type http://www.nps.gov/noat to add Noatak National Preserve as the fourth menu item • Click the Plus button, double-click the Text text box, type Sitka National Historical Park as the entry, and then press the tab key • Type http://www.nps.gov/sitk for the link to add Sitka National Historical Park as the fifth menu item and to add the URL to the Insert Jump menu dialog box • Double-click in the Menu ID text box and type park_web_sites to name the menu • Click the Select first item after URL change check box to select the option Chapter 4: Forms

  49. Inserting a Jump Menu • Click the OK button to add the jump menu to the form • Click Choose one in the Initially selected box in the Property inspector • Click the Save button on the Standard toolbar Chapter 4: Forms

  50. Inserting a Jump Menu Chapter 4: Forms

More Related