Department of Biological and Agriclutural Engineering header Banner links to The Department of Biological and Agricultural Engineering

Bio&Ag | About Bio&Ag | Department Services | BAE Graphics | Creating Web Pages

Creating Web Pages

This page explains several ways to create web pages that may be useful to faculty , students and staff in the department of Biological and Agricultural Engineering at NC State University.

Web page basics

  1. About creating basic web pages...
  2. CHEAT 1----- Creating a web page FAST with MS Word...
  3. CHEAT 2----- Using or revising an acquired template...
  4. More about handling Web graphics...

1. The basic web page

Many people do not realize that many popular browsers have a built-in web page editing and composing feature. Explorer (http://www.microsoft.com/windows/products/) use MS Word as an editor FoxFire http://www.mozilla.org/ however is only a browser but you can use the Mozilla application suite known as Seamonkey to edit with. Mozilla Seamonkey (www.seamonkey-project.org/) is a browser with an edit function like the older netscape composer. With browsers that have edit and composing features you can create pages from scratch, save them in a file on your machine, and view your creations using your web browser window. All this can be done without being on a live web server and without anyone else viewing it on the web because the file you created lives on your local drive.. Creating and viewing local web files using the web browser window allows you to make sure everything looks just right before pages are upload to a live web server.

UPLOADING NOTE: After you test your web pages in your browser window. The file can only get on a live web server if you:

  • give the file to your web master to upload.
  • have a link set from your machine to the web server, enabling you to upload files yourself to a folder which the webmaster has given you permission into.
  • actually set up a full web server site on your machine.

You may first be confused when working with a newly created web page because you are dealing with two windows. The first is the browser window, this is the window you are very familiar with, it is the window you view web pages in. The second is the composer window this is the window you create new web pages in. The composer can be thought of as a word editing program embedded in the browser window. In explorer the very familiar MS word program is used as the web composer and many people feel comfortable with this. The new FoxFire has no composer related to it so you can download Mozilla Seamonkey instead it is just like the old Netscape.

In both programs you can learn everything about using the composer/editing features from the help menu of the browsers main menu.

FAST web page with MS Word...

If you have information in a Word that you would like to see on the web, then you will find half of the work in creating a web page has already been done. Yes done! All you need to do is: Use the main menu of the word program, file/save as HTML. This saves the file and all it's pictures automatically. Everything is converted to web ready (basic) documents and graphics. Your word file becomes a HTML web page and all the pictures of the original file are converted to .gif web graphics. You don't need a photo editor to make web ready graphics.

Stay organized keep related files together, it's important when creating a web page. To organize files create a folder you will use to save only one converted document and all of its associated picture files into. This is especially important if the original file has a lot of pictures.

Now convert all the rest of the files you think you will want linked to your page, keeping each in it's own folder. Put all of these folders into a folder together (staying organized is key) name the folder something like "my web collection".

Start your web browser. Go to file/new/open page browse to find your web folder and choose one of your HTML documents.

Don't worry you are not opening your pages on the world wide web server. HTML web pages you create and keep on your local hard drive are just that LOCAL. You are the only one viewing them.

Notice the request to "open location file in" choose to open it in the browser window.

Tweaking pages to perform and look right on the web is an important step. This is where knowing how to work with the composer features of the web browser becomes important.

To edit the web page, so you can make changes you need to be in the composer window. The composer window can be thought of as a word editing program which is built into the netscape browser window. To edit the page go to menu/file/edit page a new window will open. This is the composer window. It looks almost identical to the browser window but note the menu has changed at the top. This menu has icons and tools which are similar to Word. Both windows should now be open on your screen and should stay open. When you edit pages for the web, two windows are used one to edit in and one to see the changes in. The two window concept of editing is a little cumbersome but it is how it's done.

To see how the page will exactly look and work on the web to see exact colors, picture positioning, formatting and links to your web. First changes are made in the composer window, then saved and viewed in the browser window. This is because links and other things will not work in the composer window even though both windows look a lot alike, they are not. The more complicated a page gets with items and links the more the composer is needed to tweak things. When tweaking remember to reload the page in the browser window to refreah the page and see you treaks.

Revising an acquired template...

If you surf the web you will find may free web templates you can use. It is best to use templates from safe and well known sites. Shop well it is worth it. Today you will want to look for accessible XML templates that are ADA compliant. In theory, you can open any web site on the internet and and save the page to your local hard drive with a new name then edit the page with your information in place of theirs. This may at first sound simple and surely the easiest way to create a site. However, if you don't use a simple site you may find youself removing and unlinking a lot of information in order to use this template. Recommendation-- If you choose to use this method then pick a simple site to copy and revise. To get the template of another page open a web site you like go to file/save as and rename the file, then edit it in Dreamweaver or Sea monkey editor substituting your text for theirs. If they have links on their page you need to remove the links and set new ones for yourself. Once you have the page revised you need to upload it to the web.

More about Web graphics...

Including graphic elements is the fun part of creating a web page. Many web creation software packages and clip art image software collections have web ready graphics to use. You can also find free graphic elements on the web by browsing graphic and computer sites. If you want to use elements form other peoples pages consider copyright concerns.
To save most simple graphics from a site all you need to do is highlight the image, then right click your mouse button and choose "Save Image as". In the pop-up dialogue box just save as you always do, into a folder on your hard drive. There are a number of different kinds of graphics on the web:

  • Animated gifs
  • Three-D graphic images
  • Background images
  • Movie files
  • PowerPoint files are converted to appear within an html file

Note: non-university links are provided as a starting point for information on the subject but are in no way an endorsement of the sites or accuracy of information they present.