Download FrontPage Introduction 1 FrontPage 2003 Introduction Copyright

FrontPage Introduction
1
FrontPage 2003 Introduction
Copyright 2003 Technology Support, Texas Tech University. ALL RIGHTS RESERVED. Members of
Texas Tech University or Texas Tech Health Sciences Center may print and use this material for their
personal use only. No part of this material may be reproduced in any form without written permission from
the author.
Class Objectives
After completing this shortcourse, you should be able to:

Begin a FrontPage web using the Task Pane.

Create new pages for the web.

Bring in your text information from another source.

Use simple formatting techniques.

Create a simple table.

Create a simple list.

Create a hyperlink.

Create a bookmark for a hyperlink.

Add an image to a page.

Publish the web to a server.
Introduction
FrontPage has three ways to look at your page:

Normal mode-the page you do your work on; WYSIWYG format (more like WYSI AWYG-approximately)

HTML mode-displays the actual HTML tagging for the work done in Normal mode

Preview mode-displays your page in browser format-pretty much how the user will see the page
FrontPage XP has the added feature of a Task Pane that is used for starting new pages, working with the Office clipboard,
and searching for other Webs and files. The Task Pane is accessible with View>Task Pane and View>Toolbars>Task
Pane.
You cannot guarantee that an editor like FrontPage will produce the same results on every browser.
Wizards
FrontPage comes equipped with wizards, just as Word, Excel, Access, and other Office programs do. A wizard is a program
that takes you through a process step-by-step. Two of the wizards included in FrontPage are Corporate Presence (avoid this
one!) and Discussion Web (creates a discussion group). The other two are the Import wizard for importing webs from a server
and including files in your current web and a Form Page wizard for creating a skeleton form (does not connect you directly
with server databases or scripts).
Templates
Templates (accessed with Empty Web and Page Templates in the Task Pane) are pre-designed pages with boilerplate
text and images. Single-clicking on a choice will give you a preview thumbnail at the bottom right of the dialog box. You
can also create your own templates.
FrontPage Introduction
2
The Home Page
If you have used a template, FrontPage 2002 names the home page index.htm rather than default.html (earlier versions). This
is a convenience for the software. When uploaded to a server to make your page(s) public, FrontPage will rename the file
appropriately to the server being used, if it is needed.
If you are creating a page without a template, make sure you name your home page index.htm when you save it.
Views
FrontPage has several views you can use. The Views frame is located on the left side of the screen and contains six views of
your web. Each view gives you different types of information about your web and enables you to work with the site in
different ways.

Page view is the editing view. It has three modes: Normal, HTML, and Preview. FrontPage always starts in this view.

Folders view opens the Folders List frame between Views and the work area. Folders List has a hierarchical list of
folders of the current web. The work area changes to a detailed list of pages and files inside the folder you select
from those in the Folders List frame. Use this view to:

o
rename files
o
create new folders
o
delete a file
o
see folder contents
o
open a file
o
view a file’s properties
o
put pages into folders (FrontPage automatically updates those files links throughout the site.)
o
store work-in-progress in FrontPage’s Private folder (on a server with FrontPage extensions)
Reports view is for managing pages in the web by giving you a wide range of information about files within the
web:
o
the name of files
o
the number of files by type
o
the size of a file, including graphics, etc.
o
a description

Navigation view helps chart how visitors will find their way through your site (a type of site map).

Hyperlinks view gives you an eagle-eye view of the links in your web-a type of hyperlink tree.

