ECT 250: Survey of E-Commerce Technology

1. ECT 250: Survey of E-Commerce Technology An introduction to FrontPage

2. Outline • Internet utility programs: finger, talk, ping • FrontPage • Initial steps in FrontPage 2000 • Titles • Paragraphs and headings • Lists • Line spacing • Background • Hyperlinks

3. Internet utility programs • TCP/IP supports a variety of utility programs that • allow people to use the Internet more efficiently. • These utility programs include: • Finger • Ping • Talk

4. Finger • Finger is a program that allows a user to obtain • limited information about other network users. • The information that can be obtained includes: • Which users are currently logged on • Where each user logged onto the network from • How long the user has been on the network • When the user last logged onto the system • Finger is sometimes disabled for security reasons.

5. Ping • Ping (Packet InterNet Groper) tests the connectivity • between two Internet hosts and determines if a • host is active on the network. • It works by sending a packet to the specified address • and waiting for a reply. • Ping is typically used to troubleshoot connections. • To run ping, you simply type ping followed by the • IP address or domain name of the machine you are • interested in. • Example: ping students.depaul.edu

6. Talk • Talk is a program that runs on Unix computers • and allows a user to interactively communicate • with another user on the network. • To use it you type talk followed by the string • username@host where username is the person • you wish to talk to and the host is the machine • where they are logged on. • Example: talk settle@perch.cs.uchicago.edu • It is similar to instant messaging programs such • as AOL instant messaging, Yahoo! pager, etc.

7. What is FrontPage? • 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.

8. The easiest start • The easiest way to start creating Web pages is • to make one new page. • This is done by: • Selecting File/New/Page • Modifying the page as needed • Example: Open a blank page.

9. An alternative • If your version requires you to open a new site • in order to create a page you must: • Click on the down arrow next to the New tool- • bar button and select Web. • Select the One Page Web template. • Type an appropriate location for the site. • (If you are in the labs, you should either save • it to a disk or copy it over once you are done • editing). • Click OK

10. The newly created Web The new site will consist of some folders and a blank home page. It should now be displayed in the FrontPage window. (Note: If you first get a message asking if you want to create the folder or convert the folder to a web, select Yes and then the site should be created). If the Page view is selected, double-clicking on the home page filename (either index.htm or default.htm) will display the blank page in the right window.

11. Views of a Web site • 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

12. Our first Web page • We will now create a Web page that contains the • following items: • Title • Heading • A list of names • A background color • Hyperlinks • Our theme will be the theory faculty at CTI. • In creating the page we will also learn about paragraph and page formatting.

13. Opening paragraph and heading We will start off the page by placing a paragraph of text describing the purpose of the page. Above the paragraph we will place a descriptive heading for it. Example: Theoretical Computer Science Group Welcome to the home page of the Theory Group in the School of Computer Science, Telecommunications, and Information Systems at DePaul University.

14. Web page titles Titles for Web pages typically appear at the top of the browser. • Example: 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.

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

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

17. Making a heading 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: Change the headings on the new page.

18. Alignment 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 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.

19. 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”)

20. 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.

21. 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.

22. 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 faculty names and research areas.

23. 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.

24. 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.

25. 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.

26. 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 • on the Theory Group page.

27. Hyperlinks • 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: • Links to external pages • E-mail address links • Links to internal pages • Links to bookmarks within the current • document

28. 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 connecting my name • with my home page.

29. 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 next to my name.

30. 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.

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

32. Relative paths • 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.

33. Upcoming topics • More about FrontPage • Bookmarks • Using and formatting images • Adding tables for information or formatting • Publishing our pages on students.depaul.edu • FTP • Telnet • Unix • Searching the Web • Survey of markup languages