Welcome to the Advanced Web Development Workshop

1. Welcome to the Advanced Web Development Workshop Using Microsoft FrontPage Using the USI Templates Creating Tables Creating Forms Testing Your Pages

2. Introduction to FrontPage • FrontPage as a Web editor • Writes the HTML code for you • You can develop pages in HTML or Normal view • You can easily apply style to text, much like Microsoft Word

3. Using FrontPage • To help make your pages compatible in most browsers, change your FP settings by going to: • Tools-->Page Options, Select the Compatibility tab.Change the settings to this:Enable only commands supported by the following:Browsers: Internet Explorer and NavigatorBrowser Versions: 4.0 browsers and laterServers: CustomUNCHECK Enable with Microsoft FrontPage Server Extensions.

4. FrontPage Tools • Buttons across top for quick tasks: • Bold, Italics, Font Face, Font color, Font size • New page, save, insert image, copy, paste • Alignment, bulleted lists • Check Spelling (under Tools) • Change Page Properties (the way it appears)

5. Page Properties • File -> Properties: changes background color, text color, page title. • Format -> Properties: change the page’s font style

6. Template Introduction • Currently there are four template styles • We use Active Server Pages (ASP) technology • We utilize Cascading Style Sheets (CSS) for site-wide style and placement

7. USI Template in FrontPage • Open the Template in FrontPage (template.asp) • Notice the areas we indicated for you to enter text. • Now look at the HTML code • Notice those same areas we marked for you to work within. • Find the ASP Include statements<!--#INCLUDE FILE=“header.asp”-- >

8. Using the USI Template • By the end of this class, we will have made a page similar to this: http://www.usi.edu/webservices/class/fpclass.asp

9. Let’s get started 1.) Enter your department name in the space indicated by selecting the text and typing. 2.) Next in the “Enter Content Here” type your name and a brief description of your duties in your department. 3.) Pretend you’ve been designated as the customer service rep for the department, you will have a Comments Form on this page and you want to encourage people to fill out the form so your office may serve the customers better. I have composed a sample paragraph for you to use and it is in Microsoft Word. Let’s get that text and paste it into our page.

10. Using Text from MS Word • Open Word, and open the document titled “comments.doc” • Select all the text. Copy • Then go to FrontPage, place the cursor where you would like to insert the text. Right Click, go to Paste Special. • Why we do this… • To remove the Microsoft junk HTML code that attaches itself to the Word document. Code like that could alter the page appearance or even cause an error in browsers.

11. Let’s get started (cont.) • Once you have typed and pasted the text. Let’s add some style. • Experiment changing the font size and color. Also make things in bold to draw attention or stress importance. • Creating Hyperlinks by: • Highlighting (selecting) the text you want linked, Right Click, go down to Hyperlink and type in the web URL or page filename. • For E-mail addresses, type in mailto:”yourname@usi.edu” • Save this page as: index.asp • Now go to Internet Explorer and see what we’ve done so far.

12. Adding the Left Links file • To utilize the same left links on several of your Webpages, create a left links ASP file. • First, create a new page • Begin typing the names of your links • Select the names and hyperlink them to the appropriate Webpage. • Save as, left.asp • Go back to your index page, go to the HTML view and locate the area (column) the left links will appear and type <!--#INCLUDE FILE=“left.asp”-- >

13. Adding Graphics • Why should we use graphics? • Adds to the overall appearance of the site. It’s eye-catching, can create a look of consistency/uniformity and can demonstrate something that is discussed in the text. • Types of graphics • JPEG (.jpg) mainly used for photos • GIF (.gif) mainly used for logos or buttons

14. About Graphics… • Keep the file sizes small • Image Resolution should be 72 dpi (dots per inch) • Use Alternative (ALT) text description for graphic identification • Image width and height should be modified in a graphics editor program.

15. Manipulating Graphics • Open Microsoft Photo EditorStart  Programs  Microsoft Office Tools  MS Photo Editor • Open the photo called “archyeagle.jpg” • Change: • Check photo resolution by going to File Properties • Crop the image (to use as a headshot for our page) • Photo width and height by going to Image  Resize • Save the image by going to File  Save as • Remember the file extensions • Remember to not save over the original image