Tasks view lets you maintain a to-do list of items that need to be completed as you work to complete your site.
This is especially helpful when working in a group.
Beginning a Web
You begin a new web by clicking Empty Web under New in the Task Pane. Just starting a new page won’t work! You’ve got a
page but no web. You can choose from a template that creates a series of linked pages, a One Page Web that creates a web
with one home page (index.htm), or an Empty Web that creates only the basic structure but no pages at all.
You can also open an existing FrontPage web with File>Open Web or import an existing Web site to update it (this
requires using the Import Web Wizard).
Creating Pages in Navigation View
Navigation view gives you a hierarchical look at your web. You can move your pages around to achieve the effect you want
in your overall design.
FrontPage Introduction
3
Create pages in this view.
1.
Click 3 times on the New Page icon in the Standard toolbar.
2.
Move these around as you need to. Rename the page icons with a word or two. Use single-clicks only in this step.
Right-click, and select Rename. (Or, first click on the page icon; then click on the name. After a moment, the
name will be highlighted.)
New files will use this as a title and the file name if you do not leave Navigation view before naming them. If you
use Themes, the names will be used in the top banner position.
3.
Click the Page View button to set the names, etc., or double-click Home Page to go to Page View.
Again, do not rename index.htm, which is the home page file.
If you create a new page in Page View and save it, you can drag it from the folder list to the Navigation hierarchy.
Also create new pages with Ctrl-N and File>New>Page or Web. (Drag it to the Navigation view location as shown in the
figure to the right.)
Import pages into an already open web. Import a file, files, or folder(s) of any type by selecting File>Import.
Page Title
Every page should be given a title. Some browsers use this for the history list or the name of the browser window or the
bookmark/favorite name or all of them. The state requires that all official pages have them.
If you gave a name to your pages in Navigation view, you already have a title. You can add or change a title with
File>Properties (or right-click on a blank portion of the page). The Page Properties box will open. Give your pages titles
that will be descriptive to your reader. Titles can also be added in the Save/Save As dialog boxes, using the Change
button.
Other Page Properties
While the Page Properties box is open, click on the Background tab. You will see that you can also include a background
picture and alter hyperlink colors, page text color, and page background color.
Note: This tab will not be available if you are running a FrontPage Theme.
Not in the Lecture: Other Items
Special Symbols
There are special and forbidden characters in HTML. These should be replaced with symbol sequences, called escape
sequences. For example, the <, >, and & cannot be used outside of HTML tag functions. They are not allowed in the actual
text. Using them risks crashing certain browsers. FrontPage takes care of these common characters automatically.
For others, FrontPage still makes special characters simple with a Symbol window that lists the characters. (Microsoft Word
has a similar symbol window.) Use Insert>Symbol to access this window. When you click on a character, it appears in the
box at the bottom of the listing. Click Insert and then Close to enter it on your page. FrontPage changes these when published.
You may or may not see the Esc sequences in HTML mode.
Nonbreaking Spaces
HTML ignores extra spacing and Returns from the keyboard, but FrontPage does not (except in HTML mode). It uses
nonbreaking spaces to add this extra physical space and the sequence <p>&nbsp;</p> to add extra paragraph Returns. You
can use these nonbreaking spaces for adding space for the first line of a paragraph (using a Tab will automatically place
three nonbreaking spaces in a row).
You can add these manually to prevent bad breaks between months and days or titles and names or to fill an empty table
cell and make it appear more “finished.”
To do this, use the Symbol table. The nonbreaking space is located in the first position on the Symbol table. When you
click on it, the box beside Insert will appear blank, but when you Close the box, a blank space will appear on your work
page, but a &nbsp; escape sequence will be added to your HTML.
FrontPage Introduction
4
Comments
You can comment in HTML. You can put anything you want in a comment except for tags. These comments can be seen
only when a reader chooses to View Source in a browser. To place a comment, use Insert>Comments.
Text will appear purple in Normal mode, between special characters (<!-- -->) in HTML mode, and will not appear in
Preview mode or in a browser.
Warning: Since the browser’s Source page will display what you write, it is a good idea to watch what you say and never
include passwords or specific server information you do not want the public to have.
Taking Pages from Word
You can import pages into an already open web. You are going to COPY them. In Word, open page1.doc, page2.doc, and
page3.doc.
Select all in page1.doc (Ctrl-A), and COPY. Go to FrontPage, and PASTE into index.htm.
Select all in page2.doc, and COPY. Go to FrontPage, and PASTE into biodiversity.htm.
Select all in page3.doc, and COPY. Go to FrontPage, and PASTE into wetlands.htm.
index.htm
1.
CUT If Earth...
2.
Right-click for Page Properties and PASTE into Title text box.
3.
Format>Shared Borders (Shared Borders ensure that information is presented consistently and correctly
throughout the site.)
4.
o
All pages
o
Top and Include navigation buttons
o
Bottom
Click once on the banner text (note different icon), right-click Page Banner properties, and paste If Earth....
Change to:
o
5.
Verdana, Size 5, and Green
Right-click on the link navigation and get Link Bar Properties
o
Child level
o
Change to Verdana, and Size 2.
Side-Note: Stacking Fonts
You can “stack” font faces (choose more than one), and the browser will look for the preferred font first on the reader’s
system and then go on to the second, etc., until it finds one that is installed, if any. To set this up, you must do a little
manual editing in HTML mode:

