.
Or use the menus to choose Insert-Picture-From File.Rick McDonald
Web Technology Coordinator
Coconino Community
College
Start FrontPage from Start-Programs-FrontPage.
1. When FrontPage starts it automatically has a blank new web page displayed. To open your own FrontPage Web, choose File-Open Web (open will let you open single pages and their parent folders), then enter the address exactly as it appears in your web browser i.e. http://www.coco.cc.az.us/its .
2. If you have already created a web on your local hard drive please see the separate help sheet, Publishing a Web Using HTTP.
3. If this is the first time you have opened your web, then you will start with a blank page named something like newpage.htm . THIS PAGE HAS NOT BEEN SAVED.
4. Save the page. If it is the first page that you want browsers to see, then you will need to save it as default.htm, index.htm or index.html.
5. To create a new page, choose File-New Page.
6. You will see choices of page types. I suggest you choose Normal Page, which gives you a blank page. Although seemingly helpful, many of the other page types can add “features,” graphics, links, backgrounds or text, to your web page that are very difficult to remove.
Managing Files in FrontPage seems extraordinarily easy, but often can be cumbersome and unintuitive. To avoid confusion, I recommend that you place or copy files into the folder structure of your web before you place them into your web site or specific pages. If you are creating your web on your local hard drive, then you can simply place the files into the folders using Windows.
1. Find the file you want on your local hard drive.
2. Right-click on the file and choose copy.
3. In FrontPage, Right-click on the folder where you want to place the file and choose Paste.
4. As an alternative method, you can drag and drop the file from your local hard drive to the folder in FrontPage. You will see a “+” sign in the icon when it is OK to drop the file.
Using Internet Explorer
1. Find the image you want on the Internet.
2. Right-click on the image and choose Copy.
3. Right-click on the folder where you want to place the image file and choose Paste.
Using Netscape Navigator
1. Find the image you want on the Internet.
2. Right-click on the image and choose Save Image As, and then save to a folder on your local hard drive. *PAY ATTENTION TO WHERE YOU SAVE THE FILE!
3. If you are working on a remote web (i.e. on the server) then follow the directions above to transfer the image file from your local disk to the web.
Working with Pictures in FrontPage is much easier if you can view the Picture toolbar. There are other ways to accomplish some of the tasks included in the toolbar, but it is the easiest method to learn and the method explained below.
If you cannot see the Pictures toolbar, then go to the View menu and make sure that View-Toolbars-Pictures is checked. If not then select it and release the mouse this will display the toolbar.
A common misconception is that JPEG’s are for making files smaller than GIF files. This is true sometimes, but for files with few colors and simple designs GIF results in small files too. The difference is the methods used for file compression.
JPEG groups areas of images based upon color shading. Thus, images saved with the highest compression and lowest quality often have large pixilated blocks. JPEG images can have millions of colors.
GIF’s look at images line by line and compress them by how many pixels (the smallest unit or dot in a computer image) there are of each color directly adjacent to each other. This method works well for images with large blocks of single colors.
One other critical difference: JPEG’s do not support transparency, but GIF’s do.
Here are some rules for what
images work best in each format:
1. Use Internet Explorer to go to http://www.coco.cc.az.us/images/ .
2. Browse through our image collection.
3. Right click on the image. Choose Copy.
4. Go to FrontPage and while in the “Normal” view choose Paste.
*This will place the image into the page using the path and you will not need to have a duplicate copy of the image in your web.
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. If the picture is not in GIF or JPEG format, pictures that use 256 or fewer distinct colors are automatically converted to GIF, and all other pictures are converted to JPEG.
1. In Page view, position the insertion point where you want to insert a picture.
2.
Click Insert Picture
.
Or use the menus to choose Insert-Picture-From File.
3.
Click File
.
You can also choose the Clip Art tab, if you do browse to the image you
want then go to step 5.
4. Browse to the picture you want from your local file system and then select the file. You can specify the type of file you want to view in the Files of type box.
5. Save your Web. You will see a prompt to Save Embedded Files. If you click OK it will place it in the default folder. You should click Change Folder and place the image in your images folder.
To Use A Picture From The World Wide Web:
PLEASE DO NOT USE IMAGES FROM THE WORLD WIDE WEB UNLESS THE WEB SITE EXPLICITLY GIVES PERMISSION TO USE THE IMAGES FOR ACADEMIC OR OTHER PURPOSES OR YOU HAVE WRITTEN THE AUTHOR AND REQUESTED AND RECEIVED PERMISSION TO USE THEIR IMAGES.
I have included four methods the first two methods do not actually place the image in your web, but place a line of code that display the image from the other site. The drawback to these methods is that the other site could delete or change the image and then it would be not display properly on your web site.
1st Method
1. In Page view, position the insertion point where you want to insert a picture.
2. In the URL box, type the exact location and name of the picture you want to insert. For example, type http://www.microsoft.com/sample.gif.
3.
Or, click Find on World Wide Web
to
open your Web browser and browse to the picture you want. Press ALT+TAB to
switch back to Microsoft FrontPage. The location you visited will be displayed
in the URL box. To make this work, you will need to Right-click
on the image and choose View Image (Netscape) before you ALT+TAB back to Front
Page. This method does not work well for images in Internet Explorer.
2nd Method
Follow the directions above for “Adding An Official CCC Image”, but browse to the image of your choice instead of going to our official images page.
3rd Method
Follow the directions above, under managing files, for “Using Image Files From the Internet”, then drag the image onto the web page.
4th
Method
While Browsing the web in either Netscape or IE, you can right click on an image and then choose “Save Picture As” (IE) or “Save Image As” (NS). Then the image is saved on your local hard drive. Insert as instructed above.
You can select one color in a picture to be transparent, and then wherever that color appears, the background will show through. Pictures can have only one transparent color. If you select a transparent color for a picture that already has one specified, the original transparent color will no longer be transparent. Also note, that if the picture was created with shading or slightly different colors where the color you choose borders another color, then you will have dots of the original color in those places.
When you save the page, Microsoft FrontPage prompts you to
save the picture in GIF format, even if the original picture is in JPEG format
(JPEG format does not support transparency.) If FrontPage converts the picture
from another file format to GIF, the number of colors in the picture may be
reduced and the picture file may become larger.
1) In Page view, click the picture.
2)
On the Pictures
toolbar, click Set Transparent Color
.
(If the Pictures toolbar is not available then go to View-Toolbars
and check the box next to Pictures.)
3) Click the color in the picture that you want to make transparent.
You
can add a border to a picture, animated GIF, clip art, or video. If you set a
default hyperlink for the graphic, Microsoft FrontPage automatically puts a
border on the graphic as a way to indicate to site visitors that they can click
the graphic.
You can set the width of the border, or — if you do not want a border — you can remove it. By default, the border is black. However, if the graphic has a default hyperlink, the border will have the colors that you specified for hyperlinks (these colors are set in the Page Properties dialog box).
1. In Page view, right-click the graphic, click Picture Properties on the shortcut menu, and then click the Appearance tab.
2. In the Border thickness box, enter a value to indicate the width of the border in pixels. To remove the border, type 0.
You can specify how pictures and videos appear on the page by setting their alignment and horizontal and vertical spacing. For example, you can select an alignment option that positions the graphic on right side of the page, with text flowing on the left. Or, set the horizontal spacing to 10, which puts a margin of 10 pixels on the left and right sides of the graphic.
1. In Page view, right-click the graphic, click Picture Properties on the shortcut menu, and then click the Appearance tab.
2. In the Alignment box, click an option to specify how you want the graphic to be aligned on the page. For example, to align the picture to the left side of the page and have text flow to the right of it, click Left. You can experiment with each option to see its effect.
3. In the Horizontal spacing box, enter how much space in pixels you want displayed on the left and right sides of the graphic.
4. In the Vertical spacing box, enter how much space in pixels you want displayed on the top and bottom sides of the graphic.
You can specify ALT text, which is text that is displayed in place of a graphic if the graphic cannot be displayed in a Web browser. Some Web browsers also display ALT text while the graphic is downloading, or when a site visitor moves her mouse pointer over the graphic.
1. In Page view, right-click the graphic, click Picture Properties on the shortcut menu, and then click the General tab.
2. Under Alternative representations in the Text box, type the ALT text for the graphic.
You can display a low-resolution version of a graphic while the site visitor's Web browser is downloading the final version. This feature is useful when you have a large or high-resolution picture. If the picture is an image map, site visitors with slow Internet connections can proceed to click hotspots based on the low-resolution picture, without having to wait for the entire high-resolution picture to finish downloading.
First you must create a low-resolution version of your picture. Open your picture in a graphics program, such as Microsoft Image Composer, and reduce the color depth (number of colors) in the picture. The fewer colors you specify for the low-resolution version of the picture, the faster it will be displayed in a Web browser. Because the low-resolution picture is intended as a placeholder for the high-resolution picture, you should not change the height or width of the picture.
1. In Page view, right-click the picture, click Picture Properties on the shortcut menu, and then click the General tab.
2. In the Low-Res box, type the file name for the alternate low-resolution picture, or click Browse to locate it:
o If the picture is in a web, browse to the web and folder that contains the picture, and then select the picture you want.
o If the picture is on your local network, click File, and then browse to the picture you want from your local network.
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. As noted above, you need to right click and choose View Image (NS) or Show Picture (IE).
(Displays in the Title Bar of the Web Browser.)
1. In Page view, right-click the page, click Page Properties on the shortcut menu, and then click on the General tab.
2. In the Title field, enter the Title of the page exactly as you would like it to appear.
1. In Page view, right-click the page, click Page Properties on the shortcut menu, and then click the Margins tab.
2. You can set a Top Margin and a Left Margin. Margins are set in pixels. The average computer Monitor has 72 pixels per inch. (This is usually referred to as dpi or dots per inch.)
You can set a background color for a page.
Note If the page uses a theme, modify the background color by changing the colors used in a theme.
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.
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. THE WEBMASTER SUGGESTS THAT YOU DON’T USE THEMES! IT IS DIFFICULT TO CHANGE OR HAVE A NEW THEME IF YOU ARE NOT HAPPY WITH YOURS.
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. You may have to find the folder the image is in first.
A template is a predesigned page that can contain page settings, formatting, and page elements. You can create your own page templates so that you can create pages for your web quickly and consistently. Templates are very useful in a multiple-author environment because they help authors create pages the same way.
For example, if all your pages always have a company logo and description at the top of the page, create a template with those elements. Then, use your template when you want to create a new page, and the logo and description will automatically be placed on the page.
When you create a page template, you create a page with the settings and page elements you want, and then you save the page as a template. The template will be displayed with the other templates provided in FrontPage. When you want to create a new page using your template, you simply select your template from the list.
Note A page that has a theme applied to it can be saved as a template. The pages that are created using the template will either use the web's default theme setting or a specific theme, depending on how the theme was applied to the original page. For example, you create a template from a page with a theme, then create pages in a web whose default theme is Artsy. If the page template used the web default theme, new pages will use the Artsy theme. If the page template used a specific theme, new pages will use that theme.
1. 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.
2. Click Save As on the File menu.
3. In the Save as type box, click FrontPage Template (*.tem).
4. Click Save.
5. 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.
6. In the Name box, type the file name of the template. FrontPage will automatically use the correct extension.
7. 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.
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.
Your basic formatting is done just like in Microsoft Word.
Character formats like, Bold, Italics and Underline, are all on the toolbar.
Your basic paragraph formats, like Center, Left Align, Right Align and Justify
are also on the toolbar. You can also add numbering and bulleting in the tool
bar.
Remember that in the absence of formatting. Text will be
formatted in the default size and font of the browser. Some browsers do not
support font formats, but all allow size formatting. Last, Cascading Style
Sheets do allow you to choose any font you want, but remember, if the
browser’s machine does not have those fonts, then they will use a default
font. It is best to choose common fonts.
The formatting you apply can either affect selected words or an entire paragraph. A general rule is that font properties can be applied to selected text, and paragraph properties (including bullets, numbering, borders, and shading) affect entire paragraphs. For example, you can italicize a single word in a paragraph, but if you try to align the word to the right, the entire paragraph will be aligned.
A paragraph is a block of text that is separated from another by a paragraph mark (¶). If lines of text are separated by line breaks, the text is considered to be one paragraph. You can show paragraph marks and line breaks by clicking Show All ¶.
A style is a collection of font and paragraph settings. Applying a style to text is a one-step procedure and a much quicker way to format text than by formatting each paragraph of text individually. Your text is also more consistently formatted by using styles. For example, to make the main headings stand out from other text, apply the style Heading 1, and leave body text styled as Normal (the default), which uses a smaller font. You can still apply additional formatting to text that has a style applied to it, for example to underline a word. You can create and modify styles, and create your own external style sheets.
You can also use themes to format your text automatically,
because each theme contains predefined styles. If you want to change the
appearance of text that has a theme applied to it, you can either modify the
styles used by the theme or apply formatting to selected text.
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.
When a site visitor clicks the hyperlink, the destination is displayed in a Web browser, opened, or run, depending on the type of destination. For example, a hyperlink to an AVI file opens the file in a media player, and a hyperlink to a page displays the page in the Web browser.
1.
In Page view, type the text you want to use as a hyperlink and then
select it. For example, type and select "My Interests" to link to a
page that describes your hobbies.
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.
2.
Click Hyperlink
You can set a default hyperlink for a graphic, such as a picture, animated GIF, or video. When a site visitor clicks the graphic, the Web browser displays the destination of the hyperlink. For example, to create a button that displays your home page, add a button graphic to a page, and then set the default hyperlink for it to go to your home page.
If you put hotspots on a graphic, the default hyperlink is used for the areas that do not have a hotspot.
1. In Page view, right-click the graphic, click Picture Properties on the shortcut menu, and then click the General tab.
2. In the Location box under Default hyperlink, type the destination that you want to use as the default hyperlink. Or, click Browse to find the destination:
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.
o If you want to create an e-mail message when a site visitor clicks the graphic, click E-Mail. Type the e-mail address to which you want the message sent, click OK, and then click OK again.
3. If you want the destination of the hyperlink to show up in a specific frame, click Change Target Frame, and specify the frame.
You can add hotspots to graphics such as pictures and animated GIF's. 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.
1. In Page view, click the picture.
2. On the Pictures toolbar, 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.
o If you want to create an e-mail message when a site visitor clicks the graphic, click E-Mail. Type the e-mail address to which you want the message sent, and then click OK.
You can add text hotspots to graphics such as pictures, animated GIF’s, 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:
o Resize the text box by clicking and dragging the handles.
o Move the text box by clicking and dragging a border.
4. To set the hyperlink for the text, double-click an edge of the text box.
5. 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.
o If you want to create an e-mail message when a site visitor clicks the graphic, click E-Mail. Type the e-mail address to which you want the message sent, and then click OK.
You can edit the URL of a hotspot, or move, resize, or delete it.
1. In Page view, click the graphic to view the hotspots.
2. Click a hotspot.
o To edit the URL for a hotspot, double-click it.
o To move the hotspot, click the hotspot and drag it to a new position.
o To resize the hotspot, click and drag the selection handles. Or, press the arrow keys.
o To delete a hotspot, press DELETE.
Tip When moving a hotspot, you can return a hotspot to its original position while you are still clicking the hotspot by pressing ESC.
