MKTG 476 FRONTPAGE II Lars Perner, Instructor 1 FrontPage II File structure and references File structure and references Editing standard HTML files Editing standard HTML files Automatic navigation structure Automatic navigation structure Forms Forms

MKTG 476 FRONTPAGE II Lars Perner, Instructor 2 File Naming Conventions Lower case only Lower case only No No Spaces in file names (use underscore instead—e.g., “Online_Profiteers” Spaces in file names (use underscore instead—e.g., “Online_Profiteers” “Special” characters (e.g., ampersand, period, comma) (other than for extensions--.htm is OK) “Special” characters (e.g., ampersand, period, comma) (other than for extensions--.htm is OK) Appropriate extension Appropriate extension Short file names Short file names

MKTG 476 FRONTPAGE II Lars Perner, Instructor 3 File References Levels Levels Absolute address (e.g., ktg476/index.htm) Absolute address (e.g., ktg476/index.htm) ktg476/index.htm ktg476/index.htm Address within file structure (e.g., /mktg476/index.htm) Address within file structure (e.g., /mktg476/index.htm) Address within current directory (e.g., index.htm) Address within current directory (e.g., index.htm) Objects not in the current directory must have more explicit address—either Objects not in the current directory must have more explicit address—either Absolute address Absolute address Address where the file is hosted on the current site Address where the file is hosted on the current site Beware of links to addresses on the creator’s hard drive! Beware of links to addresses on the creator’s hard drive! The following are especially vulnerable to hard drive addresses: The following are especially vulnerable to hard drive addresses: Graphics Graphics Photos Photos Logos Logos Art Art PDF files PDF files Be sure that all components from templates are stored properly Be sure that all components from templates are stored properly

MKTG 476 FRONTPAGE II Lars Perner, Instructor 4 Creating subdirectories Select “Folders” view on the left hand menu Select “Folders” view on the left hand menu If creating a first level directory, select File new. If creating a first level directory, select File new. If creating a subdirectory: If creating a subdirectory: Click on the directory under which you want the new subdirectory to exist. Click on the directory under which you want the new subdirectory to exist. select File new. select File new. Enter the desired name of the directory. Enter the desired name of the directory.

MKTG 476 FRONTPAGE II Lars Perner, Instructor 5 Example Web Site Structure INDEX CUSTOMER SERVICE PRODUCTSIMAGES INVESTOR RELATIONS JOB OPENINGS COMPUTERSSOFTWAREPRINTERS INDEX File Directories Files Directories

MKTG 476 FRONTPAGE II Lars Perner, Instructor 6 HTML and Organization HTML HTML Use “line feed”-- + to go to next line without double space Use “line feed”-- + to go to next line without double space File organization File organization “Root” directory “Root” directory Subdirectories for Subdirectories for Special area content Special area content Graphics Graphics

MKTG 476 FRONTPAGE II Lars Perner, Instructor 7 To Edit a File (Add Content) In “Folder” or “Navigation” mode, double- click on the file you want to edit: In “Folder” or “Navigation” mode, double- click on the file you want to edit:

MKTG 476 FRONTPAGE II Lars Perner, Instructor 8 Page Views “Normal”— ”What you see is [almost] what you get “Normal”— ”What you see is [almost] what you get “HTML”—only HTML code is displayed “HTML”—only HTML code is displayed

MKTG 476 FRONTPAGE II Lars Perner, Instructor 9 “Normal” vs. HTML Screens

MKTG 476 FRONTPAGE II Lars Perner, Instructor 10 Creating a Table From the “Insert” menu, select “Table” From the “Insert” menu, select “Table” Specify number of rows and columns Specify number of rows and columns For no lines as borders, select border thickness of zero For no lines as borders, select border thickness of zero

MKTG 476 FRONTPAGE II Lars Perner, Instructor 11 Example—Text and company logo Create table with one row, two columns Create table with one row, two columns In the left cell, enter company name and information In the left cell, enter company name and information In the right cell In the right cell Save image in “Images directory” Save image in “Images directory” Use “Insert image” to use an image from disk Use “Insert image” to use an image from disk Use “paste” to paste an image “copied elsewhere” Use “paste” to paste an image “copied elsewhere”

MKTG 476 FRONTPAGE II Lars Perner, Instructor 12 Fonts and font substitutions “Default” font will vary between “templates”—often Times Roman “Default” font will vary between “templates”—often Times Roman User selection of fonts User selection of fonts Font substitution Font substitution

MKTG 476 FRONTPAGE II Lars Perner, Instructor 13 Hyperlinks Links will bring the user to: Links will bring the user to: Another page Another page Within present site Within present site At other site At other site “Bookmark” on current or other page “Bookmark” on current or other page User’s program with an address entered (often used with names) User’s program with an address entered (often used with names) Object (e.g., larger image) Object (e.g., larger image)

MKTG 476 FRONTPAGE II Lars Perner, Instructor 14 To Insert a Hyperlink Highlight text or image to be linked Highlight text or image to be linked Select Insert Hyperlink or +K Select Insert Hyperlink or +K Either spell out the hyperlink or “point” to it Either spell out the hyperlink or “point” to it

MKTG 476 FRONTPAGE II Lars Perner, Instructor 15 Hyperlink Entry Methods Navigate to file Point to a “bookmark” or special location in file Link to an e- mail address

MKTG 476 FRONTPAGE II Lars Perner, Instructor 16 Creating Automatic Hyperlinks Between Pages Go to “Navigation” view Go to “Navigation” view Highlight your “top” or index file Highlight your “top” or index file Select Format, “Shared borders” Select Format, “Shared borders” Click the following: Click the following: “Top” “Top” “Include navigation…” “Include navigation…” “Left” “Left” “Include navigation…” “Include navigation…” Select application for all pages Select application for all pages Click “OK” Click “OK”

MKTG 476 FRONTPAGE II Lars Perner, Instructor 17 Forms Structure for the user to enter and send information—e.g., Structure for the user to enter and send information—e.g., Sign-up Sign-up Order placement Order placement Survey response Survey response Information request Information request Results can be sent by or be added to online database Results can be sent by or be added to online database

MKTG 476 FRONTPAGE II Lars Perner, Instructor 18 To Create a Form Create and enter a web page Create and enter a web page Select Insert Form Select Insert Form Select Form Select Form For each “field” (part to be filled out): For each “field” (part to be filled out): Select Insert Form Select Insert Form Select the type of form component desired and specify characteristics Select the type of form component desired and specify characteristics

MKTG 476 FRONTPAGE II Lars Perner, Instructor 19 Form Components Textbox (one line of text) Textbox (one line of text) Text area Text area Checkbox (check yes or no) Checkbox (check yes or no) Drop down box Drop down box Push button Push button File upload (user uploads a file) File upload (user uploads a file)

MKTG 476 FRONTPAGE II Lars Perner, Instructor 20 Entering Form Submission Info Right click on the “submit” button in the form Right click on the “submit” button in the form Select “Form properties” Select “Form properties” Enter desired address Enter desired address