Advanced Webpage Editing

from Home or from School

You are now familiar with making simple changes to your webpage. Now we will show you how to create different types of links, insert pictures from different applications, and copying information from other applications or websites to your own.

What is a link you may ask? Well, a link is just that, a link to somewhere else. When you click on something on a webpage, you are clicking on a “link”. Links are used to guide users from one page to another. Think of a link as the road map to the internet. Without links, you would have to type in the whole address of a webpage every time. Let’s say teacher Smith wants his webpage to have general information on the first page, and from his first page (or what I may refer to as the main page), he wants a page that list homework assignments, another page that has a nine weeks project, and another page that has a calendar of events.

First, teacher Smith would edit his first or main page. While editing his webpage, he decides to do a homework page instead of listing his homework on the main page. Somewhere logically on his main page, he would type a description of the new page, (Homework will do for a homework page) and create a link to his new page. If the new page does not exist, he must create the new page and “link” the new page to his main page. To create a link to a new page, highlight the words “Homework” that you typed earlier (with the mouse is easiest). Now click on the “Hyperlink” Icon at the top. It looks like this. This new page that has opened is basically asking you “where do you want me to send this to when someone clicks on me?” If you are creating a new page, just click on the “create new document” button on the left. Another window will appear. It now wants to know what the name of the new document will be. Remember, this is the Homework page that we are creating. You should not use spaces when naming this document, and make it as short as possible in all lower case. For this page, we will just name it “homework.htm”. Notice that after I typed homework, I typed in .htm after it with no spaces between the filename the “.htm”. When naming documents for a webpage, the last part of your document should always be “.htm”. This lets the Microsoft Word and Internet Explorer know it is working with a web based file. (NOTE: You should always use logical names when creating new pages on your webpage). Now click OK. Microsoft Word will open a new blank document. This blank document is now your “homework” webpage. When you are finished editing your homework webpage, click the save button. Now close the homework page that you have been working on. You should be back to your “main” page. To make these changes stay on the web, you must also click save on your “main” page. If you do not click save on the main page, your “link” to your new homework page will not appear on your webpage.

In the example below, we have several links that are already on our page. We want to add a link to the school calendar. First we go to the area of our webpage where we would type the words describing what our link is to. Remember, this is for informational purposes only. It can say anything you would like and should describe where this link will take you when you click on it. Once you have typed in the description of your link, you must highlight the words you have just typed. See picture below for our new school calendar.

As you can see, School Calendar is now highlighted. You would now click on the link button to create the link to the school calendar. A new window will appear asking you where this link should go. We now have to determine what type of link this is. Is this a link to something on your own webpage? If so, you will see a list of files that already exist on your website. If this is a link to anywhere else on the internet, you will have to type in the address. For example, for the system calendar for the 04-05 school year, here is the internet address http://www.fcsboe.org/calendar04-05.html If you are creating a link to a NEW page that does not exist anywhere there is an additional step. You will have to click “Create New Document” on the left. You are telling Microsoft Word that you are creating a brand new webpage that does not exist. When you click on “Create New Document”, you screen will change and it will ask you for the “Name of new document”. This will create a new file for your webpage. Type in a name for this document. Make it descriptive but short. Try to avoid spaces, and always end the name with .htm This is a very important step. If you forget the .htm at the end of the filename, not everyone will be able to see your new page.

Many of you have requested help with putting pictures on your webpage. I recommend creating a new page just for pictures if you will have lots of pictures. The more pictures you have on a page, the slower it will load for you and for other web users. Let’s try creating a new page for Pictures. Edit your homepage and add the text “Pictures” to your homepage (we are creating a “link”). Now highlight the word “Pictures” and click the link button on your toolbar. When the “Edit Hyperlink” page comes up, click on “Create New Document”. Type in a filename that will describe this new page. For this example I will use pictures.htm for the filename of this new page. Make a special note of the .htm I typed in at the end of the filename. This is very important. Now click OK. You will now see a new blank document open up. This document is your new “Pictures” file. To organize your pictures, I recommend adding a table to your page. To add a table, click on the “table” menu at the top of the page. Then choose Insert, and then choose table. A new window appears asking you for the number of columns (Vertical) and Rows (Horizontal). I recommend two columns for pictures. You will then have to figure out how many rows you need (each row will have 2 pictures). Then click OK. A picture will be added to each “Cell” of this new table. You can now start adding pictures to your website. Tables are also a great way to help organize text and links on your website. You can use the same steps listed above and just type in each cell. Each schools main webpage uses tables to help us organize them.

There are several ways of putting pictures on your website. If you use a digital camera to take pictures, make sure you save the pictures to your M: Drive. If you are at home and you are using a digital camera, save the pictures to the “My Pictures” folder. If you are using a scanner, you should also save these pictures to your M: Drive at school or My Pictures folder at home. Once you have the pictures saved, you can “Insert” them in your webpage. To insert the pictures in your new table, you would click on Insert, Picture, and choose “From File”. Go to your M: Drive and find the pictures you would like to put on your webpage. After finding your file, click on that file and then click Insert. The picture will appear in the first cell of your table. Now click in another cell on your table. Clicking on another cell will allow you to put a picture into that cell. Go back to File, Insert, and choose Picture. Find your picture, click Insert, and keep doing these steps until all your pictures are inserted on your webpage.

If you find a picture on another website that you would like to use, you may copy that picture/graphic into your website (beware of “stealing” someone else’s pictures). To copy a picture from another website, just right click over the picture you want to copy, and choose Copy. If you are not already editing the webpage where this picture will go, please go to the webpage where you want to put this picture and press the Edit Button. Now click with your mouse where you would like the new picture to be placed. Then go to the Edit Menu and choose Paste. The picture will appear on your webpage. A note about copying pictures and graphics. Some websites have a statement(s) stating that NO PART of their website may be reproduced. If you see one of these statements, DO NOT copy anything from these websites without the website owner’s permission.

You may also want to insert clipart into your webpage. To insert clipart is simple. Edit your webpage. With your mouse, click the spot on your webpage where you would like to insert a graphic. Click on the Insert Menu, click Picture, and then Clip Art. Find the picture you would like and click OK.

When inserting pictures that come from digital cameras and scanners, you will likely need to “Reduce” the size of the picture. If you do not properly reduce the size of these pictures, they will be too large for your webpage. Follow these steps to reduce a picture file. Go to Start, Programs, and choose Microsoft Office Tools. You will see a file called Microsoft Photo Editor. Click on this file. You will see a new program open up. Click on File, choose Open, and find the picture that needs to be “Resized”. After opening the picture, Click on the Image toolbar and click Resize. A resize window will appear. The width should be in the 2.5 to 3.0 range. Once you adjust the Width, the Height will automatically adjust. Click Ok. Now go to File and choose Save (or Save As if you want to rename this picture). You should do this BEFORE adding any pictures to your website! Doing this simple step will make your webpage of pictures load MUCH faster. If you do not have Microsoft Photo Editor on your computer, let us know and we will install it for you.