1. ECT 250: Survey of e-commerce technology An introduction to FrontPage

2. 2 FrontPage is a graphics-based HTML editor. It is a WYSIWYG (what you see is what you get) editor, which means that it renders HTML as a browser would. You do not have to know any HTML to use the program. We will only discuss FrontPage 2000. It should be available in all DePaul labs. The menus and toolbars in FrontPage are similar to other Microsoft programs. What is FrontPage?

3. 3 The easiest way to start creating Web pages is to make one new page. The process: Select File/New/Page Once the file is open you type text into the window as you would with any other MS editor. Example: Open a blank page. Getting started

4. 4 Page view: Displays the content of a Web page so that it can be created, edited, and formatted. Folders view: Lists all files and folders within the site. Reports view: Used to display information about slow pages, unused files, broken hyperlinks, etc. Navigation view: Allows you to create a structure resembling a flowchart that represents your site. Hyperlinks view Tasks view Views of a Web site

5. 5  We will now create a Web page that contains the following items: Title Heading Lists of items A background color Hyperlinks  We will create a resume page as an example  In creating the page we will also learn about paragraph and page formatting. Our first Web page

6. 6 Titles for Web pages typically appear at the top of the browser. Example: http://facweb.cs.depaul.edu/asettle/http://facweb.cs.depaul.edu/asettle/ These titles are useful because: It helps identify the page in a search engine. It is given on a bookmark list. Be sure to give each page a title and make it as descriptive as possible. Web page titles

7. 7 Next we want to save the file and add a title to it. 1.Click Save As in the File menu 2.Type of the name of the title and page 3.Click OK You will be required for Assignment 3 to make the name of your first page main.htm or main.html. Saving the newly created file

8. 8 Paragraph formatting is applied to all the text in the paragraph where the insertion point is located. The most common types of paragraph formatting: 1.Headings 2.Alignment and indention 3.Line spacing To change paragraph formatting, move the insertion point inside the paragraph to be changed and then select the desired format. Paragraph formatting

9. 9 Headings identify the beginning of page sections and are usually displayed in bold type with extra space around the heading. There are six possible headings, numbered from 1 to 6. The smaller the heading number, the larger the text will be displayed. Example: Add headings to the resume. Making a heading

10. 10 Paragraph alignment can be used to align a paragraph with the left or right margin or to center the paragraph between the two margins. To change the alignment of the current paragraph, select the appropriate alignment icon. Example: Change the first heading to Center. FrontPage also gives you to option to justify the paragraph, that is, cause the text to be even with both the right and left margins. Alignment

11. 11 Indentation To indent the current paragraph, click on either the right or left indent button on the toolbar. You can click the Indent toolbar button many times to indent a paragraph further. It is indented approximately half an inch each time the button is clicked. In FrontPage 2000 more precise indentation is available on the Paragraph dialog box. This box can be reached by selecting Paragraph from the Format menu. Indentation is measured in points (72 points = 1”)

12. 12 Lists Lists are common on Web pages because they organize information in an efficient, easy-to-read manner. The two most common types of lists are bulleted lists and numbered lists. You can change the bullets and numbering styles used in the lists by selecting Bullets and Numbering from the Format menu and choosing the desired style.

13. 13 Creating a list To create a list: Click the appropriate toolbar button for the type (bulleted or numbered) of list The first number or bullet will be displayed. It will be indented by one line. Type the first item and press Enter. Continue typing each list item, pressing Enter after each one. A new number or bullet will be displayed indented at the same location. To end the list, press Enter an additional time.

14. 14 Nested lists You can also create a nested list using the following: Type the first list until you reach the point where the nested list should begin. Press the Increase Indent button twice to indent the list and display the appropriate number or bullet. Then type the nested list. To return to the level of the first list, press the Decrease Indent button two times. Example: Add lists to the resume

15. 15 Line spacing Line spacing can be specified in the paragraph dialog box. (Recall that the paragraph dialog box can be found under Format in the main toolbar). It can be set to one of Single, 1.5 lines, or Double. The paragraph dialog box can also be used to change the spacing before or after paragraphs. To do this, type the desired spacing amount in points. Important note: These spacing options may not be supported by all browsers.

16. 16 Background and text color Page properties such as background color and text color are changed using the Page Properties box. The Page Properties box can be reached by right clicking anywhere on the page. The Background tab of the dialog box can be used to specify the desired colors for the background, text, and text-based hyperlinks of the current page.

17. 17 Changing the background color To change the background or text color: Click on the down arrow next to the appropriate box and select the desired color from the color palette displayed. If the desired color is not listed, click More Colors to display the More Colors dialog box. On that box click the desired color or choose to use a custom color. Custom colors are done by specifying an RGB value. An RGB value is a set of three numbers (from 0 to 255) specifying each color’s intensity.

