How to add Graphics to your site

Volume III - Issue III - March 2003

Website Design and Creation

How to add Graphics to your site

Mike Haddox
Support Representative

Graphics are an important part to website development and design. They not only support the look and feel of your website, but allow you to integrate visual elements that are personalized for your business while separating your website from that of others. This article will feature a simple but effective tutorial to help you get your graphics into your EZ-NetTools account, and then onto your website.

Getting "graphical"
Before we begin with our tutorial, we need to have a word about graphics in relation to the Internet. There are many different types of graphics that are used on computers, but only some of these types of graphics can be used safely on the Internet. The most common types of graphic formats used on the Internet today are Jpegs and Gifs. These formats allow your pictures to hold a relatively small file size, so that anyone visiting your web page can see the graphic quickly.

Even when you have the right file format, the picture must be compressed in the right way. Have you ever been to a web page that took forever to load just because of one simple graphic? This is because, although the designer of the site has graphics in the correct format, they were not compressed to the right file size. For the purpose of this article, we will not focus on preparing your graphic and picture for the Internet. If you wish to find out more information about preparing graphics for the web, you can read the past EZ-NetAdvantage article on Image Optimization located in Issue IX · September 2001.

Sample Graphic needed for this tutorial

For both pictures shown above, follow the following directions below:
1. Right click on the first picture above.
2. Save the picture to your desktop

· For Internet Explorer users:

1) Select "Save Picture As..."

2) For the "Save in:" drop down menu, choose "Desktop"

3) Click "Save"

· For Netscape users:

1) Select "Save Image As..."

2) For the "Save in:" drop down menu, choose "Desktop"

3) Click "Save"

· For Macintosh users:

1) Simply drag the picture from this webpage to your desktop

3. Follow steps 1 and 2 again for the 2nd graphic.

Uploading multiple graphics to your EZ-NetTools account
Once your graphic has been prepared for the Internet, the first step we need to take is to transport it from your computer to your EZ-NetTools account. We call this process of transferring files uploading. We have provided two separate ways of uploading graphics and files to your account. One method allows you to upload many graphics all at once using the EZ-FileManager, while we can upload graphics one at a time while you're building a webpage in EZ-PageBuilder. Our first tutorial wil help us upload many graphics at a time. Login to your EZ-NetTools account and follow the steps below.

1. Select the Construction Tools tab.
2. Select EZ-FileManager.

· You should now see a list of all the files that are in your account. Click the "Help" button located at the top of the EZ-FileManager to lean more. 3. Click the Upload button at the top of EZ-FileManager. A new window will open that will allow you to choose what folder to upload to and which files to upload.
4. Click the first Browse... button.
5. From the "Look in:" drop-down menu, select the Desktop option.
6. Double-click on the smiles.jpg icon amongst the list of files displayed.

· If we wanted to upload more than one graphic at this time, we would click the 2nd Browse button and search for our 2nd picture, and continue the process until we've filled up all the slots. If you wanted to upload more than 5 graphics at a time, change the "5" located in the drop-down menu at the top of the Upload page to the number of files you wish to upload. 7. Now, click the Upload button at the bottom of this screen. Wait for a second or two for the file(s) to be transferred from your computer to your EZ-NetTools account. When the files have been uploaded, an "Upload Report" screen will display the results and statistics of your upload(s).
8. Click the Close button.
9. The EZ-FileManager will then refresh to show you the new files that have been uploaded to your EZ-NetTools account.

You have now successfully uploaded using the EZ-FileManager. Our next step is to upload graphics while you're working on your web pages in the EZ-PageBuilder.

Uploading graphics using EZ-PageBuilder
In this tutorial, we are going to upload one graphic while we're in the process of building a page in EZ-PageBuilder. This process is useful when you're working in a page and realize you need to upload some files. Instead of having to exit EZ-PageBuilder and upload using the EZ-FileManager, you can retain the work you have done and upload graphics right away.

1. Select the Construction Tools tab.
2. Select EZ-PageBuilder.
3. Once EZ-PageBuilder is open, click the New Page button located in the top-right corner of the screen.
4. From the Type drop-down menu, select Graphic and click the Next Step button.
5. Click the Browse button next the Graphic field.

http://support.eznettools.net

6. At the bottom of the EZ-Browse, change the "Files of type" to Images. This will refresh your list of files so that it will only show the Images that are in your account.
7. You will also notice many options across the top of the EZ-Browse. Find the icon that resembles a folder with different grades of shadows behind it. (Hint: if you hover your mouse over an icon for about 2 seconds, a description will appear. We want the one that says "Upload A File.")
8. Click the Upload button. The bottom portion in EZ-Browse will change so you should now see a "File name" field.
9. Click the Browse... button next to the Filename field.
10. From the "Look in:" drop-down menu, select the Desktop option.
11. Double-click on the people.jpg icon amongst the list of files displayed.

· We should now be back in the EZ-Browse, but this time, we should have a whole line of text in the Filename field. 12. Click the Upload button.

people.jpg

13. Select the people.jpg link, then click the Open button. This will take us back to the main EZ-PageBuilder window where we can see that the people.jpg file is now in the Graphic field (AOL users will need to select "Window > EZ-PageBuilder" from the top of their AOL browser in order to hide the EZ-Browse).
14. Now, click the Submit button.

You should now see that you have added a graphic to your webpage. You can continue on adding your own graphics and pictures so that your website has a custom look and feel.