With Microsoft FrontPage 2000 Making a Web Page With Microsoft FrontPage 2000
Part One: How FrontPage Works FrontPage is a Web Page Editor and More
When you create a new Web in FrontPage, it makes folders and starts the structure for your Web site. Graphics are saved in the images folder. The index.htm file is the home page.
Selecting a View You can look at a FrontPage Web site in several different views. Page: Edit a web page Folders: organize files and folders Reports: analyze your web and manage its contents Navigation: design the web site’s structure Hyperlinks: view hyperlinks to and from any page Task: create and manage tasks
Selecting a Mode Double click the index.htm file to view the home page. You are now in Page View. Click on the HTML tab at the bottom of the screen to view the HTML source code that creates the web page. Click on Preview tab. This option allows you to view your web pages as if they were displayed in web browser. Click the Normal tab to return to Normal Mode which allows you to edit your web page. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="Content-Language" content="en-us"> <title>Home Page</title> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> </head> <body> </body> </html>
Front Page Toolbars Title bar Menu bar Standard bar Formatting bar FrontPage is a Microsoft product with Toolbars that look similar to Microsoft Word and other Microsoft programs.
Part Two: Setting Up a Simple Page It is easy, as long as you follow a few basic steps.
1 Create a FrontPage Web Open FrontPage Choose File > New > Web. Select One Page Web. Click in the Specify the location of the new web box and type the name of the folder for your page: C:My Documents\My Webs\yournameweb Click OK to create the new web site.
A blank page with a blinking cursor is ready for you. Go to File and click Save As. At the Save As window, name the file index.html. The index.html page is the home page for your Web and will open first. Click Save Click Yes if the window appears asking: “Do you want to replace the existing file?”
Give Your Page a Title 2 Set Page Properties Go to File > Properties Select the General tab Type the title of your page in the title box. The title will become the bookmark title and will show at the top of the browser page.
Set Colors & Background 3 Select the Background tab Select an image for background or pick a color. Pick colors for text Pick colors for hyperlinks. Use a background from another page.
3 Ways to select a background graphic Find a graphic saved on your hard drive. or Look for a graphic on the Web. Type the URL (Web address) here: or Search for a background graphic in Clip Art. Click on OK
Save the Page 4 After setting up page properties: Click the Save button on the Standard toolbar. Remember to save your page frequently as you work. To quickly access Page Properties to make changes: Right click on the page and select Page Properties
Part Three: Creating the Content What do you want to show and tell?
Create Text 5 You can type directly into Front Page. or Use any Word processor or text editor to create content: Microsoft Word Notepad Save the document, and in FrontPage select Insert > File and open your document. or Use CTRL + C to copy and CTRL + V to paste the text into FrontPage Editor.
Format Text 6 Font types Heading & Paragraph styles Bold & Italics Alignment Font color Font size Indent Bullets Numbered Lists The safest fonts to use for Web pages are Arial and Times New Roman.
Copy & paste a format style Toolbar Features Insert a component Create a table Check spelling Insert an image Copy & paste a format style Undo Create a hyperlink to another Web site or a specific Web page Save the file & click on Preview to see how the page will look on the Web.
Insert Images 7 Place the cursor where you want the picture and click on the Insert Picture icon on the toolbar. Find the image file on your computer. or Select a picture from Clip Art Use the folder icon to look for an image file on your computer or disk.
How to save images from the web Find the image that you like. Right click on the image. Click on Save Image As.. Navigate to your images folder in your web folder. Rename the image if needed and Save.
Adjusting Images Click on a picture in your Web page to select it. Black boxes appear at the edges. You can reposition or resize the picture right on the page Right click on a picture & choose Picture Properties to open the Picture Properties window for more options for adjusting images.
Picture Properties - General FrontPage accepts many different types of graphic files but Web browsers can only use 3 different types – gif, jpeg, & png. FrontPage converts image file types automatically for you when the page is saved. Here you can manually select the type & quality you prefer for a picture.
Picture Properties - Appearance Click on the Appearance tab for the following: Align an image Put a border around an image Change the size of an image. When you adjust picture size manually in the Web page, these numbers will automatically change.
Saving Your Page w/ Images When you select a picture by clicking on it in your page, an expanded Picture Toolbar appears. Rotate Rotate & Flip Crop Contrast & Brightness Thumbnail Make transparent After adjusting an image, it is very important to Resample the image. FrontPage reduces the file size and resaves your image.
Embedding Images Part 1 When you save a page for the first time after adjusting and resampling images, the Save Embedded Files window appears. Click on Change Folder Select the images folder
Embedding Images Part 2 FrontPage should remember to save all your page’s embedded images in the images folder from now on when you work on this Web page
Insert a horizontal line 8 Place the cursor where you want the line. Go to Insert > Horizontal Line. The horizontal line is a nice way to separate parts of your web page.
Part Four: Creating Links Make connections to target areas on your pages, other Web sites, and email addresses.
Make Web Links 9 Create a Text Link Type the text to identify what the link is and highlight it. Click on the Link icon on the Toolbar. Type the path to the file or or copy the URL of your link. Click OK. Save the file and click on Preview to test the link.
Create Email Links 10 Type the name of the person or the email address in the Web page and highlight it. Click on the Link icon on the Toolbar. Click on the Email icon Type in an email address Click OK and then OK. When the link is clicked on the Web page, an email message box will pop up.
Set Internal Links - Targets 11 Create a Target/Bookmark Place your cursor where you want the link to go to. On the Insert menu, Click Bookmark. Give the bookmark a name. Click OK. Create an Internal Link Go to the text for your link and highlight it. Click on the Link icon. Click on the drop down menu for bookmark and select in the list. Click OK.
Part Five: Inserting Tables Tables can help control the alignment of images and text on a Web page.
Set up a Table 12 Place the cursor where you want the table and click on Table on the toolbar. Select the number of rows and columns. Right click inside the table and select Table Properties. Select Layout Alignment. Set Cell spacing & padding Choose a border width or 0 for no border. Set table width (how much of the page it will cover). Select a color or image for Table background if desired. width.
Change Cell Properties 13 You can change the settings for all the Table, a Row, or an individual Cell. Put the cursor inside the Table, Cell, or Row you want to change and right click. Select Table properties. Click on the correct tab – Table, Row, Cell and make the changes You can select a background color for individual cells.
Part Six: Special Features FrontPage has many additional features to help make creating Web pages easier
Templates Click on File > New > Page to select from FrontPage templates.
Themes Click Format > Theme to select from themes like the example below.
Components Click on Insert > Component to see a list of advanced items to add to your pages.
Wow! Look what you can do now. Have fun!