Microsoft Frontpage Tutorial
This tutorial is divided into two parts. In the first section, you will learn the fundamentals of designing a website. In the second part, you will move past the functional and learn to think critically about web design.
Part One - The Basics
I - Saving Your Website
Before you even begin working on your website, you'll want to save it onto your "W:" drive. Your "W:" drive holds all the information for your website. Whenever you want to change or update your site, you will have to save the changes to this drive.
- Open Microsoft FrontPage. You should see a blank white page.
- Go to File > Save As.
- Click the drop-down arrow, and select "webhome on Dana Samba Server." This is your "W:" drive (we will refer to it as the "W:" drive for the remainder of this tutorial.)
- In the area labeled "File Name," type "index" (without the quotes). Note: UNIX will not accept file names with capital letters, nor will it accept spaces in file names. Always save your html files with lowercase names.
- Click "Save." You can check to see if your webpage saved correctly by going to http://dana.ucc.nau.edu/~abc123, where "abc123" is your dana user name. You should see a blank page. If you receive an error message, you might not have saved your page correctly.
II - Hyperlinking
Hyperlinking is a crucial part of webpages, and the Internet in general. In this section, you will learn how to create links to other pages on your website, and how to link to pages on other websites.
- First, you'll create a new page for your site. Do this either by clicking on the button underneath "File" (it looks like a white sheet of paper), or by going to File > New. A toolbar will appear on the right-hand side of the screen. Click "New Page."
- Go to File > Save As.
- Click the drop-down arrow, and select the "W:" drive.
- In the area labeled "File Name," type "writers_profile" without quotes.
- Click "Save."
- Click on the tab called "index.htm." (Image)
- At the top of this page, type "Writer's Profile."
- Now, highlight this text using your mouse." (Image)
- Select "Hyperlink."
- In the dialog box that appears, navigate to your "W:" drive, and select "writers_profile.htm," then click "OK." (Image)
- This same process can be used to link to other websites. Hit enter a few times and type "Links." Ht enter once more, and type "NAU."
- Hightlight "NAU" with your mouse, and right-click on it. Then left-click on "Hyperlink." This will bring up another dialog box.
- In the box labeled "Address" type "http://www.nau.edu" (without quotes). Then, click "OK." (Image)
At this point, you should check your website in Internet Explorer to ensure that everything is displaying correctly. Your "index" page should have a link to a blank page for your Writer's Profile, along with a link to NAU's website. You should also Save your website frequently.
III - Images
Your site will probably be rather dull without images, so you'll learn how to add images to your website in this section.
- Go to Google (http://www.google.com), then click on "Images." This is widely referred to as a Google Image Search (GIS).
- When you're ready to start building your site, you can search for the images of your choice, but for now let's search for "koala."
- You should get a large number of results. Click on the first image, titled "koala-australia.jpg." Doing so will take you to the website from which the image came. (Image)
- On the top quarter of the page, you will see a link that reads "See full-size image." Click this link.
- You will be taken to a page that contains only the image itself. Right-click on the image, select "Save Image As...," then Save the image onto your "W:" drive. (Image)
- Now that the image is saved to you "W:" drive, you can place it on your index page. We want to place the image before the link to the Writer's Profile. Click anywhere in the empty space above "Writer's Profile."
- Now, from the menus at the top of the screen, go to Insert > Picture > From File. (Image)
- Click arrow in the drop down box, and navigate to your "W:" drive. (Image). Then, click "OK."
- The image should now be inserted onto your webpage.
- If you want to resize the image, you can left click and hold on the corners of the image. Drag the mouse to increase or decrease its size.
IV - Documents
If you want to link to some of your writing, but don't want to copy and paste text onto your webpage, you can link directly to the document using hyperlinking.
- First, save the desired document to your "W:" drive. You can do this in one of two ways. The first method involves opening up your word processing program (i.e. Microsoft Word), opening up the document you want to put on your webpage, and saving it to your "W:" drive. In the second method, you can left-click on the document, and hit Ctrl+C to copy the document. Then, after opening your "W:" drive, hit Ctrl+V to paste it there. (Image)
- Now, type a name for your document ("Essay One" in this example). (Image)
- Highlight the text with your mouse, then right-click on the highlighted area and select "Hyperlink." (Image)
- In the dialog box that appears, navigate to your "W:" drive and find the document you wish to create a link to, then click "OK."(Image)
- When you click this link on your website, the document should now open up.
V - Formatting
Now that we've covered hyperlinking and inserting images - two of the most complex aspects of web design - let's focus on making your webpage look presentable.
- You can change the background of your website by going to Format > Background. In the dialog box that appears, ciick the drop-down box next to "Background." You may now change the background of your website.
- Formatting your text functions similar to Microsoft Word. You can experiment with different fonts, change the alignment of your text,apply italics, etc.
- You might want to try experimenting with Themes as well. They can be accessed by going to Format > Themes.
- Horizontal lines give you a way to divide your pages into sections. Access them by going to Insert > Horizontal Line.