free hosting   image hosting   hosting reseller   online album   e-shop   famous people

Intro The Plan Programs Design Publish Links The Rings Graphics Folder Organization Top of page

When I started this site I had an idea of what I wanted it to be and do. However I had little or no experience with most of the programs I needed to use. I had programs I was familiar with, but they were not free. The result is that I made this site, but had the same learning curve as anyone learning from this site only I had more confidence. I started by trying to find a good WYSIWYG web page editor. I almost didn't look around because I had some experience with a free, very powerful program which does almost any fancy thing you can imagine and some I almost couldn't believe, called WebDwarf. The trouble is that its interface caused me quite a bit of frustration the first time I tried to use it to place an image as the background. Also it works in a proprietary format. When the page you are working on is finished, then you name the page and publish it to an HTML file on your hard drive or to a site if you have one. One more thing, it only makes one page. You have to connect the pages with links that may appear not to work in the program, hoping they will work on the site, of course if you do it right they will. Most of the WYSIWYG web page editors don't handle the creation of HTML files in the most precise manner, and are difficult to use for maintaining a page, changing it or updating it without having to start from the beginning. For these reasons, I looked to see if there might be something better. I had my preferred program, Visual Page by Symantec, but it is not free, no longer available and not supported. I tried WebPlus v6 which is free and thought I had found the answer, as it is a very good program also. Then I tried Trellian WebPage and as I build this site I feel this is even better than Visual Page by Symantec. Trellian WebPage is a free, very powerful program, that is also very easy to use and learn. It also makes changing a page or updating it as easy as a word processor does for a letter. More about how to use it later. It is important to start with the place you want to store the web pages on your computer. Many people and programs say you should put everything into one folder, so it is easy for the program to find what it needs. I have found that this causes me to become frustrated when I want to change something or add something later as it is too much to look through. So I start out with the creation of an organized site for storage that will also be used in the actual website. Example: I created a folder in My Documents named "Web". Within the "Web" folder I created a folder named "Trellian WebPage". (to help sort which program was being used for this version.) Within the "Trellian WebPage" folder I made a folder with the name of the site I was making "WB WebDesign". Folders above this folder are not used in the site, only the files and folders inside this folder are used in the site. At another time I may want to make a site with another name and this keeps it from mixing with others. The "WB WebDesign" folder is where all the individual pages stay, like "index.htm" (This is one of the names that can be used for your starting page) and will load as soon as someone goes to the site. Other pages can have any name you desire as you will create the links to them, like "theplan.htm" or "graphics.htm". Then I made a folder named "images" within the "WB WebDesign" folder. Within the "images" folder I made 4 more folders named, "gif, jpg, png, and graphics". The three folders named (gif, jpg, png) contain only images with their respective extensions, which are used in the webpages of the site. The graphics folder has three folders in it named, "gif, jpg, animations". These folders are for storing the graphics and animations that are there for visitors to download. This helps me keep the site separate from the freebies I offer. Under the navigation buttons to the left, is a picture of my folder organization in tree format. At this point I needed to make the graphics for the backgrounds, buttons, titles, logos, banners and so forth that I would use. However the program of choice PaintShop Pro is not free. There is a program out that does almost every thing PaintShop Pro does and it is free. This program is called GIMP by Tor Lillqvist. (See the link on my Programs page and my Links page.) The interface is a little clumsy for me, but I also had some trouble with PaintShop Pro when I started. Any program that does as much as these do is bound to require some work to learn. I have not acquired the skills yet to produce the same quality with GIMP as with PaintShop Pro but as you can see even for a beginner it makes good graphics. I also used and combined the use of other programs with the results in GIMP. Example: I created the buttons with ZPaint a free and marvelous simple button making program, that is a must to have. Then I copied and pasted the image it created into Serif PhotoPlus 5.5 a free photo editing program. Using Serif PhotoPlus 5.5, I added the text to the buttons and exported them as Jpeg images. Then opening them with GIMP, I used the magic wand for selecting contiguous regions, to select the small white corners with a threshold of about 40. Then inverting the selection I copied and pasted it as a new image. Saved the new image, using the export feature to save them in gif format. I did this so the corners of the buttons would be transparent. For some of the background image tiles, I used GIMP to make images that were 200x200 pixel squares and painted them using the fill patterns that come with GIMP. On some of the background tiles I used a very nice free program called Reptile from Sausage Software. I did the logos and banners much the same way I did the buttons, except I saved images from the website of the company and altered them instead of using ZPaint. (If they didn't have any areas in them that were to be transparent I saved them in the jpg format). The banners I made on my "Banners & Logos" page were not made with the free programs as I have not found a good free animator program but I have found Gif Movie Gear to be a necessity for animations. It is also the most accurate transparency selector for gifs. For the title graphics I used GIMP and created a 600x200 image and painted it with the background of the page it would be on. If the image of the background didn't come from the fill GIMP patterns, I simply opened the pattern I used and exported it (into the folder GIMP uses for its patterns.) as a "pat" format which is the extension used by GIMP for it's paint fill patterns. I didn't always use the whole 600x200 pixel image. If the text, after it was filled with the proper pattern and had the proper bevel and shadow, was smaller than 600x200 pixels, then I cropped the excess and only kept what was needed. Well I have completed the graphics I need for these pages and have experimented with them to make sure they look as I desired as you will need to do also. Don't forget to optimize the graphics. In designing a website I have found it easier to start with a table (a space organizer for data arranged in rows and columns) that covers the entire page and has 2 columns and 2 rows. This also makes it easy to set the page width of the site. I chose it to fit a resolution of 800x600 as many people still need to use this resolution. The top row is for the title graphics and the bottom row is for the text or body of the page. Generally the top left cell is left empty but in this site I used it for a link to Trellian WebPage in consideration for them making such a good product and making it free. The left row is narrow and is used for the navigation buttons. Of course this is not a set rule and you may decide to have your navigation buttons, text or whatever, across the top or in a different configuration completely. Trellian WebPage makes the use of tables very easy. I made a second table inside the bottom left cell (a single space organizer for data) of the basic table and put the navigation buttons in it. A little about navigation buttons. MouseOver Button Wizard is a free program that creates the HTML code scripts for navigation buttons and is very easy to use. I didn't use this program because it uses scripts and I personally prefer to avoid scripts. I wasn't going to use mouseover at all as it requires either scripts or some HTML knowledge. But I decided to use them and include the HTML for download. So all you need to do is download the zip file, open it and copy my text. Then in the source mode of the Trellian WebPage, paste where you want them. (Note: a simple way to pick the place you want them is to place your cursor in the proper location while in the editor mode. Type a couple of letters like maybe rr then go to the source mode and the cursor will be next to the rr so if you highlight the rr in the source mode and paste, the buttons will appear where you want them.) Rename the buttons and links to what you used. After that, in the Trellian WebPage editor mode, you click on each button and select properties then select reset size. If you place the images in the same relative location as I did then it will work. I made the table like this so I could left click on the data marker , that is seen only in the edit mode of Trellian WebPage, this selects all the data between the markers, then I right click on the highlighted data, copy it, then I can go to another page for example, and paste. This is how I avoided having to make the navigation buttons for each separate page. Then on the pages with the arrows to the top of the page I simply inserted another table under the NB (navigation buttons) table and inserted the arrow graphic into it. I set the cell alignment by right clicking in the cell and selecting properties. Then selected vertical bottom under text formatting and set the horizontal as right (to be close to the text). Note sometimes the setting from the properties and the setting from the tool bar for justification / alignment won't automatically agree and you will need to make them both agree or the alignment won't be right. As the text of this page gets longer I drag the bottom edge of the arrow table down and the arrow moves with it. To make the arrow link work you must set an anchor at the very top of the page by, placing the cursor at the top of the page and in the toolbar menu insert select anchor and then name the anchor "top". Then select the arrow and add link; name the link with the name of the page, the pound symbol and the word top. Example: (design.htm#top). After you have pasted the images onto your page where you want them then you need to input your text. This is probably the most important part of the page, because it is the reason the people come to your page and why they come back (at least on this type of page.) You should not use special fonts, or font sizes for this step, because many people do not have a lot of special fonts in their computer, and it may make the text too hard to read. Typically the use of a font that is not available to your visitor will result in the use of the "Arial" font. The web design process is the same for the other pages except on some of them I inserted more tables within other tables to separate text and graphics for organization. You want to try an avoid using too many tables within tables as this makes the site too complex for editing. Note: when making tables you can choose to have the border to be visible and to adjust the size of the border. You can also set the cell space and padding (space is the empty area around the data, and padding is the thickness of the space between the cells, border is the thickness of the border its self.) I almost always use zero in all of them, unless I want the border to be seen as in the "Programs" page.