Chapter 11 Web Development: Importing Gifs and Backgrounds

Transcription

1 Chapter 11 Web Development: Importing Gifs and Backgrounds The purpose of this lesson is to build on the web page from the previous lessons and provide you with the basic skills in revamping that web page to include imported graphics and backgrounds. For this lesson the following programs will be used: Fetch, Pico, and Netscape. Objectives: After this lesson, you will be able to: Use Netscape to download gifs and backgrounds for your web page. Use Fetch to upload those gifs and backgrounds to your comp account. Use Unix commands to change permissions of those gifs and backgrounds. Use Pico to insert those gifs and backgrounds onto your web page. Use Netscape to view your revised web page. Using Netscape to download a background: Chapter 3 discussed the specifics of downloading a graphic. Therefore, an extensive description of this process will not be provided in this chapter. Refer to Chapter 3 for more detailed information. You can download gifs and backgrounds from just about any web development page. Make sure that everything you download is copyright free. To download a background: Go to the Apple menu and open Netscape Navigator Click on the Net Search button and search for "Backgrounds"

2 Look through your search results until you find a background that you want to download. In the following example, it is a white marble background. Note: For traditional backgrounds, try one of the following addresses: Click on the background you want and hold the click until a pop-up menu appears. Move the cursor to highlight "Save this image as" Selected background Pop-up menu A box will appear asking you where you want to save your background. Give the background a name you will remember and make sure you save your background to the Do Not Erase folder. Click the "Save" button. You have just downloaded a background to your machine. Use the same procedure to locate and download other desired gifs from Netscape.

3 Using Netscape to download an animated gif: To download an animated gif, use the same search and save procedures as you did for the background. The following is a brief step-by-step: Perform a Net Search for "animated gif" files. Look through your search results until you find a gif you want. Once you find an animated gif you want to download, click on the animation and hold the click until the pop-up box appears. Use the pointer to highlight "Save this image as". For the following example, the animated gif was found at: A box will appear asking you where you want to save your animated gif. Give the gif a name you will remember and make sure you save your animated gif to the Do Not Erase folder. Click the "Save" button. You have just downloaded an animated gif that you can later use on your web page. Important Note: You may not name your backgrounds, animated gifs, graphics, etc. with more than 8 characters (not including the 3 letter extension after the ".") because you will be loading it to your Unix account.

4 Uploading your backgrounds and gifs: Now that you have your background and animated gif files on your computer, you need to "upload" them to your comp account so that your web page can access them. To do this, we will use the program Fetch Go to the Apple menu and open Fetch In the "Host" space type "comp.uark.edu" because you want to connect with the comp server. In the "User ID" space type in your ID. In the "Password" space type in your comp password. You will not be able to see what you type for security reasons. In the "Directory" space type in "public_html" because you want to access your web page directory. All of your web page materials should be located in this directory. Click "OK" and the connection will open. Your screen should look similar to the following when you are ready to click "OK".

5 When your connection opens you will see a screen similar to the following screen. You will not have all of the files and folders that appear below, but it should say "public_html" at the top and you should see your "index.html" file. index.html file public_html folder At this point you want to "put" your background file and your animated gif file into your public_html folder. To do this: Click on the "Put File" button. It will ask you to locate the file you want. Go to the Do Not Erase folder and click once on the file you want to upload. Click on the "Open" button to begin the uploading process. In the following example, the divider.gif file will be uploaded.

6 A "Put File" window will appear. Make sure the name of the file is no more than 8 characters. If it is, shorten the name. Change the "Format" of the file to "Raw Data" and click "OK". Your screen should look similar to the following when you are ready to click the OK button: You have just uploaded your file and you should be able to see it listed in your public_html directory. New uploaded file Using the same procedure, lets upload another file. Click on the "Put File" button. Go to the Do Not Erase folder and select the second file you wanted to upload by clicking once. Click on the"open" button to begin the uploading process.

7 Change the format of the file to "Raw Data" and change the name of the file if necessary. Click "OK" when ready. You should now see the second file in your public_html directory. When we are finished uploading, go to the "File" menu and select "Quit" to get out of the Fetch program. Congratulations! You have just uploaded a background file and an animated gif, both for use on your web page. Next, lets set the permissions for these new files so we can place them in our web page. Changing permissions on newly uploaded files: Because your comp account is a private account, every time you upload a file to your account for use on your web page, you must change the permissions so that others can view that file. To do this: Go to the Apple menu and open comp. Type in your ID and Password. At the comp% prompt you will need to get into your public_html directory because that is where your new files are located. To do this: Change your directory to public_html by typing: comp% cd public_html Get a listing of the files by typing: comp% ls

8 You should see your index.html file as well as the other two files that you just uploaded. To view how the permissions are set for each file, you can use the Unix command "ls -al". To do this: To view the permissions settings for your files type: comp% ls -al You will see something similar to the following: Permissions settings Name of file The name of the file is located at the far right while the permission settings are the letters at the far left. Notice in the above example that the "divider.gif" file has different permission settings than the other files. In order for a file to be viewable by others, the permissions must have at least the following letters: -rwxr-xr-x Those that do not have these permissions can not be viewed until the settings are changed. To change the permissions: At the comp% prompt, use the chmod command to alter the settings. Type: comp% chmod a+rx "name of file here" In the example below, the permissions for the "divider.gif" file have been changed to allow outside viewers to Access, Read, and execute it. Make sure that all files you are using on your web page have the correct permissions settings. If you are unsure, use the "ls -al" command to check the permissions and then use the "chmod a+rx" command to alter any files that need their permissions altered. When you are finished, your files should all have -rwxr-xr-x as permissions and look like the following: Now that we have changed our permissions, lets place our background and animated gif files into our web page.

9 Using Pico to insert an animated gif: When you want to inlcude a gif into your web page, you need to use the image tag (<img src="name here">). The image tag is a stand-alone tag and does not require an ending tag. The "src" portion of the tag tells the web page the "source" of the image. To add the "divider.gif" animated gif to your web page: Make sure you are in the public_html directory. At the comp% prompt type: comp% pico index.html You should now see athe tags of your web page. It will look similar to the following: Using your down arrow, move your cursor until you are right in front of your name heading. Hit the return key to give yourself some room to insert the image command. It should look similar to the following:

10 To insert your animated gif, type the following: <img src="divider.gif"> Type in a <p> to seperate the heading (<h1>) from the animated gif with a paragraph. It should look similar to the following: Exit and save your web page (Control X, Y, return). Go to the Apple menu and open Netscape Navigator. Type in your web page address to see the animated gif you just added. It should look similar to the animated gif below. ID" Animated divider gif You can use the image tag to insert any picture or image onto a web page. Just make sure it is either a gif or jpg image. Also, where you place your image tag will determine where your image is placed on your web page. In the example above, the image tag was placed before the "Dr K's Home Page" heading. It could have just as easily been placed after the heading or any where else on the page. Now that we can insert gifs, lets work on that background!

11 Using Pico to insert a downloaded background: The process for using a downloaded background is a little different than using an image because you want the background to cover the entire screen. To insert a downloaded background: At the comp% prompt get into your web page by typing: comp% pico index.html Use your arrow key to move your cursor to the <body> tag. Erase the part of the body tag that says "BGCOLOR=#77777" Type in the following background command in place of the BGCOLOR= command: Make sure to leave the rest of the command the same. <BODY background="whtmarb.jpg" You have just replace a background color with a background file. By giving the name of the background file (whtmarb.jpg), you indicate what file you want to act as your background. Go to Netscape and click on the "Reload" button to see your new background.