 |
FRONTPAGE 2003Definitions
Screen
Layout
The FrontPage
toolbar is very similar to the Microsoft
Word toolbar.
|
|
|
|
Hyperlinks
Creating Links
Hyperlinks are text or graphics that can
take a user to another web page or another
file such as an Excel, Word, or Adobe PDF
document.
-
Highlight the text or graphic to hyperlink and select Insert>>Hyperlink or click the hyperlink icon
on the toolbar.
-
If the hyperlink is outside of your web site but not a URL, click the down arrow next to the Look in: text box and browse your computer for the file.
-
If the hyperlink is inside of your web site, select the page and click OK.
-
If the hyperlink is an external URL such as www.northern.edu, then enter the ENTIRE URL in the Address: textbox. You must include http://, ex. http://www.northern.edu.
E-mail Links
-
If the text is not written as an e-mail address on your page, follow the steps above to insert a hyperlink.
-
In the Address: text box, enter mailto:your_e-mail@isp.com and click OK.
-
If the text is written as an e-mail address on your page, FrontPage will enter it as an e-mail address once you press the Enter key.
Hotspots
Hotspots are places on an image that contain
a hyperlink. A designer can essentially cut
an image into several hotspots and hyperlink
each hotspot to a different URL or page.
-
Insert an image into your web page.
-
Click on the image and locate the Pictures toolbar on your screen.
-
If your Pictures toolbar does not appear when you click on the image, select View>>Toolbars>>Pictures.
-
Select one of the hotspot shapes on the Pictures toolbar and draw over your image.
-
Once you release your mouse, the hyperlink dialog box will appear.
-
Follow the steps above to insert your hyperlink. Repeat the process for all areas of your image.
Anchors/Targets
Anchors (Bookmarks) and Targets are used to
hyperlink one spot on a web page to another
spot. For instance, if you would like
someone to click at the top of a page to
take them to the bottom of the page, you
would need an anchor and a target.
-
Place your cursor where you would like to place your anchor.
-
The anchor is the end place for a hyperlink.
-
Select Insert>>Bookmark and then give your bookmark a name.
-
Click OK and see that a tag was placed where your cursor was.
-
Go to the bottom of the page, where you wish to insert the hyperlink.
-
Highlight text and click the hyperlink icon on the standard toolbar.
-
Instead of entering a URL, click the bookmark button and select the appropriate bookmark. Click OK twice.
Tables
Table Uses
When designing web pages, tables can be used
for page layout, information display in
tabular format, or adding color or borders
to blocks of text.
Creating tables
A quick and easy way to create a table is to use the Table button on the standard toolbar. Click the table icon and highlight the correct amount of columns and rows. Click again to enter your selection. You can easily add more columns or rows later.
To change properties of the table, click inside the table and select Table>>Table Properties>>Table or right-click over the table and select Table Properties.
- Size allows you to change the pre-selected number of rows and columns of the table.
- Alignment refers to the table's position on the page, not the alignment of the text within the table.
- Cell padding is the number of pixels between the text and the cell walls.
- Cell spacing is the number of pixels between the table cells.
- Specify width sets the width of the table by a distinct number of pixels or by a percentage of the screen width.
- Specify height is usually not necessary to set since the height depends on the number of rows in the table.
- Border size dictates the size of the cell borders. “0” is an invisible border.
- Border color allows you to change the color of the border.
- Light and Dark border gives the table cells a three dimensional look.
- Background allows you to select either a color or an image to use as the table background.
NOTE: There are significant differences between the way Internet Explorer (IE) and older versions of Netscape (4.79) display table borders and/or background images. Be sure to preview in both Netscape and IE before publishing your pages.
Cell Properties
To change properties of only a single cell, click inside the cell and select Tables>>Table Properties>>Cell or right-click over the cell and select Cell Properties.
Many of the options are similar to table properties. When specifying width, you are specifying what percent of the table the cell will be.
Inserting rows and columns
-
To add additional columns or rows, place the cursor in the cell that the new row or column will be adjacent to.
-
Right-click and select Insert row to place a new row above the selected cell.
-
Right-click and select Insert column to place a new column to the left of the selected cell.
Graphics and Pictures
Image types
There are two primary image types that are used with web pages.
- GIF - (Graphics Interchange Format) - These are usually not photographs but graphics such as clipart. They contain 256 colors or less.
-
JPEG -
(Joint Photographic Experts Group) –
Most photos are in the JPEG format. This
type consists of 16 million colors.
-
To add an image to a web page, place your cursor on the page and select Insert>>Picture>>From File.
-
Browse your computer for the image file and double-click the image to insert it into your web page.
 |
