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 thisEnable only
  commands supported by the followingBrowsers
  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 pages 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

8
Using the USI Template

• By the end of this class, we will have made a
  page similar to this http//www.usi.edu/webservic
  es/class/fpclass.asp

9
Lets 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 youve 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. Lets 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
Lets get started (cont.)

• Once you have typed and pasted the text. Lets
  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 mailtoyourname_at_usi
  .edu
• Save this page as index.asp
• Now go to Internet Explorer and see what weve
  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

13
Adding Graphics

• Why should we use graphics?
• Adds to the overall appearance of the site. Its
  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.)

• Lets 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 weve 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 youve 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 tables labels to their answers
• Place the scope attribute in the label fields
• Scope can have two values Row or Col
• If the labels answer is in the same row, use the
  row value
• If the labels 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 tags
• Add the scope attribute within the tags
• Eg 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/identifyin
  g-table-rows-columns

30
Tables

• Questions

31
Forms

• Creating a comments form
• Use existing table Well be changing the table
  to accept information from other users on the web
• Change Personal Information to Comments Form
• Well use the existing labels to identify what
  well 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 youve
  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 buttons 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
• Lets 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

• Its 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 Dont Work

• Copied text from Word that hasnt been stripped
  of its 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, doesnt mean
  its 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 FACEarialWelcome
  to my homepage

48
Questions?

• For further assistance, contact Web Services at
• Tim Lockridge, tlockridge_at_usi.edu
• Assistant Director, Computer Center
•  
• Brandi Hess, bhess_at_usi.edu
• Graphic Designer, Web Services
•  
• Scott Klassen, sklassen_at_usi.edu
• Web Support Coordinator, Computer Center