Return to:.......
| Web Design Guidelines |
HTML Codes |
What is FrontPage |
What is HTML |
Business Web Page |
TO
CREATE A HOME PAGE back to top
The home page is the front door to your Web site. Greeting your visitors as
you might do in person and providing some information about the content or
subject matter of your site will spark interest in the people looking at your
site. The home page also contains links to the other pages in a web.
1.
On the blank page in Page view, type the title of your site and
then press ENTER.
Just like in a word processor, pressing ENTER puts the cursor on a new line.
2. Next, type a sentence about the purpose of your site
3. Press ENTER.
Next, you will add a picture to the bottom of the current page. Pictures can be scanned photographs, drawings, or computer graphics created in a drawing or image-editing program.
Create a new page back
to top
Create a new page in a web, or create a stand-alone HTML page. Microsoft
FrontPage includes a variety of templates to help you create different kinds of
pages:
1. On the File menu, point to New, and then click Page.
2. Click the tab for the template you want to use, and then click the template. A thumbnail sketch of that template, or output from that wizard, is displayed in the Preview area.
Tip:
To create a new blank page using the Normal Page template, click New
Page
icon (upper left of
screen).
Create a folder back
to top
Create a folder in your web to organize your pages and files. For example,
you might create a folder named Multimedia to store sound effects, videos, and
so on. If you want to create a folder within an existing folder, select the
existing folder before using this procedure.
Ø In Page view, create a page that includes the page settings and elements that you want in the template. For example, create a page that includes generic text, comments, and so on.
Ø Click Save As on the File menu.
Ø In the Save as type box, click FrontPage Template (*.tem).
Ø Click Save.
Ø In the Title box, type a title for the template, which will appear with the standard templates on the General tab in the New dialog box.
Ø
In the Name box, type the file name of the
template. FrontPage will automatically use the correct extension.
Ø
In the Description box, type a description of the
template, for example, describe the type of page that is created with the
template. When you create a new page, this description will appear in the New
dialog box when you select the template.
TEXT
Formatting text:
back to top
You can format text in Microsoft FrontPage as you would using a word
processor, to add visual organization, emphasis, and structure. You can change
the font face, size, style, color, spacing, and vertical position of text, and
add effects such as underlining. You can also control spacing and indentation,
add bullets and numbers, and set alignment. For example, format normal body text
to use Times New Roman 10-point font, and format page headings to use Arial
16-point boldface font, centered on the page.
Add borders
around text: back to top
You can add borders around text, and then set properties, such as the
style, color, padding, and width of the border.
When you add a border, it is applied to an entire paragraph. For example, if you apply a border to a selected word, the border is applied to the whole paragraph. Or, if you select two paragraphs and then apply a border, each paragraph will have a border around it. If text is separated by line breaks rather than paragraph marks, the text is considered to be one paragraph and will have one border.
1. In Page view, select the paragraphs around which you want to add a border.
2. On the Format menu, click Borders and Shading.
3. Do one of the following:
4. To specify the padding (the distance between the text and its border), under Padding, enter a value in the Top, Bottom, Left, and Right boxes in points.
5. Border Size: Zero border indicates no border. The highest the number, the thicker the border.
Links: back to top
A hyperlink is a connection from one page to another destination such as another
page or a different location on the same page. The destination is frequently
another Web page, but it can also be a picture, an e-mail address, a file (such
as a multimedia file or Microsoft Office document), or a program. A hyperlink
can be text or a picture.
Create
A Hyperlink To A Page Or File On The World Wide Web: back
to top
You can create a hyperlink to a page or file on the World Wide Web.
When a site visitor clicks the hyperlink, the destination page or file is
displayed. For example, you can create a hyperlink to a page or picture on
another Web site.
Or, if you want to use the title of the destination page (such as "Welcome to Microsoft's Homepage") or the location of the file (such as http://www.microsoft.com/filename) as the hyperlink text, position the insertion point where you want to insert the hyperlink.
Create
A Hyperlink To A Page Or File In A Web: back
to top
You can create a hyperlink to a destination such as a page or file in
a web. When a site visitor clicks the hyperlink, the destination is displayed in
the Web browser. For example, you can create hyperlinks from your home page to
the other pages in the web. Or, create a hyperlink to a GIF picture.
Or, if you want to use the title of the destination page (for example, Home Page) or location of the file (for example, http://localhost/filename) as the hyperlink text, position the insertion point where you want to insert the hyperlink.
Create
A Hyperlink To Send An E-Mail Message: back
to top
You can create a hyperlink that opens and addresses an e-mail message
to the address you specify. For example, if you want site visitors to send you
feedback, you can create a hyperlink that creates an e-mail message addressed to
your e-mail alias.
Note Not all Web browsers support hyperlinks to e-mail addresses.
Or, if you want to use mailto:address as the hyperlink text, position the insertion point where you want to insert the hyperlink.
Create
a hyperlink to a bookmark: back
to top
A bookmark is a location or selected text on a page that you have
marked. You can create a hyperlink to a bookmark when you want to display a
certain section of a page to the site visitor. When the site visitor clicks the
hyperlink, the relevant part of the page is displayed, rather than the top of
the page.
For example, you can use bookmarks to navigate a long page that contains five headings. Create a bookmark at each heading, and at the top of the page add a table of contents that lists these headings. Each entry in the table of contents is a hyperlink that uses a bookmarked heading as a destination.
A hyperlink to a bookmark, also called an anchor, is indicated by a pound sign (#), which precedes the destination URL.
Or, if you want to use the name of a bookmark as the
hyperlink text, position the insertion point where you want to insert the
hyperlink.
Click Hyperlink
|
|
Hyperlink button |
Set Hyperlink Colors:
back to top
You can choose the colors that a Web browser will use for displaying
hyperlinks. You can select three colors to use for a hyperlink, depending on its
status:
Altavista Image Finder- find pictures of almost anything on the web!
To change the appearance of page links, go to
<Page Properties>
<Margins>
<Click on Enable Hyperlink Rollover Effects>
Pictures:
back to top
To learn more about images available on the Web, www.scsite.com/web/SCWebDes.htm
then click Andy’s Art Attack
Inserting
an Image on a Web page: back to top
The Web supports several different file formats for graphics, but JPEG and
GIF are the two more common file formats for graphic images on the Web.
When images are saved in the GIF format, they are condensed to 256 or
less colors. This is what helps a
GIF image become very small thus loading quickly onto the page.
JPEG images use what is called lousy compression. This means when an image is saved in the JPEG format, image data is deleted. This process makes a once large image very compact in size but it could possibly decrease the quality of the image. Unlike GIF files, JPEG files can contain millions of colors and thus often are used for photographs and more complex images.
To
Insert A Picture On The Home Page (From A File): back
to top
1. On
the Insert menu, point to Picture, and then click From File.
FrontPage displays the Picture dialog box. Because you are editing a page that isn't part of a web yet, FrontPage also opens the Select File dialog box, which lets you choose a picture to insert from your local file system.
2. In the Select File dialog box, navigate to the folder where you saved your picture (hint: you should save all pictures to the same location to make locating them easier).
3. Click the file, and then click OK.
FrontPage inserts the selected picture file on the current page.
Press ENTER to create a new line
To Insert A
Picture On The Home Page (From The Web): back
to top
Open your web browser and locate a picture on the Internet
(hint: A useful tool for locating graphics on the web is Altavista
Photo Finder- http://www.altavista.com/cgi-bin/query?pg=q&stype=simage)
Once you have located a picture you would like to use, place the cursor on the picture and click the right mouse button. Left click on Copy.
Return to Front Page. Place the cursor where you would like to insert
the image, then right mouse click again, then left click on Paste.
To learn more about images that are available on the Web, visit www.scsite.com/web/scwebdes.htm and then click Andy’s Art Attack [page1.49]
Add a
hotspot to a graphic: back to top
You can add hotspots to graphics such as pictures and animated GIFs.
A hotspot is an invisible region on a graphic to which you have assigned a
hyperlink. When a site visitor clicks the region, the destination of the
hyperlink is displayed in the Web browser. In Microsoft FrontPage, hotspots can
be shaped as rectangles, circles, or polygons.
A graphic with one or more hotspots is called an image map. The image map usually gives cues about where it should be clicked. For example, a car manufacturer's Web site could use an image map of its new cars: when a site visitor clicks a car, a page with a detailed description of the car is displayed.
You can use graphics on your Web pages to provide information, artwork, or pictures. In addition to being decorative, graphics can be useful, for example as navigational buttons.

1. In Page view, click the picture.
2.
On the Pictures toolbar (at bottom of page), click the Hotspot
button corresponding to the shape you want:
o
Rectangular Hotspot
![]()
o
Circular Hotspot
![]()
o
Polygon Hotspot
![]()
3. On the graphic, draw a rectangle, circle, or polygon, depending on the shape you chose. To draw a polygon, click where you want the first corner of the polygon to be, click to place each corner of the polygon, and then double-click to finish it.
When you release the mouse button, the Create Hyperlink dialog box opens.
4.
Specify the destination for the hotspot:
o
If the destination is in a web, browse to the web and folder that
contains the page, select it, and then click OK.
o
If the destination is on your local network, click File
, browse to
the page you want from your local network, and then click OK.
o
If the destination is on the World Wide Web, click World
Wide Web
In your Web browser, browse to the page that you want, and then press ALT+TAB to
switch back to Microsoft FrontPage. The location of the page you visited will be
displayed in the URL box. Click OK.
Add
A Text Hotspot To A Graphic: back to
top
You can add text hotspots to graphics such as pictures, animated GIFs,
and videos. A text hotspot is a string of text that you have placed on a graphic
and assigned a hyperlink. When a site visitor clicks the text, the destination
of the hyperlink is displayed in the Web browser.
1.
In Page view, click the picture.
2.
On the Pictures toolbar, click Text
.
3.
In the text box that is now displayed on the graphic, type the text.
You can:
n
Resize the text box by clicking and dragging the handles.
n
Move the text box by clicking and dragging a border.
n
To set the hyperlink for the text, double-click an edge of the
text box.
n
Specify the destination for the hotspot
Add Clip Art back
to top
Microsoft FrontPage includes the Microsoft Clip Gallery. You
can preview clip art, pictures, and videos, and then select items to use on your
page.
Add A
Picture From A File: back to top
You can add a picture from your local file system. Pictures can have
the following file formats: GIF (standard and animated), JPEG (standard and
progressive), BMP (Windows and OS/2), TIFF, TGA, RAS, EPS, PCX, PNG, PCD (Kodak
Photo CD), and WMF.
When you save the page, Microsoft FrontPage prompts you to save the picture to your web. Save your images in the Images folder.
Add
A Picture From A Site On The World Wide Web: back
to top
You can add a picture from a site on the World Wide Web. The
easiest way to do this is to place the cursor on the picture you wish to add to
your web site then press the right mouse button. A dialogue box
will open. Click on copy. Return to the Front Page page you
wish to add the picture to. Place the cursor where you wish to insert the
picture, right mouse click again, and select paste.
Backgrounds: back
to top
www.hotdoor.com can help you create and
select color schemes for your pages
www.scsite.com/fp2000/more.htm
Selecting Background Colors:
back to top
Light Blue – most commonly used color on the Web.
Gives a message of honesty and truthfulness – helps to relax us
Dark Blue – an authoritative color
Red – the most powerful color; great attention grabbing color
Green – represents wealth and money; lowers the blood pressure and helps relax us
Yellow – a color of action – be careful with the use of this color – too much yellow can give you a headache!
Brown – represents stability and practicality; a color of the earth
Orange – a color of action; stimulates the appetite – Burger King, McDonald’s and Wendy’s use this color
White – represents cleanliness; uplifting color; the most commonly used background color on the Web. White background works best and it is the easiest color to use when placing graphics on the page.
Black – a powerful color; too much black can represent death and depression
Set a background color for a page: back
to top
You can set a background color for a page.
1.
In Page view, right-click the page, click Page Properties
on the shortcut menu, and then click the Background tab.
2.
In the Background box, select a background color.
Set a Background Picture for a Page: back
to top
You can set a background picture for a page. All page elements, such
as text and graphics, will appear on top of the background picture. You can use
pictures from a web, a file system, the World Wide Web, or clip art. You can
also set the background picture to be a watermark, which means the picture that
does not scroll as the page scrolls. However, not all Web browsers support
watermarks.
Note If the page uses a theme, modify the background picture by changing the graphics used in the theme.
1. In Page view, right-click the page, and then click Page Properties on the shortcut menu.
2. Click the Background tab.
3. Select the Background picture check box, and then click Browse.
4. Select the background picture:
o If the picture is in a web, browse to the web and folder that contains the picture, select the picture you want, and then click OK.
o
If the picture is on your local network, click File
,
browse to the picture you want from your local network, and then click OK.
o If the picture is on the World Wide Web, click World Wide Web . In your Web browser, browse to the picture that you want, and then switch back to Microsoft FrontPage. The location of the page you visited will be displayed in the URL box. Click OK.
o If the picture is clip art, click Clip Art to display the Microsoft Clip Gallery, right-click the picture that you want, and then click Insert on the shortcut menu.
Apply the Background and Colors of One Page to
Another: back to top
If you have set the background picture, background color, hyperlink
colors, and text colors for one page, you can apply these settings to another
page in the current web.
Note If the current page uses a theme, this feature is disabled.
Set
a background sound for a page:
back to top
You can set a background sound for a page. When a site visitor opens the
page, the sound is played. You can play the sound continuously, or play it a
specified number of times.
Note This feature is not supported by all Web browsers.
1. In Page view, right-click the page, and then click Page Properties on the shortcut menu.
2. On the General tab under Background sound, in the Location box, type the sound file you want to play, or click Browse to locate the file.
3. To play the sound continuously, select the Forever checkbox.
4. To play the sound a fixed number of times, clear the Forever checkbox, and enter the number of times you want the sound to play in the Loop box.
5. To save a sound file open Media Dialog Box – click File Save As Save in
SET
PAGE MARGINS: back to top
You can set the size of the top and left margins for a page.
Create a Hover
Button: back to top
Creating a hover button is an easy way to add animation to your web
without any scripting. Like any other button, a hover button contains a
hyperlink to another page or file. However, when a site visitor clicks or points
to a hover button, the button can also glow, display a custom picture, or play a
sound effect.
1. In Page view, position the insertion point where you want to create a hover button.
2. On the Insert menu, point to Component, and then click Hover Button.
3. In the Button text box, type the text label for the hover button. Leave this box blank if you want to use a custom picture that already contains a text label.
4. In the Link to box, type the URL of the page or file you want to display when the hover button is clicked. Or, click Browse to locate the page or file.
Create a Marquee: back
to top
Create a marquee on a page to display a horizontally scrolling text
message.
1. In Page view, click where you want to create the marquee, or select the text that you want to display in the marquee.
2. On the Insert menu, point to Component, and then click Marquee.
3. In the Text box, type the line of text you want the marquee to display. If you selected text on the page in step 1, the Text box contains the selected text.
Create a Banner Ad:
back to top
A banner ad is like a rotating billboard on a Web page. It displays a
timed sequence of pictures using a transition effect between pictures.
Authors typically use banner ads to place advertising on pages.
1. In Page view, position the insertion point where you want to create a banner ad.
2. On the Insert menu, point to Component, and then click Banner Ad Manager.
3. For each picture you want to display in the banner ad, click Add and then select the picture.
4. The list in the Pictures to display box shows the pictures you've added and the sequence in which the pictures will be displayed. To change the sequence, select the URL of a picture in the list, and then click Move Up or Move Down.
5. In the Transition effect box, select the effect you want to use between pictures.
Tip The best way to select a transition effect is to create a banner ad and preview it, trying various effects until one matches your needs. To preview a banner ad, click the Preview tab, or click Preview in Browser on the File menu.
6. To create a hyperlink from the banner ad, in the Link to box, type a URL. Or, click Browse to locate the destination page or file for the hyperlink.
Add a Hit Counter to a Page: back
to top
A hit counter tallies and displays the number of times a page has been
visited. For example, add a hit counter to your home page so that you and site
visitors can see how many times your Web site has been visited, as in the
example below.
You are visitor:
![]()
Microsoft FrontPage provides several styles of counters, but you can supply your own number graphics by creating a custom picture in GIF format. The picture must include numbers 0 to 9, evenly spaced.
Note A hit counter works only for pages in a web, and requires your Web server to run the FrontPage Server Extensions.
1. In Page view, position the insertion point where you want to place the hit counter.
2. On the Insert menu, point to Component, and then click Hit Counter.
3. Under Counter Style, click the type of hit counter you want to use. If you click Custom Picture, type the relative location of the GIF file, for example Images/Custom.gif.
4. To set the counter to a specific number, select the Reset counter to box, and then type the number.
5. To display a fixed number of digits in the hit counter, select the Fixed number of digits box, and then type the number. For example, to display 005 rather than 5, select this option and type 3.
[HitCounter] is displayed on the page as a placeholder for the hit counter. To see how the hit counter will appear to site visitors, click the Preview tab, or preview the page in a Web browser.
PUBLISHING YOUR WEB: back
to top
WWW.SCSITE.COM/WEB/SCWEBDES.HTM
THEN CLICK AUTHORING PRGRAM AND GRAPHICS AND MORE
Ø Web Browsers can access and view Web pages using a software program called a Web browser.
Ø The Web browser software program requests a Web page, interprets the HTML codes and text used to create the page and then displays the Web page on your computer screen.
Ø Today, the two more popular browsers are Explorer and Navigator.
Ø The Web pages that comprise a Web site are stored on a served called a Web server.
Ø A Web server, or host, is a computer that delivers requested Web pages.
Ø Every Web site is stored on and runs from one or more Web servers;
Ø A Web server can have thousands of Web pages available for viewing. Multiple Web sites can also be stored on the same Web server. For example, when you enter a Web page in your browser, your browser sends a request to the server; the server then uses the Web server software to fetch the Web page and sends it to your browser.
Publishing: back to top
When you are ready to display your web on the World Wide Web or your
organization's intranet, you must publish your web. Publishing a web is
basically copying the files in your web to a destination, such as a Web server,
where others can browse the web.
Before Publishing Your Web: back
to top
Before you publish your web, you should make sure it is ready by
checking for broken hyperlinks, verifying that the pages look the way you want
them to, and testing the web to make sure that everything works. A good way to
ensure your web is ready is by previewing it in a Web browser and navigating
through the site, and by reviewing the status of your files in Reports view.
If you are going to publish your web to the World Wide Web, you'll need an Internet service provider (ISP), preferably one who has a Web server with the FrontPage Server Extensions installed. You'll also need to know the ISP's Web server location for publishing your web, and your user name and password, if necessary. For information about ISPs who use the FrontPage Server Extensions (known as Web Presence Providers), visit the Microsoft FrontPage home page, or click Publish on the File menu, and then click the WPPs button.
Check the Publishing Status of a Web: back
to top
You can view the publishing status of all the files in a web by
running a report. The Publish Status report indicates whether a file has been
marked as Publish or Don't Publish. By default, all files are
marked as Publish unless you change the status.
The Publish column displays the publishing status of each file.
Publish a Web using HTTP: back
to top
Publish the files in the current web when you are ready to present
your web for public viewing, or when you want to update the files in your web.
You can publish using HTTP (HyperText Transfer Protocol) if the FrontPage Server
Extensions are installed on the Web server to which you are publishing.
FrontPage publishes your web. If you want to verify that your web was successfully published, click the hyperlink that is displayed after the web has been published — your Web browser will open to the site you just published.
If you cancel publishing in the middle of the operation, files that have already been published remain on the destination Web server.
Tip To publish only pages that have changed to the same location you previously published to, click Publish button.
Flag a page for a Search Engine:
back to top
You can index keywords to your home page to make your web more accessible to
search engines such as Yahoo! or Alta Vista.
1. On the File menu, click Properties, and then click the Custom tab.
2. Under User Variables, click Add.
3. In the Name box, type keywords.
4. In the Value box, type the index keywords for your site, using commas to separate words.
5. Click OK to close the User Meta Variable dialog box, and then click OK to close the Page Properties dialog box.
Notes: back to top
· FrontPage adds the index keywords to your page's meta data. Click the HTML tab in Page view to see the HTML that FrontPage generates.
· Some search engines do not use index keywords in meta data, or require their own registration processes. Check with specific search engines for their guidelines.
· Search engines find your Web page by the way your page is formatted. Therefore, in the Style box, change from Normal to Heading 1. This means that the search engine will search the Internet and find your Web page by the Heading I format.
· When saving Web page, in the area File Name, use default or index. This means this is the home page. Page Title – add whatever text you want.
· The <META> tag is a special hidden tag located in the <Head> section of the HTML code. Search engines use information in the <META> tag to index and locate your Web site. A description of your Web site and keywords are placed inside the <ETA> tag. The description should be no more than one sentence and the keywords should be any words you think users will type into a search engine when performing a search relevant to the content of your pages.
Importing a Web: back
to top
You can import a source directory of files from your local computer or network.
You can also import a web from a Web server on your computer, on a network
server, or from the World Wide Web.
1.
On the File menu, click Import.
ØIf
you don't have any webs open in FrontPage, the New Web dialog
box is displayed, with Import Web Wizard selected in the Web
Sites list. In the Specify the location of the new web
box, type the name for the new web that will be created from the imported source
directory or web, and then click OK.
ØIf
you're editing a web in FrontPage, the Import dialog box is
displayed. Click the From Web button.
The first screen of the Import Web Wizard is displayed.
2. Choose the web you want to import:
ØTo import a source directory of files from your local computer or network, click From a source directory of files on a local computer or network, and then in the Location box, type the path to the directory. Or, click Browse to locate the directory, and then click OK.
Tip If you want to import the entire directory, including any subfolders or subwebs, select the Include subfolders check box.
ØTo import a web from a Web server, click From a World Wide Web site, and then in the Location box, type the complete URL of the starting page you want to import. The starting page can be any page in the web, not just the home page.
Tip If you want to import a web that uses Secure Sockets Layer (SSL) for secure transactions, select the Secure connection required (SSL) check box.
The second screen of the Import Web Wizard is displayed. The screen differs depending on the option you selected in step 2 of this procedure.
Ø If you chose to import from a source directory of files on a local computer or network, the Files list shows the files that will be imported:
Ø To import all of the files listed, click Next.
Ø To exclude specific files from being imported, select them, click Exclude, and then click Next.
Ø To refresh the file list with the latest information, click Refresh.
Ø If you chose to import a web from a Web server, you can optionally specify limitations on the files to be imported:
Ø To import pages that are a specific level of hyperlinks below the starting page, select the Limit to this page plus check box, and then in the Levels below box, type the number of levels you want to import.
For example, if you specify a level of 0, FrontPage imports only the starting page you chose in step 2 of this procedure and any images, controls, applets, or other files on that page. If you specify a level of 1, FrontPage imports the starting page and its contents, plus all files pointed to by hyperlinks on the starting page (and any images, controls, applets, and so on contained in those files).
Ø To import no more than a specific amount of file space (for example, 500 kilobytes) on your hard drive, select the Limit to check box, and then in the KB box, type the amount.
Ø To import only text and image files, excluding any controls, applets, or other related files contained on the page, select the Limit to text and image files check box.
The last screen of the Import Web Wizard is displayed.
Guidelines for an Effective Web Page: back to top
| HTML | MS FrontPage | MS publisher | MS Office |
This site is maintained by Dr. Gail Laoria,
Business Chairperson at
H. Frank Carey High School.
230 Poppy Avenue
Franklin Square, NY 11010
Contact us at Laoria@unix.asb.com or
[516] 539-9422
| Carey
Home Page |
Bus. Dept Home Page | Doc's Home Page |