Go to HTML mode and find the <font face="xxx"> tagging that appears just before the text you highlighted
in Normal mode.

Change the font within the quotes to a list of fonts, starting with the font you most prefer. It is better-though not
imperative-that you choose “common” fonts. In other words, a list of all serif fonts or all sans-serif fonts.
For example: If you chose Verdana to be the font you want as your first choice, go to HTML mode and find <font
face="Verdana"> at the beginning of the text you had highlighted in Normal mode. To that tag, prior to the last quote, add
a comma, space, Arial, comma, space, Helvetica:
<font face="Verdana, Arial, Helvetica">
FrontPage Introduction
5
Side Note: Text Color
You can change the color of your text with the Font Color drop-down menu on the Formatting toolbar (the “A” icon
underscored with a bar), or the Font dialog box (select Format>Font).
You can “highlight” with the Highlight Color button on the Formatting toolbar, but this works only when style sheets are
supported and not in all browsers that do support them.
Side Note: Color
In the area of color, all you have to worry about in FrontPage is picking the particular color you want from a dialog box.
You do not have to know RGB notation, but you are limited to FrontPage colors.
For example, highlight some text, and

Click on the down-arrow beside the Font Color button. You will get a drop-down box.

Choose a color. This color will remain your font color until you choose another-or Automatic, which is the Text
color you set with the Page Properties dialog box (or what was chosen for you by a Theme).
If you want all the text on your page to be a specific color, and you are not using Themes, right-click on a blank spot of
the page or select Format>Background to select a Text color for the entire document and also a Background
color, if desired.
Note: Theme will override this and not return to your choices if you turn off the theme.
There are 216 colors common to Mac and Windows operating systems. These are called “browser-safe” colors. They will
closely resemble each other on both platforms and not dither (change to a “nearby” color). You can find these colors by
choosing More Colors on any color menu or dialog window that pops up. To use colors beyond this, you can go to Custom
(in the More Colors window) to get a rainbow box of colors with a slider for different tones. Keep in mind, that the colors
you choose there may come out a bit differently on different platforms.
In any menu or window, the colors listed as “Automatic” are the FrontPage defaults or those selected in Page Properties.
These color choices are converted to hexadecimals used by HTML (e.g., #ff0000 for red, #ffffff for white, and #87050e
for a dark red).
Side Note: Physical vs. Content-based (Logical) Tags
HTML divides text formatting tags into two main categories: physical and content-based/logical.

Physical tags
o
can be combined.
o
tell the browser how to display the text.
o
do not relate anything to a disabled-access browser.
You use these on your page by way of the Formatting toolbar or by selecting Format>Font and choosing from the Font
style box in the Font dialog box. The corresponding HTML tags include <i> for italic, <b> for bold, and <tt> for
monospaced fonts.
The Blink format is annoying, so is strikethrough. The state guidelines frown on both. Also, avoid using an underline, which
is confusing with links.