16. Manipulating Graphics (cont.) • Let’s do the same for another image. • Open the file called “USILogo.tif” • Change: • Image Resolution • Image width and height • Save as .gif

17. Inserting Graphics in FrontPage • Place cursor where you would like to insert the image. • Click on the picture insert button, or go to Insert  Picture  From file • Once the image is on the page, Right click on the image. Go down to Picture Properties.

18. Picture Properties • Under the General Tab • Add ALT text • Under the Appearance Tab • Change alignment, horizontal and vertical spacing, border and border thickness • You can also specify size, but that should be done in the image editing program.

19. Inserting Graphics • Do the same process for our other image • Save the page, view in Internet Explorer.

20. Questions? • What we’ve covered so far • Intro to FrontPage • Intro to the USI templates and some of the technologies we use • Added text, pasted text from Word • Added graphics • Saved and viewed in browser.

21. Tables • Type the following pieces of information, with its label, on your page, each piece on a separate line and title it “Personal Information” • Your name • Department • Job title • Phone number • Organize your personal information

22. Tables • Create a table Table->Insert->Table • Determine number of rows and columns • Populate the table • Cut and past your information in the table • Manipulating a table and its cells • Merge 1st row both columns for header • Highlight the whole first row, right click and select “Merge Cells” • Center header text • Highlight header text or row and select center icon • OR right click row/cell, select “Cell Properties” and change Horizontal Alignment to “Center”

23. Tables • Add row for your e-mail address, between Job Title and Phone Number • How to Insert a row • First select an adjacent row to where the new row will be created (Job Title or Phone Number) • Table->Insert->Rows and Columns… • Depending on which adjacent row you’ve selected, select “Above” or “Below”

24. Tables • Populate your new row with the label “E-Mail Address” in the first column and your e-mail address in the 2nd column • Bold your header and your labels • Select the text and click on the “B” icon • Set table width • Right click on anywhere table and select “Table Properties” • Use pixels unit • Pixels are a more specific unit than percent (percent of the page/frame/division) • Max pixels within template = 500 • Select OK when done

25. Tables • Drag table to desired size • Drag both columns to desired size • Change background color on header • Right click on header cell and select “Cell Properties” • Choose a background color • Change background color on the rest of the cells • Select the remaining cells, right click and select “Cell Properties” • Choose a background color

26. Tables • Change the color of your fonts • Select the text you with to change • Click on the “A” icon or the “down arrow” next to the icon to change the color of the default color • Align your table to the center of the page • Right click anywhere on the table, choose “Table Properties” • Change alignment to “Center”

27. Tables and ADA Compliance • Allow those who are disabled to view your table • Coding your table to ADA web standards allows screen readers to communicate to disabled users • Using the “scope” attribute • Associate the table’s labels to their answers • Place the scope attribute in the label fields • Scope can have two values: Row or Col • If the label’s answer is in the same row, use the “row” value • If the label’s answer is in the same column, use the “col” value

28. Applying the scope attribute • Switch to the “HTML” view in FrontPage • Identify your label <TD> tags • Add the scope attribute within the <TD> tags • Eg: <td width="117" scope="row" bgcolor="#99CCFF"> • Placement of the attribute is flexible

29. More information about ADA • To check your pages for all accessibility issues, please check your pages with “Bobby” • http://www.cast.org/bobby/ • For more information on the W3C Web Content Accessibility Guidelines on tables, go here: http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns

30. Tables • Questions

31. Forms • Creating a comments form • Use existing table – We’ll be changing the table to accept information from other users on the web • Change “Personal Information” to “Comments Form” • We’ll use the existing labels to identify what we’ll be asking the user for

32. Forms • Creating your form • Move your cursor below the table • Insert->Form->Form • This creates form boundaries • The boundaries indicate where the data collection will take place • Move the table into the form boundaries • With your cursor next to the Submit button, hit return once to create some space to past the table

33. Forms • Highlight the whole table and cut and paste it within the form boundaries • Center the table if the alignment has changed • Form Fields • Different fields for different data collection • TextBox – One line answers with reasonable length • TextArea – Multi-line answers • CheckBox – Yes/No answers • Option Button (Radio button) – Single selection for multiple choices • DropDown Box – Selection for multiple choices

