ECT 250: Survey of ecommerce technology

1
ECT 250 Survey of e-commerce technology

• An introduction to FrontPage

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

3
Getting started

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

4
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

5
Our first Web page

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

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

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

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

9
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 Add headings to
the resume.
10
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 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.
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
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
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
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 in
• points.
• Important note These spacing options may not be
• supported by all browsers.

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
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 colors 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 color
• of the resume page.

19
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

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

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

25
Examples

• Link from my resume to DePaul University
• http//www.cs.depaul.edu
• E-mail link on my resume
• mailtoasettle_at_cs.depaul.edu
• Link from my resume to my home page
• info/home.htm
• Link from my home page to my resume
• ../resume.htm

26
Bookmarks

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

27
Creating a bookmark

• 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.
• Highlight the text to be linked to the bookmark
• and click the hyperlink button to display the
• Create Hyperlink dialog box.
• Insert the appropriate page name and select the
• bookmark from the Bookmark box.
• Example Create bookmarks to each section.

28
Inserting an image

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

29
General image properties

• To change an images 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
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
Using a background image

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

32
Hyperlinked images

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

33
A warning
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 ltimggt tag and modify the file name.
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
Adding text to images

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

36
Creating thumbnail images

• Insert the full-size image where you want the
• thumbnail to appear.
• Select the large image.
• 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.
• Use the thumbnails handles to resize it.

37
Cropping images

• Cropping images is the process of choosing part
• of an image and discarding the rest.
• To crop an image in FrontPage
• Select the image
• Select the Crop tool from the Picture toolbar.
• 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
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
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
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
Creating a table

• Click on the Insert Table toolbar button.
• Use the mouse to highlight the desired number
• of rows and columns on the Insert Table grid.
• Release the mouse button and the table will
• appear.
• 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
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
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
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
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
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
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
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.