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

ECT 250: Survey of e-commerce technology

An introduction to FrontPage

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 abrowser would.

• You do not have to know any HTML to use theprogram.

• We will only discuss FrontPage 2000. It should beavailable in all DePaul labs.

• The menus and toolbars in FrontPage are similarto other Microsoft programs.

What is FrontPage?

3

The easiest way to start creating Web pages isto 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 MSeditor.

Example: Open a blank page.

Getting started

4

• Page view: Displays the content of a Web pageso that it can be created, edited, and formatted.

• Folders view: Lists all files and folders withinthe site.

• Reports view: Used to display information aboutslow pages, unused files, broken hyperlinks, etc.

• Navigation view: Allows you to create a structureresembling a flowchart that represents your site.

• Hyperlinks view• Tasks view

Views of a Web site

5

We will now create a Web page that contains thefollowing 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

Titles for Web pages typically appear at the topof 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 asdescriptive as possible.

Web page titles

7

Next we want to save the file and add a title to it.1. Click Save As in the File menu2. Type of the name of the title and page3. 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

Paragraph formatting is applied to all the text in theparagraph where the insertion point is located.The most common types of paragraph formatting:

1. Headings2. Alignment and indention3. Line spacing

To change paragraph formatting, move the insertionpoint inside the paragraph to be changed and thenselect the desired format.

Paragraph formatting

9

Headings identify the beginning of page sectionsand 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

Paragraph alignment can be used to align a paragraph with the left or right margin or tocenter 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 theparagraph, that is, cause the text to be even withboth the right and left margins.

Alignment

11

Indentation

• To indent the current paragraph, click on eitherthe right or left indent button on the toolbar.

• You can click the Indent toolbar button manytimes to indent a paragraph further. It isindented approximately half an inch each time the button is clicked.

• In FrontPage 2000 more precise indentation isavailable on the Paragraph dialog box. Thisbox can be reached by selecting Paragraphfrom the Format menu.

• Indentation is measured in points (72 points = 1”)

12

Lists

Lists are common on Web pages because theyorganize information in an efficient, easy-to-readmanner.

The two most common types of lists are bulletedlists and numbered lists.

You can change the bullets and numbering stylesused in the lists by selecting Bullets and Numbering from the Format menu and choosingthe desired style.

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 firstitem and press Enter.

• Continue typing each list item, pressing Enterafter each one. A new number or bullet willbe displayed indented at the same location.

• To end the list, press Enter an additional time.

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

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

• Important note: These spacing options may not besupported by all browsers.

16

Background and text color

• Page properties such as background color and textcolor are changed using the Page Properties box.

• The Page Properties box can be reached by rightclicking anywhere on the page.

• The Background tab of the dialog box can be usedto specify the desired colors for the background,text, and text-based hyperlinks of the current page.

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 colorpalette displayed.

• If the desired color is not listed, click More Colorsto display the More Colors dialog box. On thatbox click the desired color or choose to use acustom color.

• Custom colors are done by specifying an RGBvalue. An RGB value is a set of three numbers(from 0 to 255) specifying each color’s intensity.

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 colorof the resume page.

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 pages2. E-mail address links3. Links to internal pages4. Links to bookmarks within the current

document

Hyperlinks

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 Insertand then select hyperlink). This will bringup the Create Hyperlink dialog box.

• Type in the appropriate URL in the box andclick OK.

Example: Add a hyperlink for my home pageand DePaul University’s page on the resume.

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 Hyperlinkdialog box.

• Click the mail icon to open the Create E-mailHyperlink dialog box. Type the appropriatee-mail address and click OK.

• Click OK to finish creating the link.

Example: Add an e-mail link for my e-mail address.

22

Editing hyperlinks

Existing hyperlinks can be modified or unlinkedas follows:• To edit what a text-based hyperlink is linked to,

click the link toolbar button to display theEdit Hyperlink dialog box, then select or typethe appropriate URL or e-mail address and click OK.

• To unlink a hyperlink, move the insertion pointinside the hyperlink, click the link toolbarbutton to display the Edit Hyperlink dialog box, and then delete the contents of the URL.

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

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

• Link from my resume to DePaul University:http://www.cs.depaul.edu

• E-mail link on my resume:mailto:[email protected]

• Link from my resume to my home page:info/home.htm

• Link from my home page to my resume:../resume.htm

Examples

26

• You can specify that a hyperlink jump the user toa particular location on the current page.

• This is done by placing a bookmark at the location.(Do not confuse this bookmark with the one thatis created by a Web browser).

• When creating the link, you then specify both thepage and the bookmark on the page.

• Bookmarks are useful when you have long pageswith multiple, distinct sections.

Bookmarks

27

1. Select some text in the appropriate location.Then choose Bookmark from the Insert menu. The bookmark text will have a dashed underlineappearance in the FrontPage window.

2. Highlight the text to be linked to the bookmarkand click the hyperlink button to display theCreate Hyperlink dialog box.

3. Insert the appropriate page name and select thebookmark from the Bookmark box.

Example: Create bookmarks to each section.

Creating a bookmark

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 theWeb button to locate the desired URL.

5. There is also a Clip Art button in the dialog box.

Inserting an image

29

General image properties

To change an image’s properties, right click on theimage 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

Appearance properties

The Appearance tab allows you to change the following properties of an image:• Display size

You can choose to keep the image proportionalby locking the aspect ratio.

• BorderDefault for is black except for a hyperlinkedimage.

• AlignmentIt can be fine-tuned with blank padding spacehorizontally and/or vertically.

31

Using a background image

1. Open the Page Properties box and select theBackground tab.

2. Click inside the Background Picture box to check it and then click on the Browse buttonto 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. ClickOK to close the Page Properties box.

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 samemanner as text-based hyperlinks.

Hyperlinked images

33

Like HTML files, image files must be moved overto your students.depaul.edu account using FTP.

Make sure to check that the names and the directorystructure remain the same as you transfer them.

If there is a problem you can correct the Web pageusing pico. Simply look for the <img> tag andmodify the file name.

A warning

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 MicrosoftFrontPage 2000, Jim Buyens, Microsoft Press.

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

Creating thumbnail images

1. Insert the full-size image where you want thethumbnail to appear.

2. Select the large image.3. Select AutoThumbnail from the Tools menu.

This will remove the large image, create thethumbnail in its place, and set up a hyperlinkfrom the thumbnail to the large image.

4. Use the thumbnails handles to resize it.

37

Cropping images

Cropping images is the process of choosing partof an image and discarding the rest.

To crop an image in FrontPage:1. Select the image2. Select the Crop tool from the Picture toolbar.3. Within the selected image, FrontPage will

draw a bounding box with handles. Movethe handles so that the bounding box enclosesthe part of the image you want to retain.

38

Resizing images

• To resize an image, simply select it and drag itshandles.

• Dragging the corner handles resizes the imageproportionally, keeping the aspect ratio thesame.

• The top or bottom handle changes the height.• The right or left handle changes only the width.

39

Using image editors

You can also use image editors to perform moresophisticated tasks or to create your own images.

Example: MS Photo Editor

For this class you may also download alreadyexisting images for use in your page. Be sure tocite your sources for images that you use!

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 pagesuse tables within other tables for layout.

Tables consist of rows, columns, and cells.

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 typedand images inserted into cells of the table.

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 tableand 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 CellProperties dialog box.

43

Table properties

• Alignment: The alignment of the entire table onthe 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 thetwo cell borders.

• Width and height: Dimensions in either pixelsor percentage of the browser window.

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 bordersize 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

Modifying table structure

It is often necessary to change the structure of atable 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

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 shouldbe placed.

• Select Insert Rows or Columns from the Table menu.

• Specify how many rows or columns to insert andwhere they should be located. Click OK.

Deleting rows or columns:• Select the appropriate row or column.• Select Delete Cells from the Table menu.

47

Merging/splitting cells

• Merging cells combines a rectangular group ofcells into one cell. It is used when the contentsof 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 desirednumber of rows and columns.

48

Formatting with tables

• Tables with border width zero can be used toarrange 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.