18. 18 Warning about colors Be careful when choosing background and text colors that the combination is readable. With a dark background, use light text colors, and with a light background, use dark text colors. Always specify a text color if you change the background color or use a background image, since the default for text may be a color that does not display well with your background. Example: Change the background and text color of the resume page.

19. 19  Virtually all Web pages contain hyperlinks.  Hyperlinks can be connected to either text or an image on a Web page.  There are four types of hyperlinks: 1. Links to external pages 2. E-mail address links 3. Links to internal pages 4. Links to bookmarks within the current document Hyperlinks

20. 20 Links to external pages To add a hyperlink to an external Web page: Select the text to be linked and click the link toolbar button. (You can also choose Insert and then select hyperlink). This will bring up the Create Hyperlink dialog box. Type in the appropriate URL in the box and click OK. Example: Add a hyperlink for my home page and DePaul University’s page on the resume.

21. 21 E-mail hyperlinks To add an e-mail hyperlink: Select the text to be linked and click on the link toolbar button to display the Create Hyperlink dialog box. Click the mail icon to open the Create E-mail Hyperlink dialog box. Type the appropriate e-mail address and click OK. Click OK to finish creating the link. Example: Add an e-mail link for my e-mail address.

22. 22 Editing hyperlinks Existing hyperlinks can be modified or unlinked as follows: To edit what a text-based hyperlink is linked to, click the link toolbar button to display the Edit Hyperlink dialog box, then select or type the appropriate URL or e-mail address and click OK. To unlink a hyperlink, move the insertion point inside the hyperlink, click the link toolbar button to display the Edit Hyperlink dialog box, and then delete the contents of the URL.

23. 23 To specify an internal link you must: 1.Select the text to be linked and click the hyperlink toolbar button to display the Create Hyperlink dialog box. 2.Browse the open pages or enter the path to the internal page. 3.Click OK. Links to internal pages

24. 24 The relative path of a page is obtained by: Using the name of the file if it is in the same folder as the Web page in which the link is created. Using../ whenever you must move up a level in the hierarchy of directories to reach the file. Using the name of a directory to move down the hierarchy of folders. When you publish the pages the files must have the same relative structure or your path will be incorrect. We will discuss that issue later. Relative paths

25. 25 Link from my resume to DePaul University: http://www.cs.depaul.edu E-mail link on my resume: mailto:asettle@cs.depaul.edu Link from my resume to my home page: info/home.htm Link from my home page to my resume:../resume.htm Examples

26. 26 You can specify that a hyperlink jump the user to a particular location on the current page. This is done by placing a bookmark at the location. (Do not confuse this bookmark with the one that is created by a Web browser). When creating the link, you then specify both the page and the bookmark on the page. Bookmarks are useful when you have long pages with multiple, distinct sections. Bookmarks

27. 27 1.Select some text in the appropriate location. Then choose Bookmark from the Insert menu. The bookmark text will have a dashed underline appearance in the FrontPage window. 2.Highlight the text to be linked to the bookmark and click the hyperlink button to display the Create Hyperlink dialog box. 3.Insert the appropriate page name and select the bookmark from the Bookmark box. Example: Create bookmarks to each section. Creating a bookmark

28. 28 To insert an image into a page using FrontPage: 1.Move the insertion point to where the image is to be located. 2.Click the Insert Picture From File toolbar button to display the Picture dialog box. 3.If the image is on your machine, use the folder button to navigate to the appropriate folder, select the desired image and click OK. 4.If the image is located on a web server, use the Web button to locate the desired URL. 5.There is also a Clip Art button in the dialog box. Inserting an image

29. 29 General image properties To change an image’s properties, right click on the image to reach the Picture Properties dialog box. The options on the General tab: Interlace or make a GIF transparent Change the quality or progressive information on a JPEG Specify a low resolution image to display while the higher resolution image is loading Indicate text that should display in place of the image in text-only mode

30. 30 Appearance properties The Appearance tab allows you to change the following properties of an image: Display size You can choose to keep the image proportional by locking the aspect ratio. Border Default for is black except for a hyperlinked image. Alignment It can be fine-tuned with blank padding space horizontally and/or vertically.

31. 31 Using a background image 1.Open the Page Properties box and select the Background tab. 2.Click inside the Background Picture box to check it and then click on the Browse button to locate the image file. 3.Select the image and close the box. 4.The background image should now be listed in the box next to the Browse button. Click OK to close the Page Properties box.

