Web Design Beginning Web Page Design Advanced Web Site Design Web Site Management Professor Higgins Web Design Resources

CSC 112 - Lesson 2 Notes

This week in class we talked about the importance of consistent design when designing and planning your web site. There is another very important reason that consistency is important in your design. It allows you to globally replace any item on any or all of your pages. This makes additions and changes quick and easy.

Last week in class and in your exercise, we used Dreamweaver to change some text site wide and we also moved a few images and pages around. We found that Dreamweaver automatically updated all of our links to those items when we moved them to different folders. Other features like the link checker make managing a web site a breeze.

Even though we know this secret, others may not know it or be willing or have the inclination to take the time that you have to learn the program and other html skills. Often these are the very people that you are designing your web site for. Sometimes it is necessary to use cgi to help them add content to the site so you don't have to.

Writing a cgi-program takes a little practice but setting up a cgi-program is easy if you can follow directions. Many cgi-programs are freely available on the Internet. Most have excellent instructions which makes it easy for even the novice to run sophisticated programs on his or her web site.

The updatable page that I am going to show you today is a combination of simple programs that write to, and read from a text file.

Here's what you do:

download 2 zip files

  1. update_cgi.zip
  2. update_html.zip

Unzip update_cgi.zip and ftp all the files to your directory in the cgi-bin on the class website at http://students.modemswitch.com.

If you don't already have a directory in the cgi-bin, make one.

Be sure that you ftp all files in the ascii mode into the same folder.

Do the same thing for update_html.zip, except ftp it to your main directory instead of your directory in the cgi-bin.

Before you ftp it make sure to add your directory into the path for the cgi script.

It should work. If not check your path and make sure that you ftped the cgi files in the ASCII mode.

If this doesn't work, you may need to change the permissions for your file.

Some ftp programs allow you to change permissions for your files and directories. Unfortunately the one that we use for this class WS FTP does not. Fortunately, we do have a telnet like program installed on our computers called putty.exe. This is a free program which you can download from the Internet. if you want to do this at home. I used a search engine and found it when I downloaded my personal copy.

Just click on the icon to open the program and fill in the host name (students,modemswitch.com). and click the radio button that says SSH. Then click on the open button at the bottom and you will be at the server. It will ask you for your login and password.

When you get into the site, navigate to your folder by using the "cd foldername" command where foldername is the name of your directory. If you don't know where you are type in "ls" and a list of all the files and directories inside your current location will be displayed. When you get inside of your folder inside of the cgi-bin type "chmod 777 *.*" This will change the permissions to allow reading and writing to the file from your html page.

Check you file again. Everything should work.

You should be able to access your updated information on http://students.modemswitch.com/cgi-students.modemswitch/yourfolder/readfromlog.cgi

Good luck. Modify the html inside of the readfromlof.cgi to your taste.

Batch Processing of Images

Sometime preparing graphics requires much mindless repetition. Batch processing allows you to save time by automating the repetitive functions of sizing, cropping and other tasks.

There are several programs that will allow you to do batch processing. Personally I use Fireworks so I'll explain the process in Fireworks. Other programs work similarly.

In order to batch file images in Fireworks:

  1. Choose File > Batch Process - The batch file dialog box will open.
  2. Specify which files you want to modify - You can do this in one of five ways:
    1. Add the file to the batch list by navigating to it, selecting it and clicking on the "Add" button.
    2. Add multiple files from the same folder by navigating to it, holding the "Control" key as you select each file, then click the add button
    3. Add all the files from one folder by navigating to the folder and clicking the "Add to All" button.
    4. Add all files in the Project Log panel by checking "Include Files from Log" checkbox.
    5. Add all files that are currently open by checking the "Include Current Files" checkbox
  3. When you have compiled the list of target files, click the "next" button
  4. Under "Batch Operations" select the operation(s) to apply to your batch file.
  5. Specify options. For example, if you want to scale your objects you can choose the appropriate height, width or percentage that you require.
  6. If you have multiple operations, do step 4 and 5 again as many times as you need to.
  7. When you have specified what you want to do, click the next button.
  8. Choose whether you want to save the results of your operation to the same location as the original files or in a new folder. If you choose "Custom Location" use the browse button to navigate to the folder you want to use.
  9. Check the backups button to make backups if you wish.
  10. You can optionally save your batch operation as a scriptlet for reuse in the future.
  11. Click on the "Batch" button to execute your operation.