Web Page Design Using Microsoft Frontpage
-We are going to begin today by opening a folder on the web server for your website.
-On your desk top, click on Programs and find Microsoft Office. Double Click on Microsoft Frontpage.
-When Frontpage opens, go under file, click on Open Site.
-You will need to type the following into the box labeled site name at the bottom of the pop-up window:
-http://www.canbymn.org/ (you need to put in your first initial and last name here!!!!)
-A log-in screen will now appear and you will need to type in your username (first initial and last name) and then enter your password(you will use the same password that you do on your classroom computer).
You are now ready to begin editing your webpage.
1. Appearance
-Creating a Background for you Webpage
-The appearance of your webpage is unlimited. To begin creating your appearance click on Format, and then scroll down to Background and click.
-You now must decide if you want a background picture or if you just want a background color.
-Color As A Background
-To choose a color, go under Colors and use the drop down menu to select a color
-Picture As A Background
-To use a picture as your background, we first must find a picture to use as a background
-Open Explorer and go to the website http://www.freebackgrounds.com
-Scroll Down and Click on the Right Arrow to get to the first background available. Right Click on the background and click on Save Background As. Now navigate back to your folder you created and give the background a name that you can remember.
-Click back to Frontpage and click the Background Picture box, then click the Browse button and navigate to your website folder and click on the file icon of your background image that you previously saved there.
-Choosing a Text Color
-Text color can be changed by either highlighting the text and clicking on the Text Symbol, or you can select the text color on the Format Background menu. Use the dropdown menu under the Background color menu.
-Choosing Hyperlink Colors
-Hyperlinks are the active links on a webpage. You select the hyperlink color on the Format Background menu. Use the dropdown menu on the right of this menu to select the color for your hyperlinks. Make sure to use colors that will display prominently against your background.
2. Inserting An Image
-We did a basic image insertion for our background. The same basic procedure is followed to put a picture on your webpage.
-Right click on this image, and choose Save Picture As. Navigate to your web folder and save the image there.
![]()
-In Frontpage, click on Insert and choose Picture. Click on From File and a insert picture box will pop up. Towards the lower right of the popup, there is an icon that is a folder with a magnifying glass. Click on this and navigate to your web folder. Click on the handbox image icon. The image will be inserted on your page.
You can choose any image that you want on any website or from any clipart directory. Just save the image in you web folder and insert it as above.
3. Linking Pages
-A hyperlink allows you to go from one webpage to another. We will create a couple of hyperlinks from your page to other websites.
-In Frontpage, have you webpage open and type the words Canby High School.
- Highlight Canby High School with your mouse and find the icon of a globe with a chainlink in the top row of the Frontpage menu and click on it. A create hyperlink window will pop up. Click on the globe icon with a magnifying glass in the lower right side of the window.
-Internet Explorer will come up and I want you to click on favorites and choose Lancer Locale.
-Now, bring Frontpage back up and you will see the address for the Lancer Locale page on the create hyperlink pop up. Click OK.
-A hyperlink has now been created from your page to the Canby Public Schools website.
You can repeat this process for any website on the internet. You can also link to pages created within your website as you develop it more.
As your website becomes more sophisticated, you may want to create separate folders within your website folder to keep the website neatly organized and for ease of navigation throughout the site.