You can change the properties of the picture by selecting the image and then selecting Format>>Properties or right-clicking on the image and selecting Picture Properties.
|
Animations
Interactive buttons
Interactive buttons act as hyperlinks and allow the designer to create a rollover effect to the button.
-
To insert an interactive button, select Insert>>Interactive Button.
-
The following dialog box provides options to specify button style, text, hyperlink, font, color, size and dynamic effect. Make the changes and select OK.
FrontPage allows the designer to easily add text animations as a page is loaded.
-
Highlight or select the object you wish to animate.
-
From the main toolbar, select View>>Toolbars>>DHTML Effects.
-
A floating toolbar will appear. Click the first down arrow to select when the animation should take place.
-
Click the down arrow on the Apply option to select what type of animation to apply. If needed, the third textbox will highlight for more options.
Movies
File Types
As with image files, video files have
specific formats that work well on web
pages. It must be noted that file size
should be kept small for viewers who have
slower modem connections AND also because
not all browsers support video.
Inserting a video
-
Real Media File
or Windows Media File
- First, you must import the video into your web site.
- Select File>>Import and click the Add File button to browse your computer for the .rm or .wmv file.
- Select the file and click OK to import.
- Open your web page up and create a hyperlink to your real media or windows media file.
Forms
Creating a
form
-
Select Insert>>Form>>Form from the main menu.
-
A dotted box with two buttons, Submit and Reset, will be inserted onto your page.
-
Press the Enter key on your keyboard 1-2 times to add top space to the form.
Entering form fields
In order to retrieve information from your users, you will need to provide form fields
for them to complete. To insert a form field, select Insert>>Form and then select
one of the field types.-
Textbox - allows user to type any information required but input should be short
-
Text Area - allows user to type longer input and box size can be determined by designer
-
File Upload - allows user to upload file to your e-mail
Currently this is not enabled at NSU. -
Checkbox - allows user to select multiple items
-
Option Button (radio button) - allows user to select only one item
-
Group Box - subgroup organization of related form fields
-
Drop Down Box - allows user to select one or more items from a pre-defined list
1. Double-click the drop down field.
2. Rename the field and then click the Add button.
3. Type in your first list entry and click OK.
4. Repeat this for each list item. -
Push Button - set the properties of buttons
-
Advanced Button - button that can be customized with script
-
Picture and Label - allows designer to add an image or label inside the form
Each form field can be formatted by clicking on the form field and right-clicking or
double-clicking the form field.
The name given the form field will be what is sent to you via e-mail. Make sure you use
one word descriptions that are easily read by you. -
-
Right-click anywhere inside the form and select Form Properties.
-
E-mail Submission: In the space provided, enter your e-mail address so that any forms submitted will be delivered not only to a text file inside your web site but also to your personal e-mail.
-
Click the OK button. You will be prompted that e-mail will not work until published. Click Yes.
-
Database Submission: If you wish your results go to a database, check the option button next to Send to database.
-
Click OK.
|
|
|
Publishing and Editing
Publishing
In order to
get your web site out on the Internet, you
must have an established account with an
ISP. NSU furnishes personal web space for
faculty/staff/students. You will only need
to publish your web site one time.
-
Go through your entire web site, double-checking hyperlinks and layout by previewing the site in both Internet Explorer and Netscape.
-
Select File>>Preview in Browser and select one of the browsers listed.
-
Once you have finalized your web site and saved any new changes, you are ready to publish.
Please refer to the the tutorial titled Web Publishing on the NSU Student Server (Student guide) or Web Publishing on the Northern Server (Faculty guide) for instructions on how to publish web pages.