Content-based (or logical) tags
o
cannot be combined with each other or physical tags (e.g., you can’t get bold italic with logical tags).
o
tell the browser that the enclosed text has specific meaning.
o
used by disabled-access software to detect and relate the differences in the text to its user.
Logical tags in the Font dialog box include Emphasis (italic), Strong for bold, and Code and Keyboard for monospaced fonts
(such as Courier, the default monospaced font on most browsers). What you see in HTML mode is <em>, <strong>,
<code>, and <kbd>.
FrontPage Introduction
6
When choosing “B” for bold in the Formatting toolbar, a <b> tag (physical tag) is inserted into the HTML rather than
<strong>, (a logical tag). To insert a <strong> tag for bold, you must use Format>Font, and in the Font dialog box,
click in the Strong check box. (Make sure Bold is not highlighted in the Font style list above in the dialog box or clicked on
the Formatting toolbar.) You would do this to obtain any of the logical tags.
Logical tags are preferred by state guidelines because they provide disability-access to your pages.
Lecture Continued:
6.
For TOC, delete extra space between Level 1s and 2s (Backspace and Shift-Enter) and keep a paragraph space
between Level 1 and 2 (or all will be affected equally by the Increase Indent). Stop at The Earth.
7.
Highlight all TOC, and use Increase Indent 5 times to put listing near the center of the banner.
Political, Ethical, and Common Sense should be indented one more time as Level 2.
8.
Bold On this page using B.
9.
Add a Heading 2 to The Earth.
10. Italicize wonderful in first line of first paragraph using I. Bold thousands using B.
11. Italicize best in the last sentence using EMPHASIS. Bold less in same sentence using STRONG.
12. Add a Heading 2 to The Problem.
In this heading’s paragraph, highlight Planets are designed to be self-regenerating and make it bold and blue.
13. Add a Heading 2 to The Treaties.
14. After the next paragraph, press Enter, and create a table with 2 columns and 4 rows, using the Insert Table button.
15. Right-click the table to get Table Properties. Change Cell padding to 4, Cell spacing to 5, and the Border to
Size 5.
16. Create a table caption by first copying Abbreviations for Selected International... then clicking in the table and selecting
Table>Insert>Caption. At the cursor that appears above the table, PASTE in the copied information. (Notice the
Paste Options Smart Tag and check the Clipboard Task Pane.) Delete the original Abbreviations for Selected
International...)
17. Highlight Abbreviations for Selected International..., and make it bold with B.
18. Highlight the next item and use Drag-and Drop to move the text into the first cell. Repeat for the second item and
second cell.
19. Highlight that row in the table and select I for italic, and click the Center button.
20. Continue with the Drag-and-Drop for the rest of the table pieces.
21. Highlight the last three items of the second cell of the third row, and click the Numbering icon.
22. Delete any extra spaces left below the table.
23. Add a Heading 2 to Learning Preservation.
24. Add a Heading 3 to Political, Ethical, and Common Sense.
25. Press Enter after the next paragraph.
26. Create a table using Table>Insert>Table with 1 row and 3 columns, no border (0), 75% in width, and centered.
You are going to put some pics and text side by side.
27. Bring 3 graphics into the web.
o
File>Import
o
Add File
o
Locate A: drive and Ctrl-click bones.gif, dino.gif, and epalogo.gif.
FrontPage Introduction
7
o
Click Open and then OK.
o
These appear in your Folder List. Highlight these one at a time and move them into your Images folder.
28. Delete DINO PIC text. At cursor, select Insert>Picture>From File. Your Images folder should appear in the
dialog. Double-click dino.gif.
29. Delete DINO BONES PIC text, repeat the procedure, and double-click on bones.gif.
30. Repeat for EPA PIC and epalogo.gif.
31. Click on the dino. Notice the handles, Picture toolbar, etc. After using a few options on the toolbar to test them
out, restore the picture for the present use by clicking the Restore button at the end of the Picture toolbar.
32. Drag the dino (you’ll see a little rectangular icon outline next to your arrow cursor to show you that you are
dragging the picture) into the first cell of the table.
33. Drag-and-Drop the next question into the middle cell. Use EMPHASIS to italicize really.
34. Drag the bones into the last cell.
35. Resize the table a bit (horizontally only!)
36. Center the table by right-clicking, selecting Table Properties, and choosing Alignment Center.
37. Remove extra space below table.
38. Add a Heading 2 to Other Sites and News Groups.
39. Insert a hyperlink by clicking the EPA logo. Use Insert>Hyperlink or the button, and in the Address (the URL)
box, type www.epa.gov beside the http:// (Note: This may pick up the last URL typed in a browser.)
Select Environmental Protection Agency, Insert>Hyperlink, and type the same thing in the URL box (start typing, and
the rest will appear). Then, click beside the EPA logo, add a space, and press Delete to put the link beside the
graphic. Both are now a link.
(Note: In order to put text at the center location of the logo, use a table as was shown with the dino pics.)
40. Make links of the next three using these URLs (just keep typing over the address that FrontPage puts in for you):
www.nwf.org/nwf
www.wwf.org
www.sierraclub.org
41. Save and test links with Preview. (Go back to Normal mode between each checked link to reset.)
42. Highlight alt.save.the.earth, Insert>Hyperlink, delete the http:// this time, and type in:
news:alt.save.the.earth.
43. Repeat for the next one, using news:alt.org.sierra-club.
44. Highlight these two links, and click on Increase Indent.
45. Add a Heading 3 to My Other Pages.
46. Make hyperlinks of the next two items, by using Insert>Hyperlink and selecting the page from the list above the
URL box: biodiversity.htm for Biodiversity and wetlands.htm for Wetlands.
47. Use a Shift-Enter between them, and highlight these two links, and click on Increase Indent.
48. Click beside Wetlands, and Insert>Horizontal Line.
49. Highlight the next three sections (down to the dotted line), and CUT.
50. Single-click on Comment... to highlight it, and PASTE. Delete any extra space within the box at the bottom.
51. Select Natalie Environ, and replace it with your name.
FrontPage Introduction
8
52. Highlight your name, and select Insert>Hyperlink.
o
Click on the Envelope Address icon in the left frame.
o
In the Insert Hyperlink dialog box, type your e-mail in the E-mail address text box.
53. Delete the extra e-mail address, and put today’s date.
54. Highlight the last sentence, and make it italic with I.
55. Highlight all inside the box, and change to Verdana, Size 2.
56. Save your page.
57. Highlight all (will highlight between the dotted lines) and change to Verdana.
58. If you wish, you can change the size of the rest of the text to 2 as well, highlighting paragraphs and tables at a
time. Take care not to highlight your headings at the same time!
59. Now, for the TOC. We will be creating Bookmarks and linking to them.
60. Click beside The Earth first heading (not in the TOC).
o
Insert>Bookmark
o
Type earth, and click OK.
61. Click beside The Problem, etc., down to Other Sites and News Groups and do the same, typing in a keyword each time.
62. Save your file! The bookmarks will not register with FrontPage until you save the file.
63. Go to the TOC and highlight the first line: The Earth.
o
Click Insert Hyperlink, and click on the Existing File or Web page icon.
o
Instead of typing in a URL, click on index.htm in the list above the URL box. (That’s the page you’re on
and also linking to.)
o
Beside the file list is the Bookmark button. Click it, and select your keyword for this title from the
alphabetical list in the drop-down menu, and click OK. Click OK again.
64. Repeat for every item in the TOC. They are in alphabetical/numerical order, so take care that you select
the right bookmark for the right link. Don’t forget to select index.html EACH TIME.
biodiversity.htm
1.
First, look to see that your banner, buttons, and the bottom are already fixed.
2.
Still, you need to fix the banner’s text.
o
CUT Biodiversity...Can’t Live Without It.
o
Right-click the banner to get Page Banner Properties.
o
PASTE the clipboard contents into the text box, and click OK.
3.
Delete any extra space.
4.
Highlight the page (Ctrl-A), and change to Verdana. You’ll change the sizes as you go.
5.
Select the first 3 items. Increase Indent 5 times.
6.
Click in front of That 10-letter..., Backspace, then Shift-Enter.
7.
Bold On this page using B.
8.
Make the TOC Size 2.
9.
Add a Heading 2 to Nature.
10. Change the next paragraph to Size 2.
FrontPage Introduction
9
11. Bold It is Man...and power using STRONG.
12. Add a Heading 2 to That 10-letter...
13. Change the next 2 paragraphs to Size 2.
14. Import tigeran.gif from A: drive.
o
File>Import
o
Add File
o
Select file, Open, and OK.
o
Move to Image folder.
15. Delete TIGERAN PIC text and, at cursor, Insert>Picture>From File.
16. Press Enter.
17. Create a 3-column table using Table>Draw Table. Change the border to 0 with Table Properties.
18. Click on the Pencil icon to get your cursor back, and click the Table toolbar closed.
19. Highlight from Hawaii--222 species through New Mexico--36 species. (Don’t remove the space, if there.)
20. Drag-and-Drop them into the first column of the table.
21. Highlight everything in the column (nothing outside).
o
Change the font size to 2.
o
Click the Bullets icon.
22. Resize the first column until there are no double lines.
23. Resize the second column a little to put more space between the list and the picture.
24. Do not resize the last column.
25. Drag the tigeran.gif into the last, unaltered column. Notice that it ends up in the center. You want it at the bottom
this time.
o
Right-click that column, and select Cell Properties.
o
From the Vertical alignment drop-down menu, select Bottom. Click OK.
o
Save, and go to Preview to check out the animated GIF.
26. Back in Normal mode, delete any extra space under the table.
27. Highlight the next paragraph down to My Other Pages, and change to Size 2.
28. Now, to create a numbered list. (Take care not to click on any red-underlined words when you want List
Properties.)
o
Highlight Birds through Concho water snake, and click Numbering.
o
Highlight Large through Attwater’s..., and click Increase Indent twice.
o
Repeat for all items under Land Animals.
o
Select Bald eagle and Whooping crane, and click Increase Indent twice.
o
Repeat for Golden... through Attwater’s..., Louisiana... and Jaguaundi, and Ocelot and Concho...
o
Right-click Large, and select List Properties. Click on small alpha (a, b, c…).
o
Repeat for other Large. The Smalls are taken care of automatically because they are at the same level.
o
Right-click on the first 3rd level, and select List Properties. Click on the small Roman (i, ii, iii…).
o
Repeat for each 3rd level. The ii and iii Roman numbers are taken care of automatically at the same level.
FrontPage Introduction
10
29. Go back to the top of the list, and select Insert>Picture>New Drawing. You will get a drawing canvas. Click
inside of it, and from the Drawing toolbar at the bottom, select AutoShapes>Basic Shapes>smiley face. Drag
from the top-left down to the bottom-right of the canvas.
o
Grab the little yellow diamond, and pull down to create a sad face.
o
Push the sad face up into the top-left corner, then click on the bottom-right corner (the black corner
piece), and drag up toward the top left. Center the face, if necessary. Once you have this positioned
properly, click Scale Drawing on the toolbar, and resize both the canvas and the face to about the size
of a nickel.
FrontPage will convert this picture to a Web-based image.
30. Add a Heading 3 to My Other Pages.
31. Create links to the other pages with the next two lines (index.htm for Home and wetlands.htm for Wetlands).
32. Highlight both links, change to Size 2, and Increase Indent once. Put only a Shift-Return between them. Click
after Wetlands, and Insert>Horizontal Line.
33. Create your bookmarks for your TOC, and create your links, using biodiversity.htm in the URL box each time.
34. Save your page.
wetlands.htm
1.
First, look to see that your banner, buttons, and the bottom are already fixed as before.
2.
Still, we need to fix the banner’s text again.
o
CUT The Wetlands...Life Not as Abundant.
o
Right-click the banner to get Page Banner Properties.
o
PASTE the clipboard contents into the text box, and click OK.
3.
Delete any extra space.
4.
Highlight the rest of the page (Ctrl-A), and change to Verdana. We’ll change the sizes as we go.
5.
Select the first 5 items. Increase Indent 5 times.
6.
Click in front of South America, Backspace, then Shift-Enter. Repeat for the other 2 items.
7.
Bold On this page using B.
8.
Make the TOC, Size 2.
9.
Add a Heading 2 to The World.
10. Change the next 3 paragraphs to Size 2.
11. Click in the Dolphins... paragraph and Increase Indent. This creates a blockquote.
12. Click in front of Dolphins, and select Insert>Picture>Clip Art.
o
The Insert Clip Art Task Pane will show.
o
If this is the first time the Clip Art has been used, go to Page 7 of the 2002 addendum.
o
Type dolphin into the Search text box. (To go back, click Modify at the bottom of the pane.)
o
Select one of the pictures by clicking on it, and it will appear at the beginning of the paragraph.
o
Close the Task Pane.
13. Add a Heading 2 to South America.
14. Highlight the next 2 paragraphs and make them Size 2.
15. Highlight the 2nd paragraph, and Increase Indent for a blockquote.
FrontPage Introduction
11
16. In the same paragraph, highlight first 10 days, and make it bold with STRONG.
17. Highlight 10 million sea cucumbers, and make it bold with STRONG.
Also, raise the Size to 3 and make it blue.
18. Add a Heading 2 to North America.
19. For The Everglades heading, you’ll use some WordArt, now available in FrontPage.
o
Select Insert>Picture>WordArt.
o
Click on the 2nd picture on the last row. Type in The Everglades, and click OK.
20. Import florida.gif from the A: drive, and move it to the Images folder.
21. Delete the FLORIDA PIC text, and Insert>Picture>From File.
22. Highlight from the next paragraph down to My Other Pages and make it Size 2.
23. With your cursor beside the Florida graphic, press Enter.
24. Create a table in one of the three ways already discussed. Make it 2 columns and 1 row. Leave it with no border.
25. Drag the graphic into the 1st column, and resize the cell.
26. Highlight the next paragraph, and Drag-and-Drop it into the 2nd cell.
27. Delete any extra space under the table.
28. Highlight Bird populations... and Only 30..., and click the Numbering button.
29. Add a Heading 3 to My Other Pages.
30. Create links to the other pages with the next two lines (index.htm for Home and biodiversity.htm for
Biodiversity).
31. Highlight both links, change to Size 2, and Increase Indent once. Put only a Shift-Return between them.
32. Click after Wetlands and Insert>Horizontal Line.
33. Create your bookmarks for your TOC, and create your links, using wetlands.htm in the URL box each time.
34. Save your page. When you do this time, you will see a dialog asking if you want to embed the dolphin GIF. Click
OK. Move it to the Images folder. FrontPage will take care of the change in the HTML for you.
Reveal Tags
You can work in Normal View and view your HTML tags by selecting View>Reveal Tags. Hover over a tag (hover over
the table in index.htm), and it will display any attributes used. To turn this off, select View>Reveal Tags again.
Not in the Lecture: A DHTML Effect
A few Dynamic HTML effects are available to you in FrontPage. They run off a JavaScript. Here’s a simple one that runs
after the page is loaded called Page Load.
1.
Highlight the desired text.
2.
Select Format>Dynamic HTML Effects.
3.
In the DHTML Effects box, select Page load from the On drop-down menu.
4.
Select an effect type from the Apply drop-down menu (e.g., Fly in).
5.
Select a setting from the last drop-down menu (e.g., From bottom-right).
6.
Click the box closed.
7.
In the colored box that is created, type in the desired word or phrase.
8.
Check Preview mode to see the effect.
FrontPage Introduction
12
You can change the effect by highlighting the text again and selecting Format>Dynamic HTML Effects again.
You can delete the effect by backspacing through the word or phrase until the colored box disappears. Or, you can place
your cursor inside the box, select Format>Dynamic HTML Effects, and click the Remove Effect icon.
Finishing Your Pages
Spell Checking
You certainly do not want to open your page to the public until you have reread it carefully, checked your links, and done a
spell check.
Start in Page View; then select Tools>Spelling (or F7).
The Spelling dialog box will open. It works basically the same as most word processing and desktop publishing application
spell checkers.
You can also leave spell check on while you work (a FrontPage default). Remember to check all your pages, not just the
home page.
Publishing a Web
After a Web site is complete, it must be published on the Web. This means copying your files onto a Web server. For
example, here at Tech, you can obtain an eRaider account with a Web add-on service.
To publish your web:
1.
First, save your page(s)!
2.
Select File>Publish Web.
or
Click on the Publish Web button in the Standard toolbar (fourth icon from left).
or
Press Alt-P.
3.
Specify the URL of the location for your web on the server. For example:
http://webpages.acs.ttu.edu/jdoe or a:\class2002.
4.
Click Publish and then Done.
Important: After publishing your web, be sure to check it on more than one browser. It is a good idea to check it on both
the Netscape and Internet Explorer browsers. Also, while Netscape 6.x is the newest, many of the older browsers are still
around and 6 is not at all like the older ones. It has a whole new base. If you still have 4.6 or 4.7, keep it around for a while
for checking pages.
Don’t Publish Option in 2002
FrontPage 2002 has added a Don’t Publish feature that allows you to select certain pages in your web for later publishing or
to prevent overwrites of items like guest books and counters from being overwritten in a normal publish. (In prior versions,
when you published, you overwrote the entire web.)
In Folder View, right-click the file you do not want to publish. Select Don’t Publish from the drop-down list. A red circle
with a white x will appear beside the page icon.
To remove this and publish the page, right-click the file name in Folder View, and click Don’t Publish to remove the icon.
Note about FrontPage Extensions
If the server you are publishing to does not have FrontPage Extensions, many of the styles and items such as counters will
not work. For the styles to work, add this to the very top of the page in HTML mode:
<!doctype html public "-// w3c//dtd HTML 4.0 Transitional//en">
FrontPage Introduction
13
Updating Your Published Web
Working Live, On-line
1.
Select File>Open Web.
2.
Always save your changes and Refresh/Reload the browser page to check the changes.
Working Off-line
1.
Select File>Import, and use the Import Web Wizard to put your web on your hard drive.
2.
Save all changes.
3.
Re-publish the web to the server.
Saving to Disk
If you are publishing to a disk, it will take several minutes. It is suggested you don’t publish to disk with themes unless you
are using a Zip drive. This can take 15 minutes or more to save, and you will probably run out of room on a floppy.
To get it on your PC, use File>Import and use the Import Web Wizard to get the files from the floppy/Zip to your hard
drive. Using File>Open Web will only open the web, not put it on your hard drive.
Backing Up Your Web
If you want a back-up of your web, before or after publishing on the Internet, publish your files on a floppy or a Zip. Since
the files FrontPage creates for a web can get quite large, a Zip or other type of external drive is recommended. Transfer
may take several minutes. Instead of giving the Publish dialog a server address, you list the drive and folder for the destination
of the web.
Note: It is always a good idea to have a folder created for the web. There are many, many files included in a Publish.
Just using a copy will only place the files onto the external source. Your web structure will not be saved. You must Publish to
the external disk or hard drive to have a correct backup.
Deleting a FrontPage Web
Open the desired web, go to Folders View, click in the middle Folders List frame, and select Edit>Delete from the main
menu bar. Or, from Folders View, right-click the top folder and choose Delete. In either case, you will receive a Confirm
Delete box with two options. Choose one, and click OK.
To delete a web, you must have at least one HTML file in it. In other words, you cannot delete a web you created with the
Empty Web option until you save at least one HTML file inside that directory.
Note: Once deleted, a web is gone. There is no trash can or recycle bin to recover the files. Always keep a local backup,
especially of your published webs.
Quitting FrontPage
You can quit FrontPage at any time with File>Exit or Alt-F4. If you have not saved all your files, FrontPage will prompt
you. If you have added images, it will ask you about embedding those images in your web.
You can drag your image files into the Images folder in Folders view, and FrontPage will update your links to the images on
the individual pages.
FrontPage Introduction
14
Web Standards
If you have an eRaider Account or a Departmental/Organizational Web Account, you are expected to follow certain
guidelines. At a minimum, you are required to include:

