|
On this page you will find information:
About Animation and Web Pages.
About Animation design, compilation, and viewing.
About Including and Publishing Web Graphics.
About Browser looks and the web.
About the browsers and their effect on your web page design.
About Errors and Dangers Commonly Made and Found in Web Page Publication.
About Page Manufacture, Problems, and Resources: Answers to things which I Have Addressed In Correspondence With Those Who Have Utilized This Site.
About Publishing Your Pages - titles, etc.
relating to beyond the basics - applications which will help your increasing taste for applets, etc.
About The expertise you expect of yourself.
About What to do about problems you may encounter.If you would like to have a copy of this page to refer to, download the information.exe file, double click it to unpack the file, and then open it in wordpad, MS Works, or MS Word.
About Animation and Web Pages
The use of animation in web pages can be pleasing to the eye and will give your pages an interesting look. This will catch the attention of your viewers. Once you have their attention, the content of your site should hold them while you make your beginning point. This will lead them to the rest of what you have to offer. You MUST plan your Home page to hold interest and lead to other pages on your site. Graphics, especially well chosen animated graphics, can help you do accomplish this.
I stated "well chosen graphics" because the danger inherent to using graphics is that many of them are byte heavy (large file size) and it will take longer for the pages to load. Therefore, it is important to choose the animations that you are going to use carefully. For instance, if you use animated rules it is a good idea to use the same rule (divider) throughout the site as it will only have to load once into the viewer's computer. It will load for subsequent instances as quickly as the cpu of the viewers machine will allow. The same applies to bullets and other graphics. If you choose carefully you will find that the use of two or three different animated bullets will not appreciably slow performance. This will allow for a varied look to the site, which is important. You do not, however, want to overdo this as it will then detract from the content of your site.
I have included pages of non-animated graphics on this site because it is a good idea to have a mix of animated and non-animated graphics on the pages.
About Animation Design, Compilation, and Viewing
Animations are designed and manufactured with a paint application, much as a 'flip book' is made. Each frame is enough different so that the desired activity shows when the frames are played back in sequence. The speed is variable and depends upon the amount of motion between frames and the desired effect on the eye.
Once the frames are made, the whole is 'compiled' with a .gif animator. I use the Animation application which comes with Paint Shop Professional® (version 6) to do this. Background transparencies are accomplished with the application by telling it to make the background transparent.
Be aware that GIF animations will probably not work in your web editor. There is special programming in the Netscape and Microsoft browsers, as well as some specialized software applications, which reads the compiled information and executes the animation on your browser. Therefore, when you wish to see how the animation works on your page, view it with the browser or with software that you know was written to include viewing of the animated .gif format.
About Including and Publishing Web Graphics
You should have a very good idea of the look you wish to have for your site - throughout. This will enable you to make wise choices of the graphics and other elements outside of the text portion of the site. This will enhance loading time on the client computer (the viewer's machine).
Once you have this look firmly in mind you should make a sub-directory on your computer in the directory that will hold your HTML documents. You will put all the graphics you download into this directory. The reason for this is that when you use web editors to add graphics, the editor will store the path to the graphic. This path is not valid on the Internet Server to which you upload the site. When you upload the site to the server, upload the subdirectory and its contents with an FTP (File Transfer Protocol) application. If you do not aready have an FTP application in your machine, you will find these on my software page.
Make sure that the HTML document has the size of the graphic stated. This will make it so the viewer's browser knows how much space the graphic will take and will speed up the load time. To do this, if your editor doesn't automatically add the numbers (most don't), you will need a paint application which will tell you how large the graphic is and add the dimensions manually (img src="graphic.gif height="34" width="42", etc.). It is easier if you make sure to use an editor which sizes them when they are added. You will find a variety of editors which will include the graphic's dimensions on the Editors page.
The number of bytes contained within your graphics files is extremely important as, with millions of sites on the internet for people to browse, you wish your site to be one which will be visited. Large graphic files are likely to make those you would attract go to other sites before your pages are even loaded. Make sure that you do not forget this or you will not have many visitors to your site. Those who do wait probably will not be back.
I have found that two of the biggest culprits in slow loading sites are huge "background" and photograph files. Where backgrounds are concerned, you do not want to use one that takes more than two seconds to load off the server. This means a very small file. I have put a lot of effort into making the backgrounds which are available on this site small so load times are within parameters.
Where photographs are concerned, the use of a good paint application and conversion to .jpg format and possible resizing of the photo will work wonders for the file sizes. You will not want to set the .jpg to more than 50% compression because the quality of the photograph will be degraded. Paint Shop Professional®, Colorworks®, and many other paint applications will help you to "shrink" the size of your graphic files without compromising the color or integrity of them. Use your paint application and experiment with different compression rates and sizes. View the results with your web browser until you have the smallest files which look the same as the original. The time it takes to perform this will be worth it in client load time when you publish the site. These graphics files should not take more than four seconds each to load with a 28.8Kbps modem.
About Browser looks and the web.
When looking at web pages, browsers have a tendency to use large fonts which make the pages difficult to fit into your window. In each browser there is a control to make these fonts look different, resize them, and do many other things. I suggest that when using MSIE on that the small font be used. To do this set the font size and style to whatever looks best to you within the "Internet Options" menu. When using Netscape Communicator you set the fonts by opening "Edit," "Preferences," "Fonts." There are many things about the appearance of these browsers which can be set in the "Preferences" or "Internet Options" menus and they are worth looking at - and experimenting with - so that you get the best view for yourself that the browser is capable of giving.
It is also important to know that most sites on the Internet are made in the "800 X 600" pixel video format and at least "High Color 16 bit". Using a larger number of pixels for yours will make it so that most users will have to scroll sideways to view the entire page. Also, your display will seem off center. Using the "640 X 480" display will probably make your site look odd also. So, make sure your display is set to "800 X 600" pixels and at least "High Color 16 bit," or better, before you begin. Be sure to use 256 colors if your machine does not have the video ram to support High Color.
About The Browsers and Their Effect On Your Web Page Design.
Netscape and Microsoft both view pages differently on the Internet. We all know this but what do we know about the effect this has on the design of web pages? The W3 consortium is responsible for standardization of HTML but these two browsers have many proprietary goodies that do not conform to the standards. This gives the user a much more robust set of controls for manufacturing and viewing pages. These controls make it so that video, sound files, graphics of all kinds, as well as complete multi-media packages can be incorporated on the World Wide Web. This, in itself, is good for all of us.
The problem is that when a person manufactures a web page, especially with the Netscape Browser or Microsoft Browser Editor add-on applications, things which look good on one browser may be completely messed up on the other. Certain types of lists, and many other things, may look good on Netscape and behave exactly as you wish them but when viewed on Microsoft, are spread all the way across the page. The reverse situation is also true. It depends upon which browser you design for. This can give the designer indigestion and leave him/her with much less hair due to tearing it out in frustration.
Most DHTML scripts will not work on Netscape. Likewise, there are things which work wonderfully on Netscape which do not always work nearly as well on Microsoft. The Microsoft Marquee will not work on Netscape. And on and on. The only way for a designer to be sure that the more exotic elements, and even some of the simple ones, incorporated into web pages show properly, at least at this time, is to make separate pages or not incorporate things into the pages that they have not checked thoroughly with both browsers. It is important to make sure your Web pages work with both browsers.
This site, for instance, has many things that do not show the same with the browsers but I have worked out solutions to the major headaches, such as the listing on the index page. Rather than use the list command, I was forced to use a table to hold the buttons to the left column of the page. This proved to be time consuming and annoying but it was better than having the buttons all over the page. There are other things upon which decisions have to be made as to whether or not the difference is worth making a separate page. Perhaps you should consider leaving these items out completely until you have the time and knowledge to make them work with both browsers. (Or, at least, make it so error messages do not occur on one browser or the other because of the element inclusion.) You will find many DHTML scripts on the Java Applet and DHTML pages that will not be viewable with Netscape. I felt that the use of MSIE is so much larger than that of Netscape that these are well worth inclusion on the site.
The bottom line of this is that, for the beginner at web design, it is extremely important to keep it simple and not put exotic control required programming on the web page. These take some expertise and do not always enhance a page. Be careful in what you incorporate on your website so that it will be viewed and enjoyed by all. Although I do not do homework for students, I am always available to help with webpage problems that the users of this site encounter. If you have problems that you can't solve, e-mail me and I will try help you solve your problem.
About Errors and Dangers Commonly Made and Found in Web Page Publication
One of the biggest mistakes in Web page manufacture is making the page while having the graphic elements in different directories within the computer. When the web page editor, either a "what you see is what you get" or html, is utilized to put an image on the document the input to the page will record the path in your computer. When the page is published, this information is no longer valid as the graphic elements will be in the web directory along with the actual documents and the computer directory which it will read for directions will be the server's. In order to avoid this, you must save the blank html document to the directory (or sub-directory) in which the graphics for the page are stored BEFORE beginning the html. Then you may begin putting the page together. This will make it so that your web page editor will only record the name of the image (or the sub-directory and name of the image), which is how it must be when the page is published. Also, upload the sub-directory with the images if you have them in a separate directory. Always look at the html of your pages before you upload and make sure the images are inserted correctly: <img src="image.gif"> or <img src="subdirectory/image.gif">. I repeat this here because it is the number one error made by new web designers.
Another common error made is that of not reloading the browser after uploading corrected or updated documents. The browser will always load the page from memory. Once it is loaded the user simply needs to click "reload" on the Netscape Navigator or "refresh" on the Microsoft Explorer to be able to view the updated or corrected copy. Failure to do this causes the Web author to believe that he has not made any changes and that the directory on the server will not allow the existing page to be changed. Sometimes this does not work with the browsers and it is necessary to hold down the shift key when reloading the document. This forces the browser to call up the page and related elements from the server.
Animations cause their own difficulties when you are manufacturing pages. When a page has been loaded into a browser a number of times, the browser will sometimes refuse to show the animation motion. The only way I have found to get them working again when this happens is to flush the browser cache and reload the page.
Calls to the ISP about these things when you think it is the server causing the problem can prove to be extremely embarassing to the author.
The use of "What You See Is What You Get" page manufacturing applications have a built in danger for the user. This is that they will not allow you to learn HTML or to make changes which the application will not support. Also, some of them have a tendency to rename your graphic files to something like "image1.gif". This makes it so that animated gif files may not "play" or may not show at all.
So, in order to be able to use things which are not supported or to correct editor errors, it is important to learn enough HTML to get you through building your site. You should have a text based Web page manufacturing application to do this. Again, you will find many of both types of editors (WYSIWYG and text) on the Editors page.
I use "1st Page 2000®," which is available from this site, for page manufacture and it enables me to put anything I wish into the pages. The cost is free and it is an excellent web editing application. Also, it has html 4.0 support and a graphic display feature which allows you to look at the general look of your pages while you are writing them. Along with these features it has the fastest page ftp application that I have used, over 250 javascripts, the page transition effects, and much more. This application, as well as lesser good applications, for text based manufacture come with wizards to help you make your pages. Also, it will allow you to make changes after you have done so.
It is extremely important to remember not to reload the document into any WYSIWYG editor after you have made changes that are not supported by that application. Usually these editors will undo your work or will change it so that the page will no longer function properly.
About Page Manufacture, Problems, and Resources: Answers to things which I Have Addressed In Correspondence With Those Who Have Utilized This Site.
Through your e-mail many problems relating to web site and page manufacture have come to my attention. Some of these seem to re-occur on a regular basis. I think that a listing of these and how to avoid them would be helpful. Therefore I offer the following:
No matter what editor you use it is an excellent idea to have a working knowledge of HTML. Primeline Chemical Systems has a tutorial that will teach you the basics in a very short time and is an excellent resource for beginners and experts. It is well worth the effort to spend the time to know a little about what you are trying to do.
For uploading your image and other files to most servers you need to have a good File Transfer Protocol (FTP) application. These can be found on bellsnwhistles software page. Information on how to upload should be available from your Internet provider. (I use the FTP add-on for 1st Page 2000 for this and keep an icon on my desktop for it.) If you are a CompuServe or some other ex BBS member you probably need to have either their proprietary FTP application or MicroSoft's publishing wizard which is available from Microsoft.
If the animation works on the site from which you get it, it will work on your site so long as you do not change the file type. (.gif ending of name) So, when you put the animation files on your server, remember not to change the .gif extension. All graphics files on the Internet have to have .gif, .jpg, or in rare cases .bmp as extensions in order to work. Animation files are usually .gif unless you are running java script files which use other extensions. Also, .ani, .mov, .avi, and some other types of files are occasionally used with the proper plug in applications.
If you have uploaded the graphic properly and it still doesn't work, check the number of bytes on the server against the number of bytes of the graphic on your machine. If they do not agree, delete the graphic from the server and upload it again.
If you like the music on these pages and want to put music on your pages you will find the generic html code for this (works with any midi plug in) on the Bells and Whistles page or in the technical support section of Live Update Com (The home of Crescendo and their code requires the Crescendo player in order to work). AOL users may have to put the code on their pages twice for it to work properly. There seems to be some difficulty with their servers recognizing midi files and playing them from their member's pages.
If you would like to use .wav files on your site, feel free to copy the html script from the Bells and Whistles page
Before beginning your page, it is a good idea to copy the html of a couple of sites that you like the look of. Referring to the html of a well written page will help you to write yours. Be careful not to copy another persons site format too closely. Remember that you want your site to be original and to copy too closely would be a violation of copyright.
Everyone, from the newest at html to the veteran, has questions about how to do some things on the web. It is always a good idea to have a simple to understand book to explain those things which are not regularly used. I suggest the "Idiot's Guide to Creating an HTML Web Page" or the "HTML for Dummies" books. They will prove to be invaluable as a ready reference to help you in your layout, design, and document composition. These are available at your local computer software outlet.
When writing a personal home page it is important to add content which appeals to a wide range of people. Remember, you didn't start the project to be the only one which the page will interest. There are several elements to consider which will appeal to most netizens. these are:
A good set of links to sites which you find helpful and/or interesting or links to related interest sites.
General content on subjects and areas of personal interest which you believe will be of benefit and/or interest to others.
Something which tells the reader that you are interested in what they have on the net.
Good graphics content and good general site layout.
A good explanation of what will be found on the site on the first screen.
Ease of navigation throughout the site.If you need the hex value of a color for your background, you will find the palette with the necessary value information at the Netscape Palette page.
About publishing Your Pages - titles, etc.
Once you have your pages on the Internet it is important to put your URL in a place where people can find it. To do this, it is extremely important that you use a title for your site that conveys what is contained within. For instance, the name of this site is: "bellsnwhistles.com" This tells the searcher that this site contains the "bells and whistles" (neat things - if they understand Internet language) for their web sites. Your site should be titled in the same way or even make it more generic so as to make it easier for anyone who is looking for what you have to offer the opportunity to find it by your page title.
Beyond the Basics
I have had many requests for information relating to forms, java script, and other advanced forms of html. There are sources which automate many of the things you have written about. Do not expect to always get what you want for free but I hope you find the prices very reasonable for the applications for which there are links on this page - this is the real world and if you look carefully you will get what you need for the least possible expense. I have wasted thousands of dollars on, what I consider to be, useless applications that promised much and delivered little. I offer the following list as the best values for the money that I have found:
Web Editors - There are many available but I use only three of them (one of which is NOT free but the second - 1st Page 2000, and third -Arachnophelia- is excellent). I use 1st Page 2000 for my primary page manufacturing. I have over twenty web editors but I have found these three to be the best for my use. However, simply because I prefer the three web editors mentioned does not mean that the others are not good. Other webmasters have different needs and prefer one or more of the others.
Forms for e-mail, your own information, or to publish a forms response page on the net and the associated cgi scripts are automated when you use "WebForms 2.7®" from Q and D Software Development.
(Not free) Paint Shop Professional and Web Tools (for PSP) are, in my opinion, almost indespensible to the web graphics artist. Unfortunately there are no really good free paint applications that will do .gif and .jpg format pictures.
Many people want to put hit counters on their pages. These are available from this site.
Information about and demo versions of the (for my money) best midi composition application may be had and downloaded from Cakewalk Com. The software is available at the better software outlets. If you decide to make your own midi files, it will prove to be expensive as you will need to get some specialized equipment from Roland, Yamaha, or one of those companies to do the job properly.You will also find many free resources and a lot of software which just might contain the thing you are searching for or will work for you on the resources page.
About the expertise you expect of yourself
As you progress in the manufacture of pages, your knowledge of how it is done will increase. Do not worry if you do not have the necessary knowledge to put some of the goodies on your site that you would like to have. As your interest increases, you will want to learn how to do some of these things and the knowledge will come from sources on the Internet and from books at your local software outlet. Most of us, who have been here for a while, are more than willing to help you become experts. However, you will have to be willing to study and to learn all you can in order for you to really know how to put all the things you wish to have on the WWW.
About What to do about problems you may encounter
If you have any questions about your web site manufacture or would like to see information about something for your web site that you do not find on these pages, do not hesitate to e-mail us. We will be happy to answer your questions or refer you to the proper place to get your answers. Remember that there are no stupid questions about something you don't know. We have all been where you are and remember the learning pains that we have gone through and are still having.
| Index | 
|  | HTML Tags, Javascript, etc. |
