Introduction to MS FrontPageIntroduction to MS FrontPage

1.1. Creating a Web (Site)Creating a Web (Site)

2.2. Introduction to TableIntroduction to Table

3.3. HTML ViewHTML View

4.4. Converting Word Document to Converting Word Document to HTML PageHTML Page

5.5. Importing HTML Page to the WebImporting HTML Page to the Web

6.6. Importing TXT File into HTML PageImporting TXT File into HTML Page

7.7. Copying Excel WorksheetCopying Excel Worksheet

8.8. Creating a Home PageCreating a Home Pagea)a) Inserting Table for Page LayoutInserting Table for Page Layout

b)b) Inserting ImageInserting Image

c)c) Formatting TextFormatting Text

9.9. Creating HyperlinksCreating Hyperlinksa)a) Linking to Local PagesLinking to Local Pages

b)b) Linking to URLLinking to URL

10.10. Inserting Mail LinkInserting Mail Link

11.11. PublishingPublishing Web on a ServerWeb on a Servera)a) Running FTP ProgramRunning FTP Program

b)b) Creating Folder Structure on a ServerCreating Folder Structure on a Server

c)c) Uploading files to a ServerUploading files to a Server

1. Creating a Web (Site)1. Creating a Web (Site)1.1. Run Run FrontPageFrontPage. . 2.2. Create a new Web in drive Create a new Web in drive HH as follows: as follows:

1.1. Click Click FileFileNewNewWeb…Web… 2.2. In the text box titled “In the text box titled “Specify the location of Specify the location of

the new webthe new web” type ” type h:\cs11001\fph:\cs11001\fp..

3.3. In the In the Views Views pane, click pane, click FoldersFolders. . Note that FP has created a folder named Note that FP has created a folder named h:\cs11001\fph:\cs11001\fp and two subfolders — and two subfolders —imagesimages and and _private —_private —as well as a file as well as a file namednamed index.htm. index.htm. The root folder for this The root folder for this Web is Web is h:\cs11001\fph:\cs11001\fp..

2. Introduction to Table2. Introduction to Table

1.1. In the In the ViewsViews pane, click the pane, click the PagePage icon. icon.

2.2. Create a new page as follows. Click Create a new page as follows. Click FileFileNewNewPage…Page…(We are ignoring the (We are ignoring the index.htmindex.htm that is that is there already.)there already.)

3.3. In the In the NewNew dialog box, click dialog box, click Normal PageNormal Page, , then click then click OKOK. .

4.4. Before we forget, click Before we forget, click FileFileSave AsSave As… Type … Type fpTable.htmlfpTable.html as the file name and save as the file name and save the page. (Save it in the the page. (Save it in the fp\fp\ subfolder.) subfolder.)

1.1. Create a table of 3 rows by 2 columns as Create a table of 3 rows by 2 columns as follows: Click follows: Click TableTableInsertInsertTableTable. Change . Change the number of rows to the number of rows to 33 while keeping the while keeping the number of columns to 2. Click number of columns to 2. Click OKOK..

6.6. Type the following table entries. Left column: Type the following table entries. Left column: Store; MacDonald’s; Wendy’sStore; MacDonald’s; Wendy’s. Right . Right column: column: Calories; 260; 270Calories; 260; 270

7.7. Double-click Double-click StoreStore in the first cell to select it, in the first cell to select it, and then click theand then click the B B (bold) button. Do the (bold) button. Do the same for same for CaloriesCalories in the adjacent cell. in the adjacent cell.

8.8. Click the Click the PreviewPreview tab to view the table. tab to view the table.9.9. Click the Click the HTMLHTML tab and study the tab and study the tabletable tag. tag.

<table border="0" width="50%"> <tr> <td width="50%"><b>Store</b></td> <td width="50%"><b>Calories</b></td> </tr> <tr> <td width="50%">MacDonald's</td> <td width="50%">260</td> </tr> <tr> <td width="50%">Wendy's</td> <td width="50%">270</td> </tr></table>

3. HTML View3. HTML View

Table BorderTable Border1.1. Add table borders as follows. Set the Add table borders as follows. Set the

insertion point somewhere in the table, insertion point somewhere in the table, by clicking in a cell. by clicking in a cell.

2.2. Right-click to produce a menu. Click Right-click to produce a menu. Click Table PropertiesTable Properties. In the . In the BordersBorders section, section, change change SizeSize to to 11. Click . Click OKOK. (Changing . (Changing the value of borderthe value of border size changes the size changes the width of the border.)width of the border.)

3.3. Change the width to 50%.Change the width to 50%.4.4. Save the page.Save the page.

Adding Table RowsAdding Table Rows

1.1. Add a new row at the end of the table as Add a new row at the end of the table as follows. Set the insertion point somewhere in follows. Set the insertion point somewhere in the last row.the last row.

2.2. Click Click TableTableInsertInsertRows or ColumnsRows or Columns... ... Supply the following values: Supply the following values: RowsRows, , checkedchecked; ; Number of rowsNumber of rows, , 22; ; Below selectionBelow selection, , checkedchecked. Click . Click OKOK..

3.3. Enter the following values. In the Enter the following values. In the StoreStore column: column: Burger KingBurger King, , Hardee’sHardee’s; in the ; in the CaloriesCalories column: column: 330330, , 270270. .

4.4. Save the page.Save the page.

Adding a TitleAdding a Title1.1. Set an insertion point at the top-left corner of Set an insertion point at the top-left corner of

the page. Press Enter to insert a blank line.the page. Press Enter to insert a blank line.2.2. Type the following title: Type the following title: Calories in One Calories in One

Hamburger.Hamburger.3.3. Highlight the text. In the left-most pop-up Highlight the text. In the left-most pop-up

list, click list, click Heading 3. Heading 3. 4.4. Center the title.Center the title.5.5. Center the table. (Right-clickCenter the table. (Right-clickTable Table

propertiespropertiesAlignmentAlignmentCenter)Center)6.6. Save the page and preview it.Save the page and preview it.

4. Converting Word Document 4. Converting Word Document to HTML Pageto HTML Page

1.1. Run the Run the WordWord program. (You need not close program. (You need not close the FP window.)the FP window.)

2.2. Retrieve a file named Retrieve a file named alice.docalice.doc from from g:\g:\public\maruyama\110\lecture\FrontPage\public\maruyama\110\lecture\FrontPage\resource.resource.

3.3. Save the document as an HTML file as Save the document as an HTML file as follows. follows.

1.1. Click Click FileFileSave As…Save As…

2.2. In the In the Save AsSave As window, choose window, choose Web PageWeb Page. Type . Type alice.htmlalice.html for file name. Save the file in your for file name. Save the file in your fp/fp/ subfolder.subfolder.

5. Importing HTML Page to Web5. Importing HTML Page to WebHTML file HTML file alice.htmlalice.html is not yet included in the is not yet included in the fp\fp\ web. To register the file in the web, you web. To register the file in the web, you must import it. must import it. Activate FP. In the Activate FP. In the ViewsViews pane, click pane, click FoldersFolders. . Note that Note that alice.htmlalice.html is not visible among the is not visible among the contents of the contents of the fp\fp\ web. web. Click Click FileFileImport…Import… Click the Click the Add FileAdd File… … button. Burrow down into thebutton. Burrow down into the fp\ fp\ folder and folder and double-click on double-click on alice.htmlalice.html. Click . Click OKOK. . In the main FP window, in the In the main FP window, in the Folders Folders View, View, the new member of the web can be seen by the new member of the web can be seen by clicking clicking ViewViewRefreshRefresh..

6. Importing TXT File into6. Importing TXT File into HTML Page HTML Page

Use the Windows Explorer to copy a file Use the Windows Explorer to copy a file named named alice.txtalice.txt in in g:\public\maruyama\110\g:\public\maruyama\110\lecture\FrontPage\resourcelecture\FrontPage\resource to the to the fpfp folder. folder.Make sure that web fp\ is opened. (If not, Make sure that web fp\ is opened. (If not, click click FileFileOpen WebOpen Web, and go to the web.) , and go to the web.) You should have a new page available. You should have a new page available. Click Click InsertInsertFileFile. In the . In the Select FileSelect File dialog dialog box find folder fp\ and open the box find folder fp\ and open the alice.txt alice.txt file. file. (In order show this in the file list, click (In order show this in the file list, click All All Files Files (*.*) in the (*.*) in the Files of typeFiles of type selection list.) selection list.)

You can now format the text as an You can now format the text as an HTML document.HTML document.

Save the file as Save the file as alicetxt.htmlalicetxt.html in in the fp\ folder. the fp\ folder.

7. Copying Excel Worksheet7. Copying Excel Worksheet

1.1. Activate FP. Click Activate FP. Click PagePage in the in the ViewsViews column. column. Be sure that you are in the Be sure that you are in the fp\fp\ web. web.

2.2. Create a new page by clicking Create a new page by clicking FileFileNewNewPagePage… Click … Click Normal PageNormal Page, then , then OKOK..

3.3. Before you forget, click Before you forget, click Save As …Save As … and save and save the file as the file as wksheet.htmlwksheet.html. .

4.4. Click the program menu icon, to bring up the Click the program menu icon, to bring up the Chaminade menu interface. Start Chaminade menu interface. Start Excel Excel and and retrieve a file named retrieve a file named burger.xlsburger.xls from folder from folder g:\public\maruyama\110\lecture\FrontPage\g:\public\maruyama\110\lecture\FrontPage\resourceresource

5.5. Select Select A1..E7A1..E7, then click , then click EditEditCopyCopy..6.6. Activate FP and make sure that Activate FP and make sure that wksheet.htmwksheet.htm

is open. (Check the gray band immediately is open. (Check the gray band immediately above the work area.)above the work area.)

7.7. Set the insertion point at the top-left corner Set the insertion point at the top-left corner of the page and click of the page and click EditEditPastePaste. Note that . Note that the worksheet is turned into a table. (Since the worksheet is turned into a table. (Since some formatting was lost in the conversion, some formatting was lost in the conversion, you can format the text in FP—e.g., making you can format the text in FP—e.g., making the title as the title as Heading 2Heading 2 and bolding the column and bolding the column headings headings StoreStore and and CaloriesCalories

8.8. Back in Back in ExcelExcel, click the chart, click the , click the chart, click the CopyCopy icon. Activate FP, and, with the insertion icon. Activate FP, and, with the insertion point just below the table, click the point just below the table, click the PastePaste icon.icon.

9.9. Save the file (as Save the file (as wksheet.htmlwksheet.html). You will be ). You will be directed to save also the embedded chart (as directed to save also the embedded chart (as wksheet1.gifwksheet1.gif). Click the ). Click the Change FolderChange Folder button button and open folder named and open folder named imagesimages. Click . Click OKOK. (This . (This saves saves wksheet1.gifwksheet1.gif in the in the imagesimages folder of the folder of the current web.)current web.)

10.10.Preview the page. Preview the page. 11.11.You can add border to the table. Instead of You can add border to the table. Instead of

going through a series of button clicks, you going through a series of button clicks, you can modify HTML directly as follows. In the can modify HTML directly as follows. In the HTMLHTML view, scroll to the top where you will see view, scroll to the top where you will see <table>,<table>, just after just after <body>.<body>. Add the border Add the border attribute as follows: attribute as follows: <table border=1><table border=1>

12.12.Save the page again (along with the image Save the page again (along with the image file).file).

8. Creating a Home Page8. Creating a Home Page

Two tables will be used for laying out Two tables will be used for laying out the home page. A 1-row by 2-the home page. A 1-row by 2-columns table will be used to lay out columns table will be used to lay out the header section. A 2-rows by 2-the header section. A 2-rows by 2-columns table will be used for the columns table will be used for the body and the footer section.body and the footer section.

Page LayoutPage Layout

Logo Image Title Text

Navigation (Links to other pages)

Body Text

Footer Section

Table 1

Table 2

Inserting Table for Page LayoutInserting Table for Page Layout

1.1. Activate FP. Open file named Activate FP. Open file named index.htmindex.htm. (Click. (Click FileFileOpenOpen. Find . Find index.htmindex.htm and double-click and double-click on it.)on it.)

2.2. With the insertion point at the top-left corner, With the insertion point at the top-left corner, click click TableTableInsertInsertTableTable. Change the row . Change the row value to value to 11, and in the , and in the Specify width Specify width box, enter box, enter 100100 (i.e., 100% width). (i.e., 100% width).

3.3. Immediately below the first table, in a similar Immediately below the first table, in a similar manner, insert another table, with manner, insert another table, with 22 rows and rows and 2 2 columns, and columns, and 100100% width.% width.

4.4. Insert an image of Chaminade logo in the Insert an image of Chaminade logo in the first table as follows. Set the insertion point first table as follows. Set the insertion point in the left cell of the top table. Click in the left cell of the top table. Click InsertInsertPicturePictureFrom File…From File…

5.5. In the In the PicturePicture window, click the window, click the Select file Select file icon (at the bottom, far right). This will let icon (at the bottom, far right). This will let you hunt for an image stored somewhere on you hunt for an image stored somewhere on your system. Burrow to folder your system. Burrow to folder a:\resources\a:\resources\ and open a file named and open a file named logopos.giflogopos.gif. This . This should embed the image in the table cell.should embed the image in the table cell.

6.6. Set the insertion point in the right cell of the Set the insertion point in the right cell of the top table. Type the following text: top table. Type the following text: Home Page Home Page

7.7. Format the text as follows. Highlight Format the text as follows. Highlight the text, click the text, click 77 in the font size pop-up in the font size pop-up list, and select list, and select Brush Script MTBrush Script MT in the in the font face pop-up list. Change the color font face pop-up list. Change the color by clicking the small down-arrow next by clicking the small down-arrow next to the font color button (big A) and to the font color button (big A) and then click on the blue color. then click on the blue color.

8.8. Save the page. You will be directed to Save the page. You will be directed to save the embedded image also. Make save the embedded image also. Make sure that it is saved in the sure that it is saved in the imagesimages folder of the current web.folder of the current web.

Copying TextCopying Text1.1. Copy a text from an external source Copy a text from an external source

to the second table as follows. Set to the second table as follows. Set the insertion point in the second the insertion point in the second table, row 1, column 2. table, row 1, column 2.

2.2. Start the Start the WordWord program. (Click the program. (Click the Chaminade menu icon and double-Chaminade menu icon and double-click click WordWord icon.) Retrieve a file icon.) Retrieve a file named named gallicwar.docgallicwar.doc in folder in folder a:\a:\resourcesresources..

3.3. Highlight the entire text and click Highlight the entire text and click EditEditCopyCopy..

Adjusting Column WidthAdjusting Column Width

1.1. Activate FP. Click Activate FP. Click EditEditPastePaste..2.2. Adjust column widths as follows. Place the Adjust column widths as follows. Place the

cursor on the border between the two cursor on the border between the two columns, until it turns into a “double columns, until it turns into a “double arrow.” Then, drag the border to the left so arrow.” Then, drag the border to the left so that the column widths are in about 1:2 that the column widths are in about 1:2 ratio—i.e., the left column is about 1/3 the ratio—i.e., the left column is about 1/3 the width of the table. width of the table.

3.3. Fix up the right column by removing extra Fix up the right column by removing extra blank lines after the author name and blank lines after the author name and between paragraphs..between paragraphs..

9. Creating Hyperlinks9. Creating Hyperlinks1.1. Set the insertion point in first row, first column, of Set the insertion point in first row, first column, of

the second table. Type the following as five the second table. Type the following as five separate lines:separate lines:

Hamburgers (table)Hamburgers (table) Alice (from Word)Alice (from Word)Alice 2 (from TXT)Alice 2 (from TXT)Chart (from Excel)Chart (from Excel)FP Tutorial (external link)FP Tutorial (external link)

2.2. Highlight all five lines and then click the Highlight all five lines and then click the BulletsBullets button. (The plan is to associate each item with a button. (The plan is to associate each item with a link.)link.)

3.3. Highlight the text Highlight the text HambugersHambugers (but not (but not tabletable). Click the Hyperlink button. Choose ). Click the Hyperlink button. Choose (highlight and (highlight and OpenOpen) ) table.htmltable.html. Click the . Click the SaveSave button. button.

4.4. Preview the page. Click on the Preview the page. Click on the HamburgersHamburgers link and make sure that it is valid.link and make sure that it is valid.

5.5. In a manner similar to what you did for In a manner similar to what you did for HamburgersHamburgers , highlight , highlight AliceAlice and link the and link the text to text to alice.html.alice.html. Click the Click the SaveSave button and button and preview the page.preview the page.

6.6. Similarly, highlight Similarly, highlight Alice 2Alice 2 and link the text and link the text to to alicetxt.htmlalicetxt.html. Click the . Click the SaveSave button and button and preview the page.preview the page.

7.7. Similarly, highlight Similarly, highlight ChartChart and link the text to and link the text to wksheet.htmlwksheet.html. Click the . Click the SaveSave button and button and review the page.review the page.

7.7. Highlight Highlight FP TutorialFP Tutorial and click the and click the HyperlinkHyperlink button. In the button. In the URLURL input box at input box at the bottom, enter the following:the bottom, enter the following:http://msdn.microsoft.com/workshop/http://msdn.microsoft.com/workshop/languages/fp/2000/tutorial2000/default.asplanguages/fp/2000/tutorial2000/default.asp

(A better way than copying the text is (A better way than copying the text is cutting and pasting the URL.)cutting and pasting the URL.)

Vertical AlignmentVertical Alignment

1.1. The navigation list is centered in The navigation list is centered in the left cell. You can move this to the left cell. You can move this to the top of the cell by adjusting its the top of the cell by adjusting its vertical alignment.vertical alignment.

2.2. Click in the cell. Right-click to bring Click in the cell. Right-click to bring up a menu. Click up a menu. Click Cell propertiesCell properties… In … In the the Vertical alignmentVertical alignment list box, list box, select select TopTop. Click . Click OKOK..

10. Inserting Mail Link10. Inserting Mail Link

1.1. In the right column of the last row insert In the right column of the last row insert a horizontal line as follows. With the a horizontal line as follows. With the insertion point at the top-right corner of insertion point at the top-right corner of the cell, click the cell, click InsertInsertHorizontal line.Horizontal line.

2.2. Immediately below the horizontal line, Immediately below the horizontal line, enter the following text:enter the following text:

This page was last modified on This page was last modified on mm/dd/yy by YourFirstName mm/dd/yy by YourFirstName YourLastNameYourLastName..

(Supply today’s date for mm/dd/yy.)(Supply today’s date for mm/dd/yy.)

3.3. Highlight Highlight YourFirstName YourLastNameYourFirstName YourLastName and click the and click the HyperlinkHyperlink button. Click the button. Click the e-mail icon (resembling an envelop). e-mail icon (resembling an envelop). Enter your e-mail address. Click Enter your e-mail address. Click OKOK. . Click another Click another OKOK..

4.4. Italicize and center the entire sentence.Italicize and center the entire sentence.

5.5. Save the file and preview it.Save the file and preview it.

Table Cell PaddingTable Cell Padding

Overall, the cell contents in the Overall, the cell contents in the navigation sectionnavigation section and the and the body body sectionsection seem too close to each other. seem too close to each other. We can improve this by increasing We can improve this by increasing cell-padding in each cell.cell-padding in each cell.

Click in the cell containing navigation Click in the cell containing navigation links. links.

Right-click, choose Right-click, choose TableTable properties.. properties.. Increase Increase Cell PaddingCell Padding to to 1515. Click OK.. Click OK.

11. Publishing11. Publishing Web on a ServerWeb on a Server1.1. Run Run WS-FTPWS-FTP..2.2. In the In the Session PropertiesSession Properties dialog box, supply dialog box, supply

the following information:the following information: Host Name/ Address:Host Name/ Address: cs.cs.chaminade.educhaminade.edu User ID:User ID: cs-classcs-class Password:Password: to be suppliedto be supplied

3.3. Click the Click the StartupStartup tab at the top. tab at the top. Initial Remote Site FolderInitial Remote Site Folder: : 1101 1101 Initial Local FolderInitial Local Folder: : h:\cs110h:\cs110

4.4. ClickClick OK. OK.

Creating Parallel Folder Creating Parallel Folder StructureStructure

5.5. Establish the root web directory for both Establish the root web directory for both local systemlocal system and and remote siteremote site. In the local . In the local system double-click folder system double-click folder FPFP. You are . You are now in folder FP, which contains subfolder now in folder FP, which contains subfolder demodemo. In the remote site, double-click . In the remote site, double-click your folder—e.g., your folder—e.g., alpha, bravo, charliealpha, bravo, charlie, , etc. In the remote site, click button etc. In the remote site, click button MkDirMkDir. . Create a subdirectory named Create a subdirectory named demodemo. . Note that both sides now have Note that both sides now have demodemo, , which is the root web directory.which is the root web directory.

6.6. Double-click on folder Double-click on folder demodemo both in the both in the local systemlocal system and at the and at the remote site. remote site.

7.7. To copy files from the local to the remote, To copy files from the local to the remote, highlight four files highlight four files alice.htm, table.htm, alice.htm, table.htm, index.htmindex.htm, and , and wksheet.htmwksheet.htm. Send them to . Send them to the remote site by clicking the right arrow the remote site by clicking the right arrow (() which is found between the two sides.) which is found between the two sides.

8.8. In the remote site, click button In the remote site, click button MkDirMkDir. . Create a subfolder named Create a subfolder named imagesimages (to (to mirror the one in the local system).mirror the one in the local system).

9.9. Open the Open the imagesimages folder on both sides. folder on both sides. Copy the following images from the local Copy the following images from the local system to the remote system: system to the remote system: logopos.gif, logopos.gif, wksheet1.gif.wksheet1.gif.

10.10.Run the Netscape browser. Type the Run the Netscape browser. Type the following following URLURL and hit the and hit the Enter keyEnter key..www.chaminade.edu/~cisweb/yourFowww.chaminade.edu/~cisweb/yourFolder/demolder/demoHere, Here, yourFolderyourFolder is is alphaalpha, , bravobravo, , charliecharlie, etc, etc. . Note that, because you Note that, because you have have index.htmindex.htm in the demo folder, it in the demo folder, it is not necessary to include a file is not necessary to include a file name in the URL.name in the URL.

11.11.Check all links and make sure they Check all links and make sure they are valid.are valid.

ReferencesReferences

BooksBooks– Crumlish, Christian, Crumlish, Christian, FrontPage 2000 for Busy FrontPage 2000 for Busy

PeoplePeople. Osborne/McGraw Hill, 1999. The title . Osborne/McGraw Hill, 1999. The title says it all (305 pages).says it all (305 pages).

– Elterbrock, David & Karlin, David, Elterbrock, David & Karlin, David, FrontPage FrontPage 2000 Bible2000 Bible. IDG Books, 1999. A more . IDG Books, 1999. A more extensive (773 pages) compendium of FP2000 extensive (773 pages) compendium of FP2000 features. features.

URLsURLs– TucowsTucows: source of : source of free/sharewarefree/shareware software for software for

Windows, like ftp, zip, e-mailWindows, like ftp, zip, e-mail http://www.tucows/comhttp://www.tucows/com

– ArachnophiliaArachnophilia: a free HTML editor: a free HTML editorhttp://www.arachnoid.com/http://www.arachnoid.com/

– Web Clip ArtWeb Clip Art: : an extensive collection of Web an extensive collection of Web art elements, sorted by categories from art elements, sorted by categories from animals, backgrounds, cartoons, dance, ... animals, backgrounds, cartoons, dance, ... http://webclipart.about.com/internet/webclhttp://webclipart.about.com/internet/webclipart/mbody.htmipart/mbody.htm

– WebmonkeyWebmonkey: an excellent set of tutorials at : an excellent set of tutorials at the beginners' level as well as the advanced the beginners' level as well as the advanced level, on topics including HTMLlevel, on topics including HTML, , Java, Javascript, Java, Javascript, DHTML, and PerlDHTML, and Perlhttp://hotwired.lycos.com/webmonkey/teachttp://hotwired.lycos.com/webmonkey/teachingtool/index.htmlhingtool/index.html