the name of person(s) responsible for maintaining the page

an e-mail link to the person(s) designated as responsible for feedback

date of the last update of information
There are guidelines for unofficial pages, as well as official pages for Texas Tech. There is a Tech Operating Procedure (OP)
(http://www.itts.ttu.edu/laws/lpc1.html#106) that is currently under review. Please read it under the
University section.
Also remember that page content of either official pages or unofficial pages on state servers must not conflict with the
Mission or Vision of TTU or TTUHSC.
The state has set up its own standards for official Web pages. Some of those standards are far more rigid than what Tech
currently requires. The site:
http://www.state.tx.us/Standards/S201-12.htm
The site for the disability-access checker, Bobby, for use on official TTU pages can be found at:
http://bobby.watchfire.com/bobby/html/en/index.jsp
Laws and Policies
Pages must also follow TTU policies and any federal and state laws. Many of these are included in Technology Supports’
Laws and TTU Policies Web site at:
http://www.itts.ttu.edu/laws
Be watchful of copyright, and there is a Texas obscenity law that you must abide by on the Web.
It is always good to design Web pages with a large dose of common sense.
Computer-based Training (CBT)
There are SmartForce interactive training modules on the Web for various Microsoft applications. This interactive training
is free and requires no plug-ins, just an eRaider account (also free from the ATLC Account Desk).
http://cbt.ttu.edu
Get your floppy disk.
Updated March 7, 2003