CIW Site Design Prep Session

1
CIW - Site DesignPrep Session
2
Client Software
3
Features for Developers

• Dynamic HTML (DHTML) support
• Provides interactivity in Web pages
• DHTML behaviors
• Store Web page information and style
• XML support
• Enables developers to build Web-based
  applications
• Allows you to separate data from presentation

4
Configuring IE 5

• Exploring Security Options
• Setting Security Options
• Setting Connections Options

5
Exploring Security Options

• Web Content Zones
• Internet zone
• Local intranet zone
• Trusted sites zone
• Restricted sites zone
• Security Levels
• High
• Medium
• Medium-low
• Low

6
Setting Security Options
7
Setting Connection Options

• Internet Connection Wizard
• Proxy Server

8
Downloading Files Using FTP

• FTP - an Internet service that allows you to
  download files from the Internet to your computer
  
• To download files
• Connect to an FTP server on a remote computer
• Have permissions to access files on the FTP server

9
Comparing Web Browsers
10
Review Client Software

• Identify the developer features
• Configure Internet Explorer 5
• Download files using FTP
• Identify the contrasting features of available
  Web browsers

11
Basic HTML
12
Overview

• Web Site Design Considerations
• Creating a Web Page
• Adding Images to a Web Page
• Creating Tables
• Formatting Tables
• Review

13
Web Site Design Considerations

• Minimize download time
• Keep information accessible
• Provide alternative media
• Minimize the use of sound
• Coordinate colors
• Text considerations
• Consistency
• Legal issues

14
Creating a Web Page

• Basic HTML Tags
• HTML Tag Syntax
• Creating a Web Page Using Notepad
• Creating a Web Page A GUI Authoring System
• Content Tags
• Creating Headings, Paragraphs, and Lists
• HTML Tag Attributes
• Hyperlink Tags
• Adding Hyperlinks
  

15
Basic HTML Tags

• HTML Tag
• ltHTMLgt lt/HTMLgt
• Contains a head and a body section
• HEAD Tag
• ltHEADgt lt/HEADgt
• Requires the ltTitlegt lt/Titlegt tag
• BODY Tag
• ltBODYgt lt/BODYgt
• Holds the entire content of the Web page
• 
  

16
HTML Tag Syntax

• HTML Tags
• Begin with a (lt) end with a (gt)
• Most tags are paired into beginning and ending
  tags for example, ltH1gtlt/H1gt

ltHTMLgt ltHEADgtltTITLEgtMy site lt/TITLEgtlt/HEADgt ltBODY
gt ltH1gtWELCOME TO MY SITElt/H1gt lt/BODYgt lt/HTMLgt
17
Content Tags

• Headings
• Have levels from one to six, one being the
  largest
• 
  

ltBODYgt We are learning the Heading tags in
HTML. ltH1gtHEADING 1lt/H1gt ltH2gtHEADING
2lt/H2gt ltH3gtHEADING 3lt/H3gt ltH4gtHEADING
4lt/H4gt ltH5gtHEADING 5lt/H5gt ltH6gtHEADING
6lt/H6gt lt/BODYgt
18
Content Tags (continued)

• Paragraph tags
• Indicate where a new paragraph begins
• 
  

ltHTMLgt ltHEADgt ltTITLEgtUSING PARAGRAPHSlt/TITLEgt
lt/HEADgt ltBODYgt We are learning about the
paragraph tags in HTML. ltPgtThis is a new
paragraph.lt/Pgt lt/BODYgt lt/HTMLgt
19
Content Tags (continued)
ltOLgt ltLIgtThis is a list item.lt/LIgt ltLIgtThis is
a second list item.lt/LIgt lt/OLgt
ltULgt ltLIgtThis is a list item.lt/LIgt ltLIgtThis is
a second list item.lt/LIgt lt/ULgt
ltDLgt ltDTgt Word 1 ltDDgt This is definition of
word 1. ltDTgt Word 2 ltDDgt This is definition of
word 2. lt/DLgt
20
HTML Tag Attributes

• FONT tag attributes
• Color
• Size

ltfont color"Yellow" face"Arial"gtHey I'm Yellow
Text!lt/fontgtltbrgt
ltfont size2 color"white"gtChange My size
lt/fontgtltbrgt
21
Hyperlink Tags

• Hyperlinks
• Connect a Web page to another page or a different
  location on the same page
• Types of Hyperlinks
• URL (http//xxx/xxx/xxx/dir/file.htm)
• E-mail (mailtosomeone_at_mycompany.com)
• Non-HTML document (file\\path\dir\filename)
• Newsgroup (news.xxx.xxx.xxx)
• Bookmark (Mypage.htmbookmarkname)
• 
  

ltA HREF"Destination_Address"gttext or graphiclt/Agt
22
Hyperlink Tags (continued)

• Relative links
• Describe the destination relative to the location
  of the Web page containing the link
• Absolute links
• Used to link documents that are not part of the
  same site

ltA HREF"MyDocument.htm"gtLink textlt/Agt
ltA HREF"../myfolder/myFile.htm"gtLink textlt/Agt
ltA HREF"/Directory/myFile.htm"gtLink textlt/Agt
ltA HREF"http//Server/Directory/File.htm"gtLink
textlt/Agt
23
Hyperlinks Tags (continued)

• Bookmark tag
• Names a location in a Web page that can be a
  target for a hyperlink

ltA Name"bookmark1"gt
ltA HREF"MyDoc.htmbookmark1"gtLink textlt/Agt
24
Adding Images to a Page

• Adding Images Using HTML
• Creating Hyperlinked Images
• Image Map Tags
• Image Design Considerations
• Designing Interactive Web Graphics

25
Adding Images Using HTML

• Use the IMG tag to add images to Web pages
• ltIMGgt tag tells the browser that an image will be
  displayed
• SRC attribute tells the browser the file name of
  the image to display

ltIMG SRC name of image filegt
26
Creating Hyperlinked Images

• Nest image under the ltA HREFgt lt/Agt tag

ltHTMLgt ltBODYgt ltA HREF"mysite.htm"gt ltIMG
SRC"webpage.jpg"gt lt/Agt lt/BODYgt lt/HTMLgt
27
Image Map Tags

• Server-side image map tags
• The size and location of each hotspot and its
  associated URL reside in a separate file on the
  server
• Client-side image map tags
• Are run by the browser rather than a CGI

ltA HREF"name.map"gt ltIMG SRC"name.gif"
ISMAPgt lt/Agt
ltIMG SRC"name.bmp" USEMAP"jumps"gt
28
Image Maps

• Create various geometric shapes
• Rectangular hotspots
• Circular hotspots
• Polygonal hotspots
• Highlight hotspots
• To create an image map, use the rectangle,
  circle, or polygon tools toward the left end of
  the Image toolbar

29
Image Design Considerations

• Image Display
• Ensure that users get the information with or
  without the images
• Supply alternative text for images because some
  browsers cannot display images
• Performance of a Web page
• The main content of a page should be visible
  within 8 seconds
• The entire page, including all images, should be
  downloaded within 30 seconds
• Specify the HEIGHT and WIDTH attributes for any
  image to be displayed on the page

30
Image Design Considerations (continued)

• Thumbnails
• Improve the performance of a Web page.
• Are small images mapped with hyperlinks to pages
  that have full versions of the images.
• GIFs and JPGs
• GIFs are best suited for icons, navigation bar
  buttons, or large images that contain only a few
  colors
• JPGs are best suited for photographs of graphics
  with a large degree of detail and color

31
Designing web graphics

• Image slicing
• An image is divided using the slice tool
• Each slice is assigned a URL, an ALT tag, and
  different compression values
• Rollovers
• A rollover effect causes the image to change when
  the mouse moves over it

32
Creating Tables

• Creating Tables Using HTML
• Creating Tables Using Notepad
• Creating Tables Using a GUI Web Authoring System

33
Creating Tables Using HTML

• ltTABLEgt lt/TABLEgt Tag
• ltTRgt lt/TRgt Tag
• ltTDgt lt/TDgt Tag

ltTABLEgt   lt/TABLEgt
ltTRgt ltTDgtAIRLINElt/TDgt ltTDgtDEPARTURElt/TDgt ltTDgtDE
PARTURE TIMElt/TDgt lt/TRgt
34
Formatting Tables

• Table Width and Height
• Table Headers
• Spanning Columns or Rows
• Table Borders
• Table Caption
• Grouping Columns
• Nesting Tables

35
Table Width and Height

• WIDTH attribute
• Values in pixels or percentages
• HEIGHT attribute
• Values in pixels or percentages

ltTRgt ltTD WIDTH"27"gtlt/TDgt ltTD HEIGHT"25"gtlt/TDgt
lt/TRgt
36
Table Headers

• ltTHgt tag
• Default values for the ltTHgt tag
• ALIGN center, VALIGN middle
• 
  

ltTABLE ALIGNleft border1 WIDTH20gt
ltTRgt ltTHgtNamelt/THgt ltTHgtE-maillt/THgt lt/TRgt
ltTRgt ltTDgtScottlt/TDgtltTDgtScott_at_yahoo.comlt/TDgt
lt/TRgt ltTRgt ltTDgtDianelt/TDgtltTDgtDiane_at_hotmail.com
lt/TDgt lt/TRgt lt/TABLEgt
37
Spanning Columns or Rows

• The COLSPAN attribute
• ltTRgtltTD COLSPAN3 ALIGNCENTERgtR1 C1lt/TDgtlt/TRgt
• The ROWSPAN attribute
• ltTRgtltTD ROWSPAN2gtR2 C1lt/TDgtltTDgtR2 C2lt/TDgtltTDgtR2
  C3lt/TDgtlt/TRgt

ltTABLE alignleft border1 width20gt lttrgtlttd
colspan3 AligncentergtAirline Confirmationlt/tdgtlt/
trgt lttrgtlttd rowspan2gtFlight Detailslt/tdgtlttdgtDepa
rture Citylt/tdgtlttdgtDeparture Timelt/tdgtlt/trgt lttrgtlt
tdgtArrival Citylt/tdgtlttdgtArrival
Timelt/tdgtlt/trgt lt/TABLEgt
38
Table Borders

• BORDER attribute
• Creates a border for a table
• The number specified sets the width of the border

ltTABLE BORDER4gt ltTABLE BORDER2 FRAMEbox
RULESrowsgt
39
Table Caption

• ltCAPTIONgt tags
• Use the ALIGN attribute to set the horizontal
  alignment of the caption
• Use the VALIGN attribute to set the vertical
  alignment of the caption
• 
  
• 
  

ltTABLE ALIGNleft border1 WIDTH20gt
ltCAPTION ALIGNcenter VALIGNbottomgtEmployee
Detailslt/CAPTIONgt ltTRgt ltTHgtNamelt/THgtltTHgtE-maillt
/THgtlt/TRgt ltTRgtltTDgtScottlt/TDgtltTDgtScott_at_yahoo.com
lt/TDgtlt/TRgt ltTRgtltTDgtDianelt/TDgtltTDgtDiane_at_hotmail.
comlt/TDgtlt/TRgt lt/TABLEgt
40
Grouping Columns

• 
  
• 
  

ltTABLE RULES"COLS" WIDTH"300" HEIGHT"200"gt
ltCOLGROUP ALIGN"CENTER" SPAN"2"gt ltCOLGROUP
VALIGN"BOTTOM"gt ltTRgt ltTDgt This
column, Column 1, should be aligned to the
center.lt/TDgt ltTDgt This column, Column 2, is a
part of the same group.lt/TDgt ltTDgt This
column, Column 3, should be aligned to the
bottom.lt/TDgt lt/TRgt lt/TABLEgt
41
Nesting Tables

• Each table cell can contain its own table
• Tables can be nested together to create more
  complex tables

ltTABLE ALIGNLEFT BORDER1 WIDTH20gt ltTRgtltTH
COLSPAN3 ALIGNCENTERgtEmpdetailslt/THgtlt/TRgt
ltTRgtltTD ROWSPAN2gt ltTABLE BORDER1gt ltTRgtltTDgt
Scottlt/TDgtltTDgtRogerlt/TDgtlt/TRgt ltTRgtltTDgtDianelt/TD
gtltTDgtSarahlt/TDgtlt/TRgt lt/TABLEgt
lt/TDgtltTDgtNamelt/TDgtltTDgtE-maillt/TDgtlt/TRgt
ltTRgtltTDgtAddresslt/TDgtltTDgtDesignationlt/TDgtlt/TRgt lt/TA
BLEgt
42
Review

• Create a Web page using basic HTML tags
• Add images to a Web page using HTML
• Create tables by using HTML

43
Advanced HTML
44
Overview

• Creating Frames Using HTML
• Creating Forms Using HTML
• Formatting Forms
• Creating a Form
• Introduction to Style Sheets
• Using Style Sheets
• Publishing a Web Page
• Review

45
Creating Frames Using HTML

• What Are Frames?
• Using Frames Guidelines and Drawbacks
• The ltFRAMESETgt Tag
• The ltFRAMEgt Tag
• The ltNOFRAMESgt Tag

46
What Are Frames?

• Frame divides a Web page into multiple,
  scrollable regions
• Features
• A frame can be assigned an individual URL
• A frame can be assigned a name to be referred by
  other URLs
• A frame can be resized dynamically

47
Guidelines and Drawbacks

• Guidelines
• Use frames to display information that requires
  one area of the page to remain static, while the
  other area changes
• Use borderless frames wherever possible
• Provide white spaces in the pages that display
  the frames
• Drawbacks
• Frames divide the browser window into smaller
  sections
• Some browsers do not support borderless frames
• Some browsers do not support frames

48
The ltFRAMESETgt Tag

• The frameset is the main container of a frame
• Attributes of a frameset
• ROWS defines horizontal frames
• ROWS"row_height_value_list"
• COLS defines vertical frames
• COLS"column_width_list

ltFRAMESET ROWS"100, "gt ltFRAME
SRC"Frame1.htm"gt ltFRAME SRC"Frame2.htm"gt lt/FRA
MESETgt
49
The ltFRAMEgt Tag

• Defines a frame in a frameset
• In ltFRAMESETgt tag, specify
• Source HTML file
• Appearance of the frame
• Use the ltBASEgt tag with the TARGET attribute to
  specify the target frame for hyperlinks

ltFRAMESET ROWS"100, "gt ltFRAME
SRC"FrameDoc1.htm" SCROLLING"no" NORESIZEgt
ltFRAME SRC"FrameDoc2.htm" SCROLLING"yes"
NORESIZEgt lt/FRAMESETgt
50
The ltNOFRAMESgt Tag

• If a browser does not support frames, use
  ltNOFRAMESgt tag to supply alternate HTML

ltFRAMESETgt ... ltNOFRAMESgt ltPgtYou need
Internet Explorer version 3.0 or later to
view frames!lt/Pgt lt/NOFRAMESgt lt/FRAMESETgt
51
Creating Forms Using HTML

• What Are Forms?
• The ltFORMgt Tag
• Overview of Form Controls
• Using Text Controls
• Using Push Buttons
• Creating a Simple Form
• Using Radio Buttons and Check boxes
• Using Drop-Down Menus
• Using Hidden Controls

52
What Are Forms?

• Forms
• Accept user information
• Provide options to users for retrieving
  information based on their needs
• Allow users to submit comments or feedback

53
The ltFORMgt Tag

• Use the ltFORMgt and lt/FORMgt tags to create a form
• A form cannot be nested within another form

ltFORM ACTION"/scripts/formProcessor.asp"
METHODPOSTgt lt!- Form Contents fields,
buttons, etc. --gt Name ltINPUT TYPETEXT
NAME"txtName" VALUE"My Name"gt ltINPUT
TYPESUBMIT VALUE"Submit"gt lt/FORMgt
54
The ltFORMgt Tag (continued)

• Attributes of the ltFORMgt tag
• ACTION
• METHOD
• TARGET

ltFORM ACTION"formProcessor.asp" METHOD"POST"gt
ltFORM TARGET"Frame1"gt
55
Overview of Form Controls

• Use the ltINPUTgt tag to define controls
• Syntax
• Form controls
• Text box
• Password
• Text area
• Push button

ltINPUT TYPEtype_of_control NAMEname_of_control
VALUEvaluegt

• Radio button
• Drop-down menu
• Check box
• Hidden control

56
Using Text Controls

• Single-line text box
• Password
• Scrolling text box

ltINPUT TYPE"TEXT" NAME"txtUserName"gt ltINPUT
TYPE"PASSWORD" NAME"txtPassword"gt ltTEXTAREA
ROWS"2" NAME"txtComments"gt lt/TEXTAREAgt
57
Using Push Buttons

• Submit
• Reset
• Normal

ltINPUT TYPE"SUBMIT" NAME"btnsubmit"
VALUE"Submit"gt ltINPUT TYPE"RESET"
VALUE"Reset"gt ltINPUT TYPE"BUTTON"
NAME"btnclickme" VALUE"click me"gt
58
Using Radio Buttons and Check Boxes

• To add a radio button
• Use ltINPUTgt tag and set TYPE to RADIO
• To add a group of radio buttons
• Assign the same NAME attribute to all radio
  buttons in a group

ltBgtAre you aware of the COM Technology?lt/Bgt ltPgtltIN
PUT TYPE"RADIO" CHECKED NAME"optaskqn"
VALUE"yes"gtyeslt/Pgt ltPgtltINPUT TYPE"RADIO"
NAME"optaskqn" VALUE"no"gtnolt/Pgt ltPgtltINPUT
TYPE"RADIO" NAME"optaskqn" VALUE"maybe"gtmaybelt/
Pgt
59
Using Radio Buttons and Check Boxes (continued)

• To add a check box
• Use ltINPUTgt tag and set TYPE to CHECKBOX
• To make the check box appear selected
• Add CHECKED attribute to the ltINPUTgt tag

ltINPUT TYPE"CHECKBOX" NAME"chkbizuse"
VALUE"biz" gtBusiness use ltINPUT TYPE"CHECKBOX"
NAME"chkpersonaluse" VALUE"personal"gt
60
Using Drop-Down Menus

• Use the ltSELECTgt tag to add a drop-down menu
  control
• MULTIPLE attribute allows multiple selections in
  a drop-down menu
• Use the ltOPTIONgt tag to add items to the
  drop-down menu
• SELECTED attribute to show a default selection in
  a drop-down menu

ltSELECT MULTIPLE NAME"lstorderingpreference"gt
ltOPTION SELECTED VALUE"1"gtMAIL
61
Using Hidden Controls

• To add a hidden control
• Use ltINPUTgt tag, set TYPE to HIDDEN
• To set a value to the control
• Add text to the VALUE attribute

ltINPUT TYPEHIDDEN NAME"hdnname" VALUE"Some
info"gt
62
Formatting Forms

• Setting the tab order set the TABINDEX
  attribute
• Adding labels set ID attribute, add ltLABELgt
  tag, and set the FOR attribute to the ID of the
  control
• Adding Access Keys set ACCESSKEY attribute

ltINPUT TYPE"TEXT" NAME"txtname"
TABINDEX"1"gt ltINPUT TYPE"TEXT"
NAME"txtaddress" TABINDEX"2"gt
ltINPUT TYPE"RADIO" NAME"optGreen" VALUE"1"
ID"optColor1"gt ltLABEL FOR"optColor1"gt Green
lt/LABELgt
ltINPUT TYPE"RADIO" NAME"optblue" VALUE"2"
ID"optcolor2"gt ltLABEL FOR"optcolor2"
ACCESSKEY"g"gtltUgtglt/Ugtreenlt/LABELgt
63
Cascading Style Sheets

• Style sheets define the look and feel of Web
  pages
• Define the font, color, text, margins, and
  borders for the Web page
• Advantages of using a style sheet
• Additional formatting options
• Better control
• Easier customization
• Supports a larger audience
• Improves the performance of your site

64
Using Style Sheets

• Using Inline Styles
• Setting Style Properties
• Embedding Style Sheets
• Linking Style Sheets
• Creating New Style Classes
• Creating Style Sheets Using HTML

65
Using Inline Styles

• You can add inline styles to HTML tags by using
  the STYLE attribute
• You can also apply a style to a block of tags by
  using the ltSPANgt tag

ltP STYLE"margin-left 1.0in color teal"gt
This text appears indented and in the color
teal. lt/Pgt
ltSPAN STYLE"font-size 14pt color teal"gt
66
Setting Style Properties

• To set the font properties in the style
  definition use
• Use font to specify multiple font properties
  together
• To set the color of the text use the color
  property

Font-style, Font-size, Font-family,Font-weight
ltP STYLE"font-family Arial font-weight bold
font-size 14pt"gt
ltP STYLE"font bold 14pt"gt
ltP STYLE"font-family Arial color teal"gt
67
Embedding Style Sheets

• Use the ltSTYLEgt block to embed style sheets

ltHEADgt ltSTYLE TYPE"text/css"gt H1 font 17pt
"Arial" font-weight bold color teal H2
font 13pt "Arial" font-weight bold color
purple P font 10pt "Arial" color red
lt/STYLEgt lt/HEADgt
68
Linking Style Sheets

• Create a file that contains the style definitions
• Save file to the server with the extension .css
• Link to .css file from any HTML document with the
  ltLINKgt in the ltHEADgt section of HTML document
• In case multiple styles are defined for a tag,
  the style which is in effect is the style that is
  defined last in the order of occurrence

H1 font 17pt "Arial" font-weight bold
color teal
ltHEADgt ltLINK REL"stylesheet" TYPE"text/css"
HREFMystyles.css"gt lt/HEADgt
69
Creating New Style Classes

• Create a new style class by preceding the style
  name with a dot

ltSTYLEgt .red font-size18pt colorred
.green font-size15pt colorgreen lt/STYLEgt
70
Publishing a Web Page

• Overview of Publishing
• Preparing to Publish
• Production Processes
• Publishing a Web Site

71
Preparing to Publish

• Verify hyperlinks
• Recalculate hyperlinks
• Perform site-wide spell-check
• Perform site-wide search and replace

72
Production Process

• Site development process involves the
• Staging server hosts the Web site in
  development
• Test server hosts the Web site published for
  testing
• Production server hosts the Web site published
  for public access

73
Publishing a Web Site

• Before publishing, find out if target server
  supports FrontPage Server Extensions (FPSE)
• If FPSE is supported publish using HTTP,
  otherwise publish the site using FTP
• You can also publish a site to a file system
  location

74
Review

• Create frames using HTML
• Create forms using HTML
• Create style sheets using HTML
• Publish a Web page

75
Using Client-Side Scripts
76
Overview

• Client-Side vs. Server-Side Scripting
• Client-Side and Server-Side Objects
• Introducing Client-Side Scripting
• Using Dynamic HTML
• Using Event Procedures
• Adding a Rollover Effect
• Using the Document Object Model (DOM)
• Validating Form Inputs

77
Client-Side vs. Server-Side Scripting

• Server-side scripting
• Client-side scripting

The time at the Web server is lt Time() gt The
date at the Web server is lt Date() gt
The time at the Web browser is ltSCRIPT
LANGUAGEVBScriptgt Document.Write
time() lt/SCRIPTgtltBRgt   The date at the Web
browser is ltSCRIPT LANGUAGEVBScriptgt Document.Wr
ite date() lt/SCRIPTgtltHRgt
78
Client-Side and Server-Side Objects

• Client-side objects
• Window (represents the properties, methods, and
  events of the browser window)
• Document (represents the HTML document displayed
  by browser)
• Server-side objects
• Response (generates the response sent to browser)
• Request (information sent by browser to Web
  server)
• Session (user specific information)
• Application (global information for Web
  applications)
• Server (provides common functionalities and
  access to COM objects)

79
Introducing Client-Side Scripting

• Client-side scripts are programs attached to HTML
  documents, which run on Web browsers
• VBScript is a scripting language for writing
  client-side scripts
• ltSCRIPTgt tag

ltSCRIPT LANGUAGE"VBScript"gt lt!-- VBScript code
is placed here --gt lt/SCRIPTgt
80
Using Dynamic HTML

• Introducing Event Procedures
• The ID Attribute
• Using Event Procedures

81
Introducing Event Procedures

• An event can be any action including a click,
  movement of the mouse, or loading of a document.
• Common mouse events onclick, onmouseover, and
  onmouseout.

ltSCRIPT language"VBScript"gt lt!-- Sub
changecolor_onmouseover() changecolor.style.col
orred End Sub Sub changecolor _onmouseout()
changecolor.style.colorgreen End
Sub --gt lt/SCRIPTgt
82
The ID Attribute

• Uniquely identifies an object
• Use the ID property of HTML elements in the
  client-side script to manipulate elements

ltbodygt ltp id"myParagraph"gtdynamic
HTML!lt/pgt lt/bodygt
ltSCRIPT language"VBScript"gt lt!-- Sub
myParagraph_onmouseover() 'Execute some
code. End Sub --gt lt/SCRIPTgt
83
Using Event Procedures

• Using the Microsoft Script Editor
• Changing the Style of an Element Dynamically
• Adding a Rollover Effect

84
Document Object Model (DOM)

• The Window Object
• The Document Object
• Using the DOM

85
The Window Object

• The Window object
• Properties - Parent, Self, Top, Name
• Methods - Alert, Confirm, Prompt, Navigate
• Events - OnLoad, OnUnLoad

Sub Window_OnLoad Alert "The OnLoad event is
fired" End Sub Sub Window_OnUnLoad Alert "The
OnUnLoad event is fired" End Sub
86
The Document Object

• Properties
• BgColor
• Forms
• LastModified
• Title
• Methods
• Open
• Close
• Write
• WriteLn

87
Document Object (Continued)

• Form object
• Properties Action, Method
• Method Submit
• Event OnSubmit

sub btnURL_onClick dim nURL nURLWindow.Documen
t.frmtest.txtURL.Value Window.Alert "The current
URL is " Window.Location Window.Alert "The
new URL is " nURL Navigate nURL End sub
88
Document Object (Continued)

• Link object
• Properties
• Href
• Target
• Events
• MouseMove
• OnClick
• Anchor object
• Property
• Name

89
Validating Form Inputs

• len function
• isNumeric function

90
Validating Form Inputs (Continued)

• len function

ltSCRIPT language"VBScript"gt lt!-- function
myform_onSubmit Dim temp tempmyform.T1.value lle
n(temp) if llt5 then MsgBox "You need to enter a
value with 5 or more digits." end if end
function --gt lt/SCRIPTgt
91
Validating Form Inputs (Continued)

• isNumeric function

ltSCRIPT language"VBScript"gt lt!-- Sub
cmdSubmit_onclick ok true if
Form1.txtName.value "" then end
if if isNumeric(Form1.T1.value) false
then msgbox "You must enter a valid
employee id." Form1.T1.focus ok
false end if End Sub --gt lt/SCRIPTgt
92
Review

• Write a client-side script using VBScript
• Use dynamic HTML to add Web effects
• Describe the Document Object Model (DOM)
• Validate form inputs using VBScript

93
Using Server-Side Scripts
94
Overview

• Active Server Pages (ASPs)
• Object Oriented Programming (OOP)
• Using ASP Objects
• Programming in ASP
• Review

95
Active Server Pages (ASPs)

• Working of ASPs
• Microsoft Internet Information Server (IIS)
• ASP Object Model

96
Working of ASPs

• When a browser requests an ASP file from a Web
  server
• The server-side script gets executed
• ASP processes the requested file, executes the
  script commands contained in the file, and
  generates an HTML Web page
• The Web page is sent back to the browser

97
Internet Information Server

• IIS 4/5
• Includes ASPs
• Includes the Native Scripting Engine for VBScript
• Includes the Native Scripting Engine for JScript

98
ASP Object Model

• Response object
• Request object
• Session object
• Application object
• Server object

99
Object Oriented Programming (OOP)

• Properties
• Methods

100
Properties

• Properties
• Refer to data, attributes, and settings of an
  object
• Do not take arguments
• Used to describe or set the state and appearance
  of an object

lt Response.Buffer True gt
101
Methods

• Methods
• Set of tasks that perform actions
• Can return values and take arguments
• Has access to the data known to the object

lt Response.Write("Hello") gt
102
Using ASP Objects

• Response Object
• Request Object
• Session Object
• Application Object

103
Response Object

• Used to send data back to the client Web browser

lt Response.Write(Hello World)gt
104
Request Object

• Used to capture information submitted by a form
• QueryString collection
• Form collection

lt firstRequest.QueryString("txtfname")gt
lt firstRequest.QueryString(txtfname) last
Request.QueryString(txtlname)
Response.Write(Welcome first last)gt
ltfirstRequest.Form(txtfname) last
Request.Form(txtlname) Response.Write(Welco
me first last)gt
105
Session Object

• Stores information needed for a particular
  session
• (View Session.asp from Sampapps)

lt Session(UserName)John Smith gt lt
Response.Write Session(UserName) gt
106
Application Object

• Application object
• Stores state information for use by script files
• Lock and Unlock methods

lt Application.(CompanyName)Microsoft Respons
e.Write Application(CompanyName)gt
lt Application.Lock Application("Visit")Applicati
on("Visit")1 Application.Unlock gt
107
Programming in ASP

• Script tag
• Variables
• Data Types
• Conditional Statements
• Other Programming Features

108
Script Tag

• ASP script tag

lt Response.Write Nowgt
109
Variables

• Variables can store
• User-supplied information
• Intermediate data
• Property setting of a control
• Dim statement

lt Dim time TimeHour(Now())gt
110
Data Types

• Data types
• Determine the type of information that can be
  stored in a variable
• Variant data type
• Can store data of all types
• IsNumeric functions

lt IF IsNumeric(age) THEN Response.Write
("You have entered the correct value") ELSE
Response.Write ("Please enter a numeric
value as age ") END IF gt
111
Conditional Statements

• IFTHENELSE

IF (sales lt 50000) THEN Response.Write ( "You
get a bonus of 5") ELSE Response.Write ( "You
get a bonus of 10") END IF
112
Other Programming Features

• DoLoop

lt Dim i i 1 DO WHILE i lt 10
Response.Write ("The number is " i )
ii1 LOOP gt
113
Other Programming Features (continued)

• Sub procedure

lt Sub IncreaseSales(NumSales) Sales Sales
NumSales End Sub gt
114
Other Programming Features (continued)

• Operators
• Arithmetic operators ( , - , , /)
• Comparison operators ( , lt , gt , ltgt)
• Concatenation operators ( , )
• Logical operators (and , not , or)
• String Functions
• InStr (identifies the character location of a
  string within another)
• Trim (removes leading and trailing spaces)
• Rtrim (removes trailing spaces)
• Ltrim (removes leading spaces)

115
Review

• Define the ASP object model
• Define object oriented programming
• Execute ASP code in Microsoft IIS
• Use ASP objects to capture form information and
  handle server functions
• Use ASP to process form information

116
Database-Driven Web Pages
117
Overview

• Accessing Data from a Text File Using the
  Tabular Data Control
• Accessing Data from an XML Document
• Database Access Interfaces
• Processing Forms
• Review

118
Accessing Data

• Binding a Tabular Data Control (TDC)
• Navigating Records

119
Binding a TDC to a Table

• Properties of TDC
• DataURL
• FieldDelim
• RowDelim

• TextQualifier
• Language
• UseHeader

ltobject classid "clsid333C7BC4-460F-11D0-BC04-
0080C7055A83" width"180" height"52"
ID"flight"gt ltparam name"FieldDelim"
value","gt ltparam name"DataURL"
value"source.txt"gt ltparam name"Useheader"
value"True"gt lt/objectgt  
120
Navigating Records
Sub btnnext_OnClick() mytable.Nextpage() End Sub

• FirstPage()
• LastPage()
• Nextpage()
• Previouspage()

Sub btnprev_OnClick() mytable.Previouspage() End
Sub
121
Accessing Data From an XML Document

• Representing Structured Data
• Using an XML Data Island
• Binding an HTML Table to an XML Data Island

122
Representing Structured Data

• XML
• Provides a format for describing structured data
• Provides a structured representation of data that
  is easy to implement
• XML can be used to markup
• An ordinary document
• A structured record, such as a purchase order
• An object with data and methods, e.g., an ActiveX
  control
• A data record, such as the result set of a query

123
Using an XML Data Island

• An XML data island can be embedded in an HTML
  page by using the XML element

lt?xml version"1.0" ?gt ltXML ID"MyXMLData"gt ltemplo
yeesgt ltemployeegt ltnamegtRobertslt/namegt
ltsalarygt23500lt/salarygt lt/employeegt lt/emplo
yeesgt ltXMLgt
ltINPUT TYPE"TEXT" DATASRC"MyXMLData"
DATAFLD"salary"gt
124
Binding an HTML Table to an XML Data Island

• For each TD, set the DATAFLD attribute

lt?xml version"1.0" ?gt ltXML ID"MyXMLData"gt ltemplo
yeesgt ltemployeegt ltnamegtRobertslt/namegt
ltsalarygt23500lt/salarygt lt/employeegt lt/emplo
yeesgt lt/XMLgt
ltTABLE DATASRC"MyXMLData"gt ltTRgt
ltTDgtltSPAN DATAFLD"name"gtlt/TDgt ltTDgtltSPAN
DATAFLD"salary"gtlt/TDgt lt/TRgt lt/TABLEgt
125
Database Access Interfaces

• Standard Database Access Interfaces
• Connecting to a Data Source
• Connecting to a Database

126
Database Access Interfaces
Data Consumers

Visual Basic Application
ASP Page
Other Applications
ADO
OLE DB

Service Components
Cursor Engine
Query Processor

Data Providers
ODBC Provider
OLE DB Provider
Simple Data Provider
ODBC
Database
MainframeData
NonRelationalData
Database
127
Connecting to a Data Source
128
Processing Forms

• Working with HTML Forms
• Establishing a Connection Using ADO
• Using a Recordset Object
• Processing Forms Using Active Server Pages
• Navigating Records

129
Working with HTML Forms

• HTML forms provide a common way of gathering Web
  based information
• ASPs are used to create scripts to process data
  gathered from HTML forms

ltFORM method"POST" action"myfile.asp"gt ltinput
type"text" name"FNumber"gt ltinput type"text"
name"SDate"gt ltinput type"submit"
value"Enter"gt lt/FORMgt
130
Establishing a Connection Using ADO

• ADO provides the Connection object to
  establishing a connection

lt 'Create a connection object Set
cn Server.CreateObject("ADODB.Connection") 'Open
a connection cn.Open "DSNMyDatabase cn.Close gt
131
Using a Recordset Object

• Declaring a Recordset object
• Opening a Recordset object

set rs server.createobject("ADODB.recordset")
set rs _ cn.Execute("Select fname, lname from
details")
132
Navigating Records
Sub Previous_onClick rs.movePrevious If
rs.bof then rs.movefirst End if End
Sub   Sub Next_onClick rs.MoveNext If
rs.eof then rs.MoveLast End If End Sub
Sub do until rs.EOF response.write "ltTRgt"
response.write "ltTDgt" _ rs("FName")
"lt/TDgt" response.write "ltTDgt" _
rs("LName") "lt/TDgt" response.write "lt/TRgt"
rs.MoveNext loop

• MoveNext
• MoveLast
• MoveFirst
• MovePrevious

133
Review

• Access data from a text file using TDC
• Navigate records using TDC methods
• Describe the data access interfaces
• Create a data source name
• Access a database by using the FrontPage 2000
  Database Results Wizard
• Connect to a data source by using ADO
• Process input form information using ASPs

134
Y'all come back now!