34. Forms • Creating TextBox form fields • Replace the existing answers with TextBox form fields • Highlight text, then Insert->Form->TextBox • Replace all of the answers • Add another question • We can add another area within our table to determine whether our user is Faculty, Staff or Student

35. Forms • Create another three rows underneath “Phone Number” • You can specify how many rows to create within the “Rows or Columns…” dialog box • Label the new 1st column rows: Faculty, Staff and Student • Creating Option Buttons • Within each cell that adjacent to the cell you’ve labeled, create an option button • Insert->Form->Option Button

36. Forms • Creating the comments area • Insert two new rows underneath “Student” • Merge the cells of the first row underneath “Student” • Label this cell: Comments • Merge the cells in the last row • Insert a Text Area box in the last row • Insert->Form->Text Area • Center the comments label and the Text Area

37. Forms • Naming the form fields • Naming the form fields helps identify what type of information that fields will carry • Use only A-Z, 0-9, and _ to name the fields • Name your fields to identify the type of answer you expect • Double click the field you want to name and change the “Name” field • Eg: Label “First Name” would have the field name of “First_Name” • Do this for every TextBox form field and the Text Area field

38. Forms • Naming Option Buttons • Option buttons work in a group • Buttons in the same group will have the same group name • Value field will contain the form field label • Give your option buttons a group name • Double click each option button and give all three the same group name • Change the value field that option button’s label text

39. Form Validation • Form validation can allow you to require a user to fill out specific form fields before they can submit the form • Let’s validate the following fields: • Your Name • E-Mail Address • Phone Number • Comments

40. Form Validation • Validating form fields • Double click on “Your Name” • Click on “Validate…” • Display Name field • This name is used when reporting to the user that they need to fill in the field in question • The display name can contain more characters unlike the form field name • This allows you to call you field another name rather than its form field name • Eg; Form field name: Your_Name Display Name: Full Name • Make a display name for the “Your Name” field

41. Form Validation • Data type field • Used to select the data type you expect • Change this to “text” • Text Format • Lets you specify what type of characters you expect in your text response • The “Other” field allows you to specify other characters rather than letters, digits, spaces and tabs • For “Your Name” we would expect: Letters, Whitespace (Spaces, tabs, etc.) and possibly other characters such as “.”

42. Form Validation • Data Length • In order to require a value you must check the “Required” checkbox • Otherwise the user could enter nothing and still submit the form • Min Length and Max Length • Create Validation for the other fields • E-Mail Address • Phone Number • Comments

43. Form Validation • Other types of validation

44. Sending your form to Web Services • What would you like to do with the data collected from the form? • Send to an e-mail address • Store in a database • Store in a delimited file • Prepare a confirmation message for the user • Common things to include • Processing time • Contact information if they have problems

45. Forms • Questions

46. Testing Your Pages • It’s always important to test your work. • Check your page in different browsers like Microsoft Explorer and Netscape. • Check your page in older versions of those browsers. People may be using old machines and do not have the latest versions of browsers. • Check for Accessibility. • Check to make sure you have used ALT tags on graphics • Use Bobby site to test for accessibility issues. • http://bobby.watchfire.com/bobby/html/en/index.jsp

47. Common Reasons Why Pages Don’t Work • Copied text from Word that hasn’t been stripped of it’s formatting. • File names of HTML pages or graphics with more than eight characters. • Using spaces and special characters in file names. • Incorrect HTML coding. Just because FrontPage wrote the code for the work you did, doesn’t mean it’s perfect. After several edits and moving things around on a page, HTML coding can be lost or moved out of sequence. • Redundant HTML tags, for example: <FONT FACE=“arial”><FONT FACE=“times” size “9”>Welcome to my homepage</FONT>

48. Questions? • For further assistance, contact Web Services at: • Tim Lockridge, tlockridge@usi.edu Assistant Director, Computer Center • Brandi Hess, bhess@usi.edu Graphic Designer, Web Services • Scott Klassen, sklassen@usi.edu Web Support Coordinator, Computer Center