Web Publishing with Front Page
You may print this page if you feel the need. But we will be updating it as
needed; so the online copy will always be most up-to-date.
Hint: When designing web pages, keep Front Page open as well as a web
browser (so you can see the pages you're saving on the server, to be sure that
everything looks/works as you want it).
- First, open a new page:
- Use the new page icon
toolbar, type [Ctrl + n], or the pull-down menu: File > New... > and
select "Blank Page" from the right-hand-toolbar that appears.
- Use the save icon on the toolbar or the pull-down menu: File > Save
- Name your files something descriptive but short (names affect URL
lengths and users' typing time); never use spaces or non-alphanumeric
characters in file names.
- syll.html, syllabus.html, syllabusfall00.html, syllabus_fall00.html,
- htm vs. html suffix
- The "index.html" file is your first or "top" page in the hierarchic
structure of your web site.
- File name vs. Page Title vs. Title within the page
- Special characters: alpha-numeric characters are always fine; other
than that, only dash and underscore are recommended.
- Use the "Change title..." button to give your pages informative titles
that are used by search engines and browser history lists.
- Be sure you know where you saved your page (and, using your web browser,
double check that everything looks/work right). Be aware of the default
"Save in:" location and remember where you left your file(s).
Note: There is a "Save All" option (in he File menu) that will save
all your open, modified files at one time.
Exercise: Save an index and two additional pages on the web server.
Troubleshooting: What if you save a change to your page and it
doesn't appear when you look using your web browser?
- Select the object (image or text) that you want to become the hyperlink
and then use the toolbar shortcut
to open the "Insert Hyperlink" popup window to select the file you want to
link to (remember you can link to an external web page, an image, a sound, a
movie, or even a document from Word, Power Point, Excel, etc.).
- "Look in:" Current Folder vs. Browsed Pages vs. Recent Files
- Be sure you note the default "Look in:" location and remember
where you left your file(s).
- Or you could type in a full URL in the "Address:" box or use the
"Browsed Pages" button to see a list of recently browsed pages (to link
- Click "OK"
Note: Your file/folder structure can be different from the logical
structure you give to your pages. [draw example on board]
Exercise: Create a link to
the campus home page. On your index page, create links to each of the other
pages you created. Create a links from your other pages, back to your index
There are two kinds of links that don't link to a whole new page:
Bookmarks and Email links.
A bookmark link (also called target links) is a link to a specific place
in a page (often the same page that the link is on), like the links at the top
of this page that jump users down to a specific topic lower on this page.
Creating bookmark links:
- Create the bookmark.
- Select the text (or insert your cursor) where you want the link to
- Insert > Bookmark... (ctrl+g)
- Make sure the "Bookmark name" is as you want it and click "OK"
Note: If you selected text to be the bookmark, it has broken
- Create the link to the bookmark.
- Select the text that will be the link (to the bookmark you just
- Insert > Hyperlink... (ctrl+k)
- Single click to select the page where the bookmark is (or type the
full URL in the Address: field), and click the "Bookmark..." button (on
the right side of the Insert Hyperlink pop-up window).
Note: If the bookmark is on the same page as your link, you can
just click the "Bookmark..." button.
- Select the bookmark from the list on the "Select Place in Document"
- Click OK; click OK again.
Note: The decision to make one long page with a table of contents and
bookmarks or many smaller pages that are linked from a table of contents page
depends on your intentions for the site and the needs of your users.
"Email Address" links, not to a page or file, but open an email window (using
the end-user's default mail application) to the email address you specify.
Creating email links:
- Select the text that will be the link.
- Insert > Hyperlink... (ctrl+k)
- Under the "Link to:" section in the Insert Hyperlink pop-up window,
select E-mail Address.
- Type the address you want to be emailed if this link is used in the
"E-mail address:" field.
Note: You can also type a default subject for the email in the
Exercise: Open a new page and make a table of contents and bookmarks
and add an email link (and set a default subject) at the bottom for contact
Note: There are reasons to type the full email address on the page,
Where do images come from? You can either create images using an image
editing application or you might get completed files from a graphic designer (or
To capture images from existing web pages:
- Open a web browser and find the image you want
- Right click the image and select "Save Picture As..." (if you're using
Internet Explorer) or "Save Image As..." (if you're using Netscape/Firefox,
- Save the image to your local disk (I like to save to the desktop) using
the popup window that opens.
Exercise: Save an image from the web to your desktop.
To import saved images from a local disk to your Front Page web:
- Open your Front Page web (or make it the active window on your screen).
- Hold down the "Windows" key (between the Ctrl and Alt keys) and type an
"e" to launch Windows Explorer. Use this popup window to find the image you
have on your local disk (on your desktop).
- Click-hold and drag the image icon to your front page web/folder (that
is still visible behind the windows explorer window); unclick when your
cursor shows a "+" in the web location you want this image to be imported
Optionally you can use the menu: File > Import... and "Add File..." and/or
"Add Folder..." till you have selected all the images/folders you want to import
into your web, then click the OK button.
Exercise: Drag and Drop or Import the image (you just saved to your
desktop) into your web.
Note: This process of importing images (either using the File menu or
by Dragging and Dropping) can be used to import any file (.pdf, .rtf, .xls,
.doc, .mov, anything you want to link to (even if it is not able to be
displayed by a web browser)).
Inserting images into your web pages:
- Place your cursor in your HTML page where you want the image and use the
tool bar shortcut
then use the "Picture" popup window to select the image you want
- Click "Insert"
- Note the default "Look in:" location and remember where you left
- Also note that
requires we add ALT (alternative) text descriptors to "show" images to
web users employing screen readers because they have trouble seeing the
Thumbnailing Images (linking smaller, faster loading images, to larger
versions of themselves):
- Once you have inserted an image into your HTML page, right click it.
- Choose "Auto Thumbnail;" Your image will automatically be sized and
linked to the larger version of itself.
Note: When saving your page, you will be prompted to
Save Embedded Files;
this is the thumbnail Front Page just made for you. Note the name of the
thumbnail (will be something like: OriginalFileName_small), the folder it
will be saved in and the action Front Page will take.
- Click OK when you are ready.
To add alternative (ALT) textual information:
- Right click the image you just inserted into your web page and select
"Picture Properties..." from the pop-up menu.
- Click the "General" tab at the top of the pop-up window.
- In the box labeled "Text:" type a short, description of the image (this
is what users employing screen readers will hear instead of seeing the
image). Be sure the check-box next to the word "Text" is checked.
Note: How download time is affected by the addition of images. Front
Page tells you, in the bottom right corner of the window, how long the page you
are editing will take to download. You can click the time to change the network
Exercise: Insert an image (that you just imported into your web) into
one of your web pages. Be sure to add ALT text.
- Page Text & Background:
- To modify the default and/or colors of your web page: go to the
menu: File > "Properties..."
or right click anywhere in your page and select "Page Properties..."
- Click the "Formatting" tab, at the top of the "Page Properties"
popup window that appears, to set a background image and/or customize
your page colors.
- Hyperlink colors:
- Link color, like text color, should strongly contrast with the
background, and be easily differentiated from the normal text color, for
- Link color may be changed from the same "Formatting" tab at the top
of the "Page Properties" popup window, as above.
- Specific text may be assigned a color too.
- Just like in Microsoft Word, you may select the text you'd like to
color and use the font-color shortcut
on your toolbar to select the color
- Click on the "More Colors..." option:
- We will discuss both Select and Custom buttons in-class
- We will talk about Hexadecimal and RGB values in-class
- Or you may use the "Format", "Font" pull-down menu... notice the
other cool styles available with this option.
Exercise: Change the background and text color of one of your pages
and then select some text and change its color. Change the background of a
different page to be an image.
Exercise: Follow along and experiment as I highlight the steps below.
- Create your table
- Insert the cursor where you want the table.
- Use the "Insert table" icon
from the toolbar to select the number of columns and rows you want for
- Merging and Splitting Cells: sometimes you want a cell to span a portion
of your table.
- Click-hold and drag to select the cell(s) you would like to
manipulate (only one cell if you are splitting, multiple cells if you
- Right click on the selected area and, using the "Table" pull-down
menu, select either "Merge Cells" or "Split Cells..." as you desire.
- Selecting, adding, and removing columns and/or rows
- Rows and/or columns are inserted where your cursor is currently
blinking in the table.
- You may right click where you'd like to insert rows/columns (that
have the same characteristics as the "parent" row/column) and use the
- Or, to add a new row, when you are in the last cell of the last row
of your table, simply strike the "Tab" key and Front Page will insert a
row (below) just like the row your cursor is in.
- To remove only the contents of selected rows/columns: use the Delete
- To remove the selected rows/columns as well as their contents: use
the Backspace key.
- Inserting tables within tables
- Tables may be inserted in the cell where your cursor is currently
blinking (just like inserting any other table).
- This allows you even more possibilities for formatting your content;
experiment with this.
- Table Properties
- I'll go over the popup window, but experiment on your own.
- Note: Many of the same attributes may be assigned to specific
cells, in addition to the whole table.
- Cell Properties
- I'll go over the popup window, but experiment on your own.
Design Note: Consider the difference between a table used for layout
purposes and one used to triangulate data (like a phone book, or multiplication
table); look at the benefits of defining "Header cells" for screen readers.
So far you have learned to place information on the web so people can browse
Web forms allow us to take information from browsers and "do things" with it
via a script. This allows an additional level of dynamism in our web sites and
the browsers' experiences.
Before you begin, consider the data you want the browser to submit. Web
forms have several possible form fields: Text box, Text Area (scrolling text
box), Option Button (once called: radio button), Check box, Drop-Down Box (also
called menu)... and a few more we won't cover today.
To insert a form within a web page:
- Open a web page.
- Place your cursor where you want the form.
- Use the menu Insert > Form > Text Box
to insert a text box within a web form.
dotted line delimits the form boundary. Your cursor *must* be within this
limen when inserting additional form fields.
Note: I almost
always remove the "Reset" button
Note: Use your
keyboard arrow keys to get your cursor into those hard-to-reach areas.
- Add text and space to format and explain your form as you insert new
- Double click each form field to name it something meaningful to you (and
to set any special attributes of this particular field such as validation
and initial value).
will be stored in named pairs: that is, each form field has a "name" that is
paired with any submitted data and passed to the file/email recipient.
spaces or special characters in field names.
- When you have your form completed, right click anywhere inside the
dotted line that delimits the form and select "Form Properties..." to tell
Front Page what to "do" with information that browsers submit
- Consider the Form Properties popup window:
- You may send input to a file, an email address (or both).
- Clicking the Options button at the bottom of this popup window
allows you additional possibilities like:
- How to format the information going to the email and/or data
- Saving to an optional, second data file.
- Subject and Reply-to lines for email output (under the E-mail
- Send browsers to a "confirmation" page that allows you to give
specific, post-form information to browsers.
- Saved fields (you may not want to save the "B1" field since this
is the default name of the Submit button).
you may gather additional information here (like date/time, remote
computer address, browser type, etc.).
Exercise: Add a simple form to one of your pages; gather a browser's:
Name, if they want bread-sticks (yes or no), let them tell us their preferred
pizza toppings (they may choose more than one from the list), allow them to
choose whether they are Faculty/Staff/Student from a drop-down menu, and let
them make general comments.
Please fill out the evaluation for this