What is FrontPage

1
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 ECT labs.
• The menus and toolbars in FrontPage are similar
• to other Microsoft programs.

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

3
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

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

6
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 ECT faculty at CTI.
• In creating the page we will also learn about
• paragraph and page formatting.

7
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 eCommerce Technology
Group Welcome to the home page of the
eCommerce Technology Group in the School of
Computer Science, Telecommunications, and
Information Systems at DePaul University.
8
Web page titles

• Titles for Web pages typically appear at the top
• of the browser.
• Example eCommerce Technology Group
• 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.

9
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 index.htm or index.html.

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

11
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.
12
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.
13
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)

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

16
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

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

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

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

20
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 eCommerce Technology Group page.

21
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

22
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 Course Site

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

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

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

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

27
Examples

• Link from ECT Group page to CTI home page
• http//www.cs.depaul.edu
• Link from ECT Group page to my home page
• http//www.daschmelzer.com/ect250
• E-mail link on my home page
• mailtodschmelzer_at_cti.depaul.edu
• Link from my home page to the ECT Group page
• ../index.htm

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

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

30
Loading efficiency

• Most Web pages contain graphical images to
• add interest, make navigation easier, and to
• convey necessary information.
• Most Web users will wait only a short time for
• a page to load, so efficiency considerations
• are important.

31
Graphic formats

• Graphic formats are usually referred to by their
  file
• extensions, such as .tif, .bmp, .gif, .jpg, and
  .png.
• The .tif format is commonly used with scanned
• images and the .bmp format is used by Windows
• Paint program.
• Web page images are usually saved in either the
• .gif .jpg, or .png format.
• Graphic formats are usually compressed. File
• compression can either by lossless, which does
• not decrease image quality, or lossy, which does
• lose image quality.

32
GIF

• The Graphics Interchange Format (GIF) is the
• standard format for Web page images and is
• supported by all browsers that display images.
• It is an efficient, compressed format that
  allows
• up to 256 colors. It uses lossless compression.
• GIF images are always rectangular, but a
• transparent background can be used to make
• the images appear to be non-rectangular.
• GIF images can be interlaced, which means that
• the image is displayed initially at low
  resolution
• and its quality is increased as it downloads.

33
JPEG

• The Joint Photographic Experts Group JPEG)
• format is supported by most browsers that
• display images.
• JPEG images use lossy compression. The amount
  of compression ranges from 0 to 100. The
  higher the compression, the smaller the file size
  and the lower the image quality.
• JPEG cannot be made transparent, but it can be
  specified as a progressive JPEG, which is loaded
  the same way as an interlaced GIF.

34
PNG

• The Portable Network Graphics (PNG) format is
• a new(ish) format created for Web page images.
• It is expected that it will eventually replace
  GIF.
• PNG images use a lossless compression that is
• more efficient than GIF.
• It can use a color palette of 256 colors or less
  like
• GIF or support true color like JPEG images.
• PNG images can be interlaced and transparent.

35
Selecting a format

• The GIF or PNG format is usually used for line
• art such as clip art, logos, etc.
• JPEG is chosen for photographs because true
• color is desirable and selecting the amount of
• compression can result in smaller sized files.
• One approach is to save an image in several
• formats and choose the one with the smallest
• file size that produces acceptable quality.

36
Size considerations

• GIF, JPEG, and PNG images are all bitmapped
• formats, which means that the images are
• made of a rectangular grid of pixels.
• Web images are measured in pixels.
• Example 500 x 55
• Images should be kept as small as possible to
• reduce the file size of the images and to keep
• the physical size of the Web page small to
• prevent scrolling.
• A width of no more than 540 pixels is safe.

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

38
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

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

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

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

42
Publishing the page-Unix
Now that we can create some basic Web pages, we
need to discuss how to publish these pages, that
is, make them available on the WWW thru the
students.depaul.edu machine. Next we learn how
to move existing pages onto students.depaul.edu.
This requires using FTP and Telnet, and learning
some Unix commands.
43
The steps for publishing

• Create the Web page(s) using FrontPage
• FTP the page(s) over to students.depaul.edu
• Telnet into your account and change the
• permissions for all necessary files and
• directories.
• This will include all files transferred in the
• second step.

44
FTP with a browser

• To use a browser as an interface with FTP
• Type ftp//yourlogin_at_students.depaul.edu
• This will bring up a window that prompts you
• for your password.
• Type in your password (being careful to type
• it correctly) and hit enter.
• The files in your main directory will appear.
• Example ftp//rbhaumik_at_condor.depaul.edu
• Note Be sure to check that the browser does not
• store your password.

45
Other versions of FTP

• You can also directly use FTP programs if they
• are installed on your machine.
• Examples
• ws_ftp
• cuteftp
• Most have GUI interfaces and work in a manner
• similar to the Web browser interface.

46
HTML directory
A Web server typically requires that any Web
pages that are to be published on the site must
be located in a particular directory. On
students.depaul.edu (and condor.depaul.edu) that
directory is public_html. On others it is
the root directory If you do not have a
public_html directory you must create one. All
your web pages must be in that directory or they
will not be visible to browsers.
47
A Requirement Revisited
Pages you will publish on the shrike must be
located in a subdirectory of public_html, your
security directory. You will NOT receive credit
for your homework if they are not located in your
security directory.
48
Creating directories with FTP

• To create a directory on students.depaul.edu
• using FTP with the browser interface
• Select File
• Select New
• Select Folder
• Click on the folder and give it the name
• you wish it to have.
• Alternatively you can use the new folder icon
• (or a similar button) in any GUI interface for
• FTP.

49
Moving files with FTP

• Once you have created a public_html directory,
  you
• can move your HTML files into that directory.
• In order to do that
• Open up the directory into which you wish to
• move the file.
• Open the folder where the file is located on your
• local machine.
• Select Edit/Copy or drag the file directly into
  the
• directory.
• Ex Place pages into public_html/ltsecurity
  directorygt.

50
The next step Telnet
Once you can moved your Web pages into
your account, you now need to ensure that they
are visible to a Web browser. This involves
using Telnet to log into the students machine and
changing the access permissions on the files and
directories. Note Some FTP programs allow you
to change permissions using the GUI interface.
We will use Telnet (and Unix commands) instead.
51
Access permissions

• When deciding who can have access to a file,
• UNIX recognizes three categories of users
• Owner The owner of the file or directory
• Group Other users belonging to the owners
• group
• Public All other users on the system

52
Types of access

• There are three things that can be done to a
  file
• Read Examine (but do not change) the file
• Write Change the file
• Execute If the file contains a program, run
• the program
• There are also three things that can be done to a
• directory
• Read List the contents of the directory
• Write Change the directory by adding or
• removing existing files
• Execute Search the directory using ls l

53
A permission listing
Because there are three types of users with
three types of access permission, each
file/directory has associated with it 9
different settings. (It also has another setting
that indicates whether it is a file or
directory).
54
Access permissions

• To give directory_name the correct permissions
• you must
• Move into the parent directory of directory_name
• using cd (change directory)
• Type chmod 755 directory_name
• In order to give file_name the correct
  permissions
• you must
• Move into the parent directory of file_name
• using cd (change directory)
• Type chmod 644 file_name