32. 32 To make an image a hyperlink: 1.Select the image to be linked and click the Add Hyperlink dialog box. 2.Specify the hyperlink information as for a text- based hyperlink. 3.Click OK to create the link. Hyperlinks on images can be changed in the same manner as text-based hyperlinks. Hyperlinked images

33. 33 Like HTML files, image files must be moved over to your students.depaul.edu account using FTP. Make sure to check that the names and the directory structure remain the same as you transfer them. If there is a problem you can correct the Web page using pico. Simply look for the tag and modify the file name. A warning

34. 34 Modifying images FrontPage allows you to modify images. These modifications include: Adding text to images Creating thumbnail images Cropping and resizing images For more information see Running Microsoft FrontPage 2000, Jim Buyens, Microsoft Press.

35. 35 Adding text to images 1.Add the graphic to the page. 2.Select the graphic by clicking it. 3.Choose the Text tool on the Picture toolbar. 4.Click inside the inner handles to place an insertion marker and then type the text. 5.The font size, color, and other attributes can be modifying using the Format menu. 6.Click outside the graphic to stop text entry.

36. 36 Creating thumbnail images 1.Insert the full-size image where you want the thumbnail to appear. 2.Select the large image. 3.Select AutoThumbnail from the Tools menu. This will remove the large image, create the thumbnail in its place, and set up a hyperlink from the thumbnail to the large image. 4.Use the thumbnails handles to resize it.

37. 37 Cropping images Cropping images is the process of choosing part of an image and discarding the rest. To crop an image in FrontPage: 1.Select the image 2.Select the Crop tool from the Picture toolbar. 3.Within the selected image, FrontPage will draw a bounding box with handles. Move the handles so that the bounding box encloses the part of the image you want to retain.

38. 38 Resizing images To resize an image, simply select it and drag its handles. Dragging the corner handles resizes the image proportionally, keeping the aspect ratio the same. The top or bottom handle changes the height. The right or left handle changes only the width.

39. 39 Using image editors You can also use image editors to perform more sophisticated tasks or to create your own images. Example: MS Photo Editor For this class you may also download already existing images for use in your page. Be sure to cite your sources for images that you use!

40. 40 Tables Tables are used on Web pages to: Place a table of contents or other important information in a specific location Keep images and text aligned properly Divide the page into columns Although it is not always apparent, many pages use tables within other tables for layout. Tables consist of rows, columns, and cells.

41. 41 Creating a table 1.Click on the Insert Table toolbar button. 2.Use the mouse to highlight the desired number of rows and columns on the Insert Table grid. 3.Release the mouse button and the table will appear. 4.The table will have a default size and style that you can modify. Once the table has been created, text can be typed and images inserted into cells of the table.

42. 42 Table and cell properties The properties of a table determine its alignment, border, width, colors, etc. To change table properties, right click on the table and select Table Properties from the menu. The properties of cells include layout, colors, width, height, etc. Individual cell properties can be changed by right- clicking on the inside a cell to reach the Cell Properties dialog box.

43. 43 Table properties Alignment: The alignment of the entire table on the Web page. One of Default, Left, Right, Center, or Justify. Cell padding: The number of pixels between the cell contents and border. Cell spacing: The number of pixels between the two cell borders. Width and height: Dimensions in either pixels or percentage of the browser window.

44. 44 Table properties Border size: Width of border in pixels. Border colors: One or two colors used for the border of all cells. Only visible if the border size is non-zero. Background color or picture: Used in the back- ground of all cells unless otherwise specified. Default is to use the page background.

45. 45 Modifying table structure It is often necessary to change the structure of a table after it has been created. Modifications include: Inserting rows and columns Deleting rows and columns Merging cells: combine a rectangular group of cells into a single, larger cell Splitting cells

46. 46 Inserting/deleting rows/columns Inserting rows or columns: Move the insertion point inside the row or column closest to where the new row or column should be placed. Select Insert Rows or Columns from the Table menu. Specify how many rows or columns to insert and where they should be located. Click OK. Deleting rows or columns: Select the appropriate row or column. Select Delete Cells from the Table menu.

47. 47 Merging/splitting cells Merging cells combines a rectangular group of cells into one cell. It is used when the contents of a table are not a uniform size. To merge cells, select all the appropriate cells, then choose Merge Cells from the Table menu. To split a cell into multiple ones, move into the cell, then select Split cells from the Table menu. At the Split Cells dialog box, indicate the desired number of rows and columns.

48. 48 Formatting with tables Tables with border width zero can be used to arrange information on a Web page. To use a table to lay out an entire Web page, select a table of the appropriate size and then create additional tables inside the main table. Example: